/* 1 - jQuery Masked Input Plugin - https://github.com/digitalBush/jquery.maskedinput 2 - Lity - https://sorgalla.com/lity/ 3 - Slick Slider - https://kenwheeler.github.io/slick/ 4 - tool tips - https://github.com/skyout/tips.js 5 - Nice Select - https://hernansartorio.com/jquery-nice-select/ 6 - Simplel Lightbox - https://dbrekalo.github.io/simpleLightbox/ - видео в модальном окне https://simplelightbox.com/ - Без видео ------------------------------------------------------------------------------- */ /* jQuery Masked Input Plugin Copyright (c) 2007 - 2015 Josh Bush (digitalbush.com) Licensed under the MIT license (http://digitalbush.com/projects/masked-input-plugin/#license) Version: 1.4.1 */ /*! Lity - v2.3.1 - 2018-04-20 * http://sorgalla.com/lity/ * Copyright (c) 2015-2018 Jan Sorgalla; Licensed MIT */ .lity{z-index:9990;position:fixed;top:0;right:0;bottom:0;left:0;white-space:nowrap;background:#0b0b0b;background:rgba(0,0,0,0.9);outline:none !important;opacity:0;-webkit-transition:opacity .3s ease;-o-transition:opacity .3s ease;transition:opacity .3s ease}.lity.lity-opened{opacity:1}.lity.lity-closed{opacity:0}.lity *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.lity-wrap{z-index:9990;position:fixed;top:0;right:0;bottom:0;left:0;text-align:center;outline:none !important}.lity-wrap:before{content:'';display:inline-block;height:100%;vertical-align:middle;margin-right:-0.25em}.lity-loader{z-index:9991;color:#fff;position:absolute;top:50%;margin-top:-0.8em;width:100%;text-align:center;font-size:14px;font-family:Arial,Helvetica,sans-serif;opacity:0;-webkit-transition:opacity .3s ease;-o-transition:opacity .3s ease;transition:opacity .3s ease}.lity-loading .lity-loader{opacity:1}.lity-container{z-index:9992;position:relative;text-align:left;vertical-align:middle;display:inline-block;white-space:normal;max-width:100%;max-height:100%;outline:none !important}.lity-content{z-index:9993;width:100%;-webkit-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);-webkit-transition:-webkit-transform .3s ease;transition:-webkit-transform .3s ease;-o-transition:-o-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease, -webkit-transform .3s ease, -o-transform .3s ease}.lity-loading .lity-content,.lity-closed .lity-content{-webkit-transform:scale(.8);-ms-transform:scale(.8);-o-transform:scale(.8);transform:scale(.8)}.lity-content:after{content:'';position:absolute;left:0;top:0;bottom:0;display:block;right:0;width:auto;height:auto;z-index:-1;-webkit-box-shadow:0 0 8px rgba(0,0,0,0.6);box-shadow:0 0 8px rgba(0,0,0,0.6)}.lity-close{z-index:9994;width:35px;height:35px;position:fixed;right:0;top:0;-webkit-appearance:none;cursor:pointer;text-decoration:none;text-align:center;padding:0;color:#fff;font-style:normal;font-size:35px;font-family:Arial,Baskerville,monospace;line-height:35px;text-shadow:0 1px 2px rgba(0,0,0,0.6);border:0;background:none;outline:none;-webkit-box-shadow:none;box-shadow:none}.lity-close::-moz-focus-inner{border:0;padding:0}.lity-close:hover,.lity-close:focus,.lity-close:active,.lity-close:visited{text-decoration:none;text-align:center;padding:0;color:#fff;font-style:normal;font-size:35px;font-family:Arial,Baskerville,monospace;line-height:35px;text-shadow:0 1px 2px rgba(0,0,0,0.6);border:0;background:none;outline:none;-webkit-box-shadow:none;box-shadow:none}.lity-close:active{top:1px}.lity-image img{max-width:100%;display:block;line-height:0;border:0}.lity-iframe .lity-container,.lity-youtube .lity-container,.lity-vimeo .lity-container,.lity-facebookvideo .lity-container,.lity-googlemaps .lity-container{width:100%;max-width:964px}.lity-iframe-container{width:100%;height:0;padding-top:56.25%;overflow:auto;pointer-events:auto;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-overflow-scrolling:touch}.lity-iframe-container iframe{position:absolute;display:block;top:0;left:0;width:100%;height:100%;-webkit-box-shadow:0 0 8px rgba(0,0,0,0.6);box-shadow:0 0 8px rgba(0,0,0,0.6);background:#000}.lity-hide{display:none} /* Slick Slider */ .slick-slider * {outline:none} .slick-slider {position: relative;display: block;box-sizing: border-box;touch-action: pan-y; -webkit-tap-highlight-color: transparent;} .slick-list {position: relative;display: block;overflow: hidden;margin: 0;padding: 0;} .slick-list:focus {outline: none;} .slick-list.dragging {cursor: pointer;cursor: hand;} .slick-slider .slick-track, .slick-slider .slick-list {transform: translate3d(0, 0, 0);} .slick-track {position: relative;top: 0;left: 0;display: block;margin-left: auto;margin-right: auto;} .slick-track:before, .slick-track:after {display: table;content: '';} .slick-track:after {clear: both;} .slick-loading .slick-track {visibility: hidden;} .slick-slide {display: none;float: left;height: 100%;min-height: 1px;} [dir='rtl'] .slick-slide {float: right;} .slick-slide img {display: block;} .slick-slide.slick-loading img {display: none;} .slick-slide.dragging img {pointer-events: none;} .slick-initialized .slick-slide{display: block;} .slick-loading .slick-slide {visibility: hidden;} .slick-vertical .slick-slide {display: block;height: auto;border: 1px solid transparent;} .slick-arrow.slick-hidden {display: none;} .slick-dots {display:flex; justify-content:center; align-items:center;} .slick-dots li {display:block; margin:0 7px; border-radius:100%; width:10px; height:10px; border:1px solid #000; cursor:pointer; transition:.2s} .slick-dots li button {display:none} li.slick-active {background:#000} /*tips*/ .hover {cursor:pointer} aside.tooltip,div.tooltip{border-radius:3px 3px 3px 3px;background:#222;color:#fff;display:none;font-size:14px;margin:0;max-width:320px;padding:9px 13px;position:absolute;z-index:100;}aside.tooltip h1,div.tooltip h1{font-size:18px;font-weight:bold;margin:0;padding:0}aside.tooltip strong,div.tooltip strong{font-weight:bold;margin:0;padding:0}aside.tooltip em,div.tooltip em{font-style:italic;margin:0;padding:0}aside.tooltip ul,div.tooltip ul{list-style:disc inside none;margin:0;padding:0;}aside.tooltip ul li,div.tooltip ul li{margin:0;padding:0 5px}aside.tooltip:after,div.tooltip:after{border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:7px solid #222;content:' ';display:block;height:0;left:-7px;margin-top:-7px;position:absolute;top:50%;width:0}aside.tooltip.left:after,div.tooltip.left:after{border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:7px solid #222;border-right:0;content:' ';height:0;left:auto;position:absolute;right:-7px;top:50%;width:0}aside.tooltip.bottom:after,div.tooltip.bottom:after{border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #222;border-top:0;content:' ';height:0;left:50%;margin:0 0 0 -7px;position:absolute;top:-7px;width:0}aside.tooltip.top:after,div.tooltip.top:after{border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid #222;border-bottom:0;bottom:-7px;content:' ';height:0;left:50%;margin:0 0 0 -7px;position:absolute;top:auto;width:0}aside.tooltip.error,div.tooltip.error{background:#ea5b54;}aside.tooltip.error:after,div.tooltip.error:after{border-right-color:#ea5b54}aside.tooltip.error.left:after,div.tooltip.error.left:after{border-right-color:transparent;border-left-color:#ea5b54}aside.tooltip.error.right:after,div.tooltip.error.right:after{border-right-color:transparent;border-right-color:#ea5b54}aside.tooltip.error.bottom:after,div.tooltip.error.bottom:after{border-right-color:transparent;border-bottom-color:#ea5b54}aside.tooltip.error.top:after,div.tooltip.error.top:after{border-right-color:transparent;border-top-color:#ea5b54}aside.tooltip.warning,div.tooltip.warning{color:#b8860b;background:#ffe38e;}aside.tooltip.warning:after,div.tooltip.warning:after{border-right-color:#ffe38e}aside.tooltip.warning.left:after,div.tooltip.warning.left:after{border-right-color:transparent;border-left-color:#ffe38e}aside.tooltip.warning.right:after,div.tooltip.warning.right:after{border-right-color:transparent;border-right-color:#ffe38e}aside.tooltip.warning.bottom:after,div.tooltip.warning.bottom:after{border-right-color:transparent;border-bottom-color:#ffe38e}aside.tooltip.warning.top:after,div.tooltip.warning.top:after{border-right-color:transparent;border-top-color:#ffe38e} /* Nice Select*/ .nice-select {-webkit-tap-highlight-color: transparent;background-color: #fff;border: solid 1px #e8e8e8;box-sizing: border-box;clear: both;cursor: pointer;display: block; float: left;font-family: inherit;font-size: 14px;font-weight: normal;height: 42px;line-height: 40px;outline: none;padding-left: 18px;padding-right: 30px;position: relative;text-align: left !important;transition: all 0.2s ease-in-out;user-select: none;white-space: nowrap;width: auto; } .nice-select:hover {border-color: #fff; } .nice-select:active, .nice-select.open, .nice-select:focus {border-color: #fff; } .nice-select:after {border-bottom: 2px solid #fff;border-right: 2px solid #fff;content: '';display: block;height: 5px;margin-top: -4px;pointer-events: none;position: absolute;right: 12px;top: 50%;transform-origin: 66% 66%;transform: rotate(45deg);transition: all 0.15s ease-in-out;width: 5px; } .nice-select.open:after {transform: rotate(-135deg); } .nice-select.open .list {opacity: 1;pointer-events: auto;transform: scale(1) translateY(0); } .nice-select.disabled {border-color: #ededed;color: #fff;pointer-events: none; } .nice-select.disabled:after {border-color: #cccccc; } .nice-select.wide {width: 100%; } .nice-select.wide .list {left: 0 !important;right: 0 !important; } .nice-select.right {float: right; } .nice-select.right .list {left: auto;right: 0; } .nice-select.small {font-size: 12px;height: 36px;line-height: 34px; } .nice-select.small:after {height: 4px;width: 4px; } .nice-select.small .option {line-height: 34px;min-height: 34px; } .nice-select .list {background-color: #fff;box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);box-sizing: border-box;margin-top: 4px;opacity: 0;overflow: hidden;padding: 0;pointer-events: none;position: absolute;top: 100%;left: 0;transform-origin: 50% 0;transform: scale(0.75) translateY(-21px);transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; z-index: 9; } .nice-select .list:hover .option:not(:hover) { background-color: transparent !important; } .nice-select .option {cursor: pointer;font-weight: 400;line-height: 40px;list-style: none;min-height: 40px; outline: none;padding-left: 18px;padding-right: 29px;text-align: left;transition: all 0.2s; } .nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {background-color: #edf1f4; } .nice-select .option.selected {font-weight: bold; } .nice-select .option.disabled {background-color: transparent;color: #999;cursor: default; } .no-csspointerevents .nice-select .list {display: none; } .no-csspointerevents .nice-select.open .list {display: block; } #notes {position: fixed;bottom: 1em;width: 100%; cursor: default;transition: height 0.45s ease-in-out;pointer-events: none;z-index: 1;} #notes .note-item {max-height: 12em;opacity: 1;will-change: opacity, transform;transition: all 0.2s linear; -webkit-transition: all 0.2s linear;backface-visibility: hidden;width: 50vw;user-select: none;z-index: 2;pointer-events: auto;display: flex;align-content: flex-start;align-items: flex-start;justify-content: flex-start; max-width: 20em;font: inherit;line-height: 20px;color: #fff;margin: 0 auto 1em auto;transform: translateZ(0);padding: 1em; font-size:15px;} #notes .note-item[data-show=false] {pointer-events: none;opacity: 0 !important;max-height: 0 !important;margin-bottom: 0 !important;} #notes .note-item[data-type=info] {background-color: rgba(55, 94, 151, 0.72);} #notes .note-item[data-type=warn] {background-color: rgba(235, 172, 0, 0.72);animation: shake 0.9s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;} #notes .note-item[data-type=error] {background-color: rgba(251, 101, 66, 0.72);animation: shake 0.54s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;} #notes .note-item[data-type=success] {background-color:rgba(63,152,68,0.9);} #notes .note-item .note-item-text {flex: auto;padding-right: 0.5em;max-width: calc(100% - 1.25em);} #notes .note-item .note-item-btn {width: 1.25em;height: 1.25em;cursor: pointer;background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiB4bWw6c3BhY2U9InByZXNlcnZlIiBmaWxsPSIjZmZmIj48cGF0aCBkPSJNMTguMyw1LjcxTDE4LjMsNS43MWMtMC4zOS0wLjM5LTEuMDItMC4zOS0xLjQxLDBMMTIsMTAuNTlMNy4xMSw1LjdjLTAuMzktMC4zOS0xLjAyLTAuMzktMS40MSwwbDAsMCBjLTAuMzksMC4zOS0wLjM5LDEuMDIsMCwxLjQxTDEwLjU5LDEyTDUuNywxNi44OWMtMC4zOSwwLjM5LTAuMzksMS4wMiwwLDEuNDFoMGMwLjM5LDAuMzksMS4wMiwwLjM5LDEuNDEsMEwxMiwxMy40MWw0Ljg5LDQuODkgYzAuMzksMC4zOSwxLjAyLDAuMzksMS40MSwwbDAsMGMwLjM5LTAuMzksMC4zOS0xLjAyLDAtMS40MUwxMy40MSwxMmw0Ljg5LTQuODlDMTguNjgsNi43MywxOC42OCw2LjA5LDE4LjMsNS43MXoiLz48L3N2Zz4=) no-repeat 0 0/contain;transition: opacity 0.2s;border: none; outline:none !important; } #notes .note-item .note-item-btn:hover {opacity: 0.6;} #notes .note-item[data-type=alert-primary] {background-color:rgba(55, 94, 151, 0.72);} #notes .note-item[data-type=alert-secondary] {background-color:rgba(55, 94, 151, 0.72);} #notes .note-item[data-type=alert-info] {background-color:rgba(55, 94, 151, 1);} #notes .note-item[data-type=alert-success] {background-color:rgb(0, 187, 83);} #notes .note-item[data-type=alert-danger] {background-color:#e46c77; animation: shake 0.54s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;} #notes .note-item[data-type=alert-warning] {background-color:rgba(158, 122, 23, 0.72); animation: shake 0.54s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;} @media all and (max-width: 30em) { #notes .note-item {width: 75vw; max-width: none;} } @keyframes shake { 10%, 90% {transform: translate3d(-1px, 0, 0);} 20%, 80% {transform: translate3d(2px, 0 0);} 30%, 50%, 70% {transform: translate3d(-4px, 0, 0);} 40%, 60% {transform: translate3d(4px, 0, 0);} } .slbOverlay,.slbWrapOuter,.slbWrap{position:fixed;top:0;right:0;bottom:0;left:0}.slbOverlay{overflow:hidden;z-index:2000;background-color:#000;opacity:0.7;-webkit-animation:slbOverlay 0.5s;-moz-animation:slbOverlay 0.5s;animation:slbOverlay 0.5s}.slbWrapOuter{overflow-x:hidden;overflow-y:auto;z-index:2010}.slbWrap{position:absolute;text-align:center}.slbWrap:before{content:"";display:inline-block;height:100%;vertical-align:middle}.slbContentOuter{position:relative;display:inline-block;vertical-align:middle;margin:0px auto;padding:0 1em;box-sizing:border-box;z-index:2020;text-align:left;max-width:100%}.slbContentEl .slbContentOuter{padding:5em 1em}.slbContent{position:relative}.slbContentEl .slbContent{-webkit-animation:slbEnter 0.3s;-moz-animation:slbEnter 0.3s;animation:slbEnter 0.3s;background-color:#fff;box-shadow:0 0.2em 1em rgba(0,0,0,0.4)}.slbImageWrap{-webkit-animation:slbEnter 0.3s;-moz-animation:slbEnter 0.3s;animation:slbEnter 0.3s;position:relative}.slbImageWrap:after{content:"";position:absolute;left:0;right:0;top:5em;bottom:5em;display:block;z-index:-1;box-shadow:0 0.2em 1em rgba(0,0,0,0.6);background-color:#FFF}.slbDirectionNext .slbImageWrap{-webkit-animation:slbEnterNext 0.4s;-moz-animation:slbEnterNext 0.4s;animation:slbEnterNext 0.4s}.slbDirectionPrev .slbImageWrap{-webkit-animation:slbEnterPrev 0.4s;-moz-animation:slbEnterPrev 0.4s;animation:slbEnterPrev 0.4s}.slbImage{width:auto;max-width:100%;height:auto;display:block;line-height:0;box-sizing:border-box;padding:5em 0;margin:0 auto}.slbCaption{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;font-size:1.4em;position:absolute;left:0;right:0;bottom:0;padding:.71429em 0;color:#fff;color:rgba(255,255,255,0.7);text-align:center}.slbCloseBtn,.slbArrow{margin:0;padding:0;border:0;cursor:pointer;background:none}.slbCloseBtn::-moz-focus-inner,.slbArrow::-moz-focus-inner{padding:0;border:0}.slbCloseBtn:hover,.slbArrow:hover{opacity:0.5}.slbCloseBtn:active,.slbArrow:active{opacity:0.8}.slbCloseBtn{-webkit-animation:slbEnter 0.3s;-moz-animation:slbEnter 0.3s;animation:slbEnter 0.3s;font-size:3em;width:1.66667em;height:1.66667em;line-height:1.66667em;position:absolute;right:-.33333em;top:0;color:#fff;color:rgba(255,255,255,0.7);text-align:center}.slbLoading .slbCloseBtn{display:none}.slbLoadingText{font-size:1.4em;color:#fff;color:rgba(255,255,255,0.9)}.slbArrows{position:fixed;top:50%;left:0;right:0}.slbLoading .slbArrows{display:none}.slbArrow{position:absolute;top:50%;margin-top:-5em;width:5em;height:10em;opacity:0.7;text-indent:-999em;overflow:hidden}.slbArrow:before{content:"";position:absolute;top:50%;left:50%;margin:-.8em 0 0 -.8em;border:.8em solid transparent}.slbArrow.next{right:0}.slbArrow.next:before{border-left-color:#fff}.slbArrow.prev{left:0}.slbArrow.prev:before{border-right-color:#fff}.slbIframeCont{width:80em;height:0;overflow:hidden;padding-top:56.25%;margin:5em 0}.slbIframe{position:absolute;top:0;left:0;width:100%;height:100%;box-shadow:0 0.2em 1em rgba(0,0,0,0.6);background:#000}@-webkit-keyframes slbOverlay{from{opacity:0}to{opacity:0.7}}@-moz-keyframes slbOverlay{from{opacity:0}to{opacity:0.7}}@keyframes slbOverlay{from{opacity:0}to{opacity:0.7}}@-webkit-keyframes slbEnter{from{opacity:0;-webkit-transform:translate3d(0, -1em, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0)}}@-moz-keyframes slbEnter{from{opacity:0;-moz-transform:translate3d(0, -1em, 0)}to{opacity:1;-moz-transform:translate3d(0, 0, 0)}}@keyframes slbEnter{from{opacity:0;-webkit-transform:translate3d(0, -1em, 0);-moz-transform:translate3d(0, -1em, 0);-ms-transform:translate3d(0, -1em, 0);-o-transform:translate3d(0, -1em, 0);transform:translate3d(0, -1em, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@-webkit-keyframes slbEnterNext{from{opacity:0;-webkit-transform:translate3d(4em, 0, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0)}}@-moz-keyframes slbEnterNext{from{opacity:0;-moz-transform:translate3d(4em, 0, 0)}to{opacity:1;-moz-transform:translate3d(0, 0, 0)}}@keyframes slbEnterNext{from{opacity:0;-webkit-transform:translate3d(4em, 0, 0);-moz-transform:translate3d(4em, 0, 0);-ms-transform:translate3d(4em, 0, 0);-o-transform:translate3d(4em, 0, 0);transform:translate3d(4em, 0, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@-webkit-keyframes slbEnterPrev{from{opacity:0;-webkit-transform:translate3d(-4em, 0, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0)}}@-moz-keyframes slbEnterPrev{from{opacity:0;-moz-transform:translate3d(-4em, 0, 0)}to{opacity:1;-moz-transform:translate3d(0, 0, 0)}}@keyframes slbEnterPrev{from{opacity:0;-webkit-transform:translate3d(-4em, 0, 0);-moz-transform:translate3d(-4em, 0, 0);-ms-transform:translate3d(-4em, 0, 0);-o-transform:translate3d(-4em, 0, 0);transform:translate3d(-4em, 0, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}} /** Plugin: Fox Multi Button Comments: Init plugin in #foxMultiButton. Set property color to change default color of trigger button. Default #F87D7D Fill in the property position as "X-position Y-position" for block positioning. Default "bottom left" Fill in the property offset to moving the block from the corner. Default 20px To show slogan add property slogan=true, default value true. Fill in the sloganList property to display random call messages. Format : ["Message 1", "Message 2"] Add the property sloganShowTimer to specify the slogan appearance time. Array[min,max] (to specify a random time) or number in seconds To set a days timeout for show after closing slogan add property sloganTimeoutDays. To add icons, you need to set the telegram parameter to true and fill in the additional parameters telegramLink, telegramMsg (this is the text of the floating hint and the field is not valid) and telegramColor (if you want to redefine the color of the icon) This rule also corresponds to other standard icons - whatsaspp, phone, email, vcard To add the "Get callback" icon, set the callback parameter to true. You can also edit the parameters callbackMsg и callbackColor Set content into block with #foxMultiButtonGetCallback id required **/ #foxMultiButton {opacity: 0;transform: scale(0) translate3d(0, 100%, 0);} .foxMultiButton {animation:foxMultiButtonShowIn 0.3s cubic-bezier(0.65, 0, 0.34, 1) forwards} .foxMultiButtonTriggerIcon {width:100%; height:100%; display:flex; background:#f87d7d; border-radius:100%; width:70px; height:70px; transition:.2s} .foxMultiButtonTriggerIcon svg {width:25px; margin:auto; display:block} .foxMultiButtonTriggerIcon svg * {fill:#fff} .foxMultiButtonTriggerIcon:after,.foxMultiButtonTriggerIcon:before {content: "";display: block;width: 100%;height: 100%;position: absolute; top:0;left:0;right: 0;bottom: 0;opacity: 0;border: 8px solid rgba(0, 0, 0, 0.2); box-sizing:border-box;border-radius: 100%;animation:foxMultiButtonRipple 3s cubic-bezier(0.65, 0, 0.34, 1) 0s infinite;z-index:-1;} .foxMultiButtonTriggerIcon:before {animation-delay: 0.5s;} .foxMultiButton:hover .foxMultiButtonTriggerIcon {box-shadow: 0 0 15px 0px #f87d7d;animation:foxMultiButtonRotate 0.5s cubic-bezier(0.65, 0, 0.34, 1) 0s 1} .foxMultiButton:hover .foxMultiButtonTriggerIcon:after,.foxMultiButton:hover .foxMultiButtonTriggerIcon:before {animation: none; } .foxMultiButtonSlogan {position:absolute; right:100%; top: calc(50% - 13px);padding: 5px 10px;margin-right: 20px;border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.2); transform:scale(0.5); opacity:0; max-width:280px;width: max-content;white-space: pre-wrap; } .foxMultiButtonSlogan > svg {display: block;position: absolute;top: calc(50% - 6px);right: -10px; width:10px} .foxMultiButtonSlogan > svg * {fill:rgba(0, 0, 0, 0.2)} .foxMultiButtonSloganClose {display: block;width: 20px;height: 20px;position: absolute;bottom: 100%;margin-bottom: 5px;left: 100%;margin-left: -20px;transform:scale(0.5); opacity:0;transition:.2s; cursor:pointer} .foxMultiButtonSloganClose svg {transition:.2s;} .foxMultiButtonSloganClose:hover svg {opacity:0.5 } .foxMultiButtonSloganIn {animation:foxMultiButtonShowIn 0.5s cubic-bezier(0.65, 0, 0.34, 1) forwards; background:#fff } .foxMultiButtonSloganIn .foxMultiButtonSloganClose {animation:foxMultiButtonShowIn 0.5s cubic-bezier(0.65, 0, 0.34, 1) forwards 0.5s} .foxMultiButtonWrapper {display:flex; flex-direction:column-reverse; align-items:flex-end; position:absolute;bottom:100%; right:0; width:100%;pointer-events: none; max-height:0; overflow:hidden; } .foxMultiButtonWrapper a {width:100%; height:100%; display:flex; background:#f87d7d;border-radius:100%; width:40px; height:40px; margin-bottom:10px; flex-shrink:0; opacity: 0; transform:scale(1) translateY(100px); transition:.3s} .foxMultiButtonWrapper a i {display:block; width:100%; height:100%;display:flex; flex-shrink:0;background:inherit;border-radius:100%; transition:.3s } .foxMultiButtonWrapper a i svg {width:18px; margin:auto; display:block; transition:.2s} .foxMultiButtonWrapper a i svg * {fill:#fff} .foxMultiButtonWrapper a span {position: absolute;right: 100%;top: calc(50% - 13px);padding: 5px 10px;white-space: nowrap;margin-right: 10px;border-radius: 4px;background: #747474;color: #fff; opacity:0;pointer-events: none; } .foxMultiButtonTrigger.hover .foxMultiButtonWrapper {pointer-events: all; max-height:none;} .foxMultiButtonTrigger.hover a {opacity: 1;transform:scale(1) translateY(0);} .foxMultiButtonTrigger .foxMultiButtonWrapper a:hover span{animation:foxMultiButtonShowIn 0.3s cubic-bezier(0.65, 0, 0.34, 1) forwards } .foxMultiButtonTrigger.hover .foxMultiButtonWrapper:hover {overflow:visible} .foxMultiButtonTrigger.hover .foxMultiButtonWrapper:hover a {filter:grayscale(0.8);} .foxMultiButtonTrigger.hover .foxMultiButtonWrapper:hover a:hover { opacity:1;filter:grayscale(0);} .foxMultiButtonTrigger.hover .foxMultiButtonWrapper:hover a:hover i {transform:scale(1.1)} /* .foxMultiButtonTrigger:hover .foxMultiButtonWrapper {pointer-events: all;} .foxMultiButtonTrigger:hover a {opacity: 1;transform:scale(1) translateY(0); transition-delay:0 !important} .foxMultiButtonTrigger .foxMultiButtonWrapper a:hover span{animation:foxMultiButtonShowIn 0.3s cubic-bezier(0.65, 0, 0.34, 1) forwards } .foxMultiButtonTrigger:hover .foxMultiButtonWrapper:hover a {filter:grayscale(0.8);} .foxMultiButtonTrigger:hover .foxMultiButtonWrapper:hover a:hover { opacity:1;filter:grayscale(0);} .foxMultiButtonTrigger:hover .foxMultiButtonWrapper:hover a:hover i {transform:scale(1.1)} .multiButton:hover .multiButtonWrapper a:nth-of-type(1) {transition-delay: 0.0s;} .multiButton:hover .multiButtonWrapper a:nth-of-type(2) {transition-delay: 0.3s;} .multiButton:hover .multiButtonWrapper a:nth-of-type(3) {transition-delay: 0.6s;} .multiButton:hover .multiButtonWrapper a:nth-of-type(4) {transition-delay: 0.9s;} .multiButton:hover .multiButtonWrapper a:nth-of-type(5) {transition-delay: 1.2s;} .multiButton:hover .multiButtonWrapper a:nth-of-type(6) {transition-delay: 1.5s;} */ #foxMultiButtonGetCallback {display:none} .foxMultiButtonModal {position:fixed; top:0; left:0; width:100%; height:100%; display:none;z-index: 5000;} .foxMultiButtonModalInner {position:absolute; top:0; left:0; width:100%; height:100%; display:flex; } .foxMultiButtonModalInner > .foxMultiButtonModalClose {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.5} .foxMultiButtonModalContent {margin:auto;background:#fff;z-index:1; position:relative} .foxMultiButtonModalContent > .foxMultiButtonModalClose {position:absolute; top:5px; right:5px; width:20px; height:20px; transition:.2s; cursor:pointer} .foxMultiButtonModalContent > .foxMultiButtonModalClose:hover {opacity:0.5} @keyframes foxMultiButtonRipple { from {opacity: 1;transform: scale3d(0.8, 0.8, 1);} to {opacity: 0;transform: scale3d(1.5, 1.5, 1);} } @keyframes foxMultiButtonRotate { from {opacity: 1;transform: rotate(0);} 50% {opacity:0.8} to {opacity: 1;transform: rotate(360deg);} } @keyframes foxMultiButtonShowIn { from {opacity: 0;transform: scale(0.5) translate3d(0, 100%, 0); } to {opacity: 1;transform: scale(1) translate3d(0, 0, 0);} } @media (max-width:480px) {.foxMultiButtonSlogan {max-width:200px}}