/* Start:/local/templates/rosveb/css/animation/animate.min.css?178066670352789*/ @charset "UTF-8"; /*! * animate.css -http://daneden.me/animate * Version - 3.5.1 * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 2016 Daniel Eden */ .animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}.animated.bounceIn,.animated.bounceOut,.animated.flipOutX,.animated.flipOutY{-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}40%,43%,70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06)}70%{-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}40%,43%,70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06)}70%{-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}.headShake{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-name:headShake;animation-name:headShake}@-webkit-keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}.swing{-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:none;transform:none}}@keyframes wobble{0%{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:none;transform:none}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes jello{0%,11.1%,to{-webkit-transform:none;transform:none}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}@keyframes jello{0%,11.1%,to{-webkit-transform:none;transform:none}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}.jello{-webkit-animation-name:jello;animation-name:jello;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:none;transform:none}}@keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:none;transform:none}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:none;transform:none}}@keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:none;transform:none}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:none;transform:none}}@keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:none;transform:none}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}.bounceOut{-webkit-animation-name:bounceOut;animation-name:bounceOut}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotateY(-1turn);transform:perspective(400px) rotateY(-1turn)}0%,40%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(-190deg);transform:perspective(400px) translateZ(150px) rotateY(-190deg)}50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(-170deg);transform:perspective(400px) translateZ(150px) rotateY(-170deg)}50%,80%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95)}to{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) rotateY(-1turn);transform:perspective(400px) rotateY(-1turn)}0%,40%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(-190deg);transform:perspective(400px) translateZ(150px) rotateY(-190deg)}50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(-170deg);transform:perspective(400px) translateZ(150px) rotateY(-170deg)}50%,80%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95)}to{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}0%,40%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg)}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}0%,40%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg)}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}0%,40%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg)}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}0%,40%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg)}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}.flipOutX{-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}.flipOutY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY}@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg)}60%,80%{opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:none;transform:none;opacity:1}}@keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg)}60%,80%{opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:none;transform:none;opacity:1}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.lightSpeedOut{-webkit-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{transform-origin:center;-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}0%,to{-webkit-transform-origin:center}to{transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateIn{0%{transform-origin:center;-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}0%,to{-webkit-transform-origin:center}to{transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInDownLeft{0%{transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownLeft{0%{transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInDownRight{0%{transform-origin:right bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownRight{0%{transform-origin:right bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateInUpLeft{0%{transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpLeft{0%{transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInUpRight{0%{transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpRight{0%{transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateOut{0%{transform-origin:center;opacity:1}0%,to{-webkit-transform-origin:center}to{transform-origin:center;-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}@keyframes rotateOut{0%{transform-origin:center;opacity:1}0%,to{-webkit-transform-origin:center}to{transform-origin:center;-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutDownLeft{0%{transform-origin:left bottom;opacity:1}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}@keyframes rotateOutDownLeft{0%{transform-origin:left bottom;opacity:1}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutDownRight{0%{transform-origin:right bottom;opacity:1}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutDownRight{0%{transform-origin:right bottom;opacity:1}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes rotateOutUpLeft{0%{transform-origin:left bottom;opacity:1}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutUpLeft{0%{transform-origin:left bottom;opacity:1}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutUpRight{0%{transform-origin:right bottom;opacity:1}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}@keyframes rotateOutUpRight{0%{transform-origin:right bottom;opacity:1}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes hinge{0%{transform-origin:top left}0%,20%,60%{-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);transform-origin:top left}40%,80%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}@keyframes hinge{0%{transform-origin:top left}0%,20%,60%{-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);transform-origin:top left}40%,80%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}.hinge{-webkit-animation-name:hinge;animation-name:hinge}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:none;transform:none}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}@keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%,to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%,to{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp}@-webkit-keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp} /* End */ /* Start:/local/templates/rosveb/css/share.min.css?17806667041896*/ .share{position:relative;}.bottom-links-block .share{float:right;margin:0 0 0 20px;cursor:pointer;}.share .ya-share2{position:absolute;top:28px;z-index:6;background:var(--card_bg_black);padding:16px;box-shadow:0 5px 20px rgba(0,0,0,.1);border-radius:var(--theme-outer-border-radius);overflow:hidden;}.share.bottom .ya-share2{top:auto;bottom:28px;right:0;}.share .shares-block .ya-share2{transition:opacity .2s ease,visibility .2s ease;transition-delay:.2s;opacity:0;visibility:hidden;}.share .shares-block:focus-visible .ya-share2,.share .shares-block:focus-within .ya-share2,.share .shares-block:hover .ya-share2{opacity:1;visibility:visible;}.ya-share2__list{display:flex!important;flex-direction:column;gap:16px;}.ya-share2__item{margin:0!important;transition:opacity .3s ease-in-out;}.ya-share2__item:hover{opacity:.8!important;}.ya-share2__item:before{content:none!important;}.ya-share2__badge{background-color:transparent!important;}.ya-share2__icon{--icon-size:24px;--icon-position:1;--sprite-step:-32px;background-image:url(/local/templates/rosveb/css/../images/svg/social.svg)!important;background-position:calc(var(--sprite-step) * var(--icon-position)) 0;background-repeat:no-repeat;background-size:auto!important;height:var(--icon-size)!important;width:var(--icon-size)!important;}.ya-share2__item_service_vkontakte .ya-share2__icon{--icon-position:4;}.ya-share2__item_service_facebook .ya-share2__icon{--icon-position:17;}.ya-share2__item_service_twitter .ya-share2__icon{--icon-position:18;}.ya-share2__item_service_skype .ya-share2__icon{--icon-position:27;}.ya-share2__item_service_telegram .ya-share2__icon{--icon-position:2;}.ya-share2__item_service_whatsapp .ya-share2__icon{--icon-position:0;}.ya-share2__item_service_viber .ya-share2__icon{--icon-position:1;}.ya-share2__item_service_odnoklassniki .ya-share2__icon{--icon-position:6;}.ya-share2__item_service_moimir .ya-share2__icon{--icon-position:15;} /* End */ /* Start:/local/templates/rosveb/css/notes-page.css?178066670428972*/ /* ====================================================================== DiParfum — Note detail page Design tokens + styling. HTML structure & classes are kept intact for the Bitrix port; only visual layer (palette, type, spacing, motion). ====================================================================== */ :root{ /* brand palette — sampled from the live site (purple primary, magenta accent) */ --purple: #7c2a8f; --purple-600: #6a2079; --purple-700: #571762; --purple-100: #efe1f4; --purple-050: #f7f0fa; --magenta: #cf2682; --magenta-050: #fdf1f7; --plum-deep: #2e0f2d; --ink: #222228; /* headings — Aspro theme value */ --text: #555558; /* body — Aspro theme value */ --muted: #8b8190; /* secondary */ --faint: #aaa1b1; /* tertiary */ --line: #ece6ef; /* hairlines */ --line-2: #f3eef6; --bg: #ffffff; --bg-page: #faf6fb; --footer-bg: #1c171f; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --shadow-card: 0 2px 10px rgba(46,15,45,.05), 0 1px 2px rgba(46,15,45,.04); --shadow-hover: 0 14px 34px rgba(86,23,98,.16), 0 4px 10px rgba(86,23,98,.08); --maxw: 1200px; /* Inherit site fonts (Aspro theme sets --theme-font-family). Fall back to system stack. */ --sans: var(--theme-font-family), -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; --serif: Georgia, "Times New Roman", serif; } .note-page *{ box-sizing:border-box; } .note-page img{ max-width:100%; } /* `.wrap` теперь идёт во всю ширину внешнего Aspro-контейнера (он сам ограничен темой) */ .note-page .wrap{ max-width:none; margin:0; padding:0; } /* ==================================================================== PAGE SHELL ==================================================================== */ .note-page{ padding:28px 0 64px; } .note-detail{ background:var(--bg); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-card); border:1px solid var(--line); } /* ---- 1. Breadcrumbs ---- */ .breadcrumbs{ padding:16px 36px; font-size:13px; color:var(--muted); display:flex; align-items:center; flex-wrap:wrap; gap:2px; } .breadcrumbs a{ color:var(--muted); text-decoration:none; transition:color .15s; } .breadcrumbs a:hover{ color:var(--purple); } .breadcrumbs__sep{ margin:0 9px; color:var(--faint); } .breadcrumbs [aria-current]{ color:var(--ink); font-weight:600; } /* ---- 2. Hero ---- */ .note-hero{ position:relative; background-color:var(--plum-deep); background-image:linear-gradient(135deg,#4a1644,#2a0c28); background-size:cover; background-position:center; color:#fff; padding:56px 48px; min-height:380px; display:flex; align-items:flex-end; } /* when the inline style sets a real photo, it layers on top of the fallback */ .note-hero__overlay{ position:absolute; inset:0; background: /* горизонтальный: левый край сильно затемнён для контраста надписей */ linear-gradient(90deg, rgba(20,6,20,.88) 0%, rgba(20,6,20,.70) 30%, rgba(20,6,20,.30) 60%, rgba(20,6,20,0) 100%), /* лёгкое выравнивание яркости сверху-вниз */ linear-gradient(0deg, rgba(20,6,20,.35) 0%, rgba(20,6,20,.05) 70%); } .note-hero__content{ position:relative; display:flex; gap:34px; align-items:flex-end; width:100%; } .note-hero__icon-wrap{ width:120px; height:120px; flex-shrink:0; background:#fff; border-radius:9px; /* было var(--r-lg) = 18px → /2 */ padding:7px; /* было 14 → /2 */ display:grid; place-items:center; box-shadow:0 12px 30px rgba(0,0,0,.32); } .note-hero__icon{ width:100%; height:100%; object-fit:contain; position:relative; z-index:1; border-radius:9px; /* тот же радиус что у белой плашки */ } /* subtle droplet placeholder behind the icon (shows only if the icon image is missing) */ .note-hero__icon-wrap::after{ content:""; position:absolute; width:44px; height:56px; z-index:0; border-radius:50% 50% 50% 50%/62% 62% 38% 38%; background:linear-gradient(160deg,#e9d6f0,#d9bfe6); } .note-hero__titles{ padding-bottom:4px; } .note-hero h1.note-hero__name-ru, .note-hero .note-hero__name-ru{ font-size:48px; line-height:1.1; margin:0; font-weight:600; letter-spacing:-.4px; color:#fff; text-shadow:0 2px 24px rgba(0,0,0,.35); } .note-hero .note-hero__name-en{ font-size:18px; opacity:.85; margin:6px 0 0; font-weight:400; letter-spacing:.3px; color:#fff; } .note-hero .note-hero__name-lat{ font-size:14px; opacity:.7; margin:3px 0 0; font-style:italic; color:#fff; } .note-hero .note-hero__group, .note-hero .note-hero__count{ font-size:15px; line-height:24px; margin:16px 0 0; opacity:.95; color:#fff; } .note-hero__group{ display:inline-flex; align-items:center; gap:8px; } .note-hero__group a, .note-hero__group a:link, .note-hero__group a:visited{ color:#fff !important; /* перебиваем Aspro a:hover/a {color} */ text-decoration:none; font-weight:600; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); padding:5px 14px; border-radius:999px; backdrop-filter:blur(4px); transition:background .15s, border-color .15s; } .note-hero__group a:hover, .note-hero__group a:focus{ color:#fff !important; background:rgba(255,255,255,.32); border-color:rgba(255,255,255,.45); } .note-hero__count strong{ font-weight:700; } /* ---- 3. Odor profile — white card с иконкой ноты слева ---- */ .note-odor{ position:relative; margin:24px 48px 8px; padding:22px 26px; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:inset 0 0 0 1px rgb(223,223,241); display:flex; align-items:flex-start; gap:22px; } .note-odor__icon-wrap{ flex-shrink:0; width:96px; height:96px; background:#fff; border:1px solid var(--line); border-radius:9px; padding:6px; display:grid; place-items:center; box-shadow:inset 0 0 0 1px rgb(223,223,241); } .note-odor__icon{ width:100%; height:100%; object-fit:contain; border-radius:6px; } .note-odor__body{ flex:1; min-width:0; } .note-odor__title{ font-size:12px; text-transform:uppercase; letter-spacing:2px; color:var(--muted); font-weight:700; margin:0 0 10px; line-height:1.2; } .note-odor__text{ margin:0; max-width:62ch; font-family:inherit; font-style:normal; font-weight:500; font-size:17px; line-height:26px; color:var(--ink); text-wrap:pretty; } /* ---- 4. Description ---- */ .note-description{ padding:38px 48px 8px; } .note-description__title{ font-size:13px; text-transform:uppercase; letter-spacing:2px; color:var(--magenta); font-weight:700; margin:0 0 18px; display:flex; align-items:center; gap:12px; } .note-description__title::after{ content:""; flex:1; height:1px; background:var(--line); } .note-description__body{ max-width:none; } .note-description__body p{ margin:0 0 16px; font-size:16px; color:var(--text); line-height:24px; text-wrap:pretty; font-weight:400; } /* Sort-pill hover — как на странице поиска (catalog_list_search.php) */ .note-products .search-sort-btn:hover{ background:#e0e0e0 !important; color:#333 !important; } .note-products .search-sort-btn.active:hover{ background:#600b81 !important; color:#fff !important; } /* Ссылки в описании ноты — в стиле текстов на /brands/ и /perfumers/ */ .note-description__body a, .note-description__body a:link, .note-description__body a:visited{ color:#610c82; text-decoration:underline; text-decoration-color:rgba(34,34,40,.16); text-decoration-thickness:1px; text-underline-offset:2px; font-weight:400; background:none; transition:color .15s, text-decoration-color .15s; } .note-description__body a:hover{ color:#610c82; text-decoration-color:#610c82; } /* ---- 5. Other names ---- */ .note-othernames{ padding:8px 48px 36px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; } .note-othernames__title{ font-size:12px; text-transform:uppercase; letter-spacing:1.4px; color:var(--muted); margin:0; font-weight:700; } .note-othernames p{ margin:0; } .note-othernames p{ display:inline-flex; gap:8px; flex-wrap:wrap; } .note-othernames p{ color:var(--ink); } /* shared section frame for data blocks */ .note-layer, .note-variants, .note-perfumers, .note-products, .note-alt-icons{ padding:40px 48px; border-top:1px solid var(--line); } /* Two columns: левый стек (Позиция в пирамиде + Другие названия) | Парфюмеры */ .note-row-two{ display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); } .note-row-two > .note-row-two__col > section, .note-row-two > section{ border-top:0; } .note-row-two > .note-row-two__col + section, .note-row-two > section + section{ border-left:1px solid var(--line); } /* Внутри левой колонки секции стэком, разделитель тонкой линией */ .note-row-two__col > section + section{ border-top:1px solid var(--line); } .note-row-two .note-perfumers{ padding:40px 48px; } /* Парфюмеры внутри note-row-two — 3 колонки (2 ряда по 3) */ .note-row-two .perfumer-cards--3col, .perfumer-cards--3col{ grid-template-columns:repeat(3, 1fr) !important; gap:14px; } @media (max-width:767px){ .note-row-two{ grid-template-columns:1fr; } .note-row-two > .note-row-two__col + section, .note-row-two > section + section{ border-left:0; border-top:1px solid var(--line); } .note-row-two .note-perfumers{ padding:24px 18px; } .perfumer-cards--3col{ grid-template-columns:repeat(2, 1fr) !important; } } .note-layer__title, .note-variants__title, .note-perfumers__title, .note-products__title, .note-alt-icons__title{ font-size:20px; font-weight:400; color:var(--ink); margin:0 0 6px; letter-spacing:normal; line-height:28px; } .note-layer__lead, .note-variants__lead, .note-perfumers__lead, .note-products__count{ font-size:16px; color:var(--text); margin:0 0 22px; line-height:24px; } .note-layer__lead strong, .note-variants__lead strong{ color:var(--text); font-weight:700; } /* ---- 6. Layer distribution ---- */ .layer-bars{ display:flex; flex-direction:column; gap:14px; max-width:760px; } .layer-bar__row{ display:grid; grid-template-columns:150px 1fr 64px; gap:18px; align-items:center; font-size:14.5px; } .layer-bar__label{ color:var(--ink); font-weight:600; } .layer-bar__track{ background:var(--line-2); border-radius:999px; overflow:hidden; height:26px; position:relative; box-shadow:inset 0 1px 2px rgba(46,15,45,.05); } .layer-bar__fill{ height:100%; display:flex; align-items:center; justify-content:flex-end; padding-right:11px; border-radius:999px; background:var(--purple); min-width:30px; } /* brand-coded layers via inline-color attribute selectors (overrides draft colors) */ .layer-bar__fill[style*="fbbf24"]{ background:linear-gradient(90deg,#9b34bd,#7c2a8f); } /* Верхние */ .layer-bar__fill[style*="fb7185"]{ background:linear-gradient(90deg,#e0479a,#cf2682); } /* Средние */ .layer-bar__fill[style*="a78bfa"]{ background:linear-gradient(90deg,#7b4bc0,#5a2a86); } /* Базовые */ .layer-bar__fill[style*="94a3b8"]{ background:linear-gradient(90deg,#cabdd4,#b3a5c0); } /* Без уровней */ .layer-bar__pct{ color:#fff; font-size:12px; font-weight:800; text-shadow:0 1px 2px rgba(0,0,0,.22); } .layer-bar__count{ color:var(--muted); font-size:13.5px; text-align:right; font-variant-numeric:tabular-nums; } @media (prefers-reduced-motion: no-preference){ .layer-bar__fill{ animation:layerGrow 1.1s cubic-bezier(.22,.61,.36,1) both; } @keyframes layerGrow{ from{ width:0 !important; } } } /* ---- 7. Variants — нon-clickable list of aliases ---- */ .variants-list{ display:flex; flex-wrap:wrap; gap:8px; list-style:none !important; padding:0 !important; margin:0; } .variants-list .variants-list__item{ list-style:none !important; padding-left:0 !important; } .variants-list .variants-list__item::before, .variants-list .variants-list__item::marker{ content:none !important; display:none !important; } .variant-chip{ display:inline-flex; align-items:center; background:var(--purple-050); color:var(--purple-700); border-radius:999px; padding:6px 14px; font-size:13.5px; font-weight:500; white-space:nowrap; cursor:default; } /* ---- 8. Top perfumers ---- */ .perfumer-cards{ display:grid; gap:18px; grid-template-columns:repeat(5, 1fr); } .perfumer-card{ display:block; background:#fff; border:1px solid #eee; border-radius:12px; padding:24px 16px; text-align:center; text-decoration:none; color:inherit; transition:box-shadow .2s, border-color .2s; } /* Hover как у карточек парфюмов (catalog-block__item) */ .perfumer-card:hover{ box-shadow:0 5px 30px rgba(34,34,40,.08); border-color:#ddd; } .perfumer-card__avatar{ width:84px; height:84px; border-radius:50%; overflow:hidden; margin:0 auto 14px; background:radial-gradient(circle at 38% 32%, #f0e0f6, #d9c2e6 70%, #c8aedd); display:grid; place-items:center; color:#fff; transition:transform .2s; position:relative; } .perfumer-card__avatar::after{ /* subtle silhouette placeholder when no photo */ content:""; position:absolute; bottom:0; width:62%; height:46%; background:rgba(255,255,255,.55); border-radius:50% 50% 0 0; } .perfumer-card__avatar img{ width:100%; height:100%; object-fit:cover; position:relative; z-index:1; } .perfumer-card__name{ font-size:15px; font-weight:500; color:var(--ink); margin-bottom:4px; line-height:20px; } .perfumer-card__count{ font-size:12.5px; color:var(--muted); } /* ---- 9. Alt icons (доп. изображения ноты) ---- */ .note-alt-icons__lead{ font-size:14.5px; color:var(--muted); margin:0 0 26px; } .note-alt-icons__row{ display:flex; gap:16px; flex-wrap:wrap; } .note-alt-icons__item{ width:96px; height:96px; flex-shrink:0; position:relative; border:1px solid var(--line); border-radius:var(--r-md); background:linear-gradient(150deg,#ffffff,#faf4fc); display:grid; place-items:center; overflow:hidden; transition:transform .2s, box-shadow .2s, border-color .2s; } a.note-alt-icons__item{ cursor:pointer; } a.note-alt-icons__item:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover); border-color:transparent; } .note-alt-icons__item::after{ /* droplet placeholder if the image is missing */ content:""; position:absolute; z-index:0; width:34px; height:44px; border-radius:50% 50% 50% 50%/62% 62% 38% 38%; background:linear-gradient(160deg,#e9d6f0,#d9bfe6); } .note-alt-icons__img{ position:relative; z-index:1; width:74px; height:74px; object-fit:contain; } /* ---- 11. Products grid ---- */ .note-products__head{ margin-bottom:26px; } .note-products__grid{ display:grid; gap:22px; grid-template-columns:repeat(4, 1fr); } .product-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:14px; transition:transform .2s, box-shadow .2s, border-color .2s; } .product-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-hover); border-color:transparent; } .product-card__link{ text-decoration:none; color:inherit; display:flex; flex-direction:column; } .product-card__img-wrap{ aspect-ratio:1; border-radius:var(--r-md); margin-bottom:14px; overflow:hidden; position:relative; display:flex; align-items:center; justify-content:center; background: repeating-linear-gradient(135deg, #faf5fc 0 10px, #f3ebf7 10px 20px); } .product-card__img-wrap::after{ content:"флакон"; position:absolute; font-size:11px; letter-spacing:1px; text-transform:uppercase; color:#c3b4ce; font-family:ui-monospace,"SF Mono",Menlo,monospace; } .product-card__img{ position:relative; z-index:1; width:100%; height:100%; object-fit:contain; } .product-card__img[src=""]{ display:none; } .product-card:hover .product-card__img{ transform:scale(1.04); transition:transform .25s; } .product-card__title{ font-size:14.5px; font-weight:700; color:var(--ink); margin:0 0 5px; line-height:1.38; min-height:2.76em; } .product-card__brand{ font-size:12.5px; color:var(--muted); margin:0; } .product-card__voted{ font-size:12px; color:var(--magenta); margin:10px 0 0; font-weight:600; display:flex; align-items:center; gap:5px; } .product-card__voted svg{ flex-shrink:0; } .note-products__pagination{ margin-top:38px; text-align:center; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:50px; padding:0 34px; border-radius:var(--r-md); border:1.5px solid var(--purple); background:#fff; color:var(--purple); font-family:inherit; font-size:15px; font-weight:700; cursor:pointer; transition:background .18s, color .18s, box-shadow .18s, transform .12s; } .btn:hover{ background:var(--purple); color:#fff; box-shadow:0 10px 22px rgba(124,42,143,.26); } .btn:active{ transform:translateY(1px); } .note-products__shown{ font-size:13px; color:var(--muted); margin:14px 0 0; } /* (Удалены глобальные правила .footer / .demo-divider от draft-CSS preview — они конфликтовали с реальным футером сайта от Aspro.) */ /* ==================================================================== RESPONSIVE ==================================================================== */ @media (max-width:1023px){ .wrap{ padding:0 24px; } .perfumer-cards{ grid-template-columns:repeat(3,1fr); } } @media (max-width:767px){ .wrap{ padding:0 16px; } .note-detail{ border-radius:var(--r-lg); } /* Hero — текст по левому краю, иконка вынесена в odor-блок */ .note-hero{ padding:22px 18px 24px; min-height:200px; } .note-hero__content{ display:block; } .note-hero__titles{ padding-bottom:0; min-width:0; text-align:left; } .note-hero h1.note-hero__name-ru, .note-hero .note-hero__name-ru{ font-size:30px; line-height:1.15; letter-spacing:-.3px; } .note-hero .note-hero__name-en{ font-size:15px; margin-top:4px; } .note-hero .note-hero__name-lat{ font-size:12.5px; } .note-hero .note-hero__group, .note-hero .note-hero__count{ font-size:13px; margin-top:12px; } .note-hero__group a{ padding:4px 10px; font-size:12px; } /* Odor profile */ .note-odor{ margin:16px 18px 4px; padding:14px 16px; border-radius:14px; gap:14px; } .note-odor__icon-wrap{ width:72px; height:72px; padding:5px; } .note-odor__title{ font-size:11px; letter-spacing:1.5px; margin-bottom:6px; } .note-odor__text{ font-size:15px; line-height:22px; } /* Description */ .note-description{ padding:22px 18px 4px; } .note-description__body p{ font-size:15px; line-height:1.65; margin-bottom:14px; } .note-othernames{ padding:4px 18px 22px; gap:10px; } /* Section paddings and titles */ .note-layer, .note-variants, .note-perfumers, .note-products, .note-alt-icons{ padding:24px 18px; } .note-layer__title, .note-variants__title, .note-perfumers__title, .note-products__title{ font-size:17px; line-height:24px; font-weight:400; } .note-layer__lead, .note-variants__lead, .note-perfumers__lead{ font-size:13.5px; } /* Layer bars: компактнее */ .layer-bar__row{ grid-template-columns:90px 1fr 50px; gap:10px; align-items:center; } .layer-bar__track{ height:18px; } .layer-bar__label{ font-size:12.5px; } .layer-bar__pct, .layer-bar__count{ font-size:12.5px; } /* Variants — список переносится на новую строку, без горизонтального скролла */ .variants-list{ flex-wrap:wrap !important; overflow:visible !important; margin:0 !important; padding:0 !important; gap:8px; } .variant-chip{ flex-shrink:1; } /* Perfumers — 2 в ряд, поменьше */ .perfumer-cards{ grid-template-columns:repeat(2,1fr); gap:10px; } .perfumer-card{ padding:16px 10px; } .perfumer-card__avatar{ width:56px; height:56px; } .perfumer-card__name{ font-size:13px; } .perfumer-card__count{ font-size:11px; } /* Products grid — переопределяем Aspro fix-width 250 на адаптив */ .note-products .grid-list{ grid-template-columns:repeat(2,1fr) !important; width:100% !important; gap:10px !important; } .note-products .catalog-block__item{ padding:10px !important; border-radius:10px !important; } .note-products .catalog-block__pic img{ max-width:100% !important; } .note-products .catalog-block__title-link{ font-size:13px !important; } .note-products .price_value{ font-size:15px !important; } /* Pagination — компактнее */ .note-products + div [style*="min-width: 40px"]{ min-width:34px !important; height:34px !important; padding:6px 8px !important; font-size:13px !important; } /* Карточка с заголовком блока — head убираем грид-разделители */ .note-products__head{ margin-bottom:12px; } .note-products__count{ font-size:12.5px; line-height:1.5; } } @media (max-width:374px){ .note-hero h1.note-hero__name-ru, .note-hero .note-hero__name-ru{ font-size:26px; } .note-products .grid-list{ grid-template-columns:1fr !important; } } @media (prefers-reduced-motion: reduce){ .note-page *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } } /* =================================================================== NOTES CATALOG — /notes/ (notes_catalog.php) =================================================================== */ .note-page--catalog .catalog-hero{ padding:36px 48px 24px; border-bottom:1px solid var(--line); } .note-page--catalog .catalog-hero__title{ font-size:36px; font-weight:400; color:var(--ink); margin:0 0 10px; line-height:44px; } .note-page--catalog .catalog-hero__lead, .note-page--catalog .catalog-hero__intro{ color:var(--text); font-size:16px; line-height:24px; margin:0; max-width:74ch; font-weight:400; } .note-page--catalog .catalog-hero__lead strong{ color:var(--ink); font-weight:600; } /* Статистика под сеткой групп */ .note-page--catalog .catalog-stats{ padding:18px 48px 28px; border-top:1px solid var(--line); } .note-page--catalog .catalog-stats__line{ color:var(--muted); font-size:14px; line-height:22px; margin:0; text-align:center; } .note-page--catalog .catalog-stats__line strong{ color:var(--ink); font-weight:600; } @media (max-width:767px){ .note-page--catalog .catalog-stats{ padding:14px 18px 22px; } .note-page--catalog .catalog-stats__line{ font-size:13px; line-height:20px; } } .note-page--catalog .groups-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; padding:32px 48px 48px; } .note-page--catalog .group-card{ display:flex; flex-direction:column; gap:14px; padding:0 0 18px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); text-decoration:none; color:inherit; overflow:hidden; transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease; } .note-page--catalog .group-card > .group-card__head, .note-page--catalog .group-card > .group-card__notes, .note-page--catalog .group-card > .group-card__more{ padding-left:22px; padding-right:22px; } .note-page--catalog .group-card:hover{ box-shadow:0 12px 30px rgba(86,23,98,.12); transform:translateY(-2px); border-color:rgba(124,42,143,.3); } .note-page--catalog .group-card__cover{ width:100%; aspect-ratio:16/9; background:linear-gradient(135deg,#4a1644,#2a0c28); /* fallback gradient */ overflow:hidden; position:relative; } .note-page--catalog .group-card__cover img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; } .note-page--catalog .group-card:hover .group-card__cover img{ transform:scale(1.04); } .note-page--catalog .group-card__cover[data-no-cover]::after{ /* мягкий узор для пустого fallback */ content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 40%, rgba(207,38,130,.22), transparent 60%); } .note-page--catalog .group-card__head{ margin-top:6px; } .note-page--catalog .group-card__head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; } .note-page--catalog .group-card__title{ font-size:18px; font-weight:500; color:var(--ink); margin:0; line-height:24px; } .note-page--catalog .group-card__count{ font-size:13px; font-weight:700; background:var(--purple-050); color:var(--purple-700); padding:3px 10px; border-radius:999px; } .note-page--catalog .group-card__notes{ display:flex; flex-wrap:wrap; gap:6px 8px; } .note-page--catalog .group-card__note{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text); } .note-page--catalog .group-card__note img{ width:24px; height:24px; object-fit:contain; border-radius:6px; } .note-page--catalog .group-card__more{ margin:auto 0 0; display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--purple); } .note-page--catalog .group-card__more-icon{ display:inline-block; flex-shrink:0; transition:transform .2s ease; } .note-page--catalog .group-card:hover .group-card__more-icon{ transform:translateX(3px); } /* =================================================================== NOTES GROUP — /notes/{group}/ (notes_group.php) =================================================================== */ /* hero страницы группы — наследует .note-hero, kicker сверху */ .note-page--group .note-hero{ padding:48px 48px 40px; min-height:280px; } .note-page--group .note-hero__content{ display:block; align-items:flex-end; } .note-page--group .note-hero__kicker{ font-size:12px; letter-spacing:2px; text-transform:uppercase; color:#fff; font-weight:700; opacity:.85; margin:0 0 10px; } .note-page--group .note-hero .note-hero__name-ru{ display:block; color:#fff; margin:0; font-size:44px; font-weight:600; line-height:1.1; letter-spacing:-.4px; text-shadow:0 2px 24px rgba(0,0,0,.35); } .note-page--group .note-hero .note-hero__count{ font-size:15px; line-height:24px; margin-top:14px; opacity:.95; color:#fff; } .note-page--group .note-hero .note-hero__count strong{ font-weight:700; } .note-page--group .notes-grid-section{ padding:24px 48px 48px; } .note-page--group .notes-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; } .note-page--group .note-tile{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:18px 12px 16px; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); text-decoration:none; color:inherit; transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease; text-align:center; } .note-page--group .note-tile:hover{ box-shadow:0 8px 24px rgba(86,23,98,.12); transform:translateY(-2px); border-color:rgba(124,42,143,.3); } /* Иконка ноты на странице группы — оформлена как в odor-карточке детали */ .note-page--group .note-tile__icon-wrap{ width:96px; height:96px; background:#fff; border:1px solid var(--line); border-radius:9px; padding:6px; box-shadow:inset 0 0 0 1px rgb(223,223,241); display:grid; place-items:center; } .note-page--group .note-tile__icon{ width:100%; height:100%; object-fit:contain; border-radius:6px; } .note-page--group .note-tile__name{ font-size:14px; font-weight:600; color:var(--ink); margin:6px 0 0; line-height:1.25; } .note-page--group .note-tile__en{ font-size:12px; color:var(--muted); font-style:italic; margin:0; } .note-page--group .note-tile__count{ margin:6px 0 0; font-size:11.5px; color:var(--purple); font-weight:600; } /* ===== Mobile (≤767) ===== */ @media (max-width:767px){ .note-page--catalog .catalog-hero{ padding:24px 18px 18px; } .note-page--catalog .catalog-hero__title{ font-size:26px; } /* hero группы на мобиле — компактнее */ .note-page--group .note-hero{ padding:28px 20px 24px; min-height:200px; } .note-page--group .note-hero .note-hero__name-ru{ font-size:32px; line-height:1.15; } .note-page--group .note-hero__kicker{ font-size:11px; letter-spacing:1.5px; } .note-page--group .note-hero .note-hero__count{ font-size:13px; margin-top:10px; } .note-page--catalog .groups-grid{ grid-template-columns:1fr; gap:12px; padding:20px 18px 28px; } .note-page--group .notes-grid-section{ padding:18px 18px 28px; } .note-page--group .notes-grid{ grid-template-columns:repeat(2, 1fr); gap:10px; } .note-page--group .note-tile__icon-wrap{ width:72px; height:72px; padding:5px; } } @media (min-width:768px) and (max-width:1023px){ .note-page--catalog .groups-grid{ grid-template-columns:repeat(2, 1fr); } .note-page--group .notes-grid{ grid-template-columns:repeat(3, 1fr); } } /* End */ /* Start:/local/templates/rosveb/css/back-url.min.css?1780666703611*/ .bottom-links-block{margin:32px 0 0 0;display:flex;align-items:center;justify-content:space-between;}@media (min-width:1200px){.bottom-links-block--right-padding{width:calc(100% - 400px)}}.back-url{position:relative;}.back-url:hover .back-url-icon{opacity:1;}.back-url-icon{display:inline-block;vertical-align:top;right:initial;top:6px;left:0;}.back-url-icon .svg{right:inherit;left:0;bottom:1px;}.back-url-icon .arrow-all__item-line{left:0;right:calc(100% - 18px);transition:right ease .5s;}.back-url:hover .back-url-icon .arrow-all__item-line{left:0;right:calc(100% - 34px);}.back-url-text{padding:0 0 0 8px;} /* End */ /* /local/templates/rosveb/css/animation/animate.min.css?178066670352789 */ /* /local/templates/rosveb/css/share.min.css?17806667041896 */ /* /local/templates/rosveb/css/notes-page.css?178066670428972 */ /* /local/templates/rosveb/css/back-url.min.css?1780666703611 */