/********************************/ /*Import*/ @import url("../fonts/clear-sans/clearsans.css"); @import url("../fonts/franklin-gothic/fgmc.css"); @import url("../fonts/rouble/rouble.css"); @import url("../fonts/icomoon/style.css"); @import url("animation.css"); /********************************/ /*UIKit's elements and icons*/ [class^="cm"] ul, [class^="cm"] p, [class^="cm"] h1, [class^="cm"] h2 {margin: 0; padding: 0;} .uk-grid+.uk-grid, .uk-grid>.uk-grid-margin, *+.uk-grid-margin {margin-top: 0;} .cm-main {margin-top: 70px;} .uk-section:last-child {padding-bottom: 0; color: rgb(0,0,0); background: repeating-linear-gradient(-60deg, rgba(95,35,9,.5), rgba(95,35,9,.5) 100px, rgba(255,130,22,.5) 100px, rgba(255,130,22,.5) 200px, rgba(240,199,0,.5) 200px, rgba(240,199,0,.5) 300px, rgba(76,147,139,.5) 300px, rgba(76,147,139,.5) 400px) fixed;} .uk-navbar {background: #fff;} .uk-navbar-toggle {z-index: 9999;} .uk-navbar-toggle svg {width: 32px !important; height: 32px !important;} .uk-navbar-toggle::after, .uk-close::after {content: '' !important; display: none !important;} .uk-navbar-item {font-family: 'Franklin Gothic Medium Cond'; font-size: 24px;} .uk-navbar-item ul {list-style: none; margin-bottom: 0;} .uk-navbar-item li {display: inline-flex; flex-flow: row nowrap; align-items: center; justify-content: center;} .uk-navbar-item li:not(:last-child),.uk-navbar-item li span {margin-right: 8px;} .uk-offcanvas .uk-panel a:not([class]) {color: #555 !important; font-size: 15px; font-family: 'Clear Sans';} .tm-header {margin: -80px 0 0;} .cm-gallery-padding > div > div {padding-bottom: 25px;} [class^="icon"] {width: auto !important; height: auto !important;} .uk-button, .btn, .uk-form-label {font-family: 'Clear Sans' !important;} .uk-button:not(:last-child) {margin-right: 16px;} .uk-form-row {width: 100%; display: flex; flex-flow: column nowrap; align-items: center; justify-content: center;} .uk-form input:not([type="radio"]):not([type="checkbox"]), .uk-form select {width: 75%; max-width: 540px; border-radius: 50px; margin-top: 16px;} a.wk-button { border: 1px solid #eadb2b !important; border-radius: 16px !important; color: #eadb2b !important; background: #505050 !important; } a.wk-button:hover, a.wk-button:focus { border: 1px solid #505050 !important; border-radius: 16px !important; color: #444 !important; background: #eadb2b !important; } .cm-button-pravila { font-size: 22px; background-color: #444; color: #eadb2b; border: 1px solid #444; } .cm-button-pravila:hover, .cm-button-pravila:focus, .cm-button-pravila:active { background-color: #eadb2b; color: #444; border: 1px solid #444 } /********************************/ /*Common elements*/ * {box-sizing: border-box; margin: 0; padding: 0;} *::selection {background: rgba(47,225,70, .7); color: rgb(255,255,255);} html, body {z-index: 0; font-family: 'Clear Sans'; font-weight: 300; font-size: 18px;} body.pinks-family, body.pinks-family *:not(.cm-rur):not(.cm-second-screen *) {font-family: 'Franklin Gothic Medium Cond' !important;} html, body, article {min-height: 100%;} body {background-color: rgb(245,245,245);} [class^="cm"] a {color: rgba(73,105,240, .75); border-bottom: solid 1px rgba(73,105,240, .35); text-decoration: none;} [class^="cm"] a:visited {color: rgb(109, 13, 132); border-bottom: solid 1px rgba(109, 13, 132, .65);} .cm-fullwidth {width: 100%;} .cm-header {width: 100%; height: 80px; position: fixed; top: 0; display: none; flex-flow: row nowrap;align-items: center; z-index: 99; padding-left: 24px; background-color: rgb(255,255,255); box-shadow: 0 0 5px rgba(40,40,40,.5);} .cm-header h1 {font-size: 32px;} .cm-header h2 {font-size: 22px; margin-left: 32px; font-family: 'Clear Sans';} .cm-contacts {margin-bottom: 0; font-family: 'Clear Sans';} .cm-footer {width: 100%; height: 164px; display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; z-index: 2; text-align: left; font-weight: 300;} h1, .uk-h1 {font-size: 40px; font-weight: 700;} h2, .uk-h2 {font-size: 28px; font-weight: 300;} sup {font-size: 50%;} .cm-rur {font-size: 85%; font-family: 'Rouble';} /********************************/ /*Main Page*/ [class*="screen"] {width: 100%; min-height: 700px; margin: 0 auto; background-size: cover; background-position: center; background-repeat: no-repeat;} [class$="third"] {width: 33%;background-repeat: no-repeat; background-size: cover;} .cm-third-right {float: right;} ul.cm-badges {list-style: none; width: 100%; margin: 24px 0; padding: 0; display: flex; flex-flow: row nowrap; justify-content: stretch;} ul.cm-badges.cm-vertical {flex-flow: column nowrap; align-items: stretch; justify-content: stretch;} .cm-badges li {display: inline-block; padding: 8px; color: rgb(255,255,255); text-align: center; flex-grow: 1;} .cm-badges.cm-marginafter li:not(:last-child) {margin-right: 40px;} .cm-badges li h1, .cm-badges li h2 {color: rgb(255,255,255);} .cm-badges li:nth-child(1) {background-color: /*rgb(214,58,42)*/rgb(95,35,9);} .cm-badges li:nth-child(2) {background-color: rgb(76,147,139);} .cm-badges li:nth-child(3) {background-color: rgb(240,199,0);} .cm-badges li:nth-child(4) {background-color: /*rgb(212,128,24)*/rgb(255,130,22);} .cm-badges li:first-child:last-child {background-color: rgb(9,31,80);} ul.cm-marked {list-style: circle;} ul.cm-marked li {margin: 0 0 0 24px;} .cm-container-price {margin-top: 64px;} [class^="cm-price"] {padding: 48px 18px; color: rgb(0,0,0) !important; font-weight: 400; background-color: rgb(255,255,255); border-radius: 50%; border: solid 24px; border-top-color: rgb(95,35,9); border-right-color: rgb(76,147,139); border-bottom-color: rgb(240,199,0); border-left-color: rgb(255,130,22);} .cm-price-small {padding: 28px 4px;} .cm-declare {margin-bottom: 48px;} .cm-declare h1 {text-align: center;} .cm-separator {width: 105%; margin: 0 -2.5%; border-bottom: dashed 24px rgb(9,31,80);} .cm-list {font-weight: 400; margin-top: 24px; line-height: 170%;} .cm-show-photo {display: inline-block; font-family: 'Franklin Gothic Medium Cond'; margin: 8px 16px; padding: 4px 8px; background-color: transparent; color: rgb(255,255,255); border: solid 2px; transition: all .15s ease-out;} .cm-show-photo:hover {color: rgb(0,0,0); background-color: rgb(255,255,255); border-color: rgb(255,255,255);} .cm-show-photo.black {color: rgb(0,0,0);} .cm-show-photo.cm-fs-button {width: 100%; margin: 0 0 16px;} /*logo and title*/ .cm-first-screen {height: 550px; background-image: url('/images/bg1.jpg'); color: rgb(255,255,255); text-shadow: 1px 1px 3px rgb(12,12,12); padding: 24px; background-position: center;} .cm-first-screen * {color: rgb(255,255,255) !important;} .cm-first-screen .cm-smlogo {display: none;} .cm-first-screen h1 {font-size: 64px; font-weight: 100; text-align: center;} .cm-first-screen h2 {position: absolute; top: 16px; right: 16px; font-size: 24px; font-weight: 300; line-height: 157%; text-align: left;} /*chevrones*/ .cm-second-screen {height: 630px; display: flex; flex-flow: row nowrap; justify-content: center; font-family: 'Clear Sans' !important; font-size: 90%;} .cm-second-screen * {font-family: 'Clear Sans' !important;} .cm-second-screen [class*="third"] {width: 400px; height: 630px; border: none; border-bottom: solid 48px; border-top: solid 48px; background-color: rgb(255,255,255); color: rgb(0,0,0); box-shadow: 0 -4px 8px rgba(40,40,40,.6);} .cm-second-screen [class*="third"]:visited {color: rgb(0,0,0);} .cm-second-screen .cm-content-inner {padding: 16px; text-align: center;} .cm-second-screen h1 {font-weight: bold;} .cm-mm-greenwich {border-color: rgb(76,147,139) !important;} .cm-mm-greenwich.cm-second-third {border-color: rgb(76,147,139) !important;} .cm-mm-greenwich .cm-border-triangle .cm-down {border-top-color: rgb(76,147,139) !important;} .cm-mm-greenwich .cm-border-triangle .cm-left {border-bottom-color: rgb(76,147,139) !important;} .cm-mm-greenwich .cm-border-triangle .cm-right {border-bottom-color: rgb(76,147,139) !important;} .cm-mm-greenwich h1, .cm-mm-greenwich span {color: rgb(76,147,139);} .cm-mm-greenwich .cm-list {display: flex; align-items: center; justify-content: center; text-transform: uppercase;} .cm-mm-greenwich .cm-list > *:first-child {margin-right: 16px;} .cm-mm-hotels {border-color: rgb(95,35,9) !important; text-transform: capitalize;} .cm-mm-hotels.cm-second-third {border-color: rgb(95,35,9) !important;} .cm-mm-hotels .cm-border-triangle .cm-down {border-top-color: rgb(95,35,9) !important;} .cm-mm-hotels .cm-border-triangle .cm-left {border-bottom-color: rgb(95,35,9) !important;} .cm-mm-hotels .cm-border-triangle .cm-right {border-bottom-color: rgb(95,35,9) !important;} .cm-mm-hotels h1, .cm-mm-hotels h2, .cm-mm-hotels span {color: rgb(95,35,9);} .cm-mm-hotels .cm-border-triangle .cm-left::before {background-color: rgb(76,147,139) !important;} .cm-mm-hotels .cm-border-triangle .cm-right::before {background-color: rgb(76,147,139) !important;} .cm-mm-pf {background-color: rgb(252,236,39) !important; border-color: rgb(252,236,39) !important;} .cm-pf-menu .cm-mm-pf {border-color: rgb(80,80,80) !important;} .cm-pf-menu .cm-mm-pf .cm-patch {background-color: rgb(252,236,39) !important;} .cm-mm-pf .cm-content-inner {padding: 0px;} .cm-pf-menu .cm-border-triangle .cm-down {border-top-color: rgb(80,80,80) !important;} .cm-pf-menu .cm-border-triangle .cm-left {border-bottom-color: rgb(80,80,80) !important;} .cm-pf-menu .cm-border-triangle .cm-right {border-bottom-color: rgb(80,80,80) !important;} .cm-mm-pf h1, .cm-mm-pf h2, .cm-mm-pf span {color: rgb(0,0,0);} .cm-grey {background-color: rgb(235,237,240); padding: 16px 0;} .cm-second-screen .cm-first-third, .cm-second-screen .cm-last-third {margin-top: -40px;} .pinks-family .cm-second-screen .cm-first-third, .pinks-family .cm-second-screen .cm-last-third {margin-top: 0px;} .cm-second-screen .cm-first-third {z-index: 2;} .cm-second-screen .cm-second-third {height: 662px; margin-top: -64px; z-index: 3;} .pinks-family .cm-second-screen .cm-second-third {margin-top: -24px;} .cm-second-screen .cm-last-third {z-index: 2;} .cm-second-screen .cm-second-third {border-bottom-color: transparent !important;} .cm-second-screen .cm-second-third .cm-content-inner {height: 552px;} .cm-second-screen .cm-border-triangle {width: 400px;} .cm-second-screen .cm-border-triangle .cm-down {width: 0; height: 0;border-left: 200px solid transparent;border-right: 200px solid transparent;border-top: 48px solid red;margin-top: 60px;} .cm-second-screen .cm-border-triangle .cm-left {width: 0;height: 0;border-right: 200px solid transparent;border-bottom: 48px solid red;float: left; margin-top: -48px;} .cm-second-screen .cm-border-triangle .cm-right {width: 0;height: 0;border-left: 200px solid transparent;border-bottom: 48px solid red;float: right; margin-top: -48px;} .cm-second-screen .cm-border-triangle .cm-left::before {content: ''; display: inline-block; width: 100px; height: 8px; background-color: rgb(95,35,9); margin-top: -14px; margin-left: 104px; transform: rotate(15deg);} .cm-second-screen .cm-border-triangle .cm-right::before {content: ''; display: inline-block; width: 100px; height: 8px; background-color: rgb(95,35,9); margin-top: -14px; margin-left: -204px; transform: rotate(-15deg);} .cm-second-screen .cm-second-third .cm-borders {display: flex; flex-flow: row nowrap; margin-bottom: -78px;} .cm-second-screen .cm-second-third .cm-borders *:not(.cm-patch) {display: flex; flex: 1 1 100%; border-bottom: solid 48px; margin-left: -15px; margin-right: -15px; z-index: 2;} .cm-second-screen .cm-second-third .cm-borders *:not(.cm-patch)::before {width: 80px; height: 8px; margin-top: -16px; background-color: rgb(95,35,9); content: '';} .cm-second-screen .cm-second-third .cm-borders *:first-child {transform: rotate(20deg); justify-content: flex-end;} .cm-second-screen .cm-second-third .cm-borders *:first-child::before {margin-right: 20.5px;} .cm-second-screen .cm-second-third .cm-borders *:last-child {transform: rotate(-20deg); justify-content: flex-start;} .cm-second-screen .cm-second-third .cm-borders *:last-child::before {margin-left: 20.5px;} .cm-second-screen .cm-second-third .cm-patch {width: 12.5vw; height: 48px; margin-left: 8.25vw; position: absolute; background-color: rgb(255,255,255); z-index: 0;} .cm-details {display: none; height: 200px; border: dashed 1px rgba(200,200,200.5); margin: 4px 8px; padding: 4px 8px;} /*price of visit and etc.*/ .cm-third-screen {display: flex; flex-flow: row nowrap; align-items: stretch; margin-top: 72px;} .cm-third-screen .cm-first-third {background-image: url('/images/img1.jpg'); background-position: center; display: flex; flex-flow: column; justify-content: flex-end;} .cm-third-screen .cm-content-wide {padding: 0 24px; flex: 1 1 66%;} /*spa*/ .cm-fourth-screen {height: auto; background-color: rgba(255,255,255,.32); background-blend-mode: overlay; background-image: url('/images/bg2.jpg'); display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; padding: 24px; color: rgb(0,0,0);} .cm-fourth-screen .cm-content-inner {width: 100%; margin-top: 40px; display: flex; flex-flow: column nowrap; align-items: flex-end; justify-content: center;} .cm-fourth-screen .cm-content-inner > * {width: 1000px; height: auto;} .cm-fourth-screen h1 {text-align: center; font-size: 88px; color: rgb(9,31,80);} .cm-fourth-screen h2 {font-weight: 400; color: rgb(9,31,80);} .cm-fourth-screen [class*="third"] {background-color: rgb(255,255,255); background-size: 400px 400px; background-repeat: no-repeat; border: solid 32px rgb(255,255,255); padding-left: 432px;} .cm-fourth-screen [class*="third"] > h1 {display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; font-size: 56px;} .cm-fourth-screen [class*="third"] > h1::after {width: 32px; height: 56px; margin-right: -32px; display: inline-block; content: '';} .cm-fourth-screen [class*="third"] > h2 {color: rgb(0,0,0);} .cm-fourth-screen .cm-first-third h1 {color: rgb(95,35,9);} .cm-fourth-screen .cm-second-third h1 {color: rgb(76,147,139);} .cm-fourth-screen .cm-last-third h1 {color: rgb(240,199,0);} .cm-fourth-screen .cm-first-third {background-image: url('/images/spa1.png');} .cm-fourth-screen .cm-first-third h1::after {background-color: rgb(95,35,9);} .cm-fourth-screen .cm-second-third {background-image: url('/images/spa2.png');} .cm-fourth-screen .cm-second-third h1::after {background-color: rgb(76,147,139);} .cm-fourth-screen .cm-last-third {background-image: url('/images/spa3.png');} .cm-fourth-screen .cm-last-third h1::after {background-color: rgb(240,199,0);} .cm-fourth-screen ul {list-style: none; text-align: left;} .cm-fourth-screen table {background: rgb(255,255,255); border-bottom: solid 1px #e9e9e9;} .cm-fourth-screen table td:first-child {border-left: solid 1px #e9e9e9;} .cm-fourth-screen table td:last-child {border-right: solid 1px #e9e9e9;} .cm-fourth-screen .cm-show-photo {margin-right: 0;} /*banquets*/ .cm-sixth-screen {height: 450px; display: flex; flex-flow: column nowrap; align-items: center; justify-content: center;} .cm-sixth-screen h1 {font-size: 64px;} .cm-sixth-screen .cm-badges {font-size: 16px; font-weight: 300;} .cm-sixth-screen .cm-badges li {width: 25%;display: flex; flex-flow: column nowrap; justify-content: space-between; padding: 24px 16px; font-size: 18px;} .cm-sixth-screen .cm-badges li:not(:last-child) {margin-right: 40px;} /*partys*/ .cm-seventh-screen {display: flex; flex-flow: row nowrap; align-items: stretch;} .cm-seventh-screen .cm-content-inner {display: flex; flex-flow: column nowrap;} .cm-seventh-screen .cm-content-inner > ul {flex: 1 1 100%; font-size: 130%;} .cm-seventh-screen .cm-last-third {background-image: url('/images/img2.jpg'); display: flex; flex-flow: column; justify-content: flex-end;} .cm-seventh-screen .cm-content-wide {padding: 0 24px; flex: 1 1 66%;} .cm-video-gallery {display: flex; flex-flow: column nowrap; align-items: center; justify-content: center;} .cm-video-container {width: 100%; max-width: 600px; height: 400px; text-align: center; padding: 8px 0;} .cm-video-container iframe {width: 100%; height: 100%;} /*conclusion*/ .cm-conclusion {padding: 24px; background-position: center -88px; display: flex; align-items: center; justify-content: center; flex-flow: column nowrap;} .cm-conclusion h1 {font-size: 56px; line-height: 150%;} .cm-conclusion h2 {font-size: 32px; line-height: 150%; display: flex; align-items: center; justify-content: center;} .cm-conclusion a {border-bottom: none; display: flex;} .cm-conclusion span[class^="icon"] {padding: 8px;} .cm-conclusion span[class^="icon"].cm-first {color: rgb(95,35,9);} .cm-conclusion span[class^="icon"].cm-second {color: rgb(76,147,139);} .cm-conclusion span[class^="icon"].cm-last {color: rgb(240,199,0);} /********************************/ /*Hotels*/ .cm-hotels-list h2 {font-weight: 300; text-align: center;} .cm-htls-photo {width: 100%; height: 300px; display: flex; flex-flow: column nowrap; justify-content: flex-end; background-position: center; background-size: cover; background-repeat: no-repeat; color: rgb(255,255,255);} .cm-htls-photo.first {background-image: url('/images/hotels-1.jpg');} .cm-htls-photo.second {background-image: url('/images/hotels-2.jpg');} .cm-htls-photo.last {background-image: url('/images/hotels-3.jpg');} .cm-htls-photo.grill {height: 700px; background-image: url('/images/htls-grill.jpg');} .cm-htls-take {margin-top: 8px; margin-bottom: 8px; text-align: center;} .cm-htls-take.cm-fullwidth {width: calc(100% - 32px); border-bottom: solid 2px;} .cm-htls-take:hover {border-bottom-color: transparent;} .cm-htls-grill-logo {max-width: 1140px; width: 100%; height: auto;} .cm-contact {padding: 4px 16px;} .cm-half {background: repeating-linear-gradient(-45deg, rgb(80,80,80) 0%, rgb(80,80,80) 33%, rgb(255,255,255) 33%, rgb(255,255,255) 100%);} .cm-offer {padding: 16px; margin: 24px 0 74px; background-color: rgb(214,58,42); text-align: center;} .cm-offer > * {color: rgb(255,255,255);} .cm-pricing, .cm-pricing * {text-align: center;} .cm-pricing h3 {margin-top: 0; padding: 16px 0; border-bottom: solid 1px rgb(229,229,229); font-size: 32px; font-weight: 100;} /********************************/ /*Pink's Family*/ /*252,236,39*/ body.pinks-family {color: rgb(0,0,0);} .form-overlay {width: 100%; display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; align-items: center; justify-content: center; font-size: 32px; background-color: rgba(252,236,39,.95);} .cm-pf-main img {width: 100%; margin-bottom: 32px;} .cm-pf-feedback {background-color: rgb(252,236,39);} .cm-pf-feedback .uk-container {border-left: solid 2px rgb(80,80,80); border-right: solid 2px rgb(80,80,80);} .cm-pf-feedback.cm-last-section .uk-container:last-child {padding-bottom: 32px; border-bottom: solid 2px rgb(80,80,80); border-radius: 0 0 16px 16px;} .cm-pf-fb-panel {} .cm-pf-fb-p-header {display: flex; flex-flow: row nowrap;} .cm-pf-fb-p-header > * {width: 50%; flex: 1 1 100%; text-align: center; padding: 8px; font-size: 24px; border-top-left-radius: 16px; border-top-right-radius: 16px; background-color: rgb(80,80,80); border: solid 1px rgb(47,47,47); border-bottom: none; color: rgb(252,236,39); cursor: pointer;} .cm-pf-fb-p-header > .cm-cur {background-color: rgb(47,47,47); cursor: default;} .cm-pf-fb-desk {background-color: rgb(47,47,47); border-bottom-left-radius: 16px; border-bottom-right-radius: 16px;} .cm-pf-fb-desk a {color: rgb(255,255,255); border-bottom-color: rgba(255,255,255,.8);} .cm-pf-fb-d-header {padding: 8px; display: flex; flex-flow: row nowrap; align-items: center; justify-content: center;} .cm-pf-fb-d-header a {padding: 4px 8px;} .cm-pf-fb-d-header a.cm-cur {color: rgb(252,236,39); border-bottom-color: rgb(252,236,39);} .cm-pf-fb-d-header a:hover {background-color: rgb(252,236,39); color: rgb(47,47,47);} .cm-pf-fb-d-header span {margin-left: 16px; color: rgb(255,255,255);} .cm-pf-d-c-comment {display: flex; flex-flow: row-nowrap; background-color: rgb(80,80,80); border-radius: 16px; padding: 16px; margin: 8px 16px; color: rgb(255,255,255);} .cm-pf-d-c-comment span {color: rgb(252,236,39);} .cm-pf-d-c-c-avatar {padding: 0 40px; text-align: center;} .cm-pf-d-c-c-avatar img {width: 80px; height: 80px; border-radius: 50%; border: solid 2px rgb(252,236,39);} .cm-pf-check-feedback {width: 100%; display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; font-size: 32px; padding: 24px; margin: 24px 0; background-color: transparent; color: rgb(80,80,80); border: solid 4px rgb(80,80,80); border-radius: 16px; cursor: pointer; transition: all .15s ease-out;} .cm-pf-check-feedback:hover {background-color: rgb(80,80,80); color: rgb(252,236,39);} .cm-pf-add-comment {padding: 16px 16px 0; color: rgb(255,255,255);} .cm-pf-add-comment .cm-pf-score-row {height: 64px; padding: 16px 12px;} .cm-pf-add-comment .cm-pf-your-score {float: left;} .cm-pf-add-comment .cm-pf-send {float: right;} .cm-pf-add-comment .cm-pf-send input {margin: 0;} .cm-pf-add-comment textarea {background-color: rgb(80,80,80); color: rgb(255,255,255); border-color: rgb(22,22,22);} .cm-pf-add-comment textarea:not(:first-of-type) {border-top: none;} .cm-pf-tour {padding: 64px 0 0;} .cm-pf-tour h1{padding: 8px 0 24px; text-align: center;} .cm-pf-t-content {display: flex; background-color: rgb(47,47,47); padding: 0 16px; border-radius: 16px;} .cm-pf-t-c-row {display: flex; flex-flow: column nowrap; padding: 16px; align-items: center; justify-content: center;} .cm-pf-t-c-row:first-child {flex: .4 .4 40%;} .cm-pf-t-c-row:last-child {flex: .6 .6 60%;} .cm-pf-t-c-r-label {width: 100%; padding: 8px 16px; color: rgb(252,236,39); text-align: center; text-transform: uppercase; background-color: rgb(80,80,80); border-radius: 40px; font-size: 22px; align-items: center; justify-content: center;} .cm-pf-t-c-r-label:not(:last-child) {margin-bottom: 16px;} .cm-pf-t-c-r-text {color: rgb(255,255,255); padding-left: 16px;} h2.cm-pf-t-c-r-text{text-transform: uppercase;} .cm-pf-bullet::before {content: '•'; color: rgb(252,236,39); font-size: 22px; margin-bottom: -4px;} .cm-pf-summ {display: flex; flex-flow: row nowrap; margin: 8px 0 16px;} .cm-pf-summ::before {content: ''; display: block; width: calc(50% - 8px); height: 8px; border-bottom: solid 1px rgb(255,255,255); border-left: solid 1px rgb(255,255,255); border-bottom-left-radius: 8px;} .cm-pf-summ::after {content: ''; display: block; width: calc(50% - 8px); height: 8px; border-bottom: solid 1px rgb(255,255,255); border-right: solid 1px rgb(255,255,255); border-bottom-right-radius: 8px;} .cm-pf-summ span {display: block; width: 8px; height: 8px; margin-top: 8px; border-top: solid 1px rgb(255,255,255);} .cm-pf-summ span:first-child {border-right: solid 1px rgb(255,255,255); border-top-right-radius: 8px;} .cm-pf-summ span:last-child {border-left: solid 1px rgb(255,255,255); border-top-left-radius: 8px;} .cm-pf-tour-price {padding: 88px 0 0;} .cm-pf-tour-price h1,.cm-pf-tour-price h2{text-align: center;} .cm-pf-tour-price > h2 {margin-bottom: 16px;} .cm-pf-tour-economy h1 {color: rgb(252,236,39); background-color: rgb(80, 80, 80); padding: 8px 24px; border-radius: 16px; text-align: center; font-size: 72px;} .cm-pf-t-e-outer {border: solid 2px rgb(80,80,80); padding: 24px; margin: 24px;} .cm-pf-t-e-inner-content {font-size: 24px; color: rgb(0,0,0); text-align: center;} .cm-pf-t-e-i-c-block {display: flex; flex-flow: row nowrap; align-items: center; justify-content: center;} .cm-pf-t-e-i-c-block > :first-child {margin-right: 8px;} .cm-pf-t-e-i-c-block p:not(:first-child) {font-size: 75%;} .cm-pf-tour-economy .cm-hl {font-size: 72px; font-weight: 900; color: rgb(220,21,21);} .cm-pf-tour-economy .cm-hl-sm {font-size: 60px; font-weight: 900; color: rgb(220,21,21);} .yui-calcontainer {background-color: rgb(80,80,80); border: none; border-radius: 16px; z-index: 1 !important;} .yui-calendar {border-spacing: 16px;} .yui-calendar .calhead {width: 100%; background-color: transparent; border: none; border-bottom: solid 1px rgb(252,236,39); padding-bottom: 16px;} .yui-calendar .calhead a {font-weight: 100; color: rgb(252,236,39) !important; border-bottom: none; font-size: 22px;} .yui-calendar .calweekdaycell {color: rgb(255,255,255); text-transform: uppercase;} .yui-calendar td.calcell {width: 48px; height: 48px; border-radius: 50%; border: solid 1px rgb(252,236,39) !important;} .yui-calendar td.calcell a {color: rgb(252,236,39) !important; border-bottom: none;} .yui-calendar td.calcell:hover {background: rgba(252,236,39,.8);} .yui-calendar td.calcell:hover a {color: rgb(47,47,47) !important;} .yui-calendar .calbody a:hover {background: transparent;} .yui-calendar td.calcell.oom, .yui-calendar td.calcell.previous {border-color: transparent !important; background-color: transparent; color: rgb(47,47,47) !important;} .yui-calendar td.calcell.today {background-color: transparent;} .yui-calendar td.calcell.today:hover {background-color: rgb(252,236,39);} .yui-calendar td.calcell.selected {background: rgb(252,236,39);} .yui-calendar td.calcell.selected a {color: rgb(47,47,47) !important;} .yui-calendar [class*="calnav"]:not(.calnav) {width: 24px; height: auto; background-position: center;} .yui-calendar .calnavleft {background-image: url('/images/navleft.png');} .yui-calendar .calnavright {background-image: url('/images/navright.png');} .rsform-block-calendar #txtcal2_0 {display: none;} .cm-sessions-select {display: flex; align-items: center; justify-content: center; padding: 16px 0;} .cm-sessions-select > span {width: 50px; height: 50px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background-color: rgb(47,47,47); color: rgb(255,255,255);} .cm-sessions-select > span > span {margin-top: -10px;} .cm-sessions-header {width: 100%; display: flex; justify-content: space-around; align-items: center; padding: 16px; font-size: 16px; line-height: 150%;} .cm-sessions-header span:not(:first-child) {width: 20%; text-align: center; font-weight: bold; color: rgb(0,0,0);} .cm-sessions-ch {height: 464px; overflow-y: hidden; margin: 24px 0;} .cm-sessions-select {font-size: 32px; color: rgb(47,47,47); text-align: center; cursor: pointer;} .cm-sessions-select.inactive {color: rgb(80,80,80);} fieldset.formContainer {width: 75%; display: flex; flex-flow: column nowrap; align-items: center; justify-content: center;} .uk-form-label {width: auto !important;} .rsform-block-time {width: 100%;} .cm-sessions-header {padding: 16px; font-size: 24px; line-height: 150%; border-radius: 50px; border: solid 1px rgb(47,47,47);} .rsform-block-time label[for*="Time"] {width: 100%; display: inline-flex; flex-flow: row wrap; justify-content: space-around; align-items: center; background-color: rgb(47,47,47); color: rgb(255,255,255); padding: 8px; font-size: 22px; line-height: 120%; border-radius: 50px;} .rsform-block-time label[for*="Time"]:hover {background-color: rgb(80,80,80);} .rsform-block-time label[for*="Time"]:not(:first-child) {margin-top: 16px;} .rsform-block-time label[for*="Time"] > span {width: 20%; text-align: center;} .rsform-block-time label[for*="Time"] > div {font-size: 24px;} .rsform-block-time .cm-label-price::after {font-family: 'Rouble'; content: 'o'; font-size: 80%;} .rsform-block-time .cm-amount-container span {padding: 0 4px;} .rsform-block-time .cm-amount-container span.cm-booking {font-weight: bold; font-size: 28px; padding: 0 16px;} .rsform-block-time .cm-amount-container span.inactive {color: rgb(200,200,200);} .rsform-block-time input[type="radio"]:not([class*="uk-"]) {width: 24px; height: 24px; background: none !important; border-radius: 0; border: none;} .rsform-block-time input[type="radio"]::before {content: ''; margin: 0 !important; width: 24px !important; height: 24px !important; background: none !important; background-image: url('/images/cross.png') !important; background-size: 24px !important; transition: all .5s ease-out;} .rsform-block-time input[type="radio"]:checked {transform: rotate(45deg);} .rsform-block-time input[type="radio"]:checked::before {border-radius: 0 !important; background-size: 40px !important;} input[type="checkbox"]:not([class*="uk-"]) {width: 32px; height: 32px; border: 5px solid rgb(220,21,21) !important; margin-right: 8px;} input[type="checkbox"]:checked:not([class*="uk-"]) {background-color: rgb(47,47,47) !important; border-color: transparent !important;} input[type="checkbox"]:checked::before {font-size: 24px !important; line-height: 21px !important; color: rgb(252,236,39) !important;} .cm-session-summ {text-align: center;} .thank-you-message {width: 75%; margin: 40px auto 0; display: none;} .cm-pf-settings-form {display: flex; flex-flow: row wrap;} .cm-pf-settings-form div:not(:last-child) {flex-grow: .2; padding: 8px;} .cm-pf-settings-form div:last-child {flex: 1 1 100%;} .cm-pf-settings-form label {padding-right: 8px;} .cm-pf-settings-form input:not([type="submit"]) {display: inline-block !important; width: auto !important;} .pinks-family .rsform-button, .pinks-family .rsform-submit-button {background-color: rgb(47,47,47) !important; color: rgb(252,236,39) !important; padding: 16px 48px !important; flex-grow: 1; font-size: 18px !important; transition: all .25s ease-out;} .pinks-family .rsform-button:hover, .pinks-family .rsform-submit-button:hover {background-color: rgb(0,0,0) !important;} .pinks-family .uk-accordion {margin: 16px 0;} .pinks-family .uk-accordion, .pinks-family .uk-accordion li {width: 100%; max-width: 540px;} .pinks-family .uk-accordion-title, .pinks-family .uk-accordion-content {padding: 16px;} .pinks-family .uk-accordion-title {width: 100%; display: block; background-color: rgb(80,80,80); color: rgb(255,255,255); text-align: center;} .pinks-family .uk-accordion-content {width: 100%; margin: 0; border: solid 1px rgb(80,80,80); border-top: none;} .required-field {display: flex; flex-flow: column nowrap; align-items: center; justify-content: center;} .required-field .formError {margin: 8px;} .cm-pf-t-e-calendar {display: flex; flex-flow: column nowrap; align-items: center; justify-content: center;} .cm-pf-t-e-c-self {background-color: rgb(80,80,80); border-radius: 16px; margin-top: 24px;} .cm-pf-t-e-c-month {display: flex; flex-flow: row nowrap; justify-content: space-between; padding: 16px; font-size: 22px; text-align: center; color: rgb(252,236,39); border: solid 1px rgb(252,236,39); border-bottom: solid 1px rgb(47,47,47);} [class^="cm-pf-t-e-c-m-arrow"] {color: rgb(255,255,255);} [class^="cm-pf-t-e-c-m-arrow"]:not(.inactive) {cursor: pointer;} [class^="cm-pf-t-e-c-m-arrow"].inactive {color: rgb(47,47,47); cursor: default;} .cm-pf-t-e-c-days {border: solid 1px rgb(252,236,39); padding: 8px;} .cm-pf-t-e-c-days thead td {color: rgb(255,255,255) !important;} .cm-pf-t-e-c-days td {width: 60px; height: 60px; padding: 16px; margin: 8px; font-size: 16px; color: rgb(252,236,39); text-align: center; display: inline-block;} .cm-pf-t-e-c-days td:first-child {margin-left: 16px;} .cm-pf-t-e-c-days td:last-child {margin-right: 16px;} .cm-pf-t-e-c-days td.inactive {color: rgb(47,47,47); cursor: default;} .cm-pf-t-e-c-days tbody td:not(.inactive) {border-radius: 50%; border: solid 1px rgb(252,236,39); color: rgb(252,236,39); transition: all .15s ease-out; cursor: pointer;} .cm-pf-t-e-c-days tbody td:not(.inactive):hover,.cm-pf-t-e-c-days tbody td.cm-selected {background-color: rgb(252,236,39); color: rgb(0,0,0);} .cm-pf-t-sessions {display: flex; align-items: center; justify-content: center; font-size: 32px; margin-top: 32px;} .cm-pf-t-sessions table {border: solid 10px #e4dd47; outline: solid 3px rgb(80,80,80);} .cm-pf-t-sessions thead {color: rgb(0,0,0);} .cm-pf-t-sessions td {padding: 8px 20px; text-align: center;} .cm-pf-t-s-row:nth-child(2) td {border-top: solid 10px #e4dd47;} .cm-pf-t-s-row td {background-color: rgb(47,47,47); color: rgb(255,255,255); border-bottom: solid 10px #e4dd47;} .cm-pf-t-s-row td:first-child {border-radius: 60px 0 0 60px; color: rgb(225,225,225);} .cm-pf-t-s-row td:last-child {border-radius: 0 60px 60px 0;} .cm-pf-divider {width: 100%; height: 64px; background: repeating-linear-gradient(-60deg, rgb(80,80,80), rgb(80,80,80) 100px, rgb(252,236,39) 100px, rgb(252,236,39) 200px) fixed;} .cm-pf-offer {background-color: rgb(80,80,80); color: rgb(255,255,255);} .cm-pf-offer * {color: rgb(255,255,255);} .cm-pf-offer h1 {text-align: center; padding: 24px 0 16px;} .cm-pf-offer h2 {text-align: center;} .cm-pf-o-list {margin-top: 32px;} .cm-pf-o-list .wk-overlay {background-image: none !important;} .cm-pf-o-list .cm-bg-image {width: 240px; height: 240px !important; border-radius: 50%; margin: 0 auto;} .cm-pf-o-list h3 {color: rgb(252,236,39); font-size: 20px; margin: 220px 0 16px !important;} .cm-pf-o-li-el-prices {display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; margin: 24px 0; border-radius: 16px; background-color: rgb(252,236,39);} .cm-pf-o-li-el-prices * {color: rgb(0,0,0);} .cm-pf-o-li-el-prices > * {padding: 8px; text-align: center;} .cm-pf-o-li-el-prices > * > p {font-size: 85%;} .cm-pf-o-li-el-prices > * > h2 {font-weight: 400;} .cm-pf-o-li-el-pr-default h2, .cm-pf-o-li-el-pr-default h2 > * {color: rgb(80,80,80) !important;} .cm-pf-o-highlighted {border-radius: 16px; background-color: rgb(252,236,39); padding: 16px !important; margin: 0 16px !important; color: rgb(0,0,0);} .cm-pf-o-illustration img {width: 100vw;} .cm-pf-footer a, .cm-pf-footer > a:visited {color: rgb(255,255,255) !important; border-bottom-color: rgba(255,255,255,.5) !important;} .cm-pf-footer span[class^="icon"] {color: rgb(252,236,39);} .cm-pf-footer > * {display: flex; align-items: center; justify-content: center;} .cm-pf-footer > *:nth-child(1), .cm-pf-footer > *:nth-child(2) {flex-flow: row nowrap;} .cm-pf-footer > *:nth-child(3), .cm-pf-footer > *:nth-child(4) {flex-flow: column nowrap;} .cm-pf-footer > *:nth-child(2)::after{font-size: 32px; content: '—'; margin: 0 16px;} .cm-pf-slideshow .wk-slidenav {color: rgb(252,236,39);} .cm-floating { z-index: 1000; position: fixed; bottom: 40px; right: 40px; } .cm-floating button { width: 160px; height: 160px; background-color: #d82e1f; border: 4px outset #f92e1a; border-radius: 50%; font-size: 90%; font-weight: bold; font-family: 'Clear Sans'; color: #fff; text-transform: uppercase; letter-spacing: 1.7px; transition: all .25s ease-out; box-shadow: 0 0 5px rgb(110,0,0); } .cm-floating button:hover { background-color: #dd5346; } .cm-floating button:active { background-color: #bc1a0c; border-style: inset; } /********************************/ /*Optimization*/ @media all and (min-height: 850px) { .cm-fourth-screen {height: auto !important;} } @media all and (max-width: 1300px) { body {zoom: 90% !important;} h1 {font-size: 40px !important;} [class^="price"] {padding: 44px 16px !important;} h2 {font-size: 24px !important;} } @media all and (max-width: 1120px) { .cm-second-screen h1 {font-size: 40px !important;} } @media all and (max-width: 1000px) { body {zoom: 80% !important;} h1 {font-size: 40px !important;} h2 {font-size: 24px !important;} [class^="price"] {padding: 40px 16px !important;} .cm-first-screen {background-position: center 0 !important;} .cm-first-screen h2 {position: relative; text-align: center;} .cm-second-screen {display: none !important;} .cm-fourth-screen {height: auto;} .cm-fourth-screen [class$="third"] {height: auto;} .cm-fourth-screen h1 {text-align: center !important; font-size: 48px !important;} .cm-fourth-screen h2 {text-align: center !important; font-size: 24px !important; font-weight: 100; background-color: transparent;} .cm-fourth-screen .cm-content-inner {flex-flow: column nowrap !important; align-items: center !important; justify-content: center !important; flex: 1 1 100% !important; width: 100% !important;} .cm-fourth-screen ul {list-style: none; text-align: center;} .cm-fourth-screen .cm-content-inner > [class$="third"] {width: 100%; height: auto; background-image: none; background-color: transparent; border: none; padding: 0; flex: 1 1 100% !important; padding-top: 16px !important;} .cm-fourth-screen [class*="third"] > h1 {justify-content: center;} .cm-fourth-screen [class*="third"] > h1::after {display: none;} .rsform-block-time label[for*="Time"] {font-size: 22px;} .rsform-block-time label[for*="Time"] > div {font-size: 16px; text-align: center;} .cm-sessions-header {font-size: 16px;} } @media all and (max-width: 800px) { [class*="screen"]:not(.cm-first-screen) {width: 100% !important; height: auto !important; margin: 40px 0 !important;} .cm-first-screen {height: 350px !important;} .cm-first-screen h1 {font-size: 48px !important;} .cm-third-screen .cm-first-third {display: none !important;} .cm-marked li {margin-left: 20px;} .cm-third-screen .cm-content-wide {padding: 0;} .cm-fourth-screen {height: auto;} .cm-pf-t-content {flex-flow: column nowrap;} .cm-pf-t-c-row > * {text-align: center;} fieldset.formContainer {width: 100%;} } @media all and (max-width: 700px) { .cm-badges {flex-flow: column nowrap !important;} .cm-badges.cm-marginafter li:not(:last-child) {margin-right: 0 !important;} .cm-first-screen .cm-smlogo {display: block !important;} .cm-sixth-screen .cm-badges {flex-flow: column nowrap !important;} .cm-sixth-screen .cm-badges li {width: 100%;} .cm-seventh-screen .cm-last-third {display: none !important;} .cm-conclusion h1 {font-size: 48px !important;} .cm-conclusion h2 {font-size: 32px !important;} .cm-pf-tour {padding: 16px 0 0;} } @media all and (max-width: 600px) { .cm-first-screen h1 {font-size: 48px !important;} h1 {font-size: 40px !important;} h2 {font-size: 32px !important;} .yui-calendar th, .yui-calendar td {display: inline-flex; align-items: center; justify-content: center;} .yui-calendar th:not(.calhead), .yui-calendar td {max-width: 36px; max-height: 36px; margin: 4px; font-size: 14px;} .wk-grid > * {padding-left: 0 !important;} .pinks-family .rsform-button, .pinks-family .rsform-submit-button {padding: 16px !important;} } @media all and (max-width: 500px) { body {zoom: 70% !important;} .cm-first-screen h1 {font-size: 40px !important;} .cm-first-screen h2 {font-size: 24px !important;} .cm-seventh-screen {text-align: center !important;} .cm-seventh-screen .cm-content-inner {flex-flow: column nowrap !important;} .cm-seventh-screen ul {list-style: none !important;} .cm-conclusion h2 {font-size: 24px !important;} .cm-video-container {height: 200px;} } @media all and (max-width: 480px) { [class^="cm-price"] {padding: 0 !important; border: 0 !important; background: transparent !important; color: inherit !important;} .cm-pf-tour-price > h2 {margin-top: 0 !important;} .yui-calendar th:not(.calhead), .yui-calendar td {max-width: 28px; max-height: 28px; margin: 4px; font-size: 14px;} } @media all and (max-width: 400px) { h1 {font-size: 32px !important; text-align: center !important;} h2 {font-size: 26px !important; text-align: center !important;} .yui-calendar th:not(.calhead), .yui-calendar td {margin: 0; font-size: 12px;} } @media all and (max-width: 350px) { .yui-calendar th:not(.calhead), .yui-calendar td {max-width: 26px; max-height: 26px; font-size: 10px;} .pinks-family .rsform-button, .pinks-family .rsform-submit-button {padding: 8px 12px !important;} } /** Animation **/ /* Pulse */ .pulse-1-5-second { -webkit-animation: pulse 1.5s linear infinite; -moz-animation: pulse 1.5s linear infinite; -ms-animation: pulse 1.5s linear infinite; animation: pulse 1.5s linear infinite; } .pulse-2-second { -webkit-animation: pulse 2s linear infinite; -moz-animation: pulse 2s linear infinite; -ms-animation: pulse 2s linear infinite; animation: pulse 2s linear infinite; } .pulse-4-second { -webkit-animation: pulse 4s linear infinite; -moz-animation: pulse 4s linear infinite; -ms-animation: pulse 4s linear infinite; animation: pulse 4s linear infinite; } .pulse-6-second { -webkit-animation: pulse 6s linear infinite; -moz-animation: pulse 6s linear infinite; -ms-animation: pulse 6s linear infinite; animation: pulse 6s linear infinite; } .pulse-9-second { -webkit-animation: pulse 9s linear infinite; -moz-animation: pulse 9s linear infinite; -ms-animation: pulse 9s linear infinite; animation: pulse 9s linear infinite; } /* Tada */ .cm-animation-tada-1 { animation: animationTada linear 1s; animation-iteration-count: 1; transform-origin: 50% 50%; -webkit-animation: animationTada linear 1s; -webkit-animation-iteration-count: 1; -webkit-transform-origin: 50% 50%; -moz-animation: animationTada linear 1s; -moz-animation-iteration-count: 1; -moz-transform-origin: 50% 50%; -o-animation: animationTada linear 1s; -o-animation-iteration-count: 1; -o-transform-origin: 50% 50%; -ms-animation: animationTada linear 1s; -ms-animation-iteration-count: 1; -ms-transform-origin: 50% 50%; } .cm-tada-animation-2 { animation: TadaAnimationFrames linear 1s; animation-iteration-count: 1; transform-origin: 50% 50%; -webkit-animation: TadaAnimationFrames linear 1s; -webkit-animation-iteration-count: 1; -webkit-transform-origin: 50% 50%; transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; } .cm-tada-animation-3 { animation: animationTadaFrames linear 5s; animation-iteration-count: infinite; transform-origin: 50% 50%; -webkit-animation: animationTadaFrames linear 5s; -webkit-animation-iteration-count: infinite; -webkit-transform-origin: 50% 50%; } /* RotateIn */ .cm-rotatein { -webkit-animation-name: rotateIn; animation-name: rotateIn; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } /* Swing */ .cm-animation-swing { animation: animationSwing linear 1s; animation-iteration-count: 1; transform-origin: 50% 0%; -webkit-animation: animationSwing linear 1s; -webkit-animation-iteration-count: 1; -webkit-transform-origin: 50% 0%; -moz-animation: animationSwing linear 1s; -moz-animation-iteration-count: 1; -moz-transform-origin: 50% 0%; -o-animation: animationSwing linear 1s; -o-animation-iteration-count: 1; -o-transform-origin: 50% 0%; -ms-animation: animationSwing linear 1s; -ms-animation-iteration-count: 1; -ms-transform-origin: 50% 0%; } /* Slide In Up */ .cm-slideinup { -webkit-animation-name: slideInUp; animation-name: slideInUp; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation: slideInUp 2s infinite linear; animation: slideInUp 2s infinite linear; } /* Zoom */ .cm-scale-zoom-0-100 { -webkit-animation: scale-zoom-0-100 0.3s; animation: scale-zoom-0-100 0.3s; } /* Shake */ .cm-shake-animation { animation: animationShakeFrames linear 5s; animation-iteration-count: 5; transform-origin: 50% 50%; -webkit-animation: animationShakeFrames linear 5s; -webkit-animation-iteration-count: 5; -webkit-transform-origin: 50% 50%; } /* Rotate */ .rotate { animation: 5s linear 0s normal none infinite running rotate; -webkit-animation: 5s linear 0s normal none infinite running rotate; } /** Animation Keyframes **/ /* Rorate */ @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } } /* Slide In Up */ @-webkit-keyframes slideInUp { 0% { -webkit-transform: translateY(50%); transform: translateY(50%); visibility: visible; } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slideInUp { 0% { -webkit-transform: translateY(50%); transform: translateY(50%); visibility: visible; } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } /* Swing */ @keyframes animationSwing{ 0% { transform: rotate(0deg) ; } 20% { transform: rotate(15deg) ; } 40% { transform: rotate(-10deg) ; } 60% { transform: rotate(5deg) ; } 80% { transform: rotate(-5deg) ; } 100% { transform: rotate(0deg) ; } } @-moz-keyframes animationSwing{ 0% { -moz-transform: rotate(0deg) ; } 20% { -moz-transform: rotate(15deg) ; } 40% { -moz-transform: rotate(-10deg) ; } 60% { -moz-transform: rotate(5deg) ; } 80% { -moz-transform: rotate(-5deg) ; } 100% { -moz-transform: rotate(0deg) ; } } @-webkit-keyframes animationSwing { 0% { -webkit-transform: rotate(0deg) ; } 20% { -webkit-transform: rotate(15deg) ; } 40% { -webkit-transform: rotate(-10deg) ; } 60% { -webkit-transform: rotate(5deg) ; } 80% { -webkit-transform: rotate(-5deg) ; } 100% { -webkit-transform: rotate(0deg) ; } } @-o-keyframes animationSwing { 0% { -o-transform: rotate(0deg) ; } 20% { -o-transform: rotate(15deg) ; } 40% { -o-transform: rotate(-10deg) ; } 60% { -o-transform: rotate(5deg) ; } 80% { -o-transform: rotate(-5deg) ; } 100% { -o-transform: rotate(0deg) ; } } @-ms-keyframes animationSwing { 0% { -ms-transform: rotate(0deg) ; } 20% { -ms-transform: rotate(15deg) ; } 40% { -ms-transform: rotate(-10deg) ; } 60% { -ms-transform: rotate(5deg) ; } 80% { -ms-transform: rotate(-5deg) ; } 100% { -ms-transform: rotate(0deg) ; } } /* Scale */ @-webkit-keyframes scale-zoom-0-100 { 0% { -webkit-transform: scale(0.1) translateY(-100%); } 25% { -webkit-transform: scale(0.25) translateY(-75%); } 50% { -webkit-transform: scale(0.5) translateY(-50%); } 75% { -webkit-transform: scale(0.75) translateY(-25%); } 100% { -webkit-transform: scale(1) translateY(0%); } } @keyframes scale-zoom-0-100 { 0% { transform: scale(0.1) translateY(-100%); } 25% { transform: scale(0.25) translateY(-75%); } 50% { transform: scale(0.5) translateY(-50%); } 75% { transform: scale(0.75) translateY(-25%); } 100% { transform: scale(1) translateY(0%); } } /* Rotate In */ @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 1; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateIn { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 1; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } /* Shake */ @keyframes animationShakeFrames { 0% { transform: translate(0px, 0px); } 10% { transform: translate(-10px, 0px); } 20% { transform: translate(10px, 0px); } 30% { transform: translate(-10px, 0px); } 40% { transform: translate(10px, 0px); } 50% { transform: translate(-10px, 0px); } 60% { transform: translate(10px, 0px); } 70% { transform: translate(-10px, 0px); } 80% { transform: translate(10px, 0px); } 90% { transform: translate(-10px, 0px); } 100% { transform: translate(0px, 0px); } } @-webkit-keyframes animationShakeFrames { 0% { -webkit-transform: translate(0px, 0px); } 10% { -webkit-transform: translate(-10px, 0px); } 20% { -webkit-transform: translate(10px, 0px); } 30% { -webkit-transform: translate(-10px, 0px); } 40% { -webkit-transform: translate(10px, 0px); } 50% { -webkit-transform: translate(-10px, 0px); } 60% { -webkit-transform: translate(10px, 0px); } 70% { -webkit-transform: translate(-10px, 0px); } 80% { -webkit-transform: translate(10px, 0px); } 90% { -webkit-transform: translate(-10px, 0px); } 100% { -webkit-transform: translate(0px, 0px); } } /* Tada 1 */ @keyframes animationTadaFrames { 0% { transform: rotate(0deg) scaleX(1) scaleY(1); } 3% { transform: rotate(-6deg) scaleX(0.8) scaleY(0.8); } 6% { transform: rotate(-6deg) scaleX(0.8) scaleY(0.8); } 9% { transform: rotate(6deg) scaleX(1.1) scaleY(1.1); } 12% { transform: rotate(-3deg) scaleX(1.1) scaleY(1.1); } 15% { transform: rotate(6deg) scaleX(1.1) scaleY(1.1); } 18% { transform: rotate(-6deg) scaleX(1.1) scaleY(1.1); } 21% { transform: rotate(6deg) scaleX(1.1) scaleY(1.1); } 24% { transform: rotate(-6deg) scaleX(1.1) scaleY(1.1); } 27% { transform: rotate(6deg) scaleX(1.1) scaleY(1.1); } 30% { transform: rotate(0deg) scaleX(1.1) scaleY(1.1); } 31% { transform: rotate(0deg) scaleX(1) scaleY(1); } 100% { transform: rotate(0deg) scaleX(1) scaleY(1); } } @-webkit-keyframes animationTadaFrames { 0% { -webkit-transform: rotate(0deg) scaleX(1) scaleY(1); } 3% { -webkit-transform: rotate(-6deg) scaleX(0.8) scaleY(0.8); } 6% { -webkit-transform: rotate(-6deg) scaleX(0.8) scaleY(0.8); } 9% { -webkit-transform: rotate(6deg) scaleX(1.1) scaleY(1.1); } 12% { -webkit-transform: rotate(-6deg) scaleX(1.1) scaleY(1.1); } 15% { -webkit-transform: rotate(6deg) scaleX(1.1) scaleY(1.1); } 18% { -webkit-transform: rotate(-6deg) scaleX(1.1) scaleY(1.1); } 21% { -webkit-transform: rotate(6deg) scaleX(1.1) scaleY(1.1); } 24% { -webkit-transform: rotate(-6deg) scaleX(1.1) scaleY(1.1); } 27% { -webkit-transform: rotate(6deg) scaleX(1.1) scaleY(1.1); } 30% { -webkit-transform: rotate(0deg) scaleX(1.1) scaleY(1.1); } 31% { -webkit-transform: rotate(0deg) scaleX(1) scaleY(1); } 100% { -webkit-transform: rotate(0deg) scaleX(1) scaleY(1); } } /* Tada 2 */ @keyframes TadaAnimationFrames { 0% { transform: rotate(0deg) scaleX(1) scaleY(1); } 10% { transform: rotate(-3deg) scaleX(0.8) scaleY(0.8); } 20% { transform: rotate(-3deg) scaleX(0.8) scaleY(0.8); } 30% { transform: rotate(3deg) scaleX(1.1) scaleY(1.1); } 40% { transform: rotate(-3deg) scaleX(1.1) scaleY(1.1); } 50% { transform: rotate(3deg) scaleX(1.1) scaleY(1.1); } 60% { transform: rotate(-3deg) scaleX(1.1) scaleY(1.1); } 70% { transform: rotate(3deg) scaleX(1.1) scaleY(1.1); } 80% { transform: rotate(-3deg) scaleX(1.1) scaleY(1.1); } 90% { transform: rotate(3deg) scaleX(1.1) scaleY(1.1); } 100% { transform: rotate(0deg) scaleX(1.1) scaleY(1.1); } } @-webkit-keyframes TadaAnimationFrames { 0% { -webkit-transform: rotate(0deg) scaleX(1) scaleY(1); } 10% { -webkit-transform: rotate(-3deg) scaleX(0.8) scaleY(0.8); } 20% { -webkit-transform: rotate(-3deg) scaleX(0.8) scaleY(0.8); } 30% { -webkit-transform: rotate(3deg) scaleX(1.1) scaleY(1.1); } 40% { -webkit-transform: rotate(-3deg) scaleX(1.1) scaleY(1.1); } 50% { -webkit-transform: rotate(3deg) scaleX(1.1) scaleY(1.1); } 60% { -webkit-transform: rotate(-3deg) scaleX(1.1) scaleY(1.1); } 70% { -webkit-transform: rotate(3deg) scaleX(1.1) scaleY(1.1); } 80% { -webkit-transform: rotate(-3deg) scaleX(1.1) scaleY(1.1); } 90% { -webkit-transform: rotate(3deg) scaleX(1.1) scaleY(1.1); } 100% { -webkit-transform: rotate(0deg) scaleX(1.1) scaleY(1.1); } } /* Tada 3 */ @keyframes animationTada{ 0% { transform: rotate(0deg) scaleX(1.00) scaleY(1.00) ; } 10% { transform: rotate(-3deg) scaleX(0.80) scaleY(0.80) ; } 20% { transform: rotate(-3deg) scaleX(0.80) scaleY(0.80) ; } 30% { transform: rotate(3deg) scaleX(1.20) scaleY(1.20) ; } 40% { transform: rotate(-3deg) scaleX(1.20) scaleY(1.20) ; } 50% { transform: rotate(3deg) scaleX(1.20) scaleY(1.20) ; } 60% { transform: rotate(-3deg) scaleX(1.20) scaleY(1.20) ; } 70% { transform: rotate(3deg) scaleX(1.20) scaleY(1.20) ; } 80% { transform: rotate(-3deg) scaleX(1.20) scaleY(1.20) ; } 90% { transform: rotate(3deg) scaleX(1.20) scaleY(1.20) ; } 100% { transform: rotate(0deg) scaleX(1.20) scaleY(1.20) ; } } @-moz-keyframes animationTada{ 0% { -moz-transform: rotate(0deg) scaleX(1.00) scaleY(1.00) ; } 10% { -moz-transform: rotate(-3deg) scaleX(0.80) scaleY(0.80) ; } 20% { -moz-transform: rotate(-3deg) scaleX(0.80) scaleY(0.80) ; } 30% { -moz-transform: rotate(3deg) scaleX(1.20) scaleY(1.20) ; } 40% { -moz-transform: rotate(-3deg) scaleX(1.20) scaleY(1.20) ; } 50% { -moz-transform: rotate(3deg) scaleX(1.20) scaleY(1.20) ; } 60% { -moz-transform: rotate(-3deg) scaleX(1.20) scaleY(1.20) ; } 70% { -moz-transform: rotate(3deg) scaleX(1.20) scaleY(1.20) ; } 80% { -moz-transform: rotate(-3deg) scaleX(1.20) scaleY(1.20) ; } 90% { -moz-transform: rotate(3deg) scaleX(1.20) scaleY(1.20) ; } 100% { -moz-transform: rotate(0deg) scaleX(1.20) scaleY(1.20) ; } } @-webkit-keyframes animationTada { 0% { -webkit-transform: rotate(0deg) scaleX(1.00) scaleY(1.00) ; } 10% { -webkit-transform: rotate(-3deg) scaleX(0.80) scaleY(0.80) ; } 20% { -webkit-transform: rotate(-3deg) scaleX(0.80) scaleY(0.80) ; } 30% { -webkit-transform: rotate(3deg) scaleX(1.20) scaleY(1.20) ; } 40% { -webkit-transform: rotate(-3deg) scaleX(1.20) scaleY(1.20) ; } 50% { -webkit-transform: rotate(3deg) scaleX(1.20) scaleY(1.20) ; } 60% { -webkit-transform: rotate(-3deg) scaleX(1.20) scaleY(1.20) ; } 70% { -webkit-transform: rotate(3deg) scaleX(1.20) scaleY(1.20) ; } 80% { -webkit-transform: rotate(-3deg) scaleX(1.20) scaleY(1.20) ; } 90% { -webkit-transform: rotate(3deg) scaleX(1.20) scaleY(1.20) ; } 100% { -webkit-transform: rotate(0deg) scaleX(1.20) scaleY(1.20) ; } } @-o-keyframes animationTada { 0% { -o-transform: rotate(0deg) scaleX(1.00) scaleY(1.00) ; } 10% { -o-transform: rotate(-3deg) scaleX(0.80) scaleY(0.80) ; } 20% { -o-transform: rotate(-3deg) scaleX(0.80) scaleY(0.80) ; } 30% { -o-transform: rotate(3deg) scaleX(1.20) scaleY(1.20) ; } 40% { -o-transform: rotate(-3deg) scaleX(1.20) scaleY(1.20) ; } 50% { -o-transform: rotate(3deg) scaleX(1.20) scaleY(1.20) ; } 60% { -o-transform: rotate(-3deg) scaleX(1.20) scaleY(1.20) ; } 70% { -o-transform: rotate(3deg) scaleX(1.20) scaleY(1.20) ; } 80% { -o-transform: rotate(-3deg) scaleX(1.20) scaleY(1.20) ; } 90% { -o-transform: rotate(3deg) scaleX(1.20) scaleY(1.20) ; } 100% { -o-transform: rotate(0deg) scaleX(1.20) scaleY(1.20) ; } } @-ms-keyframes animationTada { 0% { -ms-transform: rotate(0deg) scaleX(1.00) scaleY(1.00) ; } 10% { -ms-transform: rotate(-3deg) scaleX(0.80) scaleY(0.80) ; } 20% { -ms-transform: rotate(-3deg) scaleX(0.80) scaleY(0.80) ; } 30% { -ms-transform: rotate(3deg) scaleX(1.20) scaleY(1.20) ; } 40% { -ms-transform: rotate(-3deg) scaleX(1.20) scaleY(1.20) ; } 50% { -ms-transform: rotate(3deg) scaleX(1.20) scaleY(1.20) ; } 60% { -ms-transform: rotate(-3deg) scaleX(1.20) scaleY(1.20) ; } 70% { -ms-transform: rotate(3deg) scaleX(1.20) scaleY(1.20) ; } 80% { -ms-transform: rotate(-3deg) scaleX(1.20) scaleY(1.20) ; } 90% { -ms-transform: rotate(3deg) scaleX(1.20) scaleY(1.20) ; } 100% { -ms-transform: rotate(0deg) scaleX(1.20) scaleY(1.20) ; } } /* Pulse */ @keyframes pulse { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -o-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); } 50% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 75% { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @-moz-keyframes pulse { 0% { -moz-transform: scale(1); transform: scale(1); } 25% { -moz-transform: scale(0.8); transform: scale(0.8); } 50% { -moz-transform: scale(1); transform: scale(1); } 75% { -moz-transform: scale(1.2); transform: scale(1.2); } 100% { -moz-transform: scale(1); transform: scale(1); } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(0.8); transform: scale(0.8); } 50% { -webkit-transform: scale(1); transform: scale(1); } 75% { -webkit-transform: scale(1.2); transform: scale(1.2); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @-ms-keyframes pulse { 0% { -ms-transform: scale(1); transform: scale(1); } 25% { -ms-transform: scale(0.8); transform: scale(0.8); } 50% { -ms-transform: scale(1); transform: scale(1); } 75% { -ms-transform: scale(1.2); transform: scale(1.2); } 100% { -ms-transform: scale(1); transform: scale(1); } } /* == malihu jquery custom scrollbar plugin == Plugin URI: http://manos.malihu.gr/jquery-custom-content-scroller */ /* CONTENTS: 1. BASIC STYLE - Plugin's basic/essential CSS properties (normally, should not be edited). 2. VERTICAL SCROLLBAR - Positioning and dimensions of vertical scrollbar. 3. HORIZONTAL SCROLLBAR - Positioning and dimensions of horizontal scrollbar. 4. VERTICAL AND HORIZONTAL SCROLLBARS - Positioning and dimensions of 2-axis scrollbars. 5. TRANSITIONS - CSS3 transitions for hover events, auto-expanded and auto-hidden scrollbars. 6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS 6.1 THEMES - Scrollbar colors, opacity, dimensions, backgrounds etc. via ready-to-use themes. */ /* ------------------------------------------------------------------------------------------------------------------------ 1. BASIC STYLE ------------------------------------------------------------------------------------------------------------------------ */ .mCustomScrollbar{ -ms-touch-action: pinch-zoom; touch-action: pinch-zoom; /* direct pointer events to js */ } .mCustomScrollbar.mCS_no_scrollbar, .mCustomScrollbar.mCS_touch_action{ -ms-touch-action: auto; touch-action: auto; } .mCustomScrollBox{ /* contains plugin's markup */ position: relative; overflow: hidden; height: 100%; max-width: 100%; outline: none; direction: ltr; } .mCSB_container{ /* contains the original content */ overflow: hidden; width: auto; height: auto; } /* ------------------------------------------------------------------------------------------------------------------------ 2. VERTICAL SCROLLBAR y-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_inside > .mCSB_container{ margin-right: 30px; } .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-right: 0; } /* non-visible scrollbar */ .mCS-dir-rtl > .mCSB_inside > .mCSB_container{ /* RTL direction/left-side scrollbar */ margin-right: 0; margin-left: 30px; } .mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-left: 0; } /* RTL direction/left-side scrollbar */ .mCSB_scrollTools{ /* contains scrollbar markup (draggable element, dragger rail, buttons etc.) */ position: absolute; width: 16px; height: auto; left: auto; top: 0; right: 0; bottom: 0; } .mCSB_outside + .mCSB_scrollTools{ right: -26px; } /* scrollbar position: outside */ .mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools, .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ /* RTL direction/left-side scrollbar */ right: auto; left: 0; } .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ left: -26px; } /* RTL direction/left-side scrollbar (scrollbar position: outside) */ .mCSB_scrollTools .mCSB_draggerContainer{ /* contains the draggable element and dragger rail markup */ position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: auto; } .mCSB_scrollTools a + .mCSB_draggerContainer{ margin: 20px 0; } .mCSB_scrollTools .mCSB_draggerRail{ width: 2px; height: 100%; margin: 0 auto; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; } .mCSB_scrollTools .mCSB_dragger{ /* the draggable element */ cursor: pointer; width: 100%; height: 30px; /* minimum dragger height */ z-index: 1; } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ /* the dragger element */ position: relative; width: 4px; height: 100%; margin: 0 auto; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; text-align: center; } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ width: 12px; /* auto-expanded scrollbar */ } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 8px; /* auto-expanded scrollbar */ } .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown{ display: block; position: absolute; height: 20px; width: 100%; overflow: hidden; margin: 0 auto; cursor: pointer; } .mCSB_scrollTools .mCSB_buttonDown{ bottom: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 3. HORIZONTAL SCROLLBAR x-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_horizontal.mCSB_inside > .mCSB_container{ margin-right: 0; margin-bottom: 30px; } .mCSB_horizontal.mCSB_outside > .mCSB_container{ min-height: 100%; } .mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden{ margin-bottom: 0; } /* non-visible scrollbar */ .mCSB_scrollTools.mCSB_scrollTools_horizontal{ width: auto; height: 16px; top: auto; right: 0; bottom: 0; left: 0; } .mCustomScrollBox + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{ bottom: -26px; } /* scrollbar position: outside */ .mCSB_scrollTools.mCSB_scrollTools_horizontal a + .mCSB_draggerContainer{ margin: 0 20px; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 2px; margin: 7px 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 30px; /* minimum dragger width */ height: 100%; left: 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 4px; margin: 6px auto; } .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ height: 12px; /* auto-expanded scrollbar */ margin: 2px auto; } .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ height: 8px; /* auto-expanded scrollbar */ margin: 4px 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft, .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{ display: block; position: absolute; width: 20px; height: 100%; overflow: hidden; margin: 0 auto; cursor: pointer; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft{ left: 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{ right: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 4. VERTICAL AND HORIZONTAL SCROLLBARS yx-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_container_wrapper{ position: absolute; height: auto; width: auto; overflow: hidden; top: 0; left: 0; right: 0; bottom: 0; margin-right: 30px; margin-bottom: 30px; } .mCSB_container_wrapper > .mCSB_container{ padding-right: 30px; padding-bottom: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_vertical{ bottom: 20px; } .mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ right: 20px; } /* non-visible horizontal scrollbar */ .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden + .mCSB_scrollTools.mCSB_scrollTools_vertical{ bottom: 0; } /* non-visible vertical scrollbar/RTL direction/left-side scrollbar */ .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ right: 0; } /* RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ left: 20px; } /* non-visible scrollbar/RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal{ left: 0; } .mCS-dir-rtl > .mCSB_inside > .mCSB_container_wrapper{ /* RTL direction/left-side scrollbar */ margin-right: 0; margin-left: 30px; } .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden > .mCSB_container{ padding-right: 0; } .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden > .mCSB_container{ padding-bottom: 0; } .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden{ margin-right: 0; /* non-visible scrollbar */ margin-left: 0; } /* non-visible horizontal scrollbar */ .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden{ margin-bottom: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 5. TRANSITIONS ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_scrollTools, .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight{ -webkit-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; -moz-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; -o-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; transition: opacity .2s ease-in-out, background-color .2s ease-in-out; } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, /* auto-expanded scrollbar */ .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail{ -webkit-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; -moz-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; -o-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; } /* ------------------------------------------------------------------------------------------------------------------------ 6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS ------------------------------------------------------------------------------------------------------------------------ */ /* ---------------------------------------- 6.1 THEMES ---------------------------------------- */ /* default theme ("light") */ .mCSB_scrollTools{ opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 0; filter: "alpha(opacity=0)"; -ms-filter: "alpha(opacity=0)"; } .mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollbar > .mCustomScrollBox ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollBox:hover > .mCSB_scrollTools, .mCustomScrollBox:hover ~ .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=100)"; -ms-filter: "alpha(opacity=100)"; } .mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.4); filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.75); filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); filter: "alpha(opacity=85)"; -ms-filter: "alpha(opacity=85)"; } .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; } .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight{ background-image: url(mCSB_buttons.png); /* css sprites */ background-repeat: no-repeat; opacity: 0.4; filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; } .mCSB_scrollTools .mCSB_buttonUp{ background-position: 0 0; /* sprites locations light: 0 0, -16px 0, -32px 0, -48px 0, 0 -72px, -16px -72px, -32px -72px dark: -80px 0, -96px 0, -112px 0, -128px 0, -80px -72px, -96px -72px, -112px -72px */ } .mCSB_scrollTools .mCSB_buttonDown{ background-position: 0 -20px; /* sprites locations light: 0 -20px, -16px -20px, -32px -20px, -48px -20px, 0 -92px, -16px -92px, -32px -92px dark: -80px -20px, -96px -20px, -112px -20px, -128px -20px, -80px -92px, -96px -92px, -112 -92px */ } .mCSB_scrollTools .mCSB_buttonLeft{ background-position: 0 -40px; /* sprites locations light: 0 -40px, -20px -40px, -40px -40px, -60px -40px, 0 -112px, -20px -112px, -40px -112px dark: -80px -40px, -100px -40px, -120px -40px, -140px -40px, -80px -112px, -100px -112px, -120px -112px */ } .mCSB_scrollTools .mCSB_buttonRight{ background-position: 0 -56px; /* sprites locations light: 0 -56px, -20px -56px, -40px -56px, -60px -56px, 0 -128px, -20px -128px, -40px -128px dark: -80px -56px, -100px -56px, -120px -56px, -140px -56px, -80px -128px, -100px -128px, -120px -128px */ } .mCSB_scrollTools .mCSB_buttonUp:hover, .mCSB_scrollTools .mCSB_buttonDown:hover, .mCSB_scrollTools .mCSB_buttonLeft:hover, .mCSB_scrollTools .mCSB_buttonRight:hover{ opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCSB_scrollTools .mCSB_buttonUp:active, .mCSB_scrollTools .mCSB_buttonDown:active, .mCSB_scrollTools .mCSB_buttonLeft:active, .mCSB_scrollTools .mCSB_buttonRight:active{ opacity: 0.9; filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; } /* theme: "dark" */ .mCS-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); } .mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: rgba(0,0,0,0.85); } .mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: rgba(0,0,0,0.9); } .mCS-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px 0; } .mCS-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -20px; } .mCS-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -40px; } .mCS-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -56px; } /* ---------------------------------------- */ /* theme: "light-2", "dark-2" */ .mCS-light-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{ width: 4px; background-color: #fff; background-color: rgba(255,255,255,0.1); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-light-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 4px; background-color: #fff; background-color: rgba(255,255,255,0.75); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 4px; margin: 6px auto; } .mCS-light-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); } .mCS-light-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-light-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); } .mCS-light-2.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px 0; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -20px; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -40px; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -56px; } /* theme: "dark-2" */ .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px 0; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -20px; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -40px; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -56px; } /* ---------------------------------------- */ /* theme: "light-thick", "dark-thick" */ .mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail{ width: 4px; background-color: #fff; background-color: rgba(255,255,255,0.1); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 6px; background-color: #fff; background-color: rgba(255,255,255,0.75); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 4px; margin: 6px 0; } .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 6px; margin: 5px auto; } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-light-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -16px 0; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -16px -20px; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -20px -40px; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonRight{ background-position: -20px -56px; } /* theme: "dark-thick" */ .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -96px 0; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -96px -20px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -100px -40px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonRight{ background-position: -100px -56px; } /* ---------------------------------------- */ /* theme: "light-thin", "dark-thin" */ .mCS-light-thin.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.1); } .mCS-light-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 2px; } .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; } .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 2px; margin: 7px auto; } /* theme "dark-thin" */ .mCS-dark-thin.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px 0; } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -20px; } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -40px; } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -56px; } /* ---------------------------------------- */ /* theme "rounded", "rounded-dark", "rounded-dots", "rounded-dots-dark" */ .mCS-rounded.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.15); } .mCS-rounded.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger{ height: 14px; } .mCS-rounded.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 14px; margin: 0 1px; } .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 14px; } .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ height: 14px; margin: 1px 0; } .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ width: 16px; /* auto-expanded scrollbar */ height: 16px; margin: -1px 0; } .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 4px; /* auto-expanded scrollbar */ } .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ height: 16px; /* auto-expanded scrollbar */ width: 16px; margin: 0 -1px; } .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ height: 4px; /* auto-expanded scrollbar */ margin: 6px 0; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonUp{ background-position: 0 -72px; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonDown{ background-position: 0 -92px; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonLeft{ background-position: 0 -112px; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonRight{ background-position: 0 -128px; } /* theme "rounded-dark", "rounded-dots-dark" */ .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px -72px; } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -92px; } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -112px; } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -128px; } /* theme "rounded-dots", "rounded-dots-dark" */ .mCS-rounded-dots.mCSB_scrollTools_vertical .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_vertical .mCSB_draggerRail{ width: 4px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ background-color: transparent; background-position: center; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg=="); background-repeat: repeat-y; opacity: 0.3; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ height: 4px; margin: 6px 0; background-repeat: repeat-x; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonUp{ background-position: -16px -72px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonDown{ background-position: -16px -92px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -20px -112px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonRight{ background-position: -20px -128px; } /* theme "rounded-dots-dark" */ .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYV2NkIAAYSVFgDFR8BqrBBEifBbGRTfiPZhpYjiQFBK3A6l6CvgAAE9kGCd1mvgEAAAAASUVORK5CYII="); } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -96px -72px; } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -96px -92px; } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -100px -112px; } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -100px -128px; } /* ---------------------------------------- */ /* theme "3d", "3d-dark", "3d-thick", "3d-thick-dark" */ .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-repeat: repeat-y; background-image: -moz-linear-gradient(left, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%); background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0))); background-image: -webkit-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: -o-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: -ms-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: linear-gradient(to right, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ background-repeat: repeat-x; background-image: -moz-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0))); background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: -o-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: -ms-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); } /* theme "3d", "3d-dark" */ .mCS-3d.mCSB_scrollTools_vertical .mCSB_dragger, .mCS-3d-dark.mCSB_scrollTools_vertical .mCSB_dragger{ height: 70px; } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 70px; } .mCS-3d.mCSB_scrollTools, .mCS-3d-dark.mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-3d.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; } .mCS-3d.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{ width: 8px; background-color: #000; background-color: rgba(0,0,0,0.2); box-shadow: inset 1px 0 1px rgba(0,0,0,0.5), inset -1px 0 1px rgba(255,255,255,0.2); } .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #555; } .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 8px; } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 8px; margin: 4px 0; box-shadow: inset 0 1px 1px rgba(0,0,0,0.5), inset 0 -1px 1px rgba(255,255,255,0.2); } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 8px; margin: 4px auto; } .mCS-3d.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } /* theme "3d-dark" */ .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); box-shadow: inset 1px 0 1px rgba(0,0,0,0.1); } .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ box-shadow: inset 0 1px 1px rgba(0,0,0,0.1); } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } /* ---------------------------------------- */ /* theme: "3d-thick", "3d-thick-dark" */ .mCS-3d-thick.mCSB_scrollTools, .mCS-3d-thick-dark.mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-3d-thick.mCSB_scrollTools, .mCS-3d-thick-dark.mCSB_scrollTools, .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{ -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .mCSB_inside + .mCS-3d-thick.mCSB_scrollTools_vertical, .mCSB_inside + .mCS-3d-thick-dark.mCSB_scrollTools_vertical{ right: 1px; } .mCS-3d-thick.mCSB_scrollTools_vertical, .mCS-3d-thick-dark.mCSB_scrollTools_vertical{ box-shadow: inset 1px 0 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5); } .mCS-3d-thick.mCSB_scrollTools_horizontal, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal{ bottom: 1px; box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5); } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 1px 0 0 rgba(255,255,255,0.4); width: 12px; margin: 2px; position: absolute; height: auto; top: 0; bottom: 0; left: 0; right: 0; } .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #555; } .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ height: 12px; width: auto; } .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer{ background-color: #000; background-color: rgba(0,0,0,0.05); box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1); } .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } /* theme: "3d-thick-dark" */ .mCS-3d-thick-dark.mCSB_scrollTools{ box-shadow: inset 0 0 14px rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools_horizontal{ box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 1px 0 0 rgba(255,255,255,0.4), inset -1px 0 0 rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #777; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{ background-color: #fff; background-color: rgba(0,0,0,0.05); box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } /* ---------------------------------------- */ /* theme: "minimal", "minimal-dark" */ .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{ right: 0; margin: 12px 0; } .mCustomScrollBox.mCS-minimal + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{ bottom: 0; margin: 0 12px; } /* RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, .mCS-dir-rtl > .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{ left: 0; right: auto; } .mCS-minimal.mCSB_scrollTools .mCSB_draggerRail, .mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; } .mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger, .mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger{ height: 50px; } .mCS-minimal.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-minimal-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 50px; } .mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.2); filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; } .mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.5); filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; } /* theme: "minimal-dark" */ .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.2); filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; } .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.5); filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; } /* ---------------------------------------- */ /* theme "light-3", "dark-3" */ .mCS-light-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{ width: 6px; background-color: #000; background-color: rgba(0,0,0,0.2); } .mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 6px; } .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 6px; margin: 5px 0; } .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 12px; } .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ height: 12px; margin: 2px 0; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } /* theme "dark-3" */ .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-dark-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-dark-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } /* ---------------------------------------- */ /* theme "inset", "inset-dark", "inset-2", "inset-2-dark", "inset-3", "inset-3-dark" */ .mCS-inset.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ width: 12px; background-color: #000; background-color: rgba(0,0,0,0.2); } .mCS-inset.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 6px; margin: 3px 5px; position: absolute; height: auto; top: 0; bottom: 0; left: 0; right: 0; } .mCS-inset.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ height: 6px; margin: 5px 3px; position: absolute; width: auto; top: 0; bottom: 0; left: 0; right: 0; } .mCS-inset.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 12px; margin: 2px 0; } .mCS-inset.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } /* theme "inset-dark", "inset-2-dark", "inset-3-dark" */ .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } /* theme "inset-2", "inset-2-dark" */ .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; border-width: 1px; border-style: solid; border-color: #fff; border-color: rgba(255,255,255,0.2); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{ border-color: #000; border-color: rgba(0,0,0,0.2); } /* theme "inset-3", "inset-3-dark" */ .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.6); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.6); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.75); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); } /* ---------------------------------------- */ .ath-viewport * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .ath-viewport { position: relative; z-index: 2147483641; pointer-events: none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; -o-text-size-adjust: none; text-size-adjust: none; } .ath-modal { pointer-events: auto !important; background: rgba(0,0,0,0.6); } .ath-mandatory { background: #000; } .ath-container { pointer-events: auto !important; position: absolute; z-index: 2147483641; padding: 0.7em 0.6em; width: 18em; background: #eee; background-size: 100% auto; box-shadow: 0 0.2em 0 #d1d1d1; font-family: sans-serif; font-size: 15px; line-height: 1.5em; text-align: center; } .ath-container small { font-size: 0.8em; line-height: 1.3em; display: block; margin-top: 0.5em; } .ath-ios.ath-phone { bottom: 1.8em; left: 50%; margin-left: -9em; } .ath-ios6.ath-tablet { left: 5em; top: 1.8em; } .ath-ios7.ath-tablet { left: 0.7em; top: 1.8em; } .ath-ios8.ath-tablet, .ath-ios9.ath-tablet, .ath-ios10.ath-tablet{ right: 0.4em; top: 1.8em; } .ath-android { bottom: 1.8em; left: 50%; margin-left: -9em; } /* close icon */ .ath-container:before { content: ''; position: relative; display: block; float: right; margin: -0.7em -0.6em 0 0.5em; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIQAAACECAMAAABmmnOVAAAAdVBMVEUAAAA5OTkzMzM7Ozs3NzdBQUFAQEA/Pz8+Pj5BQUFAQEA/Pz8+Pj5BQUFAQEA/Pz9BQUE+Pj4/Pz8/Pz8+Pj4/Pz8/Pz8/Pz8+Pj4/Pz8+Pj4/Pz8/Pz8/Pz8/Pz8/Pz8+Pj4/Pz8/Pz8/Pz8/Pz9AQEA/Pz+fdCaPAAAAJnRSTlMACQoNDjM4OTo7PEFCQ0RFS6ytsbS1tru8vcTFxu7x8vX19vf4+C5yomAAAAJESURBVHgBvdzLTsJAGEfxr4C2KBcVkQsIDsK8/yPaqIsPzVlyzrKrX/5p0kkXEz81L23otc9NpIbbWia2YVLqdnhlqFlhGWpSDHe1aopsSIpRb8gK0dC3G30b9rVmhWZIimTICsvQtx/FsuYOrWHoDjX3Gu31gzJxdki934WrAIOsAIOsAIOiAMPhPsJTgKGN0BVsYIVsYIVpYIVpYIVpYIVpYIVpYIVpYIVpYIVlAIVgEBRs8BRs8BRs8BRs8BRs8BRs8BRs8BRTNmgKNngKNngKNngKNngKNhiKGxgiOlZoBlaYBlaYBlaYBlaYBlaYBlaYBlaYBlZIBlBMfQMrVAMr2KAqBENSHFHhGEABhi5CV6gGUKgGUKgGUKgGUFwuqgEUvoEVsoEVpoEUpgEUggF+gKTKY+h1fxSlC7/Z+RrxOQ3fcEoAPPHZBlaYBlaYBlaYBlZYBlYIhvLBCstw7PgM7hkiWOEZWGEaWGEaWGEaIsakEAysmHkGVpxmvoEVqoEVpoEVpoEVpoEVpoEVpoEVkoEVgkFQsEFSsEFQsGEcoSvY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnmbNAUT2c2WAo2eAo2eAo2eAo2eAo2eArNEPFACjZ4CjZ4CjZ4CjaIird/rBvFH6llNCvewdli1URWCIakSIZesUaDoFg36dKFWk9zCZDei3TtwmCj7pC22AwikiIZPEU29IpFNliKxa/hC9DFITjQPYhcAAAAAElFTkSuQmCC); background-color: rgba(255,255,255,0.8); background-size: 50%; background-repeat: no-repeat; background-position: 50%; width: 2.7em; height: 2.7em; text-align: center; overflow: hidden; color: #a33; z-index: 2147483642; } .ath-container.ath-icon:before { position: absolute; top: 0; right: 0; margin: 0; float: none; } .ath-mandatory .ath-container:before { display: none; } .ath-container.ath-android:before { float: left; margin: -0.7em 0.5em 0 -0.6em; } .ath-container.ath-android.ath-icon:before { position: absolute; right: auto; left: 0; margin: 0; float: none; } /* applied only if the application icon is shown */ .ath-container.ath-icon { } .ath-action-icon { display: inline-block; vertical-align: middle; background-position: 50%; background-repeat: no-repeat; text-indent: -9999em; overflow: hidden; } .ath-ios7 .ath-action-icon, .ath-ios8 .ath-action-icon, .ath-ios9 .ath-action-icon, .ath-ios10 .ath-action-icon{ width: 1.6em; height: 1.6em; background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAACtCAYAAAB7l7tOAAAF6UlEQVR4AezZWWxUZRiH8VcQEdxZEFFiUZBFUCIa1ABBDARDcCciYGKMqTEGww3SOcNSAwQTjOBiiIpEhRjAhRgXRC8MFxojEhAFZUGttVhaoSxlaW3n8W3yXZxm6vTrOMM5Q98n+V9MMu1pvl++uZhKuypghu49KaaTWGdZSYoVN6VD95nMpLNYZ9XNbdQR2od2k88O3Gm6Bh0t7H0p5Vwp2Ax3ajpu2tYbciFWwkTFO63DY6+JcI4USFaSyYpWp8N7SVZJKR3EinkBk9JxvZFXxhnZSjBaoWp1ZL0ES8WKYXMZp0AndORgy8WKFe5Yf1zvvSBWDEpys2LU6MjD5kmEWQlGKsJRHXlcqUSQVcItEnDEA6gAb7LhjvD9WO6yIEfICQI5A1nzGCYB1T4og5bBiFcyv2f6ujYhl4iVxwKG6qp8MK55HsqPwK0rMr9v/yEo3uCPrJstVh5KMER30Aeh31Ioq0FrHfjXw9CYghnrvYFTuqfEymFzGSwBlT4ARYr7u+K6GLmCVGvAGg2NMG0d/sgJnpScZLjXSkC5z8H3eQ72/k24Q8NfzvwFyK4qtuJSZKaubRPyE/K/Mtx+EvCHL+7uasId1t10w0scz/RzSzYzAfgKV30D3LPaG7lRkR8RK4tKKJKAMp+D7r0EfmmOe0x3m2itAc/ZxBjgAt1mXHWKPPkdb+QGSTJdrDaU5EoJ2OtzwD0WwY7KNNzbRfMFFg24WPdtGHnS221Cflgsj56hjwTs8TnY7oq7/QDhjutGicsb2AVcovsO18l6uPPNNiE/JFaGAq7Q7fY50G4LYVtz3FrdaNGyBXbIl+q24DqhyHes9EaulwR3SwtZs+ktAT/7HORliru1gnCndONFyx44Dfn7MPLYN7yR6yTJZAllJeguAT/4HOBFz8I3ZWm4E0TLFbBD7qn7EVdtHYx53R9ZN0ksrZRuErDN5+AuLIWvm+Oe1k0ULdfADrmX7idcR0/DyBXeyCdlLuMMOGCBz4F1ng+f7yFcve5e0fIFHELeiav6BAx70Rt5p0yhY3u/wR0kyarW/uX35b403PtFyzewQ75ctwtXzSkY8WqruHslSV8RscrL6TJ1bcvfWJ0/HzbtIdw/ugdFyzdwOOAq3T6fmzxwGQ3vbmO8iFioIWqYSsHMj9M/ljfuTsOdItoZBXYBfXX7cVXVwvXLm/8+fU3lcdCqdEMNGBbgUmRmfQISQKd5sGEn4VK6YtEiAXYBA3QVuA4q8hCHrDcafR1ul65jewfuovsCl7vJrNlOuEbdo6JFCuwCrtb9hqusBu56Cw4cI1y1briIWEBn3Ue0XKPuMdGiBg4H9NdV0HJ/6QZLOEPmPN0GmpfSPS5arIBdwHUtIFfoBsl/ZsgfhHCfFi2WwC5goO4AmvanbqBkzJA76tboZokWa2AXMEi3RTdAvDLkDqJFAhzB32xFD2wZsGXA0WfAlgFbBmwZsGXAlgFbBpzk04JaKb0iA9ZnF9x5SQAFtRKKIgPWZxfaeRmwAZ/BGbAB37eaG6MCbnq2Aed5czYyKirgpmcbsAHHZAZswN0Wwo7KeG1fFf2jAm56dtzOQ42yB+65mDhWFBUwUETMUiMDNmADbp/APRaTAh6I2bpGCNw1bufRZJQ1cPdF/NueHZsgDEBBGLbMGoIu4AZu5gLOZeEaYmEXeznF3jRPyEv4frgJvvJe3qTefY0AAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwb8rwADBgwYMGDAgAEDBgwYMGDAgAEDBgwYMGDAgAEDBgz4/sz1Nia/9hizA7zgklwy3RYwYMBzBRjw4bPjxAbAAizAAtwgwAIswAIswAIMGDBgARZgARZgAS4FWIAFWIAFWIABAwYswAIswAIswIUAC7AAC7AACzBgwIAFWIAFWIAFuBBgARZgARZgAQYMGPApQ99ZCdgWtzqwATbABtgAG2DbnxNb7zbRimsMLMACrDf2wMWI/WasfQAAAABJRU5ErkJggg==); margin-top: -0.3em; background-size: auto 100%; } .ath-ios6 .ath-action-icon { width: 1.8em; height: 1.8em; background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAAB0CAQAAADAmnOnAAAAAnNCSVQICFXsRgQAAAAJcEhZcwAAWwEAAFsBAXkZiFwAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAF4klEQVR4Ae3a/a+XdR3H8ec5HM45HDmKICoVohkZsxESRRCzcZM/2JKkdGR5MrSkleA0Pd00O4u5IVuNM2yYc6XSzCExU4oUNRPCJFdMUAhsYZpUGhscOHA4N8/WZzsL6HBxvofvdV3fa3yer//gsV3vH659KHzncBsJxUYhDzOEhCKQbORs+ip2wzgM+wvj+P9i35qAGLaHGcQSgKSTrxBLABJppZpYApCspoFYApBsZjSxBCD5OxOJJQBJG1cQSwCSLpqJJQCJ3MvgCGTinuSMCJS8LZwfgZL3FtMiUPIOcU0ESl4PLRHoRPsJtREoeRsYGYGS9yrvo6RmpbLaigWSfzOdErLs6+bLUMFA0sF1+QF1cz1UNlBYK9V5AHXyWSgEkKyiIWOgGh829Ki1lLcaxjCVK7mJRSxjBY+zgRf/u9pXcMB7jhEZAg32EUP3O6hMKOP5Iq2sZQeHMZXt5KKMgOpcY+iHVnFyjeQKlrCBdsxge5ieAVC9vzLUelI8H+A7bKIHM10H81IGGuKvDf1ggDxVTKOV1zG3/Yia1ICG+ltD32MgNTKfP2HuW0VDKkCNrjfUTOm9i6XswwrZJkaVHeh0f2fodkrtfO6jAytqrzG+rEDDfVG1x1sprZEs5RBW4PZxeT+Bbrf5hPu9arfzKaU6WjiAFbseWvoF1GW/6vYGSmkyW7Dit4xB5QHq9Br6Xx2t9GAhtp6zkoHsfNp1J9wX6H+jeR4LtJc4LxGopZZyNpN/YcG2mw9nBTSPLizgOmjKAujGgvJID3ekD7QYi7nGzkvmQtpA38Vi7iJf0TedlC7QTVjMfcY2QyvSBPpUMW/PIBfbo9pls1XpAX2EdizeznStob3OJpQO0DB2YfE21q2GtnghpAm0Gou3T9tm6BGHQppA12HRVt17eboNlydNoLHsx2JtmL801OYcQmkC/QKLtQt9ydBW3wNpA30ci7Ur3WdolUMhbaBqNhf/8qQJ9Hkszs5wjaH9XkUobaAqtmFRdoGbDb3sWMgG6DIs5852knO82RaXer+P+qyb3eWeo7ZNBrRZvm1otY2QFdBjeHIb6hTne49Put12+9ObMoDdYmfy5UkF6AK6cCCr9aM2u9IddptcOYCG+FNDB5xLKCugO7G01TndFp/xgAntdYvrfdwVLnORt3q9Vx25F27DUjbGPxr6qxMgW6Cd2N+d6wLXedA+6nKbK73Lr/pJxzusvE/wZrvX0FOOgGyBxmF/dprXutYOj6nNdS6xyYnWp/dGcaGdhr5vDWQN9E1MXrUzfcA2j2qPj/l1J1uT9iPOeh8w1O7nCGUN9HzyGZ7ndo9qp0ucanU2r1xH+wdDu5wIeQDVVx0+/kd1i697RNv8thdn+Qz4Uv9p6DeOhHyApmBfq3OBu+3Nfd7nVELZAX3Nw4ZarYG8gG7GY1dlk6/Zm3/2Rk8jlB1QvT82dNAmQjkBVf8Mj957fdrefM7ZVhPKEuidvmDob06CXIGGbsX/bZDf8KAhfdbJhLIGmuZuQ084HHIGatiLvRvrRkP6qldbBXkAzbfD0N0OhryBGqrEMOd50FC7d1hPKGugBh8ydMh5hPIGGouI1d5lj6F1vptQ9kDvcKOhN5wMlQH0QcRGnzC03yZCeQDN9G1D6xwBFQI07FI8x02GdjgB8gJqttPQcmuhYoAumzvG7YZWejrkA1TrPYYO+SVCFQO0aM4bqj0uJJQH0LluSP7PkyeQU9QOmyAvoBm+Zegpz4LKA/qYB/wE5AXUe3m81zqoRKAPOYWcuvP9dxvqcD6h7IAKkaNU3eUlHLcI9EzS5YlAi62h/zUy89QCqqKUmvgHywsJlEHnsQYxAvXVIJo5gIhnPhiBju1iNmLvLn85Ah1ZPYs5jBGo72awEzEC9dVwHqQHI9DxWoAYgSLQQKteGIESu/qhCJTYtT+PQBEoAkWgCBSBkotAEehUWwSKQBEoAkWg/BeBIlAEikARKAJFoFmealu4gVLy1Gt5dkARKAL9BzujPSurTmu/AAAAAElFTkSuQmCC); margin-bottom: 0.4em; background-size: 100% auto; } .ath-android .ath-action-icon { width: 1.4em; height: 1.5em; background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAANlBMVEVmZmb///9mZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZW6fJrAAAAEXRSTlMAAAYHG21ub8fLz9DR8/T4+RrZ9owAAAB3SURBVHja7dNLDoAgDATQWv4gKve/rEajJOJiWLgg6WzpSyB0aHqHiNj6nL1lovb4C+hYzkSNAT7mryQFAVOeGAj4CjwEtgrWXpD/uZKtwEJApXt+Vn0flzRhgNiFZQkOXY0aADQZCOCPlsZJ46Rx0jhp3IiN2wGDHhxtldrlwQAAAABJRU5ErkJggg==); background-size: 100% auto; } .ath-container p { margin: 0; padding: 0; position: relative; z-index: 2147483642; text-shadow: 0 0.1em 0 #fff; font-size: 1.1em; } .ath-ios.ath-phone:after { content: ''; background: #eee; position: absolute; width: 2em; height: 2em; bottom: -0.9em; left: 50%; margin-left: -1em; -webkit-transform: scaleX(0.9) rotate(45deg); transform: scaleX(0.9) rotate(45deg); box-shadow: 0.2em 0.2em 0 #d1d1d1; } .ath-ios.ath-tablet:after { content: ''; background: #eee; position: absolute; width: 2em; height: 2em; top: -0.9em; left: 50%; margin-left: -1em; -webkit-transform: scaleX(0.9) rotate(45deg); transform: scaleX(0.9) rotate(45deg); z-index: 2147483641; } .ath-application-icon { position: relative; padding: 0; border: 0; margin: 0 auto 0.2em auto; height: 6em; width: 6em; z-index: 2147483642; } .ath-container.ath-ios .ath-application-icon { border-radius: 1em; box-shadow: 0 0.2em 0.4em rgba(0,0,0,0.3), inset 0 0.07em 0 rgba(255,255,255,0.5); margin: 0 auto 0.4em auto; } @media only screen and (orientation: landscape) { .ath-container.ath-phone { width: 24em; } .ath-android.ath-phone { margin-left: -12em; } .ath-ios.ath-phone { margin-left: -12em; } .ath-ios6:after { left: 39%; } .ath-ios8.ath-phone { left: auto; bottom: auto; right: 0.4em; top: 1.8em; } .ath-ios8.ath-phone:after { bottom: auto; top: -0.9em; left: 68%; z-index: 2147483641; box-shadow: none; } }