/*
.myip .cross::before {z-index: 20000; content: ''; position: absolute; display: block; left: -1px; top: -10px; width: 2px; height: 20px; background: red; opacity: .5; }
.myip .cross::after {z-index: 21000; content: ''; position: absolute; display: block; left: -10px; top: -1px; width: 20px; height: 2px; background: red; opacity: .5; }
*/

body, input, textarea, button {font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif; }

h1, .ref-block h2 {font-family: 'Roboto Slab', serif; font-weight: 900 !important; }

h1, h2, h3, p {margin: 0; padding: 0; }

.text-block h1 {padding-bottom: 30px; }
.ref-detail .text-block h1, .client-refs .text-block h1 {font-weight: 700; text-transform: none; padding-bottom: 40px; }
.ref-detail .text-block h1 span {color: #1b1d1e; display: block; }
.ref-detail .text-block p {}

h1 {font-size: 2.44rem; font-weight: 900; text-align: center; }
h1.sea, h1 .sea {color: #0db6a8; }

ul, li {margin: 0; padding: 0; }
ul {list-style: none; }

h1 a {}

p {line-height: 1.4; }

a {text-decoration: none; }

a img {border: none; }

.ltr {direction: ltr !important; }

html, body {margin: 0; padding: 0; overflow: auto; -moz-scroll-behavior: auto; }
html {font-size: 100%; }
body {background: #1b1d1e; font-size: 1rem; font-weight: 300; color: #fff; overflow-x: hidden; overflow-y: auto; }


button {outline: none !important; }
.field-box {position: relative; margin-bottom: 20px; }
.field-box:first-of-type {height: 0; overflow: hidden; }
.field-box label {display: block; margin: 0 10px 10px 10px; color: #0db6a8; font-weight: 700; }
.field-box label sup {font-size: .8em; position: relative; top: -5px; }
.input-box input {position: relative; display: block; width: 100%; padding: 13px 40px 13px 20px; background: #0db6a8; border: none; border-radius: 25px; outline: none !important; color: #fff !important; font-size: 1.125rem; font-weight: 400; line-height: 1.3; box-sizing: border-box; }
/*
.input-box:nth-of-type(2n+1) {margin-right: 2%; }
.input-box:nth-of-type(2n+2) {margin-left: 2%; }
*/
.textarea-box textarea {position: relative; display: block; width: 100%; height: 250px; padding: 13px 40px 13px 20px; background: #0db6a8; border: none; border-radius: 25px; outline: none !important; color: #fff !important; font-size: 1.125rem; font-weight: 400; line-height: 1.3; box-sizing: border-box; }
.checkbox-box label {cursor: pointer; position: relative; padding-left: 30px; }
.checkbox-box label::before {display: block; content: ''; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; background: #fff; border: 1px solid #cfa175; }
.checkbox-box.checked label::before {background: #cfa175; }
.checkbox-box label a {color: #e14a51; text-decoration: underline; }

.field-box input, .field-box textarea {transition: background-color .5s ease; }
.field-box::after {content: url(bg/field-box-ok.svg); display: block; position: absolute; right: 14px; top: 45px; opacity: 0; transition: opacity .5s ease; }
.field-box.has-value::after {opacity: 1; }
.field-box.focus::after, .field-box.error::after {opacity: 0; }
.field-box.has-value label {transition: color .5s ease; }
.field-box.has-value input, .field-box.has-value textarea {background: #363839 !important; }
/* .field-box.has-value input:-webkit-autofill, .field-box.has-value textarea:-webkit-autofill {box-shadow: 0 0 0 100px #363839 !important; -webkit-text-fill-color: #fff; } */
.field-box.has-value label {color: #6a6c6d; }
.field-box.focus input, .field-box.focus textarea, .field-box.error input, .field-box.error textarea {background: #ff710f !important; }
/* .field-box.focus input:-webkit-autofill:focus, .field-box.focus textarea:-webkit-autofill:focus {box-shadow: 0 0 0 100px #ff710f !important; -webkit-text-fill-color: #fff; } */
.field-box.error input, .field-box.error textarea {animation: shake-as-no 4s infinite cubic-bezier(.35, 0, .65, 1); }
.field-box.focus label, .field-box.error label {color: #ff710f; }

@keyframes shake-as-no {
    0% {transform: none; }
    4% {transform: translateX(-10px); }
    8% {transform: translateX(10px); }
    12% {transform: translateX(-10px); }
    20% {transform: none; }
    100% {transform: none; }
}

.notifications {position: relative; padding: 0 20px; }
.notifications .notifications-box {position: relative; bottom: 0; padding-bottom: 20px; box-sizing: border-box; }
/*.notifications.hide {height: 0 !important; }*/
/*.notifications.hide .notifications-box {opacity: 0; }*/

.notifications, .notifications .notifications-box {transition: .35s cubic-bezier(.07, .71, .3, 1); }


nav, header, section, footer {width: 100%; }
section.white .fill {background: linear-gradient(to bottom, #d1d8df, #fff); }
.stripe {width: 100%; max-width: 1140px; margin-left: auto; margin-right: auto; }

.stripe.filmstrip {max-width: none; }
.stripe-content {margin: 0 5%; padding: 9% 0; }
.ref-detail .ref-list section:first-of-type .stripe-content, .client-refs .ref-list section:first-of-type .stripe-content {padding-top: 160px; }

@media (max-width: 970px){
    .ref-detail .ref-list section:first-of-type .stripe-content, .client-refs .ref-list section:first-of-type .stripe-content {padding-top: 130px; }
}

.services section:first-of-type .stripe-content, .contact section:first-of-type .stripe-content, .agency section:first-of-type .stripe-content {padding-top: 0; }
header .stripe-content {padding: 100px 0; }
.contact header .stripe-content, .blog header .stripe-content, .blog-detail header .stripe-content {padding-bottom: 0; }
.ref-detail header .stripe-content, .client-refs header .stripe-content {padding: 160px 0 150px 0; }


section, footer {position: relative; overflow: hidden; }
div {box-sizing: border-box; }

.scroll-flip-3d {position: relative; perspective: 500px; transform-style: flat; }

.scroll-flip-3d>.fill {width: 100%; transform: rotate3d(1,0,0,0) translateY(1px); transform-style: preserve-3d; transform-origin: center bottom; backface-visibility: hidden; box-shadow: 0 0 0 rgba(0,0,0,0); /*outline: 1px solid transparent;*/ }
/*.scroll-flip-3d>.fill {transform: rotate3d(1,0,0,-10deg) translateY(300px); box-shadow: 0 -25px 30px rgba(0,0,0,.5); }*/
.scroll-flip-3d.flat>.fill {transform: rotate3d(1,0,0,0) translateY(1px); }



header, footer>.fill, header+section {background: #ff710f; }
.blog header, .blog header+section, .blog header+section .fill, .blog-detail header, .blog-detail header+section, .blog-detail header+section .fill {background: transparent; }
body.blog, body.blog-detail {background: #0ec8b9; }

.filmstrip>.fill, .filmstrip+*, .filmstrip+* {background: #fff; color: #1b1d1e; }

/*
.ref-list.hp section.black-pearl>.fill, .ref-list.hp section.black-pearl+*, .ref-list+*.black-pearl {background: #272a2b; }
.ref-list.hp section.white>.fill, .ref-list.hp section.white+*, .ref-list+*.white {background: #fff; }
.ref-list.hp section.pumpkin>.fill, .ref-list.hp section.pumpkin+*, .ref-list+*.pumpkin {background: #ffad4f; }
.ref-list.hp section.sea>.fill, .ref-list.hp section.sea+*, .ref-list+*.sea {background: #0ec8b9; }
.ref-list.hp section.dark-cerulean>.fill, .ref-list.hp section.dark-cerulean+*, .ref-list+*.dark-cerulean {background: #09588e; }
.ref-list.hp section.rose>.fill, .ref-list.hp section.rose+*, .ref-list+*.rose {background: #c04fb1; }

.ref-list.hp section.black-pearl>.fill {background: linear-gradient(to bottom, #101112, #272a2b); }
.ref-list.hp section.white>.fill {background: linear-gradient(to bottom, #d1d8df, #fff); }
.ref-list.hp section.pumpkin>.fill {background: linear-gradient(to bottom, #ee6400, #ffad4f); }
.ref-list.hp section.sea>.fill {background: linear-gradient(to bottom, #0b968a, #0ec8b9); }
.ref-list.hp section.dark-cerulean>.fill {background: linear-gradient(to bottom, #063b5f, #09588e); }
.ref-list.hp section.rose>.fill {background: linear-gradient(to bottom, #85377b, #c04fb1); }
*/

.ref-list.hp {background: #101112; }
section.black-pearl>.fill, section.black-pearl+*, section.black-pearl+section.image-stripe+*, .ref-list+*.black-pearl {background: #272a2b; }
section.white>.fill, section.white+*, section.white+section.image-stripe+*, .ref-list+*.white {background: #fff; }
section.pumpkin>.fill, section.pumpkin+*, section.pumpkin+section.image-stripe+*, .ref-list+*.pumpkin {background: #ffad4f; }
section#top-image-stripe, .ref-detail .ref-list section:first-of-type, .ref-detail .ref-list section.image-stripe:first-of-type+section, .client-refs .ref-list section:first-of-type, .client-refs .ref-list section.image-stripe:first-of-type+section {background: #ff710f; } /* first section in ref list @ ref detail */ 
section.sea>.fill, section.sea+*, section.sea+section.image-stripe+*, .ref-list+*.sea {background: #0ec8b9; }
section.dark-cerulean>.fill, section.dark-cerulean+*, section.pumpkin+section.image-stripe+*, .ref-list+*.dark-cerulean {background: #09588e; }
section.rose>.fill, section.rose+*, section.rose+section.image-stripe+*, .ref-list+*.rose {background: #c04fb1; }

section.black-pearl>.fill {background: linear-gradient(to bottom, #101112, #272a2b); }
section.white>.fill {background: linear-gradient(to bottom, #d1d8df, #fff); }
section.pumpkin>.fill {background: linear-gradient(to bottom, #ee6400, #ffad4f); }
section.sea>.fill {background: linear-gradient(to bottom, #0b968a, #0ec8b9); }
section.dark-cerulean>.fill {background: linear-gradient(to bottom, #063b5f, #09588e); }
section.rose>.fill {background: linear-gradient(to bottom, #85377b, #c04fb1); }

.services section:first-of-type>.fill, .services section:first-of-type+*, .agency section.pumpkin .fill ,
.contact section:first-of-type>.fill, .contact section:first-of-type+*, .contact section.pumpkin .fill 
{background: #ff710f; }


.scroll-flip-3d .fill {transition: .5s cubic-bezier(.71, 0, .81, .69); }
.scroll-flip-3d.flat .fill {transition: 1s cubic-bezier(.05, .65, .18, 1); }


.ref-block {display: flex; flex-flow: row; justify-content: space-around; align-items: center; transition: padding .5s ease; }
.ref-block.swap-sides {flex-flow: row-reverse; }
.ref-block.empty {padding-top: 0; padding-bottom: 0; }
.ref-block>* {flex: 0 0 auto; }
.ref-block .copy {z-index: 4000; position: relative; width: 37%; height: auto; }
.ref-block .mockup-area-outer {z-index: 2000; }

/*

    R E F   B L O C K   N A V I G A T I O N

*/
#jump-navigation {margin: 0 auto; width: 90%; max-width: 1700px; position: relative; }
#jump-navigation a, #jump-navigation .client-refs {position: absolute; display: flex; flex-flow: row; justify-content: center; align-items: center; transform: translate(-50%,-50%); }
#jump-navigation a span.circle, #jump-navigation .client-refs span.circle {z-index: 100; position: absolute; display: block; width: 100%; height: 100%; border-radius: 50%; background: #fff; transition: .5s ease-in-out; }
#jump-navigation a:hover span.circle {transform: scale(1.2) rotate(-.1deg); transition: .35s cubic-bezier(.15, 2, .38, 1); }
#jump-navigation a:hover svg {transform: scale(.7) rotate(.1deg); transition: .45s cubic-bezier(.15, 2, .38, 1); }
#jump-navigation a svg {z-index: 200; position: relative; flex: 0 0 auto; transition: .55s ease-in-out; }
#jump-navigation a img, #jump-navigation .client-refs img {z-index: 300; display: none; position: relative; transition: .9s ease-in-out; }
#jump-navigation a:hover img {transform: scale(1.1) rotate(-.1deg); transition: .7s cubic-bezier(.15, 2, .38, 1); }

#jump-navigation a.jump-to {width: 90px; height: 90px; }
#jump-navigation a.prev-ref {left: 45px; }
#jump-navigation a.prev-ref.client-logo {left: 105px; }
#jump-navigation a.next-ref {left: calc(100% - 45px); }
#jump-navigation a.next-ref.client-logo {left: calc(100% - 105px); }

#jump-navigation a.jump-to.client-logo img {display: block; max-width: 67%; max-height: 67%; }
#jump-navigation a.jump-to.client-logo svg {position: absolute; }
#jump-navigation a.jump-to.client-logo svg path {fill: #fff; }
#jump-navigation a.prev-ref.client-logo svg {left: -60px; }
#jump-navigation a.next-ref.client-logo svg {left: 105px; }

#jump-navigation .client-refs {left: 50%; width: 190px; height: 190px; }
#jump-navigation .client-refs img {display: block; max-width: 68%; max-height: 68%; }

@media (max-width: 970px){
    
    #jump-navigation a svg {width: 30px; height: 30px; }
    
    #jump-navigation a.jump-to {width: 60px; height: 60px; }
    #jump-navigation a.prev-ref {left: 30px; }
    #jump-navigation a.prev-ref.client-logo {left: 60px; }
    #jump-navigation a.next-ref {left: calc(100% - 30px); }
    #jump-navigation a.next-ref.client-logo {left: calc(100% - 65px); }
    #jump-navigation a.prev-ref.client-logo svg {left: -35px; }
    #jump-navigation a.next-ref.client-logo svg {left: 65px; }
    
    #jump-navigation .client-refs {width: 120px; height: 120px; }
}

/*

    R E F   B L O C K   D E S C R I P T I O N

*/
.white .ref-block .copy {color: #1b1d1e; }
.black-pearl .ref-block .copy h3, .dark-cerulean .ref-block .copy h3, .white .ref-block .copy h3 {color: #ff710f; }

.ref-block .copy h2 a, .ref-block .copy h3 a, .ref-block .copy p a {color: inherit !important; display: block; }
.ref-block .copy h2 {font-size: 2.375rem; font-weight: 900; }
.ref-block .copy h3 {font-size: 1.32rem; font-weight: 900; color: #1b1d1e; }
.ref-block .copy p {padding-bottom: 40px; font-size: 1rem; font-weight: 300; } 
/*.ref-block .copy .links-follow p {padding-bottom: 20px; }*/
.ref-block .copy h2 {padding-bottom: 5px; }
.ref-block .copy h3 {padding-bottom: 40px; }
/*.ref-block .copy p a {padding-bottom: 40px; }*/


.ref-block .content {display: flex; flex-flow: wrap; }
.ref-block .content>* {flex: 1 0 100%; }
@media (max-width: 970px) and (max-height: 850px){
    .ref-block .content {flex-direction: row-reverse; flex-wrap: wrap-reverse; }
    .ref-block .copy h2 a {padding-top: 40px; }
    .ref-block .copy p a {padding-bottom: 0px; } 
}

.ref-block .links {padding-bottom: 40px; display: flex; flex-flow: wrap; gap: 10px; }
.ref-block .links a {flex: 0 1 auto; display: block; padding: 4px 10px; border-width: 2px; border-style: solid; border-radius: 50px; color: #fff; font-size: .8rem; font-weight: 700; transition: .35s ease; }
.black-pearl .ref-block .links a, .white .ref-block .links a, .dark-cerulean .ref-block .links a {background: #ff710f; border-color: #ff710f; }
.pumpkin .ref-block .links a, .sea .ref-block .links a, .rose .ref-block .links a {background: #1b1d1e; border-color: #1b1d1e; }
.ref-block .links a:hover {background: transparent; color: #fff; }
.white .ref-block .links a:hover, .pumpkin .ref-block .links a:hover, .sea .ref-block .links a:hover, .rose .ref-block .links a:hover {color: #1b1d1e; }

.ref-block .categories {flex: 0 1 auto; position: relative; display: inline-flex; flex-flow: wrap; align-items: center; max-width: 100%; width: max-content; box-sizing: border-box; /*background: pink;*/ }
body[dir="ltr"] .ref-block .categories {padding-right: 50px; }
body[dir="rtl"] .ref-block .categories {padding-left: 50px; }

.ref-block .categories a {cursor: pointer; display: block; position: relative; margin: 7px 10px; transition: opacity .45s cubic-bezier(.21, 0, .18, 1); }
.ref-block .categories.small a {margin: 7px 5px; }
@media (min-width: 970px) and (max-width: 1160px){
    .ref-block .categories a {margin: 7px 5px; }
}
@media (max-width: 480px){
    .ref-block .categories a {margin: 7px 5px; }
}
.ref-block .categories>a {z-index: 100; }
.ref-block .categories>a:hover {z-index: 1000; }
.ref-block .categories a.init, .ref-block .categories a.not-loaded, .ref-block .categories a.viewed {cursor: default; }
/*.ref-block .categories a.not-loaded {opacity: .1; }*/
.ref-block .categories>a::before, .ref-block .categories>a::after {/*transform: scale(.8); */}
.ref-block .categories>a::before {display: block; position: relative; opacity: 1; }
.ref-block .categories>a::after {display: block; position: absolute; left: 0; top: 0; transform: translateY(-30px) rotate(-.1deg); opacity: 0; }
.ref-block .categories>a::before, .ref-block .categories>a::after {transition: .45s cubic-bezier(.38, 0, .15, 1); }
.ref-block .categories a.viewed::before, .ref-block .categories a.viewed::after {transition: .45s cubic-bezier(.3, 2, .35, 1); }
.ref-block .categories a.viewed::before {transform: translateY(30px) rotate(-.1deg); opacity: 0; }
.ref-block .categories a.viewed::after {transform: none; opacity: 1; }
.ref-block .categories>a span.loading {position: absolute; display: block; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .45s cubic-bezier(.21, 0, .18, 1); }
.ref-block .categories>a.not-loaded span.loading {opacity: 1; }
.ref-block .categories>a.not-loaded span.loading::before {position: absolute; display: block; left: 50%; top: 50%; transform: translate(-50%,-50%) !important; opacity: 1 !important; transition: none !important; }

.ref-block .categories>a span.label {position: absolute; display: none; left: 50%; top: -15px; padding: 5px 10px; background: #ff710f; border-radius: 13.5px; color: #fff; font-size: .8rem; font-weight: 700; transform: translate(-50%,-100%); }
.ref-block .categories.small>a span.label {top: -10px; }
@media (min-width: 970px) and (max-width: 1160px){
    .ref-block .categories>a span.label {top: -10px; }
}
@media (max-width: 480px){
    .ref-block .categories>a span.label {top: -10px; }
}
.ref-block .categories>a span.label span {z-index: 200; position: relative; }
.ref-block .categories>a span.label::before {z-index: 100; content: ''; position: absolute; display: block; width: 10px; height: 10px; left: 50%; top: 100%; background: #ff710f; transform: translate(-50%,-50%) rotate(45deg); }
.ref-block .categories>a.viewed span.label {display: block; animation: fade-in .55s alternate both 2 ease-in-out; }
.ref-block .categories>a:hover span.label {display: block; animation: fade-in .35s ease-out; }
.sea .ref-block .categories>a span.label,
.pumpkin .ref-block .categories>a span.label,
.rose .ref-block .categories>a span.label,
.sea .ref-block .categories>a span.label::before,
.pumpkin .ref-block .categories>a span.label::before,
.rose .ref-block .categories>a span.label::before
{background: #272a2b; }


@media (hover: hover) and (pointer: fine) {
    .ref-block .categories a:hover::before, .ref-block .categories a:hover::after, .ref-block .categories a.viewed::before, .ref-block .categories a.viewed::after {transition: .45s cubic-bezier(.3, 2, .35, 1); }
    .ref-block .categories a.viewed::before, .ref-block .categories a:hover::before {transform: translateY(30px) rotate(-.1deg); opacity: 0; }
    .ref-block .categories a.viewed::after, .ref-block .categories a:hover::after {transform: none; opacity: 1; }
}
.ref-block .categories .arrow-to-dot-box {position: absolute; top: 50%; transform: translateY(-50%); }
body[dir="ltr"] .ref-block .categories .arrow-to-dot-box {right: 0; }
body[dir="rtl"] .ref-block .categories .arrow-to-dot-box {left: 0; transform: scaleX(-1); }
/* icons */
/*.ref-block .categories a.arrow-to-dot::before {content: url(ico/arrow-right.svg); }*/
.ref-block .categories a.arrow-to-dot span.dot span, .ref-block .categories a.arrow-to-dot span.dot span {background: #1b1d1e; }
.ref-block .categories>a.not-loaded::before {opacity: 0 !important; }
.ref-block .categories>a.not-loaded::after {opacity: 0 !important; }
.ref-block .categories>a.not-loaded span.loading::before {content: url(ico/loading-category-visuals-white.png) !important; }
section.white .ref-block .categories>a.not-loaded span.loading::before {content: url(ico/loading-category-visuals-black-pearl.png) !important; }


/* pumpkin color */
/*.black-pearl .ref-block .categories a.arrow-to-dot::before, .white .ref-block .categories a.arrow-to-dot::before {content: url(ico/arrow-right-pumpkin.svg); }*/
.black-pearl .ref-block .categories a.arrow-to-dot span.dot span, .white .ref-block .categories a.arrow-to-dot span.dot span,
.black-pearl .ref-block .categories a.arrow-to-dot span.dot span, .white .ref-block .categories a.arrow-to-dot span.dot span,
.dark-cerulean .ref-block .categories a.arrow-to-dot span.dot span, .dark-cerulean .ref-block .categories a.arrow-to-dot span.dot span
{background: #ff710f; }

/*

category icons area dynamic

*/

/*
@media (max-width: 400px){
    .ref-block .categories>a {margin: 5px 0; }
    .ref-block .categories>a::after {transform: translateY(-30px) scale(.75) rotate(-.1deg); }
    .ref-block .categories>a::before, .ref-block .categories>a.viewed::after, .ref-block .categories>a:hover::after {transform: scale(.75); }
    .ref-block .categories>a.viewed::before, .ref-block .categories>a:hover::before {transform: translateY(30px) scale(.75) rotate(-.1deg); }
}
*/




/*

    R E F   B L O C K   C O N T E N T   S W I T C H

*/
.ref-block .copy {transition: height .95s ease; } /* switching transition when changing height from curr to next .content height */

.ref-block .copy .content, .ref-block .copy .content.active {position: absolute; width: 100%; top: 50%; transform: translateY(-50%); }
.ref-block .copy .content.active.curr {position: relative; top: auto; transform: none; }

.ref-block .copy .content .text>*, .ref-block .copy .content .links {position: relative; }


/* hide anims */
.ref-block .copy .content .text>*, .ref-block .copy .content .links, .ref-block .copy .content .categories {animation: copy-items-hide .45s forwards cubic-bezier(.33, -0.46, .18, 1); }
body[dir=rtl] .ref-block .copy .content .text>*, body[dir=rtl] .ref-block .copy .content .links, body[dir=rtl] .ref-block .copy .content .categories {animation: copy-items-hide .45s forwards cubic-bezier(.33, -0.46, .18, 1); }
/* show anims */
.ref-block .copy .content.active .text>*, .ref-block .copy .content.active .links, .ref-block .copy .content.active .categories {animation: copy-items-show .45s backwards cubic-bezier(.16, 1.41, .69, 1); }
body[dir=rtl] .ref-block .copy .content.active .text>*, body[dir=rtl] .ref-block .copy .content.active .links, body[dir=rtl] .ref-block .copy .content.active .categories {animation: copy-items-show-rtl .45s backwards cubic-bezier(.16, 1.41, .69, 1); }


.ref-block .copy .content .text h2 {animation-delay: 0s; }
.ref-block .copy .content .text h3 {animation-delay: .1s; }
.ref-block .copy .content .text p {animation-delay: .2s; }
.ref-block .copy .content .links {animation-delay: .3s; }
.ref-block .copy .content .categories {animation-delay: .3s; }
.ref-block .copy .content .categories.links-before {animation-delay: .4s; }
/*.ref-block .copy .content .categories.ref-block .copy .content .ref-block-copy-switch {animation-delay: .3s; }*/
.ref-block .copy .content.active .text h2 {animation-delay: .2s; }
.ref-block .copy .content.active .text h3 {animation-delay: .3s; }
.ref-block .copy .content.active .text p {animation-delay: .4s; }
.ref-block .copy .content.active .links {animation-delay: .5s; }
.ref-block .copy .content.active .categories {animation-delay: .5s; }
.ref-block .copy .content.active .categories.links-before {animation-delay: .4s; }
/*.ref-block .copy .content.active .ref-block-copy-switch {animation-delay: .5s; }*/

.ref-block .copy .content.active.curr .text p, .ref-block .copy .content.active.curr .links, .ref-block .copy .content.active.curr .categories {animation: none; }

@keyframes copy-items-hide {
    0% {transform: none; opacity: 1; }
    100% {transform: translateX(-100px); opacity: 0; }
}
@keyframes copy-items-hide-rtl {
    0% {transform: none; opacity: 1; }
    100% {transform: translateX(100px); opacity: 0; }
}

@keyframes copy-items-show {
    0% {transform: translateX(100px); opacity: 0; }
    100% {transform: none; opacity: 1; }
}
@keyframes copy-items-show-rtl {
    0% {transform: translateX(-100px); opacity: 0; }
    100% {transform: none; opacity: 1; }
}


 /*
    ! JS binding to this animation
*/
.ref-block .copy .content .ref-block-copy-switch {position: absolute; animation: ref-block-switch .45s; } /* .45s animation duration + .5 last animation delay */
@keyframes ref-block-switch {
    0% {opacity: 1; }
    100% {opacity: 0; }
}

/*

    A R R O W   T O   D O T   D R A W   A T T E N T I O N

*/


/*

    R E F   B L O C K   D R A W   A T T E N T I O N

*/
a.arrow-to-dot {position: relative; display: inline-block; width: 30px; height: 30px; margin-bottom: 0; /*background: silver; */}
a.arrow-to-dot span.dot {display: block; position: absolute; right: 0; top: 50%; width: 90%; height: 90%; }
a.arrow-to-dot span span {position: absolute; display: block; right: 0; width: 100%; height: 25%; border-radius: 50px; }
a.arrow-to-dot span span:nth-child(1) {transform: translateY(-25%) rotate(45deg); transform-origin: right center; }
a.arrow-to-dot span span:nth-child(2) {transform: translateY(-75%) rotate(-45deg); transform-origin: right center; }

.vp .ref-block .categories a.arrow-to-dot {animation: go-for-detail 7.3s cubic-bezier(.12, 0, .37, 1); }
.vp .ref-block .categories a.arrow-to-dot span.dot {animation: draw-attention-copy-arrow 7.3s cubic-bezier(.52, 0, 1, .48); }
.vp .ref-block .categories a.arrow-to-dot span span:nth-child(1) {animation: draw-attention-copy-arrow-line-top 7.3s cubic-bezier(.52, 0, .48, 1); }
.vp .ref-block .categories a.arrow-to-dot span span:nth-child(2) {animation: draw-attention-copy-arrow-line-bottom 7.3s cubic-bezier(.52, 0, .48, 1); }

a.arrow-to-dot.hout, a.arrow-to-dot.hout span {animation: none !important; transition: .45s ease-in-out !important; }
a.arrow-to-dot.hover, a.arrow-to-dot.hover span {animation: none !important; transition: .25s ease-out !important; }
a.arrow-to-dot.hover span span:nth-child(1) {transform: translate(40%, -30%) rotate(30deg); width: 70%; }
a.arrow-to-dot.hover span span:nth-child(2) {transform: translate(40%, -70%) rotate(-30deg); width: 70%; }

section:nth-child(3n) .ref-block .categories a.arrow-to-dot,
section:nth-child(3n) .ref-block .categories a.arrow-to-dot span.dot,
section:nth-child(3n) .ref-block .categories a.arrow-to-dot span span:nth-child(1),
section:nth-child(3n) .ref-block .categories a.arrow-to-dot span span:nth-child(2)
{animation-delay: 8.3s; animation-duration: 7.3s; }
section:nth-child(3n+1) .ref-block .categories a.arrow-to-dot,
section:nth-child(3n+1) .ref-block .categories a.arrow-to-dot span.dot,
section:nth-child(3n+1) .ref-block .categories a.arrow-to-dot span span:nth-child(1),
section:nth-child(3n+1) .ref-block .categories a.arrow-to-dot span span:nth-child(2)
{animation-delay: 8.8s; animation-duration: 8.5s; }
section:nth-child(3n+2) .ref-block .categories a.arrow-to-dot,
section:nth-child(3n+2) .ref-block .categories a.arrow-to-dot span.dot,
section:nth-child(3n+2) .ref-block .categories a.arrow-to-dot span span:nth-child(1),
section:nth-child(3n+2) .ref-block .categories a.arrow-to-dot span span:nth-child(2)
{animation-delay: 9.6s; animation-duration: 9.8s; }


@keyframes go-for-detail {
    0% {transform: none; }
    20% {transform: translateX(0); }
    40% {transform: translateX(40px); }
    41% {transform: translateX(40px); }
    42% {transform: none; }
    100% {transform: none; }
}

@keyframes draw-attention-copy-arrow {
    0% {transform: none; }
    20% {transform: none; }
    22% {transform: translateY(30px); animation-timing-function: cubic-bezier(0, .52, .48, 1); }
    24% {transform: translateY(15px); }
    26% {transform: translateY(30px); animation-timing-function: cubic-bezier(0, .52, .48, 1); }
    28% {transform: translateY(23px); }
    30% {transform: translateY(30px); animation-timing-function: cubic-bezier(0, .52, .48, 1); }
    32% {transform: translateY(27px); }
    34% {transform: translateY(30px); animation-timing-function: cubic-bezier(0, .52, .48, 1); opacity: 1; }
    40% {transform: translateY(30px); opacity: 0; }
    41% {transform: translateY(30px); }
    42% {transform: translateX(-100%); opacity: 0; }
    44% {transform: none; opacity: 1; }
    100% {transform: none; }
}

@keyframes draw-attention-copy-arrow-line-top {
    0% {transform: translateY(-25%) rotate(45deg); }
    5% {transform: translateY(-25%) rotate(60deg); }
    10% {transform: translateY(-50%) rotate(0deg); }
    15% {transform: translateY(-50%) rotate(0deg); width: 100%; }
    20% {transform: translateY(-50%) rotate(0deg); width: 25%; }
    42% {transform: translateY(-50%) rotate(0deg); width: 25%; }
    47% {transform: translateY(-50%) rotate(0deg); width: 100%; }
    53% {transform: translateY(-25%) rotate(45deg); }
    100% {transform: translateY(-25%) rotate(45deg); }
}

@keyframes draw-attention-copy-arrow-line-bottom {
    0% {transform: translateY(-75%) rotate(-45deg); }
    5% {transform: translateY(-75%) rotate(-60deg); }
    10% {transform: translateY(-50%) rotate(0deg); }
    15% {transform: translateY(-50%) rotate(0deg); width: 100%; }
    20% {transform: translateY(-50%) rotate(0deg); width: 25%; }
    42% {transform: translateY(-50%) rotate(0deg); width: 25%; }
    47% {transform: translateY(-50%) rotate(0deg); width: 100%; }
    53% {transform: translateY(-75%) rotate(-45deg); }
    100% {transform: translateY(-75%) rotate(-45deg); }
}

.vp .ref-block .copy .content.active.curr h2 {animation: draw-attention-copy-h2 7.3s both cubic-bezier(.52, 0, .48, 1); }
.vp .ref-block .copy .content.active.curr h3 {animation: draw-attention-copy-h3 7.3s both cubic-bezier(.52, 0, .48, 1); }
section:nth-of-type(3n) .ref-block .copy .content.active.curr h2, section:nth-of-type(3n) .ref-block .copy .content.active.curr h3 {animation-delay: 8s; animation-duration: 7.3s; }
section:nth-of-type(3n+1) .ref-block .copy .content.active.curr h2, section:nth-of-type(3n+1) .ref-block .copy .content.active.curr h3 {animation-delay: 8.5s; animation-duration: 8.5s; }
section:nth-of-type(3n+2) .ref-block .copy .content.active.curr h2, section:nth-of-type(3n+2) .ref-block .copy .content.active.curr h3 {animation-delay: 9.3s; animation-duration: 9.8s; }

@keyframes draw-attention-copy-h2 {
    0% {transform-origin: left bottom; transform: none; }
    2% {transform-origin: left bottom; transform: translate(10px, -4px) scale(1.05) rotate(-.1deg); animation-timing-function: cubic-bezier(.22, 0, .08, 1); }
    10% {transform-origin: left bottom; transform: none; }
    100% {transform-origin: left bottom; transform: none; }
}
@keyframes draw-attention-copy-h3 {
    0% {transform: none; }
    2% {transform: translateX(-10px) rotate(-.1deg); animation-timing-function: cubic-bezier(.22, 0, .08, 1); }
    10% {transform: none; }
    100% {transform: none; }
}


/*

    M O C K U P   A R E A

*/
.mockup-area-outer {position: relative; width: 52%; margin: 0 auto; /*background: #0000000c;*/ }
.mockup-area {position: relative; width: 100%; height: 0; transition: margin .4s ease-out, padding .4s ease-out; }
.mockup-area::before {content: ''; display: block; position: absolute; width: 100%; height: 100%; left: 0; top: 0; /*background: #fff3;*/ }

.mockup-area.bb {margin: 10% auto 18% auto; }
.mockup-area.clv {margin: 12% auto 16% auto; }
.mockup-area.notebook {margin: 13% auto 15% auto; }
.mockup-area.smartphone {margin: 12% auto 16% auto; }
.mockup-area.tablet {margin: 12% auto 16% auto; }
.mockup-area.tv {margin: 10% auto 18% auto; }
.mockup-area.wo-mockup {margin: 0 auto; }

.ref-block.empty .mockup-area-outer, .ref-block.empty .mockup-area {padding-bottom: 0; margin: 0; }
/*.mockup-area {padding-bottom: 29%; }*/
.mockup-area {padding-bottom: 55.8%; margin: 14% auto 15% auto; } /* .52 * area ratio  */
/*.mockup-area.wo-mockup[data-ratio-group="xwide"] {padding-bottom: 31%; }*/ /* * 60% */
/*.mockup-area.wo-mockup[data-ratio-group="midwide"] {padding-bottom: 40%; }*/ /* * 77% */
/*.mockup-area.wo-mockup[data-ratio-group="squarelike"] {padding-bottom: 40%; }*/ /* * 77% */
/*.mockup-area.wo-mockup[data-ratio-group="midtall"] {padding-bottom: 45%; }*/ /* * 86.5% */
/*.mockup-area.wo-mockup[data-ratio-group="xtall"] {padding-bottom: 50%; }*/ /* * 96% */
.mockup-area.wo-mockup[data-ratio-group="xwide"] {padding-bottom: 83.8%; } /* * 60% */
.mockup-area.wo-mockup[data-ratio-group="midwide"] {padding-bottom: 83.8%; } /* * 77% */
.mockup-area.wo-mockup[data-ratio-group="squarelike"] {padding-bottom: 83.8%; } /* * 77% */
.mockup-area.wo-mockup[data-ratio-group="midtall"] {padding-bottom: 83.8%; } /* * 86.5% */
.mockup-area.wo-mockup[data-ratio-group="xtall"] {padding-bottom: 83.8%; } /* * 96% */
.mockup-area * {position: absolute; }
.mockup-area .width-box.curr {z-index: 2000; height: 0; } /* width == base mockup image width / mockup area width */
.mockup-area .width-box.wo-mockup.curr {height: 100%; } /* width == base mockup image width / mockup area width */
.mockup-area .width-box {z-index: 1000; }
/*
.mockup-area .width-box:nth-child(1) {z-index: 1000; }
.mockup-area .width-box:nth-child(2) {z-index: 2000; }
.mockup-area .width-box:nth-child(3) {z-index: 3000; }
.mockup-area .width-box:nth-child(4) {z-index: 4000; }
*/
.mockup-area .width-box .mockup .medium, .notebook .mockup .keyboard, .width-box.tablet .mockup .medium::after {width: 100%; height: 100%; background-repeat: no-repeat; background-position: center top; background-size: contain; }
.mockup-area .width-box.curr .mockup {transform: none; opacity: 1; }
.mockup-area .width-box .mockup {transform: scale(.7); opacity: 0; transition: .5s cubic-bezier(.41, 0, .18, 1); }
.mockup-area .width-box .mockup img {height: auto; }

/* mockup colors bb */
.rose .width-box.tv .medium {background-image: url(/css/mockup/tv/mockup-rose.png); }
.black-pearl .width-box.tv .medium {background-image: url(/css/mockup/tv/mockup-black-pearl.png); }
.white .width-box.tv .medium {background-image: url(/css/mockup/tv/mockup-white.png); }
.pumpkin .width-box.tv .medium {background-image: url(/css/mockup/tv/mockup-pumpkin.png); }
.sea .width-box.tv .medium {background-image: url(/css/mockup/tv/mockup-sea.png); }
.dark-cerulean .width-box.tv .medium {background-image: url(/css/mockup/tv/mockup-dark-cerulean.png); }

/* mockup colors bb */
.rose .width-box.bb .medium {background-image: url(/css/mockup/bb/mockup-rose.png); }
.black-pearl .width-box.bb .medium {background-image: url(/css/mockup/bb/mockup-black-pearl.png); }
.white .width-box.bb .medium {background-image: url(/css/mockup/bb/mockup-white.png); }
.pumpkin .width-box.bb .medium {background-image: url(/css/mockup/bb/mockup-pumpkin.png); }
.sea .width-box.bb .medium {background-image: url(/css/mockup/bb/mockup-sea.png); }
.dark-cerulean .width-box.bb .medium {background-image: url(/css/mockup/bb/mockup-dark-cerulean.png); }

/* mockup colors clv */
.rose .width-box.clv .medium {background-image: url(/css/mockup/clv/mockup-rose.png); }
.black-pearl .width-box.clv .medium {background-image: url(/css/mockup/clv/mockup-black-pearl.png); }
.white .width-box.clv .medium {background-image: url(/css/mockup/clv/mockup-white.png); }
.pumpkin .width-box.clv .medium {background-image: url(/css/mockup/clv/mockup-pumpkin.png); }
.sea .width-box.clv .medium {background-image: url(/css/mockup/clv/mockup-sea.png); }
.dark-cerulean .width-box.clv .medium {background-image: url(/css/mockup/clv/mockup-dark-cerulean.png); }

/* mockup (parts) colors notebook */
.black-pearl .width-box.notebook .lid-img {background-image: url(mockup/notebook/black-pearl/lid.png); }
.dark-cerulean .width-box.notebook .lid-img {background-image: url(mockup/notebook/dark-cerulean/lid.png); }
.pumpkin .width-box.notebook .lid-img {background-image: url(mockup/notebook/pumpkin/lid.png); }
.rose .width-box.notebook .lid-img {background-image: url(mockup/notebook/rose/lid.png); }
.sea .width-box.notebook .lid-img {background-image: url(mockup/notebook/sea/lid.png); }
.white .width-box.notebook .lid-img {background-image: url(mockup/notebook/white/lid.png); }

.rose .width-box.notebook .keyboard {background-image: url(/css/mockup/notebook/rose/keyboard.png); }
.black-pearl .width-box.notebook .keyboard {background-image: url(/css/mockup/notebook/black-pearl/keyboard.png); }
.white .width-box.notebook .keyboard {background-image: url(/css/mockup/notebook/white/keyboard.png); }
.pumpkin .width-box.notebook .keyboard {background-image: url(/css/mockup/notebook/pumpkin/keyboard.png); }
.sea .width-box.notebook .keyboard {background-image: url(/css/mockup/notebook/sea/keyboard.png); }
.dark-cerulean .width-box.notebook .keyboard {background-image: url(/css/mockup/notebook/dark-cerulean/keyboard.png); }

/* mockup colors smartphone */
.rose .width-box.smartphone .medium {background-image: url(/css/mockup/smartphone/mockup-rose.png); }
.black-pearl .width-box.smartphone .medium {background-image: url(/css/mockup/smartphone/mockup-black-pearl.png); }
.white .width-box.smartphone .medium {background-image: url(/css/mockup/smartphone/mockup-white.png); }
.pumpkin .width-box.smartphone .medium {background-image: url(/css/mockup/smartphone/mockup-pumpkin.png); }
.sea .width-box.smartphone .medium {background-image: url(/css/mockup/smartphone/mockup-sea.png); }
.dark-cerulean .width-box.smartphone .medium {background-image: url(/css/mockup/smartphone/mockup-dark-cerulean.png); }

/* mockup colors tablet */
.rose .width-box.tablet .medium::after {background-image: url(/css/mockup/tablet/mockup-rose.png); }
.black-pearl .width-box.tablet .medium::after {background-image: url(/css/mockup/tablet/mockup-black-pearl.png); }
.white .width-box.tablet .medium::after {background-image: url(/css/mockup/tablet/mockup-white.png); }
.pumpkin .width-box.tablet .medium::after {background-image: url(/css/mockup/tablet/mockup-pumpkin.png); }
.sea .width-box.tablet .medium::after {background-image: url(/css/mockup/tablet/mockup-sea.png); }
.dark-cerulean .width-box.tablet .medium::after {background-image: url(/css/mockup/tablet/mockup-dark-cerulean.png); }


.item-dots {text-align: center; z-index: 5000; }
.ref-block .item-dots {width: 100%; }
.item-dots>div {position: relative !important; display: inline-block; width: 20px; height: 10px; transform: translateX(20px); opacity: 0; /*background: #0007;*/ }
.pagination.item-dots>div {width: 30px; height: 20px; }
.item-dots>div div {position: absolute; left: 50%; top: 2px; width: 6px; height: 6px; border-radius: 50%; transform: translateX(-50%); }
.pagination.item-dots>div div {top: 4px; width: 12px; height: 12px; }
.item-dots>div a {cursor: default; position: absolute; left: 0; top: -50%; width: 100%; height: 200%; /*background: #fff7;*/ }
.item-dots>div div::before {content: ''; position: absolute; display: block; left: 50%; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%,-40px); opacity: 0; }
.item-dots>div.curr div {transition: color border 0s 1s; left: 50%; top: 0; width: 10px; height: 10px; }
.pagination.item-dots>div div::before, .pagination.item-dots>div.curr div {width: 20px; height: 20px; }
/*.item-dots>div {transition-: 0s; }*/

.item-dots>div div {background: #fff; }
.white .item-dots>div div {background: #1b1d1e; }
.item-dots>div.curr div, .item-dots>div div::before {background: #ff710f; }
.sea .item-dots>div.curr div, .rose .item-dots>div.curr div, .pumpkin .item-dots>div.curr div, header .item-dots>div.curr div, .sea .item-dots>div div::before, .rose .item-dots>div div::before, .pumpkin .item-dots>div div::before, header .item-dots>div div::before {background: #1b1d1e; }


.flat .item-dots>div:nth-child(1) {transition-delay: 0s; }
.flat .item-dots>div:nth-child(2) {transition-delay: .1s; }
.flat .item-dots>div:nth-child(3) {transition-delay: .2s; }
.flat .item-dots>div:nth-child(4) {transition-delay: .3s; }
.flat .item-dots>div:nth-child(5) {transition-delay: .4s; }
.flat .item-dots>div:nth-child(6) {transition-delay: .5s; }
.flat .item-dots>div:nth-child(7) {transition-delay: .6s; }
.flat .item-dots>div:nth-child(8) {transition-delay: .7s; }
.flat .item-dots>div:nth-child(9) {transition-delay: .8s; }
.flat .item-dots>div:nth-child(10) {transition-delay: .9s; }
.flat .item-dots>div:nth-child(11) {transition-delay: 1.0s; }
.flat .item-dots>div:nth-child(12) {transition-delay: 1.1s; }
.flat .item-dots>div:nth-child(13) {transition-delay: 1.2s; }
.flat .item-dots>div:nth-child(14) {transition-delay: 1.3s; }
.flat .item-dots>div:nth-child(15) {transition-delay: 1.4s; }

.flat .mcvp .item-dots>div a {cursor: pointer; }
.flat .mcvp .item-dots>div.curr a {cursor: default; }
.flat .mcvp .item-dots>div:nth-child(1) {transition-delay: .3s; }
.flat .mcvp .item-dots>div:nth-child(2) {transition-delay: .5s; }
.flat .mcvp .item-dots>div:nth-child(3) {transition-delay: .7s; }
.flat .mcvp .item-dots>div:nth-child(4) {transition-delay: .9s; }
.flat .mcvp .item-dots>div:nth-child(5) {transition-delay: 1.1s; }
.flat .mcvp .item-dots>div:nth-child(6) {transition-delay: 1.3s; }
.flat .mcvp .item-dots>div:nth-child(7) {transition-delay: 1.5s; }
.flat .mcvp .item-dots>div:nth-child(8) {transition-delay: 1.7s; }
.flat .mcvp .item-dots>div:nth-child(9) {transition-delay: 1.9s; }
.flat .mcvp .item-dots>div:nth-child(10) {transition-delay: 2.1s; }
.flat .mcvp .item-dots>div:nth-child(11) {transition-delay: 2.3s; }
.flat .mcvp .item-dots>div:nth-child(12) {transition-delay: 2.5s; }
.flat .mcvp .item-dots>div:nth-child(13) {transition-delay: 2.7s; }
.flat .mcvp .item-dots>div:nth-child(14) {transition-delay: 2.9s; }
.flat .mcvp .item-dots>div:nth-child(15) {transition-delay: 3.1s; }

.flat.vp .showcase .showcase-item-dots>div a {cursor: pointer; }
.flat.vp .showcase .showcase-item-dots>div.curr a {cursor: default; }
.flat.vp .showcase .showcase-item-dots>div:nth-child(1) {transition-delay: 0s; }
.flat.vp .showcase .showcase-item-dots>div:nth-child(2) {transition-delay: .2s; }
.flat.vp .showcase .showcase-item-dots>div:nth-child(3) {transition-delay: .4s; }
.flat.vp .showcase .showcase-item-dots>div:nth-child(4) {transition-delay: .6s; }

#ref-blocks-pagination .fill {background: #1b1d1e; }
#ref-blocks-pagination .item-dots>div a {cursor: pointer; }
#ref-blocks-pagination .item-dots>div.inactive {display: none; }

.flat .mcvp .item-dots>div, .flat.vp .showcase .showcase-item-dots>div, #ref-blocks-pagination .item-dots>div {transform: none; opacity: 1; transition: .5s cubic-bezier(.2, 1.6, .65, 1); }
.flat .item-dots>div {transform: translateX(-20px); opacity: 0; transition: .5s cubic-bezier(.2, 0, .8, -0.6); }

.item-dots>div.curr div {animation: item-dot 2s cubic-bezier(.52, 0, 1, .48); }
.item-dots>div.curr div::before {animation: item-dot-fall-bounce 2s cubic-bezier(.42, 0, .25, 1); }
@keyframes item-dot-fall-bounce {
    0% {opacity: 0; }
    20% {opacity: 1; }
    100% {opacity: 1; }
}
@keyframes item-dot {
    0% {transform: none; background: transparent; border-color: transparent; }
    10% {transform: translate(-50%,40px); animation-timing-function: cubic-bezier(0, .52, .48, 1); opacity: 1; }
    20% {transform: translate(-50%,20px); }
    30% {transform: translate(-50%,40px); animation-timing-function: cubic-bezier(0, .52, .48, 1); }
    40% {transform: translate(-50%,30px); }
    50% {transform: translate(-50%,40px); animation-timing-function: cubic-bezier(0, .52, .48, 1); }
    60% {transform: translate(-50%,38px); }
    70% {transform: translate(-50%,40px); }
    100% {transform: translate(-50%,40px); opacity: 1; background: transparent; border-color: transparent; }
}

/* content area play/pause */
/*
.width-box .content-area.content-animation-paused * {animation-play-state: paused !important; }
.vp .width-box.smartphone .content-area.content-animation-paused .visual.curr img.primary-visual {animation-play-state: paused !important; }

.width-box .content-area::before {z-index: 10000; content: 'PAUSE'; position: absolute; display: none; }
.width-box .content-area:hover::before {display: block; }
.width-box .content-area.content-animation-paused::before, .width-box .content-area.content-animation-paused:hover::before {content: 'PLAY'; display: block; }
*/


/*
TV
mockup area
area: 838/598
ratio h/w: 0,7136038186157518

content-area
dim: 813x457
ratio h/w: 0,5621156211562116

*/

/*

    T V   M O C K U P

*/

.width-box.tv {left: 0%; top: 0; width: 100%; } /* image / area ratio */
.width-box.tv .mockup {width: 100%; padding-bottom: 71.36%; } /* image ratio */ 
.width-box.tv .content-area {left: 1.43%; top: 2.17%; width: 97.02%; height: 76.42%; background: #121212; }
.width-box.tv .content-area > iframe {width: 100%; height: 100%; }
.width-box.tv .item-dots {top: 103%; }

.width-box.tv .mockup::before {content: ''; display: block; position: absolute; left: 3.46%; top: 68.39%; width: 96.54%; height: 0; padding-top: 32.78%; background: url(mockup/tv/shadow.png) no-repeat center top; background-size: contain; }

/*.case-link {background: #0003; }*/

/*
BB
mockup area
area: 629/351
ratio h/w: 0,55802861685214626391096979332273

image
dim: 870x587
ratio h/w: 0,67471264367816091954022988505747

*/
/*

    B I L L B O A R D   M O C K U P

*/

.width-box.bb {left: 0%; top: 0; width: 100%; } /* image / area ratio */
.width-box.bb .mockup {width: 100%; padding-bottom: 67.47%; } /* image ratio */ 
.width-box.bb .mockup .case-link {z-index: 12000; width: 100%; height: 100%; }
.width-box.bb .content-area {left: 2.53%; top: 3.75%; width: 95.06%; height: 66.1%; background: #907e6f; }
.width-box.bb .pasting {width: 100%; height: 100%; background: none; }
.width-box.bb .item-dots {top: 103%; }
.width-box.bb .visual img.preloading {opacity: 0; width: 0; height: 0; }

/* shadow */
.width-box.bb .mockup::before {content: ''; display: block; position: absolute; left: -8%; top: 72%; width: 115%; height: 0; padding-top: 22.40%; background: url(mockup/bb/shadow.png) no-repeat center top; background-size: contain; }

/* DARKS / LIGHTS */
.width-box.bb .darks {z-index: 10000; width: 100%; height: 100%; }
.width-box.bb .darks img.dark {width: 100%; mix-blend-mode: multiply; }
.width-box.bb .darks img.light {width: 22.3%; }
.width-box.bb .darks img.light0 {left: 3.651%; top: -13.663%; }
.width-box.bb .darks img.light1 {left: 26.978%; top: -12.791%; }
.width-box.bb .darks img.light2 {left: 50.507%; top: -12.791%; }
.width-box.bb .darks img.light3 {left: 74.239%; top: -12.5%; }
.width-box.bb .darks img {opacity: 0; }
.width-box.bb .darks img.dark0 {opacity: 1; }
.width-box.bb .darks img.dark0, .width-box.bb .darks img.light {transition: opacity .25s .25s; }
/* flat */
.flat.vp .width-box.bb .darks img.dark0 {opacity: 0; transition: opacity 0s .6s; }
.flat.vp .width-box.bb .darks img.light {opacity: .3; }
.flat.vp .width-box.bb .darks img.light0 {transition: opacity 0s .6s; }
.flat.vp .width-box.bb .darks img.light1 {transition: opacity 0s .7s; }
.flat.vp .width-box.bb .darks img.light2 {transition: opacity 0s .8s; }
.flat.vp .width-box.bb .darks img.light3 {transition: opacity 0s .9s; }
.flat.vp .width-box.bb .darks img.dark1 {animation: bb-dark .2s both steps(1,end) .5s; }
.flat.vp .width-box.bb .darks img.dark2 {animation: bb-dark .2s both steps(1,end) .6s; }
.flat.vp .width-box.bb .darks img.dark3 {animation: bb-dark .2s both steps(1,end) .7s; }

/* mockup switch */
.flat.vp .width-box.bb.hide .darks img.dark {opacity: 0 !important; transition: .5s cubic-bezier(.07, .71, .48, 1); animation: none !important; }
.flat.vp .width-box.bb.hide .darks img.dark0 {opacity: 1 !important; transition: .5s cubic-bezier(.07, .71, .48, 1); }
.flat.vp .width-box.bb.hide .darks img.light {opacity: 0 !important; transition: .5s cubic-bezier(.07, .71, .48, 1); }

@keyframes bb-dark {
    0% {opacity: 0; }
    50% {opacity: 1; }
    100% {opacity: 0; }
}

/* content pasting */
.width-box.bb .pasting {z-index: 2000; }
.width-box.bb .pasting .list {width: 35%; height: 100%; overflow: hidden; transform: translateX(-50%); }
.width-box.bb .pasting .list>div {left: 12.5%; width: 75%; height: 100%; transform: translateY(-100%); overflow: hidden; /*background: rgba(0,0,0,.3);*/ }
.width-box.bb .pasting .list>div>div {width: 100%; height: 100%; transform: translateY(0); }
.width-box.bb .pasting .list:nth-of-type(1) {left: 12.5%; /*background: rgba(185, 45, 45, 0.35);*/ }
.width-box.bb .pasting .list:nth-of-type(2) {left: 37.5%; /*background: rgba(255, 255, 255, 0.31);*/ }
.width-box.bb .pasting .list:nth-of-type(3) {left: 62.5%; /*background: rgba(43, 165, 181, 0.4);*/ }
.width-box.bb .pasting .list:nth-of-type(4) {left: 87.5%; /*background: rgba(102, 162, 51, 0.4);*/ }

.width-box.bb .pasting .list img {width: 100%; }

@keyframes bb-roll-cover {
    0% {transform: translateY(0); }
    100% {transform: translateY(100%); }
}

@keyframes bb-roll-paste {
    0% {transform: translateY(0); }
    100% {transform: translateY(100%); }
}
.width-box.bb .visual.curr .pasting .list>div {animation: bb-roll-cover 1s linear; }
.width-box.bb .visual.curr .pasting .list>div>div {animation: bb-roll-paste 1s linear; }
.width-box.bb .visual.curr .pasting .list:nth-of-type(1)>div, .width-box.bb .visual.curr .pasting .list:nth-of-type(1)>div>div {animation-delay: 0s; }
.width-box.bb .visual.curr .pasting .list:nth-of-type(2)>div, .width-box.bb .visual.curr .pasting .list:nth-of-type(2)>div>div {animation-delay: .15s; }
.width-box.bb .visual.curr .pasting .list:nth-of-type(3)>div, .width-box.bb .visual.curr .pasting .list:nth-of-type(3)>div>div {animation-delay: .3s; }
.width-box.bb .visual.curr .pasting .list:nth-of-type(4)>div, .width-box.bb .visual.curr .pasting .list:nth-of-type(4)>div>div {animation-delay: .45s; }

/* bb visual */
.width-box.bb .visual {width: 100%; height: 100%; }
.width-box.bb .visual .vstripe {width: 26%; height: 100%; }
.width-box.bb .visual .vstripe img {right: 0; width: 384.615%; }
.width-box.bb .visual .vstripe:first-child img {width: 400%; }
.width-box.bb .visual .vstripe:nth-child(1) {right: 75%; width: 25%; }
.width-box.bb .visual .vstripe:nth-child(2) {right: 50%; }
.width-box.bb .visual .vstripe:nth-child(3) {right: 25%; }
.width-box.bb .visual .vstripe:nth-child(4) {right: 0%; }
.width-box.bb .visual .vstripe:nth-child(1) img {transform: translateX(75%); }
.width-box.bb .visual .vstripe:nth-child(2) img {transform: translateX(50%); }
.width-box.bb .visual .vstripe:nth-child(3) img {transform: translateX(25%); }
.width-box.bb .visual .vstripe:nth-child(4) img {}

.width-box.bb .visual .primary-visual {opacity: 0; width: 100%; height: 100%; }
.width-box.bb .visual.prev .primary-visual {opacity: 1; /*transition: 0s 0s; */}
.width-box.bb .visual.curr .primary-visual, .width-box.bb .visual.keep-curr-reset .primary-visual {opacity: 0; /*transition: .25s ease 100.5s; */}

.width-box.bb .visual .vstripe div {width: 100%; height: 0; overflow: hidden; }
.width-box.bb .visual.curr .vstripe div {height: 100%; animation: bb-paste-vstripe .5s backwards linear; }
.width-box.bb .visual.curr .vstripe:nth-child(1) div {animation-delay: 0s; }
.width-box.bb .visual.curr .vstripe:nth-child(2) div {animation-delay: .15s; }
.width-box.bb .visual.curr .vstripe:nth-child(3) div {animation-delay: .3s; }
.width-box.bb .visual.curr .vstripe:nth-child(4) div {animation-delay: .45s; }

@keyframes bb-paste-vstripe {
    0% {height: 0; }
    100% {height: 100%; }
}

/*
.width-box.bb .visual.prev {z-index: 100; }
.width-box.bb .visual.curr {z-index: 1000; }
*/
.width-box.bb .visual[data-depth="0"] {z-index: 4000; }
.width-box.bb .visual[data-depth="1"] {z-index: 3800; }
.width-box.bb .visual[data-depth="2"] {z-index: 3600; }
.width-box.bb .visual[data-depth="3"] {z-index: 3400; }
.width-box.bb .visual[data-depth="4"] {z-index: 3200; }
.width-box.bb .visual[data-depth="5"] {z-index: 3000; }
.width-box.bb .visual[data-depth="6"] {z-index: 2800; }
.width-box.bb .visual[data-depth="7"] {z-index: 2600; }
.width-box.bb .visual[data-depth="8"] {z-index: 2400; }
.width-box.bb .visual[data-depth="9"] {z-index: 2200; }
.width-box.bb .visual[data-depth="10"] {z-index: 2000; }
.width-box.bb .visual[data-depth="11"] {z-index: 1800; }
.width-box.bb .visual[data-depth="12"] {z-index: 1600; }
.width-box.bb .visual[data-depth="13"] {z-index: 1400; }
.width-box.bb .visual[data-depth="14"] {z-index: 1200; }
.width-box.bb .visual[data-depth="15"] {z-index: 1000; }
.width-box.bb .visual[data-depth="16"] {z-index: 800; }
.width-box.bb .visual[data-depth="17"] {z-index: 600; }
.width-box.bb .visual[data-depth="18"] {z-index: 400; }
.width-box.bb .visual[data-depth="19"] {z-index: 200; }
.width-box.bb .visual[data-depth="20"] {z-index: 10; }


.width-box.bb .visual img.primary-visual, .width-box.bb .mcvp .visual img.primary-visual {animation-play-state: paused !important; }
.width-box.bb.curr .mcvp .visual.curr img.primary-visual {animation-play-state: running !important; }
.width-box.bb.curr .mcvp .content-area:hover .visual.curr img.primary-visual {animation-play-state: paused !important; }

/* mockup switch */
/*.width-box.bb.hide {transform: scale(.7); opacity: 0; }*/



/*
CLV
mockup area
area: 629/351
ratio h/w: 0,55802861685214626391096979332273

image
dim: 606x786
ratio h/w: 1,2970297029702970297029702970297  (ex 1,267741935483870967741935483871)
*/

/*

    C L V   M O C K U P

*/

.width-box.clv {left: 15%; top: -20%; width: 70%; } /* image / area ratio */
.width-box.clv .mockup {width: 100%; padding-bottom: 129.7%; } /* image ratio */ 
.width-box.clv .mockup .case-link {z-index: 12000; width: 100%; height: 93%; }
.width-box.clv .content-area {left: 17.16%; top: 3.18%; width: 65.35%; height: 74.43%; background: #e6dddd; overflow: hidden; }
.width-box.clv .content-area .inner {width: 100%; height: 100%; }
.width-box.clv .item-dots {top: 96%; }

/* shadow */
.width-box.clv .mockup::before {content: ''; display: block; position: absolute; left: 3.16%; top: 73.79%; width: 93.23%; height: 0; padding-top: 31.46%; background: url(mockup/clv/shadow.png) no-repeat center top; background-size: contain; }

.width-box.clv .visual {z-index: 10; transform: translateY(100%) rotate(-.1deg); }
.width-box.clv .visual.prev, .width-box.clv .visual.first.prev {animation: slide-to-top-full-height .7s cubic-bezier(.35, -0.12, .63, 1.12); }
.width-box.clv .visual.curr, .width-box.clv .visual.keep-curr-reset {z-index: 1000; transform: none; animation: slide-from-bottom-full-height .7s cubic-bezier(.35, -0.12, .63, 1.12); }
.width-box.clv .visual.first {animation: none; transform: none; }
.width-box.clv .visual {width: 100%; height: 100%; overflow: hidden; }
.width-box.clv .visual img.primary-visual {width: 100%; height: auto; /*transition: .5s ease;*/ }
.width-box.clv .visual img.preloading {opacity: 0; width: 0; height: 0; }

.width-box.clv .visual img.primary-visual, .width-box.clv .mcvp .visual img.primary-visual {animation-play-state: paused !important; }
.width-box.clv.curr .mcvp .visual.curr img.primary-visual {animation-play-state: running !important; }
.width-box.clv.curr .mcvp .content-area:hover .visual.curr img.primary-visual {animation-play-state: paused !important; }


@keyframes slide-from-bottom-full-height {
    0% {transform: translateY(100%) rotate(-.1deg); }
    100% {transform: none; }
}
@keyframes slide-to-top-full-height {
    0% {transform: none; }
    100% {transform: translateY(-100%) rotate(-.1deg); }
}



/*
NOTEBOOK
mockup area
area: 629/351
ratio h/w: 0,55802861685214626391096979332273

image
dim: 955x518
ratio h/w: 0,54240837696335078534031413612565

*/

/*

    N O T E B O O K   M O C K U P

*/

.width-box.notebook {left: 0; top: -5%; width: 100%; } /* image / area ratio */
.width-box.notebook .mockup {/*width: 100%; padding-bottom: 54.24%;*/ left: -8%; width: 116%; padding-bottom: 62.92%; transform-style: preserve-3d; } /* image ratio */ 
.width-box.notebook .mockup .case-link {z-index: 12000; left: 9%; width: 82%; height: 100%; }
.width-box.notebook .keyboard {top: 94.79%; width: 100%; height: 5.21%; background-size: contain; }
.width-box.notebook .medium {perspective: 10000px; transform-style: flat; perspective-origin: center top; }
.width-box.notebook .lid {left: 9.53%; top: 0; width: 80.94%; height: 94.79%; transform-origin: bottom center; transform-style: flat; }
.width-box.notebook .lid-img {z-index: 2000; width: 100%; height: 105%; background-repeat: no-repeat; background-position: center top; background-size: contain; }
.width-box.notebook .content-area {left: 3.23%; top: 6.92%; width: 93.92%; height: 87.58%; background: #333030; overflow: hidden; }
.width-box.notebook .item-dots {top: 108%; }

.width-box.notebook .mockup::before {content: ''; display: block; position: absolute; left: 0; top: 91.89%; width: 100%; height: 0; padding-top: 18.74%; background: url(mockup/notebook/shadow.png) no-repeat center top; background-size: contain; }
.black-pearl .width-box.notebook .mockup::before {background-image: url(mockup/notebook/shadow-darker.png); }

/* open/close lid */
.width-box.notebook .lid {transform: rotate3d(1,0,0,-50deg); transition: 1s cubic-bezier(.07, .71, .48, 1); filter: brightness(60%); }
.flat.vp .width-box.notebook .lid {transform: rotate3d(1,0,0,0deg); /*transition-delay: .2s;*/ filter: none; }

/* mockup switch */
.width-box.notebook.hide .lid {transform: rotate3d(1,0,0,-50deg) !important; transition: .5s cubic-bezier(.07, .71, .48, 1) !important; }
/*.width-box.notebook.hide {transform: scale(.7); opacity: 0; }*/


.width-box.notebook .visual {z-index: 10; transform: translateX(100%) rotate(-.1deg); }
.width-box.notebook .visual.prev, .width-box.notebook .visual.first.prev {/*z-index: 100;*/ animation: slide-to-left-full-width .6s cubic-bezier(.06, .67, .28, 1); }
.width-box.notebook .visual.curr, .width-box.notebook .visual.keep-curr-reset {z-index: 1000; transform: none; animation: slide-from-right-full-width .6s cubic-bezier(.06, .67, .28, 1); }
.width-box.notebook .visual.first {animation: none; transform: none; }
.width-box.notebook .visual {width: 100%; height: 100%; overflow: hidden; }
.width-box.notebook .visual img.primary-visual {width: 100%; height: auto; /*transition: .5s ease;*/ }
.width-box.notebook .visual img.preloading {opacity: 0; width: 0; height: 0; }

.width-box.notebook .visual img.primary-visual, .width-box.notebook .mcvp .visual img.primary-visual {animation-play-state: paused !important; opacity: 0; transition: opacity 0s; }
.width-box.notebook .mcvp .visual.prev img.primary-visual {animation-play-state: running !important; opacity: 1; }
.width-box.notebook.curr .visual.curr img.primary-visual, .width-box.notebook.curr .visual.first img.primary-visual {opacity: 1 !important; transition: opacity 0s !important; }
.width-box.notebook.curr .mcvp .visual.curr img.primary-visual {animation-play-state: running !important; opacity: 1; transition: opacity 0s 1.05s; }
.width-box.notebook.curr .mcvp .lid:hover .visual.curr img.primary-visual {animation-play-state: paused !important; }

/*
*/




/*
SMARTPHONE
mockup area
area: 629/351
ratio h/w: 0,55802861685214626391096979332273

image
dim: 468x921
ratio h/w: 1,9679487179487179487179487179487
*/

/*

    S M A R T P H O N E   M O C K U P

*/

.width-box.smartphone {left: 28%; top: -25%; width: 44%; } /* image / area ratio */
.width-box.smartphone .mockup {width: 100%; padding-bottom: 196.8%; } /* image ratio */ 
.width-box.smartphone .mockup .case-link {z-index: 12000; width: 100%; height: 100%; }
.width-box.smartphone .content-area {left: 8.55%; top: 7.71%; width: 84.19%; height: 80.02%; background: #333030; overflow: hidden; }
.width-box.smartphone .item-dots {top: 105%; }

/* shadow */
.width-box.smartphone .mockup::before {content: ''; display: block; position: absolute; left: -6.63%; top: 95.44%; width: 113.25%; height: 0; padding-top: 16.24%; background: url(mockup/smartphone/shadow.png) no-repeat center top; background-size: contain; }

/* mockup switch */
/*.width-box.smartphone.hide {transform: scale(.7); opacity: 0; }*/


.width-box.smartphone .visual {z-index: 10; transform: translateX(100%) rotate(-.1deg); }
.width-box.smartphone .visual.prev, .width-box.smartphone .visual.first.prev {/*z-index: 100;*/ animation: slide-to-left-full-width .6s cubic-bezier(.06, .67, .28, 1); }
.width-box.smartphone .visual.curr, .width-box.smartphone .visual.keep-curr-reset {z-index: 1000; transform: none; animation: slide-from-right-full-width .6s cubic-bezier(.06, .67, .28, 1); }
.width-box.smartphone .visual.first {animation: none; transform: none; }
.width-box.smartphone .visual {width: 100%; height: 100%; overflow: hidden; }
.width-box.smartphone .visual img.primary-visual {width: 100%; height: auto; /*transition: .5s ease;*/ }
.width-box.smartphone .visual img.preloading {opacity: 0; width: 0; height: 0; }

.width-box.smartphone .visual img.primary-visual, .width-box.smartphone .mcvp .visual img.primary-visual {animation-play-state: paused !important; }
.width-box.smartphone.curr .mcvp .visual.curr img.primary-visual {animation-play-state: running !important; }
.width-box.smartphone.curr .mcvp .content-area:hover .visual.curr img.primary-visual {animation-play-state: paused !important; }





/*
TABLET
mockup area
area: 810/557
ratio h/w: 0,68850432632880098887515451174289

image
dim: 676/507
ratio h/w: 0,75
*/

/*

    T A B L E T   M O C K U P

*/

.width-box.tablet {left: 1.5%; top: -8.5%; width: 96%; } /* image / area ratio */
.width-box.tablet .mockup {width: 100%; padding-bottom: 68.76%; } /* image ratio */ 
.width-box.tablet .mockup .case-link {z-index: 12000; width: 100%; height: 100%; }
.width-box.tablet .medium::after {z-index: 5000; content: ''; display: block; position: absolute; } /* image ratio */ 
.width-box.tablet .content-area {left: 8.16%; top: 4.7%; width: 83.56%; height: 91.023%; background: #333030; overflow: hidden; }
.width-box.tablet .item-dots {top: 105%; }

/* shadow */
.width-box.tablet .mockup::before {content: ''; display: block; position: absolute; left: 0; top: 94.79%; width: 100%; height: 0; padding-top: 6.79%; background: url(mockup/tablet/shadow.png) no-repeat center top; background-size: contain; }

/* mockup switch */
/*.width-box.tablet.hide {transform: scale(.7); opacity: 0; }*/


.width-box.tablet .visual {z-index: 10; transform: translateX(100%) rotate(-.1deg); }
.width-box.tablet .visual.prev, .width-box.tablet .visual.first.prev {/*z-index: 100;*/ animation: slide-to-left-full-width .6s cubic-bezier(.06, .67, .28, 1); }
.width-box.tablet .visual.curr, .width-box.tablet .visual.keep-curr-reset {z-index: 1000; transform: none; animation: slide-from-right-full-width .6s cubic-bezier(.06, .67, .28, 1); }
.width-box.tablet .visual.first {animation: none; transform: none; }
.width-box.tablet .visual {width: 100%; height: 100%; overflow: hidden; }
.width-box.tablet .visual img.primary-visual {width: 100%; height: auto; /*transition: .5s ease;*/ }
.width-box.tablet .visual img.preloading {opacity: 0; width: 0; height: 0; }

.width-box.tablet .visual img.primary-visual, .width-box.tablet .mcvp .visual img.primary-visual {animation-play-state: paused !important; }
.width-box.tablet.curr .mcvp .visual.curr img.primary-visual {animation-play-state: running !important; }
.width-box.tablet.curr .mcvp .medium:hover .visual.curr img.primary-visual {animation-play-state: paused !important; }






/*
WO-MOCKUP
mockup area
area: 810/557
ratio h/w: 0,68850432632880098887515451174289

image
dim: 676/507
ratio h/w: 0,75
*/

/*

    W O   M O C K U P

*/
/*#ref-category-switches {background: white; }*/

.mockup-area.wo-mockup {padding-bottom: 29%; }

.width-box.wo-mockup {left: 0; top: 0%; width: 100%; height: 100%; /*background: rgba(255, 170, 255, 0.63) !important; */} /* image / area ratio */
.width-box.wo-mockup .mockup {width: 100%; height: 100%; /*padding-bottom: 55.769%;*/ } /* image ratio */ 
.width-box.wo-mockup .mockup .case-link {z-index: 12000; width: 100%; height: 100%; }
.width-box.wo-mockup .medium::after {z-index: 5000; content: ''; display: block; position: absolute; } /* image ratio */ 
.width-box.wo-mockup .content-area {left: 0%; top: 0%; width: 100%; height: 100%; /*background: #333030;*/ /*overflow: hidden;*/ }
.width-box.wo-mockup .item-dots {top: 105%; }

/* shadow */
/*.width-box.wo-mockup .mockup::before {content: ''; display: block; position: absolute; left: 0; top: 94.79%; width: 100%; height: 0; padding-top: 6.79%; background: url(mockup/tablet/shadow.png) no-repeat center top; background-size: contain; }*/

/* mockup switch */
/*.width-box.wo-mockup.hide {transform: scale(.7); opacity: 0; }*/


.width-box.wo-mockup .visual {z-index: 10; transform: scale(.9) rotate(-.1deg); opacity: 0; }
.width-box.wo-mockup .visual img.primary-visual {border-radius: 25px; }
.width-box.wo-mockup .visual.prev, .width-box.wo-mockup .visual.first.prev {/*z-index: 100;*/ animation: fade-out-to-front .6s both cubic-bezier(.06, .67, .28, 1); }
.width-box.wo-mockup .visual.curr, .width-box.wo-mockup .visual.keep-curr-reset {z-index: 1000; transform: none; animation: fade-in-from-back .6s cubic-bezier(.06, .67, .28, 1); opacity: 1; }
.width-box.wo-mockup .visual.first {animation: none; transform: none; opacity: 1; }
.width-box.wo-mockup .visual {width: 100%; height: 100%; /*overflow: hidden;*/ }
.width-box.wo-mockup .visual img.primary-visual {left: 50%; top: 50%; max-height: 100%; max-width: 100%; transform: translate(-50%,-50%); }
.width-box.wo-mockup .visual img.primary-visual.landscape {width: 100%; height: auto; /*transition: .5s ease;*/ }
.width-box.wo-mockup .visual img.primary-visual.portrait {width: auto; height: 100%; /*transition: .5s ease;*/ }
.width-box.wo-mockup .visual img.preloading {opacity: 0; width: 0; height: 0; }

.width-box.wo-mockup .visual img.primary-visual, .width-box.wo-mockup .mcvp .visual img.primary-visual {animation-play-state: paused !important; }
.width-box.wo-mockup.curr .mcvp .visual.curr img.primary-visual {animation-play-state: running !important; }
.width-box.wo-mockup.curr .mcvp .medium:hover .visual.curr img.primary-visual {animation-play-state: paused !important; }







@keyframes slide-from-right-full-width {
    0% {transform: translateX(100%) rotate(-.1deg); }
    100% {transform: none; }
}
@keyframes slide-to-left-full-width {
    0% {transform: none; }
    100% {transform: translateX(-100%) rotate(-.1deg); }
}
@keyframes fade-in-from-back {
    0% {transform: scale(.9) rotate(-.1deg); opacity: 0; }
    100% {transform: none; }
}
@keyframes fade-out-to-front {
    0% {transform: none; }
    100% {transform: scale(1.11) rotate(-.1deg); opacity: 0; }
}

/*

    R E F   B L O C K   T O   C O L U M N



mockup area
area: 629/351
ratio h/w: 0,55802861685214626391096979332273

*/

@media (max-width: 970px){
    .ref-block, .ref-block.swap-sides {flex-flow: column; flex-direction: column-reverse; justify-content: flex-start; align-items: center; }
    .ref-block .copy {width: 80%; }
/*
    .ref-block .copy .text {background: orange; padding: 0 !important; height: auto !important; }
    .ref-block .copy .text h2 {margin-top: 0 !important; padding-top: 50px !important; }
*/
    
    .ref-block .content {flex-wrap: wrap; flex-direction: column-reverse; }
    .ref-block .content .categories {margin-bottom: 50px; }
    
    .mockup-area-outer {width: 80%; /*background: darkred;*/ margin-bottom: 50px; }
    .mockup-area.bb {margin: 13% auto 23% auto; }
    .mockup-area.clv {margin: 13% auto 23% auto; }
    .mockup-area.notebook {margin: 17% auto 19% auto; }
    .mockup-area.smartphone {margin: 13% auto 23% auto; }
    .mockup-area.tablet {margin: 18% auto 18% auto; }
    .mockup-area.tv {margin: 16% auto 20% auto; }
    .mockup-area.wo-mockup {margin: 4% auto 4% auto; }
    
}

@media (max-width: 700px){
    
    .mockup-area-outer {width: 90%; /*background: orange; */}
    
}
@media (max-width: 550px){
    .stripe-content {padding: 12% 0; }
    
    .ref-block .copy {width: 90%; }
    .mockup-area-outer {width: 100%; /*background: orange; */}
    .width-box.notebook {left: 2.5%; top: -5%; width: 95%; }
/*    .mockup-area.notebook {margin: 3% auto 9% auto; }*/
}

@media (max-width: 400px){
    .stripe-content {padding: 15% 0; }
    
    
    .ref-block .copy {width: 96%; }
    
    .mockup-area-outer {/*background: yellow; */}
}


/*

    HELP

*/
/*
.ref-block {background: rgba(255,255,255,.3); }
.ref-block .copy {background: rgba(0,0,0,.3); }
.mockup-area {background: rgba(255,0,0,.2); }
.mockup {background: rgba(0,0,0,.5); }
*/
/*section, header, footer {border-top: 1px dotted silver; }*/
.inside .mockup::after, .mockup.inside::after {content: 'inside'; color: silver; display: block; position: absolute; left: 100%; top: 50%; padding: 3px 5px; border-bottom-right-radius: 10px; border-top-right-radius: 10px; background: grey; font-size: 75%; transform: translateY(-50%); }

.limits {position: absolute; width: 100%; height: 0; left: 0; top: 0; display: none; }
.myip .limits {display: block; }
.limits>.limit {z-index: 5000; position: absolute; width: 100%; height: 0; border-top: 1px dashed red; border-bottom: 1px dashed red; }
.limits>.limit span {cursor: pointer; position: absolute; left: 0; right: auto; display: block; padding: 5px 10px; border-top-right-radius: 20px; border-bottom-right-radius: 20px; color: white; font-size: 11px; transform: translateY(-50%); }
.limits>.limit:hover {z-index: 20000 !important; }

.limits>.limit.aboveLimitCss span, .limits>.limit.belowLimitCss span {background: silver; color: #4d4d4d; }
.limits>.limit.enterVPobject span {background: #383838; }
.limits>.limit.enterVPcss span {left: auto; right: 0; background: #144b83; border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: 20px; border-bottom-left-radius: 20px; }

body.myip::after {z-index: 50000; content: ''; display: block; position: fixed; width: 100%; height: 1px; top: 75vh; background: rgba(0, 255, 255, 0.5); }
body.myip::before {z-index: 50000; content: ''; display: block; position: fixed; width: 100%; height: 1px; top: 25vh; background: rgba(0, 255, 255, 0.5); }

/*
section {border-top: 200px solid green; }

body {margin-top: 111px !important; }
*/


/*

    R E F   C A T E G O R Y   S W I T C H E S

*/

#filter-box-fixed {position: fixed; left: 0; top: 0; width: 100%; height: 0; z-index: 10000; }
#filter-box-fixed .stripe-content {padding: 0; }
#ref-category-switches .stripe-content {padding-bottom: 0; }
.filter-box {z-index: 100; position: relative; width: 100%; }
#filter-box-fixed .filter-box {height: 0; }
#filter-box-fixed .filter-box .line {position: absolute; top: 41px; width: 100%; height: 0; transition: .7s cubic-bezier(.28, .01, 0, 1); }
.filter-box .content {position: relative; display: flex; flex-flow: wrap; justify-content: center; align-content: center; /*background: #fff3;*/ }
.filter-box .content div.avg-width {position: absolute; left: 50%; height: 100%; transform: translateX(-50%); /*background: #fff3;*/ }
.filter-box .line .content {width: calc(100% - 65px); transform: translateY(-250%); transition: .7s cubic-bezier(.28, .01, 0, 1); }
#filter-box-fixed.active .filter-box .line .content {transform: translateY(-50%); }
#filter-box-fixed.active.passed .filter-box .line .content {transform: translateY(-250%); }
.filter-box .break, .filter-box .break {position: absolute; flex: 1 0 100%; height: 0; }
.filter-box .break.active {position: relative; /*height: 10px; background: #0003; */}
.filter-box .breaks-inactive .break.active {position: absolute !important; }
.filter-box a {flex: 0 1 auto; }
.filter-box a.category {cursor: pointer; }

#filter-box-fixed .content.too-high {transform: translateY(-200%) !important; }
/*
@media (min-width: 1000px) and (min-height: 600px){
    #ref-category-switches .filter-box.fixed {position: fixed; left: 0; top: 0; width: 90%; margin: 0 5%; }
    #ref-category-switches .filter-box.fixed .line {transform-origin: center top; transform: scale(.7); }
    #ref-category-switches .filter-box.fixed.hidden .content {transform: translateY(-200%); }
}
@media (max-width: 999px) or (max-height: 599px){
    #ref-category-switches .filter-box {transform: none !important; }
}
body[dir=rtl] #ref-category-switches {}
*/
.filter-box a {display: block; }
#ref-category-switches h1 {font-size: 3.3rem; padding-bottom: 5%; color: #ff710f; }

/*

    R O U N D E D   B U T T O N

*/

.btn-rounded {cursor: pointer; position: relative; display: inline-block; margin: 40px 10px; padding: 0; border: 0; border-radius: 50px; background: transparent; overflow: hidden; font-size: 1.2rem; font-weight: 700; }
.btn-rounded:last-child {margin-bottom: 0; }
.filter-box .btn-rounded {margin: 5px 5px; font-size: 1rem; }
#filter-box-fixed .btn-rounded {margin: 1px 1px; font-size: .8rem; }
.btn-rounded.viewed {cursor: default; }
.btn-rounded span {position: relative; display: block; }

/* colors */
.btn-rounded {color: #ff710f; } /* base color */
.btn-rounded.sea, .btn-rounded.pumpkin {color: #1b1d1e; } /* base color */
.service .btn-rounded.pumpkin {color: #fff; }
.btn-rounded.white {color: #fff; } /* base color */
.btn-rounded>span {background: #1b1d1e; } /* inner bg same as bg on which the <a> is placed */
.btn-rounded.sea>span {background: #0db6a8; } /* inner bg same as bg on which the <a> is placed */
.btn-rounded.pumpkin>span {background: #ff710f; } /* inner bg same as bg on which the <a> is placed */
@media (hover: hover) and (pointer: fine) {
    .btn-rounded:hover::before {background: #fff; } /* hover border */
    .service .btn-rounded.pumpkin:hover::before {background: #1b1d1e; } /* hover border */
}
.btn-rounded>span span:first-child, .btn-rounded.viewed>span span:last-child {color: #fff; } /* hover / viewed */
.btn-rounded.white>span span:first-child, .btn-rounded.white.viewed>span span:last-child {color: #ff710f; } /* hover / viewed */
.service .btn-rounded.pumpkin>span span:first-child, .service  .btn-rounded.pumpkin.viewed>span span:last-child {color: #1b1d1e; } /* hover / viewed */

.service .btn-rounded.pumpkin>span span::before {content: '+'; display: block; position: absolute; left: 30px; top: 50%; font-size: 150%; font-weight: 700; transform: translate3d(0,-50%,0); color: #1b1d1e; }
.service .btn-rounded.pumpkin>span span:first-child::before {color: #fff; }

@media (hover: hover) and (pointer: fine) {
    .btn-rounded.viewed:hover>span span:last-child {color: #fff; }
}
.btn-rounded.viewed>span span:last-child, .btn-rounded.viewed:hover>span span:last-child {background: #ff710f; }




/* basic */
.btn-rounded::before {z-index: 1; content: ''; display: block; position: absolute; left: -2px; top: -2px; width: calc(100% + 4px); height: calc(100% + 4px); }
.btn-rounded>span {z-index: 10; margin: 2px; border-radius: 50px; }
.btn-rounded>span span:first-child {position: absolute; width: 100%; height: 100%; /*color: #fff;*/ }
.btn-rounded>span span {padding: 14px 40px; border-radius: 50px; box-sizing: border-box; }
.service .btn-rounded>span span {padding: 14px 30px 14px 55px; }
.filter-box .btn-rounded>span span {padding: 10px 20px; }
#filter-box-fixed .btn-rounded>span span {padding: 5px 10px; }

/* hover */
@media (hover: hover) and (pointer: fine) {
    .btn-rounded:hover::before {/*background: #fff;*/ transform: scaleY(.5); }
    .btn-rounded:hover>span span:first-child {transform: none; opacity: 1; }
    .btn-rounded:hover>span span:last-child {transform: translateY(100%); opacity: 0; }
}
/* back + viewed */
.btn-rounded::before {background: transparent; transform: scaleY(0); }
.btn-rounded>span span:first-child {transform: translateY(-100%); opacity: 0; }
.btn-rounded>span span:last-child {transform: none; opacity: 1; }

/* viewed */
.btn-rounded.viewed>span {background: transparent; }
.btn-rounded.viewed::before, .btn-rounded.viewed:hover::before {background: transparent; transform: scaleY(0); }
.btn-rounded.viewed>span span:first-child {transform: translateY(-100%); opacity: 0; }
.btn-rounded.viewed>span span:last-child {transform: none; opacity: 1; }


/* anim back */
.btn-rounded::before, .btn-rounded * {transition: .45s cubic-bezier(.38, 0, .15, 1); }
@media (hover: hover) and (pointer: fine) {
    /* anim hover */
    .btn-rounded:hover::before, .btn-rounded:hover * {transition: .45s cubic-bezier(.3, 2, .35, 1); }
    /* anim viewed */
    .btn-rounded.viewed:hover::before, .btn-rounded.viewed:hover * {transition: .45s cubic-bezier(.3, 2, .35, 1); }
}


/*.service .btn-box {background: grey; }*/






/*

    W O R K   P R O C E S S

*/
/*#work-process .stripe {margin-top: 80px; margin-bottom: 80px; }*/
#work-process .ff {width: 100%; height: 100%; }
#work-process .steps {display: flex; flex-flow: row wrap; justify-content: center; align-items: flex-start; margin-bottom: 50px; }
#work-process .step {flex: 0 0 204px; margin: 20px 0; text-align: center; }
#work-process .text-block {text-align: center; }
#work-process p {max-width: 820px; margin-left: auto; margin-right: auto; }
#work-process .arrow {flex: 0 1 50px; height: 204px; margin: 20px 0; display: flex; flex-flow: row; justify-content: center; align-items: center; /*background: rgba(255,255,255,.1);*/ }
#work-process .arrow.idea .inner {flex: 0 0 auto; position: relative; }
#work-process .arrow.idea svg path {fill: #24cac0; }
#work-process .arrow.plan svg path {fill: #e157a5; }
#work-process .arrow.create svg path {fill: #ffffff; }

#work-process .steps .break {display: none; }

#work-process .visual-content {position: relative; width: 100%; height: 204px; /*background: rgba(255,255,255,.05);*/ }
#work-process .circle {position: absolute; transform-origin: center top; left: 50%; width: 204px; height: 204px; transform: translateX(-50%); }
#work-process .circle .shake-box {position: absolute; }

@media (max-width: 1100px){
/*    .steps {background: purple; }*/
    #work-process .steps .break {display: flex; }
    #work-process .steps .break.sep {flex: 1 0 100%; height: 0px; background: #454; }
    #work-process .step {flex-basis: 250px; }
}
@media (max-width: 740px){
/*    .steps {background: darkred; }*/
    #work-process .step {flex-basis: 204px; }
}

@media (max-width: 640px){
/*    .steps {background: red; }*/
    #work-process .step {flex-basis: 163px; }
    #work-process .arrow, #work-process .visual-content {height: 163px; }
    #work-process .circle {transform: translateX(-50%) scale(.79902); }
}

@media (max-width: 550px){
/*    .steps {background: orange; }*/
    #work-process .step {flex-basis: 125px; }
    #work-process .arrow, #work-process .visual-content {height: 125px; }
    #work-process .circle {transform: translateX(-50%) scale(.6127451); }
}

@media (max-width: 465px){
/*    .steps {background: yellow; }*/
    #work-process .step {flex-basis: 204px; }
    #work-process .arrow, #work-process .visual-content {height: 204px; }
    #work-process .circle {transform: translateX(-50%); }
    
    #work-process .steps .break {display: none; }
    #work-process .step {flex: 1 0 100%; }
    #work-process .arrow {flex: 1 0 100%; height: 50px; margin: 0; }
    #work-process .arrow .inner {transform: rotate(90deg); }
}

@media (max-width: 250px){
/*    .steps {background: white; }*/
    #work-process .step {flex-basis: 163px; }
    #work-process .visual-content {height: 163px; }
    #work-process .circle {transform: translateX(-50%) scale(.79902); }
}


/*#work-process .circle>* {width: 100%; height: 50%; }*/
#work-process .circle .bg {position: absolute; width: 100%; height: 100%; perspective: 1000px; transform: scale(.5); }
#work-process .circle .bg>* {height: 50%; background: white; opacity: 0; filter: brightness(.3); }
#work-process .circle .top {border-top-left-radius: 102px; border-top-right-radius: 102px; transform-origin: center bottom; transform: rotateX(-80deg); transform-style: preserve-3d; }
#work-process .circle .bottom {border-bottom-left-radius: 102px; border-bottom-right-radius: 102px; transform-origin: center top; transform: rotateX(80deg); transform-style: preserve-3d; }
#work-process .idea .circle .top {background: #057074; }
#work-process .idea .circle .bottom {background: #0db6a8; }
#work-process .plan .circle .top {background: #c33c88; }
#work-process .plan .circle .bottom {background: #e157a5; }
#work-process .create .circle .top {background: #fff; }
#work-process .create .circle .bottom {background: #bdbdbe; }
#work-process .it-works .circle .top {background: #ff9013 url(work-process/04-it-works/target.png) no-repeat center top; background-size: 100% 200%; }
#work-process .it-works .circle .bottom {background: #ff9013 url(work-process/04-it-works/target.png) no-repeat center bottom; background-size: 100% 200%; ; }


#work-process .animated {position: absolute; width: 100%; height: 100%; text-align: left; }
#work-process .animated * {position: absolute; }
.step .animated img {transform: scale(.6666667); }


#work-process .label {position: relative; margin-top: 20px; font-size: 1.3125rem; font-weight: 900; }
#work-process .idea .label {color: #0db6a8; }
#work-process .plan .label {color: #e157a5; }
#work-process .create .label {color: #fff; }
#work-process .it-works .label {color: #ff710f; }

#work-process .label span {position: absolute; display: block; left: 50%; width: 100%; opacity: 0; letter-spacing: .2em; transform: translateX(-50%); }



/* ANIMS */
/*#work-process .step.vp .circle .bottom, #work-process .step.vp .circle .top {background: orange; }*/
#work-process .step.vp.anim-enabled .circle .bg {transform: none; transition: 1s cubic-bezier(.09, .59, .35, 1); }
#work-process .step.vp.anim-enabled .circle .bg>* {opacity: 1; transform: none; transition: .8s cubic-bezier(.09, .59, .35, 1); filter: none; }
#work-process .step.vp.anim-enabled .circle .bg .top {transition-duration: .65s; transition-delay: .15s; }
#work-process .step.vp.anim-enabled .label span {opacity: 1; letter-spacing: 0; transition: 1s cubic-bezier(.09, .59, .35, 1); }

#work-process .step.it-works.vp.anim-enabled .circle .bg .bottom {transition-duration: .4s; }
#work-process .step.it-works.vp.anim-enabled .circle .bg .top {transition-duration: .4s; transition-delay: .1s; }

#work-process .arrow svg {opacity: 0; position: relative; transform: translateX(-20px) rotate(-.1deg); }
#work-process .arrow.anim-enabled svg {opacity: 1; transform: none; transition: .8s cubic-bezier(.33, 1.47, .35, 1); }

/* .idea */
#idea-paper img {transform: translateX(-50%) scale(.6666667); }
#idea-bulb>img, #idea-shadow img {left: 0; bottom: 0; transform-origin: left bottom; }
#idea-light img {transform: translate(-50%, -50%) scale(.6666667); }

#idea-paper {left: 51.471%; top: 52.941%; opacity: 0; transform-origin: left top; transform: translateY(-22px) scale(.8); }
#idea-bulb {left: 29.412%; top: -16.667%; opacity: 0; transform-origin: left bottom; transform: translate(70px,-19px) rotate(-20deg); }
#idea-shadow {opacity: 0; transform-origin: left bottom; transform: rotate(20deg); }
#idea-light {left: 36.275%; top: 42.157%; opacity: 0; }
.step.vp.anim-enabled #idea-paper {opacity: 1; transform: none; transition: .4s cubic-bezier(.08, .49, .45, 1); }
.step.vp.anim-enabled #idea-bulb {opacity: 1; transform: none; transition: .4s ease .2s; }
.step.vp.anim-enabled #idea-shadow {opacity 1; transform: none; transition: .4s ease .2s; }
.step.vp.anim-enabled #idea-light {animation: idea-light-blink .5s both .4s; }

@keyframes idea-light-blink {
    0% {opacity: 0; }
    2% {opacity: 1; }
    10% {opacity: 1; }
    12% {opacity: 0; }
    20% {opacity: 0; }
    22% {opacity: 1; }
    30% {opacity: 1; }
    32% {opacity: 0; }
    50% {opacity: 0; }
    100% {opacity: 1; }
}

/* .plan */
/*.it-works .bg::after {content: url(work-process/help04.png); position: absolute; left: 0; top: 0; filter: invert(100%) hue-rotate(-106deg) saturate(82%) contrast(50%) brightness(140%); }*/

#plan-clock {width: 80px; height: 80px; background: #fff; border: 5px solid #1b1d1e; border-radius: 50%; overflow: hidden; box-sizing: content-box; }
#plan-clock-center {width: 6px; height: 6px; background: #1b1d1e; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%,-50%); }
#plan-grad {background: conic-gradient(#0db6a800, #0db6a8); opacity: 0; }

.plan-clock-hand {left: 50%; top: 50%; transform-origin: left top; }

#plan-whiteboard {left: 48.529%; top: 72.549%; opacity: 0; transform: translateY(-10px) scale(.8); }
#plan-whiteboard-stand {left: -70.098%; top: -79.902%; }
#plan-whiteboard-hold {left: -66.667%; top: -64.706%; }
#plan-board img {transform-origin: center top; left: 50%; top: 0; transform: translate(-50%,-100%) scale(.6666667); }
#plan-board {left: -49.51%; top: -61.275%; overflow: hidden; }
#plan-clock {left: 52.451%; top: 56.863%; opacity: 0; }
#plan-hour-img {left: -28.75%; top: -21.25%; }
#plan-minute-img {left: -18.75%; top: -27%; }
#plan-second-img {left: -13.75%; top: -60%; }

.step.vp.anim-enabled #plan-whiteboard {opacity: 1; transform: none; transition: .4s cubic-bezier(.08, .49, .45, 1); }
.step.vp.anim-enabled #plan-board img {transform: translate(-50%,0) scale(.6666667); transition: .6s cubic-bezier(.43, 1.47, .66, 1) .4s; }
.step.vp.anim-enabled #plan-clock {opacity: 1; animation: plan-clock-bounce .8s both ease-in-out; }
.step.vp.anim-enabled #plan-hour {animation: clock 43200s forwards infinite linear; }
.step.vp.anim-enabled #plan-minute {animation: clock 3600s forwards infinite linear; }
.step.vp.anim-enabled #plan-second {animation: clock 60s forwards infinite linear; }
.step.vp.anim-enabled #plan-grad {opacity: 1; transform: rotate(360deg); transition: transform 1s cubic-bezier(.36, .01, .26, 1) .5s, opacity .25s ease .5s; }

@keyframes plan-clock-bounce {
    0% {opacity: 0; transform: translateY(-150px); }
    20% {opacity: 1; transform: none; }
    21% {transform: translateY(4px) scale(1.2,.8); }
    35% {transform: translateY(-15px); }
    50% {transform: none; }
    51% {transform: translateY(1px) scale(1.05,.95); }
    65% {transform: translateY(-3px); }
    80% {transform: none; }
    100% {transform: none; }
}
@keyframes clock {
    0% {transform: none; }
    100% {transform: rotate(360deg); }
}


/* .create */
#create-notebook {left: 49.51%; top: 64.706%; perspective: 500px; opacity: 0; transform: translateY(-10px) scale(.8); }
#create-lid img {transform: translate(-50%,-100%) scale(.666667); transform-origin: center bottom; }
#create-keyboard img {transform: translateX(-50%) scale(.666667); transform-origin: center top; }
#create-lid {transform-origin: left top; transform: rotateX(-80deg); filter: brightness(.2); transform-style: preserve-3d; }

#create-camera-box {border-radius: 50%; overflow: hidden; }
#create-camera {left: -16.176%; top: 8.333%; transform: translateX(60px) scale(.8); opacity: 0; }


.step.vp.anim-enabled #create-notebook {opacity: 1; transform: none; transition: .8s cubic-bezier(.39, .75, .53, 1); }
.step.vp.anim-enabled #create-lid {transform: none; filter: none; transition: .8s cubic-bezier(.39, .75, .53, 1); }
.step.vp.anim-enabled #create-camera {opacity: 1; transform: none; transition: .5s cubic-bezier(.31, 1.45, .53, 1) .5s; }


/* .it-works */
.it-works-box {width: 400%; height: 400%; border-radius: 5px; overflow: hidden; /*background: rgba(255,255,255,.2);*/ }
#it-works-dart-shadow-box-outer {border-radius: 50%; overflow: hidden; }
#it-works-dart-shadow-box {left: 48.039%; top: 49.02%; }
#it-works-dart-box {left: 48.039%; top: -347.549%; }
#it-works-dart {left: -9.804%; top: 82.23%; opacity: 0; transform: translate(200px,-137px); }
#it-works-dart-shadow {left: -3.554%; top: -6.985%; opacity: 0; }

.step.vp.anim-enabled #it-works-dart, .step.vp.anim-enabled #it-works-dart-shadow {opacity: 1; transform: none; transition: transform .2s linear .4s, opacity .1s ease .5s; }
.step.vp.anim-enabled .shake-box {animation: it-works-target-hit .25s ease-in-out .6s; }

@keyframes it-works-target-hit {
    0% {transform: none; }
    20% {transform: translate(-5px,3px); }
    40% {transform: translate(4px,-2px); }
    60% {transform: translate(-3px,2px); }
    80% {transform: translate(1px,0); }
    100% {transform: none; }
}

.cross::before {position: absolute; left: -1px; top: -5px; width: 2px; height: 10px; background: red; }
.cross::after {position: absolute; left: -5px; top: -1px; width: 10px; height: 2px; background: red; }


/*


    N A V I G A T I O N


*/
nav {z-index: 3000; position: relative; left: 0; top: 0; width: 100%; height: 0; overflow: visible; }

nav .stripe-content {padding: 0 !important; }
ul.mmenu {display: flex; height: 100px; flex-flow: row; justify-content: flex-end; align-items: stretch; }
ul.mmenu>li {position: relative; display: flex; align-items: center; justify-content: center; }
ul.mmenu>li>a {position: relative; padding: 20px 12px; font-size: .875rem; color: #fff; font-weight: 700; text-transform: uppercase; text-decoration: none; }
ul.mmenu>li>a::before {content: ''; display: block; position: absolute; width: 0; height: 3px; left: 50%; bottom: 10%; opacity: 0; transform: translateX(-50%); background: #0b171e; transition: .75s cubic-bezier(.51, .01, .28, 1); }
#mmenu>li:nth-last-child(2) {padding-left: 30px; }
body[dir="rtl"] #mmenu>li:nth-last-child(3) {padding-left: 0; padding-right: 30px; }
ul.mmenu>li>a:hover::before, ul.mmenu>li>a.viewed::before {width: calc(100% - 24px); opacity: 1; transition: .35s cubic-bezier(.03, .69, .18, 1); }

ul.mmenu>li.social>a {padding: 8px; }
ul.mmenu>li.social>a::before {display: none; }
ul.mmenu>li.social>a>*:nth-child(1) {display: block; }
ul.mmenu>li.social>a>*:nth-child(2) {display: block; position: absolute; left: 8px; top: 8px; opacity: 0; }
#mmenu>li.social>a>*:nth-child(2) {transform: translateY(-30px); }
ul.mmenu>li>a.instagram>*:nth-child(2) * {display: block; position: relative; }
ul.mmenu>li>a.instagram>div svg {z-index: 200; }
ul.mmenu>li>a.instagram .insta-bg {z-index: 100; position: absolute; left: 10%; top: 10%; width: 80%; height: 80%; background: radial-gradient(circle at 70% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); border-radius: 10%; }

ul.mmenu>li.social>a:hover>*:nth-child(1) {opacity: 0; }
#mmenu>li.social>a:hover>*:nth-child(1) {transform: translateY(30px); }
ul.mmenu>li.social>a:hover>*:nth-child(2) {opacity: 1; }
#mmenu>li.social>a:hover>*:nth-child(2) {transform: none; }
ul.mmenu>li.social>a>* {transition: .45s cubic-bezier(.38, 0, .15, 1); }
ul.mmenu>li.social>a:hover>* {transition: .45s cubic-bezier(.3, 2, .35, 1); }
/**/
/*
#mmenu {opacity: 0; }
nav.vp #mmenu {opacity: 1; transition: opacity .45s cubic-bezier(.31, .53, .58, 1) .45s; }
*/
@media (min-width: 951px){
    .vp #mobile-mmenu-switch.opened .hide-box {width: 0; }
}
/*nav>.stripe {position: relative; z-index: 200; }*/
#mobile-mmenu-box {z-index: 20000; }
#mmenu li {transform: translateX(-200px); opacity: 0; }
nav.vp #mmenu li {transform: none; opacity: 1; transition: .55s cubic-bezier(.06, .85, .1, 1); }
body[dir="rtl"] #mmenu li {transform: translateX(200px); }
body[dir="rtl"] nav.vp #mmenu li {transform: none; }
nav.vp #mmenu li:nth-last-child(1) {transition-delay: .45s; }
nav.vp #mmenu li:nth-last-child(2) {transition-delay: .5s; }
nav.vp #mmenu li:nth-last-child(3) {transition-delay: .55s; }
nav.vp #mmenu li:nth-last-child(4) {transition-delay: .6s; }
nav.vp #mmenu li:nth-last-child(5) {transition-delay: .65s; }
nav.vp #mmenu li:nth-last-child(6) {transition-delay: .7s; }
nav.vp #mmenu li:nth-last-child(7) {transition-delay: .75s; }
nav.vp #mmenu li:nth-last-child(8) {transition-delay: .80s; }
nav.vp #mmenu li:nth-last-child(9) {transition-delay: .85s; }


#foxo-lt {position: absolute; top: 13px; width: 110px; height: auto; opacity: 0; transform: scale(1.3); }
nav.vp #foxo-lt {opacity: 1; transition: .9s cubic-bezier(.22, 0, .08, 1); transform: none; }
nav.vp #foxo-lt:hover {transition: .45s cubic-bezier(.06, .6, .38, 1); transform: scale(1.1); }
#foxo-lt * {position: absolute; display: block; width: 100%; }
#foxo-lt a span img {width: 100%; height: auto; }

#mobile-mmenu-box {position: fixed; left: 0; top: 0; width: 100%; height: 0; transform: translate3d(0,0,0); }

#mobile-mmenu-box.vp {transform: translate3d(0,-100px,0); transition: transform 0s linear .45s; }
/*#mobile-mmenu-box .stripe {background: #0007; }*/
#mobile-mmenu-box .stripe-content {position: relative; padding: 0; /*background: #0007;*/ }
#mobile-mmenu-switch {position: absolute; right: 0; top: 0; }
body[dir="rtl"] #mobile-mmenu-switch {right: auto; left: 0; }
#mobile-mmenu-switch-btn {cursor: pointer; display: block; position: relative; width: 45px; height: 40px; margin-top: 20px; z-index: 200; opacity: 0; background: #ff710f; animation: fade-in .45s both cubic-bezier(.31, .53, .58, 1) 1.2s; /*background: rgba(0,0,0,.5); transition: .5s cubic-bezier(.03, .69, .18, 1);*/ }
body[dir="rtl"] #mobile-mmenu-switch-btn {transform: scaleX(-1); }
#mobile-mmenu-box.vp #mobile-mmenu-switch-btn {background: transparent; }
#mobile-mmenu-switch .hide-box {z-index: 100; position: absolute; top: 0; right: 0; width: 0; height: 100vh; border-top: 60px solid transparent; overflow-x: hidden; overflow-y: auto; transition: .75s cubic-bezier(.51, .01, .28, 1); }
body[dir="rtl"] #mobile-mmenu-switch .hide-box {right: auto; left: 0; }
#mobile-mmenu-switch.opened .hide-box {transition: .35s cubic-bezier(.03, .69, .18, 1); }
#mobile-mmenu-switch .slide-box {position: relative; left: 0; }
body[dir="rtl"] #mobile-mmenu-switch .slide-box {left: auto; right: 0;  }
#mobile-mmenu-box ul {display: flex; flex-flow: wrap; justify-content: flex-start; align-items: center; width: min-content; text-align: left; height: auto; padding: 40px 20px; background: #ff710f; background: #ff710f; }
body[dir="rtl"] #mobile-mmenu-box ul {text-align: right; }
#mobile-mmenu-box ul li {flex: 0 0 100%; transform: translateX(50px) rotate(-.1deg); transition: 0s ease .5s; }
body[dir="rtl"] #mobile-mmenu-box ul li {transform: translateX(-50px) rotate(-.1deg); }
#mobile-mmenu-box ul>li:nth-last-child(3) {padding-left: 4px; }
body[dir="rtl"] #mobile-mmenu-box ul>li:nth-last-child(3) {padding-left: 0; padding-right: 4px; }
#mobile-mmenu-box ul>li.social {padding-top: 25px; }
#mobile-mmenu-box ul li.social {flex-basis: auto; }
#mobile-mmenu-box .opened ul li {transform: none; transition: .4s cubic-bezier(.27, .64, .48, 1); }
body[dir="rtl"] #mobile-mmenu-box .opened ul li {transform: none; }
#mobile-mmenu-box .opened ul li:nth-child(1) {transition-duration: .4s; }
#mobile-mmenu-box .opened ul li:nth-child(2) {transition-duration: .51s; }
#mobile-mmenu-box .opened ul li:nth-child(3) {transition-duration: .62s; }
#mobile-mmenu-box .opened ul li:nth-child(4) {transition-duration: .73s; }
#mobile-mmenu-box .opened ul li:nth-child(5) {transition-duration: .84s; }
#mobile-mmenu-box .opened ul li:nth-child(6) {transition-duration: .95s; }
#mobile-mmenu-box .opened ul li:nth-child(7) {transition-duration: 1.06s; }
#mobile-mmenu-box .opened ul li:nth-child(8) {transition-duration: 1.17s; }
#mobile-mmenu-box .opened ul li:nth-child(9) {transition-duration: 1.28s; }
#mobile-mmenu-box ul li, #mobile-mmenu-box ul li a {display: block; }
#mobile-mmenu-box ul>li>a::before {left: 12px; transform: none; }

#mobile-mmenu-switch-btn>span {position: absolute; left: 20%; width: 60%; height: 2px; animation: menu-switch-line-slide-in .55s both cubic-bezier(.19, .77, .28, 1); transition: .55s cubic-bezier(.19, .77, .28, 1); }
#mobile-mmenu-switch-btn>span:nth-child(1) {top: 12px; }
#mobile-mmenu-switch-btn>span:nth-child(2) {top: 19px; animation-delay: .15s; }
#mobile-mmenu-switch-btn>span:nth-child(3) {bottom: 12px; animation-delay: .3s; }
#mobile-mmenu-box.vp #mobile-mmenu-switch-btn>span {animation: menu-switch-line-slide-out .35s both cubic-bezier(.39, .01, .87, .32); transition: .35s cubic-bezier(.39, .01, .87, .32); }
#mobile-mmenu-box.vp #mobile-mmenu-switch-btn>span:nth-child(2) {animation-delay: .1s; }
#mobile-mmenu-box.vp #mobile-mmenu-switch-btn>span:nth-child(3) {animation-delay: .2s; }
.opened #mobile-mmenu-switch-btn>span:nth-child(1) {top: 19px; }
.opened #mobile-mmenu-switch-btn>span:nth-child(3) {bottom: 19px; }
.opened #mobile-mmenu-switch-btn>span:nth-child(1)>span {width: 100%; transform: rotate(45deg); }
.opened #mobile-mmenu-switch-btn>span:nth-child(2)>span {left: 50%; right: auto; width: 0; opacity: 0; transform: translateX(-50%); }
.opened #mobile-mmenu-switch-btn>span:nth-child(3)>span {width: 100%; transform: rotate(-45deg); }

@keyframes menu-switch-line-slide-in {
    0% {transform: translateX(-100%); opacity: 0; }
    100% {transform: none; opacity: 1; }
}
@keyframes menu-switch-line-slide-out {
    0% {transform: none; opacity: 1; }
    100% {transform: translateX(200%); opacity: 0; }
}
@keyframes fade-in {
    0% {opacity: 0; }
    100% {opacity: 1; }
}
#mobile-mmenu-switch-btn>span>span {position: absolute; right: 0; height: 100%; background: #fff; transition: .75s cubic-bezier(.51, .01, .28, 1); }
#mobile-mmenu-switch-btn>span:nth-child(1)>span {width: 60%; }
#mobile-mmenu-switch-btn>span:nth-child(2)>span {width: 80%; }
#mobile-mmenu-switch-btn>span:nth-child(3)>span {width: 100%; }
#mobile-mmenu-switch-btn:hover>span>span {width: 100%; transition: .35s cubic-bezier(.03, .69, .18, 1); }

@media (max-width: 890px){
    nav.vp #mmenu {position: relative; transform: translateY(-100px); transition: .35s ease-out; opacity: 0; }
    #mobile-mmenu-switch-btn {animation-delay: 0s; }
    #mobile-mmenu-box.vp {transform: translate3d(0,0,0); transition: none; }
    #mobile-mmenu-box.vp #mobile-mmenu-switch-btn>span {animation: menu-switch-line-slide-in .55s both cubic-bezier(.19, .77, .28, 1); transition: .35s cubic-bezier(.03, .69, .18, 1); }
    #mobile-mmenu-box.vp #mobile-mmenu-switch-btn>span:nth-child(2) {animation-delay: .15s; }
    #mobile-mmenu-box.vp #mobile-mmenu-switch-btn>span:nth-child(3) {animation-delay: .3s; }
}

/*


    F O O T E R


*/
footer .stripe {max-width: 1000px; }
footer .stripe-content {margin: 0 10%; display: flex; flex-flow: wrap; justify-content: space-between; color: #1b1d1e; font-size: 1.3125rem; }
footer .stripe-content ul:nth-child(1) {flex: 0 1 47%; }
footer .stripe-content ul:nth-child(2) {flex: 0 1 47%; /*padding-left: 40px; box-sizing: border-box; */}
footer .stripe-content div:nth-child(3) {flex: 0 1 100%; text-align: center; margin: 10% 0 5% 0; font-size: .875rem; }
footer .stripe-content ul.links li {display: flex; flex-flow: row; justify-content: flex-start; }
footer .stripe-content ul.links li a {display: block; position: relative; color: #1b1d1e; }
footer .stripe-content ul.links li a::after {content: ''; position: absolute; display: block; height: 2px; background: #1b1d1e; width: 0; bottom: 0; transform: translateY(100%); }

@media (max-width: 1000px){
    footer .stripe-content ul:nth-child(1) {flex-basis: 47%; }
    footer .stripe-content ul:nth-child(2) {flex-basis: 47%; padding-left: 0; }
}

footer .stripe-content ul {display: flex; flex-flow: wrap; align-content: flex-start; }
footer .stripe-content ul li {flex: 0 1 100%; margin: 5px 0; }
footer .stripe-content ul li:first-child {margin-bottom: 20px; }
footer .stripe-content ul li:first-child b, footer .stripe-content ul li.item a {color: #1b1d1e; font-weight: 900; }
footer .stripe-content ul:nth-child(2) li:nth-child(2) {color: #fff; margin-bottom: 10px; }

footer .stripe-content ul li.item {margin: 10px 0; }
footer .stripe-content ul li.item a {padding-left: 50px; position: relative; }
footer .stripe-content ul li.item a svg {position: absolute; left: 0; top: 50%; transform: translateY(-50%) scale(.8); opacity: 1; }
body[dir="rtl"] footer .stripe-content ul li.item a {padding-left: 0; padding-right: 50px; }
body[dir="rtl"] footer .stripe-content ul li.item a svg {left: auto; right: 0; }
footer .stripe-content ul li.item a svg:nth-child(2) {display: none; }

@media (hover: hover) and (pointer: fine) {
    footer .stripe-content ul li.item a svg:nth-child(2) {display: block; transform: translateY(-100%) scale(.8); opacity: 0; }
    footer .stripe-content ul li.item a:hover svg:nth-child(1) {transform: translateY(0) scale(.8); opacity: 0; }
    footer .stripe-content ul li.item a:hover svg:nth-child(2) {transform: translateY(-50%) scale(.8); opacity: 1; }
    footer .stripe-content ul li.item a svg {transition: .45s cubic-bezier(.38, 0, .15, 1); }
    footer .stripe-content ul li.item a:hover svg {transition: .45s cubic-bezier(.3, 2, .35, 1); }
    footer .stripe-content ul.links li a:hover::after {width: 100%; transition: .35s ease-out; }
}

@media (max-width: 780px){
    footer .stripe-content {justify-content: space-around; }
    footer .stripe-content ul {flex-flow: column; flex: 0 1 100% !important; }
    footer .stripe-content ul li {flex-shrink: 1; }
    footer .stripe-content ul {text-align: center; }
    footer .stripe-content ul.links li {justify-content: center; }
    footer .stripe-content ul:nth-child(2) {margin-top: 40px; }
}


/*


    C L I E N T S   ( C A R O U S E L )


*/
#clients {color: #1b1d1e; }
#clients .text-block {max-width: 900px; margin: 0 auto; text-align: center; }
#clients .text-block h1 {color: #ff710f; font-size: 1.6em; }
#clients .text-block p {max-width: 550px; margin: 0 auto; }




/*


    H O M E P A G E   H E A D E R


*/
.homepage header {overflow: hidden; position: relative; z-index: 100; }
.homepage header .stripe-content {/*background: silver;*/ padding: 5% 0; }


header .text-block {position: relative; z-index: 200; padding: 5% 10% 0 10%; text-align: center; }
.homepage header .text-block {padding-bottom: 5%; }
.homepage header.just-intro-anim-block .text-block {padding-top: 0; }
header .text-block h1 {font-size: 3.3em; text-transform: uppercase; padding-bottom: 0; }
.homepage header .text-block h1 {padding-bottom: 30px; text-transform: none; }
header .text-block h1 br {display: block; }
@media (max-width: 1140px){
    .homepage header .text-block h1 br {display: none; }
}
header .text-block p {font-size: 1.3em; font-weight: 700; }
/*
header .text-block p a.arrow {color: #1b1d1e; }
header .text-block p a.arrow::after {}
*/

@media (max-width: 700px){
    .homepage header .text-block {padding: 8% 5%; font-size: .8rem; }
    #hp-showcase {width: 110%; margin: 0 -5%; }
    #hp-showcase>.square {margin-top: -15%; }
}
@media (max-width: 500px){
    header .text-block {padding: 35px 20px 0 20px; }
    .homepage header .text-block {padding-bottom: 35px; }
    .homepage header .text-block h1 {padding-bottom: 25px; font-size: 2em; }
    #hp-showcase>.square {margin: -9% 0 -7% 0; }
}
@media (max-width: 400px){
    .header .text-block {padding-left: 0; padding-right: 0; }
    .homepage header .text-block>* {padding-left: 20px; padding-right: 20px; }
    header .text-block>a.btn-rounded {padding: 0; }
    #hp-showcase>.square {margin: 0 0 -5% 0; }
}

header .showcase {z-index: 100; width: 100%; max-width: 900px; margin: 0 auto; }
header .item-dots {bottom: 10%; }
header.just-intro-anim-block .item-dots {display: none; }
header .showcase .square {position: relative; width: 100%; height: 0; padding-bottom: 100%; margin: -18% 0 -10% 0; /*background: #ff710f; */ perspective: 1800px; }
header .showcase .square>* {position: absolute; }
header .showcase .square>div>* {position: absolute; }
header .showcase .square::before {content: ''; display: none; position: absolute; width: 100%; height: 100%; background: url(showcase/help-showcase.png) no-repeat; background-size: 100%; filter: blur(100); }
header .showcase .square.help::before {display: block; }
/*header .showcase .square::after {content: ''; display: block; position: absolute; width: 100%; height: 100%; box-sizing: border-box; border: 1px dashed #bbb; }*/
header .showcase .ff, header .showcase .square .unit>.inner {width: 100%; height: 100%; }

header .showcase .square .unit {width: 20%; height: 20%; }
header .showcase .square .unit, header .showcase .square .unit>.inner {transform-origin: left top; }

@media (max-width: 1100px) and (min-width: 851px){
    header .showcase .square {margin: -15% 0 -10% 0;  }
}

header .showcase .square .letter *, 
header .showcase .square .bb *, 
header .showcase .square .cone *,
header .showcase .square .tablet *,
header .showcase .square .nb *,
header .showcase .square .phone *,
header .showcase .square .tv *,
header .showcase .square .hailer *
{position: absolute; }
header .showcase .square .letter img {height: auto; }
#f img {width: 70.75%; }
#o0 img {width: 67.25%; }
#x img {width: 95.5%; }
#o1 img {width: 79.75%; }
#f-rns img {width: 174.75%; }
#o0-rns img {width: 129.5%; }
#x-rns img {width: 187%; }
#o1-rns img {width: 161.5%; }


#f, #f-rns {left: 25%; top: 71.444%; }
#o0, #o0-rns {left: 42.556%; top: 53.889%; }
#x, #x-rns {left: 53.778%; top: 73.222%; }
#o1, #o1-rns {left: 78.667%; top: 67.889%; }

#f-img {left: -40.556%; top: -192.778%; }
#o0-img {left: -32.778%; top: -123.889%; }
#x-img {left: -31.667%; top: -141.667%; }
#o1-img {left: -47.222%; top: -134.444%; }

#f-rns-img {left: -134.444%; top: -90%; }
#o0-rns-img {left: -92.778%; top: -53.333%; }
#x-rns-img {left: -122.778%; top: -71.667%; }
#o1-rns-img {left: -131.667%; top: -64.444%; }


.showcase.intro .f {transform: translate(-70%,-54.444%) scale(.91) rotate(-.1deg); opacity: 0; }
.showcase.intro .o0 {transform: translate(17.778%,-50%) scale(.905) rotate(-.1deg); opacity: 0; }
.showcase.intro .x {transform: translate(-52.778%,33.333%) scale(1.047) rotate(-.1deg); opacity: 0; }
.showcase.intro .o1 {transform: translate(-64.444%,-59.444%) scale(.94) rotate(-.1deg); opacity: 0; }

.showcase .letter {opacity: 1; transform: none; transition: 1s cubic-bezier(.04, .66, .05, 1); }
.showcase .f, .showcase.foxo .f {transform: rotate(-.1deg); transition-delay: 0s; }
.showcase .o0, .showcase.foxo .o0 {transform: rotate(-.1deg); transition-delay: .1s; }
.showcase .x, .showcase.foxo .x {transform: rotate(-.1deg); transition-delay: .2s; }
.showcase .o1, .showcase.foxo .o1 {transform: rotate(-.1deg); transition-delay: .3s; }

/* common */
.showcase.foxo .letter, .showcase.dtp .letter, .showcase.digital .letter, .showcase.video .letter {transition: 1.2s cubic-bezier(.25, .01, .05, 1); }
.showcase.foxo .f, .showcase.dtp .f, .showcase.digital .f, .showcase.video .f {transition-delay: 0s; }
.showcase.foxo .o0, .showcase.dtp .o0, .showcase.digital .o0, .showcase.video .o0 {transition-delay: .1s; }
.showcase.foxo .x, .showcase.dtp .x, .showcase.digital .x, .showcase.video .x {transition-delay: .2s; }
.showcase.foxo .o1, .showcase.dtp .o1, .showcase.digital .o1, .showcase.video .o1 {transition-delay: .3s; }

/* .dtp */
.showcase.dtp .f {transform: translate(-33.889%, 20.556%) scale(1.04) rotate(-.1deg); }
.showcase.dtp .o0 {transform: translate(-28.889%, 20.556%) scale(1.05) rotate(-.1deg); }
/*.showcase.dtp .x {transform: translate(25.555%, 25%) scale(1.03) rotate(-.1deg); }*/
.showcase.dtp .x {transform: translate(26.111%, 37.222%) scale(1.05) rotate(-.1deg); }
/*.showcase.dtp .o1 {transform: translate(11.111%, 9.445%) scale(1.01) rotate(-.1deg); }*/
.showcase.dtp .o1 {transform: translate(11.111%, 31.667%) scale(1.04) rotate(-.1deg); }


.showcase #clv {left: 48.111%; top: 22.778%; width: 29%; margin: 0; }
.showcase .width-box.clv {left: 0; top: 0; width: 100%; z-index: auto !important; }
.showcase .width-box.clv .visual {z-index: auto !important; }
.showcase .width-box.clv .medium {background-image: url(/css/showcase/mockup-header-clv.png); }


.showcase.noTrans * {transition: none !important; }
.showcase.noAnim * {animation: none !important; }


.showcase .bb {left: 35.778%; top: 77.556%; }
/*
.showcase .cone0 {left: 62.222%; top: 87.778%; }
.showcase .cone1 {left: 84.667%; top: 79.222%; }
*/
.showcase .cone0 {left: 47.889%; top: 85.556%; }
.showcase .cone1 {left: 80.222%; top: 82.444%; }

#bb-visual {left: -245%; top: -441.111%; width: 600%; height: 400%; perspective: 5000px; }
#bb-visual img {left: 23.92%; top: 75.833%; width: 42.7%; height: auto; transform-origin: left top; transform: rotateX(-10deg) rotateY(42deg) rotateZ(-2deg) scale(1,.85); transform-style: preserve-3d; }

#bb-img {left: -111.111%; top: -187.222%; width: 204.25%; }
#bb-content-img {left: -101.111%; top: -178.889%; width: 188.75%; }
#bb-rns-img {left: -122.222%; top: -14.444%; width: 218%; }
#ladder-img {left: -79.444%; top: -83.333%; width: 73%; }

#cone0-img {left: -25.556%; top: -66.111%; width: 51.75%; }
#cone0-rns-img {left: -47.222%; top: -37.222%; width: 73.25%; }
#cone1-img {left: -26.111%; top: -60.556%; width: 50.5%; }
#cone1-rns-img {left: -48.333%; top: -31.111%; width: 72.5%; }

.showcase #clv {transform: translateX(76.628%) rotate(-.1deg); }
.showcase .bb {transform: translate(-83.889%, 23.333%) rotate(-.1deg); }
.showcase .cone0 {transform: translate(60%, 19.444%) scale(1.053) rotate(-.1deg); }
.showcase .cone1 {transform: translate(30.556%, 58.333%) scale(1.183) rotate(-.1deg); }

.showcase .bb, .showcase .cone, .showcase #clv {opacity: 0; transition: .7s cubic-bezier(.37, .01, .71, .39); }
.showcase.dtp .bb, .showcase.dtp .cone, .showcase.dtp #clv {transform: rotate(-.1deg); opacity: 1; transition: 1s cubic-bezier(.04, .66, .05, 1); }

.showcase.dtp .bb {transition-delay: .6s; }
.showcase.dtp #clv {transition-delay: .8s; }
.showcase.dtp .cone0 {transition-delay: .3s; }
.showcase.dtp .cone1 {transition-delay: .5s; }


/* digital */
.showcase.digital .f {transform: translate(-17.778%, 1.111%) rotate(-.1deg); }
.showcase.digital .o0 {transform: translate(-17.778%, 0.556%) rotate(-.1deg); }
.showcase.digital .x {transform: translate(7.222%, -37.222%) scale(.97) rotate(-.1deg); }
.showcase.digital .o1 {transform: translate(-11.1%, -0.556%) rotate(-.1deg); }

.showcase .tablet {left: 73.333%; top: 71.444%; }
.showcase .nb {left: 42.556%; top: 69.556%; }
.showcase .phone {left: 22%; top: 73.889%; }

.screen-visual {left: -412.778%; top: -301.111%; width: 600%; height: 400%; perspective: 4000px; /*background: rgba(0, 0, 0, 0.28);*/ }
#tablet .screen-content {left: 58.148%; top: 57.917%; width: 21.8%; height: 20.4%; background: #ff710f; /*background: rgba(0,0,0, 0.48);*/ transform-origin: right top; transform: rotateX(-10deg) rotateY(-25deg) rotateZ(3.7deg) skewY(.9deg); overflow: hidden; }
#tablet-rns .screen-visual {perspective: 2800px; }
#tablet-rns .screen-content {left: 57.315%; top: 58.472%; width: 21.6%; height: 20.4%; background: #ff710f; transform-origin: right bottom; transform: scale(1,-1) rotateX(30deg) rotateY(-25deg) rotateZ(4deg) skewX(-1.0deg); overflow: hidden; }
.tablet .screen-content img {width: 100%; height: auto; }
#tablet-rns .screen-content img {opacity: .25; }

.nb .lid-content {left: -75.556%; top: -98.889%; width: 140%; height: 97%; transform: rotate(-4.7deg); background: black; overflow: hidden; }
.nb .lid-content img {width: 100%; height: auto; }
#nb-rns .lid-content {left: -74.444%; top: -3.889%; background: #ff710f; transform: scale(1,-.65) rotate(9deg) skewX(12.5deg); }
#nb-rns .lid-content img {opacity: .25; }
#nb .lid-reflection {left: -76.111%; top: 0%; width: 140%; height: 100%; transform-origin: left top; transform: rotate(-20.88deg); opacity: .25; /*background: rgba(0,255,0,.2);*/ overflow: hidden; }
#nb .lid-reflection .inner {left: 10.317%; top: -48.333%; width: 104%; height: 100%; transform-origin: left top; transform: rotate(15.66deg); /*background: rgba(0,0,0,.5);*/ overflow: hidden; }
#nb .lid-reflection .inner .lid-content {width: 95%; height: 92%; transform-origin: left bottom; transform: translate(82.329%, 71.084%) scale(1,-.8) skewX(8.5deg); border-bottom-left-radius: 2%; border-bottom-right-radius: 2%; background: rgba(0,0,0,.5); overflow: hidden; }

#phone .screen-content {left: -28.333%; top: -68.333%; width: 32.9%; height: 72%; transform-origin: left top; transform: rotate(-8.49deg) skewY(-5.1deg); }
.phone .screen-content {/*background: rgba(0,0,0, 0.48);*/ overflow: hidden; }
#phone-rns .screen-content {left: -16.111%; top: -62.778%; width: 32.9%; height: 72%; background: #ff710f; transform-origin: left bottom; transform: scale(.92,-.8) rotate(-4deg) skewY(20deg); }
.phone .screen-content img {width: 100%; height: auto; }
#phone-rns .screen-content img {opacity: .25; }

#tablet-img {left: -59.444%; top: -95%; width: 130.21%; }
#tablet-rns-img {left: -123.889%; top: -77.222%; width: 190.0767%; }
#nb-img {left: -82.778%; top: -107.222%; width: 176.357%; }
#nb-rns-img {left: -145.556%; top: -50.556%; width: 238.7183%; }
#phone-img {left: -32.222%; top: -81.667%; width: 48.3922%; }
#phone-rns-img {left: -80.556%; top: -40.556%; width: 97.5328%; }

.showcase .tablet {transform: translate(72.222%, 14.444%) scale(1.04) rotate(-.1deg); }
.showcase .nb {transform: translate(26.111%, 61.111%) scale(1.07) rotate(-.1deg); }
.showcase .phone {transform: translate(-83.333%, 22.222%) scale(1.07) rotate(-.1deg); }

.showcase .tablet, .showcase .nb, .showcase .phone {opacity: 0; transition: .7s cubic-bezier(.37, .01, .71, .39); }
.showcase.digital .tablet, .showcase.digital .nb, .showcase.digital .phone {transform: rotate(-.1deg); opacity: 1; transition: 1s cubic-bezier(.04, .66, .05, 1); }

.showcase.digital .tablet {transition-delay: .3s; }
.showcase.digital .nb {transition-delay: .5s; }
.showcase.digital .phone {transition-delay: .6s; }


/* video */

.showcase.video .f {transform: translate(-3.889%, -3.889%) scale(.99) rotate(-.1deg); }
.showcase.video .o0 {transform: translate(-12.222%, 3.333%) rotate(-.1deg); }
.showcase.video .x {transform: translate(-11.667%, -2.778%) rotate(-.1deg); }
.showcase.video .o1 {transform: translate(-14.444%, -10%) scale(.98) rotate(-.1deg); }


#tv {left: 51.333%; top: 69.889%; transform: translateY(-100%) rotate(-.1deg); }
#tv-rns {left: 51.333%; top: 76%; transform: translateY(100%) rotate(-.1deg); }
#tv-visual {width: 600%; height: 400%; perspective: 4000px; background: rgba(0, 0, 0, 0.28); }
#hailer {left: 60.556%; top: 45.889%; transform: translateY(60%) rotate(-80deg); }
#hailer-cone {left: 30.556%; top: -17.778%; width: 100%; height: 100%; transform-origin: left top; animation: hailer-cone .6s both alternate infinite cubic-bezier(.52, 0, .48, 1); }
#hailer-cone.unmuted {animation-play-state: paused; }

@keyframes hailer-cone {
    0% {transform: scaleY(.99); }
    20% {transform: scaleY(1.02); }
    35% {transform: scaleY(1); }
    40% {transform: scaleY(1.01); }
    65% {transform: scaleY(.98); }
    85% {transform: scaleY(1.005); }
    100% {transform: scaleY(1); }
}

#tv-img, #tv-back-img {left: -77.222%; top: -111.667%; width: 155.25%; }
#tv-rns-img {left: -77.222%; top: -19.444%; width: 155.25%; }
#hailer-handle-img {left: -25%; top: -33.889%; width: 77.5%; }
#hailer-cone-img {left: -37.778%; top: -88.333%; width: 74.75%; }

.showcase .tv, .showcase .hailer {opacity: 0; transition: .7s cubic-bezier(.37, .01, .71, .39); }
.showcase.video .tv, .showcase.video .hailer {opacity: 1; transition: 1s cubic-bezier(.04, .66, .05, 1); }
.showcase.video .tv {transform: rotate(-.1deg) !important; }
.showcase.video #hailer {transform: rotate(-60.53deg); }

.showcase.video .tv {transition-delay: .3s; }
.showcase.video .hailer {transition-delay: .5s; }

.tv .screen-visual {left: -307.14%; top: -273.07%; /*background: rgba(0,0,0, 0.48);*/ }
.tv .screen-content {left: 35.556%; top: 51%; width: 27.3%; height: 23.03%; transform: rotateX(-30deg) rotateY(-26deg) rotateZ(-1deg) skewY(.5deg); transform-origin: right top; }
.tv .screen-content video {width: 100%; height: auto; }
.tv .screen-content iframe {width: 100%; height: 100%; border: none; outline: none; /*transform-origin: left top; transform: scale(.66667); */}

a.video-controls {cursor: default; position: absolute; display: none; transform-origin: left top; background: #0000; }
.showcase.video a.video-controls {display: block; cursor: pointer; }
a#showcase-video-mute-btn {width: 24%; height: 16%; transform: rotate(26deg); border-bottom-left-radius: 40%; border-top-left-radius: 40%; border-bottom-right-radius: 60%; border-top-right-radius: 60%; }
a#showcase-video-pause-btn {width: 31%; height: 19%; transform: skewY(14deg); border-radius: 5%; }
#showcase-video-mute-btn {left: 48.222%; top: 23.556%; }
#showcase-video-pause-btn {left: 35.889%; top: 47%; }



/*


    S E R V I C E S


*/



section.service .stripe-content {display: flex; flex-flow: wrap; justify-content: flex-end; align-items: center; color: #fff; } /* auto/220/370 */
section.service .stripe-content .btn-box {flex: 0 0 290px !important; text-align: left; }
section.service .stripe-content .btn-box .btn-rounded {margin-top: 20px; margin-left: 0; margin-right: 0; }
section.service.white .stripe-content {color: #1b1d1e; }
section.service .stripe-content > .copy-icon {flex: 0 1 calc(93.4% - 290px); display: flex; flex-flow: row; align-items: center; text-align: center; }
section.service .stripe-content > .copy-icon .icon {position: relative; flex: 0 0 220px; width: 220px; height: 280px; text-align: left; /*background: rgba(192, 192, 192, 0.33);*/ }
section.service .stripe-content > .copy-icon .icon .ff {width: 100%; height: 100%; }
section.service .stripe-content > ul {flex: 0 0 290px; display: flex; flex-flow: column; align-content: center; padding-left: 6.6%; }

/* copy */
section.service .stripe-content .copy {display: flex; flex-flow: wrap; justify-content: space-around; justify-items: center; }
section.service .stripe-content .copy > * {margin: 0 10%; }
section.service .stripe-content .copy h2 {flex: 0 1 auto; position: relative; margin-bottom: 10%; padding-bottom: 10%; font-size: 2.6rem; line-height: 1.2; }
section.service .stripe-content .copy h2::before {content: ''; display: block; position: absolute; left: 50%; bottom: 0; width: 0; height: 6px; border-radius: 50px; background: #faf; transform: translateX(-50%); transition: 1s cubic-bezier(.27, 0, 0, 1); }

section.service.flat .stripe-content .copy h2::before {width: 75%; }

section.service.pumpkin .stripe-content .copy h2::before, section.service.sea .stripe-content .copy h2::before, 
section.service.pumpkin .stripe-content > ul li::before, section.service.pumpkin .stripe-content > ul li::after,
section.service.sea .stripe-content > ul li::before, section.service.sea .stripe-content > ul li::after
{background-color: #1b1d1e; }
section.service.black-pearl .stripe-content .copy h2::before, section.service.black-pearl .stripe-content > ul li::before, section.service.black-pearl .stripe-content > ul li::after {background-color: #0db6a8; }
section.service.white .stripe-content .copy h2::before, section.service.white .stripe-content > ul li::before, section.service.white .stripe-content > ul li::after {background-color: #ff710f; }
section.service.rose .stripe-content .copy h2::before, section.service.rose .stripe-content > ul li::before, section.service.rose .stripe-content > ul li::after {background-color: #053555; }
section.service.dark-cerulean .stripe-content .copy h2::before, section.service.dark-cerulean .stripe-content > ul li::before, section.service.dark-cerulean .stripe-content > ul li::after {background-color: #ff36a7; }

section.service .stripe-content .copy p {flex: 1 1 80%; }


section.service .stripe-content > ul {font-size: 1.1rem; font-weight: 700; }
section.service .stripe-content > ul li {position: relative; padding: 5px 0 5px 35px; }
section.service .stripe-content > ul li::before, section.service .stripe-content > ul li::after {content: ''; position: absolute; left: 0; top: 13px; width: 20px; height: 6px; border-radius: 50px; }
section.service .stripe-content > ul li::after {left: 10px; transform: translateX(-50%) rotate(90deg); }

section.service.flat .stripe-content > ul li::before {animation: service-item-plus-hline 1.5s both cubic-bezier(.29, 0, 0, 1); }
section.service.flat .stripe-content > ul li::after {animation: service-item-plus-vline 1.5s both cubic-bezier(.29, 0, 0, 1); }

@keyframes service-item-plus-hline {
    0% {width: 0; }
    40% {width: 20px; }
    60% {transform: rotate(0deg); }
    100% {transform: rotate(360deg); }
}
@keyframes service-item-plus-vline {
    0% {width: 0; opacity: 0; }
    60% {width: 0; transform: translateX(-50%) rotate(90deg); opacity: 0; }
    100% {width: 20px; transform: translateX(-50%) rotate(450deg); opacity: 1; }
}


section.service.flat .stripe-content > ul li {animation: service-item-slide-from-bottom 1.5s backwards cubic-bezier(.05, .72, .18, 1); }

section.service.flat .stripe-content > ul li:nth-child(1) {animation-delay: .45s; }
section.service.flat .stripe-content > ul li:nth-child(2) {animation-delay: .5s; }
section.service.flat .stripe-content > ul li:nth-child(3) {animation-delay: .55s; }
section.service.flat .stripe-content > ul li:nth-child(4) {animation-delay: .6s; }
section.service.flat .stripe-content > ul li:nth-child(5) {animation-delay: .65s; }
section.service.flat .stripe-content > ul li:nth-child(6) {animation-delay: .7s; }
section.service.flat .stripe-content > ul li:nth-child(7) {animation-delay: .75s; }
section.service.flat .stripe-content > ul li:nth-child(8) {animation-delay: .8s; }
section.service.flat .stripe-content > ul li:nth-child(9) {animation-delay: .85s; }
section.service.flat .stripe-content > ul li:nth-child(10) {animation-delay: .9s; }
section.service.flat .stripe-content > ul li:nth-child(11) {animation-delay: .95s; }
section.service.flat .stripe-content > ul li:nth-child(12) {animation-delay: 1.0s; }
section.service.flat .stripe-content > ul li:nth-child(13) {animation-delay: 1.05s; }
section.service.flat .stripe-content > ul li:nth-child(14) {animation-delay: 1.1s; }
section.service.flat .stripe-content > ul li:nth-child(15) {animation-delay: 1.15s; }
section.service.flat .stripe-content > ul li:nth-child(16) {animation-delay: 1.2s; }
section.service.flat .stripe-content > ul li:nth-child(17) {animation-delay: 1.25s; }
section.service.flat .stripe-content > ul li:nth-child(18) {animation-delay: 1.3s; }

section.service.flat .stripe-content > ul li:nth-child(1)::before, section.service.flat .stripe-content > ul li:nth-child(1)::after {animation-delay: .8s; }
section.service.flat .stripe-content > ul li:nth-child(2)::before, section.service.flat .stripe-content > ul li:nth-child(2)::after {animation-delay: .85s; }
section.service.flat .stripe-content > ul li:nth-child(3)::before, section.service.flat .stripe-content > ul li:nth-child(3)::after {animation-delay: .9s; }
section.service.flat .stripe-content > ul li:nth-child(4)::before, section.service.flat .stripe-content > ul li:nth-child(4)::after {animation-delay: .95s; }
section.service.flat .stripe-content > ul li:nth-child(5)::before, section.service.flat .stripe-content > ul li:nth-child(5)::after {animation-delay: 1.0s; }
section.service.flat .stripe-content > ul li:nth-child(6)::before, section.service.flat .stripe-content > ul li:nth-child(6)::after {animation-delay: 1.05s; }
section.service.flat .stripe-content > ul li:nth-child(7)::before, section.service.flat .stripe-content > ul li:nth-child(7)::after {animation-delay: 1.05s; }
section.service.flat .stripe-content > ul li:nth-child(8)::before, section.service.flat .stripe-content > ul li:nth-child(8)::after {animation-delay: 1.05s; }
section.service.flat .stripe-content > ul li:nth-child(9)::before, section.service.flat .stripe-content > ul li:nth-child(9)::after {animation-delay: 1.05s; }
section.service.flat .stripe-content > ul li:nth-child(10)::before, section.service.flat .stripe-content > ul li:nth-child(10)::after {animation-delay: 1.05s; }
section.service.flat .stripe-content > ul li:nth-child(11)::before, section.service.flat .stripe-content > ul li:nth-child(11)::after {animation-delay: 1.05s; }
section.service.flat .stripe-content > ul li:nth-child(12)::before, section.service.flat .stripe-content > ul li:nth-child(12)::after {animation-delay: 1.05s; }
section.service.flat .stripe-content > ul li:nth-child(13)::before, section.service.flat .stripe-content > ul li:nth-child(13)::after {animation-delay: 1.05s; }
section.service.flat .stripe-content > ul li:nth-child(14)::before, section.service.flat .stripe-content > ul li:nth-child(14)::after {animation-delay: 1.05s; }
section.service.flat .stripe-content > ul li:nth-child(15)::before, section.service.flat .stripe-content > ul li:nth-child(15)::after {animation-delay: 1.05s; }
section.service.flat .stripe-content > ul li:nth-child(16)::before, section.service.flat .stripe-content > ul li:nth-child(16)::after {animation-delay: 1.05s; }
section.service.flat .stripe-content > ul li:nth-child(17)::before, section.service.flat .stripe-content > ul li:nth-child(17)::after {animation-delay: 1.05s; }
section.service.flat .stripe-content > ul li:nth-child(18)::before, section.service.flat .stripe-content > ul li:nth-child(18)::after {animation-delay: 1.05s; }


@keyframes service-item-slide-from-bottom {
    0% {opacity: 0; transform: translateY(80px) rotate(-.1deg); }
    100% {opacity: 1; transform: none; }
}

/* online comunication */
.icon.online-comunication {perspective: 800px; transform-style: preserve-3d; }
.icon.online-comunication>* {position: absolute; transform-style: preserve-3d; }
.icon.online-comunication .earth {opacity: 0; left: 50%; top: 50%; width: 80%; height: auto; transform: translate3d(-50%,-50%, 0); transition: opacity .35s ease; }
.flat.vp .icon.online-comunication .earth { opacity: 1; transition: .65s cubic-bezier(.31, 0, .25, 1); }
.icon.online-comunication .orbit {top: 50%; width: 50%; height: 0; padding-bottom: 100%; overflow: hidden; box-sizing: border-box; transform-origin: right center; /*background: rgba(0,0,0,.2);*/ }
.icon.online-comunication .orbit div {position: absolute; width: 200%; height: 100%; border: 2px solid #999; border-radius: 50%; box-sizing: border-box; }
.icon.online-comunication .orbit img {position: absolute; display: block; left: 0; top: 0; width: 200%; height: 100%; box-sizing: border-box; }

.icon.online-comunication .orbit {opacity: 0; transition: .35s ease; }
.flat.vp .icon.online-comunication .orbit {opacity: 1; transition: .65s cubic-bezier(.31, 0, .25, 1); }

.icon.online-comunication .orbit:nth-of-type(1) {transform: translateY(-50%) rotateX(70deg) rotateY(25deg); animation: orbit-rotate-0 1.8s both infinite linear; animation-play-state: paused; }
.icon.online-comunication .orbit:nth-of-type(2) {transform: translateY(-50%) rotateX(-30deg) rotateY(35deg); animation: orbit-rotate-1 1.5s both infinite linear; animation-play-state: paused; }
.icon.online-comunication .orbit:nth-of-type(3) {transform: translateY(-50%) rotateX(20deg) rotateY(60deg); animation: orbit-rotate-2 1.3s both infinite linear; animation-play-state: paused; }

.flat.vp .icon.online-comunication .orbit:nth-of-type(1) {transition-delay: .35s; }
.flat.vp .icon.online-comunication .orbit:nth-of-type(2) {transition-delay: .85s; }
.flat.vp .icon.online-comunication .orbit:nth-of-type(3) {transition-delay: 1.25s; }

.flat.vp .icon.online-comunication .orbit {animation-play-state: running !important; }

@keyframes orbit-rotate-0 {
    0% {transform: translateY(-50%) rotateX(70deg) rotateY(25deg) rotateZ(-.1deg); }
    100% {transform: translateY(-50%) rotateX(70deg) rotateY(25deg) rotateZ(359.9deg); }
}
@keyframes orbit-rotate-0-mobile {
    0% {transform: translateY(-50%) rotateX(45deg) rotateY(25deg) rotateZ(-.1deg); }
    100% {transform: translateY(-50%) rotateX(45deg) rotateY(25deg) rotateZ(359.9deg); }
}
@keyframes orbit-rotate-1 {
    0% {transform: translateY(-50%) rotateX(-30deg) rotateY(45deg) rotateZ(-90deg); }
    100% {transform: translateY(-50%) rotateX(-30deg) rotateY(45deg) rotateZ(270deg); }
}
@keyframes orbit-rotate-2 {
    0% {transform: translateY(-50%) rotateY(-45deg) rotateZ(-180deg); }
    100% {transform: translateY(-50%) rotateY(-45deg) rotateZ(180deg); }
}

/* online bannery/html5 */
.services .icon.html5 {perspective: 1000px; transform-style: preserve-3d; }
.services .icon.html5 * {position: absolute; transform-style: preserve-3d; }
.services .icon.html5 .html5 {left: 4px; top: 11px; transform-style: preserve-3d; opacity: 0; }
.services .icon.html5 .html5 img {left: 50%; top: 50%; transform-style: preserve-3d; transform: translate(-50%,-50%) scale(.5); }

.services .icon.html5 .html5 img:nth-last-child(1) {transform: translate3d(-50%,-50%,0) scale(.5); }
.services .icon.html5 .html5 img:nth-last-child(2) {transform: translate3d(-50%,-50%,-4px) scale(.5); }
.services .icon.html5 .html5 img:nth-last-child(3) {transform: translate3d(-50%,-50%,-8px) scale(.5); }
.services .icon.html5 .html5 img:nth-last-child(4) {transform: translate3d(-50%,-50%,-12px) scale(.5); }
.services .icon.html5 .html5 img:nth-last-child(5) {transform: translate3d(-50%,-50%,-16px) scale(.5); }
.services .icon.html5 .html5 img:nth-last-child(6) {transform: translate3d(-50%,-50%,-20px) scale(.5); }
.services .icon.html5 .html5 img:nth-last-child(7) {transform: translate3d(-50%,-50%,-24px) scale(.5); }
.services .icon.html5 .html5 img:nth-last-child(8) {transform: translate3d(-50%,-50%,-28px) scale(.5); }
.services .icon.html5 .html5 img:nth-last-child(9) {transform: translate3d(-50%,-50%,-32px) scale(.5); }
.services .icon.html5 .html5 img:nth-last-child(10) {transform: translate3d(-50%,-50%,-36px) scale(.5); }

.services .icon.html5 .html5 {opacity: 0; transition: opacity .35s ease; animation: html5-fall 2s both cubic-bezier(.52, 0, .48, 1) .5s, html5 2s alternate infinite cubic-bezier(.52, 0, .48, 1) 2.55s; animation-play-state: paused; }
.services .flat.vp .icon.html5 .html5 {opacity: 1; transition: opacity .35s ease .5s; animation-play-state: running; }

@keyframes html5-fall {
    0% {transform: translate3d(0,-50%,0); transform-origin: center 80%; }
    10% {transform: none; transform-origin: center 80%; }
    15% {transform: scale(1.1, .9); transform-origin: center 80%; }
    22.5% {transform: translate3d(0,-5%,0) scale(.95, 1.05); transform-origin: center 80%; }
    30% {transform: none; transform-origin: center 80%; }
    35% {transform: scale(1.02, .98); transform-origin: center 80%; }
    47.5% {transform: none; transform-origin: center 80%; }
    50% {transform: rotate3d(0,1,0, 0deg); transform-origin: center center; }
    100% {transform: rotate3d(-.2,1,-.2, -20deg); transform-origin: center center; }
}
@keyframes html5 {
    0% {transform: rotate3d(-.2,1,-.2,-20deg); }
    100% {transform: rotate3d(-.2,1,-.2,20deg); }
}

.services .icon.html5 .shadow {opacity: 0; left: 50%; top: 170px; transition: opacity .35s ease; transform-style: preserve-3d; transform: translateX(-50%) rotateX(80deg) scale(.5); animation: html5-shadow-fall 2s cubic-bezier(.52, 0, .48, 1) .5s, html5-shadow 2s alternate infinite cubic-bezier(.52, 0, .48, 1) 2.55s; animation-play-state: paused; }
.services .flat.vp .icon.html5 .shadow {opacity: 1; transition: opacity .35s ease .5s; animation-play-state: running; }

@keyframes html5-shadow-fall {
    0% {transform: translateX(-50%) rotateX(80deg) rotateZ(0deg) scale(.65, 1.3); opacity: 0; }
    10% {transform: translateX(-50%) rotateX(80deg) rotateZ(0deg) scale(.5, .65); opacity: 1; }
    15% {transform: translateX(-50%) rotateX(80deg) rotateZ(0deg) scale(.53, .65); opacity: 1; }
    22.5% {transform: translateX(-50%) rotateX(80deg) rotateZ(0deg) scale(.6, .65); opacity: .7; }
    30% {transform: translateX(-50%) rotateX(80deg) rotateZ(0deg) scale(.5, .65); opacity: 1; }
    35% {transform: translateX(-50%) rotateX(80deg) rotateZ(0deg) scale(.55, .65); }
    47.5% {transform: translateX(-50%) rotateX(80deg) rotateZ(0deg) scale(.5, .65); }
    50% {transform: translateX(-50%) rotateX(80deg) rotateZ(0deg) scale(.5, .65); }
    100% {transform: translateX(-50%) rotateX(80deg) rotateZ(20deg) scale(.5, 1); }
}
@keyframes html5-shadow {
    0% {transform: translateX(-50%) rotateX(80deg) rotateZ(20deg) scale(.5, 1); }
    100% {transform: translateX(-50%) rotateX(80deg) rotateZ(-20deg) scale(.5, 1); }
}

.services .icon.html5 .magic-stick {opacity: 0; left: 6px; top: 255px; transform: translate3d(-40px, -20px, 100px) rotateX(-30deg) rotateY(-30deg) rotateZ(-30deg); transition: .35s ease; }
.services .flat.vp .icon.html5 .magic-stick {opacity: 1; transform: translate3d(0,0,30px) rotateX(0) rotateZ(0); transition: 1s cubic-bezier(.06, .76, .05, 1) 1.1s; }
.services .icon.html5 .magic-stick img {left: 0; bottom: 0; transform-origin: left bottom; transform: scale(.5); }

.services .icon.html5 .star {transform-style: preserve-3d; }
.services .icon.html5 .star:nth-child(1) {left: 207px; top: 31px; }
.services .icon.html5 .star:nth-child(2) {left: 241px; top: 79px; }
.services .icon.html5 .star:nth-child(3) {left: 229px; top: 131px; }
.services .icon.html5 .star img {opacity: 0; transition: .35s ease; }
.services .icon.html5 .star:nth-child(1) img:nth-child(1), .services .icon.html5 .star:nth-child(3) img:nth-child(1) {transform: translate3d(-50%,-50%,200px) rotate(-45deg) scale(.4); }
.services .icon.html5 .star:nth-child(1) img:nth-child(2), .services .icon.html5 .star:nth-child(3) img:nth-child(2) {transform: translate3d(-50%,-50%,200px) rotate(45deg) scale(.4); }
.services .icon.html5 .star:nth-child(2) img:nth-child(1) {transform: translate3d(-50%,-50%,300px) rotate(-45deg) scale(.5); }
.services .icon.html5 .star:nth-child(2) img:nth-child(2) {transform: translate3d(-50%,-50%,300px) rotate(45deg) scale(.5); }

.services .flat.vp .icon.html5 .star img {opacity: 1; transition: .8s cubic-bezier(.06, .76, .05, 1) 1.3s; }
.services .flat.vp .icon.html5 .star:nth-child(2) img {transition-delay: 1.4s; }
.services .flat.vp .icon.html5 .star:nth-child(3) img {transition-delay: 1.5s; }
.services .flat.vp .icon.html5 .star:nth-child(1) img, .services .flat .icon.html5 .star:nth-child(3) img {transform: translate3d(-50%,-50%,40px) scale(.35) !important; }
.services .flat.vp .icon.html5 .star:nth-child(2) img {transform: translate3d(-50%,-50%,40px) scale(.45) !important; }


/* grafické studio a dtp */
.services .icon.studio .idea {position: absolute; left: 50%; top: 50%; width: 204px; height: 204px; transform: translate(-50%,-50%) scale(1.1); }
.services .icon.studio .idea * {position: absolute; }
.services .icon.studio .idea img {transform: scale(.6666667); }

.services .icon.studio #idea-paper, .services .icon.studio #idea-shadow, .services .icon.studio #idea-bulb {transition: .35s ease; }
.services .icon.studio #idea-light {animation: idea-light-blink .5s backwards .4s, idea-light-keep-blinking 5s infinite .9s; animation-play-state: paused; }

.services .flat.vp .icon.studio #idea-paper {opacity: 1; transform: none; transition: .4s cubic-bezier(.08, .49, .45, 1); }
.services .flat.vp .icon.studio #idea-bulb {opacity: 1; transform: none; transition: .4s ease .2s; }
.services .flat.vp .icon.studio #idea-shadow {opacity 1; transform: none; transition: .4s ease .2s; }
.services .flat.vp .icon.studio #idea-light {animation-play-state: running; }

@keyframes idea-light-keep-blinking {
    0% {opacity: 1; }
    31% {opacity: 1; }
    31.2% {opacity: 0; }
    32% {opacity: 0; }
    32.2% {opacity: 1; }
    33% {opacity: 1; }
    33.2% {opacity: 0; }
    35% {opacity: 0; }
    40% {opacity: 1; }
    61% {opacity: 1; }
    61.2% {opacity: 0; }
    62% {opacity: 0; }
    62.2% {opacity: 1; }
    63% {opacity: 1; }
    100% {opacity: 1; }
}

/* video & animation */
.services .icon.video .create {position: absolute; left: 50%; top: 50%; width: 204px; height: 204px; transform: translate(-50%,-50%) scale(1.1); }
.services .icon.video .create * {position: absolute; }
.services .icon.video .create img {transform: scale(.6666667); }

.services .icon.video .create .quarters {left: -15%; top: -27.5%; }
.services .icon.video .create .quarters::before {content: ''; display: block; position: absolute; left: 50%; top: 50%; width: 110px; height: 110px; background: radial-gradient(closest-side, #fff9, #fff3, #fff0); transform: translate(-50%,-50%); }
.services .icon.video .create .quarter {width: 40px; height: 40px; overflow: hidden; animation: create-quarter 6s both infinite cubic-bezier(.52, 0, .48, 1); animation-play-state: paused; }
.services .icon.video .create .quarter div {width: 200%; height: 200%; border-radius: 50%; }
.services .flat.vp .icon.video .create .quarter {animation-play-state: running; }

@keyframes create-quarter {
    0% {opacity: 0; }
    8% {opacity: 1; }
    87% {opacity: 1; }
    95% {opacity: 0; }
    100% {opacity: 0; }
}


.services .icon.video .create .quarter:nth-child(1) {left: 0; bottom: 0; animation-delay: -5s; }
.services .icon.video .create .quarter:nth-child(2) {left: 0; top: 0; animation-delay: -4.9s; }
.services .icon.video .create .quarter:nth-child(3) {right: 0; top: 0; animation-delay: -4.8s; }
.services .icon.video .create .quarter:nth-child(4) {right: 0; bottom: 0; animation-delay: -4.7s; }

.services .icon.video .create .quarter:nth-child(1) div {left: -100%; bottom: -100%; background: #ec008e; background: radial-gradient(closest-side, #fe00f7, #ec008e); }
.services .icon.video .create .quarter:nth-child(2) div {left: -100%; top: -100%; background: #fff200; background: radial-gradient(closest-side, #fffe00, #fff200); }
.services .icon.video .create .quarter:nth-child(3) div {right: -100%; top: -100%; background: #231f20; background: radial-gradient(closest-side, #675e61, #231f20); }
.services .icon.video .create .quarter:nth-child(4) div {right: -100%; bottom: -100%; background: #00aef0; background: radial-gradient(closest-side, #00fafe, #00aef0); }


.services .icon.video .create #create-camera-box {overflow: visible; border-radius: 0; }
.services .icon.video .create #create-camera {left: 20%; }
.services .icon.video .create #create-notebook, .services .icon.video .create #create-lid, .services .icon.video .create #create-camera {transition: .35s ease; }

.services .flat.vp .icon.video .create #create-notebook {opacity: 1; transform: none; transition: .8s cubic-bezier(.39, .75, .53, 1); }
.services .flat.vp .icon.video .create #create-lid {transform: none; filter: none; transition: .8s cubic-bezier(.39, .75, .53, 1); }
.services .flat.vp .icon.video .create #create-camera {opacity: 1; transform: none; transition: .5s cubic-bezier(.31, 1.45, .53, 1) .5s; }

/* marketing */
.services .icon.marketing #hailer {position: absolute; left: 50%; top: 50%; width: 180px; height: 180px; transform: translate(50%,-15%) rotate(-65deg); opacity: 0; transition: .35s ease; }
.services .icon.marketing #hailer-cone {animation: none; }
.services .icon.marketing #hailer * {position: absolute; }

.services .flat.vp .icon.marketing #hailer {transform: translate(50%,-30%) rotate(-60deg); transition: .8s cubic-bezier(.06, .76, .05, 1) .5s; opacity: 1; }
.services .flat.vp .icon.marketing #hailer-cone {animation: hailer-cone .6s both alternate 2 cubic-bezier(.52, 0, .48, 1) 1s; }

/* contests */
.services .icon.contests * {position: absolute; }
.services .icon.contests>img:first-of-type {left: 50%; top: 54%; transform-origin: top center; transform: translateX(-50%) scale(.5); }
.services .icon.contests>img:last-of-type {opacity: 0; left: 50%; bottom: 41%; transform-origin: bottom center; transform: translateX(-50%) scale(.45); transition: .35s ease; }
.services .flat .icon.contests>img:last-of-type {opacity: 1; transform: translateX(-50%) scale(.5); transition: .6s cubic-bezier(.46, 2, .5, 1) .55s; }
.services .icon.contests .smoke {left: 50%; top: 35%; }
.services .icon.contests .smoke img {opacity: 0; }
.services .icon.contests .smoke img:nth-child(1) {transform: translate(-55%,-55%) scale(.65) rotate(-90deg); }
.services .icon.contests .smoke img:nth-child(2) {transform: translate(-45%,-55%) scale(.75) rotate(-180deg); }
.services .icon.contests .smoke img:nth-child(3) {transform: translate(-50%,-45%) scale(.6) rotate(-270deg); }

.services .flat .icon.contests .smoke img:nth-child(1) {animation: smoke-0 1.3s both cubic-bezier(.24, 0, .15, 1) .5s; }
.services .flat .icon.contests .smoke img:nth-child(2) {animation: smoke-1 1.1s both cubic-bezier(.24, 0, .15, 1) .55s; }
.services .flat .icon.contests .smoke img:nth-child(3) {animation: smoke-2 1.2s both cubic-bezier(.24, 0, .15, 1) .6s; }

@keyframes smoke-0 {
    0% {opacity: 0; transform: translate(-55%,-55%) scale(.65) rotate(-90deg); }
    8% {opacity: 1; }
    100% {opacity: 0; transform: translate(-65%,-65%) scale(.8) rotate(-70deg); }
}
@keyframes smoke-1 {
    0% {opacity: 0; transform: translate(-45%,-55%) scale(.75) rotate(-180deg); }
    8% {opacity: 1; }
    100% {opacity: 0; transform: translate(-35%,-60%) scale(.8) rotate(-160deg); }
}
@keyframes smoke-2 {
    0% {opacity: 0; transform: translate(-50%,-45%) scale(.6) rotate(-270deg); }
    8% {opacity: 1; }
    100% {opacity: 0; transform: translate(-55%,-35%) scale(.7) rotate(-290deg); }
}



@media (max-width: 1070px){
    section.service .stripe-content {flex-flow: column; align-content: center; }
    section.service .stripe-content > .copy-icon {flex-flow: column-reverse; align-content: center; }
    
    section.service .stripe-content .copy h2 {padding-bottom: 40px; margin-bottom: 40px; }
    section.service .stripe-content .copy h2 br {display: none; }
    section.service .stripe-content .copy p {max-width: 600px; }
    
    section.service .stripe-content > .copy-icon .icon {flex-basis: 280px; }
    section.service .stripe-content > ul {flex: 0 1 auto; padding-left: 0; padding-top: 40px; }
    section.service .stripe-content > .btn-box {flex: 0 1 auto !important; padding-top: 30px; }
    
    .services .icon.online-comunication .orbit:nth-of-type(1) {transform: translateY(-50%) rotateX(45deg) rotateY(25deg); animation: orbit-rotate-0-mobile 1.8s both infinite linear; animation-play-state: paused; }
    
}

@media (max-width: 500px){
    section.service .stripe-content .copy > * {margin-left: 5%; margin-right: 5%; }
    section.service .stripe-content > ul {padding-left: 5%; padding-right: 5%; }
}


/*


    A G E N C Y


*/
.agency section.pumpkin {text-align: center; }

#agency h2 {padding: 60px 0 10px 0; margin: 0 auto; max-width: 700px; font-size: 2rem; font-family: 'Roboto Slab', serif; font-weight: 900 !important; text-transform: uppercase; }
#agency p {padding: 30px 0; margin: 0 auto; max-width: 700px; font-size: 1.3rem; }
#agency p.black-pearl {color: #1b1d1e; }
#agency p b, #agency p strong {font-weight: 700; }
#agency p span b {display: inline-block; position: relative; overflow: hidden; vertical-align: bottom; }
#agency p span b::before {content: ''; display: block; position: absolute; bottom: 0; width: 100%; height: 2px; background: #1b1d1e; transform: translateX(-100%); }

#agency p span.underline b {animation: word-color 1800ms cubic-bezier(.36, -0.01, .25, 1); }
#agency p span.underline b::before {animation: word-underline 600ms ease; }

@keyframes word-color {
    0% {transform: none; animation-timing-function: cubic-bezier(.2, .65, .58, 1); }
    10% {transform: translate(-5px,-5px) scale(1.05) rotate(-.1deg); /*color: #1b1d1e;*/ }
    100% {transform: none; }
}
@keyframes word-underlinex {
    0% {transform: translateX(-100%); }
    100% {transform: translateX(100%); }
}

.lamp {width: 100%; max-width: 590px; position: relative; margin-left: auto; margin-right: auto; text-align: left; }
.ie10 .lamp {display: none; }
.lamp img, .lamp svg {height: auto; }
.lamp .ratio-box {width: 100%; padding-bottom: 76.2712%; box-sizing: border-box; /*background: #0003 url(agency/help-lamp.png) no-repeat left top; */}
.lamp .ratio-box * {position: absolute; }
/*.lamp .ratio-box .unit {background: #fff2; }*/
.lamp .ratio-box>.unit {width: 50%; height: 50%; }
.lamp .ratio-box .unit .unit {width: 100%; height: 100%; }
/*
85,79%
*/
#stand {left: -4.237%; top: 76%; width: 26.7548%; }
#light-cover {left: 17.797%; top: 73.556%; width: 95.4237%; transform-origin: center top; }
.light-box {width: 400%; height: 100%; overflow: hidden; }
.light-box .unit {left: 5.678%; width: 12.5%; height: 50%; }
.cone-box {left: 22.712%; top: 14.444%; transform: rotate(-.1deg); transform-origin: left top; }
#cone {left: 1.695%; top: 5.333%; width: 45.0761%; }
#bulb-light {left: 0.339%; top: 13.333%; width: 52.3464%; }
#light {left: -15.593%; top: 45.333%; width: 159.6566%; transform: rotate(56.27deg); }
#fox {left: 46.271%; top: 58.444%; width: 22.542%; opacity: 0; }
/*.base #fox {opacity: 1; }*/
#flex-hose {left: 13.39%; top: 12.222%; }
#flex-hose svg {width: 39.23054%; }
#flex-hose svg.light {transform: translate(.86408%,-.342151%); }
#flex-hose svg.dark {transform: translate(-.86408%,.342151%); }

.lamp svg.flex-hose path, .cone-box, #light-cover {transition: .4s ease-in-out; }
.lamp.base svg.flex-hose path, .base .cone-box, .base #light-cover {transition: .8s cubic-bezier(.22, 0, .28, 1); }
/*
.lamp.base svg.flex-hose path {
    d: path("M15.4962,292.2687s-2.0894-59.1328-4.6808-167.6C7.908,2.9755,63.7853,5.184,94.7055,39.638");
}
.lamp.up svg.flex-hose path {
    d: path("M15.4962,292.2687s-2.0894-59.1328-4.6808-167.6C7.908,2.9755,61.5693-1.2738,104.8344,12.5153");
}
.lamp.down svg.flex-hose path {
    d: path("M15.4962,292.2687s-2.0894-59.1328-4.6808-167.6C7.908,2.9755,66.11,15.534,83.19,54.92");
}*/

.lamp svg.light path {stroke: #53a39f; transition: .1s ease; }
.lamp img.light, #fox {opacity: 0; transition: .1s ease; }
.lamp.vp svg.light path {stroke: #5ad6d0; transition: .1s ease .7s; }
.lamp.vp img.light, .lamp.vp #fox {opacity: 1; transition: .1s ease .7s; }
.lamp.vp #fox {transition: 0s linear 2.2s !important; }


.lamp.vp .cone-box {animation: cone-rotate 2s ease-in-out 1s; }
.lamp.vp svg.flex-hose path {animation: flex-hose-bend 2s ease-in-out 1s; }
.lamp.vp #light-cover {animation: light-cover 2s ease-in-out 1s; }

@keyframes cone-rotate {
    0% {transform: rotate(-.1deg); }
    20% {transform: rotate(17deg); }
    30% {transform: rotate(17deg); }
    50% {transform: rotate(-35deg); }
    60% {transform: rotate(-35deg); animation-timing-function: cubic-bezier(.22, 0, .28, 1); }
    100% {transform: rotate(-.1deg); }
}

@keyframes flex-hose-bend {
    0% {d: path("M15.4962,292.2687s-2.0894-59.1328-4.6808-167.6C7.908,2.9755,63.7853,5.184,94.7055,39.638"); }
    20% {d: path("M15.4962,292.2687s-2.0894-59.1328-4.6808-167.6C7.908,2.9755,66.11,15.534,83.19,54.92"); }
    30% {d: path("M15.4962,292.2687s-2.0894-59.1328-4.6808-167.6C7.908,2.9755,66.11,15.534,83.19,54.92"); }
    50% {d: path("M15.4962,292.2687s-2.0894-59.1328-4.6808-167.6C7.908,2.9755,61.5693-1.2738,104.8344,12.5153"); }
    60% {d: path("M15.4962,292.2687s-2.0894-59.1328-4.6808-167.6C7.908,2.9755,61.5693-1.2738,104.8344,12.5153"); animation-timing-function: cubic-bezier(.22, 0, .28, 1); }
    100% {d: path("M15.4962,292.2687s-2.0894-59.1328-4.6808-167.6C7.908,2.9755,63.7853,5.184,94.7055,39.638"); }
}

.down #light-cover {}
.up #light-cover {}

@keyframes light-cover {
    0% {transform: none; }
    20% {transform: scaleX(.78) translateX(-28%); }
    30% {transform: scaleX(.78) translateX(-28%); }
    50% {transform: scaleX(2) translateX(40%); }
    60% {transform: scaleX(2) translateX(40%); animation-timing-function: cubic-bezier(.22, 0, .28, 1); }
    100% {transform: none; }
}




/*

    C O N T A C T

*/
.contact .connection {width: 90%; max-width: 700px; margin: 5% auto 7% auto; }
.contact .connection .ratio-box {position: relative; width: 100%; height: 0; padding-bottom: 32.857143%; box-sizing: border-box; /*background: #fff2 url(contact/help.png) no-repeat left top;*/ background-size:contain; }
.contact .connection .ratio-box * {position: absolute; }
.contact .connection .ratio-box img, .contact .connection .ratio-box svg {height: auto; }
.contact .connection .ratio-box>.unit {width: 50%; height: 50%; }
.contact .connection .ratio-box>.unit .unit {width: 100%; height: 100%; }
.contact .connection .ratio-box .can {transform-origin: left top; }
.contact .connection .ratio-box svg {left: 4.714%; top: 28.696%; width: 72.857%; }
.contact .connection .ratio-box #cline-square, .contact .connection .ratio-box .signal-square {display: none; }
.contact .connection .ratio-box .emitter {left: 10.429%; top: 30.435%; }
.contact .connection .ratio-box .emitter img {left: -17.143%; top: -43.478%; width: 55.7143%; }
.contact .connection .ratio-box .reciever {left: 76.714%; top: 39.13%; }
.contact .connection .ratio-box .reciever img {left: -27.143%; top: -44.348%; width: 69.143%; }
/*

0,7617306520414381

*/


@media (min-width: 701px){
    .connection.vp #emitter {animation: can 6s both infinite cubic-bezier(.52, 0, .48, 1) .5s; }
    .connection.vp #reciever {animation: can 6s both infinite cubic-bezier(.52, 0, .48, 1) 1.8s; } /* -.2 for mobile */
    .connection.vp #cline-wide path {animation: cline 6s both infinite cubic-bezier(.45, .17, .5, .86) .6s; }
    .connection.vp .signal-wide path {animation: signal 6s both infinite cubic-bezier(.45, .17, .5, .86); }
}
@media (max-width: 700px){
    
    .connection.vp #emitter {animation: can-square 6s both infinite cubic-bezier(.52, 0, .48, 1) .5s; }
    .connection.vp #reciever {animation: can-square 6s both infinite cubic-bezier(.52, 0, .48, 1) 1.6s; } /* -.2 for mobile */
    .connection.vp #cline-square path {animation: cline-square 6s both infinite cubic-bezier(.45, .17, .5, .86) .6s; }
    .connection.vp .signal-square path {animation: signal-square 6s both infinite cubic-bezier(.45, .17, .5, .86); }
}
.connection.vp .signal0 path {animation-delay: .6s; }
.connection.vp .signal1 path {animation-delay: .85s; }
.connection.vp .signal2 path {animation-delay: 1.4s; }

@keyframes can {
    0% {transform: scale(1); }
    0.83% {transform: scale(1.02); }
    1.67% {transform: scale(.98); }
    2.5% {transform: scale(1.01); }
    3.33% {transform: scale(1); }
    4.17% {transform: scale(1); }
    5% {transform: scale(1.02); }
    5.83% {transform: scale(.98); }
    6.67% {transform: scale(1.01); }
    7.5% {transform: scale(1); }
    13.33% {transform: scale(1); }
    14.17% {transform: scale(1.02); }
    15% {transform: scale(.98); }
    15.83% {transform: scale(1.01); }
    16.67% {transform: scale(1); }
    100% {transform: scale(1); }
}

@keyframes can-square {
    0% {transform: scale(1); }
    0.83% {transform: scale(1.02); }
    1.67% {transform: scale(.98); }
    2.5% {transform: scale(1.01); }
    3.33% {transform: scale(1); }
    4.17% {transform: scale(1); }
    5% {transform: scale(1.02); }
    5.83% {transform: scale(.98); }
    6.67% {transform: scale(1.01); }
    7.5% {transform: scale(1); }
    13.33% {transform: scale(1); }
    14.17% {transform: scale(1.02); }
    15% {transform: scale(.98); }
    15.83% {transform: scale(1.01); }
    16.67% {transform: scale(1); }
    100% {transform: scale(1); }
}

@keyframes signal {
    0% {stroke-dashoffset: 900px; }
    25% {stroke-dashoffset: 50px; }
    100% {stroke-dashoffset: 50px; }
}

@keyframes signal-square {
    0% {stroke-dashoffset: 900px; }
    25% {stroke-dashoffset: 50px; }
    100% {stroke-dashoffset: 50px; }
}

@keyframes cline {
    0% {d: path("M41.0,3.999 C-6.759,18.741 -28.113,82.911 107.156,45.0 C246.621,5.913 321.621,71.11 231.999,72.0 C142.631,72.985 164.874,39.638 297.0,45.0 C441.712,50.872 426.464,2.772 503.999,24.0"); }
    1.08% {d: path("M38.999,4.0 C-8.759,18.741 -22.285,84.345 105.156,47.999 C244.441,8.276 319.621,71.11 230.0,72.0 C140.631,72.985 162.874,39.638 295.0,45.0 C439.712,50.872 424.464,2.772 502.0,23.999"); }
    3.75% {d: path("M40.0,3.999 C-11.673,23.46 -21.644,79.627 105.999,44.0 C244.111,5.451 329.14,74.11 230.0,75.0 C140.630,75.892 163.874,39.638 296.0,44.999 C440.712,50.872 425.464,2.772 503.0,24.0"); }
    5% {d: path("M41.0,3.999 C-10.673,23.46 -21.31,78.212 107.0,44.0 C243.936,7.408 322.198,71.977 230.999,73.0 C145.948,73.953 157.63,37.575 297.0,42.999 C429.607,48.140 426.464,5.903 504.0,23.999"); }
    6.67% {d: path("M41.0,3.999 C-10.673,23.46 -21.31,78.212 107.0,44.0 C243.936,7.408 322.198,71.977 230.999,73.0 C145.948,73.953 164.842,35.307 301.999,42.0 C425.194,48.11 416.288,3.555 504.0,23.999"); }
    8.33% {d: path("M41.0,3.999 C-6.759,18.741 -28.113,82.911 107.156,45.0 C246.621,5.913 321.621,71.11 231.999,72.0 C142.631,72.985 164.874,39.638 297.0,45.0 C441.712,50.872 426.464,2.772 503.999,24.0"); }
    9.42% {d: path("M38.999,4.0 C-8.759,18.741 -22.285,84.345 105.156,47.999 C244.441,8.276 319.621,71.11 230.0,72.0 C140.631,72.985 162.874,39.638 295.0,45.0 C439.712,50.872 424.464,2.772 502.0,23.999"); }
    12.08% {d: path("M40.0,3.999 C-11.673,23.46 -21.644,79.627 105.999,44.0 C244.111,5.451 329.14,74.11 230.0,75.0 C140.630,75.892 163.874,39.638 296.0,44.999 C440.712,50.872 425.464,2.772 503.0,24.0"); }
    13.33% {d: path("M41.0,3.999 C-10.673,23.46 -21.31,78.212 107.0,44.0 C243.936,7.408 322.198,71.977 230.999,73.0 C145.948,73.953 157.63,37.575 297.0,42.999 C429.607,48.140 426.464,5.903 504.0,23.999"); }
    15% {d: path("M41.0,3.999 C-10.673,23.46 -21.31,78.212 107.0,44.0 C243.936,7.408 322.198,71.977 230.999,73.0 C145.948,73.953 164.842,35.307 301.999,42.0 C425.194,48.11 416.288,3.555 504.0,23.999"); }
    16.67% {d: path("M41.0,3.999 C-6.759,18.741 -28.113,82.911 107.156,45.0 C246.621,5.913 321.621,71.11 231.999,72.0 C142.631,72.985 164.874,39.638 297.0,45.0 C441.712,50.872 426.464,2.772 503.999,24.0"); }
    17.75% {d: path("M38.999,4.0 C-8.759,18.741 -22.285,84.345 105.156,47.999 C244.441,8.276 319.621,71.11 230.0,72.0 C140.631,72.985 162.874,39.638 295.0,45.0 C439.712,50.872 424.464,2.772 502.0,23.999"); }
    20.42% {d: path("M40.0,3.999 C-11.673,23.46 -21.644,79.627 105.999,44.0 C244.111,5.451 329.14,74.11 230.0,75.0 C140.630,75.892 163.874,39.638 296.0,44.999 C440.712,50.872 425.464,2.772 503.0,24.0"); }
    21.67% {d: path("M41.0,3.999 C-10.673,23.46 -21.31,78.212 107.0,44.0 C243.936,7.408 322.198,71.977 230.999,73.0 C145.948,73.953 157.63,37.575 297.0,42.999 C429.607,48.140 426.464,5.903 504.0,23.999"); }
    23.33% {d: path("M41.0,3.999 C-10.673,23.46 -21.31,78.212 107.0,44.0 C243.936,7.408 322.198,71.977 230.999,73.0 C145.948,73.953 164.842,35.307 301.999,42.0 C425.194,48.11 416.288,3.555 504.0,23.999"); }
    25% {d: path("M41.0,3.999 C-6.759,18.741 -28.113,82.911 107.156,45.0 C246.621,5.913 321.621,71.11 231.999,72.0 C142.631,72.985 164.874,39.638 297.0,45.0 C441.712,50.872 426.464,2.772 503.999,24.0"); }
    100% {d: path("M41.0,3.999 C-6.759,18.741 -28.113,82.911 107.156,45.0 C246.621,5.913 321.621,71.11 231.999,72.0 C142.631,72.985 164.874,39.638 297.0,45.0 C441.712,50.872 426.464,2.772 503.999,24.0"); }
}
@keyframes cline-square {
    0% {d: path("M81.999,4.0 C34.240,18.741 -42.366,60.405 41.999,88.0 C137.344,119.185 169.620,156.893 80.0,158.0 C0.156,158.985 -1.17,130.268 97.0,115.999 C141.958,109.455 190.0,102.618 245.0,122.0"); }
    100% {d: path("M81.999,4.0 C34.240,18.741 -42.366,60.405 41.999,88.0 C137.344,119.185 169.620,156.893 80.0,158.0 C0.156,158.985 -1.17,130.268 97.0,115.999 C141.958,109.455 190.0,102.618 245.0,122.0"); }
}

@media (max-width: 700px){
    .contact .connection {width: 80%; max-width: 460px; }
    .contact .connection .ratio-box .emiter img {width: 78%; }
    .contact .connection .ratio-box .reciever img {width: 96.8%; }
    .contact .connection .ratio-box {padding-bottom: 80.43478261%; /*background-image: url(contact/help-mobile.png);*/ }

/*    #cline path, .signal path {d: path("M81.999,4.0 C34.240,18.741 -42.366,60.405 41.999,88.0 C137.344,119.185 169.620,156.893 80.0,158.0 C0.156,158.985 -1.17,130.268 97.0,115.999 C141.958,109.455 190.0,102.618 245.0,122.0"); }*/
    .contact .connection .ratio-box svg {left: 1.304%; top: 20.811%; width: 110.8696%; }
    .contact .connection .ratio-box .emitter {left: 18.913%; top: 21.892%; }
    .contact .connection .ratio-box .emitter img {left: -35.217%; top: -35.676%; width: 111.3%; }
    .contact .connection .ratio-box #cline-wide, .contact .connection .ratio-box .signal-wide {display: none; }
    .contact .connection .ratio-box #cline-square, .contact .connection .ratio-box .signal-square {display: block; }
    .contact .connection .ratio-box .reciever {left: 54.565%; top: 53.784%; }
    .contact .connection .ratio-box .reciever img {left: -51.304%; top: -34.595%; width: 138.261%; }
    
}








.persons {display: flex; flex-flow: wrap; justify-content: center; perspective: 800px; margin: 0 auto; column-gap: 80px; }
.person {position: relative; flex: 0 1 100%; max-width: 293px; height: 545px; padding: 335px 40px 0 40px; border-radius: 11px; box-sizing: border-box; text-align: center; transform-origin: left center; transform-style: preserve-3d; box-sizing: border-box;  }
.person:nth-child(1) {background: #1b1d1e; background: radial-gradient(farthest-side, #313334, #1b1d1e); }
.person:nth-child(2) {background: #0db6a8; background: radial-gradient(farthest-side, #1dd1c4, #0db6a8); }
.person:nth-child(3) {background: #dce3e5; background: radial-gradient(farthest-side, #fff, #dce3e5); }

.person img {position: absolute; left: 50%; top: 57px; width: 73.3%; height: auto; border-radius: 50%; overflow: hidden; transform: translateX(-50%); }
.person, .person a {color: #fff; }
.person:nth-child(3), .person:nth-child(3) a {color: #12222c; }
.person h2 {padding-bottom: 10px; font-size: 1.31rem; font-weight: 700; }
.person b {display: block; padding-bottom: 8px; font-weight: 700; color: #ff710f; }
.person:nth-child(2) b {color: #12222c; }

.person a {display: block; padding-bottom: 8px; }

.person {opacity: 0; transform: translate3d(-100px, -50px, -100px) rotate3d(0,-1,0, 45deg); transition: .35s ease; }
.persons.vp .person {opacity: 1; transform: rotate3d(0,-1,0, 0); transition: .75s cubic-bezier(.11, .8, .25, 1); }

.person:nth-child(3) {transition-delay: 0s; }
.person:nth-child(2) {transition-delay: .15s; }
.person:nth-child(1) {transition-delay: .3s; }

.persons.vp .person:nth-child(1) {transition-delay: 0s; }
.persons.vp .person:nth-child(2) {transition-delay: .15s; }
.persons.vp .person:nth-child(3) {transition-delay: .3s; }

@media (max-width: 1000px){
/*    .persons {justify-content: center; } */
/*    .person {flex: 0 1 50%; margin: 20px; } */
}
@media (max-width: 760px){
    .persons {max-width: 545px; }
    .person {flex: 0 1 100%; max-width: 545px; height: auto; margin: 20px 0; padding: 13% 0 13% 50%; text-align: left; display: flex; flex-flow: column; justify-content: center; }
    .person img {left: 25%; top: 50%; width: 35%; transform: translate(-50%,-50%); }
}
@media (max-width: 460px){
    .persons {max-width: 293px; }
    .person {max-width: 293px; height: auto; padding: 100% 13% 20% 13%; text-align: center; display: block; }
    .person img {left: 50%; top: 0; margin-top: 13.35%; width: 73.3%; transform: translateX(-50%); }
}


#map iframe {width: 100%; height: 100vh; max-height: 1000px; border: 0; }

#mail-us .cols {display: flex; flex-flow: wrap; justify-content: space-between; align-items: center; }
#mail-us form {flex: 0 1 50%; }
#mail-us .contact-info:nth-child(2) {flex: 0 1 38%; }

body[dir="rtl"] #mail-us .contact-info .text-block h2 {text-align: right; }

#mail-us form button {margin: 0 0 0 0; }

#mail-us .text-block {margin-bottom: 35px; }
#mail-us .text-block h2 {margin-bottom: 15px; }

#mail-us .stripe-content ul li {margin: 17px 0; font-size: 1.2rem; }
#mail-us .stripe-content ul li.hl b {font-size: 1.5rem; font-weight: 700; }
#mail-us .stripe-content ul li.item a {display: block; padding-left: 40px; position: relative; color: #fff; text-decoration: none; }
#mail-us .stripe-content ul li.item a svg {position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: 1; }
body[dir="rtl"] #mail-us .stripe-content ul li.item a {padding-left: 0; padding-right: 40px; }
body[dir="rtl"] #mail-us .stripe-content ul li.item a svg {left: auto; right: 0; }
#mail-us .stripe-content ul li.item a svg:nth-child(2) {display: none; }

@media (hover: hover) and (pointer: fine) {
    #mail-us .stripe-content ul li.item a svg:nth-child(2) {display: block; transform: translateY(-100%); opacity: 0; }
    #mail-us .stripe-content ul li.item a:hover svg:nth-child(1) {transform: translateY(0); opacity: 0; }
    #mail-us .stripe-content ul li.item a:hover svg:nth-child(2) {transform: translateY(-50%); opacity: 1; }
    #mail-us .stripe-content ul li.item a svg {transition: .45s cubic-bezier(.38, 0, .15, 1); }
    #mail-us .stripe-content ul li.item a:hover svg {transition: .45s cubic-bezier(.3, 2, .35, 1); }
}

@media (max-width: 880px){
    #mail-us form {flex: 0 1 50%; }
    #mail-us .contact-info:nth-child(2) {flex: 0 1 43%; }
}
@media (max-width: 670px){
    #mail-us .cols, #mail-us .contact-info:nth-child(2) {flex-flow: column; }
    #mail-us form, #mail-us .contact-info:nth-child(2), #mail-us .text-block, #mail-us ul.list {flex: 0 1 90%; }
    #mail-us form {width: 90%; max-width: 400px; margin-bottom: 65px; }
    #mail-us .contact-info:nth-child(2) {width: 90%; max-width: 400px; margin-bottom: 30px; }
    #mail-us .stripe-content {justify-content: space-around; }
    #mail-us .stripe-content ul {display: flex; flex-flow: column; flex: 0 1 auto !important; }
    #mail-us .stripe-content ul li {flex-shrink: 1; }
    #mail-us .stripe-content ul li a {display: inline-block; }
/*    #mail-us .stripe-content ul {text-align: center; }*/
    #mail-us .stripe-content ul:nth-child(2) {margin-top: 40px; }
}





/*

    B L O G

*/
.blog header, .blog-detail header, .homepage #blog .text-block {z-index: 200; }
.homepage #blog .text-block {position: relative; }
#blog, .homepage #blog .articles {z-index: 100; }
.homepage #blog .articles {margin-top: 100px; }
.homepage #blog .text-block h1 {font-size: 3.3rem; padding-bottom: 0; }
.blog header h1, .blog-detail header h1, .homepage #blog .text-block h1 {position: relative; opacity: 0; transform: translateX(-565px) rotate(-180deg); animation: blog-hl-roll-in .7s both cubic-bezier(.07, .77, .15, 1) paused; }
.blog header.vp h1, .blog-detail header.vp h1, .homepage #blog.vp .text-block h1 {animation-play-state: running; }
.blog header h1 span, .blog-detail header h1 span, .homepage #blog .text-block h1 span {position: relative; z-index: 200; }
.blog header h1::before, .blog-detail header h1::before, .homepage #blog .text-block h1::before {content: ''; z-index: 100; display: block; position: absolute; width: 180px; height: 180px; border-radius: 50%; background: #ff710f; left: 50%; top: 50%; transform: translate(-50%,-50%); }

@media (max-width: 1140px){
    .blog header .stripe-content, .blog-detail header .stripe-content {padding-top: 15%; }
}
@media (max-width: 650px){
    .blog header .stripe-content, .blog-detail header .stripe-content {padding-top: 130px; }
}

#blog {overflow: visible; }
#blog .stripe-content {position: relative; }
#blog .stripe-content::before {content: ''; display: block; position: absolute; left: 50%; top: -100px; width: 4px; height: 0; border-radius: 50px; background: #fff; transition: 1s ease-in-out; transform: translateX(-50%); animation: timeline-draw-down .7s both ease-in-out .7s paused; }
.homepage #blog .stripe-content::before {top: 100px; animation: timeline-draw-down-homepage .7s both ease-in-out .7s paused; }
#blog.vp .stripe-content::before, .homepage #blog.vp .stripe-content::before {animation-play-state: running; }


@keyframes blog-hl-roll-in {
    0% {transform: translateX(-565px) rotate(-180deg); opacity: 0; }
    100% {transform: none; opacity: 1; }
}
@keyframes timeline-draw-down {
    0% {height: 0; }
    100% {height: calc(100% + 50px); }
}
@keyframes timeline-draw-down-homepage {
    0% {height: 0; }
    100% {height: calc(100% - 220px); }
}
@keyframes timeline-draw-down-side {
    0% {height: 0; }
    100% {height: calc(100% - 150px); }
}
@keyframes timeline-draw-down-side-homepage {
    0% {height: 0; }
    100% {height: calc(100% - 400px); }
}

@keyframes blog-article-slide-up-fade-in {
    0% {transform: translateY(100px); opacity: 0; }
    100% {transform: none; opacity: 1; }
}

#blog .articles {position: relative; height: 1000px; transition: height 1s ease-in-out; }
#blog .article {position: absolute; width: 50%; /*background: #faf; */padding: 0 0 65px 0; animation: blog-article-slide-up-fade-in .7s backwards cubic-bezier(.07, .69, .18, 1); transition: top .7s cubic-bezier(.07, .69, .18, 1); }
#blog .article.right {left: 50%; }

#blog .article:nth-child(2) {padding-top: 140px; }

#blog .article .box {position: relative; width: calc(100% - 65px); padding: 50px 40px; box-sizing: border-box; transition: transform .75s cubic-bezier(.32, .01, .13, 1); }
#blog .article:hover .box {transition: transform .25s cubic-bezier(.08, .65, .33, 1); }
#blog .article.left:hover .box {transform: translateX(15px); }
#blog .article.right:hover .box {transform: translateX(-15px); }
#blog .article::before {content: ''; display: block; position: absolute; top: 29px; width: 25px; height: 25px; background: #ff710f; border-radius: 50%; }
#blog .article.left:before {right: 0px; transform: translate(50%,-50%); }
#blog .article.right::before {left: 0px; transform: translate(-50%,-50%); }
#blog .article:nth-child(2)::before {top: 169px; }
#blog .article .box::after {content: ''; display: block; position: absolute; top: 0; width: 42px; height: 42px; }
#blog .article.left .box::after {right: 0; transform-origin: right top; transform: rotate(-45deg); background: #fff; }
#blog .article.right .box::after {left: 0; transform-origin: left top; transform: rotate(45deg); background: #12222c; }
#blog .article .box h2 {padding-bottom: 20px; font-size: 1.5rem; font-weight: 700; }
#blog .article.left .box {background: #fff; color: #12222c; margin-left: auto; margin-right: 65px; }
#blog .article.right .box {background: #12222c; color: #fff; margin-right: auto; margin-left: 65px; }
#blog .btn-box {text-align: right; font-weight: 700; padding-top: 40px; }
#blog .btn-box a {display: inline-block; position: relative; color: #12222c; padding-right: 40px; }
#blog .article.left .btn-box a {color: #12222c; }
#blog .article.right .btn-box a {color: #fff; }
#blog .article .btn-box a span {position: absolute; display: block; }
#blog .article .btn-box a span.arrow-box {width: 24px; height: 24px; right: 0; top: 50%; transform: translateY(-50%); /*background: silver; */}
#blog .article .btn-box a span.arrow-box span {width: 100%; height: 28%; left: 0; top: 50%; background: #ff710f; border-radius: 50px; transition: .55s cubic-bezier(.32, .01, .13, 1); }
#blog .article .btn-box a span.arrow-box span:first-child {transform: translate(-25%, -32%) rotate(45deg); transform-origin: right bottom; }
#blog .article .btn-box a span.arrow-box span:last-child {transform: translate(-25%, -68%) rotate(-45deg); transform-origin: right top; }
#blog .article .btn-box a:hover span.arrow-box span {transition: .25s cubic-bezier(.08, .65, .33, 1); }
#blog .article .btn-box a:hover span.arrow-box span:first-child {transform: translate(0, -32%) rotate(35deg); }
#blog .article .btn-box a:hover span.arrow-box span:last-child {transform: translate(0, -68%) rotate(-35deg); }




#blog-detail .article::before {content: ''; display: block; position: absolute; top: 29px; width: 25px; height: 25px; background: #ff710f; border-radius: 50%; }
#blog-detail .article::before {left: 0px; transform: translate(-50%,-50%); }
#blog-detail .article:last-child::before {display: none; }
#blog-detail .article .box::after {content: ''; display: block; position: absolute; left: 0; top: 0; width: 42px; height: 42px; transform-origin: left top; transform: rotate(45deg); background: #fff; }


#blog-detail .article .box h2 {padding: 40px 0 20px 0; font-size: 1.5rem; font-weight: 700; }
#blog-detail .article .box .publish-date {padding-bottom: 20px; font-weight: 700; color: #ff710f; }
#blog-detail .article .box p {line-height: 1.7; }

#blog-detail .article .stripe-image {width: 100%; height: auto; }
#blog-detail .article {position: relative; margin: 0 auto; padding-left: 65px; width: 100%; max-width: 75%; }
#blog-detail .article .box, #blog-detail .article .related-box {position: relative; background: white; padding: 10%; color: #12222c; }
#blog-detail .article .box>img {border-radius: 30px; overflow: hidden; }
#blog-detail .article .box a {color: #ff710f; }
#blog-detail .article .box a:hover {text-decoration: underline; }
#blog-detail .article .box a, #blog-detail .article .box b {font-weight: 700; }
#blog-detail .btn-box {text-align: left; font-weight: 700; padding-top: 40px; }
#blog-detail .btn-box a {display: inline-block; position: relative; color: #12222c; padding-left: 40px; }
#blog-detail .article .btn-box a {color: #12222c; }
#blog-detail .article .btn-box a span {position: absolute; display: block; }
#blog-detail .article .btn-box a span.arrow-box {width: 24px; height: 24px; left: 0; top: 50%; transform: translateY(-50%); /*background: silver; */}
#blog-detail .article .btn-box a span.arrow-box span {width: 100%; height: 28%; left: 0; top: 50%; background: #ff710f; border-radius: 50px; transition: .55s cubic-bezier(.32, .01, .13, 1); }
#blog-detail .article .btn-box a span.arrow-box span:first-child {transform: translate(25%, -32%) rotate(-45deg); transform-origin: left bottom; }
#blog-detail .article .btn-box a span.arrow-box span:last-child {transform: translate(25%, -68%) rotate(45deg); transform-origin: left top; }
#blog-detail .article .btn-box a:hover span.arrow-box span {transition: .25s cubic-bezier(.08, .65, .33, 1); }
#blog-detail .article .btn-box a:hover span.arrow-box span:first-child {transform: translate(0, -32%) rotate(-35deg); }
#blog-detail .article .btn-box a:hover span.arrow-box span:last-child {transform: translate(0, -68%) rotate(35deg); }


.homepage #blog .btn-rounded-box {text-align: center; }
.homepage #blog .btn-rounded {margin-top: 0; }

#blog-detail .article h1 {margin-top: 15%; color: #fff; }
#blog-detail .article .related-box {cursor: pointer; display: flex; flex-flow: wrap; justify-content: space-between; align-items: stretch; margin-top: 5%; padding: 5%; }
#blog-detail .article .related-box:hover {background: #12222c; color: #fff; transition: .35s ease-out; }
#blog-detail .article .related-box .image-box {position: relative; overflow: hidden; flex: 0 0 30%; min-height: 80px; border-radius: 10px; }
#blog-detail .article .related-box .image-box img {position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center; }
#blog-detail .article .related-box .text-box {flex: 0 0 65%; display: flex; flex-flow: wrap; justify-content: flex-start; align-content: center; }
#blog-detail .article .related-box .text-box>* {flex: 0 0 100%; }
#blog-detail .article .related-box .text-box .publish-date {margin-top: 10px; font-weight: 700; color: #ff710f; }

@media (max-width: 900px){
    #blog-detail .article {max-width: 85%; }
}
@media (max-width: 750px){
    #blog .articles {height: auto !important; }
    #blog .article {position: relative; left: 0 !important; top: 0 !important; width: 90%; max-width: 500px; margin-left: 10%; }
    #blog .article.left:hover .box {transform: translateX(-15px); }
    #blog .article:nth-child(2) {padding-top: 0; }
    #blog .article:nth-child(2)::before {top: 29px; }
    #blog .article.left .box {margin-right: auto; margin-left: 65px; }
    #blog .article.left::before {left: 0; right: auto; transform: translate(-50%,-50%); }
    #blog .article.left .box::after {left: 0; right: auto; transform-origin: left top; transform: rotate(45deg); }
    
    .blog #blog .stripe-content, .blog-detail #blog-detail .stripe-content {margin-top: 130px; padding-top: 0; }
    #blog .stripe-content::before {left: 10%; top: 31px; animation: timeline-draw-down-side .7s both ease-in-out .7s paused; }
    .homepage #blog .stripe-content::before {left: 10%; top: 255px; animation: timeline-draw-down-side-homepage .7s both ease-in-out .7s paused; }
    
    #blog-detail .article {max-width: none; }
    
}
@media (max-width: 560px){
    #blog-detail .article .related-box .text-box {flex: 0 0 60%; }
}
@media (max-width: 470px){
    #blog .article, #blog-detail .article {width: 95%; margin-left: 5%; }
    .blog #blog .stripe-content::before, .blog-detail #blog-detail .stripe-content::before, .homepage #blog .stripe-content::before {left: 5%; }
    
    #blog-detail .article .related-box>* {flex: 0 0 100% !important; }
    #blog-detail .article .related-box .image-box {min-height: 0; padding-bottom: 60%; }
    #blog-detail .article .related-box .text-box {margin-top: 7%; }
}

@media (max-width: 430px){
    #blog .article::before, #blog-detail .article::before {width: 17px; height: 17px; }
    #blog .article.left .box, #blog .article.right .box, #blog-detail .article .box {margin-left: 10%; }
    #blog .article .box, #blog-detail .article .box, #blog-detail .article .related-box {width: 90%; }
    #blog .article .box::after, #blog-detail .article .box::after {top: 14px; width: 20px; height: 20px; }
    #blog-detail .article {padding-left: 0; }
}

@media (pointer: coarse){
    #blog .article.left:hover .box, #blog-detail .article.left:hover .box {transform: none !important; }
}



section.image-stripe .fill {overflow: hidden; position: relative; height: 100vh; max-height: 46.88vw; transform: translateY(101%) rotate(-.1deg); transition: 1s cubic-bezier(.43, 0, .51, .99); }
section.image-stripe.above .fill {transform: none; transition: 1s cubic-bezier(.05, .74, 0, 1); }

img.image-stripe {position: absolute; display: block; left: 50%; top: 50%; transform: translate(-50%, -120%) scale(1.001); width: auto; height: 100%; transition: 1s cubic-bezier(.43, 0, .51, .99); }
section.image-stripe.above img.image-stripe {transform: translate(-50%, -50%) scale(1.001); transition: 1s cubic-bezier(.05, .74, 0, 1); }
img.image-stripe.imageStripePortrait {display: none; }

@media (max-aspect-ratio: 1/1){
    section.image-stripe .fill {width: 100%; height: 100vh; max-height: 169vw; }
    img.image-stripe {width: 100vw; height: auto; transform: translate(-50%, -80%) scale(1.001); }
    section.image-stripe.above img.image-stripe {transform: translate(-50%, -50%) scale(1.001); }
    img.image-stripe.imageStripeLandscape {display: none; }
    img.image-stripe.imageStripePortrait {display: block; }
}


/*section.image-stripe .fill {overflow: hidden; }
section.image-stripe .stripe {position: relative; height: 100vh; max-height: 46.88vw; }
section.image-stripe .stripe .stripe-slide-box {position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: translateY(-100%) rotate(-.1deg); transition: 1s cubic-bezier(.05, .74, 0, 1); overflow-y: hidden; }
section.image-stripe.above .stripe .stripe-slide-box {transform: none; }

img.image-stripe {position: absolute; display: block; left: 50%; top: 50%; transform: translate(-50%, 15%) scale(1.001); width: auto; height: 100%; transition: 1s cubic-bezier(.05, .74, 0, 1); opacity: 1; }
section.image-stripe.above img.image-stripe {transform: translate(-50%, -50%) scale(1.001); opacity: 1; }
img.image-stripe.imageStripePortrait {display: none; }

@media (max-aspect-ratio: 1/1){
    section.image-stripe .stripe {width: 100%; height: 100vh; max-height: 169vw; }
    img.image-stripe {width: 100vw; height: auto; }
    img.image-stripe.imageStripeLandscape {display: none; }
    img.image-stripe.imageStripePortrait {display: block; }
}*/



/*

    C L I E N T S

*/
/*#work-process {display: none !important; }*/
#clients-slide-box {position: relative; margin-top: 50px; }
#clients-slide-box>a {cursor: pointer; position: absolute; top: 50%; padding: 10px; /*background: silver;*/ transform: translateY(-50%); }
#clients-slide-box>a.slide-right {left: 0; }
#clients-slide-box>a.slide-left {right: 0; }
#clients-slide-box>a svg {position: relative; transition: .55s cubic-bezier(.32, .01, .13, 1); }
#clients-slide-box>a:hover svg {transition: .35s cubic-bezier(.15, 2, .38, 1); }
#clients-slide-box>a.slide-right:hover svg {transform: translateX(-15px) rotate(-.1deg); }
#clients-slide-box>a.slide-left:hover svg {transform: translateX(15px) rotate(-.1deg); }

#clients-slide-box .slide-outer-box {position: relative; width: 100%; height: 131px; overflow: hidden; }
#clients .fade-side {position: absolute; width: 60px; height: 100%; }
#clients .fade-side canvas {position: absolute; }
/*#clients .fade-left {background: linear-gradient(to right, #fff, #fff, #fff0); }*/
#clients .fade-right {right: 0; /*background: linear-gradient(to left, #fff, #fff, #fff, #fff0);*/ }
#clients .slide-box {position: absolute; min-width: 100%; height: 100%; padding: 0 60px; display: flex; flex-flow: row; align-items: center; justify-content: center; column-gap: 60px; }
#clients .slide-box a.client {position: relative; display: block; cursor: pointer; flex: 0 0 auto; display: flex; flex-flow: row; align-items: center; justify-content: center; }
a.client img {display: block; height: 31px; padding: 20px 0; }

#clients .slide-box {transition: .35s ease-out; }
#clients .slide-box.dragged {transition: none; }

@media (hover: hover) and (pointer: fine){
    a.client img {filter: grayscale(100); transition: .55s ease-in-out; }
    a.client:hover img {filter: none; transform: scale(1.1) rotate(-.1deg); transition: .35s cubic-bezier(.07, .79, .18, 1); }
}


/*

    F E A T U R E D

*/
.featured-cols {display: flex; flex-flow: wrap; justify-content: space-between; align-items: stretch; }
.featured-col {flex: 0 0 47%; display: flex; flex-flow: wrap; justify-content: center; align-content: center; }
.icon.online-comunication {width: 220px; height: 280px; }
.featured-col h1 {color: #1b1d1e; }
.featured-col .ipads {width: 80%; height: 280px; perspective: 400px; /*background: #0003; */position: relative; }
/* h/w: 1,4203655352480417754569190600522 */
.featured-col .ipads .ipad {opacity: 0; width: 35%; height: 0; padding-bottom: 49.713%; /*background: #fff3; */position: absolute; top: 50%; transform-style: preserve-3d; }
.featured-col .ipads .ipad .screen-content {position: absolute; left: 5.74%; top: 8.46%; width: 88.87%; height: 83.09%; overflow: hidden; background: #333; }
.featured-col .ipads .ipad .screen-content img {position: absolute; width: 100%; height: 100%; }
.featured-col .ipads .ipad>img {width: 100%; height: auto; }
.featured-col .ipads .ipad:nth-child(1) {z-index: 100; transform: translate3d(-170%,-50%,-120px) rotateY(-10deg); left: 17%; }
.featured-col .ipads .ipad:nth-child(2) {z-index: 1000; transform: translate3d(-50%,-50%,0); left: 50%; }
.featured-col .ipads .ipad:nth-child(3) {z-index: 100; transform: translate3d(70%,-50%,-120px) rotateY(10deg); left: 83%; }


.featured-col .btn-rounded {margin-left: 0; margin-right: 0; }

.flat.vp .ipad0.ipad1.ipad2.ipad0-img.ipad1-img.ipad2-img .ipad {opacity: 1; }
.flat.vp .ipad0.ipad1.ipad2.ipad0-img.ipad1-img.ipad2-img #ipad0 {transform: translate3d(-45%,-50%,-40px) rotateY(-30deg); }
.flat.vp .ipad0.ipad1.ipad2.ipad0-img.ipad1-img.ipad2-img #ipad2 {transform: translate3d(-55%,-50%,-40px) rotateY(30deg); }
.flat.vp .ipad0.ipad1.ipad2.ipad0-img.ipad1-img.ipad2-img #ipad1 {animation: ipad-middle .9s both cubic-bezier(.52, 0, .48, 1); }

.flat.vp .ipad0.ipad1.ipad2 #ipad0, .flat.vp .ipad0.ipad1.ipad2 #ipad2 {transition: .15s linear .4s; }

@keyframes ipad-middle {
    0% {opacity: 0; transform: translate3d(-50%,-50%,-150px); animation-timing-function: cubic-bezier(.14, .83, .58, 1); }
    45% {opacity: 1; transform: translate3d(-50%,-50%,0); }
    50% {transform: translate3d(-50%,-50%,0) scale(1); }
    65% {transform: translate3d(-50%,-52%,0) scale(.95,1.05); }
    80% {transform: translate3d(-50%,-58%,0) scale(1.02,.98); }
    95% {transform: translate3d(-50%,-50%,0); }
    100% {transform: translate3d(-50%,-50%,0); }
}

@media (max-width: 700px){
    .featured-col {flex: 1 0 100%; }
    .featured-col:nth-child(1) {margin-bottom: 50px; }
    .featured-col .ipads {width: 80%; }
}

/*

.img-stripe {padding: 0 0 170% 0; position: relative; }
.img-stripe {padding: 0 0 78% 0; position: relative; perspective: 1000px; }
.img-stripe img {position: absolute; display: block; left: 50%; height: 100%; width: auto; transform: translateX(-50%) translateZ(500px); transform-style: preserve-3d; }
*/




#yt-testing {display: none; }
.myip #yt-testing {display: block; }

#help-switches {display: none; }
.myip #help-switches {display: block; }

#font-name {z-index: 100000; position: fixed; display: flex; flex-flow: wrap; justify-content: center; left: 50%; bottom: 0; transform: translateX(-50%); padding: 10px 20px; border-top-left-radius: 20px; border-top-right-radius: 20px; background: #111; gap: 15px; }
#font-name a {flex: 0 0 auto; color: #aaa; }
#font-name a.viewed {font-weight: 700; color: #fff; }