@media (max-width: 1024px) {
ul.nav > li > a{
padding: 0 6px;
}
.project-cover{ height: 500px; }
} @media (max-width: 992px) {
.sm-padding{ padding: 15px; }
.sm-br-none br{
display: none;
}
.fz-45{ font-size: 35px;}
.video-content{
padding: 0;
}
.sm-no-padding{
padding: 0;
}
.top-social{
margin-top: 10px;
}
.top-social li{
margin-right: 5px;
margin-left: 0;
}
.page-header{ height: 360px; }
.content-block-full .ptb-115,
.content-block-full .entry-content{
padding: 45px 0;
margin-left: 15px;
}
.content-block-full h2 br{
display: none;
}
.single-post-header h1{
font-size: 45px;
}
.related-posts-list li h4{
font-size: 18px;
}
#right-sidebar{
margin-top: 40px;
}
#left-sidebar{
margin-bottom: 40px;
}
.project-cover{ height: 420px; }
.rel-posrtfolios .wt-col{ padding: 10px; }
.portfolio-related-posts { margin-top: 35px; }
.portfolio-desc { margin-bottom: 20px; }
.portfolio-related-posts .ps-title { margin-bottom: 20px; }
}  @media all and (min-width: 480px) and (max-width: 768px) {
}  @media all and (max-width: 767px) {
body, p{
font-size: 14px;
line-height: 26px;
}
.shutter .wrapper,
.padding{ padding: 60px 0; }
.padding-100, .padding-120{ padding: 80px 0; }
.fz-40, .fz-45, .fz-50{ font-size: 30px; }
.xs-padding{
padding: 15px;
}
.xs-text-left{ text-align: left;}
.xs-text-center{ text-align: center; }
.xs-no-padding{ padding: 0; }
.xs-ptb-50{
padding-top: 50px;
padding-bottom: 50px;
}
.xs-t-white{ color: #fff; }
.xs-br-none br{ display: none; }
.mb-xs-20{ margin-bottom: 20px!important; }
.mb-xs-10{ margin-bottom: 10px; }
.mb-100{ margin-bottom: 40px; }
.single-post-header{ height: 450px; }
.transparent-header .page-header,
.page-header{ height: 200px; padding-top: 0; }
.page-header h1.page-title{ font-size: 28px; line-height: 32px; }
.breadcrumbs {
margin: 10px 0 0;
}
.testi-content{
margin-left: 0;
}
.bg-color{
width: 100%;
}
.google-map{
height: 280px;
}
.filter-items .padding-10{ padding: 5px; }
.subs-custom .email-field{ line-height: 43px; }
.single-post-header h1{
font-size: 35px;
}
.project-cover{ margin-bottom: 40px; }
.related-posts-list li{
width: 50%;
}
#scrollup {
width: 35px;
height: 35px;
bottom: 30px;
right: 30px;
}
#scrollup .scroll-to-top{
font-size: 8px;
line-height: 35px;
}
.full-width #right-sidebar,
.full-width #left-sidebar{
padding: 0 30px;
}
.full-width .pagination-wrap{
margin-left: 10px;
}
.comments-area .comment-reply-title,
.comments-area .comments-title {
font-size: 20px;
line-height: 1.1;
}
.comment-list li > .children li > .children{
margin-left: 0;
}
.sp-head-right{ float: none; }
.top-contact-info {
font-size: 13px;
}
.site-info,
.footer-menu{ text-align: center; }
.footer-menu li{
margin: 0 5px;
}
}  @media all and (max-width: 520px) {
.counter-section .col-xs-6{
float: left;
width: 50%;
}
.food-menu .padding-50{
padding: 40px;
}
.menu_list li h4, .menu_list li span.price{
font-size: 16px;
}
.ptb-140{
padding-top: 80px;
padding-bottom: 80px;
}
.subs-custom .col-xs-8,
.subs-custom .col-xs-4{
width: 100%;
padding: 10px;
}
.subs-custom .b-btn{ margin: 0; }
.related-posts-list li{
width: 100%;
}
.related-posts-list li:first-child{
padding-right: 0;
padding-bottom: 20px;
}
.related-posts-list li:last-child{
padding: 0;
}
.top-social{
margin-top: 10px;
}
.top-social li{
margin-right: 5px;
margin-left: 0;
}
.page-header h1{ font-size: 18px; }
.page-header.sine-post-header { padding: 80px 0; }
.blog-single .entry-footer{
display: block!important;
}
.post-navigation .nav-inner { padding: 10px 30px; }
.post-navigation a { font-size: 14px; }
.post-navigation a i { font-size: 20px; }
.entry-footer .meta-info{ max-width: 100%; }
.comment-list li > .children,
.comment-list li > .children li > .children{
margin-left: 20px;
}
.top-contact-info {
font-size: 12px;
}
.top-content-right{ display: none; }
#scrollup {
bottom: 20px;
right: 20px;
}
.pagination-wrap li .page-link{
width: 35px;
height: 35px;
line-height: 35px;
font-size: 12px;
}
.pagination-wrap li a{ line-height: 33px; }
}  @media all and (max-width: 420px) {
.post-navigation a span{ font-size: 13px; }
.post-navigation a .fa.fa-chevron-right { margin-left: 10px; }
.post-navigation a .fa.fa-chevron-left { margin-right: 10px; }
} @media all and (max-width: 598px) {
.admin-bar .fixed-top.header{
top: 0;
}
.tab-container{
min-height: 330px;
}
.author-bio .bio-inner{ display: block; }
.author-bio .bio-inner .avatar {
padding-right: 0;
margin-bottom: 20px;
}
} @media all and (max-width: 380px) {
h1.fz-45{
font-size: 20px;
}
h1.fz-60{
font-size: 30px;
}
.top-bar{ height: 30px; }
.top-contact-info {
font-size: 10px;
}
#comments,
.related-posts,
.post-navigation{
margin-top: 35px;
}
.post-navigation a .fa.fa-chevron-left { margin-right: 10px; }
.post-navigation a .fa.fa-chevron-right { margin-left: 10px; }
.post-navigation a .fa {
width: 25px;
height: 25px;
line-height: 23px;
}
.post-navigation a span {
font-size: 10px;
line-height: 23px;
}
}.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;cursor:hand;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(//escape.com.tr/wp-content/plugins/shutter-core/assets/css/owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}.swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;z-index:1}.swiper-container .swiper-slide figure{line-height:0}.swiper-container .elementor-lightbox-content-source{display:none}.swiper-container-no-flexbox .swiper-slide{float:left}.swiper-container-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-container-multirow>.swiper-wrapper{flex-wrap:wrap}.swiper-container-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-wp8-horizontal{touch-action:pan-y}.swiper-wp8-vertical{touch-action:pan-x}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:27px;height:44px;margin-top:-22px;z-index:10;cursor:pointer;background-size:27px 44px;background:no-repeat 50%}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M0 22L22 0l2.1 2.1L4.2 22l19.9 19.9L22 44 0 22z' fill='%23007aff'/%3E%3C/svg%3E");left:10px;right:auto}.swiper-button-prev.swiper-button-black,.swiper-container-rtl .swiper-button-next.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M0 22L22 0l2.1 2.1L4.2 22l19.9 19.9L22 44 0 22z'/%3E%3C/svg%3E")}.swiper-button-prev.swiper-button-white,.swiper-container-rtl .swiper-button-next.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M0 22L22 0l2.1 2.1L4.2 22l19.9 19.9L22 44 0 22z' fill='%23fff'/%3E%3C/svg%3E")}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M27 22L5 44l-2.1-2.1L22.8 22 2.9 2.1 5 0l22 22z' fill='%23007aff'/%3E%3C/svg%3E");right:10px;left:auto}.swiper-button-next.swiper-button-black,.swiper-container-rtl .swiper-button-prev.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M27 22L5 44l-2.1-2.1L22.8 22 2.9 2.1 5 0l22 22z'/%3E%3C/svg%3E")}.swiper-button-next.swiper-button-white,.swiper-container-rtl .swiper-button-prev.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M27 22L5 44l-2.1-2.1L22.8 22 2.9 2.1 5 0l22 22z' fill='%23fff'/%3E%3C/svg%3E")}.swiper-pagination{position:absolute;text-align:center;transition:.3s;transform:translateZ(0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:5px;left:0;width:100%}.swiper-pagination-bullet{width:6px;height:6px;display:inline-block;border-radius:50%;background:#000;opacity:.2}.swiper-pagination-fraction{color:#000}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-white .swiper-pagination-bullet{background:#fff}.swiper-pagination-bullet-active{opacity:1}.swiper-pagination-white .swiper-pagination-bullet-active{background:#fff}.swiper-pagination-black .swiper-pagination-bullet-active{background:#000}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:5px 0;display:block}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 6px}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:#000;position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progressbar{width:100%;height:4px;left:0;top:0}.swiper-container-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-progressbar.swiper-pagination-white{background:hsla(0,0%,100%,.5)}.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill{background:#fff}.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill{background:#000}.swiper-container-3d{perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:linear-gradient(270deg,rgba(0,0,0,.5),transparent)}.swiper-container-3d .swiper-slide-shadow-right{background-image:linear-gradient(90deg,rgba(0,0,0,.5),transparent)}.swiper-container-3d .swiper-slide-shadow-top{background-image:linear-gradient(0deg,rgba(0,0,0,.5),transparent)}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent)}.swiper-container-coverflow .swiper-wrapper,.swiper-container-flip .swiper-wrapper{-ms-perspective:1200px}.swiper-container-cube,.swiper-container-flip{overflow:visible}.swiper-container-cube .swiper-slide,.swiper-container-flip .swiper-slide{pointer-events:none;z-index:1}.swiper-container-cube .swiper-slide .swiper-slide,.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active,.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top,.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;backface-visibility:hidden}.swiper-container-cube .swiper-slide{visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube.swiper-container-rtl .swiper-slide{transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0;width:100%;height:100%;background:#000;opacity:.6;filter:blur(50px);z-index:0}.swiper-container-fade.swiper-container-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.elementor-pagination-position-outside .swiper-container{padding-bottom:30px}.elementor-pagination-position-outside .elementor-swiper-button{top:calc(50% - 30px / 2)}.elementor-swiper{position:relative}.elementor-main-swiper{position:static}.elementor-arrows-position-outside .swiper-container{width:calc(100% - 60px)}.elementor-arrows-position-outside .elementor-swiper-button-prev{left:0}.elementor-arrows-position-outside .elementor-swiper-button-next{right:0}.swiper-image-stretch .swiper-slide .swiper-slide-image{width:100%}.elementor-swiper-button{position:absolute;display:inline-flex;z-index:1;cursor:pointer;font-size:25px;color:hsla(0,0%,93.3%,.9);top:50%;transform:translateY(-50%)}.elementor-swiper-button svg{fill:hsla(0,0%,93.3%,.9);height:1em;width:1em}.elementor-swiper-button-prev{left:10px}.elementor-swiper-button-next{right:10px}.elementor-swiper-button.swiper-button-disabled{opacity:.3}.swiper-container-cube .elementor-swiper-button{transform:translate3d(0,-50%,1px)}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;animation:swiper-preloader-spin 1s steps(12) infinite}.swiper-lazy-preloader:after{display:block;content:"";width:100%;height:100%;background-size:100%;background:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath id='a' stroke='%236c6c6c' stroke-width='11' stroke-linecap='round' d='M60 7v20'/%3E%3C/defs%3E%3Cuse xlink:href='%23a' opacity='.27'/%3E%3Cuse xlink:href='%23a' opacity='.27' transform='rotate(30 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.27' transform='rotate(60 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.27' transform='rotate(90 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.27' transform='rotate(120 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.27' transform='rotate(150 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.37' transform='rotate(180 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.46' transform='rotate(210 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.56' transform='rotate(240 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.66' transform='rotate(270 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.75' transform='rotate(300 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.85' transform='rotate(330 60 60)'/%3E%3C/svg%3E") no-repeat 50%}.swiper-lazy-preloader-white:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath id='a' stroke='%23fff' stroke-width='11' stroke-linecap='round' d='M60 7v20'/%3E%3C/defs%3E%3Cuse xlink:href='%23a' opacity='.27'/%3E%3Cuse xlink:href='%23a' opacity='.27' transform='rotate(30 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.27' transform='rotate(60 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.27' transform='rotate(90 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.27' transform='rotate(120 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.27' transform='rotate(150 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.37' transform='rotate(180 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.46' transform='rotate(210 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.56' transform='rotate(240 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.66' transform='rotate(270 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.75' transform='rotate(300 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.85' transform='rotate(330 60 60)'/%3E%3C/svg%3E")}@keyframes swiper-preloader-spin{to{transform:rotate(1turn)}}.cssanimation, .cssanimation span {
animation-duration: 0.3s;
animation-fill-mode: both;
}
.cssanimation span { display: inline-block }
.infinite { animation-iteration-count: infinite !important } .hu__hu__ { animation: hu__hu__ 2s ease-in-out; animation-iteration-count: 1 }
@keyframes hu__hu__ {
50% { transform: translateY(30px) }
}
.leSnake span { animation: leSnake 1.5s ease-in-out; animation-iteration-count: 1 }
@keyframes leSnake {
from, to { transform: translateY(0px) }
50% { transform: translateY(30px) }
}
.lePeek span { animation-name: lePeek }
@keyframes lePeek {
25% {  transform: rotateX(30deg) translateY(10px) rotate(-13deg); }
50% { transform: translateY(-22px) rotate(3deg) scale(1.1);  }
}
.effect3d { animation-name: effect3d }
@keyframes effect3d {
to {
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15)
}
}
.leRainDrop span { animation-name: leRainDrop; animation-iteration-count: 1; }
@keyframes leRainDrop {
0%, 25%, 55%, 75%, 87%, 97%, 100% { transform: scaleX(1.0) }
26%, 56%, 76% { transform: scaleX(1.3) scaleY(0.8) }
31%, 61%, 81% { transform: scaleX(0.8) scaleY(1.2) }
76%, 88% { transform: scaleX(1.2) }
98% { transform: scaleX(1.1) }
}
.pepe { animation-name: pepe; animation-iteration-count: infinite }
@keyframes pepe {
from, 33%, 66%, to { transform: rotate(4deg) }
16%, 50%, 83% { transform: rotate(-4deg) }
}
.leWaterWave span { animation: leWaterWave .2s linear 1 }
@keyframes leWaterWave {
50% { transform: skewY(1deg) skewX(-1deg) scale(1.06) }
}
.lightning { animation-name: lightning }
@keyframes lightning {
from, 50%, to { opacity: 1 }
25%, 75% { opacity: 0 }
}
.leJoltZoom span { animation-name: leJoltZoom }
@keyframes leJoltZoom {
10% { font-size: 140% }
40% { font-size: 80% }
100% { font-size: 100% }
}
.typing {
width: 473px;
overflow: hidden;
white-space: nowrap;
border-right: 2px solid #7E2EA0;
animation: typing 2s steps(12, end), cursor .2s steps(12, end) infinite;
}
@keyframes typing {
from { width: 0 }
}
@keyframes cursor {
50% { border-color: transparent }
}
.electricity { animation-name: electricity; animation-iteration-count: infinite }
@keyframes electricity {
from, 37%, 67%, 85%, 93% { transform: translateY(30px) }
4%, 64%, 88% { transform: translateY(10px) }
8%, 24%, 32%, 44% { transform: translateY(5px) }
12%, 52%, 60%, 20% { transform: translateY(10px) }
16%, 40% { transform: translateY(5px) }
28%, 56% { transform: translateY(10px) }
48%, 72%, 80%, 96% { transform: translateY(30px) }
76%, to { transform: translateY(40px) }
}
.wipe {
width: 473px;
overflow: hidden;
margin: 0 auto;
display: inline-flex;
animation-name: wipe;
}
@keyframes wipe {
to { width: 0 }
}
.open {
width: 473px;
margin: 0 auto;
overflow: hidden;
display: inline-flex;
animation-name: open;
}
@keyframes open {
from { width: 0 }
}
.leMagnify span { animation-name: leMagnify }
@keyframes leMagnify {
50% {
transform: scale(1.8);
letter-spacing: 26px
}
}
.leBeat span { animation-name: leBeat; }
@keyframes leBeat {
14%, 42% { transform: scale(1.3) }
28%, 70% { transform: scale(1) }
} .leFadeIn span { animation-name: leFadeIn }
@keyframes leFadeIn {
from { opacity: 0 }
to { opacity: 1 }
}
.leFadeInLeft span { animation-name: leFadeInLeft }
@keyframes leFadeInLeft {
from {
opacity: 0;
transform: translateX(-60px);
}
to { opacity: 1 }
}
.leFadeInRight span { animation-name: leFadeInRight }
@keyframes leFadeInRight {
from {
opacity: 0;
transform: translateX(60px);
}
to { opacity: 1 }
}
.leFadeInTop span { animation-name: leFadeInTop }
@keyframes leFadeInTop {
from {
opacity: 0;
transform: translateY(-100%);
}
to { opacity: 1 }
}
.leFadeInBottom span { animation-name: leFadeInBottom }
@keyframes leFadeInBottom {
from {
opacity: 0;
transform: translateY(100%);
}
to { opacity: 1 }
} .leFadeOut span { animation-name: leFadeOut }
@keyframes leFadeOut {
to { opacity: 0 }
}
.leFadeOutLeft span { animation-name: leFadeOutLeft }
@keyframes leFadeOutLeft {
from { opacity: 1 }
to {
opacity: 0;
transform: translateX(-60px);
}
}
.leFadeOutRight span { animation-name: leFadeOutRight }
@keyframes leFadeOutRight {
from { opacity: 1 }
to {
opacity: 0;
transform: translateX(60px);
}
}
.leFadeOutTop span { animation-name: leFadeOutTop }
@keyframes leFadeOutTop {
from { opacity: 1 }
to {
opacity: 0;
transform: translateY(-100%);
}
}
.leFadeOutBottom span { animation-name: leFadeOutBottom }
@keyframes leFadeOutBottom {
from { opacity: 1 }
to {
opacity: 0;
transform: translateY(100%);
}
} .leMovingBackFromRight span { animation-name: leMovingBackFromRight; transform-origin: bottom }
@keyframes leMovingBackFromRight {
40% { transform: rotate(45deg) }
100% {
transform: rotate(0deg);
animation-timing-function: cubic-bezier(0,.9,.7,1.45)
}
}
.leMovingBackFromLeft span { animation-name: leMovingBackFromLeft; transform-origin: bottom }
@keyframes leMovingBackFromLeft {
40% { transform: rotate(-45deg) }
100% {
transform: rotate(0deg);
animation-timing-function: cubic-bezier(0,.9,.7,1.45)
}
} .leKickOutBehind span { animation-name: leKickOutFront; transform-origin: top }
@keyframes leKickOutFront {
40% { transform: rotate(45deg) }
100% {
transform: rotate(0deg);
animation-timing-function: cubic-bezier(0,.9,.7,1.45)
}
}
.leKickOutFront span { animation-name: leKickOutBehind; transform-origin: top }
@keyframes leKickOutBehind {
40% { transform: rotate(-45deg) }
100% {
transform: rotate(0deg);
animation-timing-function: cubic-bezier(0,.9,.7,1.45)
}
} .leSkateX span { animation-name: leScaleX; animation-iteration-count: 1 }
@keyframes leScaleX {
50% { transform: scaleX(0.4) }
}
.leSkateY span { animation-name: leSkateY; animation-iteration-count: 1 }
@keyframes leSkateY {
50% { transform: scaleY(0.4) }
}
.leSkateXY span { animation-name: leSkateXY; animation-iteration-count: 1; animation-duration: 1.5s; }
@keyframes leSkateXY {
25% { transform: scale3d(1, 0.4, 0) }
50% { transform: scale3d(0.4, 0.4, 1) }
75% { transform: scale3d(0.4, 1, 1) }
} .leScaleXIn span { animation-name: leScaleXIn }
@keyframes leScaleXIn {
from {
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
50% { opacity: 1 }
}
.leScaleXOut span { animation-name: leScaleXOut }
@keyframes leScaleXOut {
to {
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
from { opacity: 1 }
}
.leScaleYIn span { animation-name: leScaleYIn }
@keyframes leScaleYIn {
from {
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
50% { opacity: 1 }
}
.leScaleYOut span { animation-name: leScaleYOut }
@keyframes leScaleYOut {
to {
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
from { opacity: 1 }
} .leJump span { animation-name: leJump; animation-iteration-count: infinite }
@keyframes leJump {
to { transform: translateY(-20px) }
} .leAboundTop span { animation-name: leAboundTop }
@keyframes leAboundTop {
50% {
transform: translateY(-100px);
animation-timing-function: ease-in;
}
}
.leAboundBottom span { animation-name: leAboundBottom }
@keyframes leAboundBottom {
50% {
transform: translateY(100px);
animation-timing-function: ease-in;
}
}
.leAboundLeft span { animation-name: leAboundLeft }
@keyframes leAboundLeft {
50% {
transform: translateX(-100px);
animation-timing-function: ease-in
}
}
.leAboundRight span { animation-name: leAboundRight }
@keyframes leAboundRight {
50% {
transform: translateX(100px);
animation-timing-function: ease-in
}
} .leFlyInTop span { animation-name: leFlyInTop }
@keyframes leFlyInTop {
0% {
transform: translate(0px, -80px);
opacity: 0
}
50% {
transform: translate(10px, 50px);
animation-timing-function: ease-in-out
}
}
.leFlyInLeft span { animation-name: leFlyInLeft; animation-timing-function: ease-in-out }
@keyframes leFlyInLeft {
0% {
transform: translate(-40px, 0px);
opacity: 0;
}
50% { transform: translate(40px, 0px) }
}
.leFlyInRight span { animation-name: leFlyInRight; animation-timing-function: ease-in-out }
@keyframes leFlyInRight {
0% {
transform: translate(40px, 0px);
opacity: 0;
}
50% { transform: translate(-40px, 0px) }
}
.leFlyInBottom span { animation-name: leFlyInBottom }
@keyframes leFlyInBottom {
0% {
transform: translate(0px, 80px);
opacity: 0
}
50% {
transform: translate(10px, -50px);
animation-timing-function: ease-in-out
}
} .leFlyOutTop span { animation-name: leFlyOutTop }
@keyframes leFlyOutTop {
50% { transform: translate(0px, 50px) }
to {
transform: translate(0px, -100px);
opacity: 0;
}
}
.leFlyOutLeft span { animation-name: leFlyOutLeft; animation-timing-function: ease-in-out }
@keyframes leFlyOutLeft {
50% { transform: translate(40px, 0px) }
to {
transform: translate(-100px, 0px);
opacity: 0;
}
}
.leFlyOutRight span { animation-name: leFlyOutRight; animation-timing-function: ease-in-out }
@keyframes leFlyOutRight {
50% { transform: translate(-40px, 0px) }
to {
transform: translate(100px, 0px);
opacity: 0;
}
}
.leFlyOutBottom span { animation-name: leFlyOutBottom }
@keyframes leFlyOutBottom {
50% { transform: translate(0px, -40px) }
to {
transform: translate(0px, 100px);
opacity: 0;
}
} .leDoorCloseLeft span { animation-name: leDoorCloseLeft }
@keyframes leDoorCloseLeft {
from, to {
transform: perspective(400px);
transform-origin: left
}
from {
transform: rotateY(90deg);
opacity: 0;
}
to { opacity: 1 }
}
.leDoorOpenRight span { animation-name: leDoorOpenRight }
@keyframes leDoorOpenRight {
from, to {
transform: perspective(400px);
transform-origin: left
}
to {
transform: rotateY(90deg);
opacity: 0
}
}
.leDoorCloseRight span { animation-name: leDoorCloseRight }
@keyframes leDoorCloseRight {
from, to {
transform: perspective(400px);
transform-origin: right
}
from {
transform: rotateY(-90deg);
opacity: 0
}
to { opacity: 1 }
}
.leDoorOpenLeft span { animation-name: leDoorOpenLeft }
@keyframes leDoorOpenLeft {
from, to {
transform: perspective(400px);
transform-origin: right
}
to {
transform: rotateY(-90deg);
opacity: 0
}
} .leHangAndDropLeft span { animation-name: leHangAndDropLeft }
@keyframes leHangAndDropLeft {
from { transform-origin: left }
50% {
transform: rotate(100deg);
transform-origin: left
}
60% {
transform: rotate(90deg);
transform-origin: left
}
to {
transform: translateY(800px) rotate(70deg);
transform-origin: left
}
}
.leHangAndDropRight span { animation-name: leHangAndDropRight }
@keyframes leHangAndDropRight {
from { transform-origin: right }
50% {
transform: rotate(-100deg);
transform-origin: right;
}
60% {
transform: rotate(-90deg);
transform-origin: right;
}
to {
transform: translateY(800px) rotate(-70deg);
transform-origin: right;
}
} .leRencontre span { animation: leRencontre .4s; animation-iteration-count: 1 }
@keyframes leRencontre {
0%, 33%, 100% {
transform-origin: bottom;
animation-timing-function: cubic-bezier(.17,.67,.79,1.83)
}
33% { transform: translateY(-2px) rotate(-3deg) }
66% { transform: translateY(2px) rotate(3deg) }
}
.lePulseShake span { animation-name: lePulseShake; animation-iteration-count: 1 }
@keyframes lePulseShake {
90% { transform: scale(1) }
92% { transform: scale(1.2) }
96% { transform: scale(1, 1) }
98% { transform: scale(1.1) }
}
.leHorizontalShake span { animation-name: leHorizontalShake; animation-iteration-count: 1 }
@keyframes leHorizontalShake {
3%, 12%, 21%, 30%, 39%, 48%, 57%, 65%, 74%, 3%, 92% { transform: translateX(5px) }
6%, 15%, 24%, 33%, 42%, 51%, 60%, 68%, 77%, 86%, 95% { transform: translateX(3px) }
9%, 18%, 27%, 36%, 45%, 54%, 63%, 71%, 80%, 89%, 98% { transform: translateX(-5px) }
}
.leVerticalShake span { animation-name: leVerticalShake; animation-iteration-count: 1 }
@keyframes leVerticalShake {
3%, 12%, 21%, 30%, 39%, 48%, 57%, 65%, 74%, 83%, 92% { transform: translateY(5px) }
6%, 15%, 24%, 33%, 42%, 51%, 60%, 68%, 77%, 86%, 95% { transform: translateY(3px) }
9%, 18%, 27%, 36%, 45%, 54%, 63%, 71%, 80%, 89%, 98% { transform: translateY(-5px) }
}
.leMadMax span { animation-name: leMadMax; animation-iteration-count: 1 }
@keyframes leMadMax {
3%, 12%, 21%, 30%, 39%, 48%, 57%, 65%, 74%, 83%, 92% { transform: translateY(5px) scale(1.1) }
6%, 15%, 24%, 33%, 42%, 51%, 60%, 68%, 77%, 86%, 95% { transform: translateY(3px) scale(.8) }
9%, 18%, 27%, 36%, 45%, 54%, 63%, 71%, 80%, 89%, 98% { transform: translateY(-5px) scale(1.1) }
}
.leHorizontalTremble span { animation-name: leHorizontalTremble; animation-iteration-count: 1 }
@keyframes leHorizontalTremble {
3%, 21%, 39%, 57%, 74%, 92% { transform: translateX(5px) }
6%, 24%, 42%, 60%, 77%, 95% { transform: translateX(3px) }
9%, 27%, 45%, 63%, 80%, 98% { transform: translateX(-5px) }
}
.leVerticalTremble span { animation-name: leVerticalTremble; animation-iteration-count: 1 }
@keyframes leVerticalTremble {
3%, 21%, 39%, 57%, 74%, 92% { transform: translateY(5px) }
6%, 24%, 42%, 60%, 77%, 95% { transform: translateY(3px) }
9%, 27%, 45%, 63%, 80%, 98% { transform: translateY(-5px) }
}
.leCrazyCool span { animation-name: leCrazyCool; animation-iteration-count: 1 }
@keyframes leCrazyCool {
3%, 21%, 39%, 57%, 74%, 92% { transform: translateY(5px) scale(1.1) }
6%, 24%, 42%, 60%, 77%, 95% { transform: translateY(3px) scale(.8) }
9%, 27%, 45%, 63%, 80%, 98% { transform: translateY(-5px) scale(1.1) }
}
.leVibration span { animation: leVibration .1s linear 2 }
@keyframes leVibration {
50% { transform: skewY(1deg) skewX(-1deg) scale(1.06) }
} .lePushReleaseFrom span { animation-name: lePushReleaseFrom }
@keyframes lePushReleaseFrom {
from {
transform: scale(3, 3);
opacity: 0;
}
50% { transform: scale(.5, .5) }
}
.lePushReleaseFromLeft span { animation-name: lePushReleaseFromLeft }
@keyframes lePushReleaseFromLeft {
from {
transform: translateX(-100%);
opacity: 0
}
30% { transform: translateX(100px) }
}
.lePushReleaseFromTop span { animation-name: lePushReleaseFromTop }
@keyframes lePushReleaseFromTop {
from {
transform: translateY(-100%);
opacity: 0;
}
30% { transform: translateY(100px) }
}
.lePushReleaseFromBottom span { animation-name: lePushReleaseFromBottom }
@keyframes lePushReleaseFromBottom {
from {
transform: translateY(100%);
opacity: 0;
}
30% { transform: translateY(-100px) }
}
.lePushReleaseTo span { animation-name: lePushReleaseTo }
@keyframes lePushReleaseTo {
30% { transform: scale(.5, .5) }
to {
transform: scale(5, 5);
opacity: 0;
}
}
.lePushReleaseToTop span { animation-name: lePushReleaseToTop }
@keyframes lePushReleaseToTop {
30% { transform: translateY(100px) }
to {
transform: translateY(-100%);
opacity: 0
}
}
.lePushReleaseToBottom span { animation-name: lePushReleaseToBottom }
@keyframes lePushReleaseToBottom {
30% { transform: translateY(-100px) }
to {
transform: translateY(100%);
opacity: 0
}
} .leFlipInTop span { animation-name: leFlipInTop }
@keyframes leFlipInTop {
from {
transform: perspective(600px);
opacity: 0
}
30% {
transform: perspective(600px) rotateX(180deg);
transform-origin: 0 0;
animation-timing-function: ease-out;
}
to { transform: perspective(600px) }
}
.leFlipOutTop span { animation-name: leFlipOutTop }
@keyframes leFlipOutTop {
to {
transform: perspective(600px);
opacity: 0
}
70% {
transform: perspective(600px) rotateX(180deg);
transform-origin: 0 0;
animation-timing-function: ease-out;
}
to { transform: perspective(600px) }
}
.leFlipInBottom span { animation-name: leFlipInBottom }
@keyframes leFlipInBottom {
from {
transform: perspective(600px);
opacity: 0
}
30% {
transform: perspective(600px) rotateX(180deg);
transform-origin: bottom;
animation-timing-function: ease-out;
}
to { transform: perspective(600px) }
}
.leFlipOutBottom span { animation-name: leFlipOutBottom }
@keyframes leFlipOutBottom {
to {
transform: perspective(600px);
opacity: 0
}
70% {
transform: perspective(600px) rotateX(180deg);
transform-origin: bottom;
animation-timing-function: ease-out;
}
to { transform: perspective(600px) }
} .leElevateLeft span { animation-name: leElevateLeft }
@keyframes leElevateLeft {
from {
transform: translateY(100%) rotate(-20deg);
transform-origin: right;
opacity: 0;
}
40% {
transform: rotate(20deg);
transform-origin: right;
}
65% {
transform: rotate(0deg);
transform-origin: right;
}
}
.leElevateRight span { animation-name: leElevateRight }
@keyframes leElevateRight {
from {
transform: translateY(100%) rotate(20deg);
transform-origin: left;
opacity: 0;
}
40% {
transform: rotate(-20deg);
transform-origin: left;
}
65% {
transform: rotate(0deg);
transform-origin: left;
}
} .leRollFromLeft span { animation-name: leRollFromLeft }
@keyframes leRollFromLeft {
from {
transform: translateX(-60px) perspective(600px) rotateY(180deg);
opacity: 0
}
}
.leRollFromRight span { animation-name: leRollFromRight }
@keyframes leRollFromRight {
from {
transform: translateX(60px) perspective(600px) rotateY(-180deg);
opacity: 0
}
}
.leRollFromTop span { animation-name: leRollFromTop }
@keyframes leRollFromTop {
from {
transform: translateY(-60px) perspective(600px) rotateX(180deg);
opacity: 0
}
}
.leRollFromBottom span { animation-name: leRollFromBottom }
@keyframes leRollFromBottom {
from {
transform: translateY(60px) perspective(600px) rotateX(-180deg);
opacity: 0
}
} .leRollToLeft span { animation-name: leRollToLeft }
@keyframes leRollToLeft {
to {
transform: translateX(-60px) perspective(600px) rotateY(180deg);
opacity: 0
}
}
.leRollToRight span { animation-name: leRollToRight }
@keyframes leRollToRight {
to {
transform: translateX(60px) perspective(600px) rotateY(-180deg);
opacity: 0
}
}
.leRollToTop span { animation-name: leRollToTop }
@keyframes leRollToTop {
to {
transform: translateY(-60px) perspective(600px) rotateX(180deg);
opacity: 0
}
}
.leRollToBottom span { animation-name: leRollToBottom }
@keyframes leRollToBottom {
to {
transform: translateY(60px) perspective(600px) rotateX(-180deg);
opacity: 0
}
} .leRotateSkateInRight span { animation-name: leRotateSkateInRight }
@keyframes leRotateSkateInRight {
from {
transform: scaleX(0.2) translateX(100px);
opacity: 0;
}
}
.leRotateSkateInLeft span { animation-name: leRotateSkateInLeft }
@keyframes leRotateSkateInLeft {
from {
transform: scaleX(0.2) translateX(-100px);
opacity: 0;
}
}
.leRotateSkateInTop span { animation-name: leRotateSkateInTop }
@keyframes leRotateSkateInTop {
from {
transform: scaleY(0.2) translateY(-100px);
opacity: 0;
}
}
.leRotateSkateInBottom span { animation-name: leRotateSkateInBottom }
@keyframes leRotateSkateInBottom {
from {
transform: scaleY(0.2) translateY(100px);
opacity: 0;
}
} .leRotateSkateOutRight span { animation-name: leRotateSkateOutRight }
@keyframes leRotateSkateOutRight {
to {
transform: scaleX(0.2) translateX(100px);
opacity: 0;
}
}
.leRotateSkateOutLeft span { animation-name: leRotateSkateOutLeft }
@keyframes leRotateSkateOutLeft {
to {
transform: scaleX(0.2) translateX(-100px);
opacity: 0;
}
}
.leRotateSkateOutTop span { animation-name: leRotateSkateOutTop }
@keyframes leRotateSkateOutTop {
to {
transform: scaleY(0.2) translateY(-100px);
opacity: 0;
}
}
.leRotateSkateOutBottom span { animation-name: leRotateSkateOutBottom }
@keyframes leRotateSkateOutBottom {
to {
transform: scaleY(0.2) translateY(100px);
opacity: 0;
}
} .leRotateXZoomIn span { animation-name: leRotateXZoomIn }
@keyframes leRotateXZoomIn {
from {
transform: perspective(600px) translate3d(0, -60px, -2000px) rotateX(75deg);
opacity: 0
}
5% { transform: perspective(600px) translate3d(0, -60px, -1500px) rotateX(75deg) }
}
.leRotateXZoomOut span { animation-name: leRotateXZoomOut }
@keyframes leRotateXZoomOut {
95% { transform: perspective(600px) translate3d(0, -60px, -1500px) rotateX(75deg) }
to {
transform: perspective(600px) translate3d(0, -60px, -2000px) rotateX(75deg);
opacity: 0
}
}
.leRotateYZoomIn span { animation-name: leRotateYZoomIn }
@keyframes leRotateYZoomIn {
from {
transform: perspective(600px) translate3d(0, -60px, -2000px) rotateY(75deg);
opacity: 0
}
5% { transform: perspective(600px) translate3d(0, -60px, -1500px) rotateY(75deg) }
}
.leRotateYZoomOut span { animation-name: leRotateYZoomOut }
@keyframes leRotateYZoomOut {
95% { transform: perspective(600px) translate3d(0, -60px, -1500px) rotateY(75deg) }
to {
transform: perspective(600px) translate3d(0, -60px, -2000px) rotateY(75deg);
opacity: 0;
}
} .leRotateIn span { animation-name: leRotateIn }
@keyframes leRotateIn {
from {
transform: rotate(-180deg);
opacity: 0;
}
to { opacity: 1 }
}
.leRotateOut span { animation-name: leRotateOut }
@keyframes leRotateOut {
from { opacity: 1 }
to {
transform: rotate(180deg);
opacity: 0;
}
}
.leRotateInLeft span { animation-name: leRotateInLeft }
@keyframes leRotateInLeft {
from {
transform: rotate(-180deg) translateX(150px);
opacity: 0;
}
to { opacity: 1 }
}
.leRotateOutLeft span { animation-name: leRotateOutLeft }
@keyframes leRotateOutLeft {
from { opacity: 1 }
to {
transform: rotate(180deg) translateX(150px);
opacity: 0;
}
}
.leRotateInRight span { animation-name: leRotateInRight }
@keyframes leRotateInRight {
from {
transform: rotate(-180deg) translateX(-150px);
opacity: 0;
}
to { opacity: 1 }
}
.leRotateOutRight span { animation-name: leRotateOutRight }
@keyframes leRotateOutRight {
from { opacity: 1 }
to {
transform: rotate(180deg) translateX(-150px);
opacity: 0;
}
} .leSpinInLeft span { animation-name: leSpinInLeft }
@keyframes leSpinInLeft {
from, to { transform-origin: left bottom }
from {
transform: rotate(90deg);
opacity: 0;
}
}
.leSpinInRight span { animation-name: leSpinInRight }
@keyframes leSpinInRight {
from, to { transform-origin: right bottom }
from {
transform: rotate(-90deg);
opacity: 0;
}
}
.leSpinOutLeft span { animation-name: leSpinOutLeft }
@keyframes leSpinOutLeft {
from, to { transform-origin: left bottom }
to {
transform: rotate(90deg);
opacity: 0;
}
}
.leSpinOutRight span { animation-name: leSpinOutRight }
@keyframes leSpinOutRight {
from, to { transform-origin: right bottom }
to {
transform: rotate(-90deg);
opacity: 0;
}
} .leBlurIn span { animation-name: leBlurIn }
@keyframes leBlurIn {
from {
transform: scaleX(0.2);
filter: blur(20px);
opacity: 0;
}
}
.leBlurInRight span { animation-name: leBlurInRight }
@keyframes leBlurInRight {
from {
transform: scaleX(0.2) translateX(100px);
filter: blur(20px);
opacity: 0;
}
}
.leBlurInLeft span { animation-name: leBlurInLeft }
@keyframes leBlurInLeft {
from {
transform: scaleX(0.2) translateX(-100px);
filter: blur(20px);
opacity: 0;
}
}
.leBlurInTop span { animation-name: leBlurInTop }
@keyframes leBlurInTop {
from {
transform: scaleY(0.2) translateY(-100px);
filter: blur(20px);
opacity: 0;
}
}
.leBlurInBottom span { animation-name: leBlurInBottom }
@keyframes leBlurInBottom {
from {
transform: scaleY(0.2) translateY(100px);
filter: blur(20px);
opacity: 0;
}
} .leBlurOut span { animation-name: leBlurOut }
@keyframes leBlurOut {
to {
transform: scaleX(0.2);
filter: blur(20px);
opacity: 0;
}
}
.leBlurOutRight span { animation-name: leBlurOutRight }
@keyframes leBlurOutRight {
to {
transform: scaleX(0.2) translateX(100px);
filter: blur(20px);
opacity: 0;
}
}
.leBlurOutLeft span { animation-name: leBlurOutLeft }
@keyframes leBlurOutLeft {
to {
transform: scaleX(0.2) translateX(-100px);
filter: blur(20px);
opacity: 0;
}
}
.leBlurOutTop span { animation-name: leBlurOutTop }
@keyframes leBlurOutTop {
to {
transform: scaleY(0.2) translateY(-100px);
filter: blur(20px);
opacity: 0;
}
}
.leBlurOutBottom span { animation-name: leBlurOutBottom }
@keyframes leBlurOutBottom {
to {
transform: scaleY(0.2) translateY(100px);
filter: blur(20px);
opacity: 0;
}
} .lePopUp span { animation-name: lePopUp }
@keyframes lePopUp {
50% { transform: scale(1.5) }
}
.lePopUpLeft span { animation-name: lePopUpLeft }
@keyframes lePopUpLeft {
50% {
transform: translateX(-50px) scale(1.5);
animation-timing-function: ease-in;
}
}
.lePopUpRight span { animation-name: lePopUpRight }
@keyframes lePopUpRight {
50% {
transform: translateX(50px) scale(1.5);
animation-timing-function: ease-in;
}
} .lePopOut span { animation-name: lePopOut }
@keyframes lePopOut {
50% { transform: scale(.5) }
}
.lePopOutLeft span { animation-name: lePopOutLeft }
@keyframes lePopOutLeft {
50% {
transform: translateX(-50px) scale(.5);
animation-timing-function: ease-in;
}
}
.lePopOutRight span { animation-name: lePopOutRight }
@keyframes lePopOutRight {
50% {
transform: translateX(50px) scale(.5);
animation-timing-function: ease-in;
}
} .leBounceFromTop span { animation-name: leBounceFromTop }
@keyframes leBounceFromTop {
0%, 25%, 55%, 85%, 100% {
animation-timing-function: ease-out;
transform: translate3d(0, 0, 0);
}
41%, 44% {
animation-timing-function: ease-in;
transform: translate3d(0, -80px, 0) scale3d(1, 1.2, 1);
}
70% {
animation-timing-function: ease-in;
transform: translate3d(0, -20px, 0);
}
90% { transform: translate3d(0, -4px, 0) }
}
.leBounceFromDown span { animation-name: leBounceFromDown }
@keyframes leBounceFromDown {
0%, 25%, 55%, 85%, 100% {
animation-timing-function: ease-out;
transform: translate3d(0, 0, 0);
}
41%, 44% {
animation-timing-function: ease-in;
transform: translate3d(0, 80px, 0) scale3d(1, 1.2, 1);
}
70% {
animation-timing-function: ease-in;
transform: translate3d(0, 20px, 0);
}
90% { transform: translate3d(0, 4px, 0) }
}
.leBounceY span { animation-name: leBounceY }
@keyframes leBounceY {
0%, 25%, 55%, 85%, 100% {
animation-timing-function: ease-out;
transform: scale3d(1, 1, 1);
}
41%, 44% {
animation-timing-function: ease-in;
transform: scale3d(1, 2, 1);
}
70% {
animation-timing-function: ease-in;
transform: scale3d(1, 1.5, 1);
}
90% { transform: scale3d(1, 1.1, 1) }
}
.leBounceZoomIn span { animation-name: leBounceZoomIn }
@keyframes leBounceZoomIn {
0%, 25%, 55%, 85%, 100% {
animation-timing-function: ease-out;
transform: scale(1);
}
41%, 44% {
animation-timing-function: ease-in;
transform: scale(1.7);
}
70% {
animation-timing-function: ease-in;
transform: scale(1.9);
}
90% { transform: scale(1.1) }
}
.leBounceZoomOut span { animation-name: leBounceZoomOut }
@keyframes leBounceZoomOut {
0%, 25%, 55%, 85%, 100% {
animation-timing-function: ease-out;
transform: scale(1);
}
41%, 44% {
animation-timing-function: ease-in;
transform: scale(.5);
}
70% {
animation-timing-function: ease-in;
transform: scale(.7);
}
90% { transform: scale(.9) }
} .lePerspectiveOutTop span { animation-name: lePerspectiveOutTop; transform: perspective(500px); transform-style: preserve-3d }
@keyframes lePerspectiveOutTop {
50% { opacity: 1 }
to {
transform: perspective(500px) rotateX(90deg) translateY(-50px) translateZ(50px);
opacity: 0;
}
}
.lePerspectiveOutBottom span { animation-name: lePerspectiveOutBottom; transform: perspective(500px); transform-style: preserve-3d }
@keyframes lePerspectiveOutBottom {
50% { opacity: 1 }
to {
transform: perspective(500px) rotateX(90deg) translateY(50px) translateZ(-50px);
opacity: 0;
}
} .leZoomIn span { animation-name: leZoomIn }
@keyframes leZoomIn {
from {
transform: scale(10);
opacity: 0;
}
}
.leZoomInLeft span { animation-name: leZoomInLeft }
@keyframes leZoomInLeft {
from {
transform: scale(10) translateX(-150%);
opacity: 0;
}
}
.leZoomInRight span { animation-name: leZoomInRight }
@keyframes leZoomInRight {
from {
transform: scale(10) translateX(150%);
opacity: 0;
}
}
.leZoomInTop span { animation-name: LetterZoomInTop }
@keyframes LetterZoomInTop {
from {
transform: scale(10) translateY(-50%);
opacity: 0;
}
}
.leZoomInBottom span { animation-name: leZoomInBottom }
@keyframes leZoomInBottom {
from {
transform: scale(10) translateY(50%);
opacity: 0;
}
} .leZoomOut span { animation-name: leZoomOut }
@keyframes leZoomOut {
to {
transform: scale(10);
opacity: 0;
}
}
.leZoomOutLeft span { animation-name: leZoomOutLeft }
@keyframes leZoomOutLeft {
to {
transform: scale(10) translateX(-150%);
opacity: 0;
}
}
.leZoomOutRight span { animation-name: leZoomOutRight }
@keyframes leZoomOutRight {
to {
transform: scale(10) translateX(150%);
opacity: 0;
}
}
.leZoomOutTop span { animation-name: leZoomOutTop }
@keyframes leZoomOutTop {
to {
transform: scale(10) translateY(-50%);
opacity: 0;
}
}
.leZoomOutBottom span { animation-name: leZoomOutBottom }
@keyframes leZoomOutBottom {
to {
transform: scale(10) translateY(50%);
opacity: 0;
}
} .leDanceInTop span { animation-name: leDanceInTop; transform-origin: top }
@keyframes leDanceInTop {
from { opacity: 0 }
16% { transform: skew(-14deg) }
33% { transform: skew(12deg) }
49% { transform: skew(-8deg) }
66% { transform: skew(6deg) }
83% { transform: skew(-4deg) }
}
.leDanceInMiddle span { animation-name: leDanceInMiddle }
@keyframes leDanceInMiddle {
from { opacity: 0 }
16% { transform: skew(-14deg) }
33% { transform: skew(12deg) }
49% { transform: skew(-8deg) }
66% { transform: skew(6deg) }
83% { transform: skew(-4deg) }
}
.leDanceInBottom span { animation-name: leDanceInBottom; transform-origin: bottom }
@keyframes leDanceInBottom {
from { opacity: 0 }
16% { transform: skew(-14deg) }
33% { transform: skew(12deg) }
49% { transform: skew(-8deg) }
66% { transform: skew(6deg) }
83% { transform: skew(-4deg) }
} .leDanceOutTop span { animation-name: leDanceOutTop; transform-origin: top }
@keyframes leDanceOutTop {
16% { transform: skew(-14deg) }
33% { transform: skew(12deg) }
49% { transform: skew(-8deg) }
66% { transform: skew(6deg) }
83% { transform: skew(-4deg) }
to { opacity: 0 }
}
.leDanceOutMiddle span { animation-name: leDanceOutMiddle }
@keyframes leDanceOutMiddle {
16% { transform: skew(-14deg) }
33% { transform: skew(12deg) }
49% { transform: skew(-8deg) }
66% { transform: skew(6deg) }
83% { transform: skew(-4deg) }
to { opacity: 0 }
}
.leDanceOutBottom span { animation-name: leDanceOutBottom; transform-origin: bottom }
@keyframes leDanceOutBottom {
16% { transform: skew(-14deg) }
33% { transform: skew(12deg) }
49% { transform: skew(-8deg) }
66% { transform: skew(6deg) }
83% { transform: skew(-4deg) }
to { opacity: 0 }
} .oaoFadeIn span:nth-child(even) { animation-name: leoaoFadeInTop; animation-duration: .7s; animation-timing-function: ease-out; }
@keyframes leoaoFadeInTop {
from {
transform: translateY(-100px);
opacity: 0;
}
}
.oaoFadeIn span:nth-child(odd) { animation-name: leoaoFadeInBottom; animation-duration: .7s; animation-timing-function: ease-out;  }
@keyframes leoaoFadeInBottom {
from {
transform: translateY(100px);
opacity: 0;
}
}
.oaoFadeOut span:nth-child(even) { animation-name: leoaoFadeOutop; animation-duration: .7s; animation-timing-function: ease-in; }
@keyframes leoaoFadeOutop {
to {
transform: translateY(-100px);
opacity: 0;
}
}
.oaoFadeOut span:nth-child(odd) { animation-name: leoaoFadeOutBottom; animation-duration: .7s; animation-timing-function: ease-in;  }
@keyframes leoaoFadeOutBottom {
to {
transform: translateY(100%);
opacity: 0;
}
}
.oaoFlyIn span:nth-child(even) { animation-name: leoaoFlyInTop }
@keyframes leoaoFlyInTop {
0% {
transform: translateY(80px);
opacity: 0
}
50% {
transform: translateY(-50px);
animation-timing-function: ease-out
}
}
.oaoFlyIn span:nth-child(odd) { animation-name: leoaoFlyInBottom }
@keyframes leoaoFlyInBottom {
0% {
transform: translateY(-80px);
opacity: 0
}
50% {
transform: translateY(50px);
animation-timing-function: ease-out
}
}
.oaoFlyOut span:nth-child(even) { animation-name: leoaoFlyOutTop }
@keyframes leoaoFlyOutTop {
30% {
transform: translateY(80px);
animation-timing-function: ease-out
}
80% {
transform: translateY(-50px);
animation-timing-function: ease-out
}
to { opacity: 0 }
}
.oaoFlyOut span:nth-child(odd) { animation-name: leoaoFlyOutBottom }
@keyframes leoaoFlyOutBottom {
30% {
transform: translateY(-80px);
animation-timing-function: ease-out
}
80% {
transform: translateY(50px);
animation-timing-function: ease-out
}
to { opacity: 0 }
}
.oaoRotateIn span:nth-child(even) { animation-name: oaoRotateInTop }
@keyframes oaoRotateInTop {
from {
transform: translateY(-100px) rotate(360deg);
opacity: 0;
}
}
.oaoRotateIn span:nth-child(odd) { animation-name: oaoRotateInBottom }
@keyframes oaoRotateInBottom {
from {
transform: translateY(100px) rotate(360deg);
opacity: 0;
}
}
.oaoRotateOut span:nth-child(even) { animation-name: oaoRotateOutTop }
@keyframes oaoRotateOutTop {
to {
transform: translateY(-100px) rotate(360deg);
opacity: 0;
}
}
.oaoRotateOut span:nth-child(odd) { animation-name: oaoRotateOutBottom }
@keyframes oaoRotateOutBottom {
to {
transform: translateY(100px) rotate(360deg);
opacity: 0;
}
}
.oaoRotateXIn span:nth-child(even) { animation-name: oaoRotateXInTop }
@keyframes oaoRotateXInTop {
from {
transform: translateY(-100px) rotateX(360deg);
opacity: 0;
}
}
.oaoRotateXIn span:nth-child(odd) { animation-name: oaoRotateXInBottom }
@keyframes oaoRotateXInBottom {
from {
transform: translateY(100px) rotateX(360deg);
opacity: 0;
}
}
.oaoRotateXOut span:nth-child(even) { animation-name: oaoRotateXOutTop }
@keyframes oaoRotateXOutTop {
to {
transform: translateY(-100px) rotateX(360deg);
opacity: 0;
}
}
.oaoRotateXOut span:nth-child(odd) { animation-name: oaoRotateXOutBottom }
@keyframes oaoRotateXOutBottom {
to {
transform: translateY(100px) rotateX(360deg);
opacity: 0;
}
}
.oaoRotateYIn span:nth-child(even) { animation-name: oaoRotateYInTop }
@keyframes oaoRotateYInTop {
from {
transform: translateY(-100px) rotateY(360deg);
opacity: 0;
}
}
.oaoRotateYIn span:nth-child(odd) { animation-name: oaoRotateYInBottom }
@keyframes oaoRotateYInBottom {
from {
transform: translateY(100px) rotateY(360deg);
opacity: 0;
}
}
.oaoRotateYOut span:nth-child(even) { animation-name: oaoRotateYOutTop }
@keyframes oaoRotateYOutTop {
to {
transform: translateY(-100px) rotateY(360deg);
opacity: 0;
}
}
.oaoRotateYOut span:nth-child(odd) { animation-name: oaoRotateYOutBottom }
@keyframes oaoRotateYOutBottom {
to {
transform: translateY(100px) rotateY(360deg);
opacity: 0;
}
} .fadeIn { animation-name: fadeIn }
@keyframes fadeIn {
from { opacity: 0 }
to { opacity: 1 }
}
.fadeInLeft { animation-name: bfadeInLeft }
@keyframes bfadeInLeft {
from {
opacity: 0;
transform: translateX(-50px);
}
to { opacity: 1 }
}
.fadeInRight { animation-name: bfadeInRight }
@keyframes bfadeInRight {
from {
opacity: 0;
transform: translateX(50px);
}
to { opacity: 1 }
}
.fadeInDown { animation-name: bfadeInTop }
@keyframes bfadeInTop {
from {
opacity: 0;
transform: translateY(-50px);
}
to { opacity: 1 }
}
.fadeInUp { animation-name: bfadeInBottom }
@keyframes bfadeInBottom {
from {
opacity: 0;
transform: translateY(50px);
}
to { opacity: 1 }
} .fadeOut { animation-name: fadeOut }
@keyframes fadeOut {
to { opacity: 0 }
}
.fadeOutLeft { animation-name: fadeOutLeft }
@keyframes fadeOutLeft {
from { opacity: 1 }
to {
opacity: 0;
transform: translateX(-100%);
}
}
.fadeOutRight { animation-name: fadeOutRight }
@keyframes fadeOutRight {
from { opacity: 1 }
to {
opacity: 0;
transform: translateX(100%);
}
}
.fadeOutTop { animation-name: fadeOutTop }
@keyframes fadeOutTop {
from { opacity: 1 }
to {
opacity: 0;
transform: translateY(-100%);
}
}
.fadeOutBottom { animation-name: fadeOutBottom }
@keyframes fadeOutBottom {
from { opacity: 1 }
to {
opacity: 0;
transform: translateY(100%);
}
} .moveFromLeft { animation-name: moveFromLeft }
@keyframes moveFromLeft {
from { transform: translateX(-300px) }
}
.moveFromRight { animation-name: moveFromRight }
@keyframes moveFromRight {
from { transform: translateX(300px) }
}
.moveFromTop { animation-name: moveFromTop }
@keyframes moveFromTop {
from { transform: translateY(-300px) }
}
.moveFromBottom { animation-name: moveFromBottom }
@keyframes moveFromBottom {
from { transform: translateY(300px) }
} .moveToLeft { animation-name: moveToLeft }
@keyframes moveToLeft {
to { transform: translateX(-800px) }
}
.moveToRight { animation-name: moveToRight }
@keyframes moveToRight {
to { transform: translateX(800px) }
}
.moveToTop { animation-name: moveToTop }
@keyframes moveToTop {
to { transform: translateY(-800px) }
}
.moveToBottom { animation-name: moveToBottom }
@keyframes moveToBottom {
to { transform: translateY(800px) }
} .doorCloseFromLeft { animation-name: doorCloseFromLeft }
@keyframes doorCloseFromLeft {
from {
transform: perspective(400px) rotateY(90deg);
transform-origin: left;
opacity: 0;
}
50%, to {
transform: perspective(400px) rotateY(0deg);
transform-origin: left;
opacity: 1;
}
}
.doorOpenFromRight { animation-name: doorOpenFromRight }
@keyframes doorOpenFromRight {
from {
transform: perspective(400px) rotateY(0deg);
transform-origin: left;
opacity: 1;
}
50%, to {
transform: perspective(400px) rotateY(90deg);
transform-origin: left;
opacity: 0;
}
}
.doorCloseFromRight { animation-name: doorCloseFromRight }
@keyframes doorCloseFromRight {
from {
transform: perspective(400px) rotateY(-90deg);
transform-origin: right;
opacity: 0;
}
50%, to {
transform: perspective(400px) rotateY(0deg);
transform-origin: right;
opacity: 1;
}
}
.doorOpenFromLeft { animation-name: doorOpenFromLeft }
@keyframes doorOpenFromLeft {
from {
transform: perspective(400px) rotateY(0deg);
transform-origin: right;
opacity: 1;
}
50%, to {
transform: perspective(400px) rotateY(-90deg);
transform-origin: right;
opacity: 0;
}
} .heartbeatSlow { animation-name: heartbeatSlow; animation-iteration-count: 3; animation-duration: .5s }
@keyframes heartbeatSlow {
35%, 65% { transform: scale(1.2) }
}
.heartbeatFast { animation-name: heartbeatFast; animation-iteration-count: infinite }
@keyframes heartbeatFast {
14%, 42% { transform: scale(1.3) }
28%, 70% { transform: scale(1) }
} .hangOnLeft { animation-name: hangOnLeft }
@keyframes hangOnLeft {
from { transform-origin: left; }
40% {
transform: rotate(100deg);
transform-origin: left;
}
55% {
transform: rotate(80deg);
transform-origin: left;
}
70% {
transform: rotate(95deg);
transform-origin: left;
}
85% {
transform: rotate(85deg);
transform-origin: left;
}
100% {
transform: rotate(90deg);
transform-origin: left;
}
}
.hangOnRight { animation-name: hangOnRight }
@keyframes hangOnRight {
from { transform-origin: right; }
40% {
transform: rotate(-100deg);
transform-origin: right;
}
55% {
transform: rotate(-80deg);
transform-origin: right;
}
70% {
transform: rotate(-95deg);
transform-origin: right;
}
85% {
transform: rotate(-85deg);
transform-origin: right;
}
100% {
transform: rotate(-90deg);
transform-origin: right;
}
} .hangAndDropLeft { animation-name: hangAndDropLeft }
@keyframes hangAndDropLeft {
from { transform-origin: left }
50% {
transform: rotate(100deg);
transform-origin: left;
}
60% {
transform: rotate(90deg);
transform-origin: left;
opacity: 1;
}
to {
transform: translateY(300px) rotate(70deg);
transform-origin: left;
opacity: 0;
}
}
.hangAndDropRight { animation-name: hangAndDropRight }
@keyframes hangAndDropRight {
from { transform-origin: right }
50% {
transform: rotate(-100deg);
transform-origin: right;
}
60% {
transform: rotate(-90deg);
transform-origin: right;
opacity: 1;
}
to {
transform: translateY(300px) rotate(-70deg);
transform-origin: right;
opacity: 0
}
} .pulseShake { animation-name: pulseShake; animation-iteration-count: infinite }
@keyframes pulseShake {
90% { transform: scale(1) }
92% { transform: scale(1.2) }
96% { transform: scale(1, 1) }
98% { transform: scale(1.1) }
}
.horizontalShake { animation-name: horizontalShake; animation-iteration-count: infinite }
@keyframes horizontalShake {
3%, 12%, 21%, 30%, 39%, 48%, 57%, 65%, 74%, 83%, 92% { transform: translateX(5px) }
6%, 15%, 24%, 33%, 42%, 51%, 60%, 68%, 77%, 86%, 95% { transform: translateX(3px) }
9%, 18%, 27%, 36%, 45%, 54%, 63%, 71%, 80%, 89%, 98% { transform: translateX(-5px) }
}
.verticalShake { animation-name: verticalShake; animation-iteration-count: infinite }
@keyframes verticalShake {
3%, 12%, 21%, 30%, 39%, 48%, 57%, 65%, 74%, 83%, 92% { transform: translateY(5px) }
6%, 15%, 24%, 33%, 42%, 51%, 60%, 68%, 77%, 86%, 95% { transform: translateY(3px) }
9%, 18%, 27%, 36%, 45%, 54%, 63%, 71%, 80%, 89%, 98% { transform: translateY(-5px) }
}
.madMax { animation-name: madMax; animation-iteration-count: infinite }
@keyframes madMax {
3%, 12%, 21%, 30%, 39%, 48%, 57%, 65%, 74%, 83%, 92% { transform: translateY(5px) scale(1.1) }
6%, 15%, 24%, 33%, 42%, 51%, 60%, 68%, 77%, 86%, 95% { transform: translateY(3px) scale(.8) }
9%, 18%, 27%, 36%, 45%, 54%, 63%, 71%, 80%, 89%, 98% { transform: translateY(-5px) scale(1.1) }
}
.coolHorizontalShake { animation-name: coolHorizontalShake; animation-iteration-count: infinite }
@keyframes coolHorizontalShake {
3%, 21%, 39%, 57%, 74%, 92% { transform: translateX(5px) }
6%, 24%, 42%, 60%, 77%, 95% { transform: translateX(3px) }
9%, 27%, 45%, 63%, 80%, 98% { transform: translateX(-5px) }
}
.coolVerticalShake { animation-name: coolVerticalShake; animation-iteration-count: infinite }
@keyframes coolVerticalShake {
3%, 21%, 39%, 57%, 74%, 92% { transform: translateY(5px) }
6%, 24%, 42%, 60%, 77%, 95% { transform: translateY(3px) }
9%, 27%, 45%, 63%, 80%, 98% { transform: translateY(-5px) }
}
.quietMad { animation-name: quietMad; animation-iteration-count: infinite }
@keyframes quietMad {
3%, 21%, 39%, 57%, 74%, 92% { transform: translateY(5px) scale(1.1) }
6%, 24%, 42%, 60%, 77%, 95% { transform: translateY(3px) scale(.8) }
9%, 27%, 45%, 63%, 80%, 98% { transform: translateY(-5px) scale(1.1) }
}
.vibration { animation: vibration .1s linear infinite }
@keyframes vibration {
50% { transform: skewY(1deg) skewX(-1deg) scale(1.06) }
} .pushReleaseFrom { animation-name: pushReleaseFrom }
@keyframes pushReleaseFrom {
from {
transform: scale(3, 3);
opacity: 0;
}
30% { transform: scale(.5, .5) }
}
.pushReleaseFromLeft { animation-name: pushReleaseFromLeft }
@keyframes pushReleaseFromLeft {
from { transform: translateX(-100%); opacity: 0; }
30% { transform: translateX(100px); opacity: 1; }
}
.pushReleaseFromRight { animation-name: pushReleaseFromRight }
@keyframes pushReleaseFromRight {
from { transform: translateX(100%); opacity: 0; }
30% { transform: translateX(-100px); opacity: 1; }
}
.pushReleaseFromTop { animation-name: pushReleaseFromTop }
@keyframes pushReleaseFromTop {
from { transform: translateY(-100%); opacity: 0; }
30% { transform: translateY(100px); opacity: 1; }
}
.pushReleaseFromBottom { animation-name: pushReleaseFromBottom }
@keyframes pushReleaseFromBottom {
from { transform: translateY(100%); opacity: 0; }
30% { transform: translateY(-100px); opacity: 1; }
} .pushReleaseTo { animation-name: pushReleaseTo }
@keyframes pushReleaseTo {
30% { transform: scale(.5, .5) }
to {
transform: scale(5, 5);
opacity: 0;
}
}
.pushReleaseToLeft { animation-name: pushReleaseToLeft }
@keyframes pushReleaseToLeft {
30% { transform: translateX(100px) }
to {
transform: translateX(-100%);
opacity: 0;
}
}
.pushReleaseToRight { animation-name: pushReleaseToRight }
@keyframes pushReleaseToRight {
30% { transform: translateX(-100px) }
to {
transform: translateX(100%);
opacity: 0;
}
}
.pushReleaseToTop { animation-name: pushReleaseToTop }
@keyframes pushReleaseToTop {
30% { transform: translateY(100px) }
to {
transform: translateY(-100%);
opacity: 0;
}
}
.pushReleaseToBottom { animation-name: pushReleaseToBottom }
@keyframes pushReleaseToBottom {
30% { transform: translateY(-100px) }
to {
transform: translateY(100%);
opacity: 0;
}
} .flipX { animation-name: flipX }
@keyframes flipX {
from {
transform: perspective(600px) rotateX(-180deg);
opacity: 0;
}
to { transform: perspective(600px) rotateX(-360deg) }
}
.flipXZoomIn { animation-name: flipXZoomIn }
@keyframes flipXZoomIn {
from {
transform: perspective(600px) rotateX(0deg) scale(1);
animation-timing-function: ease-out;
}
40% {
transform: perspective(600px) rotateX(-180deg) scale(1.8);
animation-timing-function: ease-out;
}
80% {
transform: perspective(600px) rotateX(-360deg) scale(.7);
animation-timing-function: ease-in;
}
to  { transform: scale(1) }
}
.flipXZoomOut { animation-name: flipXZoomOut }
@keyframes flipXZoomOut {
from {
transform: perspective(600px) rotateX(0deg) scale(1);
animation-timing-function: ease-out;
}
40% {
transform: perspective(600px) rotateX(180deg) scale(1.8);
animation-timing-function: ease-out;
}
80% {
transform: perspective(600px) rotateX(360deg) scale(.7);
animation-timing-function: ease-in;
}
to  { transform: scale(1) }
} .flipY { animation-name: flipY }
@keyframes flipY {
from {
transform: perspective(600px) rotateY(180deg);
opacity: 0;
}
to { transform: perspective(600px) rotateY(360deg) }
}
.flipYZoomIn { animation-name: flipYZoomIn }
@keyframes flipYZoomIn {
from {
transform: perspective(600px) rotateY(0deg) scale(1);
animation-timing-function: ease-out;
}
40% {
transform: perspective(600px) rotateY(180deg) scale(1.6);
animation-timing-function: ease-out;
}
80% {
transform: perspective(600px) rotateY(360deg) scale(.7);
animation-timing-function: ease-in;
}
to  { transform: scale(1) }
}
.flipYZoomOut { animation-name: flipYZoomOut }
@keyframes flipYZoomOut {
from {
transform: perspective(600px) rotateY(0deg) scale(1);
animation-timing-function: ease-out;
}
40% {
transform: perspective(600px) rotateY(180deg) scale(.6);
animation-timing-function: ease-out;
}
80% {
transform: perspective(600px) rotateY(360deg) scale(1.8);
animation-timing-function: ease-in;
}
to  { transform: scale(1) }
} .skewLeft { animation-name: skewLeft }
@keyframes skewLeft {
70% { transform: skewX(40deg) }
}
.skewRight { animation-name: skewRight }
@keyframes skewRight {
70% { transform: skewX(-40deg) }
}
.skewInLeft { animation-name: skewInLeft }
@keyframes skewInLeft {
from {
opacity: 0;
transform: translateX(-250px) skewX(-40deg)
}
70% { transform: skewX(-30deg) }
}
.skewInRight { animation-name: skewInRight }
@keyframes skewInRight {
from {
opacity: 0;
transform: translateX(250px) skewX(40deg)
}
70% { transform: skewX(30deg) }
}
.skewOutLeft { animation-name: skewOutLeft }
@keyframes skewOutLeft {
20% { transform: skewX(40deg) }
to {
transform: translateX(-100%) skewX(40deg);
opacity: 0
}
}
.skewOutRight { animation-name: skewOutRight }
@keyframes skewOutRight {
20% { transform: skewX(-40deg) }
to {
transform: translateX(100%) skewX(-40deg);
opacity: 0
}
} .shockZoom { animation-name: shockZoom }
@keyframes shockZoom {
from { transform: matrix(5, 0, 0, 5, 0, 0) }
35% { transform: matrix(2, 0, 0, 2, 0, 0) }
43% { transform: matrix(1, 0, 0, 1, 0, 0) }
}
.shockInLeft { animation-name: shockInLeft }
@keyframes shockInLeft {
from { transform: matrix(1, 0, 0, 1, -800, 0) }
35% { transform: matrix(1, 0, 0, 1, 50, 0) }
43% { transform: matrix(1, 0, 0, 1, 0, 0) }
}
.shockInRight { animation-name: shockInRight }
@keyframes shockInRight {
from { transform: matrix(1, 0, 0, 1, 800, 0) }
35% { transform: matrix(1, 0, 0, 1, -50, 0) }
43% { transform: matrix(1, 0, 0, 1, 0, 0) }
}
.shockInTop { animation-name: shockInTop }
@keyframes shockInTop {
from { transform: matrix(1, 0, 0, 1, 0, -400) }
35% { transform: matrix(1, 0, 0, 1, 0, 50) }
43% { transform: matrix(1, 0, 0, 1, 0, 0) }
}
.shockInBottom { animation-name: shockInBottom }
@keyframes shockInBottom {
from { transform: matrix(1, 0, 0, 1, 0, 400) }
35% { transform: matrix(1, 0, 0, 1, 0, -50) }
43% { transform: matrix(1, 0, 0, 1, 0, 0) }
} .pullRelease { animation-name: pullRelease }
@keyframes pullRelease {
15% { transform: scale(1.8) }
}
.pushRelease { animation-name: pushRelease }
@keyframes pushRelease {
15% { transform: scale(.5) }
} .swingInLeft { animation-name: swingInLeft }
@keyframes swingInLeft {
from {
transform: matrix(3, 0, 0, 3, -800, 0);
animation-timing-function: ease-out;
}
50% { transform: matrix(1.3, 0, 0, 1.3, 20, 0) }
}
.swingInRight { animation-name: swingInRight }
@keyframes swingInRight {
from {
transform: matrix(3, 0, 0, 3, 800, 0);
animation-timing-function: ease-out;
}
50% { transform: matrix(1.3, 0, 0, 1.3, -20, 0) }
}
.swingInTop { animation-name: swingInTop }
@keyframes swingInTop {
from {
transform: matrix(3, 0, 0, 3, 0, -800);
animation-timing-function: ease-out;
}
50% { transform: matrix(1.3, 0, 0, 1.3, 0, 20) }
}
.swingInBottom { animation-name: swingInBottom }
@keyframes swingInBottom {
from {
transform: matrix(3, 0, 0, 3, 0, 800);
animation-timing-function: ease-out;
}
50% { transform: matrix(1.3, 0, 0, 1.3, 0, -20) }
} .elevateLeft { animation-name: elevateLeft }
@keyframes elevateLeft {
from {
transform: translateY(100%) rotate(-20deg);
transform-origin: right;
}
40% {
transform: rotate(20deg);
transform-origin: right;
}
65% {
transform: rotate(0deg);
transform-origin: right;
}
}
.elevateRight { animation-name: elevateRight }
@keyframes elevateRight {
from {
transform: translateY(100%) rotate(20deg);
transform-origin: left;
}
40% {
transform: rotate(-20deg);
transform-origin: left;
}
65% {
transform: rotate(0deg);
transform-origin: left;
}
} .rollFromLeft { animation-name: rollFromLeft }
@keyframes rollFromLeft {
from {
transform: translateX(-100%) perspective(600px) rotateY(180deg);
opacity: 0
}
to {
transform: translateX(0) perspective(600px) rotateY(0deg);
opacity: 1
}
}
.rollFromRight { animation-name: rollFromRight }
@keyframes rollFromRight {
from {
transform: translateX(100%) perspective(600px) rotateY(-180deg);
opacity: 0
}
to {
transform: translateX(0) perspective(600px) rotateY(0deg);
opacity: 1
}
}
.rollFromTop { animation-name: rollFromTop }
@keyframes rollFromTop {
from {
transform: translateY(-100%) perspective(600px) rotateY(180deg);
opacity: 0
}
to {
transform: translateY(0) perspective(600px) rotateY(0deg);
opacity: 1
}
}
.rollFromBottom { animation-name: rollFromBottom }
@keyframes rollFromBottom {
from {
transform: translateY(100%) perspective(600px) rotateY(-180deg);
opacity: 0
}
to {
transform: translateY(0) perspective(600px) rotateY(0deg);
opacity: 1
}
} .rollToLeft { animation-name: rollToLeft }
@keyframes rollToLeft {
from {
transform: translateX(0) perspective(600px) rotateY(0deg);
opacity: 1
}
to {
transform: translateX(-100%) perspective(600px) rotateY(180deg);
opacity: 0
}
}
.rollToRight { animation-name: rollToRight }
@keyframes rollToRight {
from {
transform: translateX(0) perspective(600px) rotateY(0deg);
opacity: 1
}
to {
transform: translateX(100%) perspective(600px) rotateY(-180deg);
opacity: 0
}
}
.rollToTop { animation-name: rollToTop }
@keyframes rollToTop {
from {
transform: translateY(0) perspective(600px) rotateX(0deg);
opacity: 1
}
to {
transform: translateY(-100%) perspective(600px) rotateX(180deg);
opacity: 0
}
}
.rollToBottom { animation-name: rollToBottom }
@keyframes rollToBottom {
to {
transform: translateY(0) perspective(600px) rotateX(0deg);
opacity: 1
}
to {
transform: translateY(100%) perspective(600px) rotateX(-180deg);
opacity: 0
}
} .rotate { animation-name: rotate; animation-timing-function: ease-in-out }
@keyframes rotate {
from { transform: rotate(0deg) }
to { transform: rotate(360deg) }
}
.rotateX { animation-name: rotateX }
@keyframes rotateX {
from { transform: perspective(600px) rotateX(0deg) }
to { transform: perspective(600px) rotateX(90deg) }
}
.rotateXIn { animation-name: rotateXIn }
@keyframes rotateXIn {
from {
transform: perspective(600px) translate3d(0, -60px, -2000px) rotateX(75deg);
opacity: 0;
}
5% { transform: perspective(600px) translate3d(0, -60px, -1500px) rotateX(75deg) }
}
.rotateXOut { animation-name: rotateXOut }
@keyframes rotateXOut {
95% { transform: perspective(600px) translate3d(0, -60px, -1500px) rotateX(75deg) }
to {
transform: perspective(600px) translate3d(0, -60px, -2000px) rotateX(75deg);
opacity: 0;
}
}
.rotateY { animation-name: rotateY }
@keyframes rotateY {
from { transform: perspective(600px) rotateY(0deg) }
to { transform: perspective(600px) rotateY(90deg) }
}
.rotateYIn { animation-name: rotateYIn }
@keyframes rotateYIn {
from {
transform: perspective(600px) translate3d(0, -60px, -2000px) rotateY(75deg);
opacity: 0;
}
5% { transform: perspective(600px) translate3d(0, -60px, -1500px) rotateY(75deg) }
}
.rotateYOut { animation-name: rotateYOut }
@keyframes rotateYOut {
95% { transform: perspective(600px) translate3d(0, -60px, -1500px) rotateY(75deg) }
to {
transform: perspective(600px) translate3d(0, -60px, -2000px) rotateY(75deg);
opacity: 0;
}
} .rotateInLeft { animation-name: rotateInLeft }
@keyframes rotateInLeft {
from {
opacity: 0;
transform: translateX(-100%) rotate(0deg)
}
to { transform: translateX(0px) rotate(360deg) }
}
.rotateInRight { animation-name: rotateInRight }
@keyframes rotateInRight {
from {
opacity: 0;
transform: translateX(100%) rotate(0deg)
}
to { transform: translateX(0px) rotate(-360deg) }
}
.rotateInTop { animation-name: rotateInTop }
@keyframes rotateInTop {
from {
opacity: 0;
transform: translateY(-400%) rotate(0deg)
}
to { transform: translateX(0px) rotate(360deg) }
}
.rotateInBottom { animation-name: rotateInBottom }
@keyframes rotateInBottom {
from {
opacity: 0;
transform: translateY(400%) rotate(0deg)
}
to { transform: translateX(0px) rotate(360deg) }
} .rotateOutLeft { animation-name: rotateOutLeft }
@keyframes rotateOutLeft {
from { transform: translateX(0px) rotate(360deg) }
to {
transform: translateX(-800px) rotate(0deg);
opacity: 0
}
}
.rotateOutRight { animation-name: rotateOutRight }
@keyframes rotateOutRight {
from { transform: translateX(0px) rotate(-360deg) }
to {
transform: translateX(800px) rotate(0deg);
opacity: 0
}
}
.rotateOutTop { animation-name: rotateOutTop }
@keyframes rotateOutTop {
from { transform: translateX(0px) rotate(360deg) }
to {
transform: translateY(-800px) rotate(0deg);
opacity: 0
}
}
.rotateOutBottom { animation-name: rotateOutBottom }
@keyframes rotateOutBottom {
from { transform: translateX(0px) rotate(360deg) }
to {
transform: translateY(800px) rotate(0deg);
opacity: 0
}
} .spinToLeft { animation-name: spinToLeft }
@keyframes spinToLeft {
from, to { transform-origin: left bottom }
from {
transform: rotate(90deg);
opacity: 0;
}
}
.spinToRight { animation-name: spinToRight }
@keyframes spinToRight {
from, to { transform-origin: right bottom }
from {
transform: rotate(-90deg);
opacity: 0;
}
}
.spinToTop { animation-name: spinToTop }
@keyframes spinToTop {
from, to { transform-origin: left bottom }
from {
transform: rotate(-90deg);
opacity: 0;
}
}
.spinToBottom { animation-name: spinToBottom }
@keyframes spinToBottom {
from, to { transform-origin: right bottom }
from {
transform: rotate(90deg);
opacity: 0;
}
} .spinFromLeft { animation-name: spinFromLeft }
@keyframes spinFromLeft {
from, to { transform-origin: left bottom }
to {
transform: rotate(90deg);
opacity: 0;
}
}
.spinFromRight { animation-name: spinFromRight }
@keyframes spinFromRight {
from, to { transform-origin: right bottom }
to {
transform: rotate(-90deg);
opacity: 0;
}
}
.spinFromTop { animation-name: spinFromTop }
@keyframes spinFromTop {
from, to { transform-origin: left bottom }
to {
transform: rotate(-90deg);
opacity: 0;
}
}
.spinFromBottom { animation-name: spinFromBottom }
@keyframes spinFromBottom {
from, to { transform-origin: right bottom }
to {
transform: rotate(90deg);
opacity: 0;
}
} .cssanimation.blurIn { animation-name: blurIn }
@keyframes blurIn {
from {
filter: blur(20px);
opacity: 0;
}
}
.cssanimation.blurInLeft { animation-name: blurInLeft }
@keyframes blurInLeft {
from {
transform: translateX(50px);
filter: blur(20px);
opacity: 0;
}
}
.cssanimation.blurInRight { animation-name: blurInRight }
@keyframes blurInRight {
from {
transform: translateX(-50px);
filter: blur(20px);
opacity: 0;
}
}
.cssanimation.blurInTop { animation-name: blurInTop }
@keyframes blurInTop {
from {
transform: translateY(50px);
filter: blur(20px);
opacity: 0;
}
}
.cssanimation.blurInBottom { animation-name: blurInBottom }
@keyframes blurInBottom {
from {
transform: translateY(-50px);
filter: blur(20px);
opacity: 0;
}
} .blurOut { animation-name: blurOut }
@keyframes blurOut {
85%, to { filter: blur(20px) }
to { opacity: 0 }
}
.blurOutLeft { animation-name: blurOutLeft }
@keyframes blurOutLeft {
85%, to {
filter: blur(20px);
transform: translateX(100%);
}
to { opacity: 0 }
}
.blurOutRight { animation-name: blurOutRight }
@keyframes blurOutRight {
85%, to {
filter: blur(20px);
transform: translateX(-100%);
}
to { opacity: 0 }
}
.blurOutTop { animation-name: blurOutTop }
@keyframes blurOutTop {
85%, to {
filter: blur(20px);
transform: translateY(100%);
}
to { opacity: 0 }
}
.blurOutBottom { animation-name: blurOutBottom }
@keyframes blurOutBottom {
85%, to {
filter: blur(20px);
transform: translateY(-100%);
}
to { opacity: 0 }
} .bounceFromTop { animation-name: bounceFromTop }
@keyframes bounceFromTop {
0%, 25%, 55%, 85%, 100% {
animation-timing-function: ease-out;
transform: translate3d(0, 0, 0);
}
41%, 44% {
animation-timing-function: ease-in;
transform: translate3d(0, -80px, 0) scale3d(1, 1.6, 1);
}
70% {
animation-timing-function: ease-in;
transform: translate3d(0, -20px, 0);
}
90% { transform: translate3d(0, -4px, 0) }
}
.bounceFromDown { animation-name: bounceFromDown }
@keyframes bounceFromDown {
0%, 25%, 55%, 85%, 100% {
animation-timing-function: ease-out;
transform: translate3d(0, 0, 0);
}
41%, 44% {
animation-timing-function: ease-in;
transform: translate3d(0, 80px, 0) scale3d(1, 1.2, 1);
}
70% {
animation-timing-function: ease-in;
transform: translate3d(0, 20px, 0);
}
90% { transform: translate3d(0, 4px, 0) }
}
.bounceX { animation-name: bounceX }
@keyframes bounceX {
0%, 25%, 55%, 85%, 100% {
animation-timing-function: ease-out;
transform: scale3d(1, 1, 1);
}
41%, 44% {
animation-timing-function: ease-in;
transform: scale3d(1.8, 1, 1);
}
70% {
animation-timing-function: ease-in;
transform: scale3d(1.5, 1, 1);
}
90% { transform: scale3d(1.1, 1, 1) }
}
.bounceY { animation-name: bounceY }
@keyframes bounceY {
0%, 25%, 55%, 85%, 100% {
animation-timing-function: ease-out;
transform: scale3d(1, 1, 1);
}
41%, 44% {
animation-timing-function: ease-in;
transform: scale3d(1, 2, 1);
}
70% {
animation-timing-function: ease-in;
transform: scale3d(1, 1.5, 1);
}
90% { transform: scale3d(1, 1.1, 1) }
}
.bounceZoomIn { animation-name: bounceZoomIn }
@keyframes bounceZoomIn {
0%, 25%, 55%, 85%, 100% {
animation-timing-function: ease-out;
transform: scale(1);
}
41%, 44% {
animation-timing-function: ease-in;
transform: scale(1.5);
}
70% {
animation-timing-function: ease-in;
transform: scale(1.3);
}
90% { transform: scale(1.1) }
}
.bounceZoomOut { animation-name: bounceZoomOut }
@keyframes bounceZoomOut {
0%, 25%, 55%, 85%, 100% {
animation-timing-function: ease-out;
transform: scale(1);
}
41%, 44% {
animation-timing-function: ease-in;
transform: scale(.3);
}
70% {
animation-timing-function: ease-in;
transform: scale(.5);
}
90% { transform: scale(.9) }
} .bounceInTop { animation-name: bounceInTop }
@keyframes bounceInTop {
0% { transform: translate3d(0, -300%, 0) }
58% { transform: translate3d(0, 27px, 0) }
73% { transform: translate3d(0, -12px, 0) }
88% { transform: translate3d(0, 7px, 0) }
}
.bounceInBottom { animation-name: bounceInBottom }
@keyframes bounceInBottom {
0% { transform: translate3d(0, 300%, 0) }
58% { transform: translate3d(0, -27px, 0) }
73% { transform: translate3d(0, 12px, 0) }
88% { transform: translate3d(0, -8px, 0) }
}
.bounceInLeft { animation-name: bounceInLeft }
@keyframes bounceInLeft {
0% { transform: translate3d(-300%, 0, 0) }
58% { transform: translate3d(27px, 0, 0) }
73% { transform: translate3d(-12px, 0, 0) }
88% { transform: translate3d(8px, 0, 0) }
}
.bounceInRight { animation-name: bounceInRight }
@keyframes bounceInRight {
0% { transform: translate3d(300%, 0, 0) }
58% { transform: translate3d(-27px, 0, 0) }
73% { transform: translate3d(12px, 0, 0) }
88% { transform: translate3d(-8px, 0, 0) }
} .bounceOutTop { animation-name: bounceOutTop }
@keyframes bounceOutTop {
18%, 33%, 48% { opacity: 1}
18% { transform: translate3d(0, 27px, 0) }
33% { transform: translate3d(0, -12px, 0) }
48% { transform: translate3d(0, 8px, 0) }
100% {
opacity: 0;
transform: translate3d(0, -300%, 0)
}
}
.bounceOutBottom { animation-name: bounceOutBottom }
@keyframes bounceOutBottom {
18%, 33%, 48% { opacity: 1}
18% { transform: translate3d(0, -27px, 0) }
33% { transform: translate3d(0, 12px, 0) }
48% { transform: translate3d(0, -8px, 0) }
100% {
opacity: 0;
transform: translate3d(0, 300%, 0)
}
}
.bounceOutLeft { animation-name: bounceOutLeft }
@keyframes bounceOutLeft {
18%, 33%, 48% { opacity: 1}
18% { transform: translate3d(27px, 0, 0) }
33% { transform: translate3d(-12px, 0, 0) }
48% { transform: translate3d(8px, 0, 0) }
100% {
opacity: 0;
transform: translate3d(-300%, 0, 0)
}
}
.bounceOutRight { animation-name: bounceOutRight }
@keyframes bounceOutRight {
18%, 33%, 48% { opacity: 1}
18% { transform: translate3d(-27px, 0, 0) }
33% { transform: translate3d(12px, 0, 0) }
48% { transform: translate3d(-8px, 0, 0) }
100% {
opacity: 0;
transform: translate3d(300%, 0, 0)
}
} .perspectiveToTop { animation-name: perspectiveToTop; transform: perspective(500px); transform-style: preserve-3d }
@keyframes perspectiveToTop {
50% { opacity: 1 }
to {
transform: perspective(500px) rotateX(90deg) translateY(-50px) translateZ(50px);
opacity: 0;
}
}
.perspectiveToBottom { animation-name: perspectiveToBottom; transform: perspective(500px); transform-style: preserve-3d }
@keyframes perspectiveToBottom {
50% { opacity: 1 }
to {
transform: perspective(500px) rotateX(90deg) translateY(50px) translateZ(-50px);
opacity: 0;
}
} .zoomIn { animation-name: zoomIn }
@keyframes zoomIn {
from {
transform: scale(10);
opacity: 0;
}
}
.zoomInLeft { animation-name: zoomInLeft }
@keyframes zoomInLeft {
from {
transform: scale(10) translateX(-50%);
opacity: 0;
}
}
.zoomInRight { animation-name: zoomInRight }
@keyframes zoomInRight {
from {
transform: scale(10) translateX(50%);
opacity: 0;
}
}
.zoomInTop { animation-name: zoomInTop }
@keyframes zoomInTop {
from {
transform: scale(10) translateY(-50%);
opacity: 0;
}
}
.zoomInBottom { animation-name: zoomInBottom }
@keyframes zoomInBottom {
from {
transform: scale(10) translateY(50%);
opacity: 0;
}
} .zoomOut { animation-name: zoomOut }
@keyframes zoomOut {
to {
transform: scale(10);
opacity: 0;
}
}
.zoomOutLeft { animation-name: zoomOutLeft }
@keyframes zoomOutLeft {
to {
transform: scale(10) translateX(-50%);
opacity: 0;
}
}
.zoomOutRight { animation-name: zoomOutRight }
@keyframes zoomOutRight {
to {
transform: scale(10) translateX(50%);
opacity: 0;
}
}
.zoomOutTop { animation-name: zoomOutTop }
@keyframes zoomOutTop {
to {
transform: scale(10) translateY(-50%);
opacity: 0;
}
}
.zoomOutBottom { animation-name: zoomOutBottom }
@keyframes zoomOutBottom {
to {
transform: scale(10) translateY(50%);
opacity: 0;
}
} .danceTop { animation-name: danceTop; transform-origin: top }
@keyframes danceTop {
16% { transform: skew(-14deg) }
33% { transform: skew(12deg) }
49% { transform: skew(-8deg) }
66% { transform: skew(6deg) }
83% { transform: skew(-4deg) }
}
.danceMiddle { animation-name: danceMiddle }
@keyframes danceMiddle {
16% { transform: skew(-14deg) }
33% { transform: skew(12deg) }
49% { transform: skew(-8deg) }
66% { transform: skew(6deg) }
83% { transform: skew(-4deg) }
}
.danceBottom { animation-name: danceBottom; transform-origin: bottom }
@keyframes danceBottom {
16% { transform: skew(-14deg) }
33% { transform: skew(12deg) }
49% { transform: skew(-8deg) }
66% { transform: skew(6deg) }
83% { transform: skew(-4deg) }
}.pswp {
display: none;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
overflow: hidden;
-ms-touch-action: none;
touch-action: none;
z-index: 1500;
-webkit-text-size-adjust: 100%; -webkit-backface-visibility: hidden;
outline: none; }
.pswp * {
-webkit-box-sizing: border-box;
box-sizing: border-box; }
.pswp img {
max-width: none; } .pswp--animate_opacity { opacity: 0.001;
will-change: opacity; -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
.pswp--open {
display: block; }
.pswp--zoom-allowed .pswp__img { cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in; }
.pswp--zoomed-in .pswp__img { cursor: -webkit-grab;
cursor: -moz-grab;
cursor: grab; }
.pswp--dragging .pswp__img { cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: grabbing; } .pswp__bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
will-change: opacity; }
.pswp__scroll-wrap {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden; }
.pswp__container,
.pswp__zoom-wrap {
-ms-touch-action: none;
touch-action: none;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0; } .pswp__container,
.pswp__img {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none; }
.pswp__zoom-wrap {
position: absolute;
width: 100%;
-webkit-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top; -webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); }
.pswp__bg {
will-change: opacity; -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
.pswp--animated-in .pswp__bg,
.pswp--animated-in .pswp__zoom-wrap {
-webkit-transition: none;
transition: none; }
.pswp__container,
.pswp__zoom-wrap {
-webkit-backface-visibility: hidden; }
.pswp__item {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden; }
.pswp__img {
position: absolute;
width: auto;
height: auto;
top: 0;
left: 0; } .pswp__img--placeholder {
-webkit-backface-visibility: hidden; } .pswp__img--placeholder--blank {
background: #222; }
.pswp--ie .pswp__img {
width: 100% !important;
height: auto !important;
left: 0;
top: 0; } .pswp__error-msg {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
font-size: 14px;
line-height: 16px;
margin-top: -8px;
color: #CCC; }
.pswp__error-msg a {
color: #CCC;
text-decoration: underline; }.pswp__button {
width: 44px;
height: 44px;
position: relative;
background: none;
cursor: pointer;
overflow: visible;
-webkit-appearance: none;
display: block;
border: 0;
padding: 0;
margin: 0;
float: right;
opacity: 0.75;
-webkit-transition: opacity 0.2s;
transition: opacity 0.2s;
-webkit-box-shadow: none;
box-shadow: none; }
.pswp__button:focus, .pswp__button:hover {
opacity: 1; }
.pswp__button:active {
outline: none;
opacity: 0.9; }
.pswp__button::-moz-focus-inner {
padding: 0;
border: 0; } .pswp__ui--over-close .pswp__button--close {
opacity: 1; }
.pswp__button,
.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
background: url(//escape.com.tr/wp-content/plugins/shutter-core/assets/lib/photoswipe/default-skin/default-skin.png) 0 0 no-repeat;
background-size: 264px 88px;
width: 44px;
height: 44px; }
@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) { .pswp--svg .pswp__button,
.pswp--svg .pswp__button--arrow--left:before,
.pswp--svg .pswp__button--arrow--right:before {
background-image: url(//escape.com.tr/wp-content/plugins/shutter-core/assets/lib/photoswipe/default-skin/default-skin.svg); }
.pswp--svg .pswp__button--arrow--left,
.pswp--svg .pswp__button--arrow--right {
background: none; } }
.pswp__button--close {
background-position: 0 -44px; }
.pswp__button--share {
background-position: -44px -44px; }
.pswp__button--fs {
display: none; }
.pswp--supports-fs .pswp__button--fs {
display: block; }
.pswp--fs .pswp__button--fs {
background-position: -44px 0; }
.pswp__button--zoom {
display: none;
background-position: -88px 0; }
.pswp--zoom-allowed .pswp__button--zoom {
display: block; }
.pswp--zoomed-in .pswp__button--zoom {
background-position: -132px 0; } .pswp--touch .pswp__button--arrow--left,
.pswp--touch .pswp__button--arrow--right {
visibility: hidden; } .pswp__button--arrow--left,
.pswp__button--arrow--right {
background: none;
top: 50%;
margin-top: -50px;
width: 70px;
height: 100px;
position: absolute; }
.pswp__button--arrow--left {
left: 0; }
.pswp__button--arrow--right {
right: 0; }
.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
content: '';
top: 35px;
background-color: rgba(0, 0, 0, 0.3);
height: 30px;
width: 32px;
position: absolute; }
.pswp__button--arrow--left:before {
left: 6px;
background-position: -138px -44px; }
.pswp__button--arrow--right:before {
right: 6px;
background-position: -94px -44px; } .pswp__counter,
.pswp__share-modal {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.pswp__share-modal {
display: block;
background: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 10px;
position: absolute;
z-index: 1600;
opacity: 0;
-webkit-transition: opacity 0.25s ease-out;
transition: opacity 0.25s ease-out;
-webkit-backface-visibility: hidden;
will-change: opacity; }
.pswp__share-modal--hidden {
display: none; }
.pswp__share-tooltip {
z-index: 1620;
position: absolute;
background: #FFF;
top: 56px;
border-radius: 2px;
display: block;
width: auto;
right: 44px;
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
-webkit-transform: translateY(6px);
-ms-transform: translateY(6px);
transform: translateY(6px);
-webkit-transition: -webkit-transform 0.25s;
transition: transform 0.25s;
-webkit-backface-visibility: hidden;
will-change: transform; }
.pswp__share-tooltip a {
display: block;
padding: 8px 12px;
color: #000;
text-decoration: none;
font-size: 14px;
line-height: 18px; }
.pswp__share-tooltip a:hover {
text-decoration: none;
color: #000; }
.pswp__share-tooltip a:first-child { border-radius: 2px 2px 0 0; }
.pswp__share-tooltip a:last-child {
border-radius: 0 0 2px 2px; }
.pswp__share-modal--fade-in {
opacity: 1; }
.pswp__share-modal--fade-in .pswp__share-tooltip {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0); } .pswp--touch .pswp__share-tooltip a {
padding: 16px 12px; }
a.pswp__share--facebook:before {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
top: -12px;
right: 15px;
border: 6px solid transparent;
border-bottom-color: #FFF;
-webkit-pointer-events: none;
-moz-pointer-events: none;
pointer-events: none; }
a.pswp__share--facebook:hover {
background: #3E5C9A;
color: #FFF; }
a.pswp__share--facebook:hover:before {
border-bottom-color: #3E5C9A; }
a.pswp__share--twitter:hover {
background: #55ACEE;
color: #FFF; }
a.pswp__share--pinterest:hover {
background: #CCC;
color: #CE272D; }
a.pswp__share--download:hover {
background: #DDD; } .pswp__counter {
position: absolute;
left: 0;
top: 0;
height: 44px;
font-size: 13px;
line-height: 44px;
color: #FFF;
opacity: 0.75;
padding: 0 10px; } .pswp__caption {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
min-height: 44px; }
.pswp__caption small {
font-size: 11px;
color: #BBB; }
.pswp__caption__center {
text-align: left;
max-width: 420px;
margin: 0 auto;
font-size: 13px;
padding: 10px;
line-height: 20px;
color: #CCC; }
.pswp__caption--empty {
display: none; } .pswp__caption--fake {
visibility: hidden; } .pswp__preloader {
width: 44px;
height: 44px;
position: absolute;
top: 0;
left: 50%;
margin-left: -22px;
opacity: 0;
-webkit-transition: opacity 0.25s ease-out;
transition: opacity 0.25s ease-out;
will-change: opacity;
direction: ltr; }
.pswp__preloader__icn {
width: 20px;
height: 20px;
margin: 12px; }
.pswp__preloader--active {
opacity: 1; }
.pswp__preloader--active .pswp__preloader__icn { background: url(//escape.com.tr/wp-content/plugins/shutter-core/assets/lib/photoswipe/default-skin/preloader.gif) 0 0 no-repeat; }
.pswp--css_animation .pswp__preloader--active {
opacity: 1; }
.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
-webkit-animation: clockwise 500ms linear infinite;
animation: clockwise 500ms linear infinite; }
.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
-webkit-animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; }
.pswp--css_animation .pswp__preloader__icn {
background: none;
opacity: 0.75;
width: 14px;
height: 14px;
position: absolute;
left: 15px;
top: 15px;
margin: 0; }
.pswp--css_animation .pswp__preloader__cut { position: relative;
width: 7px;
height: 14px;
overflow: hidden; }
.pswp--css_animation .pswp__preloader__donut {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 14px;
height: 14px;
border: 2px solid #FFF;
border-radius: 50%;
border-left-color: transparent;
border-bottom-color: transparent;
position: absolute;
top: 0;
left: 0;
background: none;
margin: 0; }
@media screen and (max-width: 1024px) {
.pswp__preloader {
position: relative;
left: auto;
top: auto;
margin: 0;
float: right; } }
@-webkit-keyframes clockwise {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@keyframes clockwise {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@-webkit-keyframes donut-rotate {
0% {
-webkit-transform: rotate(0);
transform: rotate(0); }
50% {
-webkit-transform: rotate(-140deg);
transform: rotate(-140deg); }
100% {
-webkit-transform: rotate(0);
transform: rotate(0); } }
@keyframes donut-rotate {
0% {
-webkit-transform: rotate(0);
transform: rotate(0); }
50% {
-webkit-transform: rotate(-140deg);
transform: rotate(-140deg); }
100% {
-webkit-transform: rotate(0);
transform: rotate(0); } }  .pswp__ui {
-webkit-font-smoothing: auto;
visibility: visible;
opacity: 1;
z-index: 1550; } .pswp__top-bar {
position: absolute;
left: 0;
top: 0;
height: 44px;
width: 100%; }
.pswp__caption,
.pswp__top-bar,
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
-webkit-backface-visibility: hidden;
will-change: opacity;
-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); } .pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
visibility: visible; }
.pswp__top-bar,
.pswp__caption {
background-color: rgba(0, 0, 0, 0.5); } .pswp__ui--fit .pswp__top-bar,
.pswp__ui--fit .pswp__caption {
background-color: rgba(0, 0, 0, 0.3); } .pswp__ui--idle .pswp__top-bar {
opacity: 0; }
.pswp__ui--idle .pswp__button--arrow--left,
.pswp__ui--idle .pswp__button--arrow--right {
opacity: 0; } .pswp__ui--hidden .pswp__top-bar,
.pswp__ui--hidden .pswp__caption,
.pswp__ui--hidden .pswp__button--arrow--left,
.pswp__ui--hidden .pswp__button--arrow--right { opacity: 0.001; } .pswp__ui--one-slide .pswp__button--arrow--left,
.pswp__ui--one-slide .pswp__button--arrow--right,
.pswp__ui--one-slide .pswp__counter {
display: none; }
.pswp__element--disabled {
display: none !important; }
.pswp--minimal--dark .pswp__top-bar {
background: none; }.section-heading h2{
font-size: 40px;
font-weight: 500;
line-height: 44px;
color: #222;
}
.section-heading p{
margin-bottom: 0;
} a,
a:hover{
transition: all 0.2s ease-in-out;
}
.elementor-text-editor p{ margin: 0; } .hover-in{
transition: .3s ease-out;
}
.hover-out{
transition: .3s ease-in;
} .wt-btn{
font-family: "Work Sans",sans-serif;
letter-spacing: 1px;
background-color: #000000;
color: #fff;
line-height: 60px;
display: inline-block;
padding: 0 50px;
border-radius: 0;
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
position: relative;
overflow: hidden;
z-index: 1;
-webkit-transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-moz-transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-ms-transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-o-transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.wt-align-justify .wt-btn{ display: block; }
.wt-btn:before{
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(255,255,255,0.2);
-webkit-transform-origin: right center;
-moz-transform-origin: right center;
-ms-transform-origin: right center;
transform-origin: right center;
-webkit-transform: scale(0, 1);
-moz-transform: scale(0, 1);
-ms-transform: scale(0, 1);
-o-transform: scale(0, 1);
transform: scale(0, 1);
-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-moz-transition: -moz-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-ms-transition: -ms-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-o-transition: -o-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: -1;
}
.wt-btn:hover{
color: #fff;
}
.wt-btn:hover:before{
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
} .wt-row{
display: block;
margin: 0 -10px;
}
.wt-row .wt-col{
float: left;
display: block;
padding: 0 10px;
}
.wt-row.wt-column-desktop-1 .wt-col{ width: 100%; }
.wt-row.wt-column-desktop-2 .wt-col{ width: 50%; }
.wt-row.wt-column-desktop-3 .wt-col{ width: 33.33%; }
.wt-row.wt-column-desktop-4 .wt-col{ width: 25%; }
.wt-row.wt-column-desktop-5 .wt-col{ width: 20%; }
.wt-row.wt-column-desktop-6 .wt-col{ width: 16.66%; }
@media (max-width: 992px) {
.wt-row.wt-column-tablet-1 .wt-col{ width: 100%; }
.wt-row.wt-column-tablet-2 .wt-col{ width: 50%; }
.wt-row.wt-column-tablet-3 .wt-col{ width: 33.33%; }
.wt-row.wt-column-tablet-4 .wt-col{ width: 25%; }
.wt-row.wt-column-tablet-5 .wt-col{ width: 20%; }
.wt-row.wt-column-tablet-6 .wt-col{ width: 16.66%; }
.dl-project-items{
margin-right: 0!important;
margin-left: 0!important;
}
}
@media (max-width: 480px) {
.wt-row.wt-column-mobile-1 .wt-col{ width: 100%; }
.wt-row.wt-column-mobile-2 .wt-col{ width: 50%; }
.wt-row.wt-column-mobile-3 .wt-col{ width: 33.33%; }
.wt-row.wt-column-mobile-4 .wt-col{ width: 25%; }
.wt-row.wt-column-mobile-5 .wt-col{ width: 20%; }
.wt-row.wt-column-mobile-6 .wt-col{ width: 16.66%; }
} .wt-callout{
display: flex;
align-items: center;
flex-wrap: wrap;
}
.wt-callout h2{
margin-bottom: 10px;
}
.wt-callout.wt-callout-align-center{
flex-direction: column;
}
.wt-callout.wt-callout-align-center .wt-callout-left{
margin-bottom: 20px;
}
.wt-callout.wt-callout-align-center .wt-callout-right,
.wt-callout.wt-callout-align-center .wt-callout-left{
text-align: center;
padding: 0;
}
.wt-callout.box_center{
justify-content: center;
}
.wt-callout.box_center .wt-callout-left{
flex: inherit;
}
.wt-callout .wt-callout-left{
flex: 1;
}
.wt-callout .wt-callout-right{
width: auto;
padding-left: 60px;
}
.wt-callout.box_center .wt-callout-right{
padding-left: 30px;
}
.wt-callout.wt-callout-align-left .wt-callout-right{
order: -1;
padding-right: 60px;
padding-left: 0
}
.wt-callout-desc{
font-weight: normal;
margin: 0;
}
.wt-callout-btn{
background-color: #000000;
display: flex;
align-items: center;
font-size: 14px;
color: #fff;
padding: 15px 30px;
border-radius: 2px;
font-weight: 600;
font-family: 'Work Sans', serif;
}
.wt-callout-btn:hover{
color: #fff;
opacity: 0.8;
}
.wt-callout-btn .wt-callout-icon-align-left{
order: -1;
}
@media (max-width: 750px) {
.wt-callout{
display: block;
}
.wt-callout.box_center{
text-align: center;
}
.wt-callout .wt-callout-right{
padding-left: 0;
margin-top: 20px;
}
.wt-callout.wt-callout-align-left .wt-callout-right{
padding: 0;
}
.wt-callout-btn{
display: inline-block;
}
.section-heading p br,
.section-heading h2 br{
display: none!important;
}
} .wt-piechart-container{
display: block;
overflow: hidden;
}
.wt-chart-item{
float: left;
display: block;
}
.wt-column-desktop-1 .wt-chart-item{ width: 100%; }
.wt-column-desktop-2 .wt-chart-item{ width: 50%; }
.wt-column-desktop-3 .wt-chart-item{ width: 33.33%; }
.wt-column-desktop-4 .wt-chart-item{ width: 25%; }
.wt-column-desktop-5 .wt-chart-item{ width: 20%; }
.wt-column-desktop-6 .wt-chart-item{ width: 16.66%; }
@media (max-width: 992px) {
.wt-column-tablet-1 .wt-chart-item{ width: 100%; }
.wt-column-tablet-2 .wt-chart-item{ width: 50%; }
.wt-column-tablet-3 .wt-chart-item{ width: 33.33%; }
.wt-column-tablet-4 .wt-chart-item{ width: 25%; }
.wt-column-tablet-5 .wt-chart-item{ width: 20%; }
.wt-column-tablet-6 .wt-chart-item{ width: 16.66%; }
}
@media (max-width: 480px) {
.wt-column-mobile-1 .wt-chart-item{ width: 100%; }
.wt-column-mobile-2 .wt-chart-item{ width: 50%; }
.wt-column-desktop-3 .wt-chart-item{ width: 33.33%; }
.wt-column-mobile-4 .wt-chart-item{ width: 25%; }
.wt-column-mobile-5 .wt-chart-item{ width: 20%; }
.wt-column-mobile-6 .wt-chart-item{ width: 16.66%; }
}
.wt-chart-item .wt-percentage{
position: relative;
display: block;
text-align: center;
}
.wt-chart-item .wt-percentage canvas{
max-width: 100%;
margin: 0 auto;
}
.wt-chart-item .wt-percentage .wt-circle-inner{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
}
.wt-chart-item .wt-percentage .wt-circle-inner span{
font-size: 70px;
line-height: 50px;
font-weight: 700;
color: #222;
position: relative;
padding-right: 20px;
}
.wt-chart-item .wt-percentage .wt-circle-inner span sub{
position: absolute;
right: 0;
top: 45px;
font-size: 20px;
font-weight: 400;
bottom: inherit;
}
.wt-chart-item .wt-percentage .wt-circle-inner h3{
color: #222;
font-size: 18px;
font-weight: 400;
margin: 0;
line-height: 24px;
} .wt-team-members{}
.dl-team-box{}
.dl-team-box .team-thumb{
position: relative;
overflow: hidden;
transition: all 0.2s ease-in-out;
}
.dl-team-box .team-thumb img{
width: 100%;
transition: all 0.2s ease-in-out;
}
.dl-team-box .team-content{
background-color: #fff;
padding: 25px 15px;
text-align: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
position: relative;
z-index: 1;
}
.dl-team-box .team-content:before{
background-color: #000000;
position: absolute;
content: "";
width: 100%;
height: 3px;
left: 0;
bottom: 0;
z-index: -1;
}
.dl-team-box .team-content h3{
font-size: 20px;
color: #222;
font-weight: 600;
line-height: 25px;
}
.dl-team-box .team-content span{
display: block;
text-transform: uppercase;
font-size: 12px;
font-weight: 600;
color: #555;
letter-spacing: 1px;
}
.dl-team-box .team-social{
position: absolute;
width: 100%;
height: auto;
left: 0;
bottom: 0;
display: flex;
justify-content: space-between;
margin: 0;
padding: 0;
list-style: none;
align-self: stretch!important;
opacity: 0;
visibility: hidden;
transform: translateY(40px);
}
.dl-team-box:hover .team-social{
visibility: visible;
opacity: 1;
transform: translateY(0);
transition: all 0.2s ease-in-out;
}
.dl-team-box:hover .team-thumb img{
transform: scale(1.1);
}
.dl-team-box .team-social li{
text-align: center;
width: 25%;
}
.dl-team-box .team-social li a{
font-size: 15px;
background-color: #fff;
height: 40px;
line-height: 40px;
display: block;
color: #fff;
}
.dl-team-box .team-social li a:hover{
opacity: 0.8;
}
.dl-team-box .team-social li a.fb{
background-color: #4267b2;
}
.dl-team-box .team-social li a.tt{
background-color: #55acee;
}
.dl-team-box .team-social li a.insta{
background-color: #e1306c;
}
.dl-team-box .team-social li a.pt{
background-color: #bd081c; 
}
.dl-team-box .team-social li a.ld{
background-color: #0077b5; 
} .dl-project-items{}
.dl-project-box{
overflow: hidden;
position: relative;
transition: all 0.2s ease-in-out;
}
.dl-project-box .project-thumb{
position: relative;
transition: all 0.2s ease-in-out;
}
.dl-project-box .project-thumb img{
width: 100%;
}
.dl-project-box .project-content{
position: absolute;
width: 100%;
height: auto;
left: 0;
bottom: 0;
padding: 35px;
transition: all 0.2s ease-in-out;
}
.dl-project-box .project-thumb:before{
display: block;
position: absolute;
content: '';
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(to right top, #1b1b1b, #1b1b1bad, #55555500, #b9b9b900, #ffffff00);
transition: all 0.9s ease-in-out;
}
.dl-project-box:hover .project-thumb{
transform: scale(1.05);
}
.dl-project-box:hover .project-thumb:before{
background-image: linear-gradient(to right top, #000000, #111111ad, #1d1d1d50, #21212100, #25252500);
transition: all 0.9s ease-in-out;
}
.dl-project-box .project-content h3{
font-size: 24px;
font-weight: 600;
line-height: 32px;
}
.dl-project-box .project-content h3 a{
color: #fff;
}
.dl-project-box .project-content h3 a:hover{
color: #000000;
}
.dl-project-box .project-content span{
background-color: #000000;
padding: 5px 10px;
text-transform: uppercase;
font-size: 10px;
font-weight: 700;
color: #fff;
letter-spacing: 1px;
margin-bottom: 10px;
display: inline-block;
} .dl-filter-wrap{
margin: 0 0 40px;
display: block;
}
.dl-filter-wrap .dl-project-filter{
list-style: none;
display: inline-block;
padding: 0;
}
.dl-filter-wrap .dl-project-filter li{
display: inline-block;
margin-right: 10px;
font-size: 13px;
font-family: "Work Sans", sans-serif;
color: #333;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.dl-filter-wrap.center .dl-project-filter li{
margin: 0 5px;
}
.dl-filter-wrap.left .dl-project-filter li{
margin-left: 10px;
}
.dl-filter-wrap .dl-project-filter li:hover,
.dl-filter-wrap .dl-project-filter li.active{
color: #000000;
transition: all 0.3s ease-in-out;
} .dl-project-carousel{ overflow: hidden; }
.dl-project-nav{}
.dl-project-nav .owl-nav{}
.dl-project-nav .owl-nav div{
background-color: rgba(255,255,255,0.1);
display: block;
text-align: center;
color: #fff;
line-height: calc(45px - 2px);
border: 1px solid transparent;
font-size: 12px;
width: 45px;
height: 45px;
position: absolute;
left: -100px;
top: calc(50% - 20px);
transition: all 0.5s linear;
}
.dl-project-nav .owl-nav div.owl-next{
left: auto;
right: -100px;
}
.dl-project-nav .owl-nav div:hover{
background-color: rgba(255,255,255,0.3);
color: #fff;
transition: all 0.3s ease-in-out;
}
.dl-project-nav:hover .owl-nav div{
left: 20px;
transition: all 0.5s linear;
}
.dl-project-nav:hover .owl-nav div.owl-next{
left: auto;
right: 20px;
}
.dl-project-nav .owl-dots{
width: 100%;
display: block;
text-align: center;
position: absolute;
left: 0;
bottom: -60px;
}
.dl-project-nav .owl-dots div{
background-color: #999;
display: inline-block;
width: 10px;
height: 10px;
margin: 0 3px;
border-radius: 50%;
}
.dl-project-nav .owl-dots div.active{
background-color: rgba(61, 100, 244,1);
} .grid-gallery {
max-width: 100%;
list-style: none;
padding: 0;
margin: 0;
}
.grid-gallery li {
display: block;
float: left;
padding: 5px;
width: 33.33%;
opacity: 0;
}
.grid-gallery li a{
transition: all 0.2s ease-in-out;
}
.grid-gallery li a:hover{
-webkit-filter: grayscale(1);
filter: grayscale(1);
transition: all 0.2s ease-in-out;
}
.grid-gallery.column-2 li{
width: 50%;
}
.grid-gallery.column-4 li{
width: 25%;
}
.grid-gallery.column-1 li{
width: 100%;
}
.grid-gallery li.shown,
.no-js .grid-gallery li,
.no-cssanimations .grid-gallery li {
opacity: 1;
}
.grid-gallery li a,
.grid-gallery li img {
outline: none;
border: none;
display: block;
width: 100%;
} .grid-gallery.effect-1 li.animate {
-webkit-animation: fadeIn 0.65s ease forwards;
animation: fadeIn 0.65s ease forwards;
}
@-webkit-keyframes fadeIn {
0% { }
100% { opacity: 1; }
}
@keyframes fadeIn {
0% { }
100% { opacity: 1; }
} .grid-gallery.effect-2 li.animate {
-webkit-transform: translateY(200px);
transform: translateY(200px);
-webkit-animation: moveUp 0.65s ease forwards;
animation: moveUp 0.65s ease forwards;
}
@-webkit-keyframes moveUp {
0% { }
100% { -webkit-transform: translateY(0); opacity: 1; }
}
@keyframes moveUp {
0% { }
100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
} .grid-gallery.effect-3 li.animate {
-webkit-transform: scale(0.6);
transform: scale(0.6);
-webkit-animation: scaleUp 0.65s ease-in-out forwards;
animation: scaleUp 0.65s ease-in-out forwards;
}
@-webkit-keyframes scaleUp {
0% { }
100% { -webkit-transform: scale(1); opacity: 1; }
}
@keyframes scaleUp {
0% { }
100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
} .grid-gallery.effect-4 {
-webkit-perspective: 1300px;
perspective: 1300px;
}
.grid-gallery.effect-4 li.animate {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(400px) translateY(300px) rotateX(-90deg);
transform: translateZ(400px) translateY(300px) rotateX(-90deg);
-webkit-animation: fallPerspective .8s ease-in-out forwards;
animation: fallPerspective .8s ease-in-out forwards;
}
@-webkit-keyframes fallPerspective {
0% { }
100% { -webkit-transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
}
@keyframes fallPerspective {
0% { }
100% { -webkit-transform: translateZ(0px) translateY(0px) rotateX(0deg); transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
} .grid-gallery.effect-5 {
-webkit-perspective: 1300px;
perspective: 1300px;
}
.grid-gallery.effect-5 li.animate {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50% -300px;
transform-origin: 50% 50% -300px;
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
-webkit-animation: fly .8s ease-in-out forwards;
animation: fly .8s ease-in-out forwards;
}
@-webkit-keyframes fly {
0% { }
100% { -webkit-transform: rotateX(0deg); opacity: 1; }
}
@keyframes fly {
0% { }
100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; }
} .grid-gallery.effect-6 {
-webkit-perspective: 1300px;
perspective: 1300px;
}
.grid-gallery.effect-6 li.animate {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: rotateX(-80deg);
transform: rotateX(-80deg);
-webkit-animation: flip .8s ease-in-out forwards;
animation: flip .8s ease-in-out forwards;
}
@-webkit-keyframes flip {
0% { }
100% { -webkit-transform: rotateX(0deg); opacity: 1; }
}
@keyframes flip {
0% { }
100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; }
} .grid-gallery.effect-7 {
-webkit-perspective: 1300px;
perspective: 1300px;
}
.grid-gallery.effect-7 li.animate {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-animation: helix .8s ease-in-out forwards;
animation: helix .8s ease-in-out forwards;
}
@-webkit-keyframes helix {
0% { }
100% { -webkit-transform: rotateY(0deg); opacity: 1; }
}
@keyframes helix {
0% { }
100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); opacity: 1; }
} .grid-gallery.effect-8 {
-webkit-perspective: 1300px;
perspective: 1300px;
}
.grid-gallery.effect-8 li.animate {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: scale(0.4);
transform: scale(0.4);
-webkit-animation: popUp .8s ease-in forwards;
animation: popUp .8s ease-in forwards;
}
@-webkit-keyframes popUp {
0% { }
70% { -webkit-transform: scale(1.1); opacity: .8; -webkit-animation-timing-function: ease-out; }
100% { -webkit-transform: scale(1); opacity: 1; }
}
@keyframes popUp {
0% { }
70% { -webkit-transform: scale(1.1); transform: scale(1.1); opacity: .8; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
}
@media screen and (max-width: 900px) {
.grid-gallery li {
width: 50%;
}
}
@media screen and (max-width: 400px) {
.grid-gallery li {
width: 100%;
}
} .counter-box h3{
font-weight: 800;
font-size: 32px;
margin-bottom: 5px;
}
.counter-box h4{
font-size: 16px;
text-transform: uppercase;
}
.counter-box i{
color: #fff;
font-size: 35px;
margin-bottom: 10px;
} .sponsor-list{}
.sponsor-list .sponsor-box{
padding: 5px;
cursor: pointer;
}
.sponsor-box img{
opacity: 0.6;
transition: all 0.2s ease-in-out;
width: 100%;
}
.sponsor-box:hover img{
opacity: 1;
} .sponsor-carousel.nav-center .owl-nav div{
background-color: transparent;
border: none;
color: #555;
font-size: 16px;
} .wt-list{
list-style: none;
padding: 0;
margin: 0;
}
.wt-list .list-item{
position: relative;
padding-left: 75px;
}
.wt-list .list-item .list-icon{
border-style: solid;
width: 60px;
height: 60px;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border-radius: 50%;
position: absolute;
left: 0;
top: 0;
transition: all 0.2s ease-in-out;
}
.wt-list .list-item .list-icon i,
.wt-list .list-item .list-icon span{
width: 100%;
display: block;
text-align: center;
}
.wt-list .list-item h4{
margin-bottom: 0;
}
.wt-list .list-item p{
margin: 0;
font-weight: normal;
} .wpcf7{
max-width: 100%!important;
}
.wt-cf7-form{}
.wt-cf7-form .wpcf7 .wpcf7-response-output{
margin-top: 20px;
}
.wt-cf7-form form p{
margin: 0!important;
text-align: center;
}
.cf7-col-row{
margin: 0 -10px;
display: block;
overflow: hidden;
margin-bottom: 0;
}
.cf7-col-row .cf7-col{
float: left;
width: 50%;
padding: 0 10px;
}
.wt-cf7-form .wpcf7-form label{
color: #555;
font-size: 12px;
}
.wt-cf7-form .wpcf7-form .wpcf7-form-control-wrap input{
border: 1px solid #ddd;
padding: 12px .75rem;
}
.wt-cf7-form .wpcf7-form .wpcf7-form-control-wrap input:focus{
outline: none;
box-shadow: none;
border: 1px solid #000000;
}
.wt-cf7-form .wpcf7-form .wpcf7-form-control-wrap .wpcf7-textarea{}
.wt-cf7-form .wpcf7-form .wpcf7-form-control-wrap .wpcf7-textarea:focus{
outline: none;
box-shadow: none;
border: 1px solid #000000;
}
.wt-cf7-form .wpcf7-form-control{
margin-top: 0;
}
.wpcf7 select:not([size]):not([multiple]), select.form-control:not([size]):not([multiple]) {
height: 50px!important;
}
.wpcf7 select:not([size]):not([multiple]):focus, select.form-control:not([size]):not([multiple]):focus{
outline: none;
box-shadow: none;
}
.wt-cf7-form span.wpcf7-list-item {
display: inline-block;
margin: 5px 15px 0 0;
}
.wt-cf7-form .wpcf7 input[type="submit"]{
color: #fff;
background-color: #9e8a78;
font-family: 'Playfair Display', serif;
display: inline-block;
width: auto;
border: none;
padding: 15px 20px;
text-transform: uppercase;
font-weight: 700;
font-size: 12px;
}
.wt-cf7-form .wpcf7 input[type="submit"]:focus,
.wt-cf7-form .wpcf7 input[type="submit"]:hover{
background-color: #897666;
color: #fff;
}
.wt-cf7-form .wpcf7 input[type="submit"]:focus{
border: none;
outline: 0;
box-shadow: none;
}
.wt-cf7-form .wpcf7-form-control.wpcf7-submit{
margin-bottom: 0!important;
}
@media all and (max-width: 767px) {
.cf7-col-row{
margin: 0;
}
.cf7-col-row .cf7-col{
float: none;
width: 100%;
padding: 0;
margin-bottom: 15px;
}
} .btn-align-left a{
margin-right: 10px;
}
.btn-align-center a{
margin: 0 5px;
}
.btn-align-right a{
margin-left: 10px;
}
.enova-btn{
background-color: #000000;
display: inline-block;
padding: 15px 25px;
font-weight: 700;
border-radius: 3px;
font-size: 12px;
color: #fff;
transition: all 0.3s ease-in-out;
}
.enova-btn:hover{
color: #fff;
text-decoration: none;
transition: all 0.3s ease-in-out;
opacity: 0.8;
} .enova-video.embed-responsive{
border: 1px solid #ddd;
padding: 5px;
} .dl-video-box-wrap{
position: relative;
}
.dl-video-box-wrap img{
width: 100%;
}
.dl-video-box-wrap .dl-video-box-overlay{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.dl-video-box-wrap .dl-video-box-overlay .overlay{
background-color: #000;
display: block;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0.4;
z-index: -1;
}
.dl-v-lightbox{
cursor: pointer;
} .dl-vb-1 {
display: inline-block;
-webkit-transition: all 0.5s ease;
}
.dl-vb-1 svg{
width: 110px;
height: 110px;
}
.dl-vb-1 .circle {
stroke: #ffffff;
stroke-dasharray: 650;
stroke-dashoffset: 650;
-webkit-transition: all 0.5s ease-in-out;
opacity: 0.3;
}
.dl-vb-1 .triangle {
-webkit-transition: all 0.7s ease-in-out;
stroke-dasharray: 240;
stroke-dashoffset: 480;
stroke: #ffffff;
transform: translateY(0);
}
.dl-vb-1:hover .triangle {
stroke-dashoffset: 0;
opacity: 1;
stroke: #ffffff;
animation: nudge 0.7s ease-in-out;
}
@keyframes nudge {
0% {
transform: translateX(0);
}
30% {
transform: translateX(-5px);
}
50% {
transform: translateX(5px);
}
70% {
transform: translateX(-2px);
}
100% {
transform: translateX(0);
}
}
.dl-vb-1:hover .circle {
stroke-dashoffset: 0;
opacity: 1;
} .dl-vb-2{
background-color: #fff;
position: relative;
width: 100px;
height: 100px;
line-height: 100px;
font-size: 24px;
color: #333;
text-align: center;
display: block;
border-radius: 50%;
transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}
.dl-vb-2:hover{
background-color: #333;
color: #fff;
transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}
.dl-vb-2 .ripple,
.dl-vb-2 .ripple:before,
.dl-vb-2 .ripple:after {
position: absolute;
left: 50%;
top: 50%;
width:98px;
height:98px;
transform: translateX(-50%) translateY(-50%);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: 0 0 0 0 rgba(255,255,255,0.50);
-moz-box-shadow: 0 0 0 0 rgba(255,255,255,0.50);
-ms-box-shadow: 0 0 0 0 rgba(255,255,255,0.50);
-o-box-shadow: 0 0 0 0 rgba(255,255,255,0.50);
box-shadow: 0 0 0 0 rgba(255,255,255,0.50);
-webkit-animation: rippleOne 3s infinite;
-moz-animation: rippleOne 3s infinite;
-ms-animation: rippleOne 3s infinite;
-o-animation: rippleOne 3s infinite;
animation: rippleOne 3s infinite;
}
.dl-vb-2 .ripple:before {
-webkit-animation-delay: .9s;
-moz-animation-delay: .9s;
-ms-animation-delay: .9s;
-o-animation-delay: .9s;
animation-delay: .9s;
content: "";
position: absolute;
right: 0;
bottom: 0;
}
.dl-vb-2 .ripple:after {
-webkit-animation-delay: .6s;
-moz-animation-delay: .6s;
-ms-animation-delay: .6s;
-o-animation-delay: .6s;
animation-delay: .6s;
content: "";
position: absolute;
right: 0;
bottom: 0;
}
@-webkit-keyframes rippleOne {
70% {box-shadow: 0 0 0 70px rgba(244,68,56,.0);}
100% {box-shadow: 0 0 0 0 rgba(244,68,56,.0);}
}
@keyframes rippleOne {
70% {box-shadow: 0 0 0 70px rgba(244,68,56,.0);}
100% {box-shadow: 0 0 0 0 rgba(244,68,56,.0);}
} .dl-vb-3 {
background-color: #fff;
cursor: pointer;
font-size: 24px;
fill: #333;
z-index: 2;
height: 70px;
width: 70px;
line-height: 70px;
text-align: center;
border-radius: 50%;
-webkit-animation: btn-anim 1s linear infinite;
animation: btn-anim 1s linear infinite;
-webkit-transition: all .5s linear;
transition: all .5s linear;
}
.dl-vb-3 svg{
width: 30px;
margin-left: 5px;
margin-bottom: 5px;
vertical-align: middle;
}
.dl-vb-3:hover{
background-color: #333;
fill: #fff;
-webkit-transition: all .5s linear;
transition: all .5s linear;
}
@keyframes btn-anim {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 40px rgba(255, 255, 255, 0.1);
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 40px rgba(255, 255, 255, 0.1);
}
100% {
-webkit-box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 40px rgba(255, 255, 255, 0.1), 0 0 0 60px rgba(255, 255, 255, 0);
box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 40px rgba(255, 255, 255, 0.1), 0 0 0 60px rgba(255, 255, 255, 0);
}
} .enova-spacing {
display: block;
height: auto;
margin: 0 !important;
padding: 0 !important;
background: none !important;
border: none !important;
outline: none !important;
} .enova-notice {
padding: 15px;
background-color: #fafafa;
border-left: 6px solid #7f7f84;
margin-bottom: 10px;
-webkit-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
-moz-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
}
.enova-notice.notice-sm {
padding: 10px;
font-size: 80%;
}
.enova-notice.notice-lg {
padding: 35px;
font-size: large;
}
.enova-notice.notice-success {
border-color: #80D651;
}
.enova-notice.notice-success > strong {
color: #80D651;
}
.enova-notice.notice-info {
border-color: #45ABCD;
}
.enova-notice.notice-info > strong {
color: #45ABCD;
}
.enova-notice.notice-warning {
border-color: #FEAF20;
}
.enova-notice.notice-warning > strong {
color: #FEAF20;
}
.enova-notice.notice-danger {
border-color: #d73814;
}
.enova-notice.notice-danger > strong {
color: #d73814;
} .accordion {
width: 100%;
max-width: 1080px;
height: 250px;
overflow: hidden;
}
.accordion ul {
width: 100%;
display: table;
table-layout: fixed;
margin: 0;
padding: 0;
}
.accordion ul li {
display: table-cell;
vertical-align: bottom;
position: relative;
width: 16.666%;
height: 250px;
background-repeat: no-repeat;
background-position: center center;
transition: all 500ms ease;
}
.accordion ul li div {
display: block;
overflow: hidden;
width: 100%;
}
.accordion ul li div a {
display: block;
height: 250px;
width: 100%;
position: relative;
z-index: 3;
vertical-align: bottom;
padding: 15px 20px;
box-sizing: border-box;
color: #fff;
text-decoration: none;
font-family: 'Work Sans', sans-serif;
transition: all 200ms ease;
}
.accordion ul li div a * {
opacity: 0;
margin: 0;
width: 100%;
text-overflow: ellipsis;
position: relative;
z-index: 5;
white-space: nowrap;
overflow: hidden;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
-webkit-transition: all 400ms ease;
transition: all 400ms ease;
}
.accordion ul li div a h2 {
font-family: Work Sans,sans-serif;
text-overflow: clip;
font-size: 18px;
color: #fff;
text-transform: uppercase;
margin-bottom: 2px;
top: 160px;
}
.accordion ul li div a p {
top: 160px;
font-size: 13.5px;
}
.accordion ul:hover li {
width: 8%;
}
.accordion ul:hover li:hover {
width: 60%;
}
.accordion ul:hover li:hover a {
background: rgba(0, 0, 0, 0.4);
}
.accordion ul:hover li:hover a * {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
@media screen and (max-width: 600px) {
body {
margin: 0;
}
.accordion {
height: auto;
}
.accordion ul li, .accordion ul li:hover, .accordion ul:hover li, .accordion ul:hover li:hover {
position: relative;
display: table;
table-layout: fixed;
width: 100%;
-webkit-transition: none;
transition: none;
}
} .elementor-section.half-bg{
position: relative;
z-index: 1;
}
.elementor-section.half-bg:before {
width: 50%;
height: 100%;
background-color: #fff;
content: "";
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
.elementor-section.half-bg.bg-right:before{ left: auto; right: 0; }
.elementor-section.half-bg.dark:before{ background-color: #111; }
.elementor-section.half-bg.grey:before{ background-color: #ddd; }
@media (max-width: 992px) {
.elementor-section.half-bg:before{ display: none; }
.wt-list .list-item p br{
display: none;
}
}
@media (max-width: 591px) {
.sponsor-list .col-sm-3{
flex: 0 0 50%;
max-width: 50%;
}
} .social-share-wrap{
display: inline-block;
margin-right: 10px;
}
.social-share {
display: block;
margin: 0;
}
.social-share span{
margin-right: 10px;
}
.social-share a{
color: #555;
font-size: 11px;
margin-right: 10px;
}
.social-share a:hover{
color: #444;
} .wt-social-icons{
display: block;
margin: 0!important;
}
.wt-social-icons.left{
text-align: left;
}
.wt-social-icons.left li:not(:last-of-type){
margin-right: 20px;
}
.wt-social-icons.center{
text-align: center;
}
.wt-social-icons.center li{
margin: 0 10px;
}
.wt-social-icons.right{
text-align: right;
}
.wt-social-icons.right li:not(:first-of-type){
margin-left: 20px;
}
.wt-social-icons li{
display: inline-block;
}
.wt-social-icons li a{
color: #ddd;
font-size: 12px;
}
.wt-social-icons li a:hover{
color: #fff;
opacity: 0.7;
}
.widget ul.wt-social-icons li a{
color: #999;
}
.widget ul.wt-social-icons li a:hover{
color: #313335;
opacity: 1;
} .subscribe_form {
display: block;
text-align: center;
padding: 5px 0;
}
.subscribe_form input.input{
display: block;
background-color: #333;
color: #fff;
border: none;
font-size: 12px;
line-height: 50px;
padding: 0 10px;
float: left;
border-radius: 0;
width: 70%;
transition: all 0.5s ease-in-out;
}
.subscribe_form input.input:focus{
color: #fff;
}
.subscribe_form .submit{
background-color: #9e8a78;
color: #fff;
font-family: "Work Sans", serif;
font-size: 10px;
font-weight: 600;
line-height: 50px;
display: inline-block;
padding: 0 10px;
float: left;
width: 30%;
border-radius: 0;
letter-spacing: 1;
transition: all 0.5s ease-in-out;
}
.subscribe_form .submit:hover{
background-color: #897666;
transition: all 0.5s ease-in-out;
}
.subscribe_form input::-webkit-input-placeholder{
color: #ddd !important;
}
.subscribe_form input:-moz-placeholder{ color: #ddd !important;
}
.subscribe_form input::-moz-placeholder{ color: #ddd !important;
}
.subscribe_form input:-ms-input-placeholder{
color: #ddd !important;
}
.mc4wp-form-submitted .mc4wp-error{
margin-top: 50px;
}
.mc4wp-form-submitted .mc4wp-error p{
color: #ddd;
}
.mc4wp-form-submitted .mc4wp-error p a{
color: #ddd;
} .widget-about{}
.widget-about .widget-brand{
display: block;
margin-bottom: 20px;
}
.widget-about .widget-brand img{
box-shadow: none;
max-width: 100%;
}
.widget-about-info{
display: block;
color: #999;
font-size: 15px;
font-family: "Work Sans", serif;
line-height: 1.73;
letter-spacing: .2px;
}
.widget-about-info span{
font-family: 'Work Sans', serif;
font-size: 13px;
color: #fff;
letter-spacing: 2px;
font-weight: 500;
text-transform: uppercase;
display: block;
}
.widget .widget-about-info span{
color: #313335;
}
.widget-about .wt-social-icons{
margin-top: 20px!important;
}
.widget-about .wt-social-icons li{
padding: 0;
}
.widget-about .wt-social-icons li:before{
display: none;
}
@media (max-width: 520px){
.widget-about .widget-brand img{ max-width: 150px; }
} .el-blog-posts.wt-column-desktop-1 .grid-sizer{ width: 100%; }
.el-blog-posts.wt-column-desktop-2 .grid-sizer{ width: 50%; }
.el-blog-posts.wt-column-desktop-3 .grid-sizer{ width: 33.33%; }
.el-blog-posts.wt-column-desktop-4 .grid-sizer{ width: 25%; }
.el-blog-posts.wt-column-desktop-5 .grid-sizer{ width: 20%; }
@media (max-width: 992px) {
.el-blog-posts.wt-column-tablet-1 .grid-sizer{ width: 100%; }
.el-blog-posts.wt-column-tablet-2 .grid-sizer{ width: 50%; }
.el-blog-posts.wt-column-tablet-3 .grid-sizer{ width: 33.33%; }
.el-blog-posts.wt-column-tablet-4 .grid-sizer{ width: 25%; }
.el-blog-posts.wt-column-tablet-5 .grid-sizer{ width: 20%; }
}
@media (max-width: 580px) {
.el-blog-posts.wt-column-mobile-1 .grid-sizer{ width: 100%; }
.el-blog-posts.wt-column-mobile-2 .grid-sizer{ width: 50%; }
.el-blog-posts.wt-column-mobile-3 .grid-sizer{ width: 33.33%; }
.el-blog-posts.wt-column-mobile-4 .grid-sizer{ width: 25%; }
.el-blog-posts.wt-column-mobile-5 .grid-sizer{ width: 20%; }
}
.el-blog-posts{
margin: -15px;
}
.el-blog-posts .blog-post{
padding: 15px;
}
.el-blog-posts .blog-post .blog-post-inner{
box-shadow: 0px 5px 15px 0px rgba(130,136,147,0.13);
}
.el-blog-posts .entry_thumb {
position: relative;
overflow: hidden;
}
.el-blog-posts .entry_thumb .post-cat{
position: absolute;
width: auto;
height: auto;
left: 30px;
bottom: 20px;
z-index: 1;
display: inline-block;
padding: 0 15px;
background-color: #000000;
text-decoration: none;
color: #fff;
transition: all 0.3s ease-in-out;
font-family: 'Work Sans', sans-serif;
font-size: 12px;
letter-spacing: 0.5px;
line-height: 30px;
text-transform: capitalize;
border-radius: 2px;
}
.el-blog-posts .entry_thumb .post-cat:hover{
transition: all 0.3s ease-in-out;
color: #fff;
}
.el-blog-posts .entry_thumb-link img {
width: 100%;
vertical-align: bottom;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.el-blog-posts .entry_text {
padding: 50px 30px;
background-color: #fff;
}
.el-blog-posts .entry_title {
font-size: 28px;
line-height: 32px;
font-weight: 600;
margin-top: 0;
margin-bottom: 15px;
-ms-word-wrap: break-word;
word-wrap: break-word;
}
.el-blog-posts .entry_title a {
color: #222;
text-decoration: none;
letter-spacing: -1px;
}
.el-blog-posts .entry_title a:hover,
.el-blog-posts .entry_title a:focus {
color: #025fcc;
}
.el-blog-posts .entry-excerpt .page-links{
padding-bottom: 0;
}
.el-blog-posts .entry_header .post-date{
text-transform: uppercase;
text-decoration: none;
font-size: 14px;
letter-spacing: 0px;
font-weight: 600;
margin: 0 0 5px;
display: block;
color: #555;
}
.el-blog-posts .entry-excerpt .page-links{
padding-bottom: 0;
}
.el-blog-posts .entry_meta-links a::after {
content: ", ";
}
.el-blog-posts .entry_meta-links a:last-child::after {
display: none;
}
.el-blog-posts .blog-post-inner .readmore{
position: relative;
text-decoration: none;
font-family: 'Work Sans', sans-serif;
text-transform: uppercase;
font-weight: 600;
font-size: 12px;
letter-spacing: 0.5px;
color: #222;
display: inline-block;
margin-top: 16px;
transition: all 0.3s ease-in-out;
vertical-align: middle;
}
.el-blog-posts .blog-post-inner .readmore:hover{ color: #222; }
.el-blog-posts .blog-post-inner .readmore .dl-arrow{
width: 24px;
height: 1px;
top: 0;
display: inline-block;
background-color: #222;
-webkit-transition: width .3s ease,transform .3s ease;
-moz-transition: width .3s ease,transform .3s ease;
transition: width .3s ease,transform .3s ease;
vertical-align: middle;
}
.el-blog-posts .blog-post-inner .readmore .dl-arrow.left{
position: absolute;
top: 50%;
left: 0;
width: 0;
}
.el-blog-posts .blog-post-inner .readmore .dl-text{
display: inline-block;
vertical-align: middle; margin: 0 10px 0 0;
-webkit-transition: transform .3s ease;
-moz-transition: transform .3s ease;
transition: transform .3s ease;
}
.el-blog-posts .blog-post-inner .readmore .dl-arrow.right{
-webkit-transform-origin: right;
-moz-transform-origin: right;
transform-origin: right;
}
.el-blog-posts .blog-post-inner .readmore:hover .dl-text {
-webkit-transform: translateX(34px);
-moz-transform: translateX(34px);
transform: translateX(34px);
font-weight: inherit;
}
.el-blog-posts .blog-post-inner .readmore:hover .dl-arrow.left {
width: 24px
}
.el-blog-posts .blog-post-inner .readmore:hover .dl-arrow.right {
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: right;
-moz-transform-origin: right;
transform-origin: right
} .testimonial-item{
background-color: #fff;
padding: 30px;
border-radius: 5px;
margin-bottom: 20px;
}
.testimonial-item img{
max-width: 80px!important;
height: 80px!important;
text-align: center;
border-radius: 50%!important;
margin: 0 auto;
margin-bottom: 20px;
}
.dl-align-center .testimonial-item.center img{}
.dl-align-right .testimonial-item img{
margin: 0 0 20px auto;
}
.dl-align-left .testimonial-item img{
margin: 0 0 20px;
}
.testimonial-item h4{}
.testimonial-item h4 span{
display: block;
font-family: "Work Sans", sans-serif;
font-size: 12px;
font-weight: 400;
}
.testimonial-carousel.owl-carousel .owl-stage{
padding: 20px 0;
}
.testimonial-carousel .owl-item.center{
box-shadow: 0px 0px 15px 5px rgba(34,34,34,0.09);
transition: all 0.3s linear;
} .testimonial-carousel .owl-dots{
display: block;
text-align: center;
padding-top: 30px;
}
.testimonial-carousel .owl-dots .owl-dot{
background-color: #ddd;
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
margin: 0 3px;
transition: all 0.5s ease-in-out;
}
.testimonial-carousel .owl-dots .owl-dot.active{
background-color: #56a2ff;
-webkit-transform: scale(1.2);
transform: scale(1.2);
transition: all 0.5s ease-in-out;
} .testimonial-carousel .owl-nav{}
.testimonial-carousel .owl-nav div{
width: 40px;
height: 40px;
display: block;
text-align: center;
line-height: 40px;
font-size: 20px;
color: #1b1b1f;
position: absolute;
left: -30px;
top: calc(50% - 20px);
opacity: 0;
transition: all 0.3s linear;
}
.testimonial-carousel .owl-nav div:hover{
color: #025fcc;
}
.testimonial-carousel .owl-nav div.owl-next{
left: auto;
right: -30px;
}
.testimonial-carousel:hover .owl-nav div{
opacity: 0.7;
left: -20px;
}
.testimonial-carousel:hover .owl-nav div.owl-next{
left: auto;
right: -20px;
} .ratings{
display: block;
margin: 0 -3px 0!important;
padding: 0;
}
.ratings li{
display: inline-block;
color: #999;
font-size: 12px;
}
.ratings.star-5 li{
color: #FED701;
}
.ratings.star-4 li:nth-child(-n+4){
color: #FED701;
}
.ratings.star-3 li:nth-child(-n+3){
color: #FED701;
}
.ratings.star-2 li:nth-child(-n+2){
color: #FED701;
}
.ratings.star-1 li:nth-child(-n+1){
color: #FED701;
}
@media (max-width: 992px) {
.testimonial-carousel .testimonial-item p br{ display: none; }
}
@media (max-width: 767px){
.testimonial-carousel .owl-item.center{
box-shadow: none;
}
}  .widget-about .wt-social-icons{}
.widget-about .wt-social-icons li{ display: inline-block; }
.widget-about .wt-social-icons li:not(:last-of-type) { margin-right: 5px; }
.widget-about .wt-social-icons li > a {
color: #999;
font-size: 13px;
text-decoration: none;
background-color: #34383c;
width: 40px;
display: inline-block;
text-align: center;
height: 40px;
line-height: 40px;
border-radius: 50%;
}
.widget-about .wt-social-icons li > a:hover{
color: #fff!important;
opacity: 0.9!important;
}
.widget-about .wt-social-icons li.facebook a{
background-color: #3b5998;
color: #fff;
}
.widget-about .wt-social-icons li.twitter a{
background-color: #1da1f2;
color: #fff;
}
.widget-about .wt-social-icons li.instagram a{
background-color: #e1306c;
color: #fff;
}
.widget-about .wt-social-icons li.flickr a{
background-color: #ff0084;
color: #fff;
}
.widget-about .wt-social-icons li.pinterest a{
background-color: #bd081c;
color: #fff;
} .widget-address{}
.widget-address .widget-addr-item{
color: #ddd;
display: block;
font-size: 14px;
line-height: 26px;
font-family: 'Open Sans', sans-serif;
}
.widget-address .widget-addr-item:not(:last-of-type){
margin-bottom: 15px;
}
.widget-address.dark .widget-addr-item{
color: #555;
}
.widget-address .widget-addr-item span{
color: #ddd;
margin-right: 4px;
font-family: "Work Sans",sans-serif;
font-weight: 600;
letter-spacing: -1px;
text-transform: uppercase;
}
.widget-address.dark .widget-addr-item a,
.widget-address.dark .widget-addr-item span{
color: #222;
}
.widget-address.dark .widget-addr-item a:hover{ color: #222; }
.widget-address .widget-addr-item a{
text-decoration: none;
color: #ddd;
}
.widget-address .widget-addr-item a:hover{
color: #ddd;
} .widget-mailchimp{}
.widget-mailchimp .wt-subscribe-wrap{}
.widget-mailchimp .wt-subscribe-wrap form{
position: relative;
margin: 15px 0;
}
.widget-mailchimp .wt-subscribe-wrap form input{
display: block;
background-color: transparent;
border: 2px solid #333;
color: #ddd;
border-radius: 2px;
padding: 15px 13px;
padding-right: 83px;
}
.widget-mailchimp.dark .wt-subscribe-wrap form input{
border: 2px solid #ddd;
color: #555;
}
.widget-mailchimp .wt-subscribe-wrap form input::-webkit-input-placeholder{
color: #888 !important;
}
.widget-mailchimp .wt-subscribe-wrap form input:-moz-placeholder{ color: #888 !important;
}
.widget-mailchimp .wt-subscribe-wrap form input::-moz-placeholderr{ color: #888 !important;
}
.widget-mailchimp .wt-subscribe-wrap form input:-ms-input-placeholder{
color: #888 !important;
}
.widget-mailchimp .wt-subscribe-wrap form button{
background-color: #000000;
color: #fff;
display: inline-block;
text-align: center;
width: 70px;
height: 45px;
position: absolute;
right: 5px;
top: 5px;
border-radius: 2px;
transition: all 0.3s ease-in-out;
}
.widget-mailchimp .wt-subscribe-wrap form button:hover{
opacity: 0.9;
color: #fff;
transition: all 0.3s ease-in-out;
}
.widget-mailchimp p.muted{
color: #ddd;
margin-bottom: 0;
}
.widget-mailchimp #subscribe-result p{
margin: 15px 0 0;
padding: 15px;
display: none;
}
.widget-mailchimp #subscribe-result.subs-success p.subscription-success{
display: block;
}
.widget-mailchimp #subscribe-result.subs-error p.subscription-error{
display: block;
}
.widget-mailchimp #subscribe-result p.subscription-success{ border: 1px solid #5ecc62; }
.widget-mailchimp #subscribe-result p.subscription-error{ border: 1px solid #ff4c4c; } .social-links-widget {
margin: 0;
padding: 0;
list-style: none;
}
.social-links-widget li {
background-color: #666;
display: inline-block;
width: 45px;
height: 45px;
line-height: 45px;
text-align: center;
margin: 3px!important;
font-size: 14px;
border-radius: 3px;
color: #fff;
}
.social-links-widget li.facebook {
background-color: #516ca4;
}
.social-links-widget li.twitter {
background-color: #00baff;
}
.social-links-widget li.gplus {
background-color: #f20000;
}
.social-links-widget li.rss {
background-color: #f29400;
}
.social-links-widget li.youtube {
background-color: #f20000;
}
.social-links-widget li.dribbble {
background-color: #dc71a6;
}
.social-links-widget li.pinterest {
background-color: #f20000;
}
.social-links-widget li.instagram {
background-color: #406f94;
}
.social-links-widget li.tumblr {
background-color: #395875;
}
.social-links-widget li.linkedin {
background-color: #1985bc;
}
.social-links-widget li.flickr {
background-color: #ff0084;
}
.social-links-widget li.behance {
background-color: #1769ff;
}
.social-links-widget li.deviantart {
background-color: #05cc47;
}
.social-links-widget li.whatsapp {
background-color: #25d366;
}
.social-links-widget li.reddit {
background-color: #ff4500;
}
.social-links-widget li.snapchat {
background-color: #fffc00;
}
.social-links-widget li.medium {
background-color: #00ab6c;
}
.social-links-widget li a {
display: block;
color: #fff!important;
line-height: inherit!important;
}
.social-links-widget li a:hover {
opacity: 0.8;
}
.social-links-widget.medium li {
width: 60px;
height: 60px;
line-height: 60px;
font-size: 16px;
}
.social-links-widget.medium li a{ font-size: 16px!important; }
.social-links-widget.large li {
width: 90px;
height: 90px;
line-height: 90px;
font-size: 24px;
}
.social-links-widget.large li a{ font-size: 24px!important; }
.social-links-widget.round li {
border-radius: 50%;
margin: 7px!important;
} .dl-blog-posts-list {
margin: 0;
padding: 0;
list-style: none;
font-family: "Open Sans", sans-serif;
}
.dl-blog-posts-list li {
display: flex;
align-items: center;
padding: 0;
margin: 0;
}
.dl-blog-posts-list li:not(:last-of-type) {
margin-bottom: 30px;
border: none;
}
.dl-blog-posts-list li .post-thumb {
max-width: 90px;
max-height: 90px;
height: 100%;
margin-right: 20px;
-o-object-fit: cover;
object-fit: cover;
vertical-align: middle;
border-style: none;
}
.dl-blog-posts-list li .post-thumb img {
max-width: 90px;
max-height: 90px;
box-shadow: none;
}
.dl-blog-posts-list li .post-detail {
flex-grow: 1;
}
.dl-blog-posts-list li .post-detail .post-credit {
overflow-x: unset;
margin-bottom: 0;
}
.dl-blog-posts-list li .post-detail .post-credit .post-tag {
margin-bottom: 5px;
}
.dl-blog-posts-list li .post-detail .post-credit .post-tag a {
font-family: "Open Sans", sans-serif;
font-size: 12px;
color: #999;
line-height: 1;
display: inline-block;
transition: 0.3s ease;
text-transform: uppercase;
text-decoration: none;
font-weight: 600;
}
.dl-blog-posts-list li .post-detail .post-credit .post-tag a:before {
content: "#";
}
.dl-blog-posts-list li .post-detail .post-credit .author .author-name {
font-family: "Open Sans", sans-serif;
font-size: 12px;
color: #999;
line-height: 1;
display: block;
text-transform: uppercase;
margin-right: 30px;
font-weight: normal;
}
.dl-blog-posts-list li .post-detail a {
font-family: "Work Sans", sans-serif;
font-size: 18px;
color: #222;
line-height: 24px;
font-weight: 500;
display: block;
transition: 0.3s ease;
margin-bottom: 10px;
text-decoration: none;
}
.dl-blog-posts-list li .post-detail a:hover {
color: #444;
}
.dl-blog-posts-list.style-2 li {
display: inline-flex;
}
.dl-blog-posts-list.style-2 li .post-thumb {
max-width: 90px;
max-height: 90px;
margin-right: 20px;
}
.dl-blog-posts-list.style-2 li .post-thumb a {
display: block;
overflow: hidden;
max-height: 90px;
}
.dl-blog-posts-list.style-2 li .post-thumb img {
max-width: 90px;
max-height: 90px;
-webkit-transform: scale(1);
transform: scale(1);
transition: 0.3s ease-in-out;
box-shadow: none;
}
.dl-blog-posts-list.style-2 li .post-thumb:hover img {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.dl-blog-posts-list.style-2 li .post-detail ul {
margin: 0;
padding: 0;
list-style: none;
}
.dl-blog-posts-list.style-2 li .post-detail ul li {
display: inline-block;
font-size: 12px;
color: #999;
margin: 0 !important;
margin-right: 12px !important;
padding: 0;
}
.dl-blog-posts-list.style-2 li .post-detail ul li i {
margin-right: 5px;
}
.dl-blog-posts-list.style-2 li .post-detail ul li a {
color: #999;
font-size: 12px;
}
.dl-blog-posts-list.style-2 li .post-detail ul li a:hover {
color: #666;
}
.dl-blog-posts-list.style-2 li .post-detail .post-title {
font-family: "Work Sans",sans-serif;
font-size: 15px;
line-height: 1.3;
font-weight: 600;
color: #222;
}
.dl-blog-posts-list.style-2 li .post-detail .post-title:hover {
color: #444;
}
.dl-blog-posts-list.color-scheme-light li .post-detail .post-credit .post-tag a,
.dl-blog-posts-list.color-scheme-light li .post-detail .post-credit .author .author-name,
.dl-blog-posts-list.color-scheme-light li .post-detail a,
.dl-blog-posts-list.style-2.color-scheme-light li .post-detail ul li,
.dl-blog-posts-list.style-2.color-scheme-light li .post-detail ul li a,
.dl-blog-posts-list.style-2.color-scheme-light li .post-detail .post-title {
color: #ddd;
}
.dl-blog-posts-list.color-scheme-light li .post-detail a:hover,
.dl-blog-posts-list.style-2.color-scheme-light li .post-detail ul li a:hover,
.dl-blog-posts-list.style-2.color-scheme-light li .post-detail .post-title:hover {
color: #fff;
} .flickr-feeds{}
.dl-feeds .feed-media{
display: inline-block;
width: 100%;
}
.dl-feeds.space-small .feed-media{ padding: 1px; }
.dl-feeds.space-medium .feed-media{ padding: 3px; }
.dl-feeds.space-large .feed-media{ padding: 5px; }
.dl-feeds.space-small{ margin: 0 -1px }
.dl-feeds.space-medium{ margin: 0 -3px }
.dl-feeds.space-large{ margin: 0 -5px }
.dl-feeds.no-space .feed-media{ padding: 0; }
.dl-feeds.feed-col-1 .feed-media{ width: 100%; }
.dl-feeds.feed-col-2 .feed-media{
width: 50%;
}
.dl-feeds.feed-col-3 .feed-media{
width: 33.33%;
}
.dl-feeds.feed-col-4 .feed-media{
width: 25%;
}
.dl-feeds .feed-media a img{
box-shadow: none;
width: 100%;
height: auto;
}
.dl-feeds .feed-media a:hover{
opacity: 0.8;
}
.dl-feeds .owl-nav div{
width: 30px;
height: 40px;
line-height: 40px;
background-color: rgba(0,0,0,0.2);
color: #ddd;
font-size: 11px;
text-align: center;
position: absolute;
left: 3px;
top: calc(50% - 25px);
transition: all 0.3s ease-in-out;
opacity: 0;
visibility: hidden;
}
.dl-feeds .owl-nav div.owl-next{
left: auto;
right: 3px;
}
.dl-feeds:hover .owl-nav div{
left: 0;
opacity: 1;
visibility: visible;
}
.dl-feeds:hover .owl-nav div.owl-next{
left: auto;
right: 0;
}
.dl-feeds .owl-nav div:hover{
background-color: rgba(0,0,0,0.4);
transition: all 0.3s ease-in-out;
color: #fff;
} .wt-service-box{
background-color: #fff;
display: flex;
padding: 40px 20px;
box-shadow: 0px 5px 15px 0px rgba(130,136,147,0.13);
border-radius: 3px;
transition: all 0.3s ease-in-out;
}
.wt-service-box:hover{
transition: all 0.3s ease-in-out;
}
.wt-service-box .wt-service-box-inner{
display: block;
z-index: 10;
}
.wt-service-box.center-content{
text-align: center;
}
.wt-service-box.right-content{
text-align: right;
}
.wt-service-box .icon-box{
max-width: 70px;
font-size: 28px;
margin-bottom: 25px;
z-index: 2;
}
.wt-service-box.center-content .icon-box{
margin: 0 auto 25px;
}
.wt-service-box.right-content .icon-box{
margin-right: 0;
margin-left: auto;
display: block;
}
.wt-service-box .icon-box img{
max-width: 100%;
}
.icon-left-align.wt-service-box .wt-service-box-inner{
padding-left: 10px;
display: flex;
justify-content: flex-start;
}
.icon-left-align.wt-service-box .icon-box{
margin-right: 20px;
display: block;
text-align: center;
font-size: 28px;
}
.icon-left-align.wt-service-box .icon-box .icon-inner{
width: 60px;
height: 60px;
margin-bottom: 0;
}
.wt-service-box .service-content{ z-index: 2; }
.wt-service-box .service-content h4{
font-size: 17px;
line-height: 17px;
font-weight: 700;
color: #2b2b2b;
letter-spacing: -1px;
margin-bottom: 10px;
}
.wt-service-box .service-content p{
font-size: 14px;
line-height: 28px;
color: #7b7b7b;
margin-bottom: 10px;
}
.wt-service-box a{
font-family: "Work Sans", sans-serif;
font-size: 11px;
font-weight: 700;
line-height: 1;
color: #025fcc;
text-transform: uppercase;
letter-spacing: .8px;
display: block;
margin-top: 20px;
} .wt-service-box .service-read-more .icon-wrap{
position: relative;
display: inline-block;
overflow: hidden;
line-height: 1;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
}
.wt-service-box.center-content .service-read-more .icon-wrap{
-webkit-transform: translateX(50%);
-moz-transform: translateX(50%);
-o-transform: translateX(50%);
transform: translateX(50%);
margin-left: -10px;
}
.wt-service-box.right-content .service-read-more .icon-wrap{
-webkit-transform: translateX(90%);
-moz-transform: translateX(90%);
-o-transform: translateX(90%);
transform: translateX(90%);
margin-left: -10px;
}
.wt-service-box .service-read-more .icon-wrap .hover-anim{
display: flex;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: transform .3s ease;
-moz-transition: transform .3s ease;
transition: transform .3s ease;
background: transparent;
top: auto;
opacity: 1;
visibility: visible;
padding: 0;
line-height: 1;
border-width: 0;
align-items: center;
}
.wt-service-box .service-read-more .icon-wrap .hover-anim .text-wrap{
padding-right: 5px;
margin-top: 2px;
}
.wt-service-box .service-read-more .icon-wrap .hover-anim i{
display: inline-block;
position: relative;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: transform .3s ease;
-moz-transition: transform .3s ease;
transition: transform .3s ease;
font-size: 16px;
}
.wt-service-box.center-content .service-read-more:hover .icon-wrap,
.wt-service-box .service-read-more:hover .icon-wrap,
.wt-service-box .service-read-more:hover .icon-wrap .hover-anim i,
.wt-service-box .service-read-more:hover .icon-wrap .hover-anim{
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
} .wt-service-box::before,
.wt-service-box::after {
display: block;
box-sizing: inherit;
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
-webkit-transform-origin: center;
transform-origin: center;
z-index: 1;
}
.wt-service-box::before {
border-top: 4px solid #025fcc;
border-bottom: 4px solid #025fcc;
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
}
.wt-service-box::after {
border-left: 4px solid #025fcc;
border-right: 4px solid #025fcc;
-webkit-transform: scale3d(1, 0, 1);
transform: scale3d(1, 0, 1);
}
.wt-service-box:hover::before,
.wt-service-box:hover::after {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
transition: -webkit-transform 0.5s;
transition: transform 0.5s;
transition: transform 0.5s, -webkit-transform 0.5s;
} .dl-promo-item{
text-align: center;
background-color: #fff;
-webkit-box-shadow: 0px 2px 5px 2px rgba(222,219,219,0.5);
-moz-box-shadow: 0px 2px 5px 2px rgba(222,219,219,0.5);
box-shadow: 0px 2px 5px 2px rgba(222,219,219,0.5);
padding: 40px;
}
.dl-promo-item .promo-icon{
width: 60px;
height: 60px;
font-size: 20px;
line-height: 60px;
color: #222;
}
.dl-align-center .dl-promo-item .promo-icon{
margin: 0 auto;
}
.dl-align-right .dl-promo-item .promo-icon{
margin-left: auto;
}
.dl-promo-item h3{
font-size: 24px;
font-weight: 500;
color: #222;
}
.dl-promo-item P{
color: #555;
font-size: 14px;
}
.dl-promo-item .read-more{
font-size: 12px;
color: #222;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
} .swiper-slide {
overflow: hidden;
}
.slide-inner {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-size: cover;
background-position: center;
}
.dl-fullscreen-slider{
position: relative;
}
.dl-fullscreen-slider.full{
height: 100vh;
}
.dl-fullscreen-slider .swiper-slide {}
.dl-fullscreen-slider .dl-slider-caption{
color: #fff;
width: auto;
height: auto;
position: absolute;
}
.dl-fullscreen-slider .dl-slider-caption.left-bottom{
left: 10%;
bottom: 10%;
}
.dl-fullscreen-slider .dl-slider-caption.left-top{
left: 10%;
top: 10%;
}
.dl-fullscreen-slider .dl-slider-caption.left-center{
left: 10%;
top: 50%;
transform: translateY(-50%);
}
.dl-fullscreen-slider .dl-slider-caption.center{
width: 90%;
left: 50%;
top: 50%;
transform: translateY(-50%) translateX(-50%);
text-align: center;
}
.dl-fullscreen-slider .dl-slider-caption.right-bottom{
right: 10%;
bottom: 10%;
text-align: right;
}
.dl-fullscreen-slider .dl-slider-caption.right-top{
right: 10%;
top: 10%;
text-align: right;
}
.dl-fullscreen-slider .dl-slider-caption.right-center{
right: 10%;
top: 50%;
transform: translateY(-50%);
text-align: right;
}
.dl-fullscreen-slider .dl-slider-caption .big-caption{
display: block;
font-size: 60px;
font-weight: 600;
line-height: 60px;
margin: 0 0 10px;
}
.dl-fullscreen-slider .dl-slider-caption .cat{
display: block;
font-size: 18px;
font-weight: 600;
} .dl-navigation-corner{
position: relative;
}
.dl-navigation-corner .corner-nav{
width: auto;
height: auto;
position: absolute;
color: #fff;
z-index: 9;
}
.dl-navigation-corner .corner-nav.left{
left: 10%;
bottom: 10%;
}
.dl-navigation-corner .corner-nav.center{
left: 50%;
bottom: 10%;
transform: translateX(-50%);
}
.dl-navigation-corner .corner-nav.right{
right: 10%;
bottom: 10%;
}
.dl-navigation-corner .corner-nav div{
display: inline-block;
color: #fff;
font-size: 30px;
margin: -0 10px;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.dl-navigation-corner .corner-nav div:hover{
transform: scale(1.2);
transition: all 0.2s ease-in-out;
} .dl-side-bullets .swiper-pagination-bullets{
width: auto!important;
height: auto;
position: absolute;
z-index: 9;
}
.dl-side-bullets .swiper-pagination-bullets.left{
bottom: auto!important;
left: 40px;
top: 50%;
transform: translateY(-50%);
}
.dl-side-bullets .swiper-pagination-bullets.right{
left: auto!important;
bottom: auto!important;
right: 40px;
top: 50%;
transform: translateY(-50%);
}
.dl-side-bullets .swiper-pagination-bullets.bottom{
left: 50%;
bottom: 5%;
transform: translateX(-50%);
}
.dl-side-bullets .swiper-pagination-bullets span{
display: block;
background-color: #222;
opacity: 0.5;
transition: all 0.3s linear;
margin: 10px 0!important;
}
.dl-side-bullets .swiper-pagination-bullets.bottom span{
display: inline-block;
margin: 0 8px!important;
}
.dl-side-bullets .swiper-pagination-bullets span.swiper-pagination-bullet-active{
background-color: #fff;
opacity: 1;
transition: all 0.3s linear;
}
@media all and (max-width: 767px) {
.dl-fullscreen-slider .dl-slider-caption .big-caption{
font-size: 30px;
line-height: 30px;
margin-bottom: 5px;
}
.dl-fullscreen-slider .dl-slider-caption .cat{ font-size: 16px; }
.dl-navigation-corner .corner-nav{
right: 5%;
bottom: 5%;
}
}
.dl-gallery-thumbs {
background-color: rgba(0,0,0,0.3);
height: 20%;
box-sizing: border-box;
padding: 10px 0;
position: absolute;
left: 0;
bottom: 0;
}
.dl-gallery-thumbs .swiper-slide {
width: 25%;
height: 100%;
opacity: 0.4;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.dl-gallery-thumbs .swiper-slide-thumb-active {
opacity: 1;
} .dl-photo-carousel{ position: relative; }
.dl-photo-carousel .swiper-slide {
width: auto;
height: 600px;
cursor:  e-resize;
}
.dl-photo-carousel .swiper-slide img{
height: 600px;
width: auto;
}
.dl-photo-carousel .slider-caption {
width: 100%;
height: auto;
position: absolute;
z-index: 1;
}
.dl-photo-carousel.pos-left .slider-caption{
left: 50px;
bottom: 50px;
}
.dl-photo-carousel.pos-left-center .slider-caption{
left: 50%;
transform: translateX(-50%);
bottom: 50px;
text-align: center;
}
.dl-photo-carousel.pos-right .slider-caption{
right: 50px;
bottom: 50px;
text-align: right;
}
.dl-photo-carousel.pos-center .slider-caption{
left: 50%;
bottom: 50%;
transform: translate(-50%, 50%);
text-align: center;
}
.dl-photo-carousel .slider-caption h3{
font-size: 35px;
line-height: 1;
margin: 0;
color: #fff;
display: inline-block;
}
.dl-photo-carousel .slider-caption h3 a,
.dl-photo-carousel .slider-caption h3 a:hover{
color: #fff;
}
.dl-photo-carousel .slider-caption .cat-wrap{
margin: 10px 0 0;
display: block;
}
.dl-photo-carousel .slider-caption .post-cat{
color: #fff;
font-size: 12px;
text-transform: uppercase;
display: inline-block;
}
.dl-photo-carousel .swiper-slide .overlay{
background-color: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.dl-navigation .button-next,
.dl-navigation .button-prev{
font-size: 24px;
width: 60px;
height: 60px;
position: absolute;
left: -30px;
top: 50%;
transform: translateY(-50%);
z-index: 99;
color: #222;
background-color: #fff;
line-height: 56px;
text-align: center;
display: block;
cursor: pointer;
visibility: hidden;
opacity: 0;
transition: all 0.3s ease-in-out;
}
.dl-navigation .button-next.swiper-button-disabled,
.dl-navigation .button-prev.swiper-button-disabled{
cursor: default;
opacity: 0.8;
}
.dl-navigation .button-next{
left: auto;
right: -30px;
}
.dl-navigation .button-next:hover,
.dl-navigation .button-prev:hover{
opacity: 0.9;
transition: all 0.3s ease-in-out;
}
.dl-navigation:hover .button-next,
.dl-navigation:hover .button-prev{
visibility: visible;
opacity: 1;
}
.dl-navigation.always-visable .button-next,
.dl-navigation.always-visable .button-prev{
left: 0;
visibility: visible;
opacity: 1;
}
.dl-navigation.always-visable .button-next{
left: auto;
right: 0;
}
.dl-navigation:hover .button-prev{
left: 10px;
}
.dl-navigation:hover .button-next{
left: auto;
right: 10px;
}
.dl-bullets .swiper-pagination-bullets{}
.dl-bullets .swiper-pagination-bullets span{
background-color: #222;
opacity: 0.5;
transition: all 0.3s linear;
}
.dl-bullets .swiper-pagination-bullets span.swiper-pagination-bullet-active{
background-color: #fff;
opacity: 1;
transition: all 0.3s linear;
}
@media (max-width: 600px){
.dl-photo-carousel .slider-caption{ text-align: center; }
} .dl-pricing-box{
background-color: #fff;
text-align: center;
}
.dl-pricing-box .pricing-head{
background-color: #232323;
display: block;
padding: 50px 10px;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.dl-pricing-box .pricing-head h2{
font-weight: bold;
color: #fff;
margin-bottom: 0;
}
.dl-pricing-box .pricing-list{
margin: 20px 0;
padding: 0;
list-style: none;
}
.dl-pricing-box .pricing-list li{
line-height: 30px;
font-size: 13px;
font-weight: 600;
}
.dl-pricing-box .price h2{
font-size: 70px;
line-height: 70px;
font-weight: bold;
margin-bottom: 0;
}
.dl-pricing-box .pricing-footer{
margin-top: 30px;
}
.dl-pricing-box .pricing-footer .dl-pricing-btn{
background-color: #232323;
display: block;
color: #fff;
padding: 15px 20px;
font-size: 16px;
font-weight: 600;
} .slides-nav {
z-index: 99;
position: absolute;
right: -33px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
color: #111;
}
@media (min-width: 54em) {
.slides-nav {
right: -28px;
}
}
.slides-nav__nav {
position: relative;
right: 0;
display: block;
font-size: 1em;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: center;
transform-origin: center;
}
.slides-nav button {
position: relative;
display: inline-block;
padding: 0.35em;
margin: 0;
font-family: "Open Sans", monospace;
color: #111;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent;
border: 0;
overflow-x: hidden;
-webkit-transition: color 0.5s ease;
transition: color 0.5s ease;
}
.slides-nav button:after {
content: '';
position: absolute;
top: 50%;
left: 0;
height: 1px;
width: 0;
background: #111;
-webkit-transition: width 0.4s ease;
transition: width 0.4s ease;
}
.slides-nav button:hover {
cursor: pointer;
color: rgba(17, 17, 17, 0.75);
-webkit-transition: color 0.5s ease;
transition: color 0.5s ease;
}
.slides-nav button:hover:after {
width: 100%;
-webkit-transition: width 0.4s ease;
transition: width 0.4s ease;
}
.slides-nav button:focus {
outline: 0;
}
.is-sliding .slides-nav {
pointer-events: none;
}
.slides {
position: relative;
margin-top: 50px;
display: block;
height: 650px;
background: #fff;
-webkit-transition: background 1s cubic-bezier(0.99, 1, 0.92, 1);
transition: background 1s cubic-bezier(0.99, 1, 0.92, 1);
}
.is-sliding .slides {
background: #ddd;
-webkit-transition: background 0.3s cubic-bezier(0.99, 1, 0.92, 1);
transition: background 0.3s cubic-bezier(0.99, 1, 0.92, 1);
}
.slide {
z-index: -1;
padding: 0;
position: absolute;
width: 100%;
height: 650px;
-webkit-transition: z-index 1s ease;
transition: z-index 1s ease;
}
.slide.is-active {
z-index: 19;
-webkit-transition: z-index 1s ease;
transition: z-index 1s ease;
}
.slide__content {
position: relative;
margin: 0 auto;
height: 95%;
width: 95%;
top: 2.5%;
}
@media (min-width: 54em) {
.slide__content {
height: 90%;
width: 90%;
top: 5%;
}
}
.slide__header {
z-index: 9;
position: relative;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
overflow-y: hidden;
-webkit-transform: translateX(5%);
transform: translateX(5%);
}
@media (min-width: 54em) {
.slide__header {
-webkit-transform: translateX(-5%);
transform: translateX(-5%);
}
}
.slide__title {
font-family: Montserrat, helvetica;
font-size: 2.5em;
font-weight: 700;
color: #111;
overflow-y: hidden;
}
@media (min-width: 54em) {
.slide__title {
font-size: 5em;
}
}
.slide__title .title-line {
display: block;
overflow-y: hidden;
}
.slide__title .title-line span {
display: inline-block;
-webkit-transform: translate3d(0, 140%, 0);
transform: translate3d(0, 140%, 0);
opacity: 0;
-webkit-transition: opacity 0.8s ease, -webkit-transform 0.4s ease;
transition: opacity 0.8s ease, -webkit-transform 0.4s ease;
transition: transform 0.4s ease, opacity 0.8s ease;
transition: transform 0.4s ease, opacity 0.8s ease, -webkit-transform 0.4s ease;
}
.slide__title .title-line span:nth-child(1) {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.slide__title .title-line span:nth-child(2) {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.is-active .slide__title .title-line span {
-webkit-transform: translate3d(0, 0%, 0);
transform: translate3d(0, 0%, 0);
opacity: 1;
-webkit-transition: opacity 0.1s ease, -webkit-transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
transition: opacity 0.1s ease, -webkit-transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s ease;
transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s ease, -webkit-transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}
.is-active .slide__title .title-line:nth-of-type(2n) span {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.slide__figure {
z-index: 7;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
height: 100%;
width: 100%;
-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
transition: -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.is-sliding .slide__figure {
-webkit-transform: scale(0.8);
transform: scale(0.8);
-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
transition: -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.slide__img {
position: relative;
display: block;
background-size: cover;
background-attachment: fixed;
background-position: 50%;
-webkit-backface-visibility: hidden;
height: 0%;
width: 100%;
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
-webkit-transition: height 1s 1.4s cubic-bezier(0.19, 1, 0.22, 1), -webkit-filter 0.4s 0.1s ease;
transition: height 1s 1.4s cubic-bezier(0.19, 1, 0.22, 1), -webkit-filter 0.4s 0.1s ease;
transition: height 1s 1.4s cubic-bezier(0.19, 1, 0.22, 1), filter 0.4s 0.1s ease;
transition: height 1s 1.4s cubic-bezier(0.19, 1, 0.22, 1), filter 0.4s 0.1s ease, -webkit-filter 0.4s 0.1s ease;
}
.is-active .slide__img {
height: 100%;
opacity: 1;
-webkit-transition: height 0.5s 0.3s cubic-bezier(0.77, 0, 0.175, 1), -webkit-filter 0.4s 0.1s ease;
transition: height 0.5s 0.3s cubic-bezier(0.77, 0, 0.175, 1), -webkit-filter 0.4s 0.1s ease;
transition: height 0.5s 0.3s cubic-bezier(0.77, 0, 0.175, 1), filter 0.4s 0.1s ease;
transition: height 0.5s 0.3s cubic-bezier(0.77, 0, 0.175, 1), filter 0.4s 0.1s ease, -webkit-filter 0.4s 0.1s ease;
}
.is-sliding .slide__img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
} .dl-feedgallery-wrap {
position: relative;
display: block;
overflow: hidden;
min-height: 50px;
}
.dl-feedgallery-wrap .feed-item a {
overflow: hidden;
display: block;
}
.dl-feedgallery-wrap .feed-item a img {
transform: scale(1);
width: 100%;
height: auto;
transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}
.dl-feedgallery-wrap .feed-item a:hover img {
transform: scale(1.08);
animation: burn-pulse 3s infinite;
-moz-animation: burn-pulse 3s infinite;
-webkit-animation: burn-pulse 3s infinite;
-ms-animation: burn-pulse 3s infinite;
}
.dl-feedgallery-wrap .follow-btn {
position: absolute;
content: '';
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
.dl-feedgallery-wrap .follow-btn a {
background: #ffffff;
padding: 15px 20px;
margin: 0;
color: #444;
font-size: 16px;
text-decoration: none;
text-align: center;
display: inline-flex;
align-items: center;
border-radius: 4px;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease-in-out;
}
.dl-feedgallery-wrap .follow-btn a i {
margin-right: 10px;
color: #222;
font-size: 24px;
}
.dl-feedgallery-wrap .follow-btn a i.fa-instagram {
color: #F56040;
}
.dl-feedgallery-wrap .follow-btn a i.fa-flickr {
color: #ff0084;
}
.dl-feedgallery-wrap .follow-btn a:hover {
background-color: rgba(255,255,255,0.9);
transition: all 0.3s ease-in-out;
}
.dl-feedgallery-wrap .feed-grid {
display: block;
overflow: hidden;
}
.dl-feedgallery-wrap .feed-grid .feed-item {
float: left;
width: 20%;
overflow: hidden;
}
.dl-feedgallery-wrap .feed-grid.feed-col-1 .feed-item {
width: 100%;
}
.dl-feedgallery-wrap .feed-grid.feed-col-2 .feed-item {
width: 50%;
}
.dl-feedgallery-wrap .feed-grid.feed-col-3 .feed-item {
width: 33.33%;
}
.dl-feedgallery-wrap .feed-grid.feed-col-4 .feed-item {
width: 25%;
}
.dl-feedgallery-wrap .feed-grid.feed-col-5 .feed-item {
width: 20%;
}
.dl-feedgallery-wrap .feed-grid.feed-col-6 .feed-item {
width: 16.66%;
}
.dl-feedgallery-wrap .feed-grid.feed-col-7 .feed-item {
width: 14.28%;
}
.dl-feedgallery-wrap .feed-grid.feed-col-8 .feed-item {
width: 12.50%;
}
@keyframes burn-pulse {
0% {
filter: grayscale(0);
}
25% {
filter: grayscale(100%);
}
50% {
filter: grayscale(0);
}
75% {
filter: grayscale(100%);
}
100% {
filter: grayscale(0);
}
}
@-webkit-keyframes burn-pulse {
0% {
filter: grayscale(0);
}
25% {
filter: grayscale(100%);
}
50% {
filter: grayscale(0);
}
75% {
filter: grayscale(100%);
}
100% {
filter: grayscale(0);
}
}
@media (max-width: 992px) {
.dl-feedgallery-wrap .feed-grid.feed-col-8 .feed-item,
.dl-feedgallery-wrap .feed-grid.feed-col-7 .feed-item,
.dl-feedgallery-wrap .feed-grid.feed-col-6 .feed-item,
.dl-feedgallery-wrap .feed-grid.feed-col-5 .feed-item{
width: 33.33%;
}
.dl-feedgallery-wrap .feed-grid.feed-col-4 .feed-item,
.dl-feedgallery-wrap .feed-grid.feed-col-3 .feed-item{
width: 50%;
}
}
@media (max-width:480px) {
.dl-feedgallery-wrap .feed-grid.feed-col-8 .feed-item,
.dl-feedgallery-wrap .feed-grid.feed-col-7 .feed-item,
.dl-feedgallery-wrap .feed-grid.feed-col-6 .feed-item,
.dl-feedgallery-wrap .feed-grid.feed-col-5 .feed-item,
.dl-feedgallery-wrap .feed-grid.feed-col-4 .feed-item,
.dl-feedgallery-wrap .feed-grid.feed-col-3 .feed-item,
.dl-feedgallery-wrap .feed-grid.feed-col-2 .feed-item{
width: 100%;
}
} .portfolio-item-wrap {
position: relative;
min-height: 50px;
}
.portfolio-item-wrap .portfolio-title {
white-space: nowrap;
background: #ffffff;
font-size: 20px;
font-weight: 700;
padding: 5px 15px;
color: #000000;
position: fixed;
z-index: 1000;
opacity: 0;
visibility: hidden;
}
.portfolio-item-wrap .portfolio-title.visible {
opacity: 1;
visibility: visible;
}
.portfolio-item-wrap .portfolio-title .portfolio_cat {
position: absolute;
background: #ffffff;
top: 100%;
left: 0;
margin-top: -5px;
font-family: "Montserrat";
font-size: 12px;
font-weight: 400;
padding: 5px 15px;
}
.el-portfolio-wrap .portfolio-item-wrap .portfolio-title{
padding: 0;
background-color: transparent;
}
.el-portfolio-wrap .portfolio-item-wrap .portfolio-title .title{
padding: 5px 15px;
display: inline-block;
}
.el-portfolio-wrap .portfolio-item-wrap .portfolio-title .portfolio_cat{
margin: 0;
display: inline-block;
}
.el-portfolio-wrap .dl-row{
overflow: inherit;
}
.portfolio-items {
margin: -10px;
}
.portfolio-items.dl-row .single-item {
padding: 10px;
}
.portfolio-items .portfolio-item {
display: block;
}
.portfolio-items img {
width: 100%;
}
.portfolio-items .portfolio-content {
position: relative;
overflow: hidden;
}
.portfolio-2 .portfolio-item {
position: relative;
display: block;
overflow: hidden;
}
.portfolio-2 .portfolio-item img {
transition: all 0.5s ease-in-out;
}
.portfolio-2 .portfolio-item .portfolio-content {
background-color: rgba(17, 17, 17, 0.6);
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
display: flex;
text-align: center;
align-items: center;
justify-content: center;
color: #fff;
visibility: hidden;
opacity: 0;
transition: all 0.3s ease-in-out;
}
.portfolio-2 .portfolio-item .portfolio-content h3 {
font-size: 22px;
line-height: 24px;
margin: 0;
color: #fff;
transform: translateY(-5px);
transition: all 0.5s ease-in-out;
}
.portfolio-2 .portfolio-item .portfolio-content .cat {
font-size: 13px;
margin: 5px 0 0;
display: block;
transform: translateY(5px);
transition: all 0.5s ease-in-out;
}
.portfolio-2 .portfolio-item .portfolio-content:before, 
.portfolio-2 .portfolio-item .portfolio-content:after {
background-color: transparent;
width: 30px;
height: 30px;
position: absolute;
right: 50px;
top: 50px;
content: "";
transition: all 0.2s ease-in-out;
visibility: hidden;
opacity: 0;
}
.portfolio-2 .portfolio-item .portfolio-content:before {
border-right: 3px solid #fff;
border-top: 3px solid #fff;
}
.portfolio-2 .portfolio-item .portfolio-content:after {
right: auto;
left: 50px;
top: auto;
bottom: 50px;
border-left: 3px solid #fff;
border-bottom: 3px solid #fff;
}
.portfolio-2 .portfolio-item:hover img {
transform: scale(1.05);
}
.portfolio-2 .portfolio-item:hover .portfolio-content {
visibility: visible;
opacity: 1;
}
.portfolio-2 .portfolio-item:hover .portfolio-content .cat,
.portfolio-2 .portfolio-item:hover .portfolio-content h3 {
transform: translatey(0);
}
.portfolio-2 .portfolio-item:hover .portfolio-content:before {
right: 10px;
top: 10px;
visibility: visible;
opacity: 1;
animation-delay: 0.2s;
}
.portfolio-2 .portfolio-item:hover .portfolio-content:after {
left: 10px;
bottom: 10px;
visibility: visible;
opacity: 1;
animation-delay: 0.2s;
}
.portfolio-3 .portfolio-item {
text-decoration: none;
}
.portfolio-3 .portfolio-item .portfolio-content {
padding: 25px 0 0;
}
.portfolio-3 .portfolio-item .portfolio-content h3 {
font-size: 22px;
color: #333;
margin: 0;
}
.portfolio-3 .portfolio-item .portfolio-content .cat {
font-size: 16px;
color: #777;
margin: 5px 0 0;
display: block;
}
.portfolio-4 .portfolio-item {
position: relative;
}
.portfolio-4 .portfolio-item .overlay {
background-color: rgba(255, 255, 255, 0.8);
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #444;
text-decoration: none;
transition: all 0.3s ease-in-out;
visibility: hidden;
opacity: 0;
}
.portfolio-4 .portfolio-item:hover .overlay {
left: 10px;
top: 10px;
right: 10px;
bottom: 10px;
visibility: visible;
opacity: 1;
}
.img-scale-effect .img-thumb,
.img-scale-effect .portfolio-item {
overflow: hidden;
}
.img-scale-effect .img-thumb img,
.img-scale-effect .portfolio-item img {
transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}
.img-scale-effect .img-thumb:hover img,
.img-scale-effect .portfolio-item:hover img {
transform: scale(1.1);
} .dl-flip-box-container:after {
display: block;
visibility: hidden;
clear: both;
height: 0;
content: " ";
font-size: 0
}
.dl-flip-box-container .dl-flip-box-inner {
position: relative;
z-index: 1;
margin: 0;
padding: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
.dl-flip-box-container .dl-flip-box-inner:hover .dl-flip-box-back {
z-index: 1
}
.dl-flip-box-container .dl-flip-box-inner:hover .dl-flip-box-front {
z-index: -1
}
.dl-flip-box-container .dl-flip-box-inner .dl-flip-box-inner-wrapper {
position: relative;
-webkit-transform: translateZ(0);
-webkit-perspective: 1000px;
perspective: 1000px
}
.dl-flip-box-container .dl-flip-box-inner .dl-flip-box-back,
.dl-flip-box-container .dl-flip-box-inner .dl-flip-box-front {
top: 0;
right: 0;
left: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
-ms-flex-align: center;
height: 250px;
background-position: center;
background-clip: padding-box;
background-size: cover;
background-repeat: no-repeat;
text-align: center;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000px;
perspective: 1000px
}
.dl-flip-box-container .dl-flip-box-inner .dl-flip-box-front {
background-color: transparent;
position: relative;
bottom: 0;
z-index: 10;
padding: 30px;
border: 1px solid #ddd;
border-radius: .3rem
}
.dl-flip-box-container .dl-flip-box-inner .dl-flip-box-back:before,
.dl-flip-box-container .dl-flip-box-inner .dl-flip-box-front:before {
position: absolute;
top: 0;
left: 0;
z-index: -9;
width: 100%;
height: 100%;
background-color: transparent;
content: ""
}
.dl-flip-box-container .dl-flip-box-inner .dl-flip-box-back {
position: absolute;
z-index: -1;
padding: 46px;
border-radius: .3rem;
background-color: #562dd4;
color: #fff
}
.dl-flip-box-container .dl-flip-box-inner .dl-flip-box-back-inner,
.dl-flip-box-container .dl-flip-box-inner .dl-flip-box-front-inner {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
width: 100%
}
.dl-flip-box-container .dl-flip-box-inner .dl-flip-box-back-inner .dl-text,
.dl-flip-box-container .dl-flip-box-inner .dl-flip-box-front-inner .dl-text {
text-align: center
}
.dl-flip-box-container .dl-flip-box-inner .dl-flip-box-back-inner .dl-text p,
.dl-flip-box-container .dl-flip-box-inner .dl-flip-box-front-inner .dl-text p {
margin-top: 10px;
margin-bottom: 0
}
.dl-flip-box-container .dl-flip-box-inner .dl-flip-box-front-inner .dl-flip-icon.icon {
border-radius: 50%;
background-color: #f1f4f8;
color: #222;
}
.dl-flip-box-container .dl-flip-box-inner .dl-flip-box-front-inner .dl-flip-icon {
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
font-size: 18px;
margin-bottom: 20px;
text-align: center
}
.dl-flip-box-container .dl-flip-box-inner .dl-flip-box-front-inner .dl-flip-icon i {}
.dl-flip-box-container .dl-flip-box-inner .dl-flip-box-back-inner .dl-flip-icon i:before,
.dl-flip-box-container .dl-flip-box-inner .dl-flip-box-front-inner .dl-flip-icon i:before { }
.dl-flip-box-container .dl-flip-box-inner .dl-flip-box-back-inner .dl-flip-icon img,
.dl-flip-box-container .dl-flip-box-inner .dl-flip-box-front-inner .dl-flip-icon img {
vertical-align: middle
}
.dl-flip-box-container .dl-flip-box-inner .dl-flip-box-front-inner .dl-flip-box-heading {
margin: 0;
font-weight: 700;
font-size: 20px
}
.dl-flip-box-container .dl-flip-box-inner .dl-flip-box-front-inner p {
margin-bottom: 0;
font-size: 16px
}
.dl-flip-box-container .dl-flip-box-inner .dl-flip-box-back-inner .dl-flip-box-heading-back {
margin: 0;
color: #fff;
font-size: 18px
}
.dl-flip-box-container .dl-flip-box-inner .dl-flip-box-back-inner .dl-flip-icon {
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
margin-bottom: 20px;
text-align: center
}
.dl-flip-box-container .dl-flip-box-inner .dl-flip-box-back-inner .dl-flip-icon i {
position: relative;
display: block;
width: 1em;
height: 1em;
color: #fff;
font-size: 20px
}
.dl-flip-box-container .dl-flip-box-back-inner .button-wrap {
margin-top: 12px
}
.dl-flip-box-container .dl-flip-box-back-inner .dl-flip-btn {
display: inline-block;
padding: .8rem 2.5rem;
border-radius: 4px;
background-color: #fff;
color: #562dd4;
text-decoration: none;
text-transform: uppercase;
font-size: 12px;
-webkit-transition: all .3s;
transition: all .3s
}
.dl-flip-box-container .dl-flip-box-back-inner .dl-flip-btn:hover {
background-color: #fff;
color: #562dd4
}
.dl-flip-box-container .dl-flip-box-inner.dl-flip-right .dl-flip-box-front,
.dl-flip-box-container .dl-flip-box-inner.dl-flip-right:hover .dl-flip-box-back {
-webkit-transform: rotateY(0);
transform: rotateY(0)
}
.dl-flip-box-container .dl-flip-box-inner.dl-flip-right .dl-flip-box-back {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg)
}
.dl-flip-box-container .dl-flip-box-inner.dl-flip-right:hover .dl-flip-box-front {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg)
}
.dl-flip-box-container .dl-flip-box-inner.dl-flip-left .dl-flip-box-front,
.dl-flip-box-container .dl-flip-box-inner.dl-flip-left:hover .dl-flip-box-back {
-webkit-transform: rotateY(0);
transform: rotateY(0)
}
.dl-flip-box-container .dl-flip-box-inner.dl-flip-left .dl-flip-box-back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg)
}
.dl-flip-box-container .dl-flip-box.dl-flip-left:hover .dl-flip-box-front {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg)
}
.dl-flip-box-container .dl-flip-box-inner.dl-flip-up .dl-flip-box-front,
.dl-flip-box-container .dl-flip-box-inner.dl-flip-up:hover .dl-flip-box-back {
-webkit-transform: rotateX(0);
transform: rotateX(0)
}
.dl-flip-box-container .dl-flip-box-inner.dl-flip-up .dl-flip-box-back {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg)
}
.dl-flip-box-container .dl-flip-box-inner.dl-flip-up:hover .dl-flip-box-front {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg)
}
.dl-flip-box-container .dl-flip-box-inner.dl-flip-down .dl-flip-box-front,
.dl-flip-box-container .dl-flip-box-inner.dl-flip-down:hover .dl-flip-box-back {
-webkit-transform: rotateX(0);
transform: rotateX(0)
}
.dl-flip-box-container .dl-flip-box-inner.dl-flip-down .dl-flip-box-back {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg)
}
.dl-flip-box-container .dl-flip-box-inner.dl-flip-down:hover .dl-flip-box-front {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg)
}
.dl-flip-box-container.dl-flip-effect-classic .dl-flip-box-back,
.dl-flip-box-container.dl-flip-effect-classic .dl-flip-box-front {
-webkit-transition: -webkit-transform .6s cubic-bezier(.2, .85, .4, 1.275);
transition: transform .6s cubic-bezier(.2, .85, .4, 1.275);
transition: transform .6s cubic-bezier(.2, .85, .4, 1.275), -webkit-transform .6s cubic-bezier(.2, .85, .4, 1.275)
} .dl-gradient-heading{ margin-top: 0; margin-bottom: 0 }
.dl-gradient-heading > a{ color: inherit; text-decoration: none} .dl-skills > .elementor-widget-container {
padding-top: 1px
}
.dl-skill {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
border-radius: 15px;
background-color: #e9ecef;
font-size: .75rem
}
.dl-skill--inside .dl-skill-info,
.dl-skill--outside .dl-skill-info {
text-align: left;
font-size: 14px
}
.dl-skill--inside .dl-skill-level-text,
.dl-skill--outside .dl-skill-level-text {
float: right
}
.dl-skill--outside {
height: 2px
}
.dl-skill--outside .dl-skill-level {
position: relative
}
.dl-skill--outside .dl-skill-info {
position: absolute;
top: -25px;
width: 100%;
color: #242424
}
.dl-skill--inside {
height: 30px
}
.dl-skill--inside .dl-skill-info {
padding-right: 1rem;
padding-left: 1rem;
color: #fff
}
.dl-skill-level {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
width: 10%;
border-radius: inherit;
background-color: #562dd4;
color: #fff;
text-align: center;
white-space: nowrap;
-webkit-transition: width .6s ease;
transition: width .6s ease
}
.dl-skill--outside {
margin-top: 40px
}
.dl-skill--inside:not(:first-child) {
margin-top: 20px
}[data-class="wpcf7cf_group"], .wpcf7cf_remove, .wpcf7cf_add {
display:none;
}
.wpcf7cf_repeater_sub {
margin-bottom: 20px;
}
.wpcf7cf_repeater_controls, .wpcf7cf_step_controls {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 20px;
}
.wpcf7cf_multistep .wpcf7cf_step { width: 100%;
}
.wpcf7cf_multistep .wpcf7cf_step .step-title {
display: none;
}
.wpcf7cf_multistep .wpcf7cf_steps-dots {
display: flex;
width: 100%;
margin-bottom: 20px;
flex-wrap: wrap;
}
.wpcf7cf_multistep .wpcf7cf_steps-dots .dot .step-index {
display: inline-block;
border-radius: 50%;
background: #dfdfdf;
color: #000000;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
}
.wpcf7cf_multistep .wpcf7cf_steps-dots .dot {
border-bottom: 5px solid #dfdfdf;
text-align: center;
flex: 1;
padding: 15px;
min-width: 120px;
}
.wpcf7cf_multistep .wpcf7cf_steps-dots .dot.completed {
border-bottom: 5px solid #333;
}
.wpcf7cf_multistep .wpcf7cf_steps-dots .dot.active {
border-bottom: 5px solid #333;
font-weight: bold;
}
.wpcf7cf_multistep .wpcf7cf_steps-dots .dot.completed .step-index {
background-color: #333;
color: #ffffff;
}
.wpcf7cf_multistep .wpcf7cf_steps-dots .dot.active .step-index {
background-color: #333;
color: #ffffff;
}
.wpcf7cf_step_controls .disabled {
pointer-events: none;
cursor: default;
opacity: .5;
}