/** * 2014-2022 Presta-Mod.pl Rafał Zontek * * NOTICE OF LICENSE * * Poniższy kod jest kodem płatnym, rozpowszechanie bez pisemnej zgody autora zabronione * Moduł można zakupić na stronie Presta-Mod.pl. Modyfikacja kodu jest zabroniona, * wszelkie modyfikacje powodują utratę gwarancji * * http://presta-mod.pl * * DISCLAIMER * * * @author Presta-Mod.pl Rafał Zontek * @copyright 2014-2022 Presta-Mod.pl * @license Licecnja na jedną domenę * Presta-Mod.pl Rafał Zontek */ .ball-pulse-sync>div, .ball-pulse>div { width: 15px; height: 15px; margin: 2px; display: inline-block } .ball-pulse-sync>div, .ball-pulse>div, .ball-scale>div { background-color: #fff; border-radius: 100% } @-webkit-keyframes scale { 0%, 80% { -webkit-transform: scale(1); transform: scale(1); opacity: 1 } 45% { -webkit-transform: scale(.1); transform: scale(.1); opacity: .7 } } .ball-pulse>div:nth-child(0) { -webkit-animation: scale .75s -.36s infinite cubic-bezier(.2, .68, .18, 1.08); animation: scale .75s -.36s infinite cubic-bezier(.2, .68, .18, 1.08) } .ball-pulse>div:first-child { -webkit-animation: scale .75s -.24s infinite cubic-bezier(.2, .68, .18, 1.08); animation: scale .75s -.24s infinite cubic-bezier(.2, .68, .18, 1.08) } .ball-pulse>div:nth-child(2) { -webkit-animation: scale .75s -.12s infinite cubic-bezier(.2, .68, .18, 1.08); animation: scale .75s -.12s infinite cubic-bezier(.2, .68, .18, 1.08) } .ball-pulse>div:nth-child(3) { -webkit-animation: scale .75s 0s infinite cubic-bezier(.2, .68, .18, 1.08); animation: scale .75s 0s infinite cubic-bezier(.2, .68, .18, 1.08) } .ball-pulse>div { -webkit-animation-fill-mode: both; animation-fill-mode: both } @-webkit-keyframes ball-pulse-sync { 33% { -webkit-transform: translateY(10px); transform: translateY(10px) } 66% { -webkit-transform: translateY(-10px); transform: translateY(-10px) } to { -webkit-transform: translateY(0); transform: translateY(0) } } @keyframes ball-pulse-sync { 33% { -webkit-transform: translateY(10px); transform: translateY(10px) } 66% { -webkit-transform: translateY(-10px); transform: translateY(-10px) } to { -webkit-transform: translateY(0); transform: translateY(0) } } .ball-pulse-sync>div:nth-child(0) { -webkit-animation: ball-pulse-sync .6s -.21s infinite ease-in-out; animation: ball-pulse-sync .6s -.21s infinite ease-in-out } .ball-pulse-sync>div:first-child { -webkit-animation: ball-pulse-sync .6s -.14s infinite ease-in-out; animation: ball-pulse-sync .6s -.14s infinite ease-in-out } .ball-pulse-sync>div:nth-child(2) { -webkit-animation: ball-pulse-sync .6s -.07s infinite ease-in-out; animation: ball-pulse-sync .6s -.07s infinite ease-in-out } .ball-pulse-sync>div:nth-child(3) { -webkit-animation: ball-pulse-sync .6s 0s infinite ease-in-out; animation: ball-pulse-sync .6s 0s infinite ease-in-out } .ball-pulse-sync>div { -webkit-animation-fill-mode: both; animation-fill-mode: both } @-webkit-keyframes ball-scale { 0% { -webkit-transform: scale(0); transform: scale(0) } to { -webkit-transform: scale(1); transform: scale(1); opacity: 0 } } @keyframes ball-scale { 0% { -webkit-transform: scale(0); transform: scale(0) } to { -webkit-transform: scale(1); transform: scale(1); opacity: 0 } } .ball-scale>div { height: 60px; width: 60px; animation: ball-scale 1s 0s ease-in-out infinite } .ball-scale-random>div, .ball-scale>div { display: inline-block; margin: 2px; -webkit-animation: ball-scale 1s 0s ease-in-out infinite } .ball-scale-random { width: 37px; height: 40px } .ball-scale-random>div { background-color: #fff; border-radius: 100%; position: absolute; height: 30px; width: 30px; animation: ball-scale 1s 0s ease-in-out infinite } .ball-rotate>div, .ball-rotate>div:after, .ball-rotate>div:before { background-color: #fff; width: 15px; height: 15px; border-radius: 100% } .ball-rotate, .ball-rotate>div { position: relative } .ball-scale-random>div:first-child { margin-left: -7px; -webkit-animation: ball-scale 1s .2s ease-in-out infinite; animation: ball-scale 1s .2s ease-in-out infinite } .ball-scale-random>div:nth-child(3) { margin-left: -2px; margin-top: 9px; -webkit-animation: ball-scale 1s .5s ease-in-out infinite; animation: ball-scale 1s .5s ease-in-out infinite } @-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0); transform: rotate(0) } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg) } to { -webkit-transform: rotate(1turn); transform: rotate(1turn) } } .ball-rotate>div { margin: 2px; -webkit-animation-fill-mode: both; animation-fill-mode: both } .ball-rotate>div:first-child { -webkit-animation: rotate 1s 0s cubic-bezier(.7, -.13, .22, .86) infinite; animation: rotate 1s 0s cubic-bezier(.7, -.13, .22, .86) infinite } .ball-rotate>div:after, .ball-rotate>div:before { margin: 2px; content: ""; position: absolute; opacity: .8 } .ball-rotate>div:before { top: 0; left: -28px } .ball-rotate>div:after { top: 0; left: 25px } .ball-clip-rotate>div { border-radius: 100%; margin: 2px; border: 2px solid #fff; border-bottom-color: transparent; height: 25px; width: 25px; background: 0 0!important; display: inline-block; -webkit-animation: rotate .75s 0s linear infinite; animation: rotate .75s 0s linear infinite } @keyframes scale { 30% { -webkit-transform: scale(.3); transform: scale(.3) } to { -webkit-transform: scale(1); transform: scale(1) } } .ball-clip-rotate-pulse { position: relative; -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); transform: translateY(-15px) } .ball-clip-rotate-pulse>div { -webkit-animation-fill-mode: both; animation-fill-mode: both; position: absolute; top: 0; left: 0; border-radius: 100% } .ball-clip-rotate-pulse>div:first-child { background: #fff; height: 16px; width: 16px; top: 7px; left: -7px; -webkit-animation: scale 1s 0s cubic-bezier(.09, .57, .49, .9) infinite; animation: scale 1s 0s cubic-bezier(.09, .57, .49, .9) infinite } .ball-clip-rotate-pulse>div:last-child { position: absolute; width: 30px; height: 30px; left: -16px; top: -2px; background: 0 0; border: 2px solid; border-color: #fff transparent; -webkit-animation: rotate 1s 0s cubic-bezier(.09, .57, .49, .9) infinite; animation: rotate 1s 0s cubic-bezier(.09, .57, .49, .9) infinite; -webkit-animation-duration: 1s; animation-duration: 1s } @keyframes rotate { 0% { -webkit-transform: rotate(0) scale(1); transform: rotate(0) scale(1) } 50% { -webkit-transform: rotate(180deg) scale(.6); transform: rotate(180deg) scale(.6) } to { -webkit-transform: rotate(1turn) scale(1); transform: rotate(1turn) scale(1) } } .ball-clip-rotate-multiple { position: relative } .ball-clip-rotate-multiple>div { position: absolute; left: -20px; top: -20px; border: 2px solid #fff; border-bottom-color: transparent; border-top-color: transparent; border-radius: 100%; height: 35px; width: 35px; -webkit-animation: rotate 1s 0s ease-in-out infinite; animation: rotate 1s 0s ease-in-out infinite } .ball-clip-rotate-multiple>div:last-child { display: inline-block; top: -10px; left: -10px; width: 15px; height: 15px; -webkit-animation-duration: .5s; animation-duration: .5s; border-color: #fff transparent; -webkit-animation-direction: reverse; animation-direction: reverse } @-webkit-keyframes ball-scale-ripple { 0% { -webkit-transform: scale(.1); transform: scale(.1); opacity: 1 } 70% { -webkit-transform: scale(1); transform: scale(1); opacity: .7 } to { opacity: 0 } } @keyframes ball-scale-ripple { 0% { -webkit-transform: scale(.1); transform: scale(.1); opacity: 1 } 70% { -webkit-transform: scale(1); transform: scale(1); opacity: .7 } to { opacity: 0 } } .ball-scale-ripple>div { height: 50px; width: 50px; border-radius: 100%; border: 2px solid #fff; -webkit-animation: ball-scale-ripple 1s 0s infinite cubic-bezier(.21, .53, .56, .8); animation: ball-scale-ripple 1s 0s infinite cubic-bezier(.21, .53, .56, .8) } @-webkit-keyframes ball-scale-ripple-multiple { 0% { -webkit-transform: scale(.1); transform: scale(.1); opacity: 1 } 70% { -webkit-transform: scale(1); transform: scale(1); opacity: .7 } to { opacity: 0 } } @keyframes ball-scale-ripple-multiple { 0% { -webkit-transform: scale(.1); transform: scale(.1); opacity: 1 } 70% { -webkit-transform: scale(1); transform: scale(1); opacity: .7 } to { opacity: 0 } } .ball-scale-ripple-multiple { position: relative; -webkit-transform: translateY(-25px); -ms-transform: translateY(-25px); transform: translateY(-25px) } .ball-scale-ripple-multiple>div:nth-child(0) { -webkit-animation-delay: -.8s; animation-delay: -.8s } .ball-scale-ripple-multiple>div:first-child { -webkit-animation-delay: -.6s; animation-delay: -.6s } .ball-scale-ripple-multiple>div:nth-child(2) { -webkit-animation-delay: -.4s; animation-delay: -.4s } .ball-scale-ripple-multiple>div:nth-child(3) { -webkit-animation-delay: -.2s; animation-delay: -.2s } .ball-scale-ripple-multiple>div { position: absolute; top: -2px; left: -26px; width: 50px; height: 50px; border-radius: 100%; border: 2px solid #fff; -webkit-animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21, .53, .56, .8); animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21, .53, .56, .8) } @-webkit-keyframes ball-beat { 50% { opacity: .2; -webkit-transform: scale(.75); transform: scale(.75) } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1) } } @keyframes ball-beat { 50% { opacity: .2; -webkit-transform: scale(.75); transform: scale(.75) } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1) } } .ball-beat>div { background-color: #fff; width: 15px; height: 15px; border-radius: 100%; margin: 2px; display: inline-block; -webkit-animation: ball-beat .7s 0s infinite linear; animation: ball-beat .7s 0s infinite linear } .ball-beat>div:nth-child(2n-1) { -webkit-animation-delay: -.35s!important; animation-delay: -.35s!important } @-webkit-keyframes ball-scale-multiple { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0 } 5% { opacity: 1 } to { -webkit-transform: scale(1); transform: scale(1); opacity: 0 } } @keyframes ball-scale-multiple { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0 } 5% { opacity: 1 } to { -webkit-transform: scale(1); transform: scale(1); opacity: 0 } } .ball-scale-multiple { position: relative; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px) } .ball-scale-multiple>div:nth-child(2) { -webkit-animation-delay: -.4s; animation-delay: -.4s } .ball-scale-multiple>div:nth-child(3) { -webkit-animation-delay: -.2s; animation-delay: -.2s } .ball-scale-multiple>div { background-color: #fff; border-radius: 100%; position: absolute; left: -30px; top: 0; opacity: 0; margin: 0; width: 60px; height: 60px; -webkit-animation: ball-scale-multiple 1s 0s linear infinite; animation: ball-scale-multiple 1s 0s linear infinite } @-webkit-keyframes ball-triangle-path-1 { 33% { -webkit-transform: translate(25px, -50px); transform: translate(25px, -50px) } 66% { -webkit-transform: translate(50px); transform: translate(50px) } to { -webkit-transform: translate(0); transform: translate(0) } } @keyframes ball-triangle-path-1 { 33% { -webkit-transform: translate(25px, -50px); transform: translate(25px, -50px) } 66% { -webkit-transform: translate(50px); transform: translate(50px) } to { -webkit-transform: translate(0); transform: translate(0) } } @-webkit-keyframes ball-triangle-path-2 { 33% { -webkit-transform: translate(25px, 50px); transform: translate(25px, 50px) } 66% { -webkit-transform: translate(-25px, 50px); transform: translate(-25px, 50px) } to { -webkit-transform: translate(0); transform: translate(0) } } @keyframes ball-triangle-path-2 { 33% { -webkit-transform: translate(25px, 50px); transform: translate(25px, 50px) } 66% { -webkit-transform: translate(-25px, 50px); transform: translate(-25px, 50px) } to { -webkit-transform: translate(0); transform: translate(0) } } @-webkit-keyframes ball-triangle-path-3 { 33% { -webkit-transform: translate(-50px); transform: translate(-50px) } 66% { -webkit-transform: translate(-25px, -50px); transform: translate(-25px, -50px) } to { -webkit-transform: translate(0); transform: translate(0) } } @keyframes ball-triangle-path-3 { 33% { -webkit-transform: translate(-50px); transform: translate(-50px) } 66% { -webkit-transform: translate(-25px, -50px); transform: translate(-25px, -50px) } to { -webkit-transform: translate(0); transform: translate(0) } } .ball-triangle-path { position: relative; -webkit-transform: translate(-29.99px, -37.51px); -ms-transform: translate(-29.99px, -37.51px); transform: translate(-29.99px, -37.51px) } .ball-triangle-path>div:first-child { -webkit-animation-name: ball-triangle-path-1; animation-name: ball-triangle-path-1; -webkit-animation-delay: 0; animation-delay: 0; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite } .ball-triangle-path>div:nth-child(2) { -webkit-animation-name: ball-triangle-path-2; animation-name: ball-triangle-path-2; -webkit-animation-delay: 0; animation-delay: 0; animation-duration: 2s; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite } .ball-triangle-path>div:nth-child(2), .ball-triangle-path>div:nth-child(3) { -webkit-animation-duration: 2s; -webkit-animation-timing-function: ease-in-out } .ball-triangle-path>div:nth-child(3) { -webkit-animation-name: ball-triangle-path-3; animation-name: ball-triangle-path-3; -webkit-animation-delay: 0; animation-delay: 0; animation-duration: 2s; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite } .ball-triangle-path>div { -webkit-animation-fill-mode: both; animation-fill-mode: both; position: absolute; width: 10px; height: 10px; border-radius: 100%; border: 1px solid #fff } .ball-grid-beat>div, .ball-pulse-rise>div { background-color: #fff; height: 15px; border-radius: 100%; margin: 2px } .ball-triangle-path>div:first-of-type { top: 50px } .ball-triangle-path>div:nth-of-type(2) { left: 25px } .ball-triangle-path>div:nth-of-type(3) { top: 50px; left: 50px } @-webkit-keyframes ball-pulse-rise-even { 0% { -webkit-transform: scale(1.1); transform: scale(1.1) } 25% { -webkit-transform: translateY(-30px); transform: translateY(-30px) } 50% { -webkit-transform: scale(.4); transform: scale(.4) } 75% { -webkit-transform: translateY(30px); transform: translateY(30px) } to { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transform: scale(1); transform: scale(1) } } @keyframes ball-pulse-rise-even { 0% { -webkit-transform: scale(1.1); transform: scale(1.1) } 25% { -webkit-transform: translateY(-30px); transform: translateY(-30px) } 50% { -webkit-transform: scale(.4); transform: scale(.4) } 75% { -webkit-transform: translateY(30px); transform: translateY(30px) } to { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transform: scale(1); transform: scale(1) } } @-webkit-keyframes ball-pulse-rise-odd { 0% { -webkit-transform: scale(.4); transform: scale(.4) } 25% { -webkit-transform: translateY(30px); transform: translateY(30px) } 50% { -webkit-transform: scale(1.1); transform: scale(1.1) } 75% { -webkit-transform: translateY(-30px); transform: translateY(-30px) } to { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transform: scale(.75); transform: scale(.75) } } @keyframes ball-pulse-rise-odd { 0% { -webkit-transform: scale(.4); transform: scale(.4) } 25% { -webkit-transform: translateY(30px); transform: translateY(30px) } 50% { -webkit-transform: scale(1.1); transform: scale(1.1) } 75% { -webkit-transform: translateY(-30px); transform: translateY(-30px) } to { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transform: scale(.75); transform: scale(.75) } } .ball-pulse-rise>div { width: 15px; -webkit-animation-fill-mode: both; animation-fill-mode: both; display: inline-block; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: cubic-bezier(.15, .46, .9, .6); animation-timing-function: cubic-bezier(.15, .46, .9, .6); -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-delay: 0; animation-delay: 0 } .ball-pulse-rise>div:nth-child(2n) { -webkit-animation-name: ball-pulse-rise-even; animation-name: ball-pulse-rise-even } .ball-pulse-rise>div:nth-child(2n-1) { -webkit-animation-name: ball-pulse-rise-odd; animation-name: ball-pulse-rise-odd } @-webkit-keyframes ball-grid-beat { 50% { opacity: .7 } to { opacity: 1 } } @keyframes ball-grid-beat { 50% { opacity: .7 } to { opacity: 1 } } .ball-grid-beat { width: 57px } .ball-grid-beat>div:first-child { -webkit-animation-delay: .44s; animation-delay: .44s; -webkit-animation-duration: 1.27s; animation-duration: 1.27s } .ball-grid-beat>div:nth-child(2) { -webkit-animation-delay: .2s; animation-delay: .2s; -webkit-animation-duration: 1.52s; animation-duration: 1.52s } .ball-grid-beat>div:nth-child(3) { -webkit-animation-delay: .14s; animation-delay: .14s; -webkit-animation-duration: .61s; animation-duration: .61s } .ball-grid-beat>div:nth-child(4) { -webkit-animation-delay: .15s; animation-delay: .15s; -webkit-animation-duration: .82s; animation-duration: .82s } .ball-grid-beat>div:nth-child(5) { -webkit-animation-delay: -.01s; animation-delay: -.01s; -webkit-animation-duration: 1.24s; animation-duration: 1.24s } .ball-grid-beat>div:nth-child(6) { -webkit-animation-delay: -.07s; animation-delay: -.07s; -webkit-animation-duration: 1.35s; animation-duration: 1.35s } .ball-grid-beat>div:nth-child(7) { -webkit-animation-delay: .29s; animation-delay: .29s; -webkit-animation-duration: 1.44s; animation-duration: 1.44s } .ball-grid-beat>div:nth-child(8) { -webkit-animation-delay: .63s; animation-delay: .63s; -webkit-animation-duration: 1.19s; animation-duration: 1.19s } .ball-grid-beat>div:nth-child(9) { -webkit-animation-delay: -.18s; animation-delay: -.18s; -webkit-animation-duration: 1.48s; animation-duration: 1.48s } .ball-grid-beat>div { width: 15px; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: ball-grid-beat; animation-name: ball-grid-beat; animation-iteration-count: infinite; -webkit-animation-delay: 0; animation-delay: 0 } .ball-grid-beat>div, .ball-grid-pulse>div { display: inline-block; float: left; -webkit-animation-iteration-count: infinite } @-webkit-keyframes ball-grid-pulse { 0% { -webkit-transform: scale(1); transform: scale(1) } 50% { -webkit-transform: scale(.5); transform: scale(.5); opacity: .7 } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1 } } @keyframes ball-grid-pulse { 0% { -webkit-transform: scale(1); transform: scale(1) } 50% { -webkit-transform: scale(.5); transform: scale(.5); opacity: .7 } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1 } } .ball-grid-pulse { width: 57px } .ball-grid-pulse>div, .ball-spin-fade-loader>div { background-color: #fff; width: 15px; height: 15px; border-radius: 100%; margin: 2px } .ball-grid-pulse>div:first-child { -webkit-animation-delay: .58s; animation-delay: .58s; -webkit-animation-duration: .9s; animation-duration: .9s } .ball-grid-pulse>div:nth-child(2) { -webkit-animation-delay: .01s; animation-delay: .01s; -webkit-animation-duration: .94s; animation-duration: .94s } .ball-grid-pulse>div:nth-child(3) { -webkit-animation-delay: .25s; animation-delay: .25s; -webkit-animation-duration: 1.43s; animation-duration: 1.43s } .ball-grid-pulse>div:nth-child(4) { -webkit-animation-delay: -.03s; animation-delay: -.03s; -webkit-animation-duration: .74s; animation-duration: .74s } .ball-grid-pulse>div:nth-child(5) { -webkit-animation-delay: .21s; animation-delay: .21s; -webkit-animation-duration: .68s; animation-duration: .68s } .ball-grid-pulse>div:nth-child(6) { -webkit-animation-delay: .25s; animation-delay: .25s; -webkit-animation-duration: 1.17s; animation-duration: 1.17s } .ball-grid-pulse>div:nth-child(7) { -webkit-animation-delay: .46s; animation-delay: .46s; -webkit-animation-duration: 1.41s; animation-duration: 1.41s } .ball-grid-pulse>div:nth-child(8) { -webkit-animation-delay: .02s; animation-delay: .02s; -webkit-animation-duration: 1.56s; animation-duration: 1.56s } .ball-grid-pulse>div:nth-child(9) { -webkit-animation-delay: .13s; animation-delay: .13s; -webkit-animation-duration: .78s; animation-duration: .78s } .ball-grid-pulse>div { -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: ball-grid-pulse; animation-name: ball-grid-pulse; animation-iteration-count: infinite; -webkit-animation-delay: 0; animation-delay: 0 } @-webkit-keyframes ball-spin-fade-loader { 50% { opacity: .3; -webkit-transform: scale(.4); transform: scale(.4) } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1) } } @keyframes ball-spin-fade-loader { 50% { opacity: .3; -webkit-transform: scale(.4); transform: scale(.4) } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1) } } .ball-spin-fade-loader { position: relative; top: -10px; left: -10px } .ball-spin-fade-loader>div:first-child { top: 25px; left: 0; -webkit-animation: ball-spin-fade-loader 1s -.96s infinite linear; animation: ball-spin-fade-loader 1s -.96s infinite linear } .ball-spin-fade-loader>div:nth-child(2) { top: 17.05px; left: 17.05px; -webkit-animation: ball-spin-fade-loader 1s -.84s infinite linear; animation: ball-spin-fade-loader 1s -.84s infinite linear } .ball-spin-fade-loader>div:nth-child(3) { top: 0; left: 25px; -webkit-animation: ball-spin-fade-loader 1s -.72s infinite linear; animation: ball-spin-fade-loader 1s -.72s infinite linear } .ball-spin-fade-loader>div:nth-child(4) { top: -17.05px; left: 17.05px; -webkit-animation: ball-spin-fade-loader 1s -.6s infinite linear; animation: ball-spin-fade-loader 1s -.6s infinite linear } .ball-spin-fade-loader>div:nth-child(5) { top: -25px; left: 0; -webkit-animation: ball-spin-fade-loader 1s -.48s infinite linear; animation: ball-spin-fade-loader 1s -.48s infinite linear } .ball-spin-fade-loader>div:nth-child(6) { top: -17.05px; left: -17.05px; -webkit-animation: ball-spin-fade-loader 1s -.36s infinite linear; animation: ball-spin-fade-loader 1s -.36s infinite linear } .ball-spin-fade-loader>div:nth-child(7) { top: 0; left: -25px; -webkit-animation: ball-spin-fade-loader 1s -.24s infinite linear; animation: ball-spin-fade-loader 1s -.24s infinite linear } .ball-spin-fade-loader>div:nth-child(8) { top: 17.05px; left: -17.05px; -webkit-animation: ball-spin-fade-loader 1s -.12s infinite linear; animation: ball-spin-fade-loader 1s -.12s infinite linear } .ball-spin-fade-loader>div { -webkit-animation-fill-mode: both; animation-fill-mode: both; position: absolute } @-webkit-keyframes ball-spin-loader { 75% { opacity: .2 } to { opacity: 1 } } @keyframes ball-spin-loader { 75% { opacity: .2 } to { opacity: 1 } } .ball-spin-loader { position: relative } .ball-spin-loader>span:first-child { top: 45px; left: 0; -webkit-animation: ball-spin-loader 2s .9s infinite linear; animation: ball-spin-loader 2s .9s infinite linear } .ball-spin-loader>span:nth-child(2) { top: 30.68px; left: 30.68px; -webkit-animation: ball-spin-loader 2s 1.8s infinite linear; animation: ball-spin-loader 2s 1.8s infinite linear } .ball-spin-loader>span:nth-child(3) { top: 0; left: 45px; -webkit-animation: ball-spin-loader 2s 2.7s infinite linear; animation: ball-spin-loader 2s 2.7s infinite linear } .ball-spin-loader>span:nth-child(4) { top: -30.68px; left: 30.68px; -webkit-animation: ball-spin-loader 2s 3.6s infinite linear; animation: ball-spin-loader 2s 3.6s infinite linear } .ball-spin-loader>span:nth-child(5) { top: -45px; left: 0; -webkit-animation: ball-spin-loader 2s 4.5s infinite linear; animation: ball-spin-loader 2s 4.5s infinite linear } .ball-spin-loader>span:nth-child(6) { top: -30.68px; left: -30.68px; -webkit-animation: ball-spin-loader 2s 5.4s infinite linear; animation: ball-spin-loader 2s 5.4s infinite linear } .ball-spin-loader>span:nth-child(7) { top: 0; left: -45px; -webkit-animation: ball-spin-loader 2s 6.3s infinite linear; animation: ball-spin-loader 2s 6.3s infinite linear } .ball-spin-loader>span:nth-child(8) { top: 30.68px; left: -30.68px; -webkit-animation: ball-spin-loader 2s 7.2s infinite linear; animation: ball-spin-loader 2s 7.2s infinite linear } .ball-spin-loader>div { -webkit-animation-fill-mode: both; animation-fill-mode: both; position: absolute; width: 15px; height: 15px; border-radius: 100%; background: green } .ball-zig-zag-deflect>div, .ball-zig-zag>div { background-color: #fff; width: 15px; height: 15px; border-radius: 100%; margin: 2px 2px 2px 15px; top: 4px; left: -7px } @-webkit-keyframes ball-zig { 33% { -webkit-transform: translate(-15px, -30px); transform: translate(-15px, -30px) } 66% { -webkit-transform: translate(15px, -30px); transform: translate(15px, -30px) } to { -webkit-transform: translate(0); transform: translate(0) } } @keyframes ball-zig { 33% { -webkit-transform: translate(-15px, -30px); transform: translate(-15px, -30px) } 66% { -webkit-transform: translate(15px, -30px); transform: translate(15px, -30px) } to { -webkit-transform: translate(0); transform: translate(0) } } @-webkit-keyframes ball-zag { 33% { -webkit-transform: translate(15px, 30px); transform: translate(15px, 30px) } 66% { -webkit-transform: translate(-15px, 30px); transform: translate(-15px, 30px) } to { -webkit-transform: translate(0); transform: translate(0) } } @keyframes ball-zag { 33% { -webkit-transform: translate(15px, 30px); transform: translate(15px, 30px) } 66% { -webkit-transform: translate(-15px, 30px); transform: translate(-15px, 30px) } to { -webkit-transform: translate(0); transform: translate(0) } } .ball-zig-zag { position: relative; -webkit-transform: translate(-15px, -15px); -ms-transform: translate(-15px, -15px); transform: translate(-15px, -15px) } .ball-zig-zag>div { -webkit-animation-fill-mode: both; animation-fill-mode: both; position: absolute } .ball-zig-zag>div:first-child { -webkit-animation: ball-zig .7s 0s infinite linear; animation: ball-zig .7s 0s infinite linear } .ball-zig-zag>div:last-child { -webkit-animation: ball-zag .7s 0s infinite linear; animation: ball-zag .7s 0s infinite linear } @-webkit-keyframes ball-zig-deflect { 17%, 84% { -webkit-transform: translate(-15px, -30px); transform: translate(-15px, -30px) } 34%, 67% { -webkit-transform: translate(15px, -30px); transform: translate(15px, -30px) } 50%, to { -webkit-transform: translate(0); transform: translate(0) } } @keyframes ball-zig-deflect { 17%, 84% { -webkit-transform: translate(-15px, -30px); transform: translate(-15px, -30px) } 34%, 67% { -webkit-transform: translate(15px, -30px); transform: translate(15px, -30px) } 50%, to { -webkit-transform: translate(0); transform: translate(0) } } @-webkit-keyframes ball-zag-deflect { 17%, 84% { -webkit-transform: translate(15px, 30px); transform: translate(15px, 30px) } 34%, 67% { -webkit-transform: translate(-15px, 30px); transform: translate(-15px, 30px) } 50%, to { -webkit-transform: translate(0); transform: translate(0) } } @keyframes ball-zag-deflect { 17%, 84% { -webkit-transform: translate(15px, 30px); transform: translate(15px, 30px) } 34%, 67% { -webkit-transform: translate(-15px, 30px); transform: translate(-15px, 30px) } 50%, to { -webkit-transform: translate(0); transform: translate(0) } } .ball-zig-zag-deflect { position: relative; -webkit-transform: translate(-15px, -15px); -ms-transform: translate(-15px, -15px); transform: translate(-15px, -15px) } .ball-zig-zag-deflect>div { -webkit-animation-fill-mode: both; animation-fill-mode: both; position: absolute } .ball-zig-zag-deflect>div:first-child { -webkit-animation: ball-zig-deflect 1.5s 0s infinite linear; animation: ball-zig-deflect 1.5s 0s infinite linear } .ball-zig-zag-deflect>div:last-child { -webkit-animation: ball-zag-deflect 1.5s 0s infinite linear; animation: ball-zag-deflect 1.5s 0s infinite linear } @-webkit-keyframes line-scale { 0%, to { -webkit-transform: scaley(1); transform: scaley(1) } 50% { -webkit-transform: scaley(.4); transform: scaley(.4) } } @keyframes line-scale { 0%, to { -webkit-transform: scaley(1); transform: scaley(1) } 50% { -webkit-transform: scaley(.4); transform: scaley(.4) } } .line-scale>div:first-child { -webkit-animation: line-scale 1s -.4s infinite cubic-bezier(.2, .68, .18, 1.08); animation: line-scale 1s -.4s infinite cubic-bezier(.2, .68, .18, 1.08) } .line-scale>div:nth-child(2) { -webkit-animation: line-scale 1s -.3s infinite cubic-bezier(.2, .68, .18, 1.08); animation: line-scale 1s -.3s infinite cubic-bezier(.2, .68, .18, 1.08) } .line-scale>div:nth-child(3) { -webkit-animation: line-scale 1s -.2s infinite cubic-bezier(.2, .68, .18, 1.08); animation: line-scale 1s -.2s infinite cubic-bezier(.2, .68, .18, 1.08) } .line-scale>div:nth-child(4) { -webkit-animation: line-scale 1s -.1s infinite cubic-bezier(.2, .68, .18, 1.08); animation: line-scale 1s -.1s infinite cubic-bezier(.2, .68, .18, 1.08) } .line-scale>div:nth-child(5) { -webkit-animation: line-scale 1s 0s infinite cubic-bezier(.2, .68, .18, 1.08); animation: line-scale 1s 0s infinite cubic-bezier(.2, .68, .18, 1.08) } .line-scale>div { animation-fill-mode: both; display: inline-block } .line-scale-party>div, .line-scale>div { background-color: #fff; border-radius: 2px; margin: 2px; width: 4px; height: 35px; -webkit-animation-fill-mode: both } @-webkit-keyframes line-scale-party { 0%, to { -webkit-transform: scale(1); transform: scale(1) } 50% { -webkit-transform: scale(.5); transform: scale(.5) } } @keyframes line-scale-party { 0%, to { -webkit-transform: scale(1); transform: scale(1) } 50% { -webkit-transform: scale(.5); transform: scale(.5) } } .line-scale-party>div:first-child { -webkit-animation-delay: -.09s; animation-delay: -.09s; -webkit-animation-duration: .83s; animation-duration: .83s } .line-scale-party>div:nth-child(2) { -webkit-animation-delay: .33s; animation-delay: .33s; -webkit-animation-duration: .64s; animation-duration: .64s } .line-scale-party>div:nth-child(3) { -webkit-animation-delay: .32s; animation-delay: .32s; -webkit-animation-duration: .39s; animation-duration: .39s } .line-scale-party>div:nth-child(4) { -webkit-animation-delay: .47s; animation-delay: .47s; -webkit-animation-duration: .52s; animation-duration: .52s } .line-scale-party>div { animation-fill-mode: both; display: inline-block; -webkit-animation-name: line-scale-party; animation-name: line-scale-party; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-delay: 0; animation-delay: 0 } @-webkit-keyframes line-scale-pulse-out { 0%, to { -webkit-transform: scaley(1); transform: scaley(1) } 50% { -webkit-transform: scaley(.4); transform: scaley(.4) } } @keyframes line-scale-pulse-out { 0%, to { -webkit-transform: scaley(1); transform: scaley(1) } 50% { -webkit-transform: scaley(.4); transform: scaley(.4) } } .line-scale-pulse-out>div { background-color: #fff; width: 4px; height: 35px; border-radius: 2px; margin: 2px; display: inline-block; -webkit-animation: line-scale-pulse-out .9s -.6s infinite cubic-bezier(.85, .25, .37, .85); animation: line-scale-pulse-out .9s -.6s infinite cubic-bezier(.85, .25, .37, .85) } .line-scale-pulse-out>div:nth-child(2), .line-scale-pulse-out>div:nth-child(4) { -webkit-animation-delay: -.4s!important; animation-delay: -.4s!important } .line-scale-pulse-out>div:first-child, .line-scale-pulse-out>div:nth-child(5) { -webkit-animation-delay: -.2s!important; animation-delay: -.2s!important } @-webkit-keyframes line-scale-pulse-out-rapid { 0%, 90% { -webkit-transform: scaley(1); transform: scaley(1) } 80% { -webkit-transform: scaley(.3); transform: scaley(.3) } } @keyframes line-scale-pulse-out-rapid { 0%, 90% { -webkit-transform: scaley(1); transform: scaley(1) } 80% { -webkit-transform: scaley(.3); transform: scaley(.3) } } .line-scale-pulse-out-rapid>div { background-color: #fff; width: 4px; height: 35px; border-radius: 2px; margin: 2px; display: inline-block; -webkit-animation: line-scale-pulse-out-rapid .9s -.5s infinite cubic-bezier(.11, .49, .38, .78); animation: line-scale-pulse-out-rapid .9s -.5s infinite cubic-bezier(.11, .49, .38, .78) } .line-scale-pulse-out-rapid>div:nth-child(2), .line-scale-pulse-out-rapid>div:nth-child(4) { -webkit-animation-delay: -.25s!important; animation-delay: -.25s!important } .line-scale-pulse-out-rapid>div:first-child, .line-scale-pulse-out-rapid>div:nth-child(5) { -webkit-animation-delay: 0s!important; animation-delay: 0s!important } @-webkit-keyframes line-spin-fade-loader { 50% { opacity: .3 } to { opacity: 1 } } @keyframes line-spin-fade-loader { 50% { opacity: .3 } to { opacity: 1 } } .line-spin-fade-loader { position: relative; top: -10px; left: -4px } .line-spin-fade-loader>div:first-child { top: 20px; left: 0; -webkit-animation: line-spin-fade-loader 1.2s -.84s infinite ease-in-out; animation: line-spin-fade-loader 1.2s -.84s infinite ease-in-out } .line-spin-fade-loader>div:nth-child(2) { top: 13.64px; left: 13.64px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: line-spin-fade-loader 1.2s -.72s infinite ease-in-out; animation: line-spin-fade-loader 1.2s -.72s infinite ease-in-out } .line-spin-fade-loader>div:nth-child(3) { top: 0; left: 20px; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); -webkit-animation: line-spin-fade-loader 1.2s -.6s infinite ease-in-out; animation: line-spin-fade-loader 1.2s -.6s infinite ease-in-out } .line-spin-fade-loader>div:nth-child(4) { top: -13.64px; left: 13.64px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-animation: line-spin-fade-loader 1.2s -.48s infinite ease-in-out; animation: line-spin-fade-loader 1.2s -.48s infinite ease-in-out } .line-spin-fade-loader>div:nth-child(5) { top: -20px; left: 0; -webkit-animation: line-spin-fade-loader 1.2s -.36s infinite ease-in-out; animation: line-spin-fade-loader 1.2s -.36s infinite ease-in-out } .line-spin-fade-loader>div:nth-child(6) { top: -13.64px; left: -13.64px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: line-spin-fade-loader 1.2s -.24s infinite ease-in-out; animation: line-spin-fade-loader 1.2s -.24s infinite ease-in-out } .line-spin-fade-loader>div:nth-child(7) { top: 0; left: -20px; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); -webkit-animation: line-spin-fade-loader 1.2s -.12s infinite ease-in-out; animation: line-spin-fade-loader 1.2s -.12s infinite ease-in-out } .line-spin-fade-loader>div:nth-child(8) { top: 13.64px; left: -13.64px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-animation: line-spin-fade-loader 1.2s 0s infinite ease-in-out; animation: line-spin-fade-loader 1.2s 0s infinite ease-in-out } .line-spin-fade-loader>div { background-color: #fff; border-radius: 2px; margin: 2px; -webkit-animation-fill-mode: both; animation-fill-mode: both; position: absolute; width: 5px; height: 15px } @-webkit-keyframes triangle-skew-spin { 25% { -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0); transform: perspective(100px) rotateX(180deg) rotateY(0) } 50% { -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg); transform: perspective(100px) rotateX(180deg) rotateY(180deg) } 75% { -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg); transform: perspective(100px) rotateX(0) rotateY(180deg) } to { -webkit-transform: perspective(100px) rotateX(0) rotateY(0); transform: perspective(100px) rotateX(0) rotateY(0) } } @keyframes triangle-skew-spin { 25% { -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0); transform: perspective(100px) rotateX(180deg) rotateY(0) } 50% { -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg); transform: perspective(100px) rotateX(180deg) rotateY(180deg) } 75% { -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg); transform: perspective(100px) rotateX(0) rotateY(180deg) } to { -webkit-transform: perspective(100px) rotateX(0) rotateY(0); transform: perspective(100px) rotateX(0) rotateY(0) } } .triangle-skew-spin>div { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid #fff; -webkit-animation: triangle-skew-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite; animation: triangle-skew-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite } @-webkit-keyframes square-spin { 25% { -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0); transform: perspective(100px) rotateX(180deg) rotateY(0) } 50% { -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg); transform: perspective(100px) rotateX(180deg) rotateY(180deg) } 75% { -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg); transform: perspective(100px) rotateX(0) rotateY(180deg) } to { -webkit-transform: perspective(100px) rotateX(0) rotateY(0); transform: perspective(100px) rotateX(0) rotateY(0) } } @keyframes square-spin { 25% { -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0); transform: perspective(100px) rotateX(180deg) rotateY(0) } 50% { -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg); transform: perspective(100px) rotateX(180deg) rotateY(180deg) } 75% { -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg); transform: perspective(100px) rotateX(0) rotateY(180deg) } to { -webkit-transform: perspective(100px) rotateX(0) rotateY(0); transform: perspective(100px) rotateX(0) rotateY(0) } } .square-spin>div { width: 50px; height: 50px; background: #fff; border: 1px solid red; -webkit-animation: square-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite; animation: square-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite } .pacman>div:first-of-type, .pacman>div:nth-child(2) { width: 0; height: 0; border-right: 25px solid transparent; border-top: 25px solid #fff; border-left: 25px solid #fff; border-bottom: 25px solid #fff; border-radius: 25px; position: relative; left: -30px } @-webkit-keyframes rotate_pacman_half_up { 0%, to { -webkit-transform: rotate(270deg); transform: rotate(270deg) } 50% { -webkit-transform: rotate(1turn); transform: rotate(1turn) } } @keyframes rotate_pacman_half_up { 0%, to { -webkit-transform: rotate(270deg); transform: rotate(270deg) } 50% { -webkit-transform: rotate(1turn); transform: rotate(1turn) } } @-webkit-keyframes rotate_pacman_half_down { 0%, to { -webkit-transform: rotate(90deg); transform: rotate(90deg) } 50% { -webkit-transform: rotate(0); transform: rotate(0) } } @keyframes rotate_pacman_half_down { 0%, to { -webkit-transform: rotate(90deg); transform: rotate(90deg) } 50% { -webkit-transform: rotate(0); transform: rotate(0) } } @-webkit-keyframes pacman-balls { 75% { opacity: .7 } to { -webkit-transform: translate(-100px, -6.25px); transform: translate(-100px, -6.25px) } } @keyframes pacman-balls { 75% { opacity: .7 } to { -webkit-transform: translate(-100px, -6.25px); transform: translate(-100px, -6.25px) } } .pacman { position: relative } .pacman>div:nth-child(3) { -webkit-animation: pacman-balls 1s -.66s infinite linear; animation: pacman-balls 1s -.66s infinite linear } .pacman>div:nth-child(4) { -webkit-animation: pacman-balls 1s -.33s infinite linear; animation: pacman-balls 1s -.33s infinite linear } .pacman>div:nth-child(5) { -webkit-animation: pacman-balls 1s 0s infinite linear; animation: pacman-balls 1s 0s infinite linear } .pacman>div:first-of-type { -webkit-animation: rotate_pacman_half_up .5s 0s infinite; animation: rotate_pacman_half_up .5s 0s infinite } .pacman>div:nth-child(2) { -webkit-animation: rotate_pacman_half_down .5s 0s infinite; animation: rotate_pacman_half_down .5s 0s infinite; margin-top: -50px } .pacman>div:nth-child(3), .pacman>div:nth-child(4), .pacman>div:nth-child(5), .pacman>div:nth-child(6) { background-color: #fff; border-radius: 100%; margin: 2px; width: 10px; height: 10px; position: absolute; -webkit-transform: translateY(-6.25px); -ms-transform: translateY(-6.25px); transform: translateY(-6.25px); top: 25px; left: 70px } @-webkit-keyframes cube-transition { 25% { -webkit-transform: translateX(50px) scale(.5) rotate(-90deg); transform: translateX(50px) scale(.5) rotate(-90deg) } 50% { -webkit-transform: translate(50px, 50px) rotate(-180deg); transform: translate(50px, 50px) rotate(-180deg) } 75% { -webkit-transform: translateY(50px) scale(.5) rotate(-270deg); transform: translateY(50px) scale(.5) rotate(-270deg) } to { -webkit-transform: rotate(-1turn); transform: rotate(-1turn) } } @keyframes cube-transition { 25% { -webkit-transform: translateX(50px) scale(.5) rotate(-90deg); transform: translateX(50px) scale(.5) rotate(-90deg) } 50% { -webkit-transform: translate(50px, 50px) rotate(-180deg); transform: translate(50px, 50px) rotate(-180deg) } 75% { -webkit-transform: translateY(50px) scale(.5) rotate(-270deg); transform: translateY(50px) scale(.5) rotate(-270deg) } to { -webkit-transform: rotate(-1turn); transform: rotate(-1turn) } } .cube-transition { position: relative; -webkit-transform: translate(-25px, -25px); -ms-transform: translate(-25px, -25px); transform: translate(-25px, -25px) } .cube-transition>div { width: 10px; height: 10px; position: absolute; top: -5px; left: -5px; background-color: #fff; -webkit-animation: cube-transition 1.6s 0s infinite ease-in-out; animation: cube-transition 1.6s 0s infinite ease-in-out } .cube-transition>div:last-child { -webkit-animation-delay: -.8s; animation-delay: -.8s } @-webkit-keyframes spin-rotate { 0% { -webkit-transform: rotate(0); transform: rotate(0) } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg) } to { -webkit-transform: rotate(1turn); transform: rotate(1turn) } } @keyframes spin-rotate { 0% { -webkit-transform: rotate(0); transform: rotate(0) } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg) } to { -webkit-transform: rotate(1turn); transform: rotate(1turn) } } .semi-circle-spin { position: relative; width: 35px; height: 35px; overflow: hidden } .semi-circle-spin>div { position: absolute; border-width: 0; border-radius: 100%; -webkit-animation: spin-rotate .6s 0s infinite linear; animation: spin-rotate .6s 0s infinite linear; background-image: -webkit-linear-gradient(transparent, transparent 70%, #fff 0, #fff); background-image: linear-gradient(transparent, transparent 70%, #fff 0, #fff); width: 100%; height: 100% } @-webkit-keyframes bar-progress { 0%, to { -webkit-transform: scaleY(20%); transform: scaleY(20%); opacity: 1 } 25%, 75% { -webkit-transform: translateX(6%) scaleY(10%); transform: translateX(6%) scaleY(10%); opacity: .7 } 50% { -webkit-transform: translateX(20%) scaleY(20%); transform: translateX(20%) scaleY(20%); opacity: 1 } } @keyframes bar-progress { 0%, to { -webkit-transform: scaleY(20%); transform: scaleY(20%); opacity: 1 } 25%, 75% { -webkit-transform: translateX(6%) scaleY(10%); transform: translateX(6%) scaleY(10%); opacity: .7 } 50% { -webkit-transform: translateX(20%) scaleY(20%); transform: translateX(20%) scaleY(20%); opacity: 1 } } .bar-progress { width: 30%; height: 12px } .bar-progress>div { position: relative; width: 20%; height: 12px; border-radius: 10px; background-color: #fff; -webkit-animation: bar-progress 3s cubic-bezier(.57, .1, .44, .93) infinite; animation: bar-progress 3s cubic-bezier(.57, .1, .44, .93) infinite; opacity: 1 } .bar-swing, .bar-swing>div { height: 8px; width: 30% } @-webkit-keyframes bar-swing { 0%, to { left: 0 } 50% { left: 70% } } @keyframes bar-swing { 0%, to { left: 0 } 50% { left: 70% } } .bar-swing>div { position: relative; border-radius: 10px; background-color: #fff; -webkit-animation: bar-swing 1.5s infinite; animation: bar-swing 1.5s infinite } @-webkit-keyframes bar-swing-container { 0%, to { left: 0; -webkit-transform: translateX(0); transform: translateX(0) } 50% { left: 70%; -webkit-transform: translateX(-4px); transform: translateX(-4px) } } @keyframes bar-swing-container { 0%, to { left: 0; -webkit-transform: translateX(0); transform: translateX(0) } 50% { left: 70%; -webkit-transform: translateX(-4px); transform: translateX(-4px) } } .bar-swing-container { width: 20%; height: 8px; position: relative } .bar-swing-container div:first-child { position: absolute; width: 100%; background-color: hsla(0, 0%, 100%, .2); height: 12px; border-radius: 10px } .bar-swing-container div:nth-child(2) { position: absolute; width: 30%; height: 8px; border-radius: 10px; background-color: #fff; -webkit-animation: bar-swing-container 2s cubic-bezier(.91, .35, .12, .6) infinite; animation: bar-swing-container 2s cubic-bezier(.91, .35, .12, .6) infinite; margin: 2px 2px 0 } .noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none } #easypack-search { height: 60px; border: 1px; padding-left: 30px; } .easypack-widget { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; -ms-flex: 1; font-family: Open Sans, sans-serif; font-weight: 400; font-size: 13px; line-height: 1.42857143 } .easypack-widget .hidden { display: none!important } .easypack-widget * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } .easypack-widget a { color: #000!important } .easypack-widget .loading-icon-wrapper { text-align: center; margin-top: 200px } .easypack-widget .loading-icon-wrapper.loader-wrapper:not(.hidden) { position: absolute; pointer-events: fill; display: flex; z-index: 1000; justify-content: center; align-items: center; margin-top: 0; top: 0; bottom: 0; right: 0; left: 0; background-color: #f1f1f1 } .easypack-widget .loading-icon-wrapper.loader-wrapper:not(.hidden).hidden { display: none } .easypack-widget .info-box-wrapper { width: 230px!important; margin-left: 38px } .easypack-widget .info-box-wrapper img { top: 25px; right: 5px } .easypack-widget .info-box-wrapper .info-window { width: 180px } .easypack-widget .info-box-wrapper .info-window .content { border-radius: 20px; display: flex; flex-direction: column } .easypack-widget .info-box-wrapper .info-window .content .point-wrapper { text-align: center; padding: 15px } .easypack-widget .info-box-wrapper .info-window .content .point-wrapper h1 { text-align: center; clear: both } .easypack-widget .info-box-wrapper .info-window .content .point-wrapper .mobile-details-content:first-of-type { margin-top: 10px } .easypack-widget .info-box-wrapper .info-window .content .links { padding: 0 10px; border-top: 1px solid #4b4b4b; text-align: left; display: flex; justify-content: center; flex-direction: column } .easypack-widget .info-box-wrapper .info-window .content .links a { text-decoration: none; padding: 0 0 2px; border: 2px solid #fab800; border-radius: 5px; width: 100%; position: relative; text-align: center; margin-top: 10px; display: block; color: #fff!important } .easypack-widget .info-box-wrapper .info-window .content .links a.select-link { cursor: pointer; background-color: #fab800; font-weight: 700 } .easypack-widget .info-box-wrapper .info-window .content .links span { display: block; width: 20px; height: 20px; left: 3px } .easypack-widget .info-box-wrapper .info-window .content .route-link { margin-right: 30px } .easypack-widget .info-box-wrapper .info-window .content .details-link, .easypack-widget .info-box-wrapper .info-window .content .details-link-mobile { cursor: pointer } .easypack-widget .info-box-wrapper .info-window .content .details-link-mobile { display: none } @media screen and (max-width:768px) { .easypack-widget .info-box-wrapper .info-window .content { flex-direction: column; padding: 10px } .easypack-widget .info-box-wrapper .info-window .content .point-wrapper { padding: 5px } .easypack-widget .info-box-wrapper .info-window .content .point-wrapper .opening-hours-label { display: none; padding: 10px } .easypack-widget .info-box-wrapper .info-window .content .links { padding: 5px } } @media screen and (max-width:768px) and (orientation:landscape) { .easypack-widget .info-box-wrapper .info-window .content { flex-direction: row; justify-content: space-between; flex-wrap: nowrap; padding: 3px 5px } .easypack-widget .info-box-wrapper .info-window .content .links { padding-right: 10px } .easypack-widget .info-box-wrapper .info-window .content .links a { width: 110px } } @media screen and (max-width:768px) { .easypack-widget .info-box-wrapper { margin-left: 30px!important; width: 200px!important } .easypack-widget .info-box-wrapper .info-window { width: 180px!important } } @media screen and (max-width:768px) and (orientation:landscape) { .easypack-widget .info-box-wrapper { width: 300px!important; margin-left: -20px!important } .easypack-widget .info-box-wrapper img { top: 30px; right: 8px } .easypack-widget .info-box-wrapper .info-window { width: 280px!important } } .easypack-widget button { font-family: Open Sans, sans-serif; -webkit-appearance: button; overflow: visible; text-transform: none; align-items: flex-start; letter-spacing: normal; word-spacing: normal; text-rendering: auto; text-indent: 0; text-shadow: none; -webkit-writing-mode: horizontal-tb } .easypack-widget input { margin: 0; font-family: Open Sans, sans-serif; line-height: 1.42857143 } .easypack-widget .easypack-dropdown { position: relative } .easypack-widget .easypack-dropdown__select { cursor: pointer; border: 1px solid #ccc; padding: 10px; border-radius: 5px } .easypack-widget .easypack-dropdown__arrow { float: right } .easypack-widget .easypack-dropdown__arrow img { max-height: 10px } .easypack-widget .easypack-dropdown[data-open=true] .easypack-dropdown__arrow { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg) } .easypack-widget .easypack-dropdown__search { width: 100%; padding: 5px; font-weight: 700; font-size: 12px } .easypack-widget .easypack-dropdown__content { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background: #fafafa; padding: 10px; border: 1px solid #ccc; border-top: 0; position: absolute; top: 100%; right: 0; left: 0; z-index: 2 } .easypack-widget .easypack-dropdown__list { padding: 0; max-height: 210px; overflow-y: scroll } .easypack-widget .easypack-dropdown__list li { cursor: pointer; list-style: none; padding: 5px } .easypack-widget .easypack-dropdown__list li:hover { background: #f1f1f1 } .easypack-widget .easypack-dropdown[data-open=true] .easypack-dropdown__select { border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0 } .easypack-widget .easypack-dropdown[data-open=false] .easypack-dropdown__content { display: none } .easypack-widget .search-input { display: block; width: 100%; height: 34px; padding: 6px 12px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px; -webkit-appearance: none; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); -webkit-transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out; -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out } .easypack-widget .search-group { position: relative; display: table; border-collapse: separate } .easypack-widget .search-group .search-input { position: relative; z-index: 2; float: left; width: 100%; margin-bottom: 0 } .easypack-widget .input-group-addon, .easypack-widget .search-group-btn, .easypack-widget .search-group.search-input { display: table-cell } .easypack-widget .search-group-btn { position: relative; font-size: 0; white-space: nowrap; width: 1%; vertical-align: middle } .easypack-widget .search-group-btn:not(.with-filters) { width: 1%!important } .easypack-widget .search-group-btn:last-child>.btn, .easypack-widget .search-group-btn:last-child>.btn-group { margin-left: -1px } .easypack-widget .input-group-addon:first-child, .easypack-widget .search-group-btn:first-child>.btn, .easypack-widget .search-group-btn:first-child>.btn-group>.btn, .easypack-widget .search-group-btn:first-child>.dropdown-toggle, .easypack-widget .search-group-btn:last-child>.btn-group:not(:last-child)>.btn, .easypack-widget .search-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle), .easypack-widget .search-group.search-input:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0 } .easypack-widget .input-group-addon:last-child, .easypack-widget .search-group-btn:first-child>.btn-group:not(:first-child)>.btn, .easypack-widget .search-group-btn:first-child>.btn:not(:first-child), .easypack-widget .search-group-btn:last-child>.btn, .easypack-widget .search-group-btn:last-child>.btn-group>.btn, .easypack-widget .search-group-btn:last-child>.dropdown-toggle, .easypack-widget .search-group.search-input:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0 } .easypack-widget .btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px } .easypack-widget .btn:hover { text-decoration: none } .easypack-widget .btn-checkbox, .easypack-widget .btn-default, .easypack-widget .btn-filters, .easypack-widget .btn-radio, .easypack-widget .btn-search { color: #333; background-color: #fff; border-color: #ccc; outline: none } .easypack-widget .btn-checkbox:hover, .easypack-widget .btn-default:hover, .easypack-widget .btn-filters:hover, .easypack-widget .btn-radio:hover, .easypack-widget .btn-search:hover { color: #333; background-color: #e6e6e6; border-color: #adadad } .easypack-widget .search-widget2 .btn.btn-filters { width: auto; color: #666; font-size: 12px; font-weight: 700 } @media screen and (max-width:768px) { .easypack-widget .search-widget2 .btn.btn-filters { width: 100% } } .easypack-widget .btn-filters__arrow { background-repeat: no-repeat; display: inline-block; width: 16px; height: 16px; vertical-align: middle; margin-left: 15px } .easypack-widget .btn-filters .btn-filters__arrow { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg) } .easypack-widget .btn-filters.opened .btn-filters__arrow { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg) } .easypack-widget .btn-checkbox, .easypack-widget .btn-radio { padding: 0; width: 20px; height: 20px; border-radius: 0 } .easypack-widget li.no-subtypes { border-radius: 0 } .easypack-widget li.has-subtypes button.all, .easypack-widget li.has-subtypes button.none { opacity: 1 } .easypack-widget li.has-subtypes button.some { opacity: .3 } .easypack-widget li.has-subtypes button li:not(.has-subtypes) button.all, .easypack-widget li.has-subtypes button li:not(.has-subtypes) button.none, .easypack-widget li.has-subtypes button li:not(.has-subtypes) button.some { opacity: 1 } .easypack-widget li.has-subtypes.group span.label { padding-left: 0 } .easypack-widget .btn-radio { border: none } .easypack-widget .btn-search { background: 50% no-repeat #fff } .easypack-widget .search-group-btn>.btn { position: relative } .easypack-widget ol, .easypack-widget ul { margin-top: 0; margin-bottom: 10px } .easypack-widget dir, .easypack-widget menu, .easypack-widget ul { display: block; list-style-type: disc; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0; -webkit-margin-end: 0; -webkit-padding-start: 40px } .easypack-widget li { display: list-item; text-align: -webkit-match-parent } .easypack-widget .search-widget2 { width: 100%; background-color: #f7f6f1 } .easypack-widget .search-widget2 .search-group { padding: 30px } .easypack-widget .search-widget2 .search-group:not(.with-filters) { width: 100% } .easypack-widget .search-widget2 .visible-xs { display: none } @media screen and (max-width:767px) { .easypack-widget .search-widget2 .visible-xs { display: block } } @media screen and (max-width:767px) { .easypack-widget .search-widget2 .hidden-xs { display: none } } .easypack-widget .search-widget2 .search-input { height: 60px; padding: 5px 40px; border-radius: 0; border: 0; -webkit-box-shadow: none; box-shadow: none; font-weight: 600 } .easypack-widget .search-widget2 .btn { height: 60px; width: 60px; border: 0; border-left: 1px solid #eee; border-radius: 0 } .easypack-widget .search-widget2 .search-group-btn:last-child>.btn, .easypack-widget .search-widget2 .search-group-btn:last-child>.btn-group { margin-left: 0 } .easypack-widget .search-widget2 #searchLoader { position: absolute; opacity: 0; background-color: #fff; vertical-align: middle; width: 37px; height: 50px; margin: 0; visibility: visible; padding-left: 5px } .easypack-widget .search-widget2 .search-group:not(.with-filters) #searchLoader { background-color: #fff } .easypack-widget .search-widget2 .search-group:not(.with-filters) #searchLoader .ball-spin-fade-loader { top: unset; transform: scale(.45); margin-left: 5px; left: 0!important; width: 10px; height: 10px; background-color: transparent } .easypack-widget .search-widget2 .search-group:not(.with-filters) #searchLoader .ball-spin-fade-loader div { border-color: #000!important; background-color: #000!important; border-bottom-color: transparent; max-width: 15px; max-height: 15px } .easypack-widget .search-widget2 .search-group:not(.with-filters) #searchLoader:not(.hidden) { display: table-cell } .easypack-widget .search-widget2 .search-group:not(.with-filters) #searchLoader:not(.hidden) .ball-spin-fade-loader { visibility: visible } .easypack-widget .search-widget2 .search-group:not(.with-filters) #searchLoader.hidden { display: table-cell!important } .easypack-widget .search-widget2 .search-group:not(.with-filters) #searchLoader.hidden .ball-spin-fade-loader { visibility: hidden } .easypack-widget .search-widget2 .input-group.with-filters { background-color: #fff } .easypack-widget .search-widget2 .input-group.with-filters #searchLoader .ball-spin-fade-loader { top: unset; transform: scale(.45); left: 0!important; width: 10px; height: 10px; margin-left: 5px; background-color: transparent } .easypack-widget .search-widget2 .input-group.with-filters #searchLoader .ball-spin-fade-loader div { border-color: #000!important; background-color: #000!important; border-bottom-color: transparent; max-width: 15px; max-height: 15px } .easypack-widget .search-widget2 .input-group.with-filters #searchLoader:not(.hidden) { display: table-cell!important } .easypack-widget .search-widget2 .input-group.with-filters #searchLoader:not(.hidden) .ball-spin-fade-loader { visibility: visible } .easypack-widget .search-widget2 .input-group.with-filters #searchLoader.hidden { display: table-cell!important } .easypack-widget .search-widget2 .input-group.with-filters #searchLoader.hidden .ball-spin-fade-loader { visibility: hidden } .easypack-widget .search-widget2 .search-input-loader-wrapper { display: inline-flex; width: 100% } .easypack-widget .search-widget2 .search-input-loader-wrapper input { flex: 1 } .easypack-widget .search-widget2 .search-input-loader-wrapper .easypack-loading { min-width: 30px; position: relative; visibility: visible; background-color: #fff; display: block } .easypack-widget .search-widget2 .search-input-loader-wrapper .easypack-loading.hidden { display: block!important } .easypack-widget .search-widget2 .search-input-loader-wrapper .easypack-loading.hidden .ball-spin-fade-loader { visibility: hidden } .easypack-widget .search-widget2 .search-input-loader-wrapper .easypack-loading .ball-spin-fade-loader { transform: scale(.45); margin-top: 5px; visibility: visible; width: 10px; height: 10px; left: 20%; top: 20% } .easypack-widget .search-widget2 .search-input-loader-wrapper .easypack-loading .ball-spin-fade-loader div { border-color: #000!important; background-color: #000!important; border-bottom-color: transparent; max-width: 15px; max-height: 15px } .easypack-widget .map-widget .status-bar { display: flex; flex-direction: row-reverse; align-items: center; padding-left: 20px } .easypack-widget .map-widget .status-bar .loader-inner.ball-spin-fade-loader-mp { transform: scale(.45); left: 0!important; width: 30px; height: 30px } .easypack-widget .map-widget .status-bar .loader-inner.ball-spin-fade-loader-mp div { border-color: #000; border-bottom-color: transparent } .easypack-widget .map-widget .status-bar--hidden, .easypack-widget .map-widget .status-bar .loader-inner.ball-spin-fade-loader-mp.hidden { display: none } .easypack-widget .map-widget .leaflet-popup { font-family: Open Sans, sans-serif; font-weight: 100; font-size: 13px; line-height: 1.42857143; width: 250px; padding: 0 0 18px; color: #fff!important } .easypack-widget .map-widget .leaflet-popup .leaflet-popup-content-wrapper { background-color: #323232; color: #fff!important } .easypack-widget .map-widget .leaflet-popup .leaflet-popup-content-wrapper .leaflet-popup-content { margin: 5px 10px } .easypack-widget .map-widget .leaflet-popup .leaflet-popup-content-wrapper h1 { font-size: 1.3em; margin: 0 0 5px; color: #fff!important } .easypack-widget .map-widget .leaflet-popup .leaflet-popup-content-wrapper .name, .easypack-widget .map-widget .leaflet-popup .leaflet-popup-content-wrapper .phone { margin-top: 10px!important; color: #fff!important; font-size: 14px; text-align: left } .easypack-widget .map-widget .leaflet-popup .leaflet-popup-content-wrapper .point-wrapper { padding: 0 10px; text-align: center } .easypack-widget .map-widget .leaflet-popup .leaflet-popup-content-wrapper .point-wrapper p { margin: 0 } .easypack-widget .map-widget .leaflet-popup .leaflet-popup-content-wrapper .point-wrapper .open-hours-label { padding-top: 10px; font-size: 12px } .easypack-widget .map-widget .leaflet-popup .leaflet-popup-content-wrapper .point-wrapper .open-hours { padding-top: 5px; font-size: 12px } .easypack-widget .map-widget .leaflet-popup .leaflet-popup-content-wrapper .point-wrapper p.address { margin-top: 10px } .easypack-widget .map-widget .leaflet-popup .leaflet-popup-content-wrapper .links { padding: 0 10px; border-top: 1px solid #4b4b4b; text-align: left; display: flex; justify-content: center; flex-direction: column } .easypack-widget .map-widget .leaflet-popup .leaflet-popup-content-wrapper .links a { text-decoration: none; padding: 0 0 2px; border: 2px solid #fab800; border-radius: 5px; width: 100%; position: relative; text-align: center; margin-top: 10px; display: block; color: #fff!important } .easypack-widget .map-widget .leaflet-popup .leaflet-popup-content-wrapper .links a.select-link { cursor: pointer; background-color: #fab800; font-weight: 700 } .easypack-widget .map-widget .leaflet-popup .leaflet-popup-content-wrapper .links span { display: block; width: 20px; height: 20px; left: 3px } .easypack-widget .map-widget .leaflet-popup .leaflet-popup-content-wrapper .route-link { margin-right: 30px } .easypack-widget .map-widget .leaflet-popup .leaflet-popup-content-wrapper .details-link, .easypack-widget .map-widget .leaflet-popup .leaflet-popup-content-wrapper .details-link-mobile { cursor: pointer } .easypack-widget .map-widget .leaflet-popup .leaflet-popup-content-wrapper .details-link-mobile { display: none } @media screen and (max-width:768px) { .easypack-widget .map-widget .leaflet-popup .leaflet-popup-content-wrapper { flex-direction: row-reverse; justify-content: flex-end; padding-top: 0 } } .easypack-widget .map-widget .leaflet-popup .leaflet-popup-tip { background-color: #323232 } .easypack-widget .map-widget .leaflet-popup a.leaflet-popup-close-button { color: #fff!important; right: 5px; height: 22px } .easypack-widget .map-widget .leaflet-popup .mobile-details-content { margin-top: 10px } @media screen and (max-width:767px) { .easypack-widget .map-widget .leaflet-popup { width: 170px } .easypack-widget .map-widget .leaflet-popup .leaflet-popup-content { margin: 0 10px 10px; font-size: 12px } .easypack-widget .map-widget .leaflet-popup .leaflet-popup-content .select-link { background-color: #fab800; position: relative; padding-left: 0; text-align: center } } @media screen and (max-width:767px) and (orientation:landscape) { .easypack-widget .map-widget .leaflet-popup { width: 260px } .easypack-widget .map-widget .leaflet-popup .leaflet-popup-content .popup-container { display: flex; width: 100%; justify-content: space-around; flex-direction: row } .easypack-widget .map-widget .leaflet-popup .leaflet-popup-content .popup-container .links { flex-direction: column; justify-content: flex-end } } .easypack-widget .filters-widget { position: relative; min-height: 120px; overflow: hidden } .easypack-widget .filters-widget .filters-widget__loading { position: absolute; top: 0; right: 0; left: 0; bottom: 0; background: #f1f0e9; opacity: .5; z-index: 2; display: none } .easypack-widget .filters-widget.loading .filters-widget__loading { display: block } .easypack-widget .filters-widget .filters-widget__list { list-style: none; margin: 0; padding: 10px 30px; background: #f1f0e9; position: relative } .easypack-widget .filters-widget .filters-widget__list .filters-widget__elem { display: inline-block; margin: 0 10px 10px } .easypack-widget .filters-widget .filters-widget__list .filters-widget__elem input { display: none; cursor: pointer; margin-right: 5px } .easypack-widget .filters-widget .filters-widget__list .filters-widget__elem input:checked+label:before { content: "\2713"; font-size: 13px; color: #333; text-align: center; line-height: 15px } .easypack-widget .filters-widget .filters-widget__list .filters-widget__elem label { cursor: pointer; font-weight: 700; color: #444; position: relative; padding-left: 20px } .easypack-widget .filters-widget .filters-widget__list .filters-widget__elem label:before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 10px; position: absolute; left: 0; bottom: 1px; background-color: #fff; box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, .3), 0 1px 0 0 hsla(0, 0%, 100%, .8) } .easypack-widget .filters-widget.hidden { display: none } .easypack-widget .type-filter { font-weight: 600; margin: 0; padding: 0; text-align: center } .easypack-widget .type-filter .current-type-wrapper { display: none; overflow: hidden } .easypack-widget .type-filter .list-wrapper { margin: 0; padding: 0; list-style: none } .easypack-widget .type-filter .list-wrapper .arrow { display: inline-block; width: 15px; height: 15px; vertical-align: middle; margin-left: 5px; cursor: pointer } .easypack-widget .type-filter .list-wrapper .dropdown-wrapper { position: absolute; z-index: 1; top: 49px; width: 170px } .easypack-widget .type-filter .list-wrapper .dropdown-wrapper .dropdown-subtypes { background: #fff; text-align: left; padding: 0 15px; -webkit-box-shadow: 3px 3px 4px 0 rgba(0, 0, 0, .53); -moz-box-shadow: 3px 3px 4px 0 rgba(0, 0, 0, .53); box-shadow: 3px 3px 4px 0 rgba(0, 0, 0, .53) } .easypack-widget .type-filter .list-wrapper .dropdown-wrapper .dropdown-subtypes li { margin: 10px 0 } .easypack-widget .type-filter .list-wrapper ul { padding-left: 0; margin: 0 0 0 -5px; list-style: none } .easypack-widget .type-filter .list-wrapper ul li { display: inline-block; margin: 22px 30px 22px 0; height: 27px; background: 28px 0 no-repeat; position: relative } .easypack-widget .type-filter .list-wrapper ul li .label { position: relative; top: 2px; padding-left: 35px; color: #000; cursor: pointer } .easypack-widget .type-filter .list-wrapper ul li.group span.label { padding-left: 15px } .easypack-widget .type-filter .list-wrapper ul li.group li span.label { padding-left: 35px } .easypack-widget .type-filter .list-wrapper ul li.group ul.dropdown-subtypes { padding-bottom: 15px } .easypack-widget .type-filter .list-wrapper ul li:not([data-dropdown=open])>.dropdown-wrapper { display: none } .easypack-widget .type-filter .list-wrapper ul li[data-dropdown=open]>.arrow { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg) } .easypack-widget .type-filter .list-wrapper ul li:not([data-checked=true])>.btn-checkbox { background-position: -20px 0 } .easypack-widget .type-filter .main-type { outline: none } .easypack-widget .type-filter .no-tooltip { border-radius: 0 } .easypack-widget .type-filter .has-tooltip { position: relative; cursor: pointer } .easypack-widget .type-filter .tooltip-wrapper { display: none; font-family: Open Sans, sans-serif; font-weight: 100; font-size: 12px; line-height: 1.42857143; color: #fff; text-align: left; padding-bottom: 18px; min-width: 350px } .easypack-widget .type-filter .tooltip-wrapper .type-tooltip { background-color: #323232; height: 100%; display: table; -webkit-box-shadow: 0 0 10px -1px rgba(64, 64, 64, .96); -moz-box-shadow: 0 0 10px -1px rgba(64, 64, 64, .96); box-shadow: 0 0 10px -1px rgba(64, 64, 64, .96) } .easypack-widget .type-filter .tooltip-wrapper .type-tooltip .icon-wrapper { display: table-cell; border-right: 1px solid #4b4b4b; float: left; padding: 25px } .easypack-widget .type-filter .tooltip-wrapper .type-tooltip .icon-wrapper img { max-width: none } .easypack-widget .type-filter .tooltip-wrapper .type-tooltip .description { display: table-cell; vertical-align: middle; padding: 25px } .easypack-widget .type-filter .has-tooltip:hover~.tooltip-wrapper { display: block; left: 60%; bottom: 30px; position: absolute; z-index: 98 } .easypack-widget .map-list-row { height: 100%; display: flex; flex-direction: column; flex: 1 } .easypack-widget .map-list-row .map-list-flex { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; height: 100% } .easypack-widget .map-list-row .map-list-flex .map-widget { -webkit-box-flex: 2; -moz-box-flex: 2; width: 70%; -webkit-flex: 2 2 70%; -ms-flex: 2 2 70%; flex: 2 2 70%; display: flex; position: relative } .easypack-widget .map-list-row .map-list-flex .map-widget .status-bar { opacity: 0; color: #333; font-weight: 700; font-size: 16px; position: absolute; background: #f7f6f1; right: 0; top: 0; padding: 7px 5px; z-index: 400; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -ms-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out } .easypack-widget .map-list-row .map-list-flex .map-widget .status-bar.status-bar--hidden { opacity: 0 } .easypack-widget .map-list-row .map-list-flex .map-widget .language-bar { color: #333; font-weight: 700; position: absolute; background: #f7f6f1; top: 10px; right: 10px; padding: 7px 5px; z-index: 400 } .easypack-widget .map-list-row .map-list-flex .map-widget .language-bar .current-status { z-index: 400 } .easypack-widget .map-list-row .map-list-flex .map-widget .language-bar { right: 0; top: 0 } .easypack-widget .map-list-row .map-list-flex .map-widget .status-bar+.language-bar { top: 43px } .easypack-widget .map-list-row .map-list-flex .map-widget .info-window { font-family: Open Sans, sans-serif; font-weight: 100; font-size: 13px; line-height: 1.42857143; margin: 20px; width: 220px; padding: 0 0 18px; color: #fff!important } .easypack-widget .map-list-row .map-list-flex .map-widget .info-window .content { background-color: #323232 } .easypack-widget .map-list-row .map-list-flex .map-widget .info-window h1 { font-size: 12px; margin: 0 0 5px; color: #fff!important } .easypack-widget .map-list-row .map-list-flex .map-widget .info-window p { margin: 0 } .easypack-widget .map-list-row .map-list-flex .map-widget .info-window .name, .easypack-widget .map-list-row .map-list-flex .map-widget .info-window .phone { margin-top: 10px!important; color: #fff!important; font-size: 14px; text-align: left } .easypack-widget .map-list-row .map-list-flex .map-widget .info-window .point-wrapper { color: white; padding-bottom: 5px; padding-top: 5px } .easypack-widget .map-list-row .map-list-flex .map-widget .info-window .point-wrapper .address { font-size: 12px; color: white; } .easypack-widget .map-list-row .map-list-flex .map-widget .info-window .point-wrapper .open-hours-label { padding-top: 10px; font-size: 12px } .easypack-widget .map-list-row .map-list-flex .map-widget .info-window .point-wrapper .open-hours { padding-top: 5px; font-size: 12px } .easypack-widget .map-list-row .map-list-flex .map-widget .info-window .links { padding: 0 15px 15px; border-top: 1px solid #4b4b4b; text-align: left; justify-content: space-between } .easypack-widget .map-list-row .map-list-flex .map-widget .info-window .links a { display: block; color: #fff!important; text-decoration: none; border-radius: 5px; font-size: 12px; } .easypack-widget .map-list-row .map-list-flex .map-widget .info-window .links .select-link { margin-top: 10px } .easypack-widget .map-list-row .map-list-flex .list-widget { -webkit-box-flex: 1; -moz-box-flex: 1; width: 30%; -webkit-flex: 1 1 30%; -ms-flex: 1 1 30%; flex: 1 1 30%; display: flex; min-height: 400px; background: #f7f6f1 } .easypack-widget .map-list-row .map-list-flex .list-widget.loading-content .list-wrapper { opacity: .5; pointer-events: none } .easypack-widget .map-list-row .map-list-flex .list-widget .list-wrapper { padding: 20px; height: 100%; width: 100%; position: relative; user-select: none } .easypack-widget .map-list-row .map-list-flex .list-widget .list-wrapper ul { padding: 0; margin: 0; list-style: none } .easypack-widget .map-list-row .map-list-flex .list-widget .list-wrapper ul li { font-size: 14px; user-select: none } .easypack-widget .map-list-row .map-list-flex .list-widget .list-wrapper ul li a { padding: 10px 10px 10px 45px; background: 10px 15px no-repeat; text-decoration: none; display: block; user-select: none } .easypack-widget .map-list-row .map-list-flex .list-widget .list-wrapper ul li a .title { color: #000; font-weight: 600 } .easypack-widget .map-list-row .map-list-flex .list-widget .list-wrapper ul li a .address { color: #a09d94 } .easypack-widget .map-list-row .map-list-flex .list-widget .list-wrapper ul li a:hover { user-select: none; background-color: #ece9e2 } .easypack-widget .map-list-row .map-list-in-row { height: 100% } .easypack-widget .map-list-row .map-list-in-row .map-widget { height: 380px } .easypack-widget .map-list-row .map-list-in-row .map-widget .status-bar { display: flex; flex-direction: row-reverse; align-items: center; padding-left: 20px; color: #333; font-weight: 700; font-size: 16px; position: absolute; background: #f7f6f1; right: 0; top: 0; padding: 7px 5px; z-index: 400; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -ms-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out } .easypack-widget .map-list-row .map-list-in-row .map-widget .status-bar .loader-inner.ball-spin-fade-loader-mp { transform: scale(.45); left: 0!important; width: 30px; height: 30px } .easypack-widget .map-list-row .map-list-in-row .map-widget .status-bar .loader-inner.ball-spin-fade-loader-mp div { border-color: #000; border-bottom-color: transparent } .easypack-widget .map-list-row .map-list-in-row .map-widget .language-bar { color: #333; font-weight: 700; position: absolute; background: #f7f6f1; top: 10px; right: 10px; padding: 7px 5px; z-index: 1 } .easypack-widget .map-list-row .map-list-in-row .map-widget .info-window { font-family: Open Sans, sans-serif; font-weight: 100; font-size: 13px; line-height: 1.42857143; margin: 20px; padding: 0 0 18px; color: #fff!important } .easypack-widget .map-list-row .map-list-in-row .map-widget .info-window .content { background-color: #323232 } .easypack-widget .map-list-row .map-list-in-row .map-widget .info-window h1 { font-size: 1.3em; margin: 0 0 5px } .easypack-widget .map-list-row .map-list-in-row .map-widget .info-window p { margin: 0 } .easypack-widget .map-list-row .map-list-in-row .map-widget .info-window .name, .easypack-widget .map-list-row .map-list-in-row .map-widget .info-window .phone { margin-top: 10px!important; color: #fff!important; font-size: 14px; text-align: left } .easypack-widget .map-list-row .map-list-in-row .map-widget .info-window .point-wrapper { padding: 30px } .easypack-widget .map-list-row .map-list-in-row .map-widget .info-window .point-wrapper .open-hours-label { padding-top: 10px; font-size: 12px } .easypack-widget .map-list-row .map-list-in-row .map-widget .info-window .point-wrapper .open-hours { padding-top: 5px; font-size: 12px } .easypack-widget .map-list-row .map-list-in-row .map-widget .info-window .links { padding: 10px; border-top: 1px solid #4b4b4b; text-align: left } .easypack-widget .map-list-row .map-list-in-row .map-widget .info-window .links a { color: #fff!important; text-decoration: none; padding: 0 0 2px; margin-right: 0; width: 100% } .easypack-widget .map-list-row .map-list-in-row .map-widget .info-window .links .route-link { margin-right: 30px } .easypack-widget .map-list-row .map-list-in-row .map-widget .info-window .links .details-link { padding-left: 25px; margin-right: 15px } .easypack-widget .map-list-row .map-list-in-row .map-widget .info-window .links .select-link { margin-top: 10px; padding-left: 20px } .easypack-widget .map-list-row .map-list-in-row .list-widget { margin-top: 20px; width: 100% } .easypack-widget .map-list-row .map-list-in-row .list-widget.loading .list-wrapper { opacity: .5; pointer-events: none } .easypack-widget .map-list-row .map-list-in-row .list-widget .list-wrapper { height: 100%; width: 100%; position: relative } .easypack-widget .map-list-row .map-list-in-row .list-widget .list-wrapper ul { padding: 0; margin: 0; list-style: none; border: 1px solid #d6d6d6; border-bottom: none } .easypack-widget .map-list-row .map-list-in-row .list-widget .list-wrapper ul li { font-size: 14px; border-bottom: 1px solid #d6d6d6; line-height: 27px; user-select: none } @media (max-width:990px) { .easypack-widget .map-list-row .map-list-in-row .list-widget .list-wrapper ul li { font-size: 12px; line-height: 20px } } @media (max-width:800px) { .easypack-widget .map-list-row .map-list-in-row .list-widget .list-wrapper ul li { font-size: 12px; line-height: 15px } } .easypack-widget .map-list-row .map-list-in-row .list-widget .list-wrapper ul li .row { padding: 10px 10px 10px 45px; background: 10px 10px no-repeat; text-decoration: none; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: 0; margin-left: 0 } .easypack-widget .map-list-row .map-list-in-row .list-widget .list-wrapper ul li .row .col-address { display: none } .easypack-widget .map-list-row .map-list-in-row .list-widget .list-wrapper ul li .row .col-name { flex: 0 0 90px } .easypack-widget .map-list-row .map-list-in-row .list-widget .list-wrapper ul li .row .col-city { flex: 0 0 130px } .easypack-widget .map-list-row .map-list-in-row .list-widget .list-wrapper ul li .row .col-point-type { flex: 0 0 120px } .easypack-widget .map-list-row .map-list-in-row .list-widget .list-wrapper ul li .row .col-point-type-name { flex: 0 0 120px; display: none } .easypack-widget .map-list-row .map-list-in-row .list-widget .list-wrapper ul li .row .col-actions { flex: 0 0 190px } .easypack-widget .map-list-row .map-list-in-row .list-widget .list-wrapper ul li .row .col-sm { -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100% } @media (max-width:990px) { .easypack-widget .map-list-row .map-list-in-row .list-widget .list-wrapper ul li .row .col-city, .easypack-widget .map-list-row .map-list-in-row .list-widget .list-wrapper ul li .row .col-street { display: none } .easypack-widget .map-list-row .map-list-in-row .list-widget .list-wrapper ul li .row .col-address { display: block } .easypack-widget .map-list-row .map-list-in-row .list-widget .list-wrapper ul li .row .col-point-type { flex: 0 0 100px } } @media (max-width:800px) { .easypack-widget .map-list-row .map-list-in-row .list-widget .list-wrapper ul li .row .col-city, .easypack-widget .map-list-row .map-list-in-row .list-widget .list-wrapper ul li .row .col-name, .easypack-widget .map-list-row .map-list-in-row .list-widget .list-wrapper ul li .row .col-point-type, .easypack-widget .map-list-row .map-list-in-row .list-widget .list-wrapper ul li .row .col-street { display: none } .easypack-widget .map-list-row .map-list-in-row .list-widget .list-wrapper ul li .row .col-address, .easypack-widget .map-list-row .map-list-in-row .list-widget .list-wrapper ul li .row .col-point-type-name { display: block } } .easypack-widget .map-list-row .map-list-in-row .list-widget .list-wrapper ul li .row .title { float: left; width: 30%; color: #000; font-weight: 600 } .easypack-widget .map-list-row .map-list-in-row .list-widget .list-wrapper ul li .row .address { color: #a09d94 } .easypack-widget .map-list-row .map-list-in-row .list-widget .list-wrapper ul li .row .actions { text-align: right; text-transform: uppercase; font-size: 11px } @media screen and (max-width:768px) { .easypack-widget .map-list-row .map-list-in-row .list-widget .list-wrapper ul li .row .actions { text-align: left } } .easypack-widget .map-list-row .map-list-in-row .list-widget .list-wrapper ul li .row .actions a { margin: 5px } @media only screen and (max-width:768px) { .easypack-widget .map-list-row .map-list-in-row .list-widget .list-wrapper ul li .row .actions a { margin-left: 0 } } .easypack-widget .map-list-row .map-list-in-row .list-widget .list-wrapper ul li .row .actions a.details-show-on-map { color: #858586!important } .easypack-widget .map-list-row .map-list-in-row .list-widget .list-wrapper ul li .row .actions a.details-show-more { margin: 5px; padding-left: 9% } .easypack-widget .map-list-row .map-list-in-row .list-widget .list-wrapper ul li div:hover { background-color: #f5f5f5; color: #1e1b1b } .easypack-widget .map-list-row .map-list-in-row .list-widget .pagination-wrapper { margin-top: 20px; user-select: none } .easypack-widget .map-list-row .map-list-in-row .list-widget .pagination-wrapper ul { padding: 0; margin: 0; list-style: none; text-align: right; user-select: unset } .easypack-widget .map-list-row .map-list-in-row .list-widget .pagination-wrapper ul li { font-size: 14px; display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; cursor: pointer; user-select: unset } .easypack-widget .map-list-row .map-list-in-row .list-widget .pagination-wrapper ul li.current { user-select: unset; background: #f1f1f1; font-weight: 700 } .easypack-widget .map-list-row .map-list-in-row .list-widget .pagination-wrapper ul li.pagingNext, .easypack-widget .map-list-row .map-list-in-row .list-widget .pagination-wrapper ul li.pagingPrev { user-select: unset; width: 90px; text-transform: uppercase } .easypack-widget .map-list-row .map-list-in-row .list-widget .pagination-wrapper ul li .disabled { display: inherit } @media screen and (max-width:767px) { .easypack-widget .map-list-row { display: block; width: 100% } .easypack-widget .map-list-row .list-wrapper, .easypack-widget .map-list-row .map-wrapper { text-align: center; padding: 10px; width: 50%; float: left; cursor: pointer } .easypack-widget .map-list-row .list-wrapper .list-btn, .easypack-widget .map-list-row .list-wrapper .map-btn, .easypack-widget .map-list-row .map-wrapper .list-btn, .easypack-widget .map-list-row .map-wrapper .map-btn { display: block } .easypack-widget .map-list-row .list-wrapper .btn, .easypack-widget .map-list-row .map-wrapper .btn { font-size: 13px; font-weight: 500; text-transform: uppercase; color: #fff; padding-left: 25px } } .easypack-widget .point-details .details-wrapper .details-content { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; z-index: 1000; position: absolute; bottom: 0; background-color: #323232; height: 210px; font-family: Open Sans, sans-serif; font-weight: 100; font-size: 13px; line-height: 1.42857143; clear: both; width: 100% } .easypack-widget .point-details .details-wrapper .details-content .point-box { -webkit-box-flex: 1; -moz-box-flex: 1; width: 150px; -webkit-flex: 1 1 150px; -ms-flex: 1 1 150px; flex: 1 1 150px; height: 210px; text-align: center; background-color: #fab800; position: relative } .easypack-widget .point-details .details-wrapper .details-content .point-box h1 { font-size: 18px; color: #fff; margin: 0 0 10px; padding: 20px 20px 0 } .easypack-widget .point-details .details-wrapper .details-content .point-box p { padding: 0 20px; margin: 0 } .easypack-widget .point-details .details-wrapper .details-content .point-box .name { margin-top: 10px } .easypack-widget .point-details .details-wrapper .details-content .point-box .details-actions { height: 52px; position: absolute; bottom: 0; background-color: #fcc300; width: 100% } .easypack-widget .point-details .details-wrapper .details-content .point-box .details-actions .action { width: 100%; height: 52px; text-align: center; padding-top: 18px } .easypack-widget .point-details .details-wrapper .details-content .point-box .details-actions .action a { padding: 1px 0 3px 20px; text-decoration: none; text-transform: uppercase } .easypack-widget .point-details .details-wrapper .details-content .point-box .details-actions .plan-route { width: 100% } .easypack-widget .point-details .details-wrapper .details-content .description-photo { flex-grow: 0; flex-shrink: 0; margin: 0; height: 210px } .easypack-widget .point-details .details-wrapper .details-content .description-photo img { margin: 0; padding: 0; max-width: 100%; max-height: 100% } .easypack-widget .point-details .details-wrapper .details-content .description { -webkit-box-flex: 4; -moz-box-flex: 4; width: 200px; -webkit-flex: 4 4 200px; -ms-flex: 4 4 200px; flex: 4 4 200px; background-color: #323232; color: #fff; height: 210px; padding: 20px; font-size: 15px } .easypack-widget .point-details .details-wrapper .details-content .description .item { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; margin-bottom: 20px } .easypack-widget .point-details .details-wrapper .details-content .description .item .term { -webkit-box-flex: 1; -moz-box-flex: 1; width: 100px; -webkit-flex: 1 1 100px; -ms-flex: 1 1 100px; flex: 1 1 100px; display: flex; font-weight: 700 } .easypack-widget .point-details .details-wrapper .details-content .description .item .definition { -webkit-box-flex: 4; -moz-box-flex: 4; width: 100px; -webkit-flex: 4 4 100px; -ms-flex: 4 4 100px; flex: 4 4 100px; display: flex } .easypack-widget .point-details .details-wrapper .details-content .close-button { color: #fff; float: right; cursor: pointer; -webkit-box-flex: 1; -moz-box-flex: 1; width: 25px; -webkit-flex: 0 0 25px; -ms-flex: 0 0 25px; flex: 0 0 25px; display: flex; -webkit-box-ordinal-group: 5; -moz-box-ordinal-group: 5; -ms-flex-order: 5; -webkit-order: 5; order: 5; font-size: 15px; padding-top: 10px } .easypack-widget:not(.mobile) .scroll-box { height: 100%; margin: 0 } .easypack-widget:not(.mobile) .scroll-box .viewport { height: 100%; overflow-y: auto; position: relative } .easypack-widget:not(.mobile) .scroll-box .overview { list-style: none; position: absolute; left: 0; top: 0; padding: 0 10px 0 0; margin: 0; width: 100% } .easypack-widget:not(.mobile) .scroll-box .overview .list-point-link { margin: 0 } .easypack-widget:not(.mobile) .scroll-box .scrollbar { background-color: #ece9e0; position: relative; float: right; width: 6px; border-radius: 5px } .easypack-widget:not(.mobile) .scroll-box .track { background-color: #ece9e0; height: 100%; width: 6px; position: relative; padding: 0 1px; border-radius: 5px } .easypack-widget:not(.mobile) .scroll-box .thumb { background-color: #ffcc01; height: 20px; width: 6px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: 0; border-radius: 5px } .easypack-widget:not(.mobile) .scroll-box .disable { display: none } .gm-style img { max-width: none!important } .inpost-search__list { background-color: #fff; position: absolute; z-index: 1001!important; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; top: 91px; left: 30px; right: 30px; display: block } @media (max-width:768px) { .inpost-search__list { top: auto; left: 15px; right: 15px } } .inpost-search__list .place, .inpost-search__list .point { box-sizing: border-box } .inpost-search__list.hidden { display: none } .widget-modal .loading-icon-wrapper.loader-wrapper:not(.hidden) { position: absolute; pointer-events: fill; display: flex; z-index: 1000; justify-content: center; align-items: center; margin-top: 0; top: 0; bottom: 0; right: 0; left: 0; background-color: #f1f1f1 } .widget-modal .loading-icon-wrapper.loader-wrapper:not(.hidden) div { height: 50px; width: 50px } .widget-modal .loading-icon-wrapper.loader-wrapper:not(.hidden).hidden { display: none } .widget-modal .inpost-search__list { top: auto; left: 15px; right: 15px width: 80%; } .widget-modal .search-widget2 .search-group-btn:not(.with-filters) { width: auto!important } .widget-modal .search-widget2 .search-group-btn:not(.with-filters) #searchLoader { padding-top: 18px } .widget-modal .search-widget2 .search-group.with-filters, .widget-modal .search-widget2 .search-group:not(.with-filters) { width: 100%!important } .widget-modal .search-widget2 .search-group:not(.with-filters) #searchLoader { padding-top: 18px } #searchLoader.hidden { visibility: unset!important } .inpost-search__item-list { padding: 0 5px; line-height: 30px; border-top: 1px solid #e6e6e6; font-size: 12px; color: #999 } .inpost-search__item-list:hover { background-color: #fafafa; cursor: pointer } .inpost-search__item-list--query { font-size: 13px; padding-right: 3px; color: #000 } .widget-modal { display: block } .widget-modal .widget-modal__topbar { width: 100%; height: 40px; background: #ece9e2 } .widget-modal .widget-modal__close { font-family: Open Sans, sans-serif; font-weight: 100; line-height: 1.4; float: right; cursor: pointer; width: 25px; height: 25px; font-size: 15px; padding-top: 10px } .easypack-widget:not(.mobile) .view-chooser, .easypack-widget:not(.mobile) .view-chooser .list-btn, .easypack-widget:not(.mobile) .view-chooser .map-btn { display: none } #widget-modal__map:not(.mobile) { display: flex; flex-direction: column; overflow: scroll } #widget-modal__map:not(.mobile) .map-widget { -webkit-box-flex: 2; -moz-box-flex: 2; width: 70%; -webkit-flex: 2 2 70%; -ms-flex: 2 2 70%; flex: 2 2 70% } #widget-modal__map:not(.mobile) .list-widget { -webkit-box-flex: 1; -moz-box-flex: 1; width: 30%; -webkit-flex: 1 1 30%; -ms-flex: 1 1 30%; flex: 1 1 30%; display: flex; min-height: 400px; background: #f7f6f1 } .widget-modal .easypack-widget.mobile .search-widget2 .search-group-btn.with-filters { width: auto } .widget-modal .easypack-widget.mobile .search-widget2 .search-group-btn.with-filters #searchLoader { padding-top: 18px } .widget-modal .easypack-widget.mobile .search-widget2 .search-group { display: flex; width: 100% } .widget-modal .easypack-widget.mobile .search-widget2 .search-group.with-filters #searchLoader { padding-top: 18px } @media screen and (min-width:768px) { .widget-modal .easypack-widget.mobile .search-widget2 .search-group { width: auto } } .widget-modal .easypack-widget.mobile div.leaflet-map-pane div.leaflet-popup-content-wrapper .popup-container div.links a.route-link { display: none!important } .ball-spin-fade-loader-mp { top: 50%; left: 50%; width: 100%; height: 100% } .ball-spin-fade-loader-mp div { background-color: #000 } .easypack-widget.mobile { position: relative } .easypack-widget.mobile .inpost-search__list { top: 65px; left: 15px; right: 15px } .easypack-widget.mobile #loader .ball-spin-fade-loader-mp { top: 50%; left: 48%; width: 100%; height: 100% } .easypack-widget.mobile #loader .ball-spin-fade-loader-mp div { background-color: #000; width: 15px; height: 15px } .easypack-widget.mobile .search-widget2 .search-group { padding: 15px 15px 5px } .easypack-widget.mobile .search-widget2 .search-input { padding: 10px; height: 50px; color: #000 } .easypack-widget.mobile .search-widget2 .btn { border: 0; padding: 0; width: 50px; height: 60px } .easypack-widget.mobile .search-widget2 .btn-filters { width: auto; height: 50px; vertical-align: top } @media screen and (max-width:768px) { .easypack-widget.mobile .search-widget2 .btn-filters { width: 100% } } .easypack-widget.mobile .filters-widget { position: absolute; top: 60px; z-index: 1001 } .easypack-widget.mobile .type-filter .current-type-wrapper { display: block; background-color: #f7f6f1; padding: 5px 15px 15px } .easypack-widget.mobile .type-filter .current-type-wrapper .current-type { text-align: left; padding: 12px 0 0 42px; font-size: 13px; font-weight: 700; background: 10px 10px #fff no-repeat; height: 45px } .easypack-widget.mobile .type-filter .current-type-wrapper .btn-select-type { color: #282828; font-size: 8px; background: 50% #fff no-repeat; border: 0; border-left: 1px solid #d5d5d5; display: block; width: 50px; height: 45px; border-radius: 0; float: right } .easypack-widget.mobile .type-filter .list-wrapper { padding: 0 15px; display: none; position: absolute; z-index: 1100; width: 100% } .easypack-widget.mobile .type-filter .list-wrapper .btn-radio { width: 27px; height: 27px } .easypack-widget.mobile .type-filter .list-wrapper ul.types-list { display: block; width: 100%; background: #fff; margin: 0; padding: 5px 10px; text-align: left; -webkit-box-shadow: 2px 2px 5px 0 rgba(92, 92, 92, .65); -moz-box-shadow: 2px 2px 5px 0 rgba(92, 92, 92, .65); box-shadow: 2px 2px 5px 0 rgba(92, 92, 92, .65) } .easypack-widget.mobile .type-filter .list-wrapper ul.types-list .main-type { outline: none } .easypack-widget.mobile .type-filter .list-wrapper ul.types-list .no-tooltip { border-radius: 0 } .easypack-widget.mobile .type-filter .list-wrapper ul.types-list li { display: block; width: 100%; padding: 0; background: 0 no-repeat; color: #000; margin: 10px 0 } .easypack-widget.mobile .type-filter .list-wrapper ul.types-list li.has-subtypes { height: auto; background-position: 0 0 } .easypack-widget.mobile .type-filter .list-wrapper ul.types-list li .arrow { display: none } .easypack-widget.mobile .type-filter .list-wrapper ul.types-list li .label { font-size: 16px; margin-left: 0 } .easypack-widget.mobile .type-filter .list-wrapper ul.types-list li button { float: right } .easypack-widget.mobile .type-filter .list-wrapper ul.types-list li .dropdown-wrapper { display: block; position: static; width: 90%; z-index: 3; margin-left: 10px } .easypack-widget.mobile .type-filter .list-wrapper ul.types-list li .dropdown-wrapper .dropdown-subtypes { box-shadow: none } .easypack-widget.mobile .type-filter .list-wrapper ul.types-list li div.tooltip-wrapper, .easypack-widget.mobile .type-filter .list-wrapper ul.types-list li div.tooltip-wrapper:hover { display: none } .easypack-widget.mobile .type-filter .list-wrapper ul.types-list li[data-checked=true] button { background-position: 0 0 } .easypack-widget.mobile .type-filter .list-wrapper ul.types-list li[data-checked=true] button.btn-checkbox { background-position: 50% } .easypack-widget.mobile .type-filter .has-tooltip:hover .tooltip-wrapper { display: none } .easypack-widget.mobile .type-filter .list-wrapper[data-show=true], .easypack-widget.mobile .type-filter .list-wrapper[data-show=true] ul.types-list { display: block } .easypack-widget.mobile .type-filter .list-wrapper[data-show=false] { display: none } .easypack-widget.mobile .map-widget .leaflet-popup .leaflet-popup-content-wrapper .point-wrapper { padding: 5px; text-align: center } .easypack-widget.mobile .map-widget .leaflet-popup .leaflet-popup-content-wrapper .point-wrapper h1 { margin: 0 } .easypack-widget.mobile .map-widget .leaflet-popup .leaflet-popup-content-wrapper .point-wrapper p.opening-hours-label { display: none } .easypack-widget.mobile .map-widget .leaflet-popup .leaflet-popup-content-wrapper .links { text-align: left; display: flex; justify-content: flex-start; flex-direction: row; flex-wrap: wrap } .easypack-widget.mobile .map-widget .leaflet-popup .leaflet-popup-content-wrapper .links a.route-link { display: none } @media screen and (max-width:768px) { .easypack-widget.mobile .map-widget .leaflet-popup .leaflet-popup-content-wrapper .links { flex-direction: column; justify-content: flex-end; align-items: center; padding-top: 0 } .easypack-widget.mobile .map-widget .leaflet-popup .leaflet-popup-content-wrapper .links a { width: 100% } .easypack-widget.mobile .map-widget .leaflet-popup .leaflet-popup-content-wrapper .links .route-link { display: none } } .easypack-widget.mobile .map-list-row { display: flex; flex: 1; min-height: 250px } .easypack-widget.mobile .map-list-row .map-list-flex { display: block; position: relative; width: 100%; min-height: 250px; flex: 1 } .easypack-widget.mobile .map-list-row .map-list-flex .map-widget { height: 100%; position: absolute; width: 100% } .easypack-widget.mobile .map-list-row .map-list-flex .map-widget .info-window { font-size: 13px; line-height: 1.42857143; font-weight: 100 } .easypack-widget.mobile .map-list-row .map-list-flex .map-widget .info-window .content { background-color: #323232 } .easypack-widget.mobile .map-list-row .map-list-flex .map-widget .info-window h1 { font-size: 1.1em } .easypack-widget.mobile .map-list-row .map-list-flex .map-widget .info-window .point-wrapper { padding: 20px } .easypack-widget.mobile .map-list-row .map-list-flex .map-widget .info-window .links a { padding: 0 0 2px; margin-right: 0; width: 100% } .easypack-widget.mobile .map-list-row .map-list-flex .map-widget .info-window .links .details-link, .easypack-widget.mobile .map-list-row .map-list-flex .map-widget .info-window .links .select-link { cursor: pointer } @media screen and (max-width:768px) { .easypack-widget.mobile .map-list-row .map-list-flex .map-widget .info-window { flex-direction: row-reverse; justify-content: flex-end; padding-top: 0 } .easypack-widget.mobile .map-list-row .map-list-flex .map-widget .info-window .point-wrapper { padding: 5px } .easypack-widget.mobile .map-list-row .map-list-flex .map-widget .info-window .point-wrapper h1 { margin: 0 } .easypack-widget.mobile .map-list-row .map-list-flex .map-widget .info-window .point-wrapper .opening-hours-label { display: none; padding: 10px } .easypack-widget.mobile .map-list-row .map-list-flex .map-widget .info-window .links { padding: 5px; justify-content: flex-end } .easypack-widget.mobile .map-list-row .map-list-flex .map-widget .info-window .links .route-link { display: none } } @media screen and (max-width:768px) and (orientation:landscape) { .easypack-widget.mobile .map-list-row .map-list-flex .map-widget .info-window { flex-direction: row; justify-content: space-between; flex-wrap: nowrap; padding: 3px 5px } .easypack-widget.mobile .map-list-row .map-list-flex .map-widget .info-window .links { padding-right: 10px; border-top: none } .easypack-widget.mobile .map-list-row .map-list-flex .map-widget .info-window .links a { width: 110px } } .easypack-widget.mobile .map-list-row .map-list-flex .list-widget { width: 100%; min-height: 100%; display: none; max-height: 100%; overflow-y: auto; flex: 1; position: absolute } .easypack-widget.mobile .map-list-row .map-list-flex .list-widget .list-wrapper { padding: 0 0 10px 18px } .easypack-widget.mobile .map-list-row .map-list-flex .list-widget .list-wrapper .scroll-box { overflow: auto; height: 100% } .easypack-widget.mobile .map-list-row .map-list-flex .list-widget .list-wrapper .scroll-box li { border-top: 1px solid #d6d6d6 } .easypack-widget.mobile .map-list-row .map-list-flex .list-widget .list-wrapper .scroll-box li a { background-position: 25px 15px; padding-left: 58px; text-align: left } .easypack-widget.mobile .map-list-in-row .map-widget .info-window { font-size: 13px; line-height: 1.42857143; font-weight: 100; width: 250px } .easypack-widget.mobile .map-list-in-row .map-widget .info-window .content { background-color: #323232 } .easypack-widget.mobile .map-list-in-row .map-widget .info-window h1 { font-size: 1.1em } .easypack-widget.mobile .map-list-in-row .map-widget .info-window .point-wrapper { padding: 20px } .easypack-widget.mobile .map-list-in-row .map-widget .info-window .links a { padding: 0 0 2px 20px } .easypack-widget.mobile .map-list-in-row .map-widget .info-window .links .route-link { margin-right: 15px } .easypack-widget.mobile .map-list-in-row .map-widget .info-window .links .details-link { padding-left: 25px } .easypack-widget.mobile .map-list-in-row .list-widget .pagination-wrapper ul li.pagingItem, .easypack-widget.mobile .map-list-in-row .list-widget .pagination-wrapper ul li.pagingSeparator { display: none } .easypack-widget.mobile .view-chooser { display: block!important; width: 100% } .easypack-widget.mobile .view-chooser .list-wrapper, .easypack-widget.mobile .view-chooser .map-wrapper { text-align: center; padding: 10px; width: 50%; float: left; background-color: #282828; cursor: pointer } .easypack-widget.mobile .view-chooser .list-wrapper .btn, .easypack-widget.mobile .view-chooser .map-wrapper .btn { font-size: 13px; font-weight: 500; text-transform: uppercase; color: #fff; padding-left: 25px; display: block } .easypack-widget.mobile .view-chooser .list-wrapper[data-active=true], .easypack-widget.mobile .view-chooser .map-wrapper[data-active=true] { background-color: #fab800 } .easypack-widget.mobile .point-details { display: block; position: absolute; left: 0; top: 0; background: none; height: 100%; width: 100%; z-index: 1001; overflow-y: hidden } .easypack-widget.mobile .point-details .details-wrapper { height: 100%; width: 100%; position: relative; display: table; -webkit-box-shadow: -2px 0 10px 0 rgba(92, 92, 92, .65); -moz-box-shadow: -2px 0 10px 0 rgba(92, 92, 92, .65); box-shadow: -2px 0 10px 0 rgba(92, 92, 92, .65) } .easypack-widget.mobile .point-details .details-wrapper .details-content { display: table-row; background: #fff; overflow: scroll; position: absolute; top: 0; height: calc(98% - 29px); width: 100%; z-index: 100 } .easypack-widget.mobile .point-details .details-wrapper .details-content .close-button { position: relative; display: block; margin: 10px; color: #000; z-index: 910 } .easypack-widget.mobile .point-details .details-wrapper .details-content .description, .easypack-widget.mobile .point-details .details-wrapper .details-content .point-box { display: block; width: 100%; height: auto; background: none; text-align: left; color: #000; font-size: 14px; line-height: 20px; padding: 20px } .easypack-widget.mobile .point-details .details-wrapper .details-content .description h1, .easypack-widget.mobile .point-details .details-wrapper .details-content .point-box h1 { padding: 0; color: #000!important; font-size: 16px } .easypack-widget.mobile .point-details .details-wrapper .details-content .description p, .easypack-widget.mobile .point-details .details-wrapper .details-content .point-box p { padding: 0 } .easypack-widget.mobile .point-details .details-wrapper .details-content .point-box { padding: 50px 20px 0 } .easypack-widget.mobile .point-details .details-wrapper .details-content .description { padding: 20px } .easypack-widget.mobile .point-details .details-wrapper .details-content .description .item { display: block } .easypack-widget.mobile .point-details .details-wrapper .details-content .description .item .definition, .easypack-widget.mobile .point-details .details-wrapper .details-content .description .item .term { display: block; width: 100% } .easypack-widget.mobile .point-details .details-wrapper .details-content .description-photo { height: auto; padding: 20px; bottom: 52px; left: 0; right: 0 } .easypack-widget.mobile .point-details .details-wrapper .details-actions { display: table-row; position: absolute; z-index: 200; bottom: 0; right: 0; left: 0 } .easypack-widget.mobile .point-details .details-wrapper .details-actions .action { display: block; position: relative; width: 100%; height: 52px; background-color: #fab800; text-align: center; padding-top: 18px } .easypack-widget.mobile .point-details .details-wrapper .details-actions .action a { padding: 1px 0 4px 20px; color: #fff; text-decoration: none; text-transform: uppercase } @media screen and (max-width:768px) { .widget-modal { overflow: scroll } } .widget-modal { display: flex; flex-direction: column } .widget-modal .easypack-widget.mobile .search-widget2 .search-group:not(.with-filters), .widget-modal .search-group-btn:not(.with-filters) { width: auto } .info-window .content { padding: 10px; } .info-window a{ padding-left: 24px !important; height: 25px !important; } .info-window .links { margin-top: 10px; padding-top: 10px !important; } #listvillages { top: 90px !important; left: 30px !important; width: 50%; } .search-widget-our.search-widget2 { width: 80%; margin-top: 30px; margin-bottom: 30px; margin-left: 30px; } #widget-modal__map { background-color: #f7f6f1; } #easypack-search { font-family: Open Sans, sans-serif; font-size: 13px; font-weight: bold; background: white; }