/* Start:/local/templates/astro/libs/animate.css?173012249857531*/ @charset "UTF-8"; /*! Animate.css - http://daneden.me/animate Licensed under the MIT license Copyright (c) 2013 Daniel Eden Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); transform: translateY(-15px); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; } @-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes pulse { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } } @keyframes shake { 0%, 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-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); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes swing { 20% { -webkit-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } } .swing { -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { 0% { -webkit-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } @keyframes tada { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); -ms-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); -ms-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); -ms-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); -ms-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } .tada { -webkit-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes wobble { 0% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); -ms-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); -ms-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); -ms-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); -ms-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); -ms-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(.9); transform: scale(.9); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); -ms-transform: scale(.3); transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(.9); -ms-transform: scale(.9); transform: scale(.9); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); -ms-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 0% { -webkit-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(.95); transform: scale(.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(.3); transform: scale(.3); } } @keyframes bounceOut { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(.95); -ms-transform: scale(.95); transform: scale(.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(.3); -ms-transform: scale(.3); transform: scale(.3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } } @keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } } @keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } } @keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } } @keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; -ms-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; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); -ms-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); -ms-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } .flipInX { -webkit-backface-visibility: visible !important; -ms-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; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); -ms-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); -ms-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } } .flipInY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-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; -ms-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } } @keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); -ms-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); -ms-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); 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% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } } @keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } } @-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 } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateIn { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); -ms-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } @keyframes rotateOut { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); -ms-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes slideOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes slideOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } @-webkit-keyframes hinge { 0% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; 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); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40% { -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; } 80% { -webkit-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform: translateY(700px); transform: translateY(700px); opacity: 0; } } @keyframes hinge { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); -ms-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); -ms-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform: translateY(700px); -ms-transform: translateY(700px); transform: translateY(700px); opacity: 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); -ms-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } @keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); -ms-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } /* End */ /* Start:/local/templates/astro/components/bitrix/breadcrumb/bread/style.min.css?1730122499467*/ .bx-breadcrumb{margin:10px 0}.bx-breadcrumb i{color:#b5bdc2;line-height:13px;font-size:12px;vertical-align:middle;margin-right:5px}.bx-breadcrumb .bx-breadcrumb-item{float:left;margin-bottom:10px;white-space:nowrap;line-height:13px;vertical-align:middle;margin-right:10px}.bx-breadcrumb .bx-breadcrumb-item span{font-family:"Open Sans",Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:13px;white-space:normal}.bx-breadcrumb .bx-breadcrumb-item a{border-bottom:0} /* End */ /* Start:/local/templates/astro/template_styles.css?177756252631413*/ :root { --blue-gradient: linear-gradient(180deg, rgba(68,112,154,1) 0%, rgba(28,45,61,1) 100%); --dark-blue-gradient:linear-gradient(180deg, rgba(47,71,95,1) 0%, rgba(68,112,154,1) 50%, rgba(47,71,95,1) 100%); --dark-blue: #2F475F; --black: #000814; --block-padding: 50px; --miniblock-padding: 30px; --gap:20px; --minigap:10px; --microgap:5px; } body{ margin: 0; font-family: Manrope; color: var(--black, #000814); /* regular text */ font-family: Manrope; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ background-image: url('/local/templates/astro/img/bg.webp'); /*background-size: 393px 393px; background-repeat: repeat; background: radial-gradient(circle at 52% 51%, rgba(249,249,249,0.7), rgba(255,255,255,0.7)), url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='9.56' numOctaves='6' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");*/ } html, button, input, select, textarea{ font-family: Manrope; } *{ box-sizing: border-box; } ::-webkit-scrollbar-button { background-repeat:no-repeat; width:6px; height:0px; } ::-webkit-scrollbar-track { -webkit-border-radius: 3px; border-radius: 3px; background: #ebebeb; } ::-webkit-scrollbar-thumb { background-color:gray; background-position:center; background-repeat:no-repeat; } ::-webkit-resizer{ background-repeat:no-repeat; width:9px; height:9px; } ::-webkit-scrollbar{ width: 9px; height: 9px; } .forum input[type="submit"]{ position: relative; overflow: hidden; border-radius: 1000px; border: 1px solid #2360A5; background: var(--dark-blue-gradient); display: inline-flex; padding: 10px 20px; justify-content: center; align-items: center; width: fit-content; color: var(--white, #FFF); font-family: Manrope; font-size: 18px; font-style: normal; font-weight: 700; line-height: 130%; /* 23.4px */ text-decoration: none; cursor: pointer; } .btn{ position: relative; overflow: hidden; border-radius: 1000px; border: 1px solid #2360A5; background: var(--dark-blue-gradient); display: flex; padding: 10px 20px; justify-content: center; align-items: center; width: fit-content; color: var(--white, #FFF); font-family: Manrope; font-size: 18px; font-style: normal; font-weight: 700; line-height: 130%; /* 23.4px */ text-decoration: none; cursor: pointer; } .btn:hover:after{ content: ""; position:absolute; width: 200px; height: 70px; margin-left: 50px; background: linear-gradient(180deg, rgba(0,0,0,0) 25%, rgba(255,255,255,1) 50%, rgba(0,0,0,0) 75%); left: -180px; top: 10px; z-index: 1; transform: rotate(110deg); position: absolute; animation: movingFlare 1s ease-in-out 0.05s ; } @keyframes movingFlare { 0% { left: -180px; margin-left: 50px; } 100% { left: 130%; } } /*Шрифты*/ h1.h1, h2.h2{ margin: 0; } .h1{ color: var(--black, #000814); /* mobile/h1 */ font-family: Manrope; font-size: 28px; font-style: normal; font-weight: 700; line-height: 110%; /* 30.8px */ } .h2{ color: var(--black, #000814); /* mobile/h2 */ font-family: Manrope; font-size: 24px; font-style: normal; font-weight: 700; line-height: 115%; /* 27.6px */ } .h3{ color: var(--black, #000814); /* mobile/h3 */ font-family: Manrope; font-size: 21px; font-style: normal; font-weight: 700; line-height: 130%; /* 27.3px */ } .h4{ color: var(--black, #000814); /* mobile/h4 */ font-family: Manrope; font-size: 18px; font-style: normal; font-weight: 400; line-height: 140%; /* 25.2px */ } .h5{ color: var(--black, #000814); /* mobile/h5 */ font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 400; line-height: 130%; /* 20.8px */ } .flex-col .h5 a>img { max-width: 41px; } .container{ padding: 0 20px; width: 100%; } .telephone{ font-family: "Noto Sans"; } header{ background: linear-gradient(360deg, rgb(71, 113, 153) 20%, rgb(148, 172, 196) 100%); /*background: var(--blue-gradient);*/ padding: 30px 0; } .header_inner{ display: flex; justify-content: space-between; align-items: center; } .header_logo{ width: 58px; height: 58px; } .header_logo img{ width: 100%; height: 100%; object-fit: contain; } .header_logo_wrapper{ display: flex; gap: var(--gap); align-items: center; } .header_title{ color: var(--white, #FFF); /* small text */ font-family: Manrope; font-size: 12px; font-style: normal; font-weight: 400; line-height: 130%; /* 15.6px */ } .header_title_small{ display: none; } .header_logo{ transition-duration: 0.3s; } .header_logo:hover{ opacity: 0.5; } .header_burger{ display: flex; flex-direction: column; gap: 9px; width: 38px; cursor: pointer; transition-duration: 0.3s; } .header_burger:hover{ opacity: 0.5; } .header_burger div{ border-radius: 2px; height: 3px; width: 100%; background: white; } .border_block{ border-radius: 10px; border: 1px solid var(--card-stroke, #DCDCDC); background: var(--white, #FFF); padding: 20px; } .gap{ gap: var(--gap); } .gap20{ gap: 20px; } .minigap{ gap: var(--minigap); } .microgap{ gap: var(--microgap); } .flex-row{ display: flex; } .flex-col{ display: flex; flex-direction: column; } .image{ border-radius: 10px; height: 195px; width: 100%; object-fit: cover; } .square_img{ width: 100%; padding-top: 100%; position: relative; } .square_img img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover; } .rectangle_img{ width: 100%; padding-top: 55.625%; position: relative; } .rectangle_img img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; } .bigimage{ border-radius: 10px; height: 425px; width: 100%; object-fit: cover; } .index-blocks{ display: grid; grid-template-columns: 1fr; grid-auto-flow: row dense; gap: var(--gap); } .margin-top{ margin-top: auto; } .fool-block{ grid-column: span 1; } .index-first-block{ display: flex; flex-direction: column; gap: 20px; /*margin-top: var(--gap);*/ } .index-first-block_inner{ display: flex; flex-direction: column; align-items: center; gap: 15px; } .index-first-block .h2{ text-align: center; } .index-first-block .h3, .index-first-block .h2{ color: var(--dark-blue); } .index-first-block img{ width: 100%; height: 195px; border-radius: 10px; object-fit: cover; } .link{ color: inherit; text-decoration: none; transition-duration: 0.3s; } .link:hover{ color: inherit; text-decoration: none; opacity: 0.5; } .news-detail .h1{ color: var(--dark-blue); } .news-detail-main{ width: 100%; height: fit-content; } .news-detail{ display: flex; gap: 30px; flex-wrap: wrap; } .sidebar_block{ width: 100%; height: fit-content; gap: 20px; flex-shrink: 0; padding: 20px; } .detail_text iframe{ width: 100%; height: 250px; border-radius: 10px; } .col-6{ display: grid; grid-template-columns: 1fr; grid-auto-flow: row dense; } .col-4{ display: grid; grid-template-columns: 1fr; } .col-3{ display: grid; grid-template-columns: 1fr; } .col-2{ display: grid; grid-template-columns: 1fr; } .raspisanie_item{ display: grid; gap: 30px; grid-template-columns: 1fr; padding: 20px 0; border-bottom: 2px solid #EBEBEB; } .raspisanie_items_block{ display: flex; flex-direction: column; gap: 15px; } .raspisanie_items{ display: flex; flex-direction: column; border-bottom: 2px solid #EBEBEB; } .raspisanie_item_mini{ display: grid; gap: 10px; grid-template-columns: 1fr 1fr; padding: 15px 0; } .border_block .raspisanie_item:last-child{ border-bottom: 2px solid transparent; } .detail_img{ width: 100%; height: auto; border-radius: 10px; object-fit: cover; } .profile_img{ width: 100%; height: auto; object-position: top; object-fit: cover; border-radius: 10px; background: #F8F8F8; } .minipeople .profile_img{ height: auto; } .color_link, .bx-ilike-text, .forum-user-name a, .forum-new-post a, .forum-footer-selectall a{ color: var(--dark-blue); text-decoration: none; transition-duration: 0.3s; font-weight: 700; } .color_link:hover, .bx-ilike-text:hover, .forum-user-name a:hover, .forum-new-post a:hover, .forum-footer-selectall a:hover{ opacity: 0.5; } .breadcrumb{ display: flex; align-items: center; gap: 10px; margin-bottom: var(--miniblock-padding); background: transparent; max-width: 100%; overflow: hidden; margin-top: var(--gap); } .breadcrumb a{ color: var(--dark-blue, #2F475F); /* regular text */ font-family: Manrope; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ } .breadcrumb svg{ flex-shrink: 0; } .breadcrumb span{ color: var(--dark-blue, #2F475F); /* regular text */ font-family: Manrope; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ opacity: 0.5; overflow: hidden; display: block; white-space: nowrap; } .main_h1 h1{ color: var(--dark-blue); margin-bottom: var(--gap); } footer{ margin-top: var(--block-padding); padding: var(--block-padding) 0; background: var(--dark-blue); } .footer_menu{ display: flex; flex-wrap: wrap; flex-direction: column; gap: 30px; padding-bottom: 30px; margin-bottom: 30px; border-bottom: 2px solid white; } .footer_menu a{ color: var(--white, #FFF); /* desktop/nav */ font-family: Manrope; font-size: 18px; font-style: normal; font-weight: 700; line-height: 120%; /* 21.6px */ text-decoration: none; transition-duration: 0.3s; } .footer_menu a:hover{ opacity: 0.5; } .footer_bottom{ display: flex; flex-direction: column; gap: 20px; } .footer_bottom_menu{ display: flex; flex-direction: column; gap: 20px; } .footer_bottom .footer_bottom_item{ color: var(--white, #FFF); /* regular text */ font-family: Manrope; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ text-decoration: none; transition-duration: 0.3s; } .footer_bottom a.footer_bottom_item:hover{ opacity: 0.5; } .footer_sochial, .index_sochial{ display: flex; gap: 15px; align-items: center; } @media (max-width: 425px) { .footer_sochial { gap: 5px; } } @media (max-width: 335px) { .footer_sochial { gap: 2px; } } .footer_bottom .footer_sochial { gap: 15px; } /* .index_sochial a{ display: block; transition-duration: 0.3s; } */ .footer_sochial a, .index_sochial a{ width: 40px; height: 40px; transition-duration: 0.3s; } .footer_sochial a:hover, .index_sochial a:hover{ opacity: 0.5; } .footer_sochial a img, .index_sochial a img{ width: 100%; height: 100%; object-fit: contain; } .h-title{ margin-top: 50px; margin-bottom: 30px; } .margin-only{ margin-bottom: var(--block-padding); } .minimargin-only{ margin-bottom: var(--miniblock-padding); } .galery-img{ display: grid; grid-template-columns: 1fr; grid-auto-flow: dense; gap: var(--gap); } .galery-img_img{ border-radius: 10px; overflow: hidden; height: 320px; } .galery-img_img img{ width: 100%; height: 100%; object-fit: cover; } .avatar{ border-radius: 90px; width: 90px; height: 90px; object-fit: cover; flex-shrink: 0; } .otzyvy_text{ display: flex; flex-direction: column; align-items: flex-start; gap: 15px; position: relative; z-index: 1; } .otzyvy_text hr{ width: 100px; margin: 0; } .otzyvy_text_item{ width: 100%; } .otzyvy{ display: grid; grid-auto-flow: row dense; grid-template-columns: 1fr; gap: var(--gap); } .otzyvy .border_block{ position: relative; } .otzyvy .border_block:after{ content: ""; position: absolute; bottom: 20px; right: 30px; height: 135px; width: 135px; background: url(/local/templates/astro/img/quote.svg); } .minipeople .border_block, .people .border_block{ padding: 20px; gap: 20px; } .pedsostav{ column-gap: 20px; } .pedsostav_item{ padding: 10px 0; border-top: 1px solid #EBEBEB; } .pedsostav_item:nth-child(1),.pedsostav_item:nth-child(2){ border-top: 0px solid transparent; } ul{ list-style-type: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } ul li{ position: relative; padding-left: 25px; } ul li:before{ content: ""; position: absolute; left: 0; top: calc(50% - 9px); height: 18px; width: 10px; background: url(/local/templates/astro/img/arrow.svg); } .block_with_img, .block_with_big_img{ display: flex; flex-direction: column; gap: var(--gap); } .block_with_big_img img{ width: 100%; object-fit: contain; height: 195px; border-radius: 10px; } .block_with_img img{ width: 100%; object-fit: cover; height: 195px; border-radius: 10px; } .raspisanie_item_date{ display: flex; gap: 10px; } .raspisanie_item_date div:last-child{ border-left: 1px solid #EBEBEB; padding-left: 10px; } .raspisanie_item_date_adr{ display: flex; flex-direction: column; gap: 10px; } .raspisanie_item_user{ display: flex; align-items: center; gap: 10px; } .raspisanie_item_user img{ flex-shrink: 0; height: 90px; width: 90px; object-fit: cover; border-radius: 50px; } .shop-prev{ display: flex; flex-direction: column; gap: 50px; } .shop-prev img{ width: 100%; height: auto; } .index-first-block-2 .telephone-block{ color: var(--dark-blue); display: flex; flex-direction: column; gap: 5px; } /*меню*/ .font_scale{ display: none; } .header_menu{ display: none; } .mobile-menu-header{ background: linear-gradient(360deg, rgb(71, 113, 153) 20%, rgb(148, 172, 196) 100%); padding: 30px 0; } .header_menu.active{ position: fixed; top: 0; right: 0; left: 0; background-color: white; border-radius: 0 0 20px 20px; z-index: 100; width: 100vw; display: flex; flex-direction: column; gap: 20px; max-height: 100vh; overflow: auto; } .header_menu_inner{ padding: 40px 50px 40px 50px; display: flex; flex-direction: column; gap: 20px; } .close_menu{ margin-left: auto; width: 40px; height: 40px; cursor: pointer; background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%20fill%3D%22none%22%3E%0A%3Crect%20x%3D%226.12109%22%20y%3D%2231.4558%22%20width%3D%2236%22%20height%3D%223%22%20rx%3D%221.5%22%20transform%3D%22rotate(-45%206.12109%2031.4558)%22%20fill%3D%22white%22%2F%3E%0A%3Crect%20x%3D%228.12109%22%20y%3D%226.45581%22%20width%3D%2236%22%20height%3D%223%22%20rx%3D%221.5%22%20transform%3D%22rotate(45%208.12109%206.45581)%22%20fill%3D%22white%22%2F%3E%0A%3Crect%20x%3D%2219%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%224%22%20rx%3D%221%22%20fill%3D%22white%22%2F%3E%0A%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: center; transition-duration: 0.3s; } .close_menu:hover{ opacity: 0.5; } .header_menu_items{ display: flex; flex-direction: column; } .header_menu_item.select .link-big{ opacity: 0.5; } .header_menu_item{ padding: 15px 0; border-bottom: 1px solid #DCDCDC; } .header_menu_item:last-child{ border-bottom: 0px solid transparent; } .header_menu_item.dropdown{ position: relative; cursor: pointer; } .header_menu_item.dropdown:after{ content: ""; position: absolute; width: 20px; height: 20px; top: 17px; right: 0px; background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2221%22%20height%3D%2220%22%20viewBox%3D%220%200%2021%2020%22%20fill%3D%22none%22%3E%0A%3Crect%20x%3D%220.5%22%20y%3D%229%22%20width%3D%2220%22%20height%3D%222%22%20rx%3D%221%22%20fill%3D%22%232F475F%22%2F%3E%0A%3Crect%20x%3D%229.5%22%20y%3D%2220%22%20width%3D%2220%22%20height%3D%222%22%20rx%3D%221%22%20transform%3D%22rotate(-90%209.5%2020)%22%20fill%3D%22%232F475F%22%2F%3E%0A%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: center; transition-duration: 0.3s; } .header_menu_item.dropdown.active:after{ background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%222%22%20viewBox%3D%220%200%2020%202%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Crect%20width%3D%2220%22%20height%3D%222%22%20rx%3D%221%22%20fill%3D%22%232F475F%22%2F%3E%0A%3C%2Fsvg%3E"); } .header_menu_item .link-big{ color: var(--dark-blue, #2F475F); font-family: Manrope; font-size: 18px; font-style: normal; font-weight: 700; line-height: 120%; text-decoration: none; transition-duration: 0.3s; } .header_menu_item .link-big:hover, .header_menu_item .link:hover{ opacity: 0.5; } .header_menu_item .link{ color: var(--dark-blue, #2F475F); font-family: Manrope; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; text-decoration: none; transition-duration: 0.3s; } .dropdown_content{ height: 0px; overflow: hidden; transition-duration: 0.3s; } .dropdown.active .dropdown_content{ height: auto; display: flex; flex-direction: column; margin-top: 20px; gap: 20px; margin-left: 0px; margin-bottom: 5px; } .dropdown.active .dropdown_content .link{ color: var(--black-color); } .price{ white-space: nowrap; flex-shrink: 0; } .image.books{ height: auto; } .mob_padding{ padding-top: var(--miniblock-padding); } @media screen and (max-width: 360px){ .index-blocks .border_block{ overflow: hidden; } } @media screen and (min-width: 768px){ .header_menu_inner{ width: 768px; margin: auto; } } @media screen and (min-width: 992px){ .mobile-menu-header{ display: none; } .mob_padding{ padding-top: 0; } .breadcrumb{ margin-top: 0; } .index-first-block{ /*margin-top: var(--gap);*/ } .burger_menu, .close_menu{ display: none; } .header_menu_inner{ width: 100%; padding: 40px 0; } .header_menu{ display: flex; } .header_menu_items{ width: 100%; flex-direction: row; justify-content: space-between; } .dropdown_content{ position: absolute; } .header_menu_item{ padding: 0; border-bottom: 0px solid transparent; } .header_menu_item .link{ white-space: nowrap; transition-duration: 0.3s; } .header_menu_item{ transition-duration: 0.3s; } .header_menu_item.dropdown:after{ content: ""; background: transparent; position: absolute; top: 20px; z-index: 1; left: 0; height: 25px; width: 100px; } .dropdown_content{ border: 0px solid transparent; } .dropdown:hover .dropdown_content{ height: auto; min-width: 200px; z-index: 10; display: flex; top: 40px; flex-direction: column; gap: 15px; padding: 20px; border-radius: 10px; border: 1px solid #DCDCDC; background: var(--white, #FFF); } } @media screen and (min-width: 1300px){ .nav{ position: relative; } .font_scale{ position: absolute; left: 0; height: 100%; display: flex; align-items: center; color: var(--dark-blue, #2F475F); leading-trim: both; text-edge: cap; font-family: Manrope; font-style: normal; font-weight: 700; line-height: 120%; /* 22.8px */ } .font_scale span:hover{ cursor: pointer; opacity: 0.5; } .big-font-btn{ font-size: 24px; } .mid-font-btn{ font-size: 19px; } .small-font-btn{ font-size: 15px; } .header_menu_items{ justify-content: center; gap: 40px; } } @media screen and (min-width: 1600px){ } /*Фикс форума на мобилке*/ @media screen and (max-width: 600px){ .forum-forum-list tr{ display: flex; flex-wrap: wrap; } .forum-forum-list tr td.forum-column-title{ width: 100%; } .forum-forum-list tr td.forum-column-icon{ display: none; } .forum-forum-list thead{ display: none; } .forum-forum-list tr td.forum-column-lastpost{ display: none; } .forum-forum-list tr td.forum-column-replies{ display: none; } .forum-forum-list tr td.forum-column-topics{ display: none; } .forum-info-box-inner{ display: flex; flex-direction: column; } table.forum-table td.forum-column-footer{ width: 100%; } span.forum-footer-option{ border-left: 0px solid transparent; } .forum-topic-list thead{ display: none; } .forum-topic-list tr td.forum-column-title{ width: 100%; } .forum-topic-list tr td.forum-column-replies{ display: none; } .forum-topic-list tr td.forum-column-icon{ display: none; } .forum-topic-list tr td.forum-column-replies{ display: none; } .forum-topic-list tr td.forum-column-views{ display: none; } .forum-topic-list tr td.forum-column-lastpost{ display: none; } .forum-topic-list tr{ display: flex; flex-wrap: wrap; } .forum-post-table tr{ display: flex; flex-wrap: wrap; } table.forum-post-table tr td.forum-cell-user{ width: 100%; } table.forum-post-table td.forum-cell-post{ border-left: 1px solid #d5dae0; } div.forum-post-entry{ width: 100%; } table.forum-post-table td.forum-cell-contact, table.forum-post-table td.forum-cell-actions{ display: none; } } @media screen and (max-width: 380px){ .h1{ font-size: 24px; } .h2{ font-size: 21px; } .h3{ font-size: 18px; } .h4{ font-size: 12px; } .h5{ font-size: 12px; } body{ font-size: 10px; } .btn{ font-size: 16px; } } @media screen and (min-width: 768px){ /*Планшет*/ :root { --block-padding: 80px; --miniblock-padding: 50px; } .container{ width: 708px; margin: auto; padding: 0; } .index-blocks{ grid-template-columns: 1fr 1fr; } .fool-block{ grid-column: span 2; } .border_block{ padding: 30px; } .h1{ font-size: 32px; } .h2{ font-size: 32px; } .h3{ font-size: 26px; } .h4{ font-size: 20px; } .h5{ } .header_logo{ width: 78px; height: 78px; } .header_title{ color: var(--white, #FFF); /* tablet/h4 bold */ font-family: Manrope; font-size: 20px; font-style: normal; font-weight: 700; line-height: 140%; /* 28px */ } .index-first-block{ gap: 40px; } .index-first-block_inner{ gap: 30px; } .index-first-block .h2{ text-align: center; } .index-first-block img{ width: 100%; height: 282px; border-radius: 10px; object-fit: cover; } .sidebar_block{ width: 446px; padding: 20px; } .footer_menu{ flex-direction: row; justify-content: space-between; margin-bottom: 40px; } .footer_bottom{ flex-direction: row; justify-content: space-between; align-items: flex-start; } .block_with_img img{ height: 282px; } .block_with_big_img img{ height: 282px; } .profile_img{ height: 450px; } .minipeople .profile_img{ height: auto; } .index-first-block-2 .h3{ text-align: left; } .index-first-block-2 .btn{ margin-top: 0; } .index-first-block-2 .index-first-block_inner{ height: auto; } .index-first-block-2 .telephone-block{ margin-top: auto; } .index-first-block-2 .telephone-block{ font-size: 22px; } .index-first-block-2 .telephone-block a { color: inherit; text-decoration: none; transition-duration: 0.3s; } .col-3{ grid-template-columns: 1fr 1fr; } } @media screen and (min-width: 992px){ /*Планшет*/ :root { --block-padding: 80px; --miniblock-padding: 50px; } header{ position: relative; } header:after{ content:""; position: absolute; top: 0; bottom: 0; left: -80px; width: 322px; background: url(/local/templates/astro/img/logo2.png); background-size: contain; background-repeat: no-repeat; z-index: 0; } .container{ width: 932px; margin: auto; } .header_logo_wrapper{ padding-left: 72px; flex-direction: row-reverse; justify-content: space-between; width: 100%; z-index: 1; } .header_logo{ width: 106px; height: 106px; } .header_burger{ display: none; } .header_title{ color: var(--white, #FFF); text-align: center; /* tablet/h2 */ font-family: Manrope; font-size: 32px; font-style: normal; font-weight: 700; line-height: 115%; /* 36.8px */ } .header_title_small{ padding-top: 10px; display: block; color: var(--white, #FFF); /* tablet/h4 */ font-family: Manrope; font-size: 14px; font-style: normal; font-weight: 400; line-height: 140%; /* 28px */ } /* .index-first-block{ display: grid; grid-template-columns: 355px auto; gap: 40px; } .index-first-block_inner{ gap: 30px; justify-content: center; } .index-first-block .h2{ text-align: center; } .index-first-block img{ width: 100%; height: 308px; border-radius: 10px; object-fit: cover; } */ .otzyvy, .col-6{ grid-template-columns: 1fr 1fr; } .col-4{ grid-template-columns: 1fr 1fr; } .col-2{ grid-template-columns: 1fr 1fr; } .galery-img{ grid-template-columns: 1fr 1fr; } .raspisanie_item{ grid-template-columns: 1fr 1fr; } .footer_bottom{ align-items: center; gap: 50px; } .footer_bottom_menu{ width: 100%; flex-direction: row; justify-content: space-between; } .footer_sochial{ flex-shrink: 0; } footer .container{ width: 980px; } .block_with_img img{ width: 416px; height: 376px; } .block_with_big_img img{ height: auto; width: 100%; flex-shrink: 0; } .shop-prev{ flex-direction: row; } .shop-prev img{ width: 440px; flex-shrink: 0; object-fit: contain; height: auto; } .minipeople .profile_img{ height: 500px; } .index-first-block-2 .telephone-block{ font-size: 24px; } .header_logo_wrapper:after{ content: ""; width: 106px; } } @media screen and (min-width: 1300px){ /*ПК*/ :root { } .container{ width: 1200px; margin: auto; } .header_title_small{ font-size: 20px; } .small-font .h1{ font-size: 36px; } .small-font .h2{ font-size: 30px; } .small-font .h3{ font-size: 22px; font-weight: 400; } .small-font .h4{ font-size: 18px; } .small-font .h5{ font-size: 16px; } .index-blocks{ grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; } .col-6 .fool-block{ grid-column: span 6!important; } .header_logo_wrapper{ padding-left: 0; } header:after{ left: 0px; } /* .index-first-block{ display: grid; grid-template-columns: 600px auto; gap: 50px; } .index-first-block .btn{ font-size: 22px; padding: 12px 24px; } */ .index-first-block{ display: grid; grid-template-columns: 355px auto; gap: 40px; } .index-first-block_inner{ gap: 30px; justify-content: center; } .index-first-block .h2{ text-align: center; } .index-first-block img{ width: 100%; height: 100%; border-radius: 10px; object-fit: cover; } .index-first-block_inner .btn{ margin-top: auto; } .detail_text iframe{ width: 711px; height: 400px; border-radius: 10px; } .col-4{ grid-template-columns: 1fr 1fr 1fr 1fr; } .col-3{ grid-template-columns: 1fr 1fr 1fr; } .raspisanie_item{ grid-template-columns: 1fr 1fr 1fr; } .otzyvy{ grid-template-columns: 1fr 1fr 1fr 1fr; } .col-6{ grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; } .otzyvy .border_block, .col-6 .border_block{ grid-column: span 2; } .col-6 .block-foolwidth{ grid-column: span 6; } .col-6 .block-4width{ grid-column: span 4; } .col-6 .block-halfwidth{ grid-column: span 3; } .shop .border_block:nth-child(10),.shop .border_block:nth-child(11),.shop .border_block:nth-child(15),.shop .border_block:nth-child(16),.otzyvy .border_block:nth-child(4),.otzyvy .border_block:nth-child(5),.otzyvy .border_block:nth-child(16),.otzyvy .border_block:nth-child(17),.otzyvy .border_block:nth-child(30),.otzyvy .border_block:nth-child(31){ /*grid-column: span 3;*/ } .otzyvy .border_block:nth-child(9), .otzyvy .border_block:nth-child(26), .otzyvy .border_block:nth-child(35){ grid-column: span 4; } .otzyvy .border_block:nth-child(21){ grid-column: span 4; } .news-detail{ flex-wrap: nowrap; } .sidebar_block{ width: 446px; padding: 20px; } .galery-img{ grid-template-columns: 1fr 1fr 1fr; } .big{ grid-column: span 1.5; } .bigh{ height: calc(640px + var(--gap)); grid-row: span 2; } .superbig{ grid-column: span 2; grid-row: span 2; height: calc(640px + var(--gap)); } .block_with_img{ flex-direction: row; } .block_with_big_img img{ height: 342px; width: auto; flex-shrink: 0; } .block_with_big_img{ flex-direction: row; } .index-first-block-2 .btn{ margin-top: auto; } } @media screen and (min-width: 1600px){ /*ПК*/ :root { --gap: 30px; --block-padding: 100px; --miniblock-padding: 50px; } .container{ width: 1400px; margin: auto; } .block_with_big_img img{ height: 442px; width: auto; flex-shrink: 0; } .h1{ font-size: 42px; } .h2{ font-size: 36px; } .h3{ font-size: 30px; line-height: 110%; } .h4{ font-size: 22px; } .h5{ font-size: 18px; } .big-font .h1{ font-size: 50px; } .big-font .h2{ font-size: 42px; } .big-font .h3{ font-size: 36px; line-height: 115%; } .big-font .h4{ font-size: 30px; font-weight: 700; } .big-font .h5{ font-size: 22px; } } .loader-block{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; backdrop-filter: blur(5px); z-index: -9999; display: none; justify-content: center; align-items: center; } .loader-block.active{ display: flex; z-index: 9999; } .loader, .loader:before, .loader:after { background: #65abf8; -webkit-animation: load1 1s infinite ease-in-out; animation: load1 1s infinite ease-in-out; width: 1em; height: 4em; } .loader { color: #65abf8; text-indent: -9999em; margin: 88px auto; position: relative; font-size: 11px; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } .loader:before, .loader:after { position: absolute; top: 0; content: ''; } .loader:before { left: -1.5em; -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .loader:after { left: 1.5em; } @-webkit-keyframes load1 { 0%, 80%, 100% { box-shadow: 0 0; height: 4em; } 40% { box-shadow: 0 -2em; height: 5em; } } @keyframes load1 { 0%, 80%, 100% { box-shadow: 0 0; height: 4em; } 40% { box-shadow: 0 -2em; height: 5em; } } .index-first-block-2 .telephone-block a { color: inherit; text-decoration: none; transition-duration: 0.3s; } /* End */ /* /local/templates/astro/libs/animate.css?173012249857531 */ /* /local/templates/astro/components/bitrix/breadcrumb/bread/style.min.css?1730122499467 */ /* /local/templates/astro/template_styles.css?177756252631413 */