/* $white: #ffffff; $black: #000000; $red: #c31345; $orange: #ed8b00; $gray-dark: #414141; $gray: #a7a9ac; $gray-light: #efefef; $helvetica: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; $verdana: Verdana, Tahoma, Arial, Helvetica, sans-serif; $trebuchet: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif; $arial: Arial, Helvetica, sans-serif; $times: "Times New Roman", Georgia, Times, serif; $georgia: Georgia, "Times New Roman", Times, serif; $courier: "Courier New", Courier, monospace; $gotham: "Gotham SSm A", "Gotham SSm B", $helvetica;//300,400,500,700,800 - - - - CSS SITEMAP - - - - i01 - Common Elements i02 - Forms i03 - Filters i04 - Header i05 - Nav i06 - Campuses i07 - Billboard i08 - Sections i09 - Widgets i10 - Footer i11 - Additional Plugins */ * { -webkit-overflow-scrolling: touch; } body { overflow-y: scroll; -webkit-overflow-scrolling: touch; } /*script to add loaded class in addons.php*/ #wrap { width: 100%; position: relative; overflow: hidden; } #wrap .sticky-wrapper.is-header { width: 100%; position: absolute; } #wrap.no-billboard .sticky-wrapper.is-header { position: relative; } #wrap:before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000; background-image: url(/_assets/img/loaders/preloader-white.svg); background-size: 100px 100px; background-position: center center; background-repeat: no-repeat; opacity: 1; visibility: visible; z-index: 1799; /*below header*/ transition: all 0.3s ease .4s; } html.loaded #wrap:before { opacity: 0; z-index: -1; visibility: hidden; } /*================================================= i01 - Common Elements & Overrides =================================================*/ /*main typography*/ img { max-width: 100%; border-radius:5px;} img.responsive-image { display: block; width: 100%; height: auto; } body, h1, h2, h3, h4, h5, h6, blockquote, .monkForm, .monkForm legend, .monkForm label, .monkForm input, .monkForm textarea, .monkForm select, .monkForm input[type=submit], table, table caption, table th, table tr, table td, #module-search-term, #zip-search-term, .ui-selectmenu-button, .ui-selectmenu-menu .ui-menu li, #groups-filter .childcare, #groups-filter .online { font-family: "Gotham SSm A", "Gotham SSm B", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; } body { font-weight: 400; font-size: 1rem; line-height: 1.7; color: #000000; background-color: #ffffff; } a:not([class*="button-"]) { display: inline-block; position: relative; color: #ed8b00; text-decoration: none; transition: all 0.3s ease; z-index: 2; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; font-smoothing: antialiased !important; } a:not([class*="button-"]):after { content: ""; position: absolute; left: -2px; right: -2px; bottom: -4px; top: 10px; background-color: #ed8b00; transition: all 0.3s ease-in-out; z-index: -1; padding: 0; margin: 0; visibility: hidden; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; } a.link-white { display: inline; color: #ffffff !important; text-decoration: none; transition: all 0.3s ease; } a.link-white:after { display: none !important; } html.use-hover a.link-white:hover { color: #ffffff !important; opacity: .6; } .return-link span { color: #000000; font-weight: 700; text-transform: uppercase; vertical-align: middle; display: inline-block; } .return-link i { vertical-align: middle; display: inline-block; } .dark .return-link span { color: #ffffff; } a:not([href]) { text-decoration: none !important; cursor: default; } a:not([href]):after { display: none; } html.use-hover a:not([class*="button-"]) { outline: none; box-shadow: none; } html.use-hover a:not([class*="button-"]):after { visibility: hidden; -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-transform: scaleY(0); transform: scaleY(0); } html.use-hover a:not([class*="button-"]):hover { color: #000000; } html.use-hover a:not([class*="button-"]):hover:after { visibility: visible; -webkit-transform: scaleY(1); transform: scaleY(1); } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: #000000; line-height: 1.2; font-weight: 700; } h1, .h1 { font-size: 2rem; line-height: 1.05; text-transform: uppercase; font-weight: 800; } @media (min-width: 768px) { h1, .h1 { font-size: 4rem; } } h2, .h2 { font-size: 1.75rem; } @media (min-width: 768px) { h2, .h2 { font-size: 3.375rem; } } h3, .h3 { font-size: 1.5rem; font-weight: 800; } @media (min-width: 768px) { h3, .h3 { font-size: 2.875rem; } } h4, .h4 { font-size: 1.25rem; text-transform: uppercase; font-weight: 800; } @media (min-width: 768px) { h4, .h4 { font-size: 1.875rem; } } h5, .h5 { font-size: 1.25rem; text-transform: uppercase; letter-spacing: 3px; } @media (min-width: 768px) { h5, .h5 { font-size: 1.375rem; } } h6, .h6 { font-size: 1.125rem; } @media (min-width: 768px) { h6, .h6 { font-size: 1.25rem; } } ul ul { list-style-type: circle; } ol ol { list-style-type: lower-alpha; } ol ol ol { list-style-type: decimal; } ul.media-icons { list-style: none; margin: 0; padding: 0; display: -webkit-box; display: flex; flex-wrap: wrap; } ul.media-icons li { list-style: none; margin: 0 1.5rem 0 0; padding: 0; } ul.media-icons li a { display: block; font-size: 1.5rem; } ul.media-icons li a:after { display: none; } hr { margin-top: 1rem; margin-bottom: 1rem; border: 0; border-top: 1px solid #a7a9ac; } hr.hr-gradient { margin-top: 2rem; margin-bottom: 2rem; border: 0; height: 3px; color: transparent; background: linear-gradient(90deg, #efefef, #a7a9ac); } blockquote { display: block; position: relative; margin: 2rem 0; padding: 2rem 0; line-height: 1.2; font-size: 1.75rem; font-weight: 800; font-style: normal; text-align: center; color: #000000; quotes: none; border: 0; } @media (min-width: 768px) { blockquote { font-size: 2.875rem; } } blockquote:before { content: ""; position: absolute; left: 50%; top: 0; width: 200px; height: 2px; margin-left: -100px; background-color: #ed8b00; } blockquote:after { content: ""; position: absolute; left: 50%; bottom: 0; width: 200px; height: 2px; margin-left: -100px; background-color: #ed8b00; } blockquote p { display: inline; padding: 0; margin: 0; line-height: inherit; font-size: inherit; font-family: inherit; } .text-white { color: #ffffff !important; } .text-black { color: #000000 !important; } .text-orange { color: #ed8b00 !important; } .button-default, .button-orange, .button-outline, .button-outline-white, .rsvp a, .monkForm input[type=submit] { position: relative; display: inline-block; line-height: 1.2; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin: 0 .5rem .5rem 0; font-size: 1rem; text-transform: uppercase; font-weight: 700; border-radius: 0; transition: all 0.3s ease; text-decoration: none !important; outline: none; box-shadow: none; font-smoothing: antialiased !important; } [class*="button-"]:last-child { margin-right: 0; } [class*="button-"].disabled, [class*="button-"]:disabled { cursor: not-allowed; opacity: .65; } [class*="button-"].disabled { pointer-events: none; } .rsvp a, .button-default, .button-orange { color: #000000; padding-left: 0; padding-right: 30px; padding-top: .25rem; padding-bottom: .25rem; outline: none; } .rsvp a:after, .button-default:after, .button-orange:after { content: ""; display: inline-block; position: absolute; right: 0; top: 10px; height: 10px; width: 10px; border-bottom-style: solid; border-bottom-width: 2px; border-right-style: solid; border-right-width: 2px; -webkit-transform: rotate(315deg); transform: rotate(315deg); border-color: #ed8b00; outline: none; } .rsvp a:before, .button-default:before, .button-orange:before { content: ""; position: absolute; right: 0; top: 14px; width: 16px; height: 2px; -webkit-transform-origin: bottom; transform-origin: bottom; background-color: #ed8b00; outline: none; } .button-orange { color: #ed8b00; } .button-orange:after { border-color: #000000; } .button-orange:before { background-color: #000000; } .button-default.active { color: #ed8b00; } .button-orange.active { color: #000000; } html.use-hover .rsvp a, html.use-hover .button-default, html.use-hover .button-orange { transition: all 0.3s ease; margin-right: 40px; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; } html.use-hover .rsvp a:after, html.use-hover .button-default:after, html.use-hover .button-orange:after { border-bottom-width: 0; height: 0; width: 0; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; } html.use-hover .rsvp a:before, html.use-hover .button-default:before, html.use-hover .button-orange:before { margin-top: -2px; margin-right: 10px; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); transition: all 0.3s ease; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; } html.use-hover .rsvp a:hover, html.use-hover .button-default:hover, html.use-hover .button-orange:hover { color: #ed8b00; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } html.use-hover .rsvp a:hover:after, html.use-hover .button-default:hover:after, html.use-hover .button-orange:hover:after { border-bottom-width: 2px; height: 10px; width: 10px; transition: all 0.3s ease 0.1s; } html.use-hover .rsvp a:hover:before, html.use-hover .button-default:hover:before, html.use-hover .button-orange:hover:before { margin: 0; -webkit-transform: rotate(0); transform: rotate(0); } .button-outline, .monkForm input[type=submit] { color: #000000; border: 2px solid #ed8b00; padding: .85rem 1.125rem; box-sizing: border-box; } @media (min-width: 768px) { .button-outline, .monkForm input[type=submit] { padding: 1rem 1.75rem; } } html.use-hover .button-outline, html.use-hover .monkForm input[type=submit] { transition: all 0.3s ease; overflow: hidden; z-index: 2; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } html.use-hover .button-outline:before, html.use-hover .monkForm input[type=submit]:before { content: ""; position: absolute; z-index: -1; top: 0; left: -100%; width: 100%; height: 100%; background: #ed8b00; transition: all 0.3s ease-in-out; box-sizing: border-box; border: 0; /*issues with safari causing text jump on hover so switch to pos approach*/ } html.use-hover .button-outline:hover, html.use-hover .monkForm input[type=submit]:hover { color: #ffffff; } html.use-hover .button-outline:hover:before, html.use-hover .monkForm input[type=submit]:hover:before { visibility: visible; left: 0; } .button-outline.active { color: #ffffff !important; } .button-outline.active:before { background: #ed8b00 !important; visibility: visible !important; left: 0 !important; } .button-outline-white { color: #ffffff; border: 2px solid #ffffff; padding: .85rem 1.125rem; box-sizing: border-box; } @media (min-width: 768px) { .button-outline-white { padding: 1rem 1.75rem; } } html.use-hover .button-outline-white { transition: all 0.3s ease; overflow: hidden; z-index: 2; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } html.use-hover .button-outline-white:before { content: ""; position: absolute; z-index: -1; top: 0; left: -100%; width: 100%; height: 100%; background: #ffffff; transition: all 0.3s ease-in-out; box-sizing: border-box; border: 0; /*issues with safari causing text jump on hover so switch to pos approach*/ } html.use-hover .button-outline-white:hover { color: #ed8b00; } html.use-hover .button-outline-white:hover:before { visibility: visible; left: 0; } .button-outline-white.active { color: #ed8b00 !important; } .button-outline-white.active:before { background: #ffffff !important; visibility: visible !important; left: 0 !important; } .button-block { display: block; width: 100%; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } .button-block + .button-block { margin-top: 0.5rem; } .button-default.button-block, .button-orange.button-block, .button-outline.button-block { white-space: nowrap; text-overflow: ellipsis; padding-left: 5% !important; padding-right: 5% !important; width: 90% !important; } .dark, .dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6, .dark blockquote, div.div-callout, div.div-callout h1, div.div-callout h2, div.div-callout h3, div.div-callout h4, div.div-callout h5, div.div-callout h6, div.div-callout blockquote { color: #ffffff; } html.use-hover .dark a:not([class*="button-"]):hover, html.use-hover div.div-callout a:not([class*="button-"]):hover { color: #ffffff; } .dark .button-default, div.div-callout .button-default { color: #ffffff; } .dark .button-orange, div.div-callout .button-orange { color: #ed8b00; } .dark .button-orange:after, div.div-callout .button-orange:after { border-color: #ed8b00; } .dark .button-orange:before, div.div-callout .button-orange:before { background-color: #ed8b00; } .dark .rsvp a, .dark .button-outline, div.div-callout .rsvp a, div.div-callout .button-outline { color: #ffffff; } .loading { position: relative; min-height: 16rem; } .loading:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.9); background-image: url(/_assets/img/loaders/preloader.svg); background-repeat: no-repeat !important; background-position: center center; background-size: 64px 64px; } .loading.dark:after { background-color: rgba(0, 0, 0, 0.9); background-image: url(/_assets/img/loaders/preloader-white.svg); } .loading.transparent:after { background-color: transparent; } #pagination, .pagination { clear: both; text-align: center; padding: 0; line-height: 1; margin: 2em 0; } #pagination a, .pagination a { display: inline-block; margin: 0 .25rem; line-height: 1.3; padding: .25rem .35rem; } #pagination a:after, .pagination a:after { display: none; } #pagination #current, #pagination .current, .pagination #current, .pagination .current { color: #ffffff; background-color: #ed8b00; text-decoration: none !important; } #pagination #off, .pagination #off { cursor: default; color: #a7a9ac; opacity: .2; text-decoration: none !important; } table { margin: 0 0 40px 0; border-collapse: separate; width: 99%; } table caption { font-weight: 700; font-size: 1.5em; padding: .85em; text-align: left; background: none; } table th { font-weight: 400; font-size: 1.25em; padding: 1em; text-transform: uppercase; } table td { padding: 1em; line-height: 1.125em; background-color: transparent; } table td p { font-size: inherit; margin: 0; } @media (min-width: 992px) { table.responsive { margin-bottom: 0; } .pinned { position: absolute; left: 0; top: 0; background: #fff; width: 35%; overflow: hidden; overflow-x: scroll; border-right: 1px solid #999999; border-left: 1px solid #999999; } .pinned table { margin: 0; border-right: none; border-left: none; width: 100%; } .pinned table caption { text-indent: -9999px; } .pinned table th, .pinned table td { white-space: nowrap; } .pinned td:last-child { border-bottom: 0; } .scrollable table { margin: 0; } div.table-wrapper { position: relative; margin-bottom: 20px; overflow: hidden; } div.table-wrapper div.scrollable { margin-left: 35%; } div.table-wrapper div.scrollable { overflow: scroll; overflow-y: hidden; } table.responsive td, table.responsive th { position: relative; white-space: nowrap; overflow: hidden; } table.responsive th:first-child, table.responsive td:first-child, table.responsive td:first-child, table.responsive.pinned td { display: none; } } div.div-callout { position: relative; padding: 2rem 0; z-index: 1; } @media (min-width: 768px) { div.div-callout { padding-right: 30%; } } div.div-callout:before { content: ""; position: absolute; top: 0; left: -100%; right: -100%; height: 100%; background-color: #000000; z-index: -1; } @media (min-width: 768px) { div.div-callout:before { left: -300%; right: 0; -webkit-clip-path: polygon(0 0, 100% 0%, 90% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0%, 90% 100%, 0% 100%); } } div.div-callout p:last-of-type { margin: 0; } html.loaded div.div-callout.wowit { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility: hidden; } html.loaded div.div-callout.animate { visibility: visible; -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; -webkit-animation-delay: .2s; animation-delay: .2s; } .sticky-wrapper.is-share { position: absolute; width: 100%; } @media (min-width: 1200px) { .sticky-wrapper.is-share { position: absolute; } } #site-share { position: relative; padding-top: 2rem; z-index: 999; } @media (min-width: 1200px) { #site-share { padding: 0; } } #site-share.dark { background-color: #000000; } #site-share .container { position: relative; } .share { position: relative; transition: all 0.3s ease; top: auto; z-index: 999; } @media (min-width: 1200px) { .share { position: absolute; top: 0; margin-left: -60px; z-index: 100; margin-top: 5.5rem; } } @media (min-width: 1200px) { .share.right { margin-left: 1070px; } } @media (min-width: 1200px) { .share.is-sticky { position: fixed; top: 80px; } } .share a { display: inline-block; width: 32px; height: 32px; line-height: 32px; overflow: hidden; background-color: #ed8b00; color: #ffffff; border-radius: 50%; margin-right: .5rem; } @media (min-width: 1200px) { .share a { display: block; margin: 0 0 1rem 0; } } .share a:after { display: none; } .share a span { display: block; width: 100%; position: absolute; font-size: 1.125rem; line-height: 32px; text-align: center; } html.use-hover .share a:hover { background-color: #000000; color: #ffffff; } .div-embed { position: relative; width: 100%; padding-bottom: 56.25%; padding-top: 0; height: 0; overflow: hidden; background-repeat: no-repeat; background-position: center center; background-size: cover; } .div-embed img { display: block; width: 100%; height: auto; } .div-embed iframe, .div-embed object, .div-embed embed, .div-embed video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0 !important; } .div-embed video { background-position: center center; background-size: cover; -o-object-fit: cover; object-fit: cover; } .fluid-width-video-wrapper iframe { border: 0; margin: 0; padding: 0; } ::-webkit-input-placeholder { opacity: 1 !important; } :-moz-placeholder { opacity: 1 !important; } ::-moz-placeholder { opacity: 1 !important; } :-ms-input-placeholder { opacity: 1 !important; } input:focus::-webkit-input-placeholder { color: transparent !important; } input:focus:-moz-placeholder { color: transparent !important; } input:focus::-moz-placeholder { color: transparent !important; } input:focus:-ms-input-placeholder { color: transparent !important; } .notransition { transition: none !important; } /*================================================= i02 - Forms =================================================*/ .monkForm { margin: 2em auto; color: #000000; border: 0; } .monkForm p { margin: 0; } .monkForm p.error { font-size: .875rem; color: #ed8b00; } .monkForm fieldset > legend { display: block; position: relative; width: 100%; padding: 0 0 1rem 0; margin-bottom: .25rem; font-size: 1.25rem; text-transform: uppercase; font-weight: 800; } @media (min-width: 768px) { .monkForm fieldset > legend { font-size: 1.875rem; } } .monkForm fieldset fieldset > legend { display: block; width: 100%; line-height: 1.2; padding: 0; margin-bottom: .25rem; border: 0; font-size: 1rem; font-weight: 400; text-transform: uppercase; } .monkForm fieldset fieldset > legend:not(.heading) { padding: 2rem 0 .5rem 0; margin: 0; font-size: 1.25rem; text-transform: uppercase; font-weight: 800; } @media (min-width: 768px) { .monkForm fieldset fieldset > legend:not(.heading) { font-size: 1.875rem; } } .monkForm .section { margin-bottom: 2rem !important; } .monkForm .section p { font-size: 1rem; font-weight: 400; } .monkForm .heading { display: block; line-height: 1rem; margin-bottom: .75rem; line-height: 1.2; font-size: 1rem; font-weight: 400; text-transform: uppercase; } .monkForm p.description { font-size: 1rem; } .monkForm div.divider { position: relative; margin-bottom: 2rem; padding: 1em 0; border-bottom: 0; text-align: left; } .monkForm div.divider .heading { font-size: 1.25rem; text-transform: uppercase; font-weight: 800; } @media (min-width: 768px) { .monkForm div.divider .heading { font-size: 1.875rem; } } .monkForm div.divider div.description { padding: 0; } .monkForm div.divider div.description p { font-size: 1rem; } .monkForm .asterisk { color: #ed8b00; } .monkForm .section, .monkForm .text, .monkForm .textarea, .monkForm .email, .monkForm .name, .monkForm .phone, .monkForm .address, .monkForm .date, .monkForm .radio, .monkForm .checkbox, .monkForm .select, .monkForm .file { margin-bottom: 1.75rem; } .monkForm div { text-align: left; padding: 0; } .monkForm div input, .monkForm div textarea, .monkForm div select { display: inline-block; color: #000000; font-size: 16px; padding: .5rem; margin-bottom: .5rem; outline: none; border: 0; background: none; box-shadow: none; width: 70%; vertical-align: baseline; font-weight: 400; } @media (min-width: 768px) { .monkForm div input, .monkForm div textarea, .monkForm div select { width: auto; } } .monkForm div input { color: #a7a9ac; background: none; border-bottom: 2px solid #a7a9ac; } .monkForm div input:focus { color: #000000; border-bottom-color: #ed8b00; } .monkForm div textarea { color: #a7a9ac; background: none; border: 2px solid #a7a9ac; } .monkForm div textarea:focus { color: #000000; border-color: #ed8b00; } .monkForm .text input, .monkForm .text textarea, .monkForm .email input, .monkForm .email textarea, .monkForm .textarea input, .monkForm .textarea textarea { display: block; width: 90%; } .monkForm .phone input { padding: 2px; width: auto; } @media (min-width: 768px) { .monkForm .phone input { padding: .5rem .75rem; } } .monkForm .address .ui-selectmenu-button { display: block; margin: 0; } @media (min-width: 768px) { .monkForm .address .ui-selectmenu-button { display: inline-block; vertical-align: middle; } } .monkForm .address input { display: block; margin: 0; } @media (min-width: 768px) { .monkForm .address input { display: inline-block; vertical-align: middle; } } .monkForm .address p { margin-bottom: 1rem; } @media (min-width: 768px) { .monkForm .address p { margin-bottom: 1rem; } } .monkForm .checkbox p, .monkForm .radio p { margin-bottom: .25rem; } .monkForm .checkbox label, .monkForm .radio label { display: inline-block; cursor: pointer; position: relative; line-height: 18px; } .monkForm .checkbox input, .monkForm .radio input { width: auto; display: inline-block; } .monkForm .checkbox label, .monkForm .radio label { display: inline-block; cursor: pointer; position: relative; padding-left: 30px; margin-right: 10px; font-size: 1em; line-height: 18px; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-weight: 700; } .monkForm .checkbox label:before, .monkForm .radio label:before { content: ""; display: inline-block; position: absolute; left: 0; width: 20px; height: 20px; background-color: transparent; border: 2px solid #ed8b00; } .monkForm .checkbox label:after { font-family: 'icons' !important; content: "\ed71"; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; vertical-align: middle; font-size: 13px; display: none; position: absolute; top: 2px; left: 3px; color: #ed8b00; z-index: 100; } .monkForm .radio label:after { font-family: 'icons' !important; content: "\ec6b"; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; vertical-align: middle; font-size: 18px; display: none; position: absolute; top: 1px; left: 1px; color: #ed8b00; z-index: 100; } .monkForm .checkbox input[type="checkbox"]:checked + label:before, .monkForm .checkbox input[type="radio"]:checked + label:before { background-color: #ed8b00; } .monkForm .checkbox input[type="checkbox"]:checked + label:after, .monkForm .checkbox input[type="radio"]:checked + label:after { display: inline-block; color: #ffffff; } .monkForm .radio input[type="checkbox"]:checked + label:after, .monkForm .radio input[type="radio"]:checked + label:after { display: inline-block; } .monkForm .checkbox input, .monkForm .radio input { display: none; } .monkForm .radio label:before { border-radius: 50%; } .monkForm .file .data { border: 2px solid #ed8b00; padding: 10px; } @media (min-width: 768px) { .monkForm .file .data { display: inline-block; } } @media (max-width: 767.98px) { .monkForm .file .data { border: 0; padding: 0; } } .monkForm .file input { color: #000000; font-weight: 400; background-color: transparent; padding: 5px; border: 0; } .monkForm .ui-selectmenu-button { display: inline-block; margin: 0; vertical-align: baseline; } .monkForm .address .ui-selectmenu-button { display: block; width: 100%; max-width: 70%; margin-bottom: 20px; } @media (min-width: 768px) { .monkForm .address .ui-selectmenu-button { display: inline-block; width: 125px; margin-bottom: 0; } } .monkForm .date .ui-selectmenu-button { width: 100px !important; } .monkForm input[type=submit] { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin: 0; cursor: pointer; background-color: #ffffff; } .monkForm input[type=submit]:hover { background-color: #ed8b00; } .dark .monkForm { color: #ffffff; } .dark .monkForm div input { color: #a7a9ac; } .dark .monkForm div input:focus { color: #ffffff; } .dark .monkForm div textarea { color: #a7a9ac; } .dark .monkForm div textarea:focus { color: #ffffff; } .form-center .monkForm { text-align: center; } .form-center .monkForm div.divider { text-align: center; } .form-center .monkForm #formsubmit { text-align: center; } /*================================================= i03 - Filters =================================================*/ .filters { padding: 0; margin: 2rem 0; } .filters::after { display: block; content: ""; clear: both; } .filters a { text-decoration: none; } .filters .ui-selectmenu-button { margin: 0 auto 1rem auto; text-align: left; } @media (min-width: 992px) { .filters .ui-selectmenu-button { float: left; margin: 0 2rem 0 0; } } .filters select.sorter { display: block; float: none; font-size: 16px; width: 90%; padding: 2px; margin: 0 auto 1em auto; } @media (min-width: 992px) { .filters.single .ui-selectmenu-button { float: none; margin: 0 auto 1em auto; } } #module-search, #zip-search { border: 0; outline: none; width: 100%; margin: 0; padding: 0; line-height: 1; overflow: hidden; } .filters #module-search { width: 200px; margin: 0 auto 1em auto; } @media (min-width: 992px) { .filters #module-search { float: right; margin: 0; } } #module-search fieldset, #zip-search .zip-inner { position: relative; display: block; padding: 0 8px; margin: 0; line-height: 1; background-color: transparent; border-radius: 0; overflow: hidden; border-bottom: 2px solid #a7a9ac; } #module-search-term, #zip-search-term { display: block; width: 80%; padding: 0 4px; border: 0; font-size: 1rem; font-weight: 400; color: #000000; text-transform: uppercase; line-height: 48px; height: 48px; outline: none !important; background-color: transparent; border-radius: 0; } #module-search-term::-webkit-input-placeholder, #zip-search-term::-webkit-input-placeholder { color: #000000; } #module-search-term:-moz-placeholder, #zip-search-term:-moz-placeholder { color: #000000; } #module-search-term::-moz-placeholder, #zip-search-term::-moz-placeholder { color: #000000; } #module-search-term:-ms-input-placeholder, #zip-search-term:-ms-input-placeholder { color: #000000; } .dark #module-search-term, .dark #zip-search-term { color: #ffffff; } .dark #module-search-term::-webkit-input-placeholder, .dark #zip-search-term::-webkit-input-placeholder { color: #ffffff; } .dark #module-search-term:-moz-placeholder, .dark #zip-search-term:-moz-placeholder { color: #ffffff; } .dark #module-search-term::-moz-placeholder, .dark #zip-search-term::-moz-placeholder { color: #ffffff; } .dark #module-search-term:-ms-input-placeholder, .dark #zip-search-term:-ms-input-placeholder { color: #ffffff; } #module-search-submit, #zip-search-submit { display: block; position: absolute; top: 12px; right: 8px; font-size: 20px; vertical-align: middle; text-align: center; background: none; outline: none; border: 0; padding: 2px 0; cursor: pointer; transition: all 0.3s ease; color: #ed8b00; text-decoration: none !important; } #module-search-submit:after, #zip-search-submit:after { display: none; } #module-search-submit:hover, #zip-search-submit:hover { color: #414141; } #content.dark #module-search-submit, #content.dark #zip-search-submit, #content.dark #gF-filter-submit { color: #ed8b00; } #content.dark #module-search-submit:hover, #content.dark #zip-search-submit:hover, #content.dark #gF-filter-submit:hover { color: #ffffff; } #module-search.large { width: 200px; margin: 0 auto; } @media (min-width: 992px) { #module-search.large { width: 100%; } } #module-search.large #module-search-term { width: 200px; margin: 0 auto; font-size: 1.125rem; font-weight: 700; } @media (min-width: 992px) { #module-search.large #module-search-term { width: 100%; font-size: 1.375rem; } } @media (min-width: 992px) { #module-search.large #module-search-submit { font-size: 1.5rem; } } .content-sidebar .filters { margin: 0; } @media (min-width: 992px) { .content-sidebar .filters { margin: 0; } } .content-sidebar .filters .ui-selectmenu-button { float: none; margin: 0 auto 1em auto; text-align: left; } @media (min-width: 992px) { .content-sidebar .filters #module-search, .content-sidebar .filters #zip-search { float: none; margin: 0 auto; } } #groups-filter .childcare, #groups-filter .online{ position: relative; width: 180px; margin: 2rem auto 0 auto; text-align: center; } @media (min-width: 992px) { #groups-filter .childcare, #groups-filter .online { text-align: left; margin: 0; } } #groups-filter .childcare label, #groups-filter .online label { display: inline-block; vertical-align: middle; cursor: pointer; position: relative; padding-left: 30px; color: #000000; font-weight: 700; font-size: 1.125rem; line-height: 1.25rem; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #groups-filter .childcare label:before, #groups-filter .online label:before { content: ""; display: inline-block; position: absolute; left: 0; width: 20px; height: 20px; background-color: transparent; border: 3px solid #ed8b00; } #groups-filter .childcare input[type="checkbox"]:checked + label:before, #groups-filter .online input[type="checkbox"]:checked + label:before { background-color: #ed8b00; } #groups-filter .childcare input, #groups-filter .online input { display: none; } @media (min-width: 992px) { body.flex-filters .filters, body.flex-filters-form .filters form { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; } } @media (min-width: 992px) { body.flex-filters .filters .ui-selectmenu-button, body.flex-filters-form .filters form .ui-selectmenu-button { float: none; width: 100%; margin: 0; -webkit-box-flex: 1; flex: 1 0; margin-right: 2.5%; } } @media (min-width: 992px) { body.flex-filters .filters #groups-filter .ui-selectmenu-button, body.flex-filters-form .filters form .ui-selectmenu-button { float: none; max-width: 168px; margin: 0; flex: 0 0 168px; margin-right: 2.5%; } } @media (min-width: 992px) { body.flex-filters.watch-layout .filters #groups-filter .ui-selectmenu-button, body.flex-filters-form.watch-layout .filters form .ui-selectmenu-button { flex: 1 0 168px; max-width: 100%; width: 100%; } } body.flex-filters .filters #module-search, body.flex-filters .filters #zip-search, body.flex-filters-form .filters form #module-search, body.flex-filters-form .filters form #zip-search { width: 220px; margin: 0 auto; } @media (min-width: 992px) { body.flex-filters .filters #module-search, body.flex-filters .filters #zip-search, body.flex-filters-form .filters form #module-search, body.flex-filters-form .filters form #zip-search { float: none; width: 100%; -webkit-box-flex: 1; flex: 1 0; margin-right: 2.5%; } } @media (min-width: 992px) { body.flex-filters .filters #zip-search, body.flex-filters-form .filters form #zip-search { float: none; flex: 0 0 168px; max-width: 168px; width: 168px; margin-right: 2.5%; } } @media (min-width: 992px) { body.flex-filters-form.watch-layout .filters form #zip-search { flex: 1 0 168px; max-width: 100%; width: 100%; } } @media (min-width: 992px) { body.flex-filters .filters .childcare, body.flex-filters-form .filters form .childcare { float: none; width: 100%; -webkit-box-flex: 1; flex: 0 160px;} } @media (min-width: 992px) { body.flex-filters .filters .online, body.flex-filters-form .filters form .online { float: none; width: 100%; -webkit-box-flex: 1; flex: 0 140px;} } .section-filter { text-align: center; margin-top: 4rem; } @media (min-width: 768px) { .section-filter { position: relative; width: 100%; display: -webkit-box; display: flex; flex-wrap: wrap; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; } } .section-filter .ui-selectmenu-button { display: block; width: 240px; margin: 0 auto 1rem auto; } @media (min-width: 768px) { .section-filter .ui-selectmenu-button { margin: 0 .5rem; } } .section-filter .btn { margin: 0 auto; } @media (min-width: 768px) { .section-filter .btn { margin: 0 .5rem; } } .content-main #searchForm2 { width: 100%; max-width: 360px; position: relative; margin: 0 auto 4rem auto; border: 0; outline: none; box-shadow: none; } .content-main #searchForm2 fieldset { width: 100%; position: relative; border: 0; padding: 0; margin: 0; background-color: #ffffff; border-bottom: 1px solid #b0b2b5; } .content-main #searchForm2 fieldset:after { display: block; content: ""; clear: both; } .content-main #searchForm2 #search_term2 { display: block; float: left; width: 85%; padding: 0 2.5%; margin: 0; border: 0; text-align: left; font-size: 20px; font-weight: 300; line-height: 46px; outline: none !important; border-radius: 0; background: none; color: #b0b2b5; } .content-main #searchForm2 #search_term2:focus { color: #0a3a53; } .content-main #searchForm2 #search_go2 { display: block; position: absolute; right: 6px; top: 50%; width: 10%; height: 100%; text-align: center; margin: -10px 0 0 0; padding: 0; font-size: 20px; color: #b0b2b5; text-decoration: none !important; } .content-main #searchForm2 #search_go2:hover { color: #0a3a53; } /*================================================= i04 - Header =================================================*/ #alert-header { position: relative; width: 100%; background-color: #ed8b00; text-align: center; } #alert-header a.alert { display: inline-block; vertical-align: middle; padding: .5rem 5%; text-align: center; color: #000000; } @media (min-width: 992px) { #alert-header a.alert { padding: .5rem 1%; } } #alert-header a.alert:after { display: none; } #alert-header #alert-toggle { position: absolute; top: .5rem; right: 5px; color: #000000; text-decoration: none !important; } #alert-header #alert-toggle:after { display: none; } @media (min-width: 992px) { #alert-header #alert-toggle { position: relative; top: auto; right: auto; display: inline-block; vertical-align: middle; } } #header { position: absolute; width: 100%; top: 0; left: 0; z-index: 4999; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; -webkit-transform: translateZ(0); } #header .header { position: relative; width: 100%; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; height: 60px; transition: all 0.3s ease; background-color: transparent; } @media (min-width: 992px) { #header .header { height: 100px; } } #header .header a:after { display: none !important; } #header .logo { position: absolute; left: 15px; transition: all 0.3s ease; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } @media (min-width: 992px) { #header .logo { left: 40px; } } #header .logo a { display: block; width: 36px; height: 36px; text-decoration: none; background-repeat: no-repeat; background-position: left center; background-size: 36px auto; background-image: url(/_assets/img/logos/logo-icon-header.svg); transition: none; } @media (min-width: 992px) { #header .logo a { width: 236px; height: 59px; background-size: 236px auto; background-image: url(/_assets/img/logos/logo-header.svg); } } #header .search { position: absolute; left: 15px; top: 6px; width: 260px; opacity: 0; visibility: hidden; transition: all 0.3s ease; transition-delay: 0s; } @media (min-width: 992px) { #header .search { width: 320px; right: 57px; left: auto; top: 22px; } } #header #searchForm { width: 80%; padding: 0; margin: 0; border: 0; outline: none; box-shadow: none; } #header #searchForm fieldset { width: 100%; height: 40px; line-height: 40px; position: relative; border: 0; padding: 0; margin: 0; background-color: transparent; border-bottom: 1px solid #ffffff; } #header #searchForm fieldset:after { display: block; content: ""; clear: both; } #header #searchForm #search_term { display: block; float: left; width: 80%; padding: 0 0 0 2.5%; margin: 0; border: 0; color: #ffffff; text-align: left; font-size: 16px; line-height: 40px; height: 40px; font-weight: 400; text-transform: uppercase; outline: none !important; border-radius: 0; background-color: transparent; } #header #searchForm #search_term:focus { text-transform: none; } #header #searchForm #search_term::-webkit-input-placeholder { color: #ffffff; } #header #searchForm #search_term:-moz-placeholder { color: #ffffff; } #header #searchForm #search_term::-moz-placeholder { color: #ffffff; } #header #searchForm #search_term:-ms-input-placeholder { color: #ffffff; } #header #search_go { display: block; position: absolute; right: 0; top: 12px; width: 28px; text-align: center; margin: 0; padding: 0; text-decoration: none !important; font-size: 1rem; color: #ed8b00; } #header #search_go:after { display: none; } #header .mp_list { position: absolute; top: 40px; left: 0; font-size: .875rem; line-height: 1.3rem; margin: 0; padding: 0; width: 100%; padding: 0; list-style: none; z-index: 500; background-color: rgba(0, 0, 0, 0.65); border-radius: 0; } #header .mp_list.hasMore { padding-bottom: 0; } #header .mp_list li { display: block; margin: 0; padding: .5rem; list-style: none; color: #ed8b00; overflow: hidden; } #header .mp_list li.mp_selectable { cursor: pointer; } #header .mp_list li.mp_no_results strong { color: #ffffff; } #header .mp_list li.mp_highlighted { background: #ed8b00; color: #ffffff; } #header .mp_list li .title { display: block; float: left; width: 70%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #header .mp_list li .type { font-size: .75rem; width: 27.5%; float: right; color: #ffffff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center; } #header .mp_list li.searching { background-color: #414141; color: #ffffff; } #header .mp_list li.mp_show_more { color: #ffffff; background-color: #414141; } #header .toggles { position: absolute; text-align: right; right: 15px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } @media (min-width: 992px) { #header .toggles { right: 40px; } } #header .toggles a.click-toggle { display: inline-block; vertical-align: text-top; margin-right: 1rem; color: #ffffff; text-decoration: none; margin-bottom: 0; line-height: 1; transition: opacity 0.3s ease; } #header .toggles a.click-toggle:after { display: none; } @media (min-width: 992px) { #header .toggles a.click-toggle { margin-right: 1.75rem; } } #header .toggles a.click-toggle i { display: inline-block; vertical-align: middle; font-size: 1.5rem; transition: all 0.3s ease; } #header .toggles a.click-toggle span { display: none; vertical-align: middle; font-weight: 700; font-size: 1.125rem; text-transform: uppercase; margin-left: .25rem; transition: all 0.3s ease; text-align: left; } @media (min-width: 992px) { #header .toggles a.click-toggle span { display: inline-block; } } #header .toggles a.navigation-toggle { position: relative; width: 26px; height: 21px; margin: 0; transition: none; } #header .toggles a.navigation-toggle .navigation-toggle-inner { position: relative; width: 100%; height: 21px; } #header .toggles a.navigation-toggle .navigation-toggle-bars { position: absolute; left: 0; right: 0; width: 100%; height: 4px; background-color: #ffffff; transition: all 0.3s ease; } #header .toggles a.navigation-toggle .navigation-toggle-bars#navigation-bar-1 { top: 0; width: 60%; } #header .toggles a.navigation-toggle .navigation-toggle-bars#navigation-bar-2, #header .toggles a.navigation-toggle .navigation-toggle-bars#navigation-bar-3 { top: 50%; margin-top: -1px; } #header .toggles a.navigation-toggle .navigation-toggle-bars#navigation-bar-4 { bottom: -2px; width: 80%; } @media (min-width: 992px) { #header .toggles a.campuses-toggle .text { min-width: 124px; } } #header .toggles a.campuses-toggle .text:after { content: "Locations & Times"; } .goog-te-banner-frame {display:none;} #goog-gt-tt {display:none!important;visibility:hidden!important;} .goog-te-banner-frame.skiptranslate {display: none!important;} body {top: 0px!important;} #google_translate_element { display: inline-block; padding: 0 .75rem 0 0 !important; margin: 0 .25rem 0 0;height: auto !important;line-height: 1 !important; transition: all 0.3s ease; border-right: 2px solid #ffffff;} .goog-te-gadget {} .goog-te-gadget-simple { border: 0 !important; outline: none !important; background-color: transparent !important; padding: 0 !important;} .goog-te-gadget-simple > span > a { padding: 0 !important; height: auto !important; min-height: 0; line-height: 1 !important; margin: 0 !important;} .goog-te-gadget-icon { display: none !important;} .goog-te-gadget-simple span { font-weight: 700; font-size: 1.125rem; text-transform: uppercase; color: #ffffff; font-family: "Gotham SSm A", "Gotham SSm B", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !important; transition: all 0.3s ease;} .goog-te-menu-value span { display: none !important;} .goog-te-menu-value span:first-child { display: block !important;} .goog-te-menu-value img { display: none !important;} body:not(.show-nav) #header.is-sticky { box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); } body:not(.show-nav) #header.is-sticky .header { background-color: rgba(255, 255, 255, 0.85); } @media (min-width: 992px) { body:not(.show-nav) #header.is-sticky .header { height: 60px; } } @media (min-width: 992px) { body:not(.show-nav) #header.is-sticky .search { top: 6px; } } #header.is-sticky { position: fixed !important; } @media (min-width: 992px) { #header.is-sticky .logo a { background-image: url(/_assets/img/logos/logo-header-sticky.svg); background-size: 198px auto; } } #header.is-sticky .toggles a { color: #ed8b00; } #header.is-sticky .toggles a.navigation-toggle .navigation-toggle-bars { background-color: #ed8b00; } html.use-hover #header .toggles a:hover { opacity: .7; } html.use-hover #header .toggles a.navigation-toggle:hover { opacity: 1; } html.use-hover #header .toggles a.navigation-toggle:hover .navigation-toggle-bars#navigation-bar-1 { width: 100%; } html.use-hover #header .toggles a.navigation-toggle:hover .navigation-toggle-bars#navigation-bar-4 { width: 100%; } @media (min-width: 992px) { body.show-nav #header { right: 0; width: 400px; left: auto; } } body.show-nav #header .header { background-color: transparent !important; } body.show-nav #header .search { opacity: 1; visibility: visible; transition-delay: .5s; } body.show-nav #header .logo { opacity: 0; visibility: hidden; } @media (min-width: 992px) { body.show-nav #header .logo { display: none; } } body.show-nav #header .toggles a { opacity: 0; visibility: hidden; } @media (min-width: 992px) { body.show-nav #header .toggles a { display: none; } } body.show-nav #header .toggles a.navigation-toggle { opacity: 1; visibility: visible; } @media (min-width: 992px) { body.show-nav #header .toggles a.navigation-toggle { display: block; } } body.show-nav #header .toggles a.navigation-toggle .navigation-toggle-bars { background-color: #ffffff; } body.show-nav #header .toggles a.navigation-toggle .navigation-toggle-bars#navigation-bar-1, body.show-nav #header .toggles a.navigation-toggle .navigation-toggle-bars#navigation-bar-4 { -webkit-transform: scaleX(0); transform: scaleX(0); } body.show-nav #header .toggles a.navigation-toggle .navigation-toggle-bars#navigation-bar-2 { -webkit-transform: rotate(45deg); transform: rotate(45deg); } body.show-nav #header .toggles a.navigation-toggle .navigation-toggle-bars#navigation-bar-3 { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } #wrap.no-billboard #header { position: relative; } #wrap.no-billboard #header .header { background-color: rgba(0, 0, 0, 0.85); } #wrap.no-billboard #header.is-sticky .header { background-color: rgba(255, 255, 255, 0.85); } body.show-campuses #header .toggles a.campuses-toggle i:before { content: "\ed6d"; } body.show-campuses #header .toggles a.campuses-toggle .text:after { content: "Close"; } body.show-campuses #header, body.show-campuses #header.is-sticky { box-shadow: none; } @media (min-width: 992px) { body.show-campuses #header .header, body.show-campuses #header.is-sticky .header { height: 100px; } } @media (min-width: 992px) { body.show-campuses #header .logo a, body.show-campuses #header.is-sticky .logo a { background-image: url(/_assets/img/logos/logo-header-sticky.svg); background-size: 198px auto; } } body.show-campuses #header .toggles a, body.show-campuses #header.is-sticky .toggles a { color: #ed8b00; } body.show-campuses #header .toggles a.navigation-toggle .navigation-toggle-bars, body.show-campuses #header.is-sticky .toggles a.navigation-toggle .navigation-toggle-bars { background-color: #ed8b00; } /*================================================= i05 - Nav =================================================*/ nav.main { position: fixed; right: -100%; top: 0; bottom: 0; width: 100%; height: 100%; background-color: #000000; background-position: center center; background-size: cover; z-index: 3999; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000px; perspective: 1000px; transition: -webkit-transform 800ms cubic-bezier(0.77, 0, 0.175, 1); transition: transform 800ms cubic-bezier(0.77, 0, 0.175, 1); transition: transform 800ms cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform 800ms cubic-bezier(0.77, 0, 0.175, 1); } nav.main .nav-inner { position: relative; height: 100%; width: 100%; padding: 0; overflow: auto; background-color: rgba(0, 0, 0, 0.85); } @media (min-width: 992px) { nav.main .nav-inner { overflow: hidden; } } body.show-nav nav.main { -webkit-transform: translateX(-100%); transform: translateX(-100%); } @media (min-width: 992px) { body.show-nav nav.main .nav-inner { background-color: rgba(0, 0, 0, 0.65); } } li#nav_private { display: none !important; } #nav { position: relative; width: 100%; margin: 0 auto; padding: 0 10%; list-style: none; display: -webkit-box; display: flex; flex-wrap: wrap; line-height: 1; transition: all 0.3s ease; } @media (min-width: 992px) { #nav { flex-wrap: nowrap; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; height: 100%; padding-top: 0 !important; } } #nav:before { display: none; content: ""; position: absolute; left: 0; top: 0; width: 10%; height: 100%; background-color: rgba(0, 0, 0, 0.65); } @media (min-width: 992px) { #nav:before { display: block; } } #nav:after { display: none; content: ""; position: absolute; right: 0; top: 0; width: 10%; height: 100%; background-color: rgba(0, 0, 0, 0.65); } @media (min-width: 992px) { #nav:after { display: block; } } #nav > li { position: relative; margin: .35rem 0; padding: 0; list-style: none; width: 100%; min-height: 1px; -webkit-box-flex: 0; flex: 0 0 100%; max-width: 100%; text-align: center; transition: all 0.3s ease; } @media (min-width: 992px) { #nav > li { flex-basis: 0; -webkit-box-flex: 1; flex-grow: 1; display: -webkit-box; display: flex; flex-wrap: wrap; -webkit-box-align: center; align-items: center; max-width: 100%; height: 100%; text-align: left; margin: 0; background-color: rgba(0, 0, 0, 0.65); } } #nav > li > .a-inner > a, #nav > li > a { text-align: center; margin: 0 15px 1rem 15px; color: #ffffff; text-transform: uppercase; font-weight: 700; line-height: 1.4; } @media (min-width: 992px) { #nav > li > .a-inner > a, #nav > li > a { text-align: left; } } #nav > li ul { display: none; margin: 0; padding: 0 15px .5rem 15px; list-style: none; } #nav > li ul .ul-inner { position: relative; transition: all 0.3s ease; } #nav > li ul li { display: block; padding: 0; margin: 0 0 1rem 0; position: relative; transition: all 0.3s ease; } #nav > li ul li a { font-size: .9125rem; font-weight: 400; color: #ffffff; text-transform: uppercase; line-height: 1.4; } #nav > li.dropdown > .a-inner > a { padding-right: 42px; } @media (min-width: 992px) { #nav > li.dropdown > .a-inner > a { padding-right: 0; } } #nav > li.dropdown > .a-inner > a:after { display: none; } #nav > li.dropdown > .a-inner > a span { position: absolute; right: 0; top: 0; width: 32px; height: 100%; text-align: right; transition: all 0.3s ease; } @media (min-width: 992px) { #nav > li.dropdown > .a-inner > a span { right: auto; left: 0; top: -22px; } } #nav > li.dropdown > .a-inner > a span:before { content: ""; position: absolute; left: 0; width: 0; height: 0; border-bottom: 18px solid #ed8b00; border-right: 18px solid transparent; } nav.main.nav-desktop #nav > li { margin-bottom: 1rem; } @media (min-width: 992px) { nav.main.nav-desktop #nav > li { margin: 0; } } nav.main.nav-desktop #nav > li:hover { background-color: transparent !important; } nav.main.nav-desktop #nav > li:hover ul { -webkit-transform: scaleY(1); transform: scaleY(1); } nav.main.nav-desktop #nav > li.dropdown > .a-inner > a:hover { color: #ed8b00; } nav.main.nav-desktop #nav > li.dropdown:hover ul li { max-height: 200px; margin: .5rem 0; } @media (min-width: 992px) { nav.main.nav-desktop #nav > li.dropdown:hover ul li { margin: 1rem 0; } } nav.main.nav-desktop #nav > li ul { display: block !important; margin: 0; padding: 0 15px; list-style: none; transition: -webkit-transform 300ms cubic-bezier(0.77, 0, 0.175, 1); transition: transform 300ms cubic-bezier(0.77, 0, 0.175, 1); transition: transform 300ms cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform 300ms cubic-bezier(0.77, 0, 0.175, 1); transition-delay: 50ms; -webkit-transform-origin: center top; transform-origin: center top; -webkit-transform: scaleY(0); transform: scaleY(0); } nav.main.nav-desktop #nav > li ul li { max-height: 0; margin: 0; } /*================================================= i06 - Campuses =================================================*/ #campuses { position: fixed; left: -100%; top: 0; bottom: 0; width: 100%; height: 100%; background-color: #ffffff; background-position: center center; background-size: cover; z-index: 3999; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000px; perspective: 1000px; transition: -webkit-transform 800ms cubic-bezier(0.77, 0, 0.175, 1); transition: transform 800ms cubic-bezier(0.77, 0, 0.175, 1); transition: transform 800ms cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform 800ms cubic-bezier(0.77, 0, 0.175, 1); } body.show-campuses #campuses { -webkit-transform: translateX(100%); transform: translateX(100%); } #campuses .campuses-inner { position: relative; height: 100%; width: 100%; padding: 0; overflow: auto; } .campuses { position: relative; padding: 0 10%; } .campuses article .info { position: relative; height: 100%; border-bottom: 1px solid #a7a9ac; } .campuses article .broadcast i { color: #ed8b00; } .campuses article p { margin-bottom: .75rem; } /*================================================= i07 - Billboard =================================================*/ #billboard { position: relative; width: 100%; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; text-align: center; transition: all 0.3s ease; background-color: #000000; background-position: top center; background-size: cover; background-repeat: no-repeat; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; -webkit-transform: translateZ(0); } #billboard.lower-left { -webkit-box-align: flex-end; align-items: flex-end; text-align: left; } #billboard .text { position: relative; width: 100%; z-index: 100; } #billboard .text .inner { padding: 80px 0; } @media (min-width: 768px) { #billboard .text .inner { padding: 50px 0; } } #billboard .text p { margin-top: 1.5rem; } #billboard.hasbillboard { min-height: 360px; } @media (min-width: 768px) { #billboard.hasbillboard { min-height: 490px; } } @media (min-width: 1080px) { #billboard.hasbillboard { min-height: 650px; } } @media (min-width: 1920px) { #billboard.hasbillboard { min-height: 1080px; } } #billboard.hasvideo { min-height: 360px; } @media (min-width: 768px) { #billboard.hasvideo { min-height: 490px; } } @media (min-width: 1200px) { #billboard.hasvideo { min-height: 650px; } } html.loaded #billboard .text.wowit { -webkit-animation-duration: 1.3s; animation-duration: 1.3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility: hidden; -webkit-animation-delay: .3s; animation-delay: .3s; } html.loaded #billboard .text.wowit.animate { visibility: visible; -webkit-animation-name: fadeIn; animation-name: fadeIn; } #bigvideo-mute { display: block; position: absolute; width: 32px; height: 32px; line-height: 32px; background-color: #ffffff; color: #000000; right: 1rem; bottom: 60px; font-size: 1rem; border-radius: 50%; text-align: center; z-index: 500; } @media (min-width: 768px) { #bigvideo-mute { bottom: 90px; } } @media (min-width: 1200px) { #bigvideo-mute { width: 42px; height: 42px; line-height: 42px; font-size: 1.35rem; } } #bigvideo-mute:after { display: none; } html.use-hover #bigvideo-mute:hover { background-color: #ed8b00; } #bigvideo { display: block; position: absolute; height: 100%; width: 100%; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; } #bigvideo video { display: block; -o-object-fit: cover; object-fit: cover; -o-object-position: top center; object-position: top center; position: absolute; left: 0; top: 0; width: 100%; height: 100%; /*display: block; position: absolute; width: auto; height: auto; min-width: 100%; min-height: 100%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); */ } #bigvideo iframe { display: block; height: 100%; width: 100%; } #billboard.hasrotator { min-height: 0 !important; height: auto !important; } #billboard .widget.sermon a.is-audio.button-default { display: none; } #billboard .widget.sermon a.is-audio.button-default.on { display: inline-block; } #billboard .audio-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: top center; background-repeat: no-repeat; background-size: cover; } #billboard .audio-wrap:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.82); } #billboard .mejs-custom.audio { width: 80%; position: absolute; left: 10%; top: 50%; } #billboard.player { display: block !important; height: 0 !important; min-height: 0 !important; background: #000000 !important; padding-bottom: 56.25%; z-index: 500; } #billboard.player .video .div-embed { min-height: 0 !important; } /*================================================= i08 - Sections =================================================*/ #content { position: relative; } #content.dark { background-color: #000000; } .content-sidebar-section { position: relative; background-position: center center; background-repeat: no-repeat; background-size: cover; } .content-sidebar-section.dark { background-color: #000000; } @media (min-width: 992px) { .content-sidebar-section.hasbg { background-attachment: fixed; } } .content-section, .section-after { position: relative; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; } .section-after[data-tab] { display: none; } .content-section .content-section-inner, .section-after-inner { position: relative; background-repeat: no-repeat; background-position: center center; background-size: cover; background-color: #ffffff; padding: 40px 0; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; } @media (min-width: 992px) { .content-section .content-section-inner { padding: 80px 0; } } .content-section .content-section-inner.dark, .section-after-inner.dark { background-color: #000000; } .content-section .content-section-inner[data-section-light-gradient] { background: linear-gradient(rgba(255,255,255,1), rgba(167, 169, 172, .15)); } .content-section .content-section-inner[data-section-light-gradient] hr { border-color: #ffffff; border-width: 2px; } @media (min-width: 992px) { .content-section .content-section-inner.hasbg, .section-after-inner.hasbg { background-attachment: fixed; } } .content-section .content-section-inner[data-section-overlay]:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #000000; opacity: .65; } .content-section .content-section-inner.jarallax, .section-after-inner.jarallax { position: relative; z-index: 0; border-radius: 0px !important; } .content-section .content-section-inner .jarallax-img, .section-after-inner .jarallax-img { position: absolute; object-fit: cover; /* support for plugin https://github.com/bfred-it/object-fit-images */ font-family: 'object-fit: cover;'; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .content-section p:last-of-type, .section-after p:last-of-type{ margin: 0; } @media (min-width: 992px) { body.no-content .content-section.pos-1 .content-section-inner { padding-top: 40px; } } @media (min-width: 992px) { body.no-content .content-section.pos-1 .content-section-inner.hasbg { padding: 40px 0; } } .content-section .content-section-inner.no-padding { padding: 0 !important; } .content-section .content-section-inner.section-columns { padding: 0px !important; } .content-row { display: flex; flex-wrap: wrap; } @media (min-width: 992px) { .content-row { min-height: 526px; } } @media (min-width: 992px) { .content-row.right .content-text { order: -1; } } .content-row.right .content-text .content-text-inner { margin: 0 auto; } .content-image { position: relative; width: 100%; flex: 0 0 100%; max-width: 100%; background-repeat: no-repeat; background-position: top center; background-size: cover; } @media (min-width: 992px) { .content-image { flex: 0 0 50%; } } .content-image img { display: block; width: 100%; height: auto; border-radius: 0; padding: 0; margin: 0; -webkit-filter: grayscale(90%); filter: grayscale(90%); } @media (min-width: 992px) { .content-image img { display: block; width: 100%; height: 100%; object-fit: cover; } } .content-image-overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; background-color: rgba(25,25,25,.6); z-index: 100; } .content-image-overlay-inner { width: 100%; padding: 2rem; text-align: center; max-width: 400px; margin: 0 auto; text-align: center; } .content-image-overlay-inner h3 { color: #cecece; } .content-text { position: relative; width: 100%; flex: 0 0 100%; max-width: 100%; display: flex; align-items: center; } @media (min-width: 992px) { .content-text { flex-basis: 0; flex-grow: 1; } } .content-text .content-text-inner { width: 100%; max-width: 100%; margin: 0 auto; } @media (min-width: 576px) { .content-text .content-text-inner { max-width: 860px; } } .content-text .content-text-align { position: relative; width: 100%; flex: 0 0 100%; max-width: 100%; padding: 2rem 15px; } @media (min-width: 992px) { .content-text .content-text-align { padding: 3rem 4rem; } } #subnav { list-style: none; margin: 0; padding: 0; } #subnav ul { margin: 0; padding: 0; } #subnav li { list-style: none; margin: 0; padding: 0; line-height: 1.1; } #subnav li a { display: inline-block; margin-bottom: 1rem; } #subnav > li > a { font-weight: 700; font-size: 1.25rem; text-transform: uppercase; letter-spacing: 3px; } @media (min-width: 768px) { #subnav > li > a { font-size: 1.375rem; } } #subnav > li > ul { padding-left: 1.25rem; } #subnav > li > ul > li > a { font-weight: 700; font-size: 1.125rem; } @media (min-width: 768px) { #subnav > li > ul > li > a { font-size: 1.25rem; } } #subnav > li > ul > li > ul { display: none; padding-left: 2rem; } #subnav > li > ul > li > ul > li > a { color: #000000; } #subnav > li > ul > li > ul > li > a:before { display: none; } #subnav > li > ul > li.current > ul { display: block; } html.use-hover #subnav > li > ul > li > ul > li > a:hover { color: #ed8b00; } .content-main #searchForm2 { width: 80%; padding: 0; margin: 0 auto 2rem auto; border: 0; outline: none; box-shadow: none; } .content-main #searchForm2 fieldset { width: 100%; height: 50px; line-height: 50px; position: relative; border: 0; padding: 0; margin: 0; background-color: transparent; border-bottom: 2px solid #a7a9ac; } .content-main #searchForm2 fieldset:after { display: block; content: ""; clear: both; } .content-main #searchForm2 #search_term2 { display: block; float: left; width: 80%; max-width: 560px; padding: 0 0 0 2.5%; margin: 0; border: 0; color: #000000; text-align: left; font-size: 20px; line-height: 50px; font-weight: 400; text-transform: uppercase; outline: none !important; border-radius: 0; background-color: transparent; } .content-main #searchForm2 #search_term2:focus { text-transform: none; } .content-main #searchForm2 #search_term2::-webkit-input-placeholder { color: #000000; } .content-main #searchForm2 #search_term2:-moz-placeholder { color: #000000; } .content-main #searchForm2 #search_term2::-moz-placeholder { color: #000000; } .content-main #searchForm2 #search_term2:-ms-input-placeholder { color: #000000; } .content-main #search_go2 { display: block; position: absolute; right: 0; font-size: 1.5rem; top: 14px; width: 28px; text-align: center; margin: 0; padding: 0; text-decoration: none !important; color: #ed8b00; } .content-main #search_go2:after { display: none; } html.use-hover .content-main #search_go2:hover { color: #000000; } html.loaded .text.sec-fadeIn.wowit { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility: hidden; -webkit-animation-delay: .4s; animation-delay: .4s; } html.loaded .text.sec-fadeIn.wowit.animate { visibility: visible; -webkit-animation-name: fadeIn; animation-name: fadeIn; } /*================================================= i09 - Widgets =================================================*/ /*general image hover*/ html.use-hover .image-enlarge a { display: block; position: relative; } html.use-hover .image-enlarge a:after { display: none; } html.use-hover .image-enlarge a img { position: relative; transition: all 0.3s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: scale(1, 1); transform: scale(1, 1); } html.use-hover .image-enlarge a:hover img { -webkit-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05); } /*general two column animation*/ html.loaded .widget-columns.wowit { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility: hidden; -webkit-animation-delay: .3s; animation-delay: .3s; } html.loaded .widget-columns.wowit.animate { visibility: visible; -webkit-animation-name: fadeIn; animation-name: fadeIn; } /*article row (eg. volunteer home page*/ .widget.article-row { position: relative; width: 100%; display: -webkit-box; display: flex; } @media (max-width: 991.98px) { .widget.article-row { flex-wrap: wrap; } } .widget.article-row article { position: relative; width: 100%; margin-bottom: 2rem; min-height: 1px; height: 440px; } @media (min-width: 992px) { .widget.article-row article { margin: 0 15px; flex-basis: 0; -webkit-box-flex: 1; flex-grow: 1; max-width: 100%; } } .widget.article-row article .info-wrap { position: relative; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; overflow: hidden; width: 100%; display: -webkit-box; display: flex; flex-wrap: wrap; -webkit-box-align: end; align-items: flex-end; } .widget.article-row article .info { background-color: #292929; padding: 1rem 0; width: 100%; position: relative; } .widget.article-row article .info h5 { padding: 0 1rem; } .widget.article-row article .info h5 a { color: #ffffff; } .widget.article-row article .info .hidden { padding: 0 1rem 1rem 1rem; } @media (min-width: 992px) { html.use-hover .widget.article-row article:hover .info { background-color: #292929; -webkit-transform: translateY(0); transform: translateY(0); } } @media (min-width: 992px) { html.use-hover .widget.article-row article:hover .info .hidden { opacity: 1; visibility: visible; } } @media (min-width: 992px) { html.use-hover .widget.article-row article .info { background-color: transparent; transition: all 0.3s ease; -webkit-transform: translateY(160px); transform: translateY(160px); } } @media (min-width: 992px) { html.use-hover .widget.article-row article .info .hidden { position: relative; height: 160px; transition: all 0.3s ease; opacity: 0; visibility: hidden; } } @media (min-width: 992px) { html.loaded .media-display-full-left .widget.article-row, html.loaded .media-display-full-right .widget.article-row { overflow-x: auto; } } @media (min-width: 992px) { html.loaded .media-display-full-left .widget.article-row article, html.loaded .media-display-full-right .widget.article-row article { margin: 0; padding: 0 15px; } } @media (min-width: 992px) { html.loaded .media-display-full-left.wowit .widget.article-row, html.loaded .media-display-full-right.wowit .widget.article-row { overflow: visible; } } html.loaded .media-display-full-left.wowit .widget.article-row article, html.loaded .media-display-full-right.wowit .widget.article-row article { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility: hidden; -webkit-animation-delay: .65s; animation-delay: .65s; } html.loaded .media-display-full-left.wowit .widget.article-row article:nth-child(2), html.loaded .media-display-full-right.wowit .widget.article-row article:nth-child(2) { -webkit-animation-delay: .8s; animation-delay: .8s; } html.loaded .media-display-full-left.wowit .widget.article-row article:nth-child(3), html.loaded .media-display-full-right.wowit .widget.article-row article:nth-child(3) { -webkit-animation-delay: .95s; animation-delay: .95s; } html.loaded .media-display-full-left.wowit .widget.article-row article:nth-child(4), html.loaded .media-display-full-right.wowit .widget.article-row article:nth-child(4) { -webkit-animation-delay: 1.1s; animation-delay: 1.1s; } html.loaded .media-display-full-left.wowit .widget.article-row article:nth-child(5), html.loaded .media-display-full-right.wowit .widget.article-row article:nth-child(5) { -webkit-animation-delay: 1.25s; animation-delay: 1.25s; } html.loaded .media-display-full-left.wowit .widget.article-row article:nth-child(6), html.loaded .media-display-full-right.wowit .widget.article-row article:nth-child(6) { -webkit-animation-delay: 1.4s; animation-delay: 1.4s; } @media (min-width: 992px) { html.loaded .media-display-full-left.wowit.animate.animdone .widget.article-row, html.loaded .media-display-full-right.wowit.animate.animdone .widget.article-row { overflow-x: auto; } } html.loaded .media-display-full-left.wowit.animate .widget.article-row article { visibility: visible; -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } html.loaded .media-display-full-right.wowit.animate .widget.article-row article { visibility: visible; -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } /*event row (eg. events campus page*/ .widget.event-row { position: relative; width: 100%; margin-top: 2rem; } .widget.event-row article { position: relative; height: 320px; } .widget.event-row article .info-wrap { position: relative; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; overflow: hidden; width: 100%; display: -webkit-box; display: flex; flex-wrap: wrap; -webkit-box-align: end; align-items: flex-end; background-color: #000000; } .widget.event-row article .info { background-color: #292929; padding: 1rem 0; width: 100%; position: relative; } .widget.event-row article .info h5 { padding: 0 1rem; } .widget.event-row article .info h5 a { color: #ffffff; } .widget.event-row article .info .date { padding: 0 1rem; } .widget.event-row article .info .hidden { padding: 0 1rem 1rem 1rem; } .widget.event-row .rellax-widget { display: none; position: absolute; left: -5%; width: 3005%; top: 120px; height: 160px; background-color: #ed8b00; z-index: -1; } @media (min-width: 768px) { .widget.event-row .rellax-widget { height: 270px; } } html.clippaths .text .widget.event-row { z-index: 100; } html.clippaths .text .widget.event-row .rellax-widget { display: block; bottom: 0; -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0.75% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0.75% 100%); } @media (min-width: 992px) { html.use-hover .widget.event-row article:hover .info { background-color: #292929; -webkit-transform: translateY(0); transform: translateY(0); } } @media (min-width: 992px) { html.use-hover .widget.event-row article:hover .info .hidden { opacity: 1; visibility: visible; } } @media (min-width: 992px) { html.use-hover .widget.event-row article .info { background-color: transparent; transition: all 0.3s ease; -webkit-transform: translateY(140px); transform: translateY(140px); } } @media (min-width: 992px) { html.use-hover .widget.event-row article .info .hidden { position: relative; height: 140px; transition: all 0.3s ease; opacity: 0; visibility: hidden; } } /*section features with custom fields (eg. used throughout site*/ .media-display-full-left, .media-display-full-right { position: relative; display: -webkit-box; display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } @media (min-width: 992px) { .media-display-full-left, .media-display-full-right { -webkit-box-align: center; align-items: center; } } .media-display-full-left .rellax-corner, .media-display-full-right .rellax-corner { display: none; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; background-color: #ed8b00; } @media (min-width: 992px) { .media-display-full-left .rellax-corner, .media-display-full-right .rellax-corner { height: 270px; } } .media-display-full-left .column, .media-display-full-right .column { position: relative; top: auto; width: 100%; min-height: 1px; padding-right: 15px; padding-left: 15px; -webkit-box-flex: 0; flex: 0 0 100%; max-width: 100%; margin: 0 auto; } @media (min-width: 576px) { .media-display-full-left .column, .media-display-full-right .column { max-width: 540px; } } @media (min-width: 768px) { .media-display-full-left .column, .media-display-full-right .column { max-width: 720px; } } @media (min-width: 992px) { .media-display-full-left .column, .media-display-full-right .column { flex-basis: 0; -webkit-box-flex: 1; flex-grow: 1; max-width: 100%; margin: 0; } } @media (min-width: 992px) { .media-display-full-left .column.hasmedia, .media-display-full-right .column.hasmedia { -webkit-box-flex: 0; flex: 0 0 60%; max-width: 60%; } } @media (min-width: 992px) { .media-display-full-left .column.hasinfo, .media-display-full-right .column.hasinfo { -webkit-box-flex: 0; flex: 0 0 40%; max-width: 40%; } } .media-display-full-left .column .featured-content.nowidget, .media-display-full-right .column .featured-content.nowidget { background-color: #efefef; position: relative; } .media-display-full-left .column .featured-content.nowidget .featured-content-inner, .media-display-full-right .column .featured-content.nowidget .featured-content-inner { padding: 2rem; } @media (min-width: 992px) { .media-display-full-left .column .featured-content.nowidget .featured-content-inner, .media-display-full-right .column .featured-content.nowidget .featured-content-inner { max-width: 670px; min-height: 280px; padding: 4rem 2rem 4rem 4rem; } } html.clippaths .media-display-full-left .rellax-corner { display: block; bottom: -80px; -webkit-clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%); } html.clippaths .media-display-full-right .rellax-corner { display: block; bottom: -80px; -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%); } html.loaded .media-display-full-left.wowit .column, html.loaded .media-display-full-right.wowit .column { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility: hidden; -webkit-animation-delay: .3s; animation-delay: .3s; } html.loaded .media-display-full-left.wowit.animate .column.hasmedia { visibility: visible; -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } html.loaded .media-display-full-left.wowit.animate .column.hasinfo { visibility: visible; -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } html.loaded .media-display-full-right.wowit.animate .column.hasmedia { visibility: visible; -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } html.loaded .media-display-full-right.wowit.animate .column.hasinfo { visibility: visible; -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @media (min-width: 992px) { .content-section .container-fluid .media-display-full-left .column.hasmedia { padding-left: 0; padding-right: 30px; } } @media (min-width: 992px) { .content-section .container-fluid .media-display-full-left .column.hasinfo { padding-left: 30px; padding-right: 0; } } @media (min-width: 992px) { .content-section .container-fluid .media-display-full-left .column-info { margin-right: 35%; margin-right: calc(140% - 1020px / 2); } } @media (min-width: 1200px) { .content-section .container-fluid .media-display-full-left .column-info { margin-right: calc(140% - 1130px / 2); } } @media (max-width: 767.98px) { .content-section .container-fluid .media-display-full-left .column-info { padding: 3rem 0 0 0; } } @media (min-width: 992px) { .media-display-full-right .column.hasmedia { -webkit-box-ordinal-group: 14; order: 13; } } @media (min-width: 992px) { .content-section .container-fluid .media-display-full-right .column.hasmedia { padding-right: 0; padding-left: 30px; } } @media (min-width: 992px) { .content-section .container-fluid .media-display-full-right .column.hasinfo { padding-right: 30px; padding-left: 0; } } @media (min-width: 992px) { .content-section .container-fluid .media-display-full-right .column-info { margin-left: 35%; margin-left: calc(140% - 1020px / 2); } } @media (min-width: 1200px) { .content-section .container-fluid .media-display-full-right .column-info { margin-left: calc(140% - 1130px / 2); } } @media (max-width: 991.98px) { .content-section .container-fluid .media-display-full-right .column-info { padding: 3rem 0 0 0; } } body.no-content:not(.no-billboard):not(.billboard-player) .content-section.pos-1 .container-fluid .media-display-full-left, body.no-content:not(.no-billboard):not(.billboard-player) .content-section.pos-1 .container-fluid .media-display-full-right { top: -80px; margin-bottom: -80px; } @media (min-width: 992px) { body.no-content:not(.no-billboard):not(.billboard-player) .content-section.pos-1 .container-fluid .media-display-full-left, body.no-content:not(.no-billboard):not(.billboard-player) .content-section.pos-1 .container-fluid .media-display-full-right { top: -140px; margin-bottom: -140px; -webkit-box-align: flex-start; align-items: flex-start; } } @media (min-width: 1200px) { body.no-content:not(.no-billboard):not(.billboard-player) .content-section.pos-1 .container-fluid .media-display-full-left, body.no-content:not(.no-billboard):not(.billboard-player) .content-section.pos-1 .container-fluid .media-display-full-right { top: -120px; margin-bottom: -120px; } } body.no-content:not(.no-billboard):not(.billboard-player) .content-section.pos-1 .container-fluid .media-display-full-left .column-info, body.no-content:not(.no-billboard):not(.billboard-player) .content-section.pos-1 .container-fluid .media-display-full-right .column-info { padding-top: 60px; } @media (min-width: 992px) { body.no-content:not(.no-billboard):not(.billboard-player) .content-section.pos-1 .container-fluid .media-display-full-left .column-info, body.no-content:not(.no-billboard):not(.billboard-player) .content-section.pos-1 .container-fluid .media-display-full-right .column-info { padding-top: 120px; } } @media (min-width: 992px) { body.no-content:not(.no-billboard):not(.billboard-player) .content-section.pos-1 .container-fluid .media-display-full-left .column.nowidget .column-info, body.no-content:not(.no-billboard):not(.billboard-player) .content-section.pos-1 .container-fluid .media-display-full-right .column.nowidget .column-info { padding-top: 120px; } } body.no-content:not(.no-billboard):not(.billboard-player) .content-section.pos-1.has-share .container-fluid .media-display-full-left, body.no-content:not(.no-billboard):not(.billboard-player) .content-section.pos-1.has-share .container-fluid .media-display-full-right { top: 0; margin-bottom: 0; } @media (min-width: 768px) { body.no-content:not(.no-billboard):not(.billboard-player) .content-section.pos-1.has-share .container-fluid .media-display-full-left, body.no-content:not(.no-billboard):not(.billboard-player) .content-section.pos-1.has-share .container-fluid .media-display-full-right { top: 0; margin-bottom: 0; -webkit-box-align: flex-start; align-items: flex-start; } } @media (min-width: 1200px) { body.no-content:not(.no-billboard):not(.billboard-player) .content-section.pos-1.has-share .container-fluid .media-display-full-left, body.no-content:not(.no-billboard):not(.billboard-player) .content-section.pos-1.has-share .container-fluid .media-display-full-right { top: -120px; margin-bottom: -120px; } } body.no-content:not(.no-billboard):not(.billboard-player) .content-section.pos-1.has-share .container-fluid .media-display-full-left .column-info, body.no-content:not(.no-billboard):not(.billboard-player) .content-section.pos-1.has-share .container-fluid .media-display-full-right .column-info { position: relative; } @media (min-width: 1200px) { body.no-content:not(.no-billboard):not(.billboard-player) .content-section.pos-1.has-share .container-fluid .media-display-full-left .column-info, body.no-content:not(.no-billboard):not(.billboard-player) .content-section.pos-1.has-share .container-fluid .media-display-full-right .column-info { padding-top: 160px; } } /*map monklet for various monklets*/ #map_locations_widget { position: relative; width: 100%; height: 340px; background-color: #000000; } @media (min-width: 992px) { #map_locations_widget { height: 640px; } } #map_locations_widget img { max-width: none; } #map_locations_widget .infowindow { display: block; position: relative; background: #ffffff; } #map_locations_widget .infowindow:after { content: ""; position: absolute; top: 14px; left: -12px; height: 0; width: 0; position: absolute; pointer-events: none; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-right: 12px solid #ffffff; } #map_locations_widget .infowindow .info { padding: 20px; } #map_locations_widget .infowindow .info p { font-size: 1rem; } .media-display-full-left .column.hasmedia #map_locations_widget, .media-display-full-right .column.hasmedia #map_locations_widget { width: 100%; height: 248px; } @media (min-width: 768px) { .media-display-full-left .column.hasmedia #map_locations_widget, .media-display-full-right .column.hasmedia #map_locations_widget { height: 348px; } } @media (min-width: 992px) { .media-display-full-left .column.hasmedia #map_locations_widget, .media-display-full-right .column.hasmedia #map_locations_widget { height: 448px; } } /*section staff monklet*/ .widget.staff-row article { width: 100%; position: relative; display: -webkit-box; display: flex; flex-wrap: wrap; margin: 0; } @media (min-width: 992px) { .widget.staff-row article { background-color: #efefef; -webkit-box-align: center; align-items: center !important; } } .widget.staff-row .image, .widget.staff-row .info { position: relative; width: 100%; min-height: 1px; -webkit-box-flex: 0; flex: 0 0 100%; max-width: 100%; margin: 0 auto; } @media (min-width: 576px) { .widget.staff-row .image, .widget.staff-row .info { max-width: 540px; } } @media (min-width: 768px) { .widget.staff-row .image, .widget.staff-row .info { max-width: 720px; } } @media (min-width: 992px) { .widget.staff-row .image, .widget.staff-row .info { flex-basis: 0; -webkit-box-flex: 1; flex-grow: 1; max-width: 100%; margin: 0; } } .widget.staff-row .image { min-height: 270px; height: 100%; bottom: -1rem; z-index: 100; background-position: center center; background-repeat: no-repeat; background-size: cover; background-color: #a7a9ac; } @media (min-width: 992px) { .widget.staff-row .image { -webkit-box-flex: 0; flex: 0 0 40%; max-width: 40%; min-height: 360px; bottom: auto; padding-right: 15px; } } .widget.staff-row .info { background-color: #efefef; } @media (min-width: 992px) { .widget.staff-row .info { -webkit-box-flex: 0; flex: 0 0 60%; max-width: 60%; background-color: transparent; } } .widget.staff-row .info-inner { padding: 2.5rem 15px 1rem 15px; } @media (min-width: 992px) { .widget.staff-row .info-inner { padding: 2rem 0; } } @media (min-width: 992px) { .widget.staff-row article:nth-child(even) .image { -webkit-box-ordinal-group: 14; order: 13; padding-left: 15px; padding-right: 0; } } @media (min-width: 992px) { .widget.staff-row article:nth-child(even) .info { -webkit-box-ordinal-group: 0; order: -1; } } @media (min-width: 768px) { .dark .widget.staff-row article { background-color: #000000; } } .dark .widget.staff-row article .info { background-color: #000000; } @media (min-width: 768px) { .dark .widget.staff-row article .info { background-color: transparent; } } html.clippaths .widget.staff-row .image { -webkit-clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%); } html.clippaths .widget.staff-row article:nth-child(even) .image { -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%); } @media (min-width: 992px) { .content-section .container-fluid .widget.staff-row .info-inner { margin-right: 40%; margin-right: calc(89% - 1020px / 2); } } @media (min-width: 1200px) { .content-section .container-fluid .widget.staff-row .info-inner { margin-right: calc(89% - 1130px / 2); } } @media (min-width: 992px) { .content-section .container-fluid .widget.staff-row article:nth-child(even) .info-inner { margin-left: 40%; margin-left: calc(89% - 1020px / 2); } } @media (min-width: 1200px) { .content-section .container-fluid .widget.staff-row article:nth-child(even) .info-inner { margin-left: calc(89% - 1130px / 2); } } html.loaded .widget.staff-row article.wowit { -webkit-animation-duration: .3s; animation-duration: .3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility: hidden; -webkit-animation-delay: .3s; animation-delay: .3s; } html.loaded .widget.staff-row article.wowit .image, html.loaded .widget.staff-row article.wowit .info { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility: hidden; -webkit-animation-delay: .6s; animation-delay: .6s; } html.loaded .widget.staff-row article.wowit { visibility: visible; -webkit-animation-name: fadeIn; animation-name: fadeIn; } html.loaded .widget.staff-row article.wowit.animate .image { visibility: visible; -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } html.loaded .widget.staff-row article.wowit.animate .info { visibility: visible; -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } html.loaded .widget.staff-row article:nth-child(even).wowit.animate .image { visibility: visible; -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } html.loaded .widget.staff-row article:nth-child(even).wowit.animate .info { visibility: visible; -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } /*Instagram and simple slider using slick*/ .insta-heading i { display: inline-block; vertical-align: middle; } .insta-heading a { display: inline-block; vertical-align: middle; } .simple-slider, .simple-slider-horz { position: relative; visibility: hidden; opacity: 0; transition: opacity 0.3s ease; } .simple-slider.slick-initialized, .simple-slider-horz.slick-initialized { visibility: visible; opacity: 1; } .simple-slider .slick-list, .simple-slider-horz .slick-list { padding: 0; margin: 0; } .simple-slider article, .simple-slider-horz article { margin: 0 12px; } .simple-slider article a, .simple-slider-horz article a { display: block; } .simple-slider article a:after, .simple-slider-horz article a:after { display: none; } .simple-slider-horz { padding: 1.5rem 0; } .simple-slider-horz article { margin: 12px 0; } html.use-hover .simple-slider article, html.use-hover .simple-slider-horz article { position: relative; } html.use-hover .simple-slider article a, html.use-hover .simple-slider-horz article a { display: block; position: relative; } html.use-hover .simple-slider article a:hover img, html.use-hover .simple-slider-horz article a:hover img { -webkit-transform: scale(1.1); transform: scale(1.1); } html.use-hover .simple-slider article a img, html.use-hover .simple-slider-horz article a img { position: relative; transition: all 0.3s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: rotate(0) scale(1); transform: rotate(0) scale(1); z-index: 1; } .simple-slider .slick-dots, .simple-slider-horz .slick-dots { display: none !important; } .simple-slider .slick-prev, .simple-slider .slick-next, .simple-slider-horz .slick-prev, .simple-slider-horz .slick-next { position: absolute; display: block; line-height: 0px; font-size: 0px; cursor: pointer; background: transparent; color: transparent; padding: 0; border: none; outline: none; z-index: 100; color: #ed8b00; transition: opacity 0.3s ease; } .simple-slider .slick-prev:before, .simple-slider .slick-next:before, .simple-slider-horz .slick-prev:before, .simple-slider-horz .slick-next:before { font-family: 'icons' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 24px; transition: color 0.3s ease; } .simple-slider .slick-prev.slick-disabled:before, .simple-slider .slick-next.slick-disabled:before, .simple-slider-horz .slick-prev.slick-disabled:before, .simple-slider-horz .slick-next.slick-disabled:before { opacity: 0; } html.use-hover .simple-slider .slick-prev:hover, html.use-hover .simple-slider .slick-next:hover, html.use-hover .simple-slider-horz .slick-prev:hover, html.use-hover .simple-slider-horz .slick-next:hover { color: #000000; } .simple-slider .slick-prev { position: absolute; left: -1rem; top: 50%; margin-top: -.5rem; } @media (min-width: 992px) { .simple-slider .slick-prev { left: -1.5rem; } } .simple-slider .slick-prev:before { content: "\edc3"; } .simple-slider .slick-next { position: absolute; right: -1rem; top: 50%; margin-top: -.5rem; } @media (min-width: 992px) { .simple-slider .slick-next { right: -1.5rem; } } .simple-slider .slick-next:before { content: "\edbb"; } .simple-slider-horz .slick-prev { position: absolute; left: 50%; top: 0; margin-left: -.5rem; } .simple-slider-horz .slick-prev:before { content: "\edb8"; } .simple-slider-horz .slick-next { position: absolute; left: 50%; bottom: 0; margin-left: -.5rem; } .simple-slider-horz .slick-next:before { content: "\edc0"; } /*gallery monklet*/ .insert-gallery a { position: relative; display: block; overflow: hidden; background-color: #000000; } html.use-hover .insert-gallery a { display: block; position: relative; } html.use-hover .insert-gallery a:after { display: none; } html.use-hover .insert-gallery a img { position: relative; transition: all 0.3s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: scale(1, 1); transform: scale(1, 1); } html.use-hover .insert-gallery a:hover img { -webkit-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05); } /*social links via link list*/ .social-monklet { margin-bottom: 1rem; } .social-monklet ul { margin: 0 !important; padding: 0 !important; list-style: none; } .social-monklet ul li { display: inline-block; margin: 0 .5rem 0 0 !important; padding: 0 !important; list-style: none; } .social-monklet ul li a { position: relative; display: block; width: 32px; height: 32px; line-height: 32px; overflow: hidden; background-color: #ed8b00; color: #ffffff; border-radius: 50%; text-align: center; overflow: hidden; } .social-monklet ul li a:after { display: none; } .social-monklet ul li a i { display: block; position: relative; font-size: 1.125rem; position: relative; display: block; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } html.use-hover .widget.social ul li a:hover { background-color: #000000; color: #ffffff; } .social-monklet.large { margin-bottom: 1rem; } .social-monklet.large ul { margin: 0 !important; padding: 0 !important; list-style: none; } .social-monklet.large ul li { display: inline-block; margin: 0 1rem 0 0 !important; padding: 0 !important; list-style: none; } @media (min-width: 992px) { .social-monklet.large ul li { margin-right: 1.5rem !important; } } .social-monklet.large ul li:last-child { margin: 0 !important; } .social-monklet.large ul li a { position: relative; display: block; width: 100%; height: auto; line-height: 1; overflow: hidden; background-color: transparent; color: #ed8b00; border-radius: 0; text-align: center; overflow: hidden; } .social-monklet.large ul li a:after { display: none; } .social-monklet.large ul li a i { display: block; position: relative; font-size: 2rem; position: relative; display: block; top: auto; -webkit-transform: none; transform: none; } @media (min-width: 992px) { .social-monklet.large ul li a i { font-size: 2.5rem; } } html.use-hover .widget.social.large ul li a:hover { background-color: transparent; color: #000000; } .dark .social-monklet.large ul li a { color: #ffffff; } html.use-hover .dark .social-monklet.large ul li a:hover { color: #ffffff; opacity: .6; } .related-slider { position: relative; visibility: hidden; opacity: 0; transition: opacity 0.3s ease; } .related-slider.slick-initialized { visibility: visible; opacity: 1; } .related-slider .slick-list { padding: 0; margin: 0; } @media (min-width: 992px) { .related-slider .slick-list { padding: 0 120px 0 0; } } .related-slider article { margin: 0 40px; } @media (min-width: 992px) { .related-slider article { margin: 0 40px 0 0; } } .related-slider article a { display: block; background-color: #1f1f1f; } .related-slider article a:after { display: none; } .related-slider article a .info { padding: 1rem; min-height: 200px; } .related-slider article a h6 { color: #ed8b00; transition: color 0.3s ease; } .related-slider article a p { font-weight: 300; color: #ffffff; } html.use-hover .related-slider article a:hover { background-color: #ed8b00; } html.use-hover .related-slider article a:hover h6 { color: #ffffff; } .related-slider .slick-dots { display: none !important; } .related-slider .slick-prev, .related-slider .slick-next { position: absolute; display: block; line-height: 0px; font-size: 0px; cursor: pointer; background: transparent; color: transparent; padding: 0; border: none; outline: none; z-index: 100; color: #ed8b00; transition: opacity 0.3s ease; } .related-slider .slick-prev:before, .related-slider .slick-next:before { font-family: 'icons' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 24px; transition: color 0.3s ease; } .related-slider .slick-prev.slick-disabled:before, .related-slider .slick-next.slick-disabled:before { opacity: 0; } html.use-hover .related-slider .slick-prev:hover, html.use-hover .related-slider .slick-next:hover { color: #000000; } html.use-hover .dark .related-slider .slick-prev:hover, html.use-hover .dark .related-slider .slick-next:hover { color: #ffffff; } .related-slider .slick-prev { position: absolute; left: .25rem; top: 50%; margin-top: -.5rem; } @media (min-width: 992px) { .related-slider .slick-prev { right: 5.5rem; left: auto; top: -64px; margin: 0; } } .related-slider .slick-prev:before { content: "\edc3"; } .related-slider .slick-next { position: absolute; right: .25rem; top: 50%; margin-top: -.5rem; } @media (min-width: 992px) { .related-slider .slick-next { right: 2.5rem; top: -64px; margin: 0; } } .related-slider .slick-next:before { content: "\edbb"; } .widget.events-ministry { margin: 2rem 0; } .widget.events-ministry article { position: relative; width: 100%; display: -webkit-box; display: flex; flex-wrap: wrap; margin-bottom: 2rem; } @media (min-width: 992px) { .widget.events-ministry article { margin: 4rem 0; -webkit-box-align: center; align-items: center; } } .widget.events-ministry .image { position: relative; min-height: 1px; width: 100%; } @media (min-width: 992px) { .widget.events-ministry .image { width: 100%; flex-basis: 0; -webkit-box-flex: 1; flex-grow: 1; max-width: 100%; } } .widget.events-ministry .image .rellax-widget { display: none; position: absolute; left: -905%; width: 1000%; bottom: -80px; height: 160px; background-color: #ed8b00; z-index: -1; } @media (min-width: 768px) { .widget.events-ministry .image .rellax-widget { height: 270px; } } .widget.events-ministry .info { position: relative; min-height: 1px; width: 90%; margin: 0 5%; z-index: 100; } @media (min-width: 992px) { .widget.events-ministry .info { width: 100%; flex-basis: 0; -webkit-box-flex: 1; flex-grow: 1; max-width: 100%; margin: 0; } } .widget.events-ministry .info-inner { position: relative; top: -2rem; background-color: #efefef; padding: 2rem; } @media (min-width: 992px) { .widget.events-ministry .info-inner { top: auto; left: -2rem; } } @media (min-width: 992px) { .widget.events-ministry article:nth-child(even) .image { -webkit-box-ordinal-group: 14; order: 13; } } .widget.events-ministry article:nth-child(even) .image .rellax-widget { left: auto; right: -905%; } @media (min-width: 992px) { .widget.events-ministry article:nth-child(even) .info-inner { left: auto; right: -2rem; } } html.clippaths .events-ministry .image { z-index: 50; } html.clippaths .events-ministry .image .rellax-widget { display: block; -webkit-clip-path: polygon(0 0, 100% 0, 97.5% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 97.5% 100%, 0% 100%); } html.clippaths .events-ministry article:nth-child(even) .image .rellax-widget { -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 2.5% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 2.5% 100%); } .dark .widget.events-ministry .info-inner { background-color: #000000; } .widget.events-list-2 article { display: flex; position: relative; height: 100%; background-color: #ffffff; box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); } .widget.events-list-2 article .date { position: relative; width: 100%; flex: 0 0 74px; max-width: 74px; display: flex; align-items: center; background-color: #efefef; color: #000000; } .widget.events-list-2 article .date .date-inner { position: relative; width: 100%; max-width: 100%; } .widget.events-list-2 article .date .date-inner span { display: block; text-align: center; line-height: 1.1; } .widget.events-list-2 article .date .date-inner span.day { font-weight: 700; font-size: 1.875rem; } .widget.events-list-2 article .date .date-inner span.month { font-size: 1.25rem; letter-spacing: 1px; } .widget.events-list-2 article .info { position: relative; width: 100%; flex-basis: 0; flex-grow: 1; max-width: 100%; text-align: left; } .widget.events-list-2 .info p { } .widget.events-list-2 .info-inner { padding: 1rem; } .ministry-tabs { padding-top: 2rem; } .ministry-tabs-links { display: flex; flex-wrap: wrap; } .ministry-tabs-link { position: relative; flex: 0 0 100%; max-width: 100%; padding: 0 10px; margin-bottom: 2rem; } @media (min-width: 992px) { .ministry-tabs-link { flex-basis: 0; flex-grow: 1; margin-bottom: 0px; } } .ministry-tabs-links-link, .ministry-tabs-links-click { display: block; text-decoration: none; } .ministry-tabs-links-link:after, .ministry-tabs-links-click:after { display: none; } .ministry-tabs-links-link .image, .ministry-tabs-links-click .image { position: relative; } .ministry-tabs-links-link .image:before, .ministry-tabs-links-click .image:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #ed8b00; opacity: 0; visibility: hidden; transition: .2s; } .ministry-tabs-links-link:hover .image:before, .ministry-tabs-links-click.active .image:before, .ministry-tabs-links-click:hover .image:before { visibility: visible; opacity: .7; } @media (min-width: 992px) { .ministry-tabs-links-link .image, .ministry-tabs-links-click .image { height: 400px; } } .ministry-tabs-links-link .image img, .ministry-tabs-links-click .image img { display: block; width: 100%; height: auto; border-radius: 0; padding: 0; margin: 0; } @media (min-width: 992px) { .ministry-tabs-links-link .image img, .ministry-tabs-links-click .image img { height: 100% !important; object-fit: cover; } } .ministry-tabs-links-link h6, .ministry-tabs-links-click h6 { padding-top: .5rem; text-transform: uppercase; color: #a7a9ac; } .ministry-tabs-overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 100; visibility: hidden; opacity: 0; transition: .2s; } .ministry-tabs-links-link:hover .ministry-tabs-overlay, .ministry-tabs-links-click.active .ministry-tabs-overlay, .ministry-tabs-links-click:hover .ministry-tabs-overlay { visibility: visible; opacity: 1; } .ministry-tabs-overlay-inner { padding: 2rem; text-transform: uppercase; } .ministry-tabs-overlay-inner span { color: #ffffff; } /*================================================= i10 - Footer =================================================*/ #footer { position: relative; background-color: #000000; text-align: center; background-image: none; background-repeat: no-repeat; background-position: -60px 140%; background-size: 300px auto; z-index: 500; } @media (min-width: 992px) { #footer { background-image: url(/_assets/img/logos/logo-icon-footer.png); } } #footer p { font-size: .75rem; } #footer .social li a { display: block; position: relative; width: 30px; height: 30px; line-height: 30px; background-color: #ffffff; color: #000000; border-radius: 50%; text-align: center; overflow: hidden; } #footer .social li a:after { display: none !important; } #footer .social li a i { display: block; line-height: 30px; text-align: center; } #footer .social li a i.icon-play4 { font-size: 1.25rem; text-indent: 3px; } html.use-hover #footer .social li a:hover { background-color: #ed8b00; } /*================================================= i11 - Additional Plugins =================================================*/ /*Colorbox*/ /* Colorbox Core Style: The following CSS is consistent between example themes and should not be altered. */ #colorbox, #cboxOverlay, #cboxWrapper { position: absolute; top: 0; left: 0; z-index: 9999; overflow: hidden; -webkit-transform: translate3d(0, 0, 0); } #cboxWrapper { max-width: none; } #cboxOverlay { position: fixed; width: 100%; height: 100%; } #cboxMiddleLeft, #cboxBottomLeft { clear: left; } #cboxContent { position: relative; } #cboxLoadedContent { overflow: auto; -webkit-overflow-scrolling: touch; } #cboxTitle { margin: 0; } #cboxLoadingOverlay, #cboxLoadingGraphic { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow { cursor: pointer; } .cboxPhoto { float: left; margin: auto; border: 0; display: block; max-width: none; -ms-interpolation-mode: bicubic; } .cboxIframe { width: 100%; height: 100%; display: block; border: 0; padding: 0; margin: 0; } #colorbox, #cboxContent, #cboxLoadedContent { box-sizing: content-box; } /* User Style: Change the following styles to modify the appearance of Colorbox. They are ordered & tabbed in a way that represents the nesting of the generated HTML. */ #cboxOverlay { background: #000; opacity: 0.9; filter: alpha(opacity=90); } #colorbox { outline: 0; } #cboxContent { margin-top: 0; background: #000; } .cboxIframe { background: #fff; } #cboxError { padding: 50px; border: 1px solid #ccc; } #cboxLoadedContent { border: 0; padding: 30px; background: #fff; overflow: hidden; } #cboxTitle { position: absolute; top: -20px; left: 0; color: #ccc; } #cboxCurrent { position: absolute; top: -20px; right: 0px; color: #ccc; } #cboxLoadingGraphic { background: url(/_assets/img/colorbox/loading.gif) no-repeat center center; } /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */ #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose { border: 0; padding: 0; margin: 0; overflow: visible; width: auto; background: none; } /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */ #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active { outline: 0; } #cboxSlideshow { position: absolute; top: -20px; right: 90px; color: #fff; } #cboxPrevious { position: absolute; top: 50%; left: 5px; margin-top: -32px; background: url(/_assets/img/colorbox/controls.png) no-repeat top left; width: 28px; height: 65px; text-indent: -9999px; } #cboxPrevious:hover { background-position: bottom left; } #cboxNext { position: absolute; top: 50%; right: 5px; margin-top: -32px; background: url(/_assets/img/colorbox/controls.png) no-repeat top right; width: 28px; height: 65px; text-indent: -9999px; } #cboxNext:hover { background-position: bottom right; } #cboxClose { position: absolute; top: 4px; right: 10px; display: block; background: url(/_assets/img/colorbox/close.png) no-repeat center center; background-size: contain; width: 24px; height: 24px; text-indent: -9999px; } #cboxClose:hover { background-position: bottom center; } /*Cycle2*/ .cycle-ss, .cycle-slideshow { width: 100%; margin: 0; padding: 0; position: relative; overflow: hidden; } .cycle-ss .slide, .cycle-slideshow .slide { width: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; } .cycle-ss a, .cycle-slideshow a { position: relative; display: block; width: 100%; z-index: 100; } .cycle-ss a:after, .cycle-slideshow a:after { display: none; } .cycle-ss img, .cycle-slideshow img { display: block; width: 100%; height: auto; } .disabled { opacity: .5; filter: alpha(opacity=50); } .cycle-pager { position: absolute; bottom: 0; left: 0; text-align: center; width: 100%; z-index: 500; overflow: hidden; padding: 0; height: 24px; line-height: 24px; } @media (min-width: 992px) { .cycle-pager { bottom: 2rem; } } .cycle-pager span { font-size: 0; width: 14px; height: 14px; display: inline-block; background-color: #ffffff; border: 0; cursor: pointer; margin: 0 4px; opacity: 1; border-radius: 50%; transition: all 0.3s ease; } .cycle-pager span:hover { opacity: .5; } .cycle-pager span.cycle-pager-active { background-color: #ed8b00; opacity: 1; } .pager { display: none; visibility: hidden; position: absolute; font-size: 1.5em; top: 50%; margin-top: -.5em; color: #ffffff; z-index: 500; cursor: pointer; opacity: .5; transition: all 0.3s ease; } @media (min-width: 992px) { .pager { font-size: 3em; } } .pager:hover { opacity: 1; } .pager-prev { left: .5rem; } @media (min-width: 768px) { .pager-prev { left: 1rem; } } .pager-next { right: .5rem; } @media (min-width: 768px) { .pager-next { right: 1rem; } } .disabled { opacity: .5; filter: alpha(opacity=50); } .rotator { overflow: hidden; position: relative; width: 100%; transition: all 0.3s ease; min-height: 360px; } @media (min-width: 768px) { .rotator { min-height: 490px; } } @media (min-width: 1200px) { .rotator { min-height: 650px; } } .rotator .loading-rotator { display: inline-block; width: auto; position: absolute; top: 50%; left: 50%; margin-top: -10px; margin-left: -20px; } @media (min-width: 992px) { .rotator .loading-rotator { margin-top: -20px; margin-left: -35px; width: 70px; } } .rotator .slide { display: none; position: relative; width: 100%; background-repeat: no-repeat; background-position: center top; background-size: cover; height: 360px; } @media (min-width: 768px) { .rotator .slide { height: 490px; } } @media (min-width: 1200px) { .rotator .slide { height: 650px; } } .rotator .slide a { display: block; height: 100%; } .rotator .slide .caption { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; overflow-x: hidden; overflow-y: auto; } .rotator .slide .caption [class^="container"] { position: relative; top: 50%; padding: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .rotator .slide .inner { padding: 60px 0; } @media (min-width: 1200px) { .rotator .slide .inner { padding: 100px 0; } } .rotator .slide .inner .button-outline { margin: 0; } .rotator:hover .pager { visibility: visible; } .rotator .slide.playing .caption { display: none !important; } .rotator .slide .video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000; z-index: 400; } .rotator .slide .video iframe, .rotator .slide .video object, .rotator .slide .video embed, .rotator .slide .video video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0 !important; } .rotator .slide .video video { background-position: center center; background-size: cover; -o-object-fit: cover; object-fit: cover; } .js-rotator .loading-rotator { display: none; } .js-rotator .rotator { min-height: 0; height: auto; } .js-rotator .rotator .slide { display: block; } .js-rotator .cycle-ss { opacity: 1; } .js-rotator .pager { display: block; } /*jQuery UI*/ .ui-tabs-nav { margin: 0; } .ui-tabs-nav li { list-style: none; } .tabs, .tabs-linklist { display: none; } .tabs.ui-tabs, .tabs-linklist.ui-tabs { display: block; } .ui-tabs { position: relative; padding: 0; margin: 0 0 2rem 0; } #tabs, .ui-tabs-nav, .module-tabs { position: relative; width: 100%; padding: 0; margin: 0; text-align: left; list-style: none; background-color: transparent; } @media (min-width: 768px) { #tabs, .ui-tabs-nav, .module-tabs { display: -webkit-box; display: flex; } } #tabs:before, .ui-tabs-nav:before, .module-tabs:before { display: none; content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background-color: #a7a9ac; } @media (min-width: 768px) { #tabs:before, .ui-tabs-nav:before, .module-tabs:before { display: block; } } @media (min-width: 768px) { #tabs.centered, .ui-tabs-nav.centered, .module-tabs.centered { -webkit-box-pack: center; justify-content: center; } } #tabs li, .ui-tabs .ui-tabs-nav li, .module-tabs li { position: relative; top: auto; margin: 0; border: 0; padding: 0; white-space: nowrap; text-overflow: ellipsis; z-index: 100; border-radius: 0; } @media (min-width: 768px) { #tabs li, .ui-tabs .ui-tabs-nav li, .module-tabs li { margin: 0 1.5rem 0 0; } } #tabs li a, .ui-tabs .ui-tabs-nav .ui-tabs-anchor, .module-tabs li a { display: block; cursor: pointer; margin: 0; position: relative; text-align: left; padding: .5rem 1rem; border: 0; font-size: 1.25rem; color: #000000; font-weight: 700; outline: none; box-shadow: none; text-transform: none; text-decoration: none; border-bottom: 2px solid #a7a9ac; } @media (min-width: 768px) { #tabs li a, .ui-tabs .ui-tabs-nav .ui-tabs-anchor, .module-tabs li a { border-bottom: 0 !important; } } #tabs li a:after, .ui-tabs .ui-tabs-nav .ui-tabs-anchor:after, .module-tabs li a:after { display: none !important; } #tabs li a:before, .ui-tabs .ui-tabs-nav .ui-tabs-anchor:before, .module-tabs li a:before { display: none; content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background-color: #ed8b00; } @media (min-width: 768px) { #tabs li a:before, .ui-tabs .ui-tabs-nav .ui-tabs-anchor:before, .module-tabs li a:before { display: block; background-color: transparent; } } @media (min-width: 768px) { html.use-hover #tabs li a, html.use-hover .ui-tabs .ui-tabs-nav .ui-tabs-anchor, html.use-hover .module-tabs li a { padding-bottom: 22px; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @media (min-width: 768px) { html.use-hover #tabs li a:hover, html.use-hover .ui-tabs .ui-tabs-nav .ui-tabs-anchor:hover, html.use-hover .module-tabs li a:hover { color: #ed8b00; -webkit-transform: translate3d(0, 14px, 0); transform: translate3d(0, 14px, 0); } } .ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor { cursor: text; } .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor { cursor: pointer; } #tabs li.active a, .ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor, .module-tabs li a.active { color: #ed8b00; border-color: #ed8b00; outline: none; box-shadow: none; } #tabs li.active a:before, .ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor:before, .module-tabs li a.active:before { background-color: #ed8b00; } @media (min-width: 768px) { html.use-hover #tabs li.active a, html.use-hover .ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor, html.use-hover .module-tabs li a.active { -webkit-transform: translate3d(0, 14px, 0); transform: translate3d(0, 14px, 0); } } @media (min-width: 768px) { html.use-hover #tabs li.active a:before, html.use-hover .ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor:before, html.use-hover .module-tabs li a.active:before { bottom: 14px; } } .ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 2rem 0; background: none; line-height: 1.5em; border-radius: 0; border-bottom: 2px solid #a7a9ac; } .ui-tabs .ui-tabs-panel p:last-child { margin-bottom: 0; } .dark #tabs li a, .dark .ui-tabs .ui-tabs-nav .ui-tabs-anchor, .dark .module-tabs li a { color: #ffffff; } .ui-tabs.v2 { margin: 0; } .ui-tabs.v2 .ui-tabs-nav:before { display: none; } @media (min-width: 768px) { .ui-tabs.v2 .ui-tabs-nav {-webkit-box-pack: center; justify-content: center; } } @media (min-width: 992px) { .ui-tabs.v2 .ui-tabs-nav li { flex-basis: 0; -webkit-box-flex: 1; flex-grow: 1; max-width: 100%; } } .ui-tabs.v2 .ui-tabs-nav li { margin: 0 0 1rem 0; } @media (min-width: 768px) { .ui-tabs.v2 .ui-tabs-nav li { margin: 0 1.5rem 0 0; } } .ui-tabs.v2 .ui-tabs-nav .ui-tabs-anchor { text-align: center; text-transform: uppercase; background-color: #ed8b00; color: #ffffff; transform: none; border: 4px solid #ed8b00 !important; padding: .5rem 1rem !important; } .ui-tabs.v2 .ui-tabs-nav .ui-tabs-anchor:after { display: none !important; } .ui-tabs.v2 .ui-tabs-nav .ui-tabs-anchor:before { display: none !important; } .ui-tabs.v2 .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor { color: #ed8b00; background-color: transparent; -webkit-transform: none !important; transform: none !important; } @media (min-width: 768px) { html.use-hover .ui-tabs.v2 .ui-tabs-nav .ui-tabs-anchor:hover { color: #ed8b00; background-color: transparent; -webkit-transform: none; transform: none; } } .ui-tabs.v2 .ui-tabs-panel {border-bottom: 0; padding-top: 4rem; } .ui-tabs.v2 .ui-tabs-panel hr { margin-top: 3rem !important; margin-bottom: 3rem !important; } .ui-tabs.v2 .ui-tabs-panel blockquote:before { top: .5rem; } .ui-tabs.v2 .ui-tabs-panel blockquote:after { bottom: .5rem; } @media (min-width: 768px) { .ui-tabs.v2 .ui-tabs-panel blockquote { font-size: 2.25rem; } } .accordion { display: none; margin: 0 0 2rem 0; } .accordion.ui-accordion { display: block; } .accordion .ui-accordion-header { position: relative; padding: 1.25rem 3.5rem 1.25rem 0; cursor: pointer; background-color: transparent; font-size: 1.25rem; font-weight: 700; line-height: 1; color: #000000; transition: all 0.3s ease; margin: 0; outline: none; box-shadow: none; border-bottom: 2px solid #a7a9ac; } .accordion .ui-accordion-header .ui-accordion-header-icon { position: absolute; font-size: 1rem; right: 1.5rem; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .accordion .ui-accordion-header .ui-accordion-header-icon:before { font-family: 'icons' !important; content: "\edbf"; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-block; color: #ed8b00; } .accordion .ui-accordion-header.ui-accordion-header-active { outline: none; box-shadow: none; background-color: transparent; color: #000000; border-bottom-color: transparent; } .accordion .ui-accordion-header.ui-accordion-header-active .ui-accordion-header-icon:before { content: "\edb7"; } html.use-hover .accordion .ui-accordion-header:hover { color: #ed8b00; } .ui-accordion-content { position: relative; padding: 0 0 1.5rem 0; border-bottom: 2px solid transparent; } .ui-accordion-content.ui-accordion-content-active { border-bottom-color: #a7a9ac; } .ui-accordion-content p:last-of-type { margin-bottom: 1rem; } .ui-accordion-content ul:last-of-type { margin-bottom: 1rem; } .dark .accordion .ui-accordion-header { color: #ffffff; } .ui-selectmenu-button { display: block; position: relative; width: 200px; height: auto; line-height: 1; margin: 0; padding: 0; outline: none !important; text-decoration: none; cursor: pointer; background-color: #ffffff; border-bottom: 2px solid #a7a9ac; border-radius: 0; box-sizing: border-box; } .ui-selectmenu-button span.ui-icon { display: none !important; } .ui-selectmenu-button span.ui-selectmenu-text { position: relative; display: block; line-height: 48px; padding: 0 38px 0 4px; font-size: 1rem; font-weight: 400; color: #000000; overflow: hidden; text-align: left !important; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; vertical-align: bottom; } .ui-selectmenu-button span.icon { position: absolute; right: 0; top: 16px; text-align: right; color: #ed8b00; } .ui-selectmenu-button span.icon:before { font-family: 'icons' !important; content: "\edc0"; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-block; } .ui-selectmenu-button.ui-selectmenu-button-open { border-bottom-color: transparent; } .ui-selectmenu-button.ui-selectmenu-button-open span.icon:before { content: "\edb8"; } .ui-selectmenu-button.ui-state-disabled { cursor: default; opacity: .5; } .ui-selectmenu-button.ui-state-disabled span.icon-down { display: none; } .dark .ui-selectmenu-button { background-color: transparent; } .dark .ui-selectmenu-button span.ui-selectmenu-text { color: #ffffff; } .ui-selectmenu-menu { position: absolute; top: 0; left: 0; margin: 0 0 0 0; display: none; z-index: 999; } .ui-selectmenu-menu .ui-menu { position: relative; overflow: auto; overflow-x: hidden; margin: -2px 0 0 0; padding: 0; width: 100%; max-width: 200px; max-height: 300px !important; list-style: none; background-color: #ffffff; border: 2px solid #a7a9ac; box-sizing: border-box; } .ui-selectmenu-menu .ui-menu li { text-align: left; margin: 0; padding: .35rem .5rem .35rem 16px; list-style: none; outline: none; font-size: 1rem; font-weight: 400; cursor: pointer; color: #000000; transition: all 0.3s ease; } .ui-selectmenu-menu .ui-menu li:hover { color: #ffffff; background-color: #ed8b00; } body.flex-filters .ui-selectmenu-menu .ui-menu, body.flex-filters-form .ui-selectmenu-menu .ui-menu { max-width: 300px; } .ui-menu li:first-child { display: none !important; } .ui-selectmenu-open { display: block; } body.small-filters .ui-selectmenu-button { width: 172px; } body.small-filters .ui-selectmenu-menu .ui-menu { max-width: 172px; } .ui-tooltip { padding: 4px 8px; position: absolute; z-index: 9999; max-width: 300px; background-color: #000000; color: #ffffff; font-size: 13px; font-weight: 400; } body .ui-tooltip { border-width: 2px; } /*Lightgallery*/ /*! lightgallery - v1.6.0 - 2017-08-08 http://sachinchoolur.github.io/lightGallery/ Copyright (c) 2017 Sachin N; Licensed GPLv3 */ @font-face { font-family: 'lg'; src: url("/_assets/fonts/lightgallery/fonts/lg.eot?n1z373"); src: url("/_assets/fonts/lightgallery/fonts/lg.eot?#iefixn1z373") format("embedded-opentype"), url("/_assets/fonts/lightgallery/fonts/lg.woff?n1z373") format("woff"), url("/_assets/fonts/lightgallery/fonts/lg.ttf?n1z373") format("truetype"), url("/_assets/fonts/lightgallery/fonts/lg.svg?n1z373#lg") format("svg"); font-weight: normal; font-style: normal; } .lg-icon { font-family: 'lg'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .lg-actions .lg-next, .lg-actions .lg-prev { background-color: rgba(0, 0, 0, 0.45); border-radius: 2px; color: #999; cursor: pointer; display: block; font-size: 22px; margin-top: -10px; padding: 8px 10px 9px; position: absolute; top: 50%; z-index: 6080; border: none; outline: none; } .lg-actions .lg-next.disabled, .lg-actions .lg-prev.disabled { pointer-events: none; opacity: 0.5; } .lg-actions .lg-next:hover, .lg-actions .lg-prev:hover { color: #FFF; } .lg-actions .lg-next { right: 20px; } .lg-actions .lg-next:before { content: "\e095"; } .lg-actions .lg-prev { left: 20px; } .lg-actions .lg-prev:after { content: "\e094"; } @-webkit-keyframes lg-right-end { 0% { left: 0; } 50% { left: -30px; } 100% { left: 0; } } @keyframes lg-right-end { 0% { left: 0; } 50% { left: -30px; } 100% { left: 0; } } @-webkit-keyframes lg-left-end { 0% { left: 0; } 50% { left: 30px; } 100% { left: 0; } } @keyframes lg-left-end { 0% { left: 0; } 50% { left: 30px; } 100% { left: 0; } } .lg-outer.lg-right-end .lg-object { -webkit-animation: lg-right-end 0.3s; animation: lg-right-end 0.3s; position: relative; } .lg-outer.lg-left-end .lg-object { -webkit-animation: lg-left-end 0.3s; animation: lg-left-end 0.3s; position: relative; } .lg-toolbar { z-index: 6082; left: 0; position: absolute; top: 0; width: 100%; background-color: rgba(0, 0, 0, 0.45); } .lg-toolbar .lg-icon { color: #999; cursor: pointer; float: right; font-size: 24px; height: 47px; line-height: 27px; padding: 10px 0; text-align: center; width: 50px; text-decoration: none !important; outline: medium none; transition: color 0.2s linear; } .lg-toolbar .lg-icon:hover { color: #FFF; } .lg-toolbar .lg-close:after { content: "\e070"; } .lg-toolbar .lg-download:after { content: "\e0f2"; } .lg-sub-html { background-color: rgba(0, 0, 0, 0.45); bottom: 0; color: #EEE; font-size: 16px; left: 0; padding: 10px 40px; position: fixed; right: 0; text-align: center; z-index: 6080; } .lg-sub-html h4 { margin: 0; font-size: 13px; font-weight: bold; } .lg-sub-html p { font-size: 12px; margin: 5px 0 0; } #lg-counter { color: #999; display: inline-block; font-size: 16px; padding-left: 20px; padding-top: 12px; vertical-align: middle; } .lg-toolbar, .lg-prev, .lg-next { opacity: 1; transition: opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear, -webkit-transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s; transition: transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear; transition: transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear, -webkit-transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s; } .lg-hide-items .lg-prev { opacity: 0; -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } .lg-hide-items .lg-next { opacity: 0; -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } .lg-hide-items .lg-toolbar { opacity: 0; -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-object { -webkit-transform: scale3d(0.5, 0.5, 0.5); transform: scale3d(0.5, 0.5, 0.5); opacity: 0; transition: opacity 250ms cubic-bezier(0, 0, 0.25, 1), -webkit-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s !important; transition: transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important; transition: transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1), -webkit-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s !important; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); opacity: 1; } .lg-outer .lg-thumb-outer { background-color: #0D0A0A; bottom: 0; position: absolute; width: 100%; z-index: 6080; max-height: 350px; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s; transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s; transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s, -webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s; } .lg-outer .lg-thumb-outer.lg-grab .lg-thumb-item { cursor: -webkit-grab; cursor: -o-grab; cursor: -ms-grab; cursor: grab; } .lg-outer .lg-thumb-outer.lg-grabbing .lg-thumb-item { cursor: move; cursor: -webkit-grabbing; cursor: -o-grabbing; cursor: -ms-grabbing; cursor: grabbing; } .lg-outer .lg-thumb-outer.lg-dragging .lg-thumb { transition-duration: 0s !important; } .lg-outer.lg-thumb-open .lg-thumb-outer { -webkit-transform: translate3d(0, 0%, 0); transform: translate3d(0, 0%, 0); } .lg-outer .lg-thumb { padding: 10px 0; height: 100%; margin-bottom: -5px; } .lg-outer .lg-thumb-item { border-radius: 5px; cursor: pointer; float: left; overflow: hidden; height: 100%; border: 2px solid #FFF; border-radius: 4px; margin-bottom: 5px; } @media (min-width: 1025px) { .lg-outer .lg-thumb-item { transition: border-color 0.25s ease; } } .lg-outer .lg-thumb-item.active, .lg-outer .lg-thumb-item:hover { border-color: #a90707; } .lg-outer .lg-thumb-item img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .lg-outer.lg-has-thumb .lg-item { padding-bottom: 120px; } .lg-outer.lg-can-toggle .lg-item { padding-bottom: 0; } .lg-outer.lg-pull-caption-up .lg-sub-html { transition: bottom 0.25s ease; } .lg-outer.lg-pull-caption-up.lg-thumb-open .lg-sub-html { bottom: 100px; } .lg-outer .lg-toogle-thumb { background-color: #0D0A0A; border-radius: 2px 2px 0 0; color: #999; cursor: pointer; font-size: 24px; height: 39px; line-height: 27px; padding: 5px 0; position: absolute; right: 20px; text-align: center; top: -39px; width: 50px; } .lg-outer .lg-toogle-thumb:after { content: "\e1ff"; } .lg-outer .lg-toogle-thumb:hover { color: #FFF; } .lg-outer .lg-video-cont { display: inline-block; vertical-align: middle; max-width: 1140px; max-height: 100%; width: 100%; padding: 0 5px; } .lg-outer .lg-video { width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden; position: relative; } .lg-outer .lg-video .lg-object { display: inline-block; position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } .lg-outer .lg-video .lg-video-play { width: 84px; height: 59px; position: absolute; left: 50%; top: 50%; margin-left: -42px; margin-top: -30px; z-index: 6080; cursor: pointer; } .lg-outer .lg-has-vimeo .lg-video-play { background: url("/_assets/img/lightgallery/vimeo-play.png") no-repeat scroll 0 0 transparent; } .lg-outer .lg-has-vimeo:hover .lg-video-play { background: url("/_assets/img/lightgallery/vimeo-play.png") no-repeat scroll 0 -58px transparent; } .lg-outer .lg-has-html5 .lg-video-play { background: transparent url("/_assets/img/lightgallery/video-play.png") no-repeat scroll 0 0; height: 64px; margin-left: -32px; margin-top: -32px; width: 64px; opacity: 0.8; } .lg-outer .lg-has-html5:hover .lg-video-play { opacity: 1; } .lg-outer .lg-has-youtube .lg-video-play { background: url("/_assets/img/lightgallery/youtube-play.png") no-repeat scroll 0 0 transparent; } .lg-outer .lg-has-youtube:hover .lg-video-play { background: url("/_assets/img/lightgallery/youtube-play.png") no-repeat scroll 0 -60px transparent; } .lg-outer .lg-video-object { width: 100% !important; height: 100% !important; position: absolute; top: 0; left: 0; } .lg-outer .lg-has-video .lg-video-object { visibility: hidden; } .lg-outer .lg-has-video.lg-video-playing .lg-object, .lg-outer .lg-has-video.lg-video-playing .lg-video-play { display: none; } .lg-outer .lg-has-video.lg-video-playing .lg-video-object { visibility: visible; } .lg-progress-bar { background-color: #333; height: 5px; left: 0; position: absolute; top: 0; width: 100%; z-index: 6083; opacity: 0; transition: opacity 0.08s ease 0s; } .lg-progress-bar .lg-progress { background-color: #a90707; height: 5px; width: 0; } .lg-progress-bar.lg-start .lg-progress { width: 100%; } .lg-show-autoplay .lg-progress-bar { opacity: 1; } .lg-autoplay-button:after { content: "\e01d"; } .lg-show-autoplay .lg-autoplay-button:after { content: "\e01a"; } .lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-img-wrap, .lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-image { transition-duration: 0s; } .lg-outer.lg-use-transition-for-zoom .lg-item.lg-complete.lg-zoomable .lg-img-wrap { transition: -webkit-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, -webkit-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; } .lg-outer.lg-use-left-for-zoom .lg-item.lg-complete.lg-zoomable .lg-img-wrap { transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; } .lg-outer .lg-item.lg-complete.lg-zoomable .lg-img-wrap { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .lg-outer .lg-item.lg-complete.lg-zoomable .lg-image { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); transition: opacity 0.15s, -webkit-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s !important; transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important; transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s, -webkit-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s !important; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } #lg-zoom-in:after { content: "\e311"; } #lg-actual-size { font-size: 20px; } #lg-actual-size:after { content: "\e033"; } #lg-zoom-out { opacity: 0.5; pointer-events: none; } #lg-zoom-out:after { content: "\e312"; } .lg-zoomed #lg-zoom-out { opacity: 1; pointer-events: auto; } .lg-outer .lg-pager-outer { bottom: 60px; left: 0; position: absolute; right: 0; text-align: center; z-index: 6080; height: 10px; } .lg-outer .lg-pager-outer.lg-pager-hover .lg-pager-cont { overflow: visible; } .lg-outer .lg-pager-cont { cursor: pointer; display: inline-block; overflow: hidden; position: relative; vertical-align: top; margin: 0 5px; } .lg-outer .lg-pager-cont:hover .lg-pager-thumb-cont { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .lg-outer .lg-pager-cont.lg-pager-active .lg-pager { box-shadow: 0 0 0 2px white inset; } .lg-outer .lg-pager-thumb-cont { background-color: #fff; color: #FFF; bottom: 100%; height: 83px; left: 0; margin-bottom: 20px; margin-left: -60px; opacity: 0; padding: 5px; position: absolute; width: 120px; border-radius: 3px; transition: opacity 0.15s ease 0s, -webkit-transform 0.15s ease 0s; transition: opacity 0.15s ease 0s, transform 0.15s ease 0s; transition: opacity 0.15s ease 0s, transform 0.15s ease 0s, -webkit-transform 0.15s ease 0s; -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } .lg-outer .lg-pager-thumb-cont img { width: 100%; height: 100%; } .lg-outer .lg-pager { background-color: rgba(255, 255, 255, 0.5); border-radius: 50%; box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.7) inset; display: block; height: 12px; transition: box-shadow 0.3s ease 0s; width: 12px; } .lg-outer .lg-pager:hover, .lg-outer .lg-pager:focus { box-shadow: 0 0 0 8px white inset; } .lg-outer .lg-caret { border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px dashed; bottom: -10px; display: inline-block; height: 0; left: 50%; margin-left: -5px; position: absolute; vertical-align: middle; width: 0; } .lg-fullscreen:after { content: "\e20c"; } .lg-fullscreen-on .lg-fullscreen:after { content: "\e20d"; } .lg-outer #lg-dropdown-overlay { background-color: rgba(0, 0, 0, 0.25); bottom: 0; cursor: default; left: 0; position: fixed; right: 0; top: 0; z-index: 6081; opacity: 0; visibility: hidden; transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s; } .lg-outer.lg-dropdown-active .lg-dropdown, .lg-outer.lg-dropdown-active #lg-dropdown-overlay { transition-delay: 0s; -webkit-transform: translate3d(0, 0px, 0); transform: translate3d(0, 0px, 0); opacity: 1; visibility: visible; } .lg-outer.lg-dropdown-active #lg-share { color: #FFF; } .lg-outer .lg-dropdown { background-color: #fff; border-radius: 2px; font-size: 14px; list-style-type: none; margin: 0; padding: 10px 0; position: absolute; right: 0; text-align: left; top: 50px; opacity: 0; visibility: hidden; -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); transition: visibility 0s linear 0.5s, opacity 0.18s linear 0s, -webkit-transform 0.18s linear 0s; transition: transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s; transition: transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s, -webkit-transform 0.18s linear 0s; } .lg-outer .lg-dropdown:after { content: ""; display: block; height: 0; width: 0; position: absolute; border: 8px solid transparent; border-bottom-color: #FFF; right: 16px; top: -16px; } .lg-outer .lg-dropdown > li:last-child { margin-bottom: 0px; } .lg-outer .lg-dropdown > li:hover a, .lg-outer .lg-dropdown > li:hover .lg-icon { color: #333; } .lg-outer .lg-dropdown a { color: #333; display: block; white-space: pre; padding: 4px 12px; font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 12px; } .lg-outer .lg-dropdown a:hover { background-color: rgba(0, 0, 0, 0.07); } .lg-outer .lg-dropdown .lg-dropdown-text { display: inline-block; line-height: 1; margin-top: -3px; vertical-align: middle; } .lg-outer .lg-dropdown .lg-icon { color: #333; display: inline-block; float: none; font-size: 20px; height: auto; line-height: 1; margin-right: 8px; padding: 0; vertical-align: middle; width: auto; } .lg-outer #lg-share { position: relative; } .lg-outer #lg-share:after { content: "\e80d"; } .lg-outer #lg-share-facebook .lg-icon { color: #3b5998; } .lg-outer #lg-share-facebook .lg-icon:after { content: "\e901"; } .lg-outer #lg-share-twitter .lg-icon { color: #00aced; } .lg-outer #lg-share-twitter .lg-icon:after { content: "\e904"; } .lg-outer #lg-share-googleplus .lg-icon { color: #dd4b39; } .lg-outer #lg-share-googleplus .lg-icon:after { content: "\e902"; } .lg-outer #lg-share-pinterest .lg-icon { color: #cb2027; } .lg-outer #lg-share-pinterest .lg-icon:after { content: "\e903"; } .lg-group:after { content: ""; display: table; clear: both; } .lg-outer { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 6050; text-align: left; opacity: 0; transition: opacity 0.15s ease 0s; } .lg-outer * { box-sizing: border-box; } .lg-outer.lg-visible { opacity: 1; } .lg-outer.lg-css3 .lg-item.lg-prev-slide, .lg-outer.lg-css3 .lg-item.lg-next-slide, .lg-outer.lg-css3 .lg-item.lg-current { transition-duration: inherit !important; transition-timing-function: inherit !important; } .lg-outer.lg-css3.lg-dragging .lg-item.lg-prev-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-next-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-current { transition-duration: 0s !important; opacity: 1; } .lg-outer.lg-grab img.lg-object { cursor: -webkit-grab; cursor: -o-grab; cursor: -ms-grab; cursor: grab; } .lg-outer.lg-grabbing img.lg-object { cursor: move; cursor: -webkit-grabbing; cursor: -o-grabbing; cursor: -ms-grabbing; cursor: grabbing; } .lg-outer .lg { height: 100%; width: 100%; position: relative; overflow: hidden; margin-left: auto; margin-right: auto; max-width: 100%; max-height: 100%; } .lg-outer .lg-inner { width: 100%; height: 100%; position: absolute; left: 0; top: 0; white-space: nowrap; } .lg-outer .lg-item { background: url("/_assets/img/lightgallery/loading.gif") no-repeat scroll center center transparent; display: none !important; } .lg-outer.lg-css3 .lg-prev-slide, .lg-outer.lg-css3 .lg-current, .lg-outer.lg-css3 .lg-next-slide { display: inline-block !important; } .lg-outer.lg-css .lg-current { display: inline-block !important; } .lg-outer .lg-item, .lg-outer .lg-img-wrap { display: inline-block; text-align: center; position: absolute; width: 100%; height: 100%; } .lg-outer .lg-item:before, .lg-outer .lg-img-wrap:before { content: ""; display: inline-block; height: 50%; width: 1px; margin-right: -1px; } .lg-outer .lg-img-wrap { position: absolute; padding: 0 5px; left: 0; right: 0; top: 0; bottom: 0; } .lg-outer .lg-item.lg-complete { background-image: none; } .lg-outer .lg-item.lg-current { z-index: 6060; } .lg-outer .lg-image { display: inline-block; vertical-align: middle; max-width: 100%; max-height: 100%; width: auto !important; height: auto !important; } .lg-outer.lg-show-after-load .lg-item .lg-object, .lg-outer.lg-show-after-load .lg-item .lg-video-play { opacity: 0; transition: opacity 0.15s ease 0s; } .lg-outer.lg-show-after-load .lg-item.lg-complete .lg-object, .lg-outer.lg-show-after-load .lg-item.lg-complete .lg-video-play { opacity: 1; } .lg-outer .lg-empty-html { display: none; } .lg-outer.lg-hide-download #lg-download { display: none; } .lg-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 6040; background-color: #000; opacity: 0; transition: opacity 0.15s ease 0s; } .lg-backdrop.in { opacity: 1; } .lg-css3.lg-no-trans .lg-prev-slide, .lg-css3.lg-no-trans .lg-next-slide, .lg-css3.lg-no-trans .lg-current { transition: none 0s ease 0s !important; } .lg-css3.lg-use-css3 .lg-item { -webkit-backface-visibility: hidden; backface-visibility: hidden; } .lg-css3.lg-use-left .lg-item { -webkit-backface-visibility: hidden; backface-visibility: hidden; } .lg-css3.lg-fade .lg-item { opacity: 0; } .lg-css3.lg-fade .lg-item.lg-current { opacity: 1; } .lg-css3.lg-fade .lg-item.lg-prev-slide, .lg-css3.lg-fade .lg-item.lg-next-slide, .lg-css3.lg-fade .lg-item.lg-current { transition: opacity 0.1s ease 0s; } .lg-css3.lg-slide.lg-use-css3 .lg-item { opacity: 0; } .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current { transition: opacity 0.1s ease 0s, -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s; transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s, -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s; } .lg-css3.lg-slide.lg-use-left .lg-item { opacity: 0; position: absolute; left: 0; } .lg-css3.lg-slide.lg-use-left .lg-item.lg-prev-slide { left: -100%; } .lg-css3.lg-slide.lg-use-left .lg-item.lg-next-slide { left: 100%; } .lg-css3.lg-slide.lg-use-left .lg-item.lg-current { left: 0; opacity: 1; } .lg-css3.lg-slide.lg-use-left .lg-item.lg-prev-slide, .lg-css3.lg-slide.lg-use-left .lg-item.lg-next-slide, .lg-css3.lg-slide.lg-use-left .lg-item.lg-current { transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; } /*Slick*/ /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; left: 0; top: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { content: ""; display: table; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { float: left; height: 100%; min-height: 1px; display: none; } [dir="rtl"] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } /*Media Element*/ .mejs-custom { position: relative; } .mejs-custom a:after { display: none; } /* Accessibility: hide screen reader texts (and prefer "top" for RTL languages). Reference: http://blog.rrwd.nl/2015/04/04/the-screen-reader-text-class-why-and-how/ */ .mejs__offscreen { border: 0; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal; } .mejs__container { background: #000; box-sizing: border-box; font-family: 'Helvetica', Arial, serif; position: relative; text-align: left; text-indent: 0; vertical-align: top; } .mejs__container * { box-sizing: border-box; } /* Hide native play button and control bar from iOS to favor plugin button */ .mejs__container video::-webkit-media-controls, .mejs__container video::-webkit-media-controls-panel, .mejs__container video::-webkit-media-controls-panel-container, .mejs__container video::-webkit-media-controls-start-playback-button { -webkit-appearance: none; display: none !important; } .mejs__fill-container, .mejs__fill-container .mejs__container { height: 100%; width: 100%; } .mejs__fill-container { background: #000; margin: 0 auto; overflow: hidden; position: relative; } .mejs__container:focus { outline: none; } .mejs__iframe-overlay { height: 100%; position: absolute; width: 100%; } .mejs__embed, .mejs__embed body { background: none; height: 100%; margin: 0; overflow: hidden; padding: 0; width: 100%; } .mejs__fullscreen { overflow: hidden !important; } .mejs__container-fullscreen { bottom: 0; left: 0; overflow: hidden; position: fixed; right: 0; top: 0; z-index: 1000; } .mejs__container-fullscreen .mejs__mediaelement, .mejs__container-fullscreen video { height: 100% !important; width: 100% !important; } /* Start: LAYERS */ .mejs__background { left: 0; position: absolute; top: 0; } .mejs__mediaelement { height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 0; } .mejs__poster { background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; left: 0; position: absolute; top: 0; z-index: 1; } :root .mejs__poster-img { display: none; } .mejs__poster-img { border: 0; padding: 0; } .mejs__overlay { -webkit-box-align: center; align-items: center; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; left: 0; position: absolute; top: 0; } .mejs__layer { z-index: 1; } .mejs__overlay-play { cursor: pointer; } .mejs__overlay-button { background: url("/_assets/js/lib/mediaelement/build/mejs-controls.svg") no-repeat; background-position: 0 -39px; height: 80px; width: 80px; } .mejs__overlay:hover > .mejs__overlay-button { background-position: -80px -39px; } .mejs__overlay-loading { height: 80px; width: 80px; } .mejs__overlay-loading-bg-img { -webkit-animation: mejs__loading-spinner 1s linear infinite; animation: mejs__loading-spinner 1s linear infinite; background: transparent url("/_assets/js/lib/mediaelement/build/mejs-controls.svg") -160px -40px no-repeat; display: block; height: 80px; width: 80px; z-index: 1; } @-webkit-keyframes mejs__loading-spinner { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes mejs__loading-spinner { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* End: LAYERS */ /* Start: CONTROL BAR */ .mejs__controls { bottom: 0; display: -webkit-box; display: flex; height: 40px; left: 0; list-style-type: none; margin: 0; padding: 0 10px; position: absolute; width: 100%; z-index: 3; } .mejs__controls:not([style*='display: none']) { background: rgba(255, 0, 0, 0.7); background: linear-gradient(transparent, rgba(0, 0, 0, 0.35)); } .mejs__button, .mejs__time, .mejs__time-rail { font-size: 10px; height: 40px; line-height: 10px; margin: 0; width: 32px; } .mejs__button > button { background: transparent url("/_assets/js/lib/mediaelement/build/mejs-controls.svg"); border: 0; cursor: pointer; display: block; font-size: 0; height: 20px; line-height: 0; margin: 10px 6px; overflow: hidden; padding: 0; position: absolute; text-decoration: none; width: 20px; } /* :focus for accessibility */ .mejs__button > button:focus { outline: dotted 1px #999; } .mejs__container-keyboard-inactive a, .mejs__container-keyboard-inactive a:focus, .mejs__container-keyboard-inactive button, .mejs__container-keyboard-inactive button:focus, .mejs__container-keyboard-inactive [role=slider], .mejs__container-keyboard-inactive [role=slider]:focus { outline: 0; } /* End: CONTROL BAR */ /* Start: Time (Current / Duration) */ .mejs__time { box-sizing: content-box; color: #fff; font-size: 11px; font-weight: bold; height: 24px; overflow: hidden; padding: 16px 6px 0; text-align: center; width: auto; } /* End: Time (Current / Duration) */ /* Start: Play/Pause/Stop */ .mejs__play > button { background-position: 0 0; } .mejs__pause > button { background-position: -20px 0; } .mejs__replay > button { background-position: -160px 0; } /* End: Play/Pause/Stop */ /* Start: Progress Bar */ .mejs__time-rail { direction: ltr; -webkit-box-flex: 1; flex-grow: 1; height: 40px; margin: 0 10px; padding-top: 10px; position: relative; } .mejs__time-total, .mejs__time-buffering, .mejs__time-loaded, .mejs__time-current, .mejs__time-float, .mejs__time-hovered, .mejs__time-float-current, .mejs__time-float-corner, .mejs__time-marker { border-radius: 2px; cursor: pointer; display: block; height: 10px; position: absolute; } .mejs__time-total { background: rgba(255, 255, 255, 0.3); margin: 5px 0 0; width: 100%; } .mejs__time-buffering { -webkit-animation: buffering-stripes 2s linear infinite; animation: buffering-stripes 2s linear infinite; background: linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent); background-size: 15px 15px; width: 100%; } @-webkit-keyframes buffering-stripes { from { background-position: 0 0; } to { background-position: 30px 0; } } @keyframes buffering-stripes { from { background-position: 0 0; } to { background-position: 30px 0; } } .mejs__time-loaded { background: rgba(255, 255, 255, 0.3); } .mejs__time-current, .mejs__time-handle-content { background: rgba(255, 255, 255, 0.9); } .mejs__time-hovered { background: rgba(255, 255, 255, 0.5); z-index: 10; } .mejs__time-hovered.negative { background: rgba(0, 0, 0, 0.2); } .mejs__time-current, .mejs__time-buffering, .mejs__time-loaded, .mejs__time-hovered { left: 0; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 0; transform-origin: 0 0; transition: 0.15s ease-in all; width: 100%; } .mejs__time-buffering { -webkit-transform: scaleX(1); transform: scaleX(1); } .mejs__time-hovered { transition: height 0.1s cubic-bezier(0.44, 0, 1, 1); } .mejs__time-hovered.no-hover { -webkit-transform: scaleX(0) !important; transform: scaleX(0) !important; } .mejs__time-handle, .mejs__time-handle-content { border: 4px solid transparent; cursor: pointer; left: 0; position: absolute; -webkit-transform: translateX(0); transform: translateX(0); z-index: 11; } .mejs__time-handle-content { border: 4px solid rgba(255, 255, 255, 0.9); border-radius: 50%; height: 10px; left: -7px; top: -4px; -webkit-transform: scale(0); transform: scale(0); width: 10px; } .mejs__time-rail:hover .mejs__time-handle-content, .mejs__time-rail .mejs__time-handle-content:focus, .mejs__time-rail .mejs__time-handle-content:active { -webkit-transform: scale(1); transform: scale(1); } .mejs__time-float { background: #eee; border: solid 1px #333; bottom: 100%; color: #111; display: none; height: 17px; margin-bottom: 9px; position: absolute; text-align: center; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 36px; } .mejs__time-float-current { display: block; left: 0; margin: 2px; text-align: center; width: 30px; } .mejs__time-float-corner { border: solid 5px #eee; border-color: #eee transparent transparent; border-radius: 0; display: block; height: 0; left: 50%; line-height: 0; position: absolute; top: 100%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 0; } .mejs__long-video .mejs__time-float { margin-left: -23px; width: 64px; } .mejs__long-video .mejs__time-float-current { width: 60px; } .mejs__broadcast { color: #fff; height: 10px; position: absolute; top: 15px; width: 100%; } /* End: Progress Bar */ /* Start: Fullscreen */ .mejs__fullscreen-button > button { background-position: -80px 0; } .mejs__unfullscreen > button { background-position: -100px 0; } /* End: Fullscreen */ /* Start: Mute/Volume */ .mejs__mute > button { background-position: -60px 0; } .mejs__unmute > button { background-position: -40px 0; } .mejs__volume-button { position: relative; } .mejs__volume-button > .mejs__volume-slider { -webkit-backface-visibility: hidden; background: rgba(50, 50, 50, 0.7); border-radius: 0; bottom: 100%; display: none; height: 115px; left: 50%; margin: 0; position: absolute; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 25px; z-index: 1; } .mejs__volume-button:hover { border-radius: 0 0 4px 4px; } .mejs__volume-total { background: rgba(255, 255, 255, 0.5); height: 100px; left: 50%; margin: 0; position: absolute; top: 8px; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 2px; } .mejs__volume-current { background: rgba(255, 255, 255, 0.9); left: 0; margin: 0; position: absolute; width: 100%; } .mejs__volume-handle { background: rgba(255, 255, 255, 0.9); border-radius: 1px; cursor: ns-resize; height: 6px; left: 50%; position: absolute; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 16px; } .mejs__horizontal-volume-slider { display: block; height: 36px; position: relative; vertical-align: middle; width: 56px; } .mejs__horizontal-volume-total { background: rgba(50, 50, 50, 0.8); border-radius: 2px; font-size: 1px; height: 8px; left: 0; margin: 0; padding: 0; position: absolute; top: 16px; width: 50px; } .mejs__horizontal-volume-current { background: rgba(255, 255, 255, 0.8); border-radius: 2px; font-size: 1px; height: 100%; left: 0; margin: 0; padding: 0; position: absolute; top: 0; width: 100%; } .mejs__horizontal-volume-handle { display: none; } /* End: Mute/Volume */ /* Start: Track (Captions and Chapters) */ .mejs__captions-button, .mejs__chapters-button { position: relative; } .mejs__captions-button > button { background-position: -140px 0; } .mejs__chapters-button > button { background-position: -180px 0; } .mejs__captions-button > .mejs__captions-selector, .mejs__chapters-button > .mejs__chapters-selector { background: rgba(50, 50, 50, 0.7); border: solid 1px transparent; border-radius: 0; bottom: 100%; margin-right: -43px; overflow: hidden; padding: 0; position: absolute; right: 50%; visibility: visible; width: 86px; } .mejs__chapters-button > .mejs__chapters-selector { margin-right: -55px; width: 110px; } .mejs__captions-selector-list, .mejs__chapters-selector-list { list-style-type: none !important; margin: 0; overflow: hidden; padding: 0; } .mejs__captions-selector-list-item, .mejs__chapters-selector-list-item { color: #fff; cursor: pointer; display: block; list-style-type: none !important; margin: 0 0 6px; overflow: hidden; padding: 0; } .mejs__captions-selector-list-item:hover, .mejs__chapters-selector-list-item:hover { background-color: #c8c8c8 !important; background-color: rgba(255, 255, 255, 0.4) !important; } .mejs__captions-selector-input, .mejs__chapters-selector-input { clear: both; float: left; left: -1000px; margin: 3px 3px 0 5px; position: absolute; } .mejs__captions-selector-label, .mejs__chapters-selector-label { cursor: pointer; float: left; font-size: 10px; line-height: 15px; padding: 4px 10px 0; width: 100%; } .mejs__captions-selected, .mejs__chapters-selected { color: #21f8f8; } .mejs__captions-translations { font-size: 10px; margin: 0 0 5px; } .mejs__captions-layer { bottom: 0; color: #fff; font-size: 16px; left: 0; line-height: 20px; position: absolute; text-align: center; } .mejs__captions-layer a { color: #fff; text-decoration: underline; } .mejs__captions-layer[lang=ar] { font-size: 20px; font-weight: normal; } .mejs__captions-position { bottom: 15px; left: 0; position: absolute; width: 100%; } .mejs__captions-position-hover { bottom: 35px; } .mejs__captions-text, .mejs__captions-text * { background: rgba(20, 20, 20, 0.5); box-shadow: 5px 0 0 rgba(20, 20, 20, 0.5), -5px 0 0 rgba(20, 20, 20, 0.5); padding: 0; white-space: pre-wrap; } .mejs__container.mejs__hide-cues video::-webkit-media-text-track-container { display: none; } /* End: Track (Captions and Chapters) */ /* Start: Error */ .mejs__overlay-error { position: relative; } .mejs__overlay-error > img { left: 0; max-width: 100%; position: absolute; top: 0; z-index: -1; } .mejs__cannotplay, .mejs__cannotplay a { color: #fff; font-size: 0.8em; } .mejs__cannotplay { position: relative; } .mejs__cannotplay p, .mejs__cannotplay a { display: inline-block; padding: 0 15px; width: 100%; } /* End: Error */ .mejs-custom.audio .mejs__container, .mejs-custom.audio .mejs__fill-container, .mejs-custom.audio .mejs__controls { background: none; } .mejs-custom.audio .mejs__time.mejs__currenttime-container, .mejs-custom.audio .mejs__button.mejs__volume-button, .mejs-custom.audio .mejs__horizontal-volume-slider { display: none; } .mejs-custom.audio .mejs__time-total { border-radius: 16px; } .mejs-custom.audio .mejs__time-buffering, .mejs-custom.audio .mejs__time-hovered { border-radius: 16px; } .mejs-custom.audio .mejs__time-total.mejs__time-slider { background: rgba(167, 169, 172, 0.5); border-radius: 16px; } .mejs-custom.audio .mejs__time-loaded { background: #ffffff; border-radius: 16px; } .mejs-custom.audio .mejs__time { font-weight: 400; font-size: 14px; } .mejs-custom.audio .mejs__time-current { background: #ed8b00; border-radius: 16px; } .mejs-custom.audio .mejs__time-handle-content { border: 4px solid #ed8b00; background: #ed8b00; border-radius: 50%; height: 20px; top: -9px; width: 20px; -webkit-transform: scale(1); transform: scale(1); } .mejs-custom.audio .mejs__play > button { background: none; height: 32px; margin: 3px 12px 0px 0px; width: 32px; } .mejs-custom.audio .mejs__play > button:before { font-family: 'icons' !important; content: "\ed7e"; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 32px; color: #ed8b00; } .mejs-custom.audio .mejs__pause > button { background: none; height: 32px; margin: 3px 12px 0px 0px; width: 32px; } .mejs-custom.audio .mejs__pause > button:before { font-family: 'icons' !important; content: "\ed7f"; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 32px; color: #ed8b00; } .mejs-custom.audio .mejs__replay > button { background: none; height: 32px; margin: 3px 12px 0px 0px; width: 32px; } .mejs-custom.audio .mejs__replay > button:before { font-family: 'icons' !important; content: "\ed81"; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 32px; color: #ed8b00; } /*Animate*/ /*! animate.css -http://daneden.me/animate Version - 3.5.1 Licensed under the MIT license - http://opensource.org/licenses/MIT Copyright (c) 2016 Daniel Eden */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } .animated.flipOutX, .animated.flipOutY, .animated.bounceIn, .animated.bounceOut { -webkit-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes bounce { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } @keyframes bounce { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-webkit-keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } .headShake { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-name: headShake; animation-name: headShake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } @keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } .swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .tada { -webkit-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { from { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: none; transform: none; } } @keyframes wobble { from { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: none; transform: none; } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes jello { from, 11.1%, to { -webkit-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.39062deg) skewY(0.39062deg); transform: skewX(0.39062deg) skewY(0.39062deg); } 88.8% { -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); transform: skewX(-0.19531deg) skewY(-0.19531deg); } } @keyframes jello { from, 11.1%, to { -webkit-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.39062deg) skewY(0.39062deg); transform: skewX(0.39062deg) skewY(0.39062deg); } 88.8% { -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); transform: skewX(-0.19531deg) skewY(-0.19531deg); } } .jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: none; transform: none; } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } to { -webkit-transform: none; transform: none; } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { -webkit-transform: none; transform: none; } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); transform: perspective(400px) scale3d(0.95, 0.95, 0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); transform: perspective(400px) scale3d(0.95, 0.95, 0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedIn { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } to { -webkit-transform: none; transform: none; opacity: 1; } } @keyframes lightSpeedIn { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } to { -webkit-transform: none; transform: none; opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { from { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOut { from { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateIn { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { from { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } @keyframes rotateOut { from { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } @keyframes rotateOutDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } @keyframes rotateOutUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } @keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @keyframes rollOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } @-webkit-keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } @-webkit-keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } @-webkit-keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } @-webkit-keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } @-webkit-keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } @keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } .zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } .zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; } @-webkit-keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } @-webkit-keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } a.linked-image { position: relative; display: inline-block; box-sizing: border-box; text-decoration: none !important; transition: all 0.2s ease-in-out; overflow: hidden; border-radius: 5px; } a.linked-image.show-overlay:before { } a.linked-image.show-overlay .overlay { display: flex; } a.linked-image:after { display: none !important; } a.linked-image:before { display: block; content: ""; position: absolute; left: 0; top: 0; bottom: 0; right: 0; transition: all 0.2s ease-in-out; background-color: #ed8b00; opacity: 0; visibility: hidden; z-index: 10; } a.linked-image img { display: block; max-width: 100%; height: auto; position: relative; box-sizing: border-box; transition: all 0.2s ease-in-out; border-radius: 5px; } a.linked-image .overlay { display: flex; position: absolute; left: 0; top: 0; width: 100%; height: 100%; align-items: center; opacity: 0; visibility: hidden; transition: all 0.2s ease-in-out; border-radius: 5px; z-index: 20; transform: translateY(100px); } a.linked-image .overlay.top { align-items: flex-start; } a.linked-image .overlay.bottom { align-items: flex-end; } a.linked-image .overlay .overlay-inner { position: relative; padding: 2rem; width: 100%; flex: 0 0 100%; max-width: 100%; z-index: 150; text-align: center; color: #ffffff; } a.linked-image .overlay .overlay-inner h2, a.linked-image .overlay .overlay-inner h3, a.linked-image .overlay .overlay-inner h4, a.linked-image .overlay .overlay-inner h5, a.linked-image .overlay .overlay-inner h6 { margin: 0; color: #ffffff; } @media (hover: hover) { a.linked-image:hover .overlay { opacity: 1; visibility: visible; transform: translateY(0); } a.linked-image:hover:before { visibility: visible; opacity: .85; } } a.linked-image .button { position: relative; display: inline-block; line-height: 1.2; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin: 0; font-size: 1rem; text-transform: uppercase; font-weight: 700; border-radius: 0; transition: all 0.3s ease; text-decoration: none !important; outline: none; box-shadow: none; font-smoothing: antialiased !important; color: #ffffff; padding-left: 0; padding-right: 30px; padding-top: .25rem; padding-bottom: .25rem; margin-right: 40px; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } a.linked-image .button:after { content: ""; display: inline-block; position: absolute; right: 0; top: 10px; height: 10px; width: 10px; border-bottom-style: solid; border-bottom-width: 2px; border-right-style: solid; border-right-width: 2px; -webkit-transform: rotate(315deg); transform: rotate(315deg); border-color: #ffffff; outline: none; border-bottom-width: 2px; height: 10px; width: 10px; } a.linked-image .button:before { content: ""; position: absolute; right: 0; top: 14px; width: 16px; height: 2px; -webkit-transform-origin: bottom; transform-origin: bottom; background-color: #ffffff; outline: none; margin: 0; -webkit-transform: rotate(0); transform: rotate(0); }