@charset "UTF-8"; html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } input, textarea, button { border: none; outline: none; padding: 0; margin: 0; } input[type=search] { -webkit-appearance: none; } img, svg { display: block; } [href] { color: inherit; text-decoration: none; outline: none; cursor: pointer; } strong, b { font-weight: bold; } em { font-style: italic; } *:focus { box-shadow: none; outline: none; border: none; } * { -webkit-tap-highlight-color: transparent; } .screen_reader_only { display: none; } .preload { opacity: 0; } ::selection { background: rgba(228, 91, 37, 0.5); } footer .legal:after, .event_summary:after, .today_at_the_zoo:after, .today_at_the_zoo .today_calendar .heading:after, .event_calendar .heading:after { content: ''; display: block; clear: both; } header .logo, .nav_hamburger .label, .mobile_nav a, #wp_edit_post_button, footer .social a, main .the_content > div.heading .filters .month_filter #prev_month_button, main .the_content > div.heading .filters .month_filter #next_month_button { overflow: hidden; color: transparent; font-size: 0; text-indent: -1000em; } @keyframes pattern_motion { 0% { transform: translateY(0); } 100% { transform: translateY(-300px); } } @media (max-width: 1000px) { .desktop_only { display: none !important; } } @media (min-width: 1001px) { .mobile_only { display: none !important; } } .non_scrollable { overflow-y: hidden; } body { background: #1c2c32; } header { /* position: absolute; z-index: 101; */ position: fixed; z-index: 1; top: 0; left: 0; right: 0; height: 180px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } @media (max-width: 1000px) { header { position: absolute; height: 140px; } } @media (max-width: 600px) { header { height: 110px; } } header .logo { position: absolute; top: 58px; width: 115px; height: 64px; left: 120px; background: url('../../images/layout/logo.png?1519849566') no-repeat 0 0/auto 100%; } @media (max-width: 1200px) { header .logo { left: 80px; } } @media (max-width: 1000px) { header .logo { left: 50px; } } @media (max-width: 600px) { header .logo { left: 30px; } } @media (max-width: 1000px) { header .logo { top: 38px; } } @media (max-width: 600px) { header .logo { top: 28px; } } nav.header_nav { /* position: absolute; z-index: 102; */ position: fixed; z-index: 1; top: 38px; right: 120px; white-space: nowrap; text-align: right; } @media (max-width: 1200px) { nav.header_nav { right: 80px; } } @media (max-width: 1000px) { nav.header_nav { right: 50px; } } @media (max-width: 600px) { nav.header_nav { right: 30px; } } @media (min-width: 1001px) { nav.header_nav { animation: nav_hover_exit 0.3s linear forwards; } nav.header_nav:hover { z-index: 2; animation: none; } } @media (max-width: 1000px) { nav.header_nav { z-index: 102; top: 0; left: 0; right: 0; bottom: 0; overflow-x: hidden; white-space: nowrap; text-align: left; background: #e45b25; padding: 80px 0 120px 0; transform: translateX(100%); transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1); } } @media (max-width: 1000px) { nav.header_nav .nav_inner { position: relative; display: inline-block; vertical-align: middle; width: 100%; } } @media (min-width: 1001px) { nav.header_nav .nav_inner > ul { margin-right: -25px; } } @media (min-width: 1001px) and (max-width: 1200px) { nav.header_nav .nav_inner > ul { margin-right: -20px; } } @media (min-width: 1001px) { nav.header_nav .nav_inner > ul.secondary_items { position: absolute; top: 0; right: 0; } } @media (max-width: 1000px) { nav.header_nav .nav_inner > ul.secondary_items { padding: 0; margin: 0; margin-top: 30px; } } @media (max-width: 1000px) { nav.header_nav .nav_inner > ul.secondary_items .item { display: block; } } @media (min-width: 1001px) { nav.header_nav .nav_inner > ul.secondary_items .item > a, nav.header_nav .nav_inner > ul.secondary_items .item .mobile_only { position: relative; padding: 0 15px; line-height: 32px; border-radius: 32px; transition: background 0.3s, color 0.3s; } nav.header_nav .nav_inner > ul.secondary_items .item > a[data-active], nav.header_nav .nav_inner > ul.secondary_items .item .mobile_only[data-active] { font-size: 13px; } } @media (max-width: 1000px) { nav.header_nav .nav_inner > ul.secondary_items .item > a, nav.header_nav .nav_inner > ul.secondary_items .item .mobile_only { font-size: 14px; line-height: 30px; padding: 10px 16.66667%; } } @media (min-width: 1001px) { nav.header_nav .nav_inner > ul.secondary_items .item:hover > a, nav.header_nav .nav_inner > ul.secondary_items .item:hover .mobile_only { color: #fff; background: rgba(255, 255, 255, 0.2); } } nav.header_nav .nav_inner > ul.secondary_items .item:hover > .menu_outer.items-0 { height: 30px; } nav.header_nav .nav_inner > ul.secondary_items .item:hover > .menu_outer.items-1 { height: 70px; } nav.header_nav .nav_inner > ul.secondary_items .item:hover > .menu_outer.items-2 { height: 110px; } nav.header_nav .nav_inner > ul.secondary_items .item:hover > .menu_outer.items-3 { height: 150px; } nav.header_nav .nav_inner > ul.secondary_items .item:hover > .menu_outer.items-4 { height: 190px; } nav.header_nav .nav_inner > ul.secondary_items .item:hover > .menu_outer.items-5 { height: 230px; } nav.header_nav .nav_inner > ul.secondary_items .item:hover > .menu_outer.items-6 { height: 270px; } nav.header_nav .nav_inner > ul.secondary_items .item:hover > .menu_outer.items-7 { height: 310px; } nav.header_nav .nav_inner > ul.secondary_items .item:hover > .menu_outer.items-8 { height: 350px; } nav.header_nav .nav_inner > ul.secondary_items .item:hover > .menu_outer.items-9 { height: 390px; } nav.header_nav .nav_inner > ul.secondary_items .item:hover > .menu_outer.items-10 { height: 430px; } @media (min-width: 1001px) { nav.header_nav .nav_inner > ul.primary_items { position: absolute; top: 50px; right: 0; } } @media (min-width: 1001px) { nav.header_nav .nav_inner > ul.primary_items .item > a, nav.header_nav .nav_inner > ul.primary_items .item .mobile_only { font-size: 18px; font-weight: 500; } nav.header_nav .nav_inner > ul.primary_items .item > a[data-active], nav.header_nav .nav_inner > ul.primary_items .item .mobile_only[data-active] { font-weight: normal; } } nav.header_nav .nav_inner > ul .item { position: relative; display: inline-block; vertical-align: middle; white-space: normal; transition: background 0.3s; cursor: pointer; } @media (max-width: 1000px) { nav.header_nav .nav_inner > ul .item { display: block; } } nav.header_nav .nav_inner > ul .item > a, nav.header_nav .nav_inner > ul .item .mobile_only { position: relative; display: inline-block; color: #fff; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 12px; line-height: 50px; font-weight: bold; letter-spacing: 0.2em; text-transform: uppercase; transition: color 0.3s, background 0.3s; cursor: pointer; padding: 0 25px; transition: color 0.3s; } nav.header_nav .nav_inner > ul .item > a[data-active], nav.header_nav .nav_inner > ul .item .mobile_only[data-active] { font-family: "merriweather", "Times New Roman", serif; font-weight: normal; font-style: italic; text-transform: none; letter-spacing: 0.1em; } @media (min-width: 1001px) { nav.header_nav .nav_inner > ul .item > a[data-active]:before, nav.header_nav .nav_inner > ul .item .mobile_only[data-active]:before { content: ''; position: absolute; bottom: -2px; left: 33%; right: 33%; background: #dda63a; height: 2px; } } @media (max-width: 1200px) { nav.header_nav .nav_inner > ul .item > a, nav.header_nav .nav_inner > ul .item .mobile_only { padding: 0 20px; } } @media (max-width: 1000px) { nav.header_nav .nav_inner > ul .item > a, nav.header_nav .nav_inner > ul .item .mobile_only { display: block; color: #fff; font-size: 24px; padding: 10px 16.66667%; } nav.header_nav .nav_inner > ul .item > a[href]:active, nav.header_nav .nav_inner > ul .item .mobile_only[href]:active { background: rgba(255, 255, 255, 0.2); } } nav.header_nav .nav_inner > ul .item > .menu_outer { display: block; overflow: hidden; position: absolute; top: 50px; left: 0; width: auto; height: 0px; transition: height 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); margin-left: -10px; } @media (max-width: 1000px) { nav.header_nav .nav_inner > ul .item > .menu_outer { position: relative; top: 0; margin-left: 0; } } nav.header_nav .nav_inner > ul .item > .menu_outer > ul { vertical-align: bottom; white-space: nowrap; text-align: left; padding: 25px 0; } @media (min-width: 1001px) { nav.header_nav .nav_inner > ul .item > .menu_outer > ul { display: inline-block; background: #1c2c32; } } nav.header_nav .nav_inner > ul .item > .menu_outer > ul .subitem { display: block; width: auto; opacity: 0; transition: color 0.3s, background 0.3s, opacity 0.3s; cursor: pointer; } @media (max-width: 1000px) { nav.header_nav .nav_inner > ul .item > .menu_outer > ul .subitem { padding: 0; } } nav.header_nav .nav_inner > ul .item > .menu_outer > ul .subitem a { position: relative; display: inline-block; color: #fff; font-family: "din-2014", Helvetica, Arial, sans-serif; font-weight: 500; font-size: 18px; letter-spacing: 0.025em; line-height: 40px; padding: 0 35px; transition: color 0.3s, background 0.3s; } @media (max-width: 1000px) { nav.header_nav .nav_inner > ul .item > .menu_outer > ul .subitem a { display: block; color: #fff; padding: 5px 16.66667%; } nav.header_nav .nav_inner > ul .item > .menu_outer > ul .subitem a[href]:active { background: rgba(255, 255, 255, 0.2); } } nav.header_nav .nav_inner > ul .item > .menu_outer > ul .subitem a[data-active] { color: #dda63a; font-size: 17px; font-family: "merriweather", "Times New Roman", serif; font-weight: normal; font-style: italic; text-transform: none; letter-spacing: 0.025em; } @media (min-width: 1001px) { nav.header_nav .nav_inner > ul .item > .menu_outer > ul .subitem:hover a { color: #dda63a; } nav.header_nav .nav_inner > ul .item > .menu_outer > ul .subitem:hover a:before { opacity: 1; transform: scaleY(1); } } @media (min-width: 1001px) { nav.header_nav .nav_inner > ul .item:hover > a { color: #dda63a; } } nav.header_nav .nav_inner > ul .item:hover > .menu_outer > ul .subitem { opacity: 1; } nav.header_nav .nav_inner > ul .item:hover > .menu_outer.items-0 { height: 50px; } @media (max-width: 1000px) { nav.header_nav .nav_inner > ul .item:hover > .menu_outer.items-0 { height: 50px; } } nav.header_nav .nav_inner > ul .item:hover > .menu_outer.items-1 { height: 90px; } @media (max-width: 1000px) { nav.header_nav .nav_inner > ul .item:hover > .menu_outer.items-1 { height: 100px; } } nav.header_nav .nav_inner > ul .item:hover > .menu_outer.items-2 { height: 130px; } @media (max-width: 1000px) { nav.header_nav .nav_inner > ul .item:hover > .menu_outer.items-2 { height: 150px; } } nav.header_nav .nav_inner > ul .item:hover > .menu_outer.items-3 { height: 170px; } @media (max-width: 1000px) { nav.header_nav .nav_inner > ul .item:hover > .menu_outer.items-3 { height: 200px; } } nav.header_nav .nav_inner > ul .item:hover > .menu_outer.items-4 { height: 210px; } @media (max-width: 1000px) { nav.header_nav .nav_inner > ul .item:hover > .menu_outer.items-4 { height: 250px; } } nav.header_nav .nav_inner > ul .item:hover > .menu_outer.items-5 { height: 250px; } @media (max-width: 1000px) { nav.header_nav .nav_inner > ul .item:hover > .menu_outer.items-5 { height: 300px; } } nav.header_nav .nav_inner > ul .item:hover > .menu_outer.items-6 { height: 290px; } @media (max-width: 1000px) { nav.header_nav .nav_inner > ul .item:hover > .menu_outer.items-6 { height: 350px; } } nav.header_nav .nav_inner > ul .item:hover > .menu_outer.items-7 { height: 330px; } @media (max-width: 1000px) { nav.header_nav .nav_inner > ul .item:hover > .menu_outer.items-7 { height: 400px; } } nav.header_nav .nav_inner > ul .item:hover > .menu_outer.items-8 { height: 370px; } @media (max-width: 1000px) { nav.header_nav .nav_inner > ul .item:hover > .menu_outer.items-8 { height: 450px; } } nav.header_nav .nav_inner > ul .item:hover > .menu_outer.items-9 { height: 410px; } @media (max-width: 1000px) { nav.header_nav .nav_inner > ul .item:hover > .menu_outer.items-9 { height: 500px; } } nav.header_nav .nav_inner > ul .item:hover > .menu_outer.items-10 { height: 450px; } @media (max-width: 1000px) { nav.header_nav .nav_inner > ul .item:hover > .menu_outer.items-10 { height: 550px; } } @media (min-width: 1001px) { nav.header_nav .nav_inner > ul .item:last-child > .menu_outer { left: auto; right: 0; /* @include laptop() { right: -60px; } */ } } @media (max-width: 1000px) { nav.header_nav .nav_inner > ul .item.has_menu:after { content: ''; position: absolute; top: 30px; right: 16.667vw; width: 12px; height: 16px; margin: -8px 0 0 -6px; background: url('../../images/layout/next_arrow_white.png?1525445580') no-repeat 0 0/100% auto; transform: rotate(90deg); transition: transform 0.3s; } nav.header_nav .nav_inner > ul .item.has_menu:hover:after { transform: rotate(-90deg); } } nav.header_nav .nav_inner > ul .search_outer { position: relative; display: inline-block; vertical-align: middle; height: 50px; background: url('../../images/layout/search_bg.png?1519848230') no-repeat 17px 50%/16px 16px; /* input[type=submit] { position: absolute; z-index: 100; top: 0; right: 0; width: 25px; height: 50px; @extend %hide_text; background: red; } */ } @media (max-width: 1000px) { nav.header_nav .nav_inner > ul .search_outer { display: none; } } nav.header_nav .nav_inner > ul .search_outer .label_outer { display: none; position: absolute; z-index: 0; top: 0; left: 50px; opacity: 0; transition: opacity 0.3s 0.5s; } nav.header_nav .nav_inner > ul .search_outer .label_outer label { color: rgba(255, 255, 255, 0.5); font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: normal; font-style: italic; letter-spacing: 0.05em; line-height: 50px; opacity: 0; transition: opacity 0.3s; } nav.header_nav .nav_inner > ul .search_outer input[type=search] { position: relative; z-index: 1; background: transparent; color: #fff; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: normal; letter-spacing: 0.05em; line-height: 50px; width: 50px; height: 50px; border-radius: 50px; padding: 0 0 0 50px; box-sizing: border-box; transition: background 0.3s, width 0.5s cubic-bezier(0.645, 0.045, 0.355, 1); cursor: pointer; } nav.header_nav .nav_inner > ul .search_outer input[type=search]:hover, nav.header_nav .nav_inner > ul .search_outer input[type=search]:focus { background-color: rgba(255, 255, 255, 0.2); } nav.header_nav .nav_inner > ul .search_outer input[type=search]:focus { width: 250px; } nav.header_nav .nav_inner > ul .search_outer input[type=search]:focus + .label_outer { opacity: 1; display: block; } nav.header_nav .nav_inner > ul .search_outer input[type=search]:focus + .label_outer label { opacity: 1; } nav.header_nav .nav_inner > ul .search_outer.notempty .label_outer { opacity: 0 !important; } nav.header_nav .nav_inner > ul .search_outer.notempty .label_outer label { opacity: 0 !important; } nav.header_nav .nav_inner > ul .cart_outer { /* color: #fff; font-family: $paragraph_font; font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.2em; line-height: 32px; */ transition: background 0.3s; } @media (min-width: 1001px) { nav.header_nav .nav_inner > ul .cart_outer { display: inline-block; vertical-align: middle; width: 0; height: 50px; border-radius: 50px; padding: 0 25px; margin-right: 12px; background: url('../../images/layout/icon/cart.png?1531319320') no-repeat 50% 50%/18px 16px; overflow: hidden; color: transparent; font-size: 0; text-indent: -1000em; } } @media (max-width: 1000px) { nav.header_nav .nav_inner > ul .cart_outer { display: block; position: relative; color: #fff; font-family: "din-2014", Helvetica, Arial, sans-serif; /* font-size: 12px; line-height: 32px; */ font-size: 14px; line-height: 30px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.2em; padding: 10px 16.66667%; } nav.header_nav .nav_inner > ul .cart_outer:before { content: ''; position: absolute; left: 83.33333%; top: 50%; width: 18px; height: 16px; margin: -8px 0 0 -18px; background: url('../../images/layout/icon/cart.png?1531319320') no-repeat 0 0/18px 16px; } } @media (min-width: 1001px) { nav.header_nav .nav_inner > ul .cart_outer:hover, nav.header_nav .nav_inner > ul .cart_outer:focus { background-color: rgba(255, 255, 255, 0.2); } } @media (max-width: 1000px) { nav.header_nav.active { transform: translateX(0); } } @media (max-width: 1000px) { nav.header_nav .pattern { position: absolute; top: 0; left: 0; width: 250px; height: 100%; transform-origin: 0 0; transform: translate(90px, -180px) rotate(45deg); opacity: 0.2; } nav.header_nav .pattern:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('../../images/layout/safari_pattern.png?1520252234') repeat-y 0 0/100% auto; animation: pattern_motion 15s linear infinite; pointer-events: none; } nav.header_nav:after { content: ''; display: inline-block; width: 0; height: 100%; vertical-align: middle; } } .nav_hamburger { position: fixed; z-index: 103; bottom: 0; right: 0; width: 25%; height: 60px; transition: background 0.3s; } @media (min-width: 1001px) { .nav_hamburger { display: none; } } .nav_hamburger .a, .nav_hamburger .b, .nav_hamburger .c { position: absolute; top: 50%; right: 50%; width: 18px; height: 2px; margin-right: -9px; margin-top: -1px; background: #fff; transition: background 0.3s, width 0.3s, transform 0.3s, margin 0.3s; } .nav_hamburger .b { transform: translateY(-6px); } .nav_hamburger .c { transform: translateY(6px); } .nav_hamburger:active { background-color: rgba(255, 255, 255, 0.2); } .nav_hamburger:before { content: ''; position: absolute; bottom: 0; left: -75vw; right: 0; height: 100px; background: linear-gradient(to bottom, rgba(228, 91, 37, 0), #e45b25); pointer-events: none; transform: translateX(100vw); transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1); } .nav_hamburger.active .a, .nav_hamburger.active .b, .nav_hamburger.active .c { background: #fff; } .nav_hamburger.active .a { width: 0; margin-left: 0; } .nav_hamburger.active .b { transform: rotate(45deg) translateY(0) scaleX(1.2); } .nav_hamburger.active .c { transform: rotate(-45deg) translateY(0) scaleX(1.2); } .nav_hamburger.active:before { transform: translateX(0); } .nav_background { position: fixed; z-index: 100; bottom: 0; left: 0; right: 0; width: 100%; height: 60px; background: #1c2c32; box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), 0 4px 20px rgba(0, 0, 0, 0.2); } @media (min-width: 1001px) { .nav_background { display: none; } } .mobile_nav { position: fixed; z-index: 103; bottom: 0; left: 0; width: 75%; height: 60px; text-align: right; } @media (min-width: 1001px) { .mobile_nav { display: none; } } .mobile_nav > * { display: inline-block; vertical-align: top; height: 60px; } .mobile_nav .search_outer { position: absolute; z-index: 1; top: 0; left: 0; text-align: left; } .mobile_nav .search_outer .label_outer { position: absolute; z-index: 0; top: 0; left: 50px; opacity: 0; transition: opacity 0.3s 0.5s; pointer-events: none; } .mobile_nav .search_outer .label_outer label { color: rgba(255, 255, 255, 0.5); font-family: "merriweather", "Times New Roman", serif; font-size: 16px; font-weight: normal; font-style: italic; letter-spacing: 0.05em; line-height: 60px; opacity: 0; transition: opacity 0.3s; } .mobile_nav .search_outer input[type=search] { position: relative; z-index: 1; background: transparent; color: transparent; font-family: "merriweather", "Times New Roman", serif; font-size: 16px; font-weight: normal; letter-spacing: 0.05em; line-height: 60px; width: 25vw; height: 60px; padding: 0 25px 0 50px; box-sizing: border-box; background: url('../../images/layout/icon/search_mobile.png?1528404924') no-repeat 50% 50%/18px 18px; transition: background-color 0.3s, width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); cursor: pointer; } .mobile_nav .search_outer input[type=search]:hover, .mobile_nav .search_outer input[type=search]:focus { background-position-x: 25px; background-color: #1c2c32; } .mobile_nav .search_outer input[type=search]:focus { width: 100vw; color: #fff; } .mobile_nav .search_outer input[type=search]:focus + .label_outer { opacity: 1; } .mobile_nav .search_outer input[type=search]:focus + .label_outer label { opacity: 1; } .mobile_nav .search_outer.notempty .label_outer { opacity: 0 !important; } .mobile_nav .search_outer.notempty .label_outer label { opacity: 0 !important; } .mobile_nav a { position: relative; z-index: 0; width: 25vw; background-repeat: no-repeat; background-position: 50% 50%; transition: background 0.3s; } .mobile_nav a:active { background-color: rgba(255, 255, 255, 0.2); } .mobile_nav a.map { background-image: url('../../images/layout/icon/map.png?1525983149'); background-size: 18px 18px; } .mobile_nav a.calendar { background-image: url('../../images/layout/icon/calendar.png?1525983159'); background-size: 18px 18px; } .mobile_nav a[data-active]:after { content: ''; position: absolute; bottom: -5px; left: 50%; right: 0; height: 10px; width: 10px; margin-left: -5px; border-radius: 100%; background: #dda63a; } #wp_edit_post_button { position: fixed; z-index: 200; top: 0; left: 0; width: 50px; height: 50px; overflow: visible; cursor: pointer; } #wp_edit_post_button:before { content: ''; position: absolute; z-index: -1; top: 0; left: 0; width: 0; height: 0; border: solid 57px transparent; border-bottom-color: rgba(0, 0, 0, 0.2); transform-origin: 0 0; transform: rotate(-45deg) translate(-57px, -57px); transition: border 0.3s; pointer-events: none; } #wp_edit_post_button:after { content: ''; position: absolute; top: 15px; left: 15px; width: 19px; height: 19px; background: url('../../images/layout/wp_edit.png?1521557190') no-repeat 0 0/100% 100%; } #wp_edit_post_button:hover:before { border-bottom-color: #1e72a7; } #accesso_pup { -webkit-overflow-scrolling: touch; overflow: hidden; overflow-y: auto; } #accesso_pup .pup_content { -webkit-overflow-scrolling: touch; overflow: hidden; overflow-y: auto; } #accesso_pup iframe { display: block; width: 100%; height: 80vh; } @media (max-width: 600px) { #accesso_pup iframe { position: absolute; top: 0; left: 0; height: 100%; } } footer { position: relative; z-index: 1; color: #fff; background: #1c2c32; text-align: center; } @media (max-width: 1000px) { footer { padding-bottom: 60px; } } footer .primary { padding: 80px 0 30px 0; } @media (max-width: 1000px) { footer .primary { display: none; } } footer .primary a { position: relative; display: inline-block; color: #fff; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 12px; line-height: 50px; font-weight: bold; letter-spacing: 0.2em; text-transform: uppercase; transition: color 0.3s, background 0.3s; cursor: pointer; padding: 0 25px; } footer .primary a[data-active] { font-family: "merriweather", "Times New Roman", serif; font-weight: normal; font-style: italic; text-transform: none; letter-spacing: 0.1em; } @media (min-width: 1001px) { footer .primary a[data-active]:before { content: ''; position: absolute; bottom: -2px; left: 33%; right: 33%; background: #20c7d2; height: 2px; } } @media (min-width: 1001px) { footer .primary a { font-size: 18px; font-weight: 500; } } footer .primary a[data-active] { font-weight: normal; } footer .primary a:hover { color: #20c7d2; } footer .social { padding: 30px 0; } footer .social a { position: relative; display: inline-block; width: 70px; height: 70px; margin: 0 20px; border-radius: 100%; box-shadow: inset 0 0 0 35px #1c2c32; transition: background 0.3s, box-shadow 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); cursor: pointer; } @media (max-width: 600px) { footer .social a { margin: 0 5px; } } @media (max-width: 500px) { footer .social a { margin: 0; transform: scale(0.9); } } footer .social a:after { content: ''; position: absolute; top: 20px; left: 20px; width: 30px; height: 30px; background: url('../../images/layout/twitter.png?1519922218') no-repeat 50% 50%/30px 30px; } footer .social a.email:after { background-image: url('../../images/layout/icon/email.png?1529596495'); background-size: 32px 23px; width: 32px; left: 19px; } footer .social a.facebook:after { background-image: url('../../images/layout/facebook.png?1519922238'); } footer .social a.instagram:after { background-image: url('../../images/layout/instagram.png?1519922314'); } footer .social a.youtube:after { background-image: url('../../images/layout/youtube.png?1519922328'); } footer .social a:hover { box-shadow: inset 0 0 0 0 #1c2c32; background-color: rgba(255, 255, 255, 0.2); } footer .secondary { padding: 30px 0 80px 0; } @media (max-width: 1000px) { footer .secondary { display: none; } } footer .secondary a { position: relative; display: inline-block; color: #fff; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 12px; line-height: 50px; font-weight: bold; letter-spacing: 0.2em; text-transform: uppercase; transition: color 0.3s, background 0.3s; cursor: pointer; color: #20c7d2; line-height: 32px; padding: 0 15px; } footer .secondary a[data-active] { font-family: "merriweather", "Times New Roman", serif; font-weight: normal; font-style: italic; text-transform: none; letter-spacing: 0.1em; } @media (min-width: 1001px) { footer .secondary a[data-active]:before { content: ''; position: absolute; bottom: -2px; left: 33%; right: 33%; background: #20c7d2; height: 2px; } } footer .secondary a:hover { color: #fff; } footer .secondary a[data-active] { font-size: 13px; } footer .legal { background: #162328; padding: 70px 0; padding-left: 120px; padding-right: 120px; } @media (max-width: 1200px) { footer .legal { padding-left: 80px; } } @media (max-width: 1000px) { footer .legal { padding-left: 50px; } } @media (max-width: 600px) { footer .legal { padding-left: 30px; } } @media (max-width: 1200px) { footer .legal { padding-right: 80px; } } @media (max-width: 1000px) { footer .legal { padding-right: 50px; } } @media (max-width: 600px) { footer .legal { padding-right: 30px; } } @media (max-width: 1000px) { footer .legal { text-align: center; padding-top: 120px; padding-bottom: 120px; } } @media (max-width: 1000px) and (max-width: 1200px) { footer .legal { padding-top: 80px; } } @media (max-width: 1000px) and (max-width: 1000px) { footer .legal { padding-top: 80px; } } @media (max-width: 1000px) and (max-width: 1200px) { footer .legal { padding-bottom: 80px; } } @media (max-width: 1000px) and (max-width: 1000px) { footer .legal { padding-bottom: 80px; } } footer .legal .associations { margin-top: 12px; } @media (min-width: 1001px) { footer .legal .associations { float: left; } } @media (max-width: 1000px) { footer .legal .associations { padding-top: 30px; } } footer .legal .associations a { display: inline-block; } footer .legal .associations a img { display: block; width: auto; height: 32px; } footer .legal .associations a:first-child { margin-right: 30px; } footer .legal .copyright { display: inline-block; color: #8e9699; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: normal; letter-spacing: 0.05em; line-height: 1.5; font-size: 14px !important; letter-spacing: 0.05em; padding-top: 14px; } @media (max-width: 1000px) { footer .legal .copyright { font-size: 16px; } } @media (max-width: 600px) { footer .legal .copyright { font-size: 15px; } } footer .legal .copyright a, footer .legal .copyright [href] { position: relative; display: inline; color: #20c7d2; font-style: italic; font-weight: bold; transition: color 0.3s; box-shadow: 0 0 0 rgba(32, 199, 210, 0); transition: color 0.3s, box-shadow 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); cursor: pointer; } footer .legal .copyright a:hover, footer .legal .copyright [href]:hover { box-shadow: 0 2px 0 #20c7d2; } @media (max-width: 1200px) { footer .legal .copyright { padding-top: 4px; } } @media (max-width: 1000px) { footer .legal .copyright { padding-top: 35px; } } footer .legal .copyright span { border-left: solid 2px rgba(255, 255, 255, 0.2); padding-left: 15px; margin-left: 15px; } @media (min-width: 1001px) and (max-width: 1200px) { footer .legal .copyright span { border-left: 0; padding-left: 0; margin-left: 0; display: block; } } @media (max-width: 400px) { footer .legal .copyright span { border-left: 0; padding-left: 0; margin-left: 0; display: block; } } footer .legal .copyright span:first-child { border-left: none; padding-left: 0; margin-left: 0; } @media (min-width: 1001px) and (max-width: 1200px) { footer .legal .copyright span:first-child { border-left: 0; padding-left: 0; margin-left: 0; padding-bottom: 5px; } } @media (max-width: 400px) { footer .legal .copyright span:first-child { border-left: 0; padding-left: 0; margin-left: 0; padding-bottom: 5px; } } footer .legal .copyright [href] { color: #8e9699; font-style: normal; } footer .legal .copyright [href]:hover { color: #20c7d2; } footer .legal .contact { color: #fff; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: normal; letter-spacing: 0.05em; line-height: 1.5; } @media (max-width: 1000px) { footer .legal .contact { font-size: 16px; } } @media (max-width: 600px) { footer .legal .contact { font-size: 15px; } } footer .legal .contact a, footer .legal .contact [href] { position: relative; display: inline; color: #20c7d2; font-style: italic; font-weight: bold; transition: color 0.3s; box-shadow: 0 0 0 rgba(32, 199, 210, 0); transition: color 0.3s, box-shadow 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); cursor: pointer; } footer .legal .contact a:hover, footer .legal .contact [href]:hover { box-shadow: 0 2px 0 #20c7d2; } @media (min-width: 1001px) { footer .legal .contact { float: right; text-align: right; } } footer .legal .contact .address { color: #fff; font-size: 14px; font-style: normal; letter-spacing: 0.05em; margin-bottom: 5px; } footer .legal .contact .address:hover { color: #20c7d2; } footer .legal .contact .phone_fax .phone { font-style: normal; margin-right: 10px; } body.freeze { overflow: hidden; } .pup { position: fixed; z-index: 201; top: 0; bottom: 0; left: 0; right: 0; white-space: nowrap; text-align: center; opacity: 0; transform: translateY(100%); transition: transform 0.5s, opacity 0.3s; pointer-events: none; } .pup .hide_background { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .pup .pup_inner { position: relative; display: inline-block; vertical-align: middle; white-space: normal; text-align: left; width: 1050px; max-width: 100%; max-height: 100%; -webkit-overflow-scrolling: touch; overflow: hidden; overflow-y: scroll; margin: auto; background: #fff; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1), 0px 4px 20px rgba(0, 0, 0, 0.1); box-sizing: border-box; border-top: solid 10px #dda63a; } @media (min-width: 601px) { .pup .pup_inner { border-radius: 3px; } } @media (max-width: 600px) { .pup .pup_inner { height: 100%; width: 100% !important; border-top-width: 60px !important; } } @media (min-width: 601px) { .pup .pup_inner h2 { display: none; } } @media (max-width: 600px) { .pup .pup_inner h2 { color: inherit; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.3; margin-top: 50px; margin-bottom: 20px; position: fixed; top: 0; right: 60px; left: 30px; line-height: 60px !important; color: #fff !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0 !important; } } @media (max-width: 600px) and (max-width: 1000px) { .pup .pup_inner h2 { font-size: 20px; } } @media (max-width: 600px) and (max-width: 600px) { .pup .pup_inner h2 { font-size: 18px; } } .pup .pup_inner h3 { color: #1c2c32; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 30px; font-weight: normal; letter-spacing: 0.1em; line-height: 1.2; text-transform: uppercase; margin-bottom: 80px; margin: 0 0 30px 0 !important; } @media (max-width: 1000px) { .pup .pup_inner h3 { font-size: 24px; margin-bottom: 40px; } } @media (max-width: 600px) { .pup .pup_inner h3 { text-align: center; font-weight: 600; } } .pup .pup_inner .button_outer { text-align: right; background: #f4f4f5 url('../../images/layout/bg_topography.png?1519924532') no-repeat 0 0/1400px auto; margin-top: 60px; margin-bottom: -120px; margin-left: -120px; margin-right: -120px; padding-top: 60px; padding-bottom: 60px; padding-left: 120px; padding-right: 120px; } @media (max-width: 1200px) { .pup .pup_inner .button_outer { margin-top: 40px; } } @media (max-width: 1000px) { .pup .pup_inner .button_outer { margin-top: 40px; } } @media (max-width: 1200px) { .pup .pup_inner .button_outer { margin-bottom: -80px; } } @media (max-width: 1000px) { .pup .pup_inner .button_outer { margin-bottom: -80px; } } @media (max-width: 1200px) { .pup .pup_inner .button_outer { margin-left: -80px; } } @media (max-width: 1000px) { .pup .pup_inner .button_outer { margin-left: -50px; } } @media (max-width: 600px) { .pup .pup_inner .button_outer { margin-left: -30px; } } @media (max-width: 1200px) { .pup .pup_inner .button_outer { margin-right: -80px; } } @media (max-width: 1000px) { .pup .pup_inner .button_outer { margin-right: -50px; } } @media (max-width: 600px) { .pup .pup_inner .button_outer { margin-right: -30px; } } @media (max-width: 1200px) { .pup .pup_inner .button_outer { padding-top: 40px; } } @media (max-width: 1000px) { .pup .pup_inner .button_outer { padding-top: 40px; } } @media (max-width: 1200px) { .pup .pup_inner .button_outer { padding-bottom: 40px; } } @media (max-width: 1000px) { .pup .pup_inner .button_outer { padding-bottom: 40px; } } @media (max-width: 1200px) { .pup .pup_inner .button_outer { padding-left: 80px; } } @media (max-width: 1000px) { .pup .pup_inner .button_outer { padding-left: 50px; } } @media (max-width: 600px) { .pup .pup_inner .button_outer { padding-left: 30px; } } @media (max-width: 1200px) { .pup .pup_inner .button_outer { padding-right: 80px; } } @media (max-width: 1000px) { .pup .pup_inner .button_outer { padding-right: 50px; } } @media (max-width: 600px) { .pup .pup_inner .button_outer { padding-right: 30px; } } @media (min-width: 1201px) { .pup .pup_inner .button_outer { margin: 40px -80px -80px -80px; padding: 40px 80px 80px 80px; } } @media (max-width: 600px) and (min-height: 500px) { .pup .pup_inner .button_outer { position: fixed; bottom: 0; left: 0; right: 0; margin: 0; padding-top: 30px; padding-bottom: 30px; } } .pup .pup_inner .button_outer a.button { position: relative; display: inline-block; z-index: 0; color: #1c2c32; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.2; padding: 10px 30px; background-color: transparent; border: 3px solid #e45b25; box-sizing: border-box; transition: color 0.3s; cursor: pointer; } @media (max-width: 1000px) { .pup .pup_inner .button_outer a.button { font-size: 16px; font-weight: bold; } } @media (max-width: 600px) { .pup .pup_inner .button_outer a.button { letter-spacing: 0.1em; padding-left: 25px; padding-right: 25px; } } .pup .pup_inner .button_outer a.button:after { content: ''; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background: #e45b25; transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .pup .pup_inner .button_outer a.button:hover { color: #fff; } .pup .pup_inner .button_outer a.button:hover:after { transform: scaleX(1); } .pup:after { content: ''; display: inline-block; vertical-align: middle; height: 100%; width: 0; } .pup.visible { transform: translateY(0); opacity: 1; pointer-events: auto; } .pup_hide_button { position: fixed; z-index: 202; top: 15px; right: 15px; width: 50px; height: 50px; overflow: hidden; color: transparent; font-size: 0; text-indent: -1000em; opacity: 0; border-radius: 100%; pointer-events: none; background-color: rgba(28, 44, 50, 0.1); transition: background 0.3s, opacity 0.3s; cursor: pointer; } @media (max-width: 600px) { .pup_hide_button { top: 0; right: 0; width: 60px; height: 60px; background-color: transparent; } } .pup_hide_button:before, .pup_hide_button:after { content: ''; position: absolute; width: 2px; height: 24px; top: 50%; left: 50%; margin: -12px 0 0 -1px; background: #fff; transform: rotate(-45deg); } .pup_hide_button:after { transform: rotate(45deg); } @media (min-width: 1001px) { .pup_hide_button:hover { background: rgba(28, 44, 50, 0.5); } } @media (max-width: 1000px) { .pup_hide_button:active { background: rgba(28, 44, 50, 0.5); } } .pup_hide_button.visible { opacity: 1; pointer-events: auto; } .modal_background { position: fixed; z-index: 200; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; background: rgba(28, 44, 50, 0.75); transform: translateY(-100%); transition: opacity 0.5s; } @media (max-width: 1000px) { .modal_background { z-index: 98; } } .modal_background:after { content: ''; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: solid 4px #fff; border-bottom-color: transparent; border-left-color: transparent; border-radius: 100%; pointer-events: none; opacity: 0; transform: scale(0.5); transition: opacity 0.3s, transform 0.3s; animation: loading_spin 0.3s linear infinite; } .modal_background.visible { opacity: 1; transform: translateY(0); } .modal_background.loading:after { opacity: 1; transform: scale(1); } .modal_background.delay { transform: translateY(0); pointer-events: none; } @keyframes loading_spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* .error { position: fixed; bottom: 10px; left: 10px; padding: 10px 15px; @include p(#fff); background: rgba(#000,0.8); border-radius: 3px; transform: translateY(100px); transition: transform 0.3s; // pointer-events: none; @include phone() { bottom: 70px; } &.visible { transform: translateY(0); } } */ .top_funnels { position: relative; z-index: 1; width: 100%; overflow-x: hidden; box-sizing: border-box; text-align: center; background: #fff; padding: 80px 0; padding-left: 120px; padding-right: 120px; } @media (max-width: 1200px) { .top_funnels { padding-left: 80px; } } @media (max-width: 1000px) { .top_funnels { padding-left: 50px; } } @media (max-width: 600px) { .top_funnels { padding-left: 30px; } } @media (max-width: 1200px) { .top_funnels { padding-right: 80px; } } @media (max-width: 1000px) { .top_funnels { padding-right: 50px; } } @media (max-width: 600px) { .top_funnels { padding-right: 30px; } } @media (max-width: 1000px) { .top_funnels { padding-top: 120px; padding-bottom: 120px; } } @media (max-width: 1000px) and (max-width: 1200px) { .top_funnels { padding-top: 80px; } } @media (max-width: 1000px) and (max-width: 1000px) { .top_funnels { padding-top: 80px; } } @media (max-width: 1000px) and (max-width: 1200px) { .top_funnels { padding-bottom: 80px; } } @media (max-width: 1000px) and (max-width: 1000px) { .top_funnels { padding-bottom: 80px; } } @media (min-width: 601px) { .top_funnels .top_funnels_inner { margin: 0 -5px; white-space: nowrap; } } .top_funnels .funnel { padding: 0 5px; box-sizing: border-box; } @media (min-width: 601px) { .top_funnels .funnel { display: inline-block; vertical-align: middle; width: 33.333%; } } @media (max-width: 600px) { .top_funnels .funnel { padding: 0 2px; padding-top: 10px; } .top_funnels .funnel:first-child { padding-top: 0; } } .top_funnels .funnel a { position: relative; z-index: 0; display: inline-block; vertical-align: middle; width: 100%; height: 200px; overflow: hidden; white-space: nowrap; color: #fff; padding: 0 40px; background-color: #1c2c32; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; box-sizing: border-box; transition: background 0.3s; cursor: pointer; border-radius: 3px; } @media (max-width: 1000px) { .top_funnels .funnel a { height: 160px; padding: 0 15px; } } @media (max-width: 600px) { .top_funnels .funnel a { height: 120px; padding: 0 20px; } } .top_funnels .funnel a .bg_image { position: absolute; z-index: -3; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; transition: opacity 1s; } .top_funnels .funnel a .tint { position: absolute; z-index: -2; top: 0; left: 0; width: 100%; height: 100%; background: rgba(28, 44, 50, 0.5); transition: height 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .top_funnels .funnel a .content { display: inline-block; vertical-align: middle; white-space: normal; transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } @media (min-width: 1001px) { .top_funnels .funnel a .content { transform: translateY(26px); } } .top_funnels .funnel a .content .title { display: block; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; line-height: 1.2; } @media (min-width: 1001px) { .top_funnels .funnel a .content .title { padding: 0 20px; padding-bottom: 20px; } } @media (max-width: 1000px) { .top_funnels .funnel a .content .title { font-size: 20px; } } @media (max-width: 600px) { .top_funnels .funnel a .content .title { font-weight: bold; } } .top_funnels .funnel a .content .description_outer { display: block; opacity: 0; transition: opacity 0.3s; } @media (max-width: 1000px) { .top_funnels .funnel a .content .description_outer { display: none; } } .top_funnels .funnel a .content .description { display: block; font-family: "merriweather", "Times New Roman", serif; font-size: 14px; font-weight: normal; letter-spacing: 0.05em; line-height: 1.5; padding-bottom: 5px; opacity: 0; transform: translateY(10px); transition: opacity 0.3s 0.3s, transform 0.3s 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); } .top_funnels .funnel a:before { content: ''; position: absolute; z-index: -1; bottom: -1px; left: 0; width: 100%; height: 0; background: #94482a; transition: height 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); mix-blend-mode: multiply; padding-bottom: 1px; } .top_funnels .funnel a:after { content: ''; display: inline-block; vertical-align: middle; width: 0; height: 100%; } @media (min-width: 1001px) { .top_funnels .funnel a:hover .content { transform: translateY(0); } .top_funnels .funnel a:hover .content .description_outer { opacity: 1; } .top_funnels .funnel a:hover .content .description { opacity: 1; transform: translateY(0); } } .top_funnels .funnel a:hover .tint { height: 0; } .top_funnels .funnel a:hover:before { height: 100%; } @media (max-width: 600px) { .top_funnels .funnel a .content .title br { display: none; } } .bottom_funnels { position: relative; z-index: 1; text-align: center; background: #1c2c32; } .bottom_funnels a { position: relative; z-index: 0; display: inline-block; vertical-align: middle; width: 100%; height: 200px; overflow: hidden; white-space: nowrap; color: #fff; padding: 0 40px; background-color: #1c2c32; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; box-sizing: border-box; transition: background 0.3s; cursor: pointer; width: 50%; height: 300px; } @media (max-width: 1000px) { .bottom_funnels a { height: 160px; padding: 0 15px; } } @media (max-width: 600px) { .bottom_funnels a { height: 120px; padding: 0 20px; } } .bottom_funnels a .bg_image { position: absolute; z-index: -3; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; transition: opacity 1s; } .bottom_funnels a .tint { position: absolute; z-index: -2; top: 0; left: 0; width: 100%; height: 100%; background: rgba(28, 44, 50, 0.5); transition: height 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .bottom_funnels a .content { display: inline-block; vertical-align: middle; white-space: normal; transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } @media (min-width: 1001px) { .bottom_funnels a .content { transform: translateY(26px); } } .bottom_funnels a .content .title { display: block; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; line-height: 1.2; } @media (min-width: 1001px) { .bottom_funnels a .content .title { padding: 0 20px; padding-bottom: 20px; } } @media (max-width: 1000px) { .bottom_funnels a .content .title { font-size: 20px; } } @media (max-width: 600px) { .bottom_funnels a .content .title { font-weight: bold; } } .bottom_funnels a .content .description_outer { display: block; opacity: 0; transition: opacity 0.3s; } @media (max-width: 1000px) { .bottom_funnels a .content .description_outer { display: none; } } .bottom_funnels a .content .description { display: block; font-family: "merriweather", "Times New Roman", serif; font-size: 14px; font-weight: normal; letter-spacing: 0.05em; line-height: 1.5; padding-bottom: 5px; opacity: 0; transform: translateY(10px); transition: opacity 0.3s 0.3s, transform 0.3s 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); } .bottom_funnels a:before { content: ''; position: absolute; z-index: -1; bottom: -1px; left: 0; width: 100%; height: 0; background: #606b70; transition: height 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); mix-blend-mode: multiply; padding-bottom: 1px; } .bottom_funnels a:after { content: ''; display: inline-block; vertical-align: middle; width: 0; height: 100%; } @media (min-width: 1001px) { .bottom_funnels a:hover .content { transform: translateY(0); } .bottom_funnels a:hover .content .description_outer { opacity: 1; } .bottom_funnels a:hover .content .description { opacity: 1; transform: translateY(0); } } .bottom_funnels a:hover .tint { height: 0; } .bottom_funnels a:hover:before { height: 100%; } @media (max-width: 1000px) { .bottom_funnels a { height: 240px; } } @media (max-width: 600px) { .bottom_funnels a { width: 100%; height: 200px; } } @media (min-width: 1001px) { .bottom_funnels a .content { transform: translateY(32px); } } .bottom_funnels a .content .description { font-size: 18px; font-style: italic; /* @include button($cyan); font-family: $heading_font; font-weight: normal; line-height: 1.5; letter-spacing: 0.05em; text-transform: none; padding: 6px 25px; transition: opacity 0.5s 0.3s, transform 0.5s 0.3s $easeOutCubic; */ } ::selection { background: rgba(228, 91, 37, 0.33); /* WebKit/Blink Browsers */ } ::-moz-selection { background: rgba(228, 91, 37, 0.33); /* Gecko Browsers */ } #filter_pup .pup_inner form input[type=color], #filter_pup .pup_inner form input[type=date], #filter_pup .pup_inner form input[type=datetime], #filter_pup .pup_inner form input[type=datetime-local], #filter_pup .pup_inner form input[type=email], #filter_pup .pup_inner form input[type=month], #filter_pup .pup_inner form input[type=number], #filter_pup .pup_inner form input[type=password], #filter_pup .pup_inner form input[type=search], #filter_pup .pup_inner form input[type=tel], #filter_pup .pup_inner form input[type=text], #filter_pup .pup_inner form input[type=time], #filter_pup .pup_inner form input[type=url], #filter_pup .pup_inner form input[type=week], #filter_pup .pup_inner form select, #filter_pup .pup_inner form textarea, #subscribe_pup .pup_inner form input[type=color], #subscribe_pup .pup_inner form input[type=date], #subscribe_pup .pup_inner form input[type=datetime], #subscribe_pup .pup_inner form input[type=datetime-local], #subscribe_pup .pup_inner form input[type=email], #subscribe_pup .pup_inner form input[type=month], #subscribe_pup .pup_inner form input[type=number], #subscribe_pup .pup_inner form input[type=password], #subscribe_pup .pup_inner form input[type=search], #subscribe_pup .pup_inner form input[type=tel], #subscribe_pup .pup_inner form input[type=text], #subscribe_pup .pup_inner form input[type=time], #subscribe_pup .pup_inner form input[type=url], #subscribe_pup .pup_inner form input[type=week], #subscribe_pup .pup_inner form select, #subscribe_pup .pup_inner form textarea, #subscribe_form input[type=color], #subscribe_form input[type=date], #subscribe_form input[type=datetime], #subscribe_form input[type=datetime-local], #subscribe_form input[type=email], #subscribe_form input[type=month], #subscribe_form input[type=number], #subscribe_form input[type=password], #subscribe_form input[type=search], #subscribe_form input[type=tel], #subscribe_form input[type=text], #subscribe_form input[type=time], #subscribe_form input[type=url], #subscribe_form input[type=week], #subscribe_form select, #subscribe_form textarea { color: #1c2c32; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: normal; letter-spacing: 0.05em; line-height: 1.5; position: relative; z-index: 1; display: block; width: 100%; max-width: 100%; max-height: 50vh; line-height: 1.6; outline: none; border: 0; border-bottom: solid 1px #e9eaeb; border-radius: 0; background: transparent; padding: 10px 0; transition: border 0.3s, box-shadow 0.3s; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none; } @media (max-width: 1000px) { #filter_pup .pup_inner form input[type=color], #filter_pup .pup_inner form input[type=date], #filter_pup .pup_inner form input[type=datetime], #filter_pup .pup_inner form input[type=datetime-local], #filter_pup .pup_inner form input[type=email], #filter_pup .pup_inner form input[type=month], #filter_pup .pup_inner form input[type=number], #filter_pup .pup_inner form input[type=password], #filter_pup .pup_inner form input[type=search], #filter_pup .pup_inner form input[type=tel], #filter_pup .pup_inner form input[type=text], #filter_pup .pup_inner form input[type=time], #filter_pup .pup_inner form input[type=url], #filter_pup .pup_inner form input[type=week], #filter_pup .pup_inner form select, #filter_pup .pup_inner form textarea, #subscribe_pup .pup_inner form input[type=color], #subscribe_pup .pup_inner form input[type=date], #subscribe_pup .pup_inner form input[type=datetime], #subscribe_pup .pup_inner form input[type=datetime-local], #subscribe_pup .pup_inner form input[type=email], #subscribe_pup .pup_inner form input[type=month], #subscribe_pup .pup_inner form input[type=number], #subscribe_pup .pup_inner form input[type=password], #subscribe_pup .pup_inner form input[type=search], #subscribe_pup .pup_inner form input[type=tel], #subscribe_pup .pup_inner form input[type=text], #subscribe_pup .pup_inner form input[type=time], #subscribe_pup .pup_inner form input[type=url], #subscribe_pup .pup_inner form input[type=week], #subscribe_pup .pup_inner form select, #subscribe_pup .pup_inner form textarea, #subscribe_form input[type=color], #subscribe_form input[type=date], #subscribe_form input[type=datetime], #subscribe_form input[type=datetime-local], #subscribe_form input[type=email], #subscribe_form input[type=month], #subscribe_form input[type=number], #subscribe_form input[type=password], #subscribe_form input[type=search], #subscribe_form input[type=tel], #subscribe_form input[type=text], #subscribe_form input[type=time], #subscribe_form input[type=url], #subscribe_form input[type=week], #subscribe_form select, #subscribe_form textarea { font-size: 16px; } } @media (max-width: 600px) { #filter_pup .pup_inner form input[type=color], #filter_pup .pup_inner form input[type=date], #filter_pup .pup_inner form input[type=datetime], #filter_pup .pup_inner form input[type=datetime-local], #filter_pup .pup_inner form input[type=email], #filter_pup .pup_inner form input[type=month], #filter_pup .pup_inner form input[type=number], #filter_pup .pup_inner form input[type=password], #filter_pup .pup_inner form input[type=search], #filter_pup .pup_inner form input[type=tel], #filter_pup .pup_inner form input[type=text], #filter_pup .pup_inner form input[type=time], #filter_pup .pup_inner form input[type=url], #filter_pup .pup_inner form input[type=week], #filter_pup .pup_inner form select, #filter_pup .pup_inner form textarea, #subscribe_pup .pup_inner form input[type=color], #subscribe_pup .pup_inner form input[type=date], #subscribe_pup .pup_inner form input[type=datetime], #subscribe_pup .pup_inner form input[type=datetime-local], #subscribe_pup .pup_inner form input[type=email], #subscribe_pup .pup_inner form input[type=month], #subscribe_pup .pup_inner form input[type=number], #subscribe_pup .pup_inner form input[type=password], #subscribe_pup .pup_inner form input[type=search], #subscribe_pup .pup_inner form input[type=tel], #subscribe_pup .pup_inner form input[type=text], #subscribe_pup .pup_inner form input[type=time], #subscribe_pup .pup_inner form input[type=url], #subscribe_pup .pup_inner form input[type=week], #subscribe_pup .pup_inner form select, #subscribe_pup .pup_inner form textarea, #subscribe_form input[type=color], #subscribe_form input[type=date], #subscribe_form input[type=datetime], #subscribe_form input[type=datetime-local], #subscribe_form input[type=email], #subscribe_form input[type=month], #subscribe_form input[type=number], #subscribe_form input[type=password], #subscribe_form input[type=search], #subscribe_form input[type=tel], #subscribe_form input[type=text], #subscribe_form input[type=time], #subscribe_form input[type=url], #subscribe_form input[type=week], #subscribe_form select, #subscribe_form textarea { font-size: 15px; } } #filter_pup .pup_inner form input[type=color] a, #filter_pup .pup_inner form input[type=date] a, #filter_pup .pup_inner form input[type=datetime] a, #filter_pup .pup_inner form input[type=datetime-local] a, #filter_pup .pup_inner form input[type=email] a, #filter_pup .pup_inner form input[type=month] a, #filter_pup .pup_inner form input[type=number] a, #filter_pup .pup_inner form input[type=password] a, #filter_pup .pup_inner form input[type=search] a, #filter_pup .pup_inner form input[type=tel] a, #filter_pup .pup_inner form input[type=text] a, #filter_pup .pup_inner form input[type=time] a, #filter_pup .pup_inner form input[type=url] a, #filter_pup .pup_inner form input[type=week] a, #filter_pup .pup_inner form select a, #filter_pup .pup_inner form textarea a, #subscribe_pup .pup_inner form input[type=color] a, #subscribe_pup .pup_inner form input[type=date] a, #subscribe_pup .pup_inner form input[type=datetime] a, #subscribe_pup .pup_inner form input[type=datetime-local] a, #subscribe_pup .pup_inner form input[type=email] a, #subscribe_pup .pup_inner form input[type=month] a, #subscribe_pup .pup_inner form input[type=number] a, #subscribe_pup .pup_inner form input[type=password] a, #subscribe_pup .pup_inner form input[type=search] a, #subscribe_pup .pup_inner form input[type=tel] a, #subscribe_pup .pup_inner form input[type=text] a, #subscribe_pup .pup_inner form input[type=time] a, #subscribe_pup .pup_inner form input[type=url] a, #subscribe_pup .pup_inner form input[type=week] a, #subscribe_pup .pup_inner form select a, #subscribe_pup .pup_inner form textarea a, #subscribe_form input[type=color] a, #subscribe_form input[type=date] a, #subscribe_form input[type=datetime] a, #subscribe_form input[type=datetime-local] a, #subscribe_form input[type=email] a, #subscribe_form input[type=month] a, #subscribe_form input[type=number] a, #subscribe_form input[type=password] a, #subscribe_form input[type=search] a, #subscribe_form input[type=tel] a, #subscribe_form input[type=text] a, #subscribe_form input[type=time] a, #subscribe_form input[type=url] a, #subscribe_form input[type=week] a, #subscribe_form select a, #subscribe_form textarea a, #filter_pup .pup_inner form input[type=color] [href], #filter_pup .pup_inner form input[type=date] [href], #filter_pup .pup_inner form input[type=datetime] [href], #filter_pup .pup_inner form input[type=datetime-local] [href], #filter_pup .pup_inner form input[type=email] [href], #filter_pup .pup_inner form input[type=month] [href], #filter_pup .pup_inner form input[type=number] [href], #filter_pup .pup_inner form input[type=password] [href], #filter_pup .pup_inner form input[type=search] [href], #filter_pup .pup_inner form input[type=tel] [href], #filter_pup .pup_inner form input[type=text] [href], #filter_pup .pup_inner form input[type=time] [href], #filter_pup .pup_inner form input[type=url] [href], #filter_pup .pup_inner form input[type=week] [href], #filter_pup .pup_inner form select [href], #filter_pup .pup_inner form textarea [href], #subscribe_pup .pup_inner form input[type=color] [href], #subscribe_pup .pup_inner form input[type=date] [href], #subscribe_pup .pup_inner form input[type=datetime] [href], #subscribe_pup .pup_inner form input[type=datetime-local] [href], #subscribe_pup .pup_inner form input[type=email] [href], #subscribe_pup .pup_inner form input[type=month] [href], #subscribe_pup .pup_inner form input[type=number] [href], #subscribe_pup .pup_inner form input[type=password] [href], #subscribe_pup .pup_inner form input[type=search] [href], #subscribe_pup .pup_inner form input[type=tel] [href], #subscribe_pup .pup_inner form input[type=text] [href], #subscribe_pup .pup_inner form input[type=time] [href], #subscribe_pup .pup_inner form input[type=url] [href], #subscribe_pup .pup_inner form input[type=week] [href], #subscribe_pup .pup_inner form select [href], #subscribe_pup .pup_inner form textarea [href], #subscribe_form input[type=color] [href], #subscribe_form input[type=date] [href], #subscribe_form input[type=datetime] [href], #subscribe_form input[type=datetime-local] [href], #subscribe_form input[type=email] [href], #subscribe_form input[type=month] [href], #subscribe_form input[type=number] [href], #subscribe_form input[type=password] [href], #subscribe_form input[type=search] [href], #subscribe_form input[type=tel] [href], #subscribe_form input[type=text] [href], #subscribe_form input[type=time] [href], #subscribe_form input[type=url] [href], #subscribe_form input[type=week] [href], #subscribe_form select [href], #subscribe_form textarea [href] { position: relative; display: inline; color: #20c7d2; font-style: italic; font-weight: bold; transition: color 0.3s; box-shadow: 0 0 0 rgba(32, 199, 210, 0); transition: color 0.3s, box-shadow 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); cursor: pointer; } #filter_pup .pup_inner form input[type=color] a:hover, #filter_pup .pup_inner form input[type=date] a:hover, #filter_pup .pup_inner form input[type=datetime] a:hover, #filter_pup .pup_inner form input[type=datetime-local] a:hover, #filter_pup .pup_inner form input[type=email] a:hover, #filter_pup .pup_inner form input[type=month] a:hover, #filter_pup .pup_inner form input[type=number] a:hover, #filter_pup .pup_inner form input[type=password] a:hover, #filter_pup .pup_inner form input[type=search] a:hover, #filter_pup .pup_inner form input[type=tel] a:hover, #filter_pup .pup_inner form input[type=text] a:hover, #filter_pup .pup_inner form input[type=time] a:hover, #filter_pup .pup_inner form input[type=url] a:hover, #filter_pup .pup_inner form input[type=week] a:hover, #filter_pup .pup_inner form select a:hover, #filter_pup .pup_inner form textarea a:hover, #subscribe_pup .pup_inner form input[type=color] a:hover, #subscribe_pup .pup_inner form input[type=date] a:hover, #subscribe_pup .pup_inner form input[type=datetime] a:hover, #subscribe_pup .pup_inner form input[type=datetime-local] a:hover, #subscribe_pup .pup_inner form input[type=email] a:hover, #subscribe_pup .pup_inner form input[type=month] a:hover, #subscribe_pup .pup_inner form input[type=number] a:hover, #subscribe_pup .pup_inner form input[type=password] a:hover, #subscribe_pup .pup_inner form input[type=search] a:hover, #subscribe_pup .pup_inner form input[type=tel] a:hover, #subscribe_pup .pup_inner form input[type=text] a:hover, #subscribe_pup .pup_inner form input[type=time] a:hover, #subscribe_pup .pup_inner form input[type=url] a:hover, #subscribe_pup .pup_inner form input[type=week] a:hover, #subscribe_pup .pup_inner form select a:hover, #subscribe_pup .pup_inner form textarea a:hover, #subscribe_form input[type=color] a:hover, #subscribe_form input[type=date] a:hover, #subscribe_form input[type=datetime] a:hover, #subscribe_form input[type=datetime-local] a:hover, #subscribe_form input[type=email] a:hover, #subscribe_form input[type=month] a:hover, #subscribe_form input[type=number] a:hover, #subscribe_form input[type=password] a:hover, #subscribe_form input[type=search] a:hover, #subscribe_form input[type=tel] a:hover, #subscribe_form input[type=text] a:hover, #subscribe_form input[type=time] a:hover, #subscribe_form input[type=url] a:hover, #subscribe_form input[type=week] a:hover, #subscribe_form select a:hover, #subscribe_form textarea a:hover, #filter_pup .pup_inner form input[type=color] [href]:hover, #filter_pup .pup_inner form input[type=date] [href]:hover, #filter_pup .pup_inner form input[type=datetime] [href]:hover, #filter_pup .pup_inner form input[type=datetime-local] [href]:hover, #filter_pup .pup_inner form input[type=email] [href]:hover, #filter_pup .pup_inner form input[type=month] [href]:hover, #filter_pup .pup_inner form input[type=number] [href]:hover, #filter_pup .pup_inner form input[type=password] [href]:hover, #filter_pup .pup_inner form input[type=search] [href]:hover, #filter_pup .pup_inner form input[type=tel] [href]:hover, #filter_pup .pup_inner form input[type=text] [href]:hover, #filter_pup .pup_inner form input[type=time] [href]:hover, #filter_pup .pup_inner form input[type=url] [href]:hover, #filter_pup .pup_inner form input[type=week] [href]:hover, #filter_pup .pup_inner form select [href]:hover, #filter_pup .pup_inner form textarea [href]:hover, #subscribe_pup .pup_inner form input[type=color] [href]:hover, #subscribe_pup .pup_inner form input[type=date] [href]:hover, #subscribe_pup .pup_inner form input[type=datetime] [href]:hover, #subscribe_pup .pup_inner form input[type=datetime-local] [href]:hover, #subscribe_pup .pup_inner form input[type=email] [href]:hover, #subscribe_pup .pup_inner form input[type=month] [href]:hover, #subscribe_pup .pup_inner form input[type=number] [href]:hover, #subscribe_pup .pup_inner form input[type=password] [href]:hover, #subscribe_pup .pup_inner form input[type=search] [href]:hover, #subscribe_pup .pup_inner form input[type=tel] [href]:hover, #subscribe_pup .pup_inner form input[type=text] [href]:hover, #subscribe_pup .pup_inner form input[type=time] [href]:hover, #subscribe_pup .pup_inner form input[type=url] [href]:hover, #subscribe_pup .pup_inner form input[type=week] [href]:hover, #subscribe_pup .pup_inner form select [href]:hover, #subscribe_pup .pup_inner form textarea [href]:hover, #subscribe_form input[type=color] [href]:hover, #subscribe_form input[type=date] [href]:hover, #subscribe_form input[type=datetime] [href]:hover, #subscribe_form input[type=datetime-local] [href]:hover, #subscribe_form input[type=email] [href]:hover, #subscribe_form input[type=month] [href]:hover, #subscribe_form input[type=number] [href]:hover, #subscribe_form input[type=password] [href]:hover, #subscribe_form input[type=search] [href]:hover, #subscribe_form input[type=tel] [href]:hover, #subscribe_form input[type=text] [href]:hover, #subscribe_form input[type=time] [href]:hover, #subscribe_form input[type=url] [href]:hover, #subscribe_form input[type=week] [href]:hover, #subscribe_form select [href]:hover, #subscribe_form textarea [href]:hover { box-shadow: 0 2px 0 #20c7d2; } @media (max-width: 600px) { #filter_pup .pup_inner form input[type=color], #filter_pup .pup_inner form input[type=date], #filter_pup .pup_inner form input[type=datetime], #filter_pup .pup_inner form input[type=datetime-local], #filter_pup .pup_inner form input[type=email], #filter_pup .pup_inner form input[type=month], #filter_pup .pup_inner form input[type=number], #filter_pup .pup_inner form input[type=password], #filter_pup .pup_inner form input[type=search], #filter_pup .pup_inner form input[type=tel], #filter_pup .pup_inner form input[type=text], #filter_pup .pup_inner form input[type=time], #filter_pup .pup_inner form input[type=url], #filter_pup .pup_inner form input[type=week], #filter_pup .pup_inner form select, #filter_pup .pup_inner form textarea, #subscribe_pup .pup_inner form input[type=color], #subscribe_pup .pup_inner form input[type=date], #subscribe_pup .pup_inner form input[type=datetime], #subscribe_pup .pup_inner form input[type=datetime-local], #subscribe_pup .pup_inner form input[type=email], #subscribe_pup .pup_inner form input[type=month], #subscribe_pup .pup_inner form input[type=number], #subscribe_pup .pup_inner form input[type=password], #subscribe_pup .pup_inner form input[type=search], #subscribe_pup .pup_inner form input[type=tel], #subscribe_pup .pup_inner form input[type=text], #subscribe_pup .pup_inner form input[type=time], #subscribe_pup .pup_inner form input[type=url], #subscribe_pup .pup_inner form input[type=week], #subscribe_pup .pup_inner form select, #subscribe_pup .pup_inner form textarea, #subscribe_form input[type=color], #subscribe_form input[type=date], #subscribe_form input[type=datetime], #subscribe_form input[type=datetime-local], #subscribe_form input[type=email], #subscribe_form input[type=month], #subscribe_form input[type=number], #subscribe_form input[type=password], #subscribe_form input[type=search], #subscribe_form input[type=tel], #subscribe_form input[type=text], #subscribe_form input[type=time], #subscribe_form input[type=url], #subscribe_form input[type=week], #subscribe_form select, #subscribe_form textarea { font-size: 16px; } } #filter_pup .pup_inner form input[type=color]:focus, #filter_pup .pup_inner form input[type=date]:focus, #filter_pup .pup_inner form input[type=datetime]:focus, #filter_pup .pup_inner form input[type=datetime-local]:focus, #filter_pup .pup_inner form input[type=email]:focus, #filter_pup .pup_inner form input[type=month]:focus, #filter_pup .pup_inner form input[type=number]:focus, #filter_pup .pup_inner form input[type=password]:focus, #filter_pup .pup_inner form input[type=search]:focus, #filter_pup .pup_inner form input[type=tel]:focus, #filter_pup .pup_inner form input[type=text]:focus, #filter_pup .pup_inner form input[type=time]:focus, #filter_pup .pup_inner form input[type=url]:focus, #filter_pup .pup_inner form input[type=week]:focus, #filter_pup .pup_inner form select:focus, #filter_pup .pup_inner form textarea:focus, #subscribe_pup .pup_inner form input[type=color]:focus, #subscribe_pup .pup_inner form input[type=date]:focus, #subscribe_pup .pup_inner form input[type=datetime]:focus, #subscribe_pup .pup_inner form input[type=datetime-local]:focus, #subscribe_pup .pup_inner form input[type=email]:focus, #subscribe_pup .pup_inner form input[type=month]:focus, #subscribe_pup .pup_inner form input[type=number]:focus, #subscribe_pup .pup_inner form input[type=password]:focus, #subscribe_pup .pup_inner form input[type=search]:focus, #subscribe_pup .pup_inner form input[type=tel]:focus, #subscribe_pup .pup_inner form input[type=text]:focus, #subscribe_pup .pup_inner form input[type=time]:focus, #subscribe_pup .pup_inner form input[type=url]:focus, #subscribe_pup .pup_inner form input[type=week]:focus, #subscribe_pup .pup_inner form select:focus, #subscribe_pup .pup_inner form textarea:focus, #subscribe_form input[type=color]:focus, #subscribe_form input[type=date]:focus, #subscribe_form input[type=datetime]:focus, #subscribe_form input[type=datetime-local]:focus, #subscribe_form input[type=email]:focus, #subscribe_form input[type=month]:focus, #subscribe_form input[type=number]:focus, #subscribe_form input[type=password]:focus, #subscribe_form input[type=search]:focus, #subscribe_form input[type=tel]:focus, #subscribe_form input[type=text]:focus, #subscribe_form input[type=time]:focus, #subscribe_form input[type=url]:focus, #subscribe_form input[type=week]:focus, #subscribe_form select:focus, #subscribe_form textarea:focus { border-bottom: solid 1px #e45b25; box-shadow: 0 1px 0 #e45b25; } #filter_pup .pup_inner form input[type=color]:focus + .placeholder, #filter_pup .pup_inner form input[type=date]:focus + .placeholder, #filter_pup .pup_inner form input[type=datetime]:focus + .placeholder, #filter_pup .pup_inner form input[type=datetime-local]:focus + .placeholder, #filter_pup .pup_inner form input[type=email]:focus + .placeholder, #filter_pup .pup_inner form input[type=month]:focus + .placeholder, #filter_pup .pup_inner form input[type=number]:focus + .placeholder, #filter_pup .pup_inner form input[type=password]:focus + .placeholder, #filter_pup .pup_inner form input[type=search]:focus + .placeholder, #filter_pup .pup_inner form input[type=tel]:focus + .placeholder, #filter_pup .pup_inner form input[type=text]:focus + .placeholder, #filter_pup .pup_inner form input[type=time]:focus + .placeholder, #filter_pup .pup_inner form input[type=url]:focus + .placeholder, #filter_pup .pup_inner form input[type=week]:focus + .placeholder, #filter_pup .pup_inner form select:focus + .placeholder, #filter_pup .pup_inner form textarea:focus + .placeholder, #subscribe_pup .pup_inner form input[type=color]:focus + .placeholder, #subscribe_pup .pup_inner form input[type=date]:focus + .placeholder, #subscribe_pup .pup_inner form input[type=datetime]:focus + .placeholder, #subscribe_pup .pup_inner form input[type=datetime-local]:focus + .placeholder, #subscribe_pup .pup_inner form input[type=email]:focus + .placeholder, #subscribe_pup .pup_inner form input[type=month]:focus + .placeholder, #subscribe_pup .pup_inner form input[type=number]:focus + .placeholder, #subscribe_pup .pup_inner form input[type=password]:focus + .placeholder, #subscribe_pup .pup_inner form input[type=search]:focus + .placeholder, #subscribe_pup .pup_inner form input[type=tel]:focus + .placeholder, #subscribe_pup .pup_inner form input[type=text]:focus + .placeholder, #subscribe_pup .pup_inner form input[type=time]:focus + .placeholder, #subscribe_pup .pup_inner form input[type=url]:focus + .placeholder, #subscribe_pup .pup_inner form input[type=week]:focus + .placeholder, #subscribe_pup .pup_inner form select:focus + .placeholder, #subscribe_pup .pup_inner form textarea:focus + .placeholder, #subscribe_form input[type=color]:focus + .placeholder, #subscribe_form input[type=date]:focus + .placeholder, #subscribe_form input[type=datetime]:focus + .placeholder, #subscribe_form input[type=datetime-local]:focus + .placeholder, #subscribe_form input[type=email]:focus + .placeholder, #subscribe_form input[type=month]:focus + .placeholder, #subscribe_form input[type=number]:focus + .placeholder, #subscribe_form input[type=password]:focus + .placeholder, #subscribe_form input[type=search]:focus + .placeholder, #subscribe_form input[type=tel]:focus + .placeholder, #subscribe_form input[type=text]:focus + .placeholder, #subscribe_form input[type=time]:focus + .placeholder, #subscribe_form input[type=url]:focus + .placeholder, #subscribe_form input[type=week]:focus + .placeholder, #subscribe_form select:focus + .placeholder, #subscribe_form textarea:focus + .placeholder, #filter_pup .pup_inner form input[type=color]:focus + * + .placeholder, #filter_pup .pup_inner form input[type=date]:focus + * + .placeholder, #filter_pup .pup_inner form input[type=datetime]:focus + * + .placeholder, #filter_pup .pup_inner form input[type=datetime-local]:focus + * + .placeholder, #filter_pup .pup_inner form input[type=email]:focus + * + .placeholder, #filter_pup .pup_inner form input[type=month]:focus + * + .placeholder, #filter_pup .pup_inner form input[type=number]:focus + * + .placeholder, #filter_pup .pup_inner form input[type=password]:focus + * + .placeholder, #filter_pup .pup_inner form input[type=search]:focus + * + .placeholder, #filter_pup .pup_inner form input[type=tel]:focus + * + .placeholder, #filter_pup .pup_inner form input[type=text]:focus + * + .placeholder, #filter_pup .pup_inner form input[type=time]:focus + * + .placeholder, #filter_pup .pup_inner form input[type=url]:focus + * + .placeholder, #filter_pup .pup_inner form input[type=week]:focus + * + .placeholder, #filter_pup .pup_inner form select:focus + * + .placeholder, #filter_pup .pup_inner form textarea:focus + * + .placeholder, #subscribe_pup .pup_inner form input[type=color]:focus + * + .placeholder, #subscribe_pup .pup_inner form input[type=date]:focus + * + .placeholder, #subscribe_pup .pup_inner form input[type=datetime]:focus + * + .placeholder, #subscribe_pup .pup_inner form input[type=datetime-local]:focus + * + .placeholder, #subscribe_pup .pup_inner form input[type=email]:focus + * + .placeholder, #subscribe_pup .pup_inner form input[type=month]:focus + * + .placeholder, #subscribe_pup .pup_inner form input[type=number]:focus + * + .placeholder, #subscribe_pup .pup_inner form input[type=password]:focus + * + .placeholder, #subscribe_pup .pup_inner form input[type=search]:focus + * + .placeholder, #subscribe_pup .pup_inner form input[type=tel]:focus + * + .placeholder, #subscribe_pup .pup_inner form input[type=text]:focus + * + .placeholder, #subscribe_pup .pup_inner form input[type=time]:focus + * + .placeholder, #subscribe_pup .pup_inner form input[type=url]:focus + * + .placeholder, #subscribe_pup .pup_inner form input[type=week]:focus + * + .placeholder, #subscribe_pup .pup_inner form select:focus + * + .placeholder, #subscribe_pup .pup_inner form textarea:focus + * + .placeholder, #subscribe_form input[type=color]:focus + * + .placeholder, #subscribe_form input[type=date]:focus + * + .placeholder, #subscribe_form input[type=datetime]:focus + * + .placeholder, #subscribe_form input[type=datetime-local]:focus + * + .placeholder, #subscribe_form input[type=email]:focus + * + .placeholder, #subscribe_form input[type=month]:focus + * + .placeholder, #subscribe_form input[type=number]:focus + * + .placeholder, #subscribe_form input[type=password]:focus + * + .placeholder, #subscribe_form input[type=search]:focus + * + .placeholder, #subscribe_form input[type=tel]:focus + * + .placeholder, #subscribe_form input[type=text]:focus + * + .placeholder, #subscribe_form input[type=time]:focus + * + .placeholder, #subscribe_form input[type=url]:focus + * + .placeholder, #subscribe_form input[type=week]:focus + * + .placeholder, #subscribe_form select:focus + * + .placeholder, #subscribe_form textarea:focus + * + .placeholder { opacity: 0.5; } #filter_pup .pup_inner form fieldset label, #subscribe_pup .pup_inner form fieldset label, #subscribe_form fieldset label { color: #8e9699; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: normal; letter-spacing: 0.05em; line-height: 1.5; position: absolute; z-index: 0; top: 0; left: 0; line-height: 1.6; padding: 10px 0; transform-origin: 0 50%; transition: transform 0.3s, opacity 0.3s; pointer-events: none; } @media (max-width: 1000px) { #filter_pup .pup_inner form fieldset label, #subscribe_pup .pup_inner form fieldset label, #subscribe_form fieldset label { font-size: 16px; } } @media (max-width: 600px) { #filter_pup .pup_inner form fieldset label, #subscribe_pup .pup_inner form fieldset label, #subscribe_form fieldset label { font-size: 15px; } } #filter_pup .pup_inner form fieldset label a, #subscribe_pup .pup_inner form fieldset label a, #subscribe_form fieldset label a, #filter_pup .pup_inner form fieldset label [href], #subscribe_pup .pup_inner form fieldset label [href], #subscribe_form fieldset label [href] { position: relative; display: inline; color: #20c7d2; font-style: italic; font-weight: bold; transition: color 0.3s; box-shadow: 0 0 0 rgba(32, 199, 210, 0); transition: color 0.3s, box-shadow 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); cursor: pointer; } #filter_pup .pup_inner form fieldset label a:hover, #subscribe_pup .pup_inner form fieldset label a:hover, #subscribe_form fieldset label a:hover, #filter_pup .pup_inner form fieldset label [href]:hover, #subscribe_pup .pup_inner form fieldset label [href]:hover, #subscribe_form fieldset label [href]:hover { box-shadow: 0 2px 0 #20c7d2; } @media (max-width: 600px) { #filter_pup .pup_inner form fieldset label, #subscribe_pup .pup_inner form fieldset label, #subscribe_form fieldset label { font-size: 16px; } } #filter_pup .pup_inner form fieldset .placeholder, #subscribe_pup .pup_inner form fieldset .placeholder, #subscribe_form fieldset .placeholder { position: absolute; z-index: 0; top: 0; left: 0; color: #8e9699; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 15px; letter-spacing: 0.05em; font-weight: normal; font-style: normal; line-height: 1.6; padding: 10px 0; } main .the_content > div.heading { margin-top: -120px; padding-top: 120px; max-width: none; } @media (max-width: 1200px) { main .the_content > div.heading { margin-top: -80px; } } @media (max-width: 1000px) { main .the_content > div.heading { margin-top: -80px; } } @media (max-width: 1200px) { main .the_content > div.heading { padding-top: 80px; } } @media (max-width: 1000px) { main .the_content > div.heading { padding-top: 80px; } } main .the_content > div.heading .filters_placeholder { height: 36px; } main .the_content > div.heading .filters { position: relative; z-index: 10; text-align: left; margin-top: -36px; } main .the_content > div.heading .filters .month_filter { position: relative; display: inline-block; vertical-align: middle; } main .the_content > div.heading .filters .month_filter .title { color: #1c2c32; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 30px; font-weight: normal; letter-spacing: 0.1em; line-height: 1.2; text-transform: uppercase; margin-bottom: 80px; /* color: $midnight; font-family: $paragraph_font; font-size: 20px; letter-spacing: 0.05em; font-weight: 600; */ text-transform: none; letter-spacing: 0.05em; line-height: 36px; padding-left: 110px; margin: 0 !important; } @media (max-width: 1000px) { main .the_content > div.heading .filters .month_filter .title { font-size: 24px; margin-bottom: 40px; } } @media (max-width: 600px) { main .the_content > div.heading .filters .month_filter .title { text-align: center; font-weight: 600; } } @media (max-width: 1000px) { main .the_content > div.heading .filters .month_filter .title { padding-left: 85px; font-weight: 600; } } @media (max-width: 600px) { main .the_content > div.heading .filters .month_filter .title { padding-left: 100px; padding-left: 70px; font-size: 20px; } } main .the_content > div.heading .filters .month_filter #prev_month_button, main .the_content > div.heading .filters .month_filter #next_month_button { position: absolute; display: inline-block; top: -2px; left: 0; width: 40px; height: 40px; transform: translateX(-14px); } main .the_content > div.heading .filters .month_filter #prev_month_button:before, main .the_content > div.heading .filters .month_filter #next_month_button:before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(28, 44, 50, 0.2); border-radius: 100%; opacity: 0; transition: transform 0.3s, opacity 0.3s; } main .the_content > div.heading .filters .month_filter #prev_month_button:after, main .the_content > div.heading .filters .month_filter #next_month_button:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: url('../../images/layout/prev_arrow_dark.png?1525891099') no-repeat 50% 50%/12px auto; } main .the_content > div.heading .filters .month_filter #prev_month_button:hover:before, main .the_content > div.heading .filters .month_filter #next_month_button:hover:before { opacity: 1; } main .the_content > div.heading .filters .month_filter #next_month_button { left: 40px; } @media (max-width: 600px) { main .the_content > div.heading .filters .month_filter #next_month_button { left: 30px; } } main .the_content > div.heading .filters .month_filter #next_month_button:after { background-image: url('../../images/layout/next_arrow_dark.png?1525891085'); } main .the_content > div.heading .filters #today_button { display: none; /* float: right; margin-right: 30px; @include button_small($mustard, $midnight); @include phone() { display: none; } */ } main .the_content > div.heading .filters #filter_button { float: right; position: relative; display: inline-block; z-index: 0; color: #1c2c32; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.2; padding: 10px 30px; background-color: transparent; border: 3px solid #dda63a; box-sizing: border-box; transition: color 0.3s; cursor: pointer; font-size: 14px; font-weight: bold; padding: 8px 30px; border-width: 2px; } @media (max-width: 1000px) { main .the_content > div.heading .filters #filter_button { font-size: 16px; font-weight: bold; } } @media (max-width: 600px) { main .the_content > div.heading .filters #filter_button { letter-spacing: 0.1em; padding-left: 25px; padding-right: 25px; } } main .the_content > div.heading .filters #filter_button:after { content: ''; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background: #dda63a; transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } main .the_content > div.heading .filters #filter_button:hover:after { transform: scaleX(1); } @media (max-width: 1000px) { main .the_content > div.heading .filters #filter_button { font-size: 14px; } } @media (max-width: 1000px) { main .the_content > div.heading .filters #filter_button { overflow: hidden; height: 36px; color: transparent; text-indent: -1000em; border: none; margin-right: -20px; background: url('../../images/layout/icon/filter_dark.png?1525892685') no-repeat 50% 50%/18px auto; } } main .the_content > div.heading .filters.fixed { position: fixed; top: 0; left: 0; right: 0; padding: 60px; padding-left: 120px; padding-right: 120px; padding-bottom: 0 !important; /* @include spacing('top', 0.5); @include spacing('left'); @include spacing('right'); */ margin-top: 0; } @media (max-width: 1200px) { main .the_content > div.heading .filters.fixed { padding: 40px; } } @media (max-width: 1000px) { main .the_content > div.heading .filters.fixed { padding: 25px; } } @media (max-width: 600px) { main .the_content > div.heading .filters.fixed { padding: 15px; } } @media (max-width: 1200px) { main .the_content > div.heading .filters.fixed { padding-left: 80px; } } @media (max-width: 1000px) { main .the_content > div.heading .filters.fixed { padding-left: 50px; } } @media (max-width: 600px) { main .the_content > div.heading .filters.fixed { padding-left: 30px; } } @media (max-width: 1200px) { main .the_content > div.heading .filters.fixed { padding-right: 80px; } } @media (max-width: 1000px) { main .the_content > div.heading .filters.fixed { padding-right: 50px; } } @media (max-width: 600px) { main .the_content > div.heading .filters.fixed { padding-right: 30px; } } .controls_bg { display: none; position: fixed; z-index: 9; top: 0; left: 0; right: 0; padding: 60px; height: 36px; background: #fff; box-shadow: 0 0 3px rgba(0, 0, 0, 0.1), 0 3px 40px rgba(0, 0, 0, 0.1); } @media (max-width: 1200px) { .controls_bg { padding: 40px; } } @media (max-width: 1000px) { .controls_bg { padding: 25px; } } @media (max-width: 600px) { .controls_bg { padding: 15px; } } .controls_bg.fixed { display: block; } input[id^="event_category_"] { display: none; } #filter_pup .pup_inner { width: 540px; padding-top: 120px; padding-bottom: 120px; padding-left: 120px; padding-right: 120px; /* h2 { @include h_b(); margin: 0 !important; } h3 { @include h_c(); margin: 0 !important; } .button_outer { text-align: right; background: mix($midnight,#fff,5%) image-url('layout/bg_topography.png') no-repeat 0 0/1400px auto; @include spacing('margin-top', 0.5); @include spacing('margin-bottom', -1); @include spacing('margin-left', -1); @include spacing('margin-right', -1); @include spacing('padding-top', 0.5); @include spacing('padding-bottom'); @include spacing('padding-left'); @include spacing('padding-right'); @media ( min-width: 1201px ) { margin: 40px -80px -80px -80px; padding: 40px 80px 80px 80px; } a.button { @include button($mustard,$midnight); // margin-top: 40px; } } */ } @media (max-width: 1200px) { #filter_pup .pup_inner { padding-top: 80px; } } @media (max-width: 1000px) { #filter_pup .pup_inner { padding-top: 80px; } } @media (max-width: 1200px) { #filter_pup .pup_inner { padding-bottom: 80px; } } @media (max-width: 1000px) { #filter_pup .pup_inner { padding-bottom: 80px; } } @media (max-width: 1200px) { #filter_pup .pup_inner { padding-left: 80px; } } @media (max-width: 1000px) { #filter_pup .pup_inner { padding-left: 50px; } } @media (max-width: 600px) { #filter_pup .pup_inner { padding-left: 30px; } } @media (max-width: 1200px) { #filter_pup .pup_inner { padding-right: 80px; } } @media (max-width: 1000px) { #filter_pup .pup_inner { padding-right: 50px; } } @media (max-width: 600px) { #filter_pup .pup_inner { padding-right: 30px; } } @media (min-width: 1201px) { #filter_pup .pup_inner { padding: 80px; } } #filter_pup .pup_inner form { overflow: hidden; overflow: visible; } #filter_pup .pup_inner form fieldset { position: relative; margin-top: 28px; } #filter_pup .pup_inner form fieldset h3 { color: inherit; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.3; margin-top: 50px; margin-bottom: 20px; } @media (max-width: 1000px) { #filter_pup .pup_inner form fieldset h3 { font-size: 20px; } } @media (max-width: 600px) { #filter_pup .pup_inner form fieldset h3 { font-size: 18px; } } #filter_pup .pup_inner form fieldset.notempty { /* input[type=color], input[type=date], input[type=datetime], input[type=datetime-local], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], textarea { &:focus + label { color: rgba(#000,0.5); } } */ } #filter_pup .pup_inner form fieldset.notempty input[type=date] { color: #8e9699; } #filter_pup .pup_inner form fieldset.notempty label { opacity: 1; transform: translateY(-29px) scale(0.75); } #filter_pup .pup_inner form fieldset.notempty .placeholder { opacity: 0 !important; } #filter_pup .pup_inner form fieldset .error_message { color: #1c2c32; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: normal; letter-spacing: 0.05em; line-height: 1.5; color: #e45b25; text-align: right; padding-top: 10px; } @media (max-width: 1000px) { #filter_pup .pup_inner form fieldset .error_message { font-size: 16px; } } @media (max-width: 600px) { #filter_pup .pup_inner form fieldset .error_message { font-size: 15px; } } #filter_pup .pup_inner form fieldset .error_message a, #filter_pup .pup_inner form fieldset .error_message [href] { position: relative; display: inline; color: #20c7d2; font-style: italic; font-weight: bold; transition: color 0.3s; box-shadow: 0 0 0 rgba(32, 199, 210, 0); transition: color 0.3s, box-shadow 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); cursor: pointer; } #filter_pup .pup_inner form fieldset .error_message a:hover, #filter_pup .pup_inner form fieldset .error_message [href]:hover { box-shadow: 0 2px 0 #20c7d2; } #filter_pup .pup_inner form fieldset.error input[type=color], #filter_pup .pup_inner form fieldset.error input[type=date], #filter_pup .pup_inner form fieldset.error input[type=datetime], #filter_pup .pup_inner form fieldset.error input[type=datetime-local], #filter_pup .pup_inner form fieldset.error input[type=email], #filter_pup .pup_inner form fieldset.error input[type=month], #filter_pup .pup_inner form fieldset.error input[type=number], #filter_pup .pup_inner form fieldset.error input[type=password], #filter_pup .pup_inner form fieldset.error input[type=search], #filter_pup .pup_inner form fieldset.error input[type=tel], #filter_pup .pup_inner form fieldset.error input[type=text], #filter_pup .pup_inner form fieldset.error input[type=time], #filter_pup .pup_inner form fieldset.error input[type=url], #filter_pup .pup_inner form fieldset.error input[type=week], #filter_pup .pup_inner form fieldset.error textarea, #filter_pup .pup_inner form fieldset.error select { border-bottom-color: #e45b25; box-shadow: 0 1px 0 #e45b25; } #filter_pup .pup_inner form fieldset.half { width: 50%; display: inline-block; vertical-align: top; } #filter_pup .pup_inner form input[type=date] { color: transparent; } #filter_pup .pup_inner form select { background-image: url('../../images/layout/select_bg.png?1528821296'); background-position: 100% 50%; background-repeat: no-repeat; background-size: 15px 8px; } #filter_pup .pup_inner form select:focus { background-image: url('../../images/layout/select_focus_bg.png?1528821338'); } #filter_pup .pup_inner form textarea { height: 24px; overflow: hidden; overflow-y: auto; -ms-overflow-style: none; } #filter_pup .pup_inner form input[type=color][data-validate*="required"] + .placeholder:after, #filter_pup .pup_inner form input[type=color][data-validate*="required"] + * + .placeholder:after, #filter_pup .pup_inner form input[type=date][data-validate*="required"] + .placeholder:after, #filter_pup .pup_inner form input[type=date][data-validate*="required"] + * + .placeholder:after, #filter_pup .pup_inner form input[type=datetime][data-validate*="required"] + .placeholder:after, #filter_pup .pup_inner form input[type=datetime][data-validate*="required"] + * + .placeholder:after, #filter_pup .pup_inner form input[type=datetime-local][data-validate*="required"] + .placeholder:after, #filter_pup .pup_inner form input[type=datetime-local][data-validate*="required"] + * + .placeholder:after, #filter_pup .pup_inner form input[type=email][data-validate*="required"] + .placeholder:after, #filter_pup .pup_inner form input[type=email][data-validate*="required"] + * + .placeholder:after, #filter_pup .pup_inner form input[type=month][data-validate*="required"] + .placeholder:after, #filter_pup .pup_inner form input[type=month][data-validate*="required"] + * + .placeholder:after, #filter_pup .pup_inner form input[type=number][data-validate*="required"] + .placeholder:after, #filter_pup .pup_inner form input[type=number][data-validate*="required"] + * + .placeholder:after, #filter_pup .pup_inner form input[type=password][data-validate*="required"] + .placeholder:after, #filter_pup .pup_inner form input[type=password][data-validate*="required"] + * + .placeholder:after, #filter_pup .pup_inner form input[type=search][data-validate*="required"] + .placeholder:after, #filter_pup .pup_inner form input[type=search][data-validate*="required"] + * + .placeholder:after, #filter_pup .pup_inner form input[type=tel][data-validate*="required"] + .placeholder:after, #filter_pup .pup_inner form input[type=tel][data-validate*="required"] + * + .placeholder:after, #filter_pup .pup_inner form input[type=text][data-validate*="required"] + .placeholder:after, #filter_pup .pup_inner form input[type=text][data-validate*="required"] + * + .placeholder:after, #filter_pup .pup_inner form input[type=time][data-validate*="required"] + .placeholder:after, #filter_pup .pup_inner form input[type=time][data-validate*="required"] + * + .placeholder:after, #filter_pup .pup_inner form input[type=url][data-validate*="required"] + .placeholder:after, #filter_pup .pup_inner form input[type=url][data-validate*="required"] + * + .placeholder:after, #filter_pup .pup_inner form input[type=week][data-validate*="required"] + .placeholder:after, #filter_pup .pup_inner form input[type=week][data-validate*="required"] + * + .placeholder:after, #filter_pup .pup_inner form textarea[data-validate*="required"] + .placeholder:after, #filter_pup .pup_inner form textarea[data-validate*="required"] + * + .placeholder:after, #filter_pup .pup_inner form select[data-validate*="required"] + .placeholder:after, #filter_pup .pup_inner form select[data-validate*="required"] + * + .placeholder:after { content: ' *'; } #filter_pup .pup_inner form .checkbox_outer { display: inline-block; position: relative; } #filter_pup .pup_inner form .checkbox_outer label { color: #8e9699; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: normal; letter-spacing: 0.05em; line-height: 1.5; top: 0; display: inline-block; vertical-align: middle; position: relative; padding-left: 32px; pointer-events: auto; transition: color 0.3s; } @media (max-width: 1000px) { #filter_pup .pup_inner form .checkbox_outer label { font-size: 16px; } } @media (max-width: 600px) { #filter_pup .pup_inner form .checkbox_outer label { font-size: 15px; } } #filter_pup .pup_inner form .checkbox_outer label a, #filter_pup .pup_inner form .checkbox_outer label [href] { position: relative; display: inline; color: #20c7d2; font-style: italic; font-weight: bold; transition: color 0.3s; box-shadow: 0 0 0 rgba(32, 199, 210, 0); transition: color 0.3s, box-shadow 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); cursor: pointer; } #filter_pup .pup_inner form .checkbox_outer label a:hover, #filter_pup .pup_inner form .checkbox_outer label [href]:hover { box-shadow: 0 2px 0 #20c7d2; } @media (max-width: 600px) { #filter_pup .pup_inner form .checkbox_outer label { font-size: 18px; } } #filter_pup .pup_inner form .checkbox_outer:before { content: ''; position: absolute; top: 13px; left: 0; border-radius: 100%; border: solid 2px #a4abad; width: 20px; height: 20px; box-sizing: border-box; transition: border 0.3s; } #filter_pup .pup_inner form .checkbox_outer .checkbox_inner { content: ''; position: absolute; top: 18px; left: 5px; width: 10px; height: 10px; border-radius: 100%; box-sizing: border-box; background: #dda63a; transform: scale(0); opacity: 0; transition: opacity 0.3s, transform 0.3s; } #filter_pup .pup_inner form .checkbox_outer.has_children:before { content: none; } #filter_pup .pup_inner form .checkbox_outer.has_children .checkbox_inner { display: none; } #filter_pup .pup_inner form .checkbox_outer.child { padding-left: 32px; } #filter_pup .pup_inner form .checkbox_outer.child:before { left: 32px; } #filter_pup .pup_inner form .checkbox_outer.child .checkbox_inner { left: 37px; } #filter_pup .pup_inner form .checkbox_outer:hover label { color: #49565b; } #filter_pup .pup_inner form .checkbox_outer:hover:before { border-color: #1c2c32; } #filter_pup .pup_inner form button, #filter_pup .pup_inner form input[type=submit], #filter_pup .pup_inner form input[type=button] { position: relative; display: inline-block; z-index: 0; color: #1c2c32; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.2; padding: 10px 30px; background-color: transparent; border: 3px solid #e45b25; box-sizing: border-box; transition: color 0.3s; cursor: pointer; } @media (max-width: 1000px) { #filter_pup .pup_inner form button, #filter_pup .pup_inner form input[type=submit], #filter_pup .pup_inner form input[type=button] { font-size: 16px; font-weight: bold; } } @media (max-width: 600px) { #filter_pup .pup_inner form button, #filter_pup .pup_inner form input[type=submit], #filter_pup .pup_inner form input[type=button] { letter-spacing: 0.1em; padding-left: 25px; padding-right: 25px; } } #filter_pup .pup_inner form button:after, #filter_pup .pup_inner form input[type=submit]:after, #filter_pup .pup_inner form input[type=button]:after { content: ''; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background: #e45b25; transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } #filter_pup .pup_inner form button:hover, #filter_pup .pup_inner form input[type=submit]:hover, #filter_pup .pup_inner form input[type=button]:hover { color: #fff; } #filter_pup .pup_inner form button:hover:after, #filter_pup .pup_inner form input[type=submit]:hover:after, #filter_pup .pup_inner form input[type=button]:hover:after { transform: scaleX(1); } #filter_pup .pup_inner form .submit_outer { text-align: right; } #filter_pup .pup_inner form > * { transition: opacity 1s; } #filter_pup .pup_inner form.sending > * { opacity: 0; pointer-events: none; } #filter_pup .pup_inner form .ajax_response { /* @include spacing('margin-top', 0.5); @include spacing('margin-bottom', 0.5); */ display: none; } #filter_pup .pup_inner form.show_response > * { display: none; } #filter_pup .pup_inner form.show_response > fieldset { display: none !important; } #filter_pup .pup_inner form.show_response .ajax_response { display: block; } #filter_pup .pup_inner .button_outer a.button { position: relative; display: inline-block; z-index: 0; color: #1c2c32; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.2; padding: 10px 30px; background-color: transparent; border: 3px solid #dda63a; box-sizing: border-box; transition: color 0.3s; cursor: pointer; } @media (max-width: 1000px) { #filter_pup .pup_inner .button_outer a.button { font-size: 16px; font-weight: bold; } } @media (max-width: 600px) { #filter_pup .pup_inner .button_outer a.button { letter-spacing: 0.1em; padding-left: 25px; padding-right: 25px; } } #filter_pup .pup_inner .button_outer a.button:after { content: ''; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background: #dda63a; transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } #filter_pup .pup_inner .button_outer a.button:hover:after { transform: scaleX(1); } #filter_pup fieldset { margin-top: 0 !important; } main .the_content > div.bottom_outer { max-width: none; } main .the_content > div.bottom_outer #next_month_button_bottom { color: #8e9699; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.3; margin-top: 50px; margin-bottom: 20px; display: block; border-radius: 3px; background: rgba(28, 44, 50, 0.05); padding: 30px 40px; margin-top: 0 !important; margin-left: 110px; text-align: center; transition: color 0.3s, background 0.3s; cursor: pointer; } @media (max-width: 1000px) { main .the_content > div.bottom_outer #next_month_button_bottom { font-size: 20px; } } @media (max-width: 600px) { main .the_content > div.bottom_outer #next_month_button_bottom { font-size: 18px; } } @media (max-width: 1000px) { main .the_content > div.bottom_outer #next_month_button_bottom { margin-left: 85px; } } @media (max-width: 600px) { main .the_content > div.bottom_outer #next_month_button_bottom { margin-left: 70px; } } main .the_content > div.bottom_outer #next_month_button_bottom:hover { color: #1c2c32; background: rgba(28, 44, 50, 0.1); } .event_summary { position: relative; } @media (min-width: 601px) { .event_summary { min-height: 360px; padding-right: 480px !important; margin-top: 180px; margin-bottom: 180px; } } @media (min-width: 601px) and (max-width: 1200px) { .event_summary { margin-top: 120px; } } @media (min-width: 601px) and (max-width: 1000px) { .event_summary { margin-top: 120px; } } @media (min-width: 601px) and (max-width: 1200px) { .event_summary { margin-bottom: 120px; } } @media (min-width: 601px) and (max-width: 1000px) { .event_summary { margin-bottom: 120px; } } @media (min-width: 601px) and (max-width: 1200px) { .event_summary { padding-right: 430px !important; } } @media (min-width: 601px) and (max-width: 1000px) { .event_summary { min-height: 300px; padding-right: 330px !important; } } @media (max-width: 600px) { .event_summary { margin-top: 120px; margin-bottom: 120px; } } @media (max-width: 600px) and (max-width: 1200px) { .event_summary { margin-top: 80px; } } @media (max-width: 600px) and (max-width: 1000px) { .event_summary { margin-top: 80px; } } @media (max-width: 600px) and (max-width: 1200px) { .event_summary { margin-bottom: 80px; } } @media (max-width: 600px) and (max-width: 1000px) { .event_summary { margin-bottom: 80px; } } @media (max-width: 600px) { .event_summary h2 { margin-bottom: 15px; } } .event_summary .intro_paragraph p { color: #1c2c32; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: normal; letter-spacing: 0.05em; line-height: 1.5; font-size: 20px; font-weight: 600; } @media (max-width: 1000px) { .event_summary .intro_paragraph p { font-size: 16px; } } @media (max-width: 600px) { .event_summary .intro_paragraph p { font-size: 15px; } } .event_summary .intro_paragraph p a, .event_summary .intro_paragraph p [href] { position: relative; display: inline; color: #20c7d2; font-style: italic; font-weight: bold; transition: color 0.3s; box-shadow: 0 0 0 rgba(32, 199, 210, 0); transition: color 0.3s, box-shadow 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); cursor: pointer; } .event_summary .intro_paragraph p a:hover, .event_summary .intro_paragraph p [href]:hover { box-shadow: 0 2px 0 #20c7d2; } @media (max-width: 1000px) { .event_summary .intro_paragraph p { font-size: 18px; } } @media (max-width: 600px) { .event_summary .intro_paragraph p { font-size: 17px; } } @media (max-width: 600px) { .event_summary .intro_paragraph p { text-align: center; } } .event_summary .event { position: relative; z-index: 0; display: inline-block; vertical-align: middle; width: 300px; height: 360px; background-color: #1c2c32; /* background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; */ color: #fff; text-align: left; margin-left: 10px; border-radius: 3px; white-space: nowrap; overflow: hidden; overflow: visible; border-radius: 0 3px 3px 3px; } @media (max-width: 1000px) { .event_summary .event { width: 240px; height: 300px; } } @media (max-width: 600px) { .event_summary .event { /* width: 160px; height: 220px; */ } } .event_summary .event .bg_image { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; transition: opacity 1s; } .event_summary .event .date { position: absolute; top: 40px; left: 40px; font-family: "din-2014", Helvetica, Arial, sans-serif; line-height: 1; white-space: normal; } @media (max-width: 1000px) { .event_summary .event .date { top: 30px; left: 30px; } } @media (max-width: 600px) { .event_summary .event .date { /* top: 20px; left: 20px; */ } } .event_summary .event .date .month { display: block; font-size: 16px; font-weight: bold; letter-spacing: 0.2em; text-transform: uppercase; } @media (max-width: 1000px) { .event_summary .event .date .month { padding-bottom: 3px; } } .event_summary .event .date .day { display: block; font-size: 60px; letter-spacing: 0.025em; margin-left: -2px; } @media (max-width: 1000px) { .event_summary .event .date .day { font-size: 40px; } } .event_summary .event .date .weekday { display: block; font-size: 16px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; } @media (max-width: 1000px) { .event_summary .event .date .weekday { padding-top: 3px; } } .event_summary .event .logo_image { display: block; position: absolute; top: 100px; bottom: 40px; left: 40px; right: 40px; background-size: contain; background-position: 50% 100%; background-repeat: no-repeat; } @media (max-width: 1000px) { .event_summary .event .logo_image { bottom: 30px; left: 30px; right: 30px; } } @media (max-width: 600px) { .event_summary .event .logo_image { /* bottom: 20px; left: 20px; right: 20px; */ } } .event_summary .event .text { position: relative; z-index: 0; display: inline-block; width: 100%; vertical-align: bottom; white-space: normal; padding: 35px 40px; box-sizing: border-box; } @media (max-width: 1000px) { .event_summary .event .text { padding: 25px 30px; } } .event_summary .event .text .day { display: block; color: rgba(255, 255, 255, 0.5); font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 12px; font-weight: bold; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.4; padding-bottom: 10px; transition: opacity 0.3s; } .event_summary .event .text .title { display: block; font-family: "merriweather", "Times New Roman", serif; font-size: 22px; letter-spacing: 0.025em; line-height: 1.4; transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } @media (max-width: 1000px) { .event_summary .event .text .title { font-size: 18px; } } .event_summary .event .text .category { display: block; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 15px; letter-spacing: 0.025em; line-height: 1.4; padding-top: 5px; transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } @media (max-width: 600px) { .event_summary .event .text .category { font-size: 14px; } } .event_summary .event .text .more_outer { display: block; position: absolute; bottom: 25px; right: 40px; opacity: 0; transition: opacity 0.3s; } .event_summary .event .text .more { display: block; color: #1c2c32; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 12px; font-weight: bold; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.4; opacity: 0; transform: translateY(10px); transition: opacity 0.3s 0.2s, transform 0.3s 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); } .event_summary .event .text:before { content: ''; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background: #e45b25; transform: scaleY(0); transform-origin: 50% 100%; transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .event_summary .event:after { content: ''; display: inline-block; vertical-align: bottom; width: 0; height: 100%; } .event_summary .event[href] { cursor: pointer; } .event_summary .event[href]:before { content: ''; position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 100%; background: rgba(28, 44, 50, 0.5); border-radius: 3px; } .event_summary .event[href]:hover .text .day { opacity: 0; } .event_summary .event[href]:hover .text .title, .event_summary .event[href]:hover .text .category { transform: translateY(-26px); } .event_summary .event[href]:hover .text .more_outer { opacity: 1; } .event_summary .event[href]:hover .text .more { opacity: 1; transform: translateY(0); } .event_summary .event[href]:hover .text:before { transform: scaleY(1); } .event_summary .event.has_logo_image .text { display: none; } .event_summary .event .next_up { display: block; position: absolute; top: -40px; left: 0; color: #fff; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 12px; font-weight: bold; letter-spacing: 0.2em; text-transform: uppercase; line-height: 40px; text-align: center; padding: 0 40px; border-radius: 3px 3px 0 0; background: #dda63a; box-sizing: border-box; } @media (max-width: 1000px) { .event_summary .event .next_up { padding: 0 30px; } } .event_summary .event:before { border-radius: 0 3px 3px 3px !important; } @media (min-width: 601px) { .event_summary .event { position: absolute; top: 0; right: 120px; } } @media (min-width: 601px) and (max-width: 1200px) { .event_summary .event { right: 80px; } } @media (min-width: 601px) and (max-width: 1000px) { .event_summary .event { right: 50px; } } @media (max-width: 600px) { .event_summary .event { margin-left: 0; width: 100%; height: 220px; } } .event_summary .full_details { display: inline-block; color: #dda63a; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: bold; letter-spacing: 0.2em; line-height: 1.4; text-transform: uppercase; margin-top: 10px; box-shadow: 0 0 0 rgba(221, 166, 58, 0); transition: box-shadow 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); cursor: pointer; } @media (max-width: 600px) { .event_summary .full_details { display: block; text-align: center; padding: 11px 0; margin: -5px 0 65px 0; } } .event_summary .full_details:hover { box-shadow: 0 2px 0 #dda63a; } .event_summary .arrow { position: absolute; top: 50%; width: 60px; height: 60px; border-radius: 100%; margin: -30px 0 0 0; background: #fff url('../../images/layout/prev_arrow_dark.png?1525891099') no-repeat 50% 50%/12px auto; transition: background 0.3s; } @media (max-width: 1000px) { .event_summary .arrow { display: none; } } .event_summary .arrow:hover { background-color: #e8eaeb; } .event_summary .arrow.back { left: 60px; margin-left: -30px; } @media (max-width: 1200px) { .event_summary .arrow.back { left: 40px; } } @media (max-width: 1000px) { .event_summary .arrow.back { left: 25px; } } @media (max-width: 600px) { .event_summary .arrow.back { left: 15px; } } .event_summary .arrow.forward { right: 60px; margin-right: -30px; background-image: url('../../images/layout/next_arrow_dark.png?1525891085'); } @media (max-width: 1200px) { .event_summary .arrow.forward { right: 40px; } } @media (max-width: 1000px) { .event_summary .arrow.forward { right: 25px; } } @media (max-width: 600px) { .event_summary .arrow.forward { right: 15px; } } .event_summary:first-child { margin-top: 60px; } @media (max-width: 1200px) { .event_summary:first-child { margin-top: 40px; } } @media (max-width: 1000px) { .event_summary:first-child { margin-top: 40px; } } .event_summary:last-child { margin-bottom: 60px; } @media (max-width: 1200px) { .event_summary:last-child { margin-bottom: 40px; } } @media (max-width: 1000px) { .event_summary:last-child { margin-bottom: 40px; } } .today_at_the_zoo { position: relative; z-index: 1; background: #1c2c32; } .today_at_the_zoo .today_calendar { padding: 120px 0; padding-left: 120px; padding-right: 120px; box-sizing: border-box; } @media (max-width: 1200px) { .today_at_the_zoo .today_calendar { padding-left: 80px; } } @media (max-width: 1000px) { .today_at_the_zoo .today_calendar { padding-left: 50px; } } @media (max-width: 600px) { .today_at_the_zoo .today_calendar { padding-left: 30px; } } @media (max-width: 1200px) { .today_at_the_zoo .today_calendar { padding-right: 80px; } } @media (max-width: 1000px) { .today_at_the_zoo .today_calendar { padding-right: 50px; } } @media (max-width: 600px) { .today_at_the_zoo .today_calendar { padding-right: 30px; } } @media (min-width: 1001px) { .today_at_the_zoo .today_calendar { float: left; width: 66.667%; } } @media (max-width: 1000px) { .today_at_the_zoo .today_calendar { padding-top: 120px; padding-bottom: 120px; background: #f3f4f5 url('../../images/layout/bg_topography.png?1519924532') no-repeat 0 0/1400px auto; } } @media (max-width: 1000px) and (max-width: 1200px) { .today_at_the_zoo .today_calendar { padding-top: 80px; } } @media (max-width: 1000px) and (max-width: 1000px) { .today_at_the_zoo .today_calendar { padding-top: 80px; } } @media (max-width: 1000px) and (max-width: 1200px) { .today_at_the_zoo .today_calendar { padding-bottom: 80px; } } @media (max-width: 1000px) and (max-width: 1000px) { .today_at_the_zoo .today_calendar { padding-bottom: 80px; } } .today_at_the_zoo .today_calendar .heading { position: relative; padding-bottom: 20px; } .today_at_the_zoo .today_calendar .heading h2 { color: #1c2c32; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 30px; font-weight: normal; letter-spacing: 0.1em; line-height: 1.2; text-transform: uppercase; margin-bottom: 80px; font-weight: 600; padding-bottom: 60px; margin-bottom: 0 !important; } @media (max-width: 1000px) { .today_at_the_zoo .today_calendar .heading h2 { font-size: 24px; margin-bottom: 40px; } } @media (max-width: 600px) { .today_at_the_zoo .today_calendar .heading h2 { text-align: center; font-weight: 600; } } @media (min-width: 601px) { .today_at_the_zoo .today_calendar .heading h2 { display: inline-block; } } @media (max-width: 600px) { .today_at_the_zoo .today_calendar .heading h2 { padding-bottom: 10px; } } .today_at_the_zoo .today_calendar .heading .hours { color: #e45b25; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: normal; letter-spacing: 0.05em; line-height: 1.5; font-size: 18px !important; line-height: 1.4; } @media (max-width: 1000px) { .today_at_the_zoo .today_calendar .heading .hours { font-size: 16px; } } @media (max-width: 600px) { .today_at_the_zoo .today_calendar .heading .hours { font-size: 15px; } } .today_at_the_zoo .today_calendar .heading .hours a, .today_at_the_zoo .today_calendar .heading .hours [href] { position: relative; display: inline; color: #20c7d2; font-style: italic; font-weight: bold; transition: color 0.3s; box-shadow: 0 0 0 rgba(32, 199, 210, 0); transition: color 0.3s, box-shadow 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); cursor: pointer; } .today_at_the_zoo .today_calendar .heading .hours a:hover, .today_at_the_zoo .today_calendar .heading .hours [href]:hover { box-shadow: 0 2px 0 #20c7d2; } @media (min-width: 601px) { .today_at_the_zoo .today_calendar .heading .hours { float: right; margin-top: -10px; text-align: right; } } @media (max-width: 600px) { .today_at_the_zoo .today_calendar .heading .hours { text-align: center; padding-bottom: 30px; } } .today_at_the_zoo .today_calendar .heading .hours .label { font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } @media (min-width: 601px) { .today_at_the_zoo .today_calendar .heading .hours .label { display: block; } } @media (max-width: 600px) { .today_at_the_zoo .today_calendar .heading .hours .label:before { content: 'Zoo '; } .today_at_the_zoo .today_calendar .heading .hours .label:after { content: ':'; } } .today_at_the_zoo .today_calendar .heading .hours .times em { font-family: "merriweather", "Times New Roman", serif; font-size: 16px; } .today_at_the_zoo .today_calendar p { color: #1c2c32; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: normal; letter-spacing: 0.05em; line-height: 1.5; font-family: "merriweather", "Times New Roman", serif; font-size: 16px; line-height: 1.9; letter-spacing: 0.04em; position: relative; } @media (max-width: 1000px) { .today_at_the_zoo .today_calendar p { font-size: 16px; } } @media (max-width: 600px) { .today_at_the_zoo .today_calendar p { font-size: 15px; } } @media (max-width: 1000px) { .today_at_the_zoo .today_calendar p { font-size: 14px; } } @media (max-width: 600px) { .today_at_the_zoo .today_calendar p { font-size: 13px; } } .today_at_the_zoo .today_calendar p a, .today_at_the_zoo .today_calendar p [href] { position: relative; display: inline; color: #20c7d2; font-style: italic; font-weight: bold; transition: color 0.3s; box-shadow: 0 0 0 rgba(32, 199, 210, 0); transition: color 0.3s, box-shadow 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); cursor: pointer; } .today_at_the_zoo .today_calendar p a:hover, .today_at_the_zoo .today_calendar p [href]:hover { box-shadow: 0 2px 0 #20c7d2; } .today_at_the_zoo .today_calendar .today_calendar_list a { display: block; position: relative; width: 100%; white-space: nowrap; color: #1c2c32; box-sizing: border-box; margin-bottom: 20px; background: #e8eaeb; border-radius: 3px; overflow: hidden; transition: background 0.3s; cursor: pointer; /* &[data-category="attraction"], &[data-category="keeper-chat"], &[data-category="animal-extra"] { } */ } @media (max-width: 600px) { .today_at_the_zoo .today_calendar .today_calendar_list a { margin-bottom: 10px; } } .today_at_the_zoo .today_calendar .today_calendar_list a:before, .today_at_the_zoo .today_calendar .today_calendar_list a .image { display: block; position: absolute; top: 0; left: 0; width: 180px; height: 100%; background-color: #1c2c32; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; transition: opacity 1s; } @media (max-width: 600px) { .today_at_the_zoo .today_calendar .today_calendar_list a:before, .today_at_the_zoo .today_calendar .today_calendar_list a .image { display: none; } } .today_at_the_zoo .today_calendar .today_calendar_list a:before { content: ''; background: #1c2c32; } .today_at_the_zoo .today_calendar .today_calendar_list a .content { display: inline-block; vertical-align: middle; white-space: normal; padding: 15px 160px 15px 220px; } @media (max-width: 1000px) { .today_at_the_zoo .today_calendar .today_calendar_list a .content { padding-top: 20px; padding-bottom: 20px; padding-left: 210px; } } @media (max-width: 600px) { .today_at_the_zoo .today_calendar .today_calendar_list a .content { display: block; padding: 15px 20px; } } .today_at_the_zoo .today_calendar .today_calendar_list a .content .title { display: inline-block; vertical-align: middle; white-space: normal; font-family: "merriweather", "Times New Roman", serif; font-size: 18px; letter-spacing: 0.025em; line-height: 1.5; transition: color 0.3s; } @media (max-width: 1000px) { .today_at_the_zoo .today_calendar .today_calendar_list a .content .title { font-size: 16px; } } @media (max-width: 600px) { .today_at_the_zoo .today_calendar .today_calendar_list a .content .title { display: block; } } .today_at_the_zoo .today_calendar .today_calendar_list a .content .time { font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.2; transition: color 0.3s; } @media (min-width: 601px) { .today_at_the_zoo .today_calendar .today_calendar_list a .content .time { position: absolute; top: 26px; right: 40px; } } @media (min-width: 601px) and (max-width: 1000px) { .today_at_the_zoo .today_calendar .today_calendar_list a .content .time { right: 30px; } } @media (min-width: 601px) and (max-width: 600px) { .today_at_the_zoo .today_calendar .today_calendar_list a .content .time { top: 16px; right: 20px; } } @media (max-width: 1000px) { .today_at_the_zoo .today_calendar .today_calendar_list a .content .time { font-size: 16px; } } @media (max-width: 600px) { .today_at_the_zoo .today_calendar .today_calendar_list a .content .time { float: left; display: block; font-size: 15px; padding-top: 5px; } } .today_at_the_zoo .today_calendar .today_calendar_list a .content .category { display: block; color: rgba(28, 44, 50, 0.5); font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: normal; letter-spacing: 0.05em; line-height: 1.5; font-size: 15px; line-height: 1.2; padding-top: 5px; } @media (max-width: 1000px) { .today_at_the_zoo .today_calendar .today_calendar_list a .content .category { font-size: 16px; } } @media (max-width: 600px) { .today_at_the_zoo .today_calendar .today_calendar_list a .content .category { font-size: 15px; } } .today_at_the_zoo .today_calendar .today_calendar_list a .content .category a, .today_at_the_zoo .today_calendar .today_calendar_list a .content .category [href] { position: relative; display: inline; color: #20c7d2; font-style: italic; font-weight: bold; transition: color 0.3s; box-shadow: 0 0 0 rgba(32, 199, 210, 0); transition: color 0.3s, box-shadow 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); cursor: pointer; } .today_at_the_zoo .today_calendar .today_calendar_list a .content .category a:hover, .today_at_the_zoo .today_calendar .today_calendar_list a .content .category [href]:hover { box-shadow: 0 2px 0 #20c7d2; } @media (max-width: 600px) { .today_at_the_zoo .today_calendar .today_calendar_list a .content .category { font-size: 14px; text-align: right; padding-top: 7px; padding-bottom: 3px; /* position: absolute; bottom: 13px; right: 20px; */ } } .today_at_the_zoo .today_calendar .today_calendar_list a .content .more { position: absolute; bottom: 28px; right: 40px; color: rgba(28, 44, 50, 0.5); font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 12px; font-weight: bold; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.4; transition: color 0.3s; } @media (max-width: 1000px) { .today_at_the_zoo .today_calendar .today_calendar_list a .content .more { right: 30px; } } @media (max-width: 600px) { .today_at_the_zoo .today_calendar .today_calendar_list a .content .more { display: none; } } @media (min-width: 601px) { .today_at_the_zoo .today_calendar .today_calendar_list a:after { content: ''; display: inline-block; vertical-align: middle; width: 0; height: 100%; min-height: 110px; } } .today_at_the_zoo .today_calendar .today_calendar_list a.daily .content .title { font-size: 16px; } .today_at_the_zoo .today_calendar .today_calendar_list a.daily .content .title .category { display: inline-block; padding-top: 0; } @media (min-width: 601px) { .today_at_the_zoo .today_calendar .today_calendar_list a.daily .content .title .category:before { content: '·'; padding: 0 10px; } } @media (max-width: 1000px) { .today_at_the_zoo .today_calendar .today_calendar_list a.daily .content .title { font-size: 15px; } } .today_at_the_zoo .today_calendar .today_calendar_list a.daily .content .time { transition: opacity 0.3s, transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .today_at_the_zoo .today_calendar .today_calendar_list a.daily .content .more { opacity: 0; transform: translateY(10px); transition: opacity 0.3s, transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } @media (min-width: 601px) { .today_at_the_zoo .today_calendar .today_calendar_list a.daily:after { min-height: 72px; } } .today_at_the_zoo .today_calendar .today_calendar_list a:hover { background: #dee0e2; } @media (min-width: 1001px) { .today_at_the_zoo .today_calendar .today_calendar_list a:hover .content .more { color: #e45b25; } .today_at_the_zoo .today_calendar .today_calendar_list a:hover.daily .content .time { color: #1c2c32; opacity: 0; transform: translateY(-10px); } .today_at_the_zoo .today_calendar .today_calendar_list a:hover.daily .content .more { opacity: 1; transform: translateY(0); } } .today_at_the_zoo .today_calendar .today_calendar_list a.adult-adventure, .today_at_the_zoo .today_calendar .today_calendar_list a.adult-adventure-alcohol, .today_at_the_zoo .today_calendar .today_calendar_list a.coffee-connection, .today_at_the_zoo .today_calendar .today_calendar_list a.senior-wednesday, .today_at_the_zoo .today_calendar .today_calendar_list a.tot-tuesday, .today_at_the_zoo .today_calendar .today_calendar_list a.discount { border-right: solid 8px #dda63a; } @media (max-width: 600px) { .today_at_the_zoo .today_calendar .today_calendar_list a.adult-adventure, .today_at_the_zoo .today_calendar .today_calendar_list a.adult-adventure-alcohol, .today_at_the_zoo .today_calendar .today_calendar_list a.coffee-connection, .today_at_the_zoo .today_calendar .today_calendar_list a.senior-wednesday, .today_at_the_zoo .today_calendar .today_calendar_list a.tot-tuesday, .today_at_the_zoo .today_calendar .today_calendar_list a.discount { background: #fff; border: solid 2px #dda63a; } } @media (min-width: 601px) { .today_at_the_zoo .today_calendar .today_calendar_list a .signature .content, .today_at_the_zoo .today_calendar .today_calendar_list a .special-events .content { padding-top: 35px; padding-bottom: 35px; } } @media (max-width: 600px) { .today_at_the_zoo .today_calendar .today_calendar_list a .signature .content, .today_at_the_zoo .today_calendar .today_calendar_list a .special-events .content { padding-top: 20px; padding-bottom: 20px; } } @media (min-width: 601px) { .today_at_the_zoo .today_calendar .today_calendar_list a .signature .content .title, .today_at_the_zoo .today_calendar .today_calendar_list a .special-events .content .title { font-size: 20px; } } @media (min-width: 601px) { .today_at_the_zoo .today_calendar .today_calendar_list a .signature .content .title .category, .today_at_the_zoo .today_calendar .today_calendar_list a .special-events .content .title .category { position: absolute; bottom: 35px; right: 40px; font-size: 14px; } } @media (min-width: 601px) { .today_at_the_zoo .today_calendar .today_calendar_list a .signature .content .time, .today_at_the_zoo .today_calendar .today_calendar_list a .special-events .content .time { position: relative; top: 0; right: 0; display: block; padding-top: 5px; } } .today_at_the_zoo .today_calendar .today_calendar_list a .signature .content .more, .today_at_the_zoo .today_calendar .today_calendar_list a .special-events .content .more { display: none; } @media (max-width: 600px) { .today_at_the_zoo .today_calendar .today_calendar_list a .signature, .today_at_the_zoo .today_calendar .today_calendar_list a .special-events { padding-top: 160px; } .today_at_the_zoo .today_calendar .today_calendar_list a .signature .image, .today_at_the_zoo .today_calendar .today_calendar_list a .special-events .image { display: block; width: 100%; height: 160px; border-radius: 3px 3px 0 0; } } @media (min-width: 601px) { .today_at_the_zoo .today_calendar .button_outer { text-align: right; } } @media (max-width: 600px) { .today_at_the_zoo .today_calendar .button_outer { text-align: center; } } .today_at_the_zoo .today_calendar .button { position: relative; display: inline-block; z-index: 0; color: #1c2c32; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.2; padding: 10px 30px; background-color: transparent; border: 3px solid #e45b25; box-sizing: border-box; transition: color 0.3s; cursor: pointer; font-size: 14px; font-weight: bold; padding: 8px 30px; border-width: 2px; margin-top: 40px; } @media (max-width: 1000px) { .today_at_the_zoo .today_calendar .button { font-size: 16px; font-weight: bold; } } @media (max-width: 600px) { .today_at_the_zoo .today_calendar .button { letter-spacing: 0.1em; padding-left: 25px; padding-right: 25px; } } .today_at_the_zoo .today_calendar .button:after { content: ''; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background: #e45b25; transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .today_at_the_zoo .today_calendar .button:hover { color: #fff; } .today_at_the_zoo .today_calendar .button:hover:after { transform: scaleX(1); } @media (max-width: 1000px) { .today_at_the_zoo .today_calendar .button { font-size: 14px; } } .today_at_the_zoo .notices { color: #fff; background: #1c2c32; padding: 120px 0; padding-left: 120px; padding-right: 120px; box-sizing: border-box; } @media (max-width: 1200px) { .today_at_the_zoo .notices { padding-left: 80px; } } @media (max-width: 1000px) { .today_at_the_zoo .notices { padding-left: 50px; } } @media (max-width: 600px) { .today_at_the_zoo .notices { padding-left: 30px; } } @media (max-width: 1200px) { .today_at_the_zoo .notices { padding-right: 80px; } } @media (max-width: 1000px) { .today_at_the_zoo .notices { padding-right: 50px; } } @media (max-width: 600px) { .today_at_the_zoo .notices { padding-right: 30px; } } @media (min-width: 1001px) { .today_at_the_zoo .notices { float: left; width: 33.333%; } } @media (max-width: 1000px) { .today_at_the_zoo .notices { padding-top: 120px; padding-bottom: 120px; } } @media (max-width: 1000px) and (max-width: 1200px) { .today_at_the_zoo .notices { padding-top: 80px; } } @media (max-width: 1000px) and (max-width: 1000px) { .today_at_the_zoo .notices { padding-top: 80px; } } @media (max-width: 1000px) and (max-width: 1200px) { .today_at_the_zoo .notices { padding-bottom: 80px; } } @media (max-width: 1000px) and (max-width: 1000px) { .today_at_the_zoo .notices { padding-bottom: 80px; } } .today_at_the_zoo .notices h2 { color: #fff; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 30px; font-weight: normal; letter-spacing: 0.1em; line-height: 1.2; text-transform: uppercase; margin-bottom: 80px; padding-bottom: 30px; margin-bottom: 0; } @media (max-width: 1000px) { .today_at_the_zoo .notices h2 { font-size: 24px; margin-bottom: 40px; } } @media (max-width: 600px) { .today_at_the_zoo .notices h2 { text-align: center; font-weight: 600; } } @media (max-width: 1000px) { .today_at_the_zoo .notices h2 { padding-bottom: 0; } } .today_at_the_zoo .notices h3 { color: inherit; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.3; margin-top: 50px; margin-bottom: 20px; } @media (max-width: 1000px) { .today_at_the_zoo .notices h3 { font-size: 20px; } } @media (max-width: 600px) { .today_at_the_zoo .notices h3 { font-size: 18px; } } .today_at_the_zoo .notices ul li { position: relative; color: #fff; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: normal; letter-spacing: 0.05em; line-height: 1.5; font-family: "merriweather", "Times New Roman", serif; font-size: 16px; padding-bottom: 10px; } @media (max-width: 1000px) { .today_at_the_zoo .notices ul li { font-size: 16px; } } @media (max-width: 600px) { .today_at_the_zoo .notices ul li { font-size: 15px; } } .today_at_the_zoo .notices ul li a, .today_at_the_zoo .notices ul li [href] { position: relative; display: inline; color: #20c7d2; font-style: italic; font-weight: bold; transition: color 0.3s; box-shadow: 0 0 0 rgba(32, 199, 210, 0); transition: color 0.3s, box-shadow 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); cursor: pointer; } .today_at_the_zoo .notices ul li a:hover, .today_at_the_zoo .notices ul li [href]:hover { box-shadow: 0 2px 0 #20c7d2; } @media (max-width: 1000px) { .today_at_the_zoo .notices ul li { font-size: 14px; } } .today_at_the_zoo .notices p { color: #fff; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: normal; letter-spacing: 0.05em; line-height: 1.5; } @media (max-width: 1000px) { .today_at_the_zoo .notices p { font-size: 16px; } } @media (max-width: 600px) { .today_at_the_zoo .notices p { font-size: 15px; } } .today_at_the_zoo .notices p a, .today_at_the_zoo .notices p [href] { position: relative; display: inline; color: #20c7d2; font-style: italic; font-weight: bold; transition: color 0.3s; box-shadow: 0 0 0 rgba(32, 199, 210, 0); transition: color 0.3s, box-shadow 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); cursor: pointer; } .today_at_the_zoo .notices p a:hover, .today_at_the_zoo .notices p [href]:hover { box-shadow: 0 2px 0 #20c7d2; } .today_at_the_zoo .notices p.footnote { color: rgba(255, 255, 255, 0.5); font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: normal; letter-spacing: 0.05em; line-height: 1.5; font-size: 14px; line-height: 1.4; letter-spacing: 0.075em; } @media (max-width: 1000px) { .today_at_the_zoo .notices p.footnote { font-size: 16px; } } @media (max-width: 600px) { .today_at_the_zoo .notices p.footnote { font-size: 15px; } } .today_at_the_zoo .notices p.footnote a, .today_at_the_zoo .notices p.footnote [href] { position: relative; display: inline; color: #20c7d2; font-style: italic; font-weight: bold; transition: color 0.3s; box-shadow: 0 0 0 rgba(32, 199, 210, 0); transition: color 0.3s, box-shadow 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); cursor: pointer; } .today_at_the_zoo .notices p.footnote a:hover, .today_at_the_zoo .notices p.footnote [href]:hover { box-shadow: 0 2px 0 #20c7d2; } @media (max-width: 1000px) { .today_at_the_zoo .notices p.footnote { font-size: 12px; } } @media (max-width: 600px) { .today_at_the_zoo .notices .button_outer { text-align: center; } } .today_at_the_zoo .notices .button { position: relative; display: inline-block; z-index: 0; color: #fff; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.2; padding: 10px 30px; background-color: transparent; border: 3px solid #20c7d2; box-sizing: border-box; transition: color 0.3s; cursor: pointer; font-size: 14px; font-weight: bold; padding: 8px 30px; border-width: 2px; margin-top: 50px; } @media (max-width: 1000px) { .today_at_the_zoo .notices .button { font-size: 16px; font-weight: bold; } } @media (max-width: 600px) { .today_at_the_zoo .notices .button { letter-spacing: 0.1em; padding-left: 25px; padding-right: 25px; } } .today_at_the_zoo .notices .button:after { content: ''; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background: #20c7d2; transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .today_at_the_zoo .notices .button:hover { color: #1c2c32; } .today_at_the_zoo .notices .button:hover:after { transform: scaleX(1); } @media (max-width: 1000px) { .today_at_the_zoo .notices .button { font-size: 14px; } } @media (min-width: 1001px) { .today_at_the_zoo:before { content: ''; position: absolute; z-index: 0; top: 0; left: 0; width: 66.667%; height: 100%; background: #f3f4f5 url('../../images/layout/bg_topography.png?1519924532') no-repeat 0 0/1400px auto; background-attachment: fixed; } } .today_at_the_zoo .jagged_bottom { position: absolute; z-index: 1; bottom: 0; left: 0; width: 100%; height: 7.6vw; background: url('../../images/layout/jagged_bottom.png?1519925378') no-repeat 0 100%/100% auto; pointer-events: none; /* @include mobile() { background-image: image-url('layout/jagged_top_home_page_mobile.png'); } */ } @media (max-width: 600px) { .today_at_the_zoo .jagged_bottom { /* bottom: -11.4vw; height: 11.4vw; */ background-size: 150% auto; } } #subscribe_pup .pup_inner { width: 540px; padding-top: 120px; padding-bottom: 120px; padding-left: 120px; padding-right: 120px; border-top: solid 10px #e45b25; } @media (max-width: 1200px) { #subscribe_pup .pup_inner { padding-top: 80px; } } @media (max-width: 1000px) { #subscribe_pup .pup_inner { padding-top: 80px; } } @media (max-width: 1200px) { #subscribe_pup .pup_inner { padding-bottom: 80px; } } @media (max-width: 1000px) { #subscribe_pup .pup_inner { padding-bottom: 80px; } } @media (max-width: 1200px) { #subscribe_pup .pup_inner { padding-left: 80px; } } @media (max-width: 1000px) { #subscribe_pup .pup_inner { padding-left: 50px; } } @media (max-width: 600px) { #subscribe_pup .pup_inner { padding-left: 30px; } } @media (max-width: 1200px) { #subscribe_pup .pup_inner { padding-right: 80px; } } @media (max-width: 1000px) { #subscribe_pup .pup_inner { padding-right: 50px; } } @media (max-width: 600px) { #subscribe_pup .pup_inner { padding-right: 30px; } } @media (min-width: 1201px) { #subscribe_pup .pup_inner { padding: 80px; } } @media (max-width: 600px) { #subscribe_pup .pup_inner { padding-bottom: 165px; } } #subscribe_pup .pup_inner form { overflow: hidden; overflow: visible; } #subscribe_pup .pup_inner form fieldset { position: relative; margin-top: 28px; } #subscribe_pup .pup_inner form fieldset h3 { color: inherit; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.3; margin-top: 50px; margin-bottom: 20px; } @media (max-width: 1000px) { #subscribe_pup .pup_inner form fieldset h3 { font-size: 20px; } } @media (max-width: 600px) { #subscribe_pup .pup_inner form fieldset h3 { font-size: 18px; } } #subscribe_pup .pup_inner form fieldset.notempty { /* input[type=color], input[type=date], input[type=datetime], input[type=datetime-local], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], textarea { &:focus + label { color: rgba(#000,0.5); } } */ } #subscribe_pup .pup_inner form fieldset.notempty input[type=date] { color: #8e9699; } #subscribe_pup .pup_inner form fieldset.notempty label { opacity: 1; transform: translateY(-29px) scale(0.75); } #subscribe_pup .pup_inner form fieldset.notempty .placeholder { opacity: 0 !important; } #subscribe_pup .pup_inner form fieldset .error_message { color: #1c2c32; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: normal; letter-spacing: 0.05em; line-height: 1.5; color: #e45b25; text-align: right; padding-top: 10px; } @media (max-width: 1000px) { #subscribe_pup .pup_inner form fieldset .error_message { font-size: 16px; } } @media (max-width: 600px) { #subscribe_pup .pup_inner form fieldset .error_message { font-size: 15px; } } #subscribe_pup .pup_inner form fieldset .error_message a, #subscribe_pup .pup_inner form fieldset .error_message [href] { position: relative; display: inline; color: #20c7d2; font-style: italic; font-weight: bold; transition: color 0.3s; box-shadow: 0 0 0 rgba(32, 199, 210, 0); transition: color 0.3s, box-shadow 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); cursor: pointer; } #subscribe_pup .pup_inner form fieldset .error_message a:hover, #subscribe_pup .pup_inner form fieldset .error_message [href]:hover { box-shadow: 0 2px 0 #20c7d2; } #subscribe_pup .pup_inner form fieldset.error input[type=color], #subscribe_pup .pup_inner form fieldset.error input[type=date], #subscribe_pup .pup_inner form fieldset.error input[type=datetime], #subscribe_pup .pup_inner form fieldset.error input[type=datetime-local], #subscribe_pup .pup_inner form fieldset.error input[type=email], #subscribe_pup .pup_inner form fieldset.error input[type=month], #subscribe_pup .pup_inner form fieldset.error input[type=number], #subscribe_pup .pup_inner form fieldset.error input[type=password], #subscribe_pup .pup_inner form fieldset.error input[type=search], #subscribe_pup .pup_inner form fieldset.error input[type=tel], #subscribe_pup .pup_inner form fieldset.error input[type=text], #subscribe_pup .pup_inner form fieldset.error input[type=time], #subscribe_pup .pup_inner form fieldset.error input[type=url], #subscribe_pup .pup_inner form fieldset.error input[type=week], #subscribe_pup .pup_inner form fieldset.error textarea, #subscribe_pup .pup_inner form fieldset.error select { border-bottom-color: #e45b25; box-shadow: 0 1px 0 #e45b25; } #subscribe_pup .pup_inner form fieldset.half { width: 50%; display: inline-block; vertical-align: top; } #subscribe_pup .pup_inner form input[type=date] { color: transparent; } #subscribe_pup .pup_inner form select { background-image: url('../../images/layout/select_bg.png?1528821296'); background-position: 100% 50%; background-repeat: no-repeat; background-size: 15px 8px; } #subscribe_pup .pup_inner form select:focus { background-image: url('../../images/layout/select_focus_bg.png?1528821338'); } #subscribe_pup .pup_inner form textarea { height: 24px; overflow: hidden; overflow-y: auto; -ms-overflow-style: none; } #subscribe_pup .pup_inner form input[type=color][data-validate*="required"] + .placeholder:after, #subscribe_pup .pup_inner form input[type=color][data-validate*="required"] + * + .placeholder:after, #subscribe_pup .pup_inner form input[type=date][data-validate*="required"] + .placeholder:after, #subscribe_pup .pup_inner form input[type=date][data-validate*="required"] + * + .placeholder:after, #subscribe_pup .pup_inner form input[type=datetime][data-validate*="required"] + .placeholder:after, #subscribe_pup .pup_inner form input[type=datetime][data-validate*="required"] + * + .placeholder:after, #subscribe_pup .pup_inner form input[type=datetime-local][data-validate*="required"] + .placeholder:after, #subscribe_pup .pup_inner form input[type=datetime-local][data-validate*="required"] + * + .placeholder:after, #subscribe_pup .pup_inner form input[type=email][data-validate*="required"] + .placeholder:after, #subscribe_pup .pup_inner form input[type=email][data-validate*="required"] + * + .placeholder:after, #subscribe_pup .pup_inner form input[type=month][data-validate*="required"] + .placeholder:after, #subscribe_pup .pup_inner form input[type=month][data-validate*="required"] + * + .placeholder:after, #subscribe_pup .pup_inner form input[type=number][data-validate*="required"] + .placeholder:after, #subscribe_pup .pup_inner form input[type=number][data-validate*="required"] + * + .placeholder:after, #subscribe_pup .pup_inner form input[type=password][data-validate*="required"] + .placeholder:after, #subscribe_pup .pup_inner form input[type=password][data-validate*="required"] + * + .placeholder:after, #subscribe_pup .pup_inner form input[type=search][data-validate*="required"] + .placeholder:after, #subscribe_pup .pup_inner form input[type=search][data-validate*="required"] + * + .placeholder:after, #subscribe_pup .pup_inner form input[type=tel][data-validate*="required"] + .placeholder:after, #subscribe_pup .pup_inner form input[type=tel][data-validate*="required"] + * + .placeholder:after, #subscribe_pup .pup_inner form input[type=text][data-validate*="required"] + .placeholder:after, #subscribe_pup .pup_inner form input[type=text][data-validate*="required"] + * + .placeholder:after, #subscribe_pup .pup_inner form input[type=time][data-validate*="required"] + .placeholder:after, #subscribe_pup .pup_inner form input[type=time][data-validate*="required"] + * + .placeholder:after, #subscribe_pup .pup_inner form input[type=url][data-validate*="required"] + .placeholder:after, #subscribe_pup .pup_inner form input[type=url][data-validate*="required"] + * + .placeholder:after, #subscribe_pup .pup_inner form input[type=week][data-validate*="required"] + .placeholder:after, #subscribe_pup .pup_inner form input[type=week][data-validate*="required"] + * + .placeholder:after, #subscribe_pup .pup_inner form textarea[data-validate*="required"] + .placeholder:after, #subscribe_pup .pup_inner form textarea[data-validate*="required"] + * + .placeholder:after, #subscribe_pup .pup_inner form select[data-validate*="required"] + .placeholder:after, #subscribe_pup .pup_inner form select[data-validate*="required"] + * + .placeholder:after { content: ' *'; } #subscribe_pup .pup_inner form .checkbox_outer { display: inline-block; position: relative; } #subscribe_pup .pup_inner form .checkbox_outer label { color: #8e9699; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: normal; letter-spacing: 0.05em; line-height: 1.5; top: 0; display: inline-block; vertical-align: middle; position: relative; padding-left: 32px; pointer-events: auto; transition: color 0.3s; } @media (max-width: 1000px) { #subscribe_pup .pup_inner form .checkbox_outer label { font-size: 16px; } } @media (max-width: 600px) { #subscribe_pup .pup_inner form .checkbox_outer label { font-size: 15px; } } #subscribe_pup .pup_inner form .checkbox_outer label a, #subscribe_pup .pup_inner form .checkbox_outer label [href] { position: relative; display: inline; color: #20c7d2; font-style: italic; font-weight: bold; transition: color 0.3s; box-shadow: 0 0 0 rgba(32, 199, 210, 0); transition: color 0.3s, box-shadow 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); cursor: pointer; } #subscribe_pup .pup_inner form .checkbox_outer label a:hover, #subscribe_pup .pup_inner form .checkbox_outer label [href]:hover { box-shadow: 0 2px 0 #20c7d2; } @media (max-width: 600px) { #subscribe_pup .pup_inner form .checkbox_outer label { font-size: 18px; } } #subscribe_pup .pup_inner form .checkbox_outer:before { content: ''; position: absolute; top: 13px; left: 0; border-radius: 100%; border: solid 2px #a4abad; width: 20px; height: 20px; box-sizing: border-box; transition: border 0.3s; } #subscribe_pup .pup_inner form .checkbox_outer .checkbox_inner { content: ''; position: absolute; top: 18px; left: 5px; width: 10px; height: 10px; border-radius: 100%; box-sizing: border-box; background: #dda63a; transform: scale(0); opacity: 0; transition: opacity 0.3s, transform 0.3s; } #subscribe_pup .pup_inner form .checkbox_outer.has_children:before { content: none; } #subscribe_pup .pup_inner form .checkbox_outer.has_children .checkbox_inner { display: none; } #subscribe_pup .pup_inner form .checkbox_outer.child { padding-left: 32px; } #subscribe_pup .pup_inner form .checkbox_outer.child:before { left: 32px; } #subscribe_pup .pup_inner form .checkbox_outer.child .checkbox_inner { left: 37px; } #subscribe_pup .pup_inner form .checkbox_outer:hover label { color: #49565b; } #subscribe_pup .pup_inner form .checkbox_outer:hover:before { border-color: #1c2c32; } #subscribe_pup .pup_inner form button, #subscribe_pup .pup_inner form input[type=submit], #subscribe_pup .pup_inner form input[type=button] { position: relative; display: inline-block; z-index: 0; color: #1c2c32; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.2; padding: 10px 30px; background-color: transparent; border: 3px solid #e45b25; box-sizing: border-box; transition: color 0.3s; cursor: pointer; } @media (max-width: 1000px) { #subscribe_pup .pup_inner form button, #subscribe_pup .pup_inner form input[type=submit], #subscribe_pup .pup_inner form input[type=button] { font-size: 16px; font-weight: bold; } } @media (max-width: 600px) { #subscribe_pup .pup_inner form button, #subscribe_pup .pup_inner form input[type=submit], #subscribe_pup .pup_inner form input[type=button] { letter-spacing: 0.1em; padding-left: 25px; padding-right: 25px; } } #subscribe_pup .pup_inner form button:after, #subscribe_pup .pup_inner form input[type=submit]:after, #subscribe_pup .pup_inner form input[type=button]:after { content: ''; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background: #e45b25; transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } #subscribe_pup .pup_inner form button:hover, #subscribe_pup .pup_inner form input[type=submit]:hover, #subscribe_pup .pup_inner form input[type=button]:hover { color: #fff; } #subscribe_pup .pup_inner form button:hover:after, #subscribe_pup .pup_inner form input[type=submit]:hover:after, #subscribe_pup .pup_inner form input[type=button]:hover:after { transform: scaleX(1); } #subscribe_pup .pup_inner form .submit_outer { text-align: right; } #subscribe_pup .pup_inner form > * { transition: opacity 1s; } #subscribe_pup .pup_inner form.sending > * { opacity: 0; pointer-events: none; } #subscribe_pup .pup_inner form .ajax_response { /* @include spacing('margin-top', 0.5); @include spacing('margin-bottom', 0.5); */ display: none; } #subscribe_pup .pup_inner form.show_response > * { display: none; } #subscribe_pup .pup_inner form.show_response > fieldset { display: none !important; } #subscribe_pup .pup_inner form.show_response .ajax_response { display: block; } #subscribe_pup .pup_inner p { color: #1c2c32; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: normal; letter-spacing: 0.05em; line-height: 1.5; font-family: "merriweather", "Times New Roman", serif; font-size: 16px; line-height: 1.9; letter-spacing: 0.04em; margin-bottom: 40px; } @media (max-width: 1000px) { #subscribe_pup .pup_inner p { font-size: 16px; } } @media (max-width: 600px) { #subscribe_pup .pup_inner p { font-size: 15px; } } @media (max-width: 1000px) { #subscribe_pup .pup_inner p { font-size: 14px; } } @media (max-width: 600px) { #subscribe_pup .pup_inner p { font-size: 13px; } } #subscribe_pup .pup_inner p a, #subscribe_pup .pup_inner p [href] { position: relative; display: inline; color: #20c7d2; font-style: italic; font-weight: bold; transition: color 0.3s; box-shadow: 0 0 0 rgba(32, 199, 210, 0); transition: color 0.3s, box-shadow 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); cursor: pointer; } #subscribe_pup .pup_inner p a:hover, #subscribe_pup .pup_inner p [href]:hover { box-shadow: 0 2px 0 #20c7d2; } #subscribe_form { overflow: hidden; } #subscribe_form fieldset { position: relative; margin-top: 28px; } #subscribe_form fieldset h3 { color: inherit; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.3; margin-top: 50px; margin-bottom: 20px; } @media (max-width: 1000px) { #subscribe_form fieldset h3 { font-size: 20px; } } @media (max-width: 600px) { #subscribe_form fieldset h3 { font-size: 18px; } } #subscribe_form fieldset.notempty { /* input[type=color], input[type=date], input[type=datetime], input[type=datetime-local], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], textarea { &:focus + label { color: rgba(#000,0.5); } } */ } #subscribe_form fieldset.notempty input[type=date] { color: #8e9699; } #subscribe_form fieldset.notempty label { opacity: 1; transform: translateY(-29px) scale(0.75); } #subscribe_form fieldset.notempty .placeholder { opacity: 0 !important; } #subscribe_form fieldset .error_message { color: #1c2c32; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: normal; letter-spacing: 0.05em; line-height: 1.5; color: #e45b25; text-align: right; padding-top: 10px; } @media (max-width: 1000px) { #subscribe_form fieldset .error_message { font-size: 16px; } } @media (max-width: 600px) { #subscribe_form fieldset .error_message { font-size: 15px; } } #subscribe_form fieldset .error_message a, #subscribe_form fieldset .error_message [href] { position: relative; display: inline; color: #20c7d2; font-style: italic; font-weight: bold; transition: color 0.3s; box-shadow: 0 0 0 rgba(32, 199, 210, 0); transition: color 0.3s, box-shadow 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); cursor: pointer; } #subscribe_form fieldset .error_message a:hover, #subscribe_form fieldset .error_message [href]:hover { box-shadow: 0 2px 0 #20c7d2; } #subscribe_form fieldset.error input[type=color], #subscribe_form fieldset.error input[type=date], #subscribe_form fieldset.error input[type=datetime], #subscribe_form fieldset.error input[type=datetime-local], #subscribe_form fieldset.error input[type=email], #subscribe_form fieldset.error input[type=month], #subscribe_form fieldset.error input[type=number], #subscribe_form fieldset.error input[type=password], #subscribe_form fieldset.error input[type=search], #subscribe_form fieldset.error input[type=tel], #subscribe_form fieldset.error input[type=text], #subscribe_form fieldset.error input[type=time], #subscribe_form fieldset.error input[type=url], #subscribe_form fieldset.error input[type=week], #subscribe_form fieldset.error textarea, #subscribe_form fieldset.error select { border-bottom-color: #e45b25; box-shadow: 0 1px 0 #e45b25; } #subscribe_form fieldset.half { width: 50%; display: inline-block; vertical-align: top; } #subscribe_form input[type=date] { color: transparent; } #subscribe_form select { background-image: url('../../images/layout/select_bg.png?1528821296'); background-position: 100% 50%; background-repeat: no-repeat; background-size: 15px 8px; } #subscribe_form select:focus { background-image: url('../../images/layout/select_focus_bg.png?1528821338'); } #subscribe_form textarea { height: 24px; overflow: hidden; overflow-y: auto; -ms-overflow-style: none; } #subscribe_form input[type=color][data-validate*="required"] + .placeholder:after, #subscribe_form input[type=color][data-validate*="required"] + * + .placeholder:after, #subscribe_form input[type=date][data-validate*="required"] + .placeholder:after, #subscribe_form input[type=date][data-validate*="required"] + * + .placeholder:after, #subscribe_form input[type=datetime][data-validate*="required"] + .placeholder:after, #subscribe_form input[type=datetime][data-validate*="required"] + * + .placeholder:after, #subscribe_form input[type=datetime-local][data-validate*="required"] + .placeholder:after, #subscribe_form input[type=datetime-local][data-validate*="required"] + * + .placeholder:after, #subscribe_form input[type=email][data-validate*="required"] + .placeholder:after, #subscribe_form input[type=email][data-validate*="required"] + * + .placeholder:after, #subscribe_form input[type=month][data-validate*="required"] + .placeholder:after, #subscribe_form input[type=month][data-validate*="required"] + * + .placeholder:after, #subscribe_form input[type=number][data-validate*="required"] + .placeholder:after, #subscribe_form input[type=number][data-validate*="required"] + * + .placeholder:after, #subscribe_form input[type=password][data-validate*="required"] + .placeholder:after, #subscribe_form input[type=password][data-validate*="required"] + * + .placeholder:after, #subscribe_form input[type=search][data-validate*="required"] + .placeholder:after, #subscribe_form input[type=search][data-validate*="required"] + * + .placeholder:after, #subscribe_form input[type=tel][data-validate*="required"] + .placeholder:after, #subscribe_form input[type=tel][data-validate*="required"] + * + .placeholder:after, #subscribe_form input[type=text][data-validate*="required"] + .placeholder:after, #subscribe_form input[type=text][data-validate*="required"] + * + .placeholder:after, #subscribe_form input[type=time][data-validate*="required"] + .placeholder:after, #subscribe_form input[type=time][data-validate*="required"] + * + .placeholder:after, #subscribe_form input[type=url][data-validate*="required"] + .placeholder:after, #subscribe_form input[type=url][data-validate*="required"] + * + .placeholder:after, #subscribe_form input[type=week][data-validate*="required"] + .placeholder:after, #subscribe_form input[type=week][data-validate*="required"] + * + .placeholder:after, #subscribe_form textarea[data-validate*="required"] + .placeholder:after, #subscribe_form textarea[data-validate*="required"] + * + .placeholder:after, #subscribe_form select[data-validate*="required"] + .placeholder:after, #subscribe_form select[data-validate*="required"] + * + .placeholder:after { content: ' *'; } #subscribe_form .checkbox_outer { display: inline-block; position: relative; } #subscribe_form .checkbox_outer label { color: #8e9699; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: normal; letter-spacing: 0.05em; line-height: 1.5; top: 0; display: inline-block; vertical-align: middle; position: relative; padding-left: 32px; pointer-events: auto; transition: color 0.3s; } @media (max-width: 1000px) { #subscribe_form .checkbox_outer label { font-size: 16px; } } @media (max-width: 600px) { #subscribe_form .checkbox_outer label { font-size: 15px; } } #subscribe_form .checkbox_outer label a, #subscribe_form .checkbox_outer label [href] { position: relative; display: inline; color: #20c7d2; font-style: italic; font-weight: bold; transition: color 0.3s; box-shadow: 0 0 0 rgba(32, 199, 210, 0); transition: color 0.3s, box-shadow 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); cursor: pointer; } #subscribe_form .checkbox_outer label a:hover, #subscribe_form .checkbox_outer label [href]:hover { box-shadow: 0 2px 0 #20c7d2; } @media (max-width: 600px) { #subscribe_form .checkbox_outer label { font-size: 18px; } } #subscribe_form .checkbox_outer:before { content: ''; position: absolute; top: 13px; left: 0; border-radius: 100%; border: solid 2px #a4abad; width: 20px; height: 20px; box-sizing: border-box; transition: border 0.3s; } #subscribe_form .checkbox_outer .checkbox_inner { content: ''; position: absolute; top: 18px; left: 5px; width: 10px; height: 10px; border-radius: 100%; box-sizing: border-box; background: #dda63a; transform: scale(0); opacity: 0; transition: opacity 0.3s, transform 0.3s; } #subscribe_form .checkbox_outer.has_children:before { content: none; } #subscribe_form .checkbox_outer.has_children .checkbox_inner { display: none; } #subscribe_form .checkbox_outer.child { padding-left: 32px; } #subscribe_form .checkbox_outer.child:before { left: 32px; } #subscribe_form .checkbox_outer.child .checkbox_inner { left: 37px; } #subscribe_form .checkbox_outer:hover label { color: #49565b; } #subscribe_form .checkbox_outer:hover:before { border-color: #1c2c32; } #subscribe_form button, #subscribe_form input[type=submit], #subscribe_form input[type=button] { position: relative; display: inline-block; z-index: 0; color: #1c2c32; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.2; padding: 10px 30px; background-color: transparent; border: 3px solid #e45b25; box-sizing: border-box; transition: color 0.3s; cursor: pointer; } @media (max-width: 1000px) { #subscribe_form button, #subscribe_form input[type=submit], #subscribe_form input[type=button] { font-size: 16px; font-weight: bold; } } @media (max-width: 600px) { #subscribe_form button, #subscribe_form input[type=submit], #subscribe_form input[type=button] { letter-spacing: 0.1em; padding-left: 25px; padding-right: 25px; } } #subscribe_form button:after, #subscribe_form input[type=submit]:after, #subscribe_form input[type=button]:after { content: ''; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background: #e45b25; transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } #subscribe_form button:hover, #subscribe_form input[type=submit]:hover, #subscribe_form input[type=button]:hover { color: #fff; } #subscribe_form button:hover:after, #subscribe_form input[type=submit]:hover:after, #subscribe_form input[type=button]:hover:after { transform: scaleX(1); } #subscribe_form .submit_outer { text-align: right; } #subscribe_form > * { transition: opacity 1s; } #subscribe_form.sending > * { opacity: 0; pointer-events: none; } #subscribe_form .ajax_response { /* @include spacing('margin-top', 0.5); @include spacing('margin-bottom', 0.5); */ display: none; } #subscribe_form.show_response > * { display: none; } #subscribe_form.show_response > fieldset { display: none !important; } #subscribe_form.show_response .ajax_response { display: block; } @keyframes scroll_down { 0% { background-position-x: 50%; } 35% { background-position-x: 50%; } 50% { background-position-x: 150%; } 50.1% { background-position-x: -50%; } 65% { background-position-x: 50%; } 100% { background-position-x: 50%; } } @media (min-width: 1001px) { body { padding-top: 80vh; } } @media (max-width: 600px) { header .logo { top: 42px; left: 42px; } } @media (max-width: 600px) { .button_outer { text-align: center; } } .hero { position: relative; width: 100vw; height: 80vh; min-height: 440px; text-align: center; white-space: nowrap; overflow: hidden; } @media (min-width: 1001px) { .hero { position: fixed; z-index: 0; top: 0; left: 0; } } @media (max-width: 600px) { .hero { height: 100vh; } } .hero .bg { position: absolute; z-index: -1; top: 0; left: 0; width: 100vw; height: 80vh; min-height: 440px; opacity: 0; overflow: hidden; background-color: #1c2c32; transition: opacity 2s; } @media (min-width: 1001px) { .hero .bg { position: fixed; } } @media (max-width: 600px) { .hero .bg { height: auto; bottom: 60px; } } .hero .bg .bg_slide { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; opacity: 0; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; transition: opacity 2s; } .hero .bg .bg_slide.michael { background-image: url('../../images/img_michael.jpg?1531840294'); /* @include phone(false) { background-image: image-url('img_16.jpg'); // background-position-y: 100%; } @include phone() { background-image: image-url('img_14.jpg'); } */ } .hero .bg .bg_slide.stephanie { background-image: url('../../images/img_stephanie.jpg?1531585799'); background-position-y: 0; } .hero .bg .bg_slide.daisy { background-image: url('../../images/img_daisy.jpg?1531585731'); } .hero .bg .pattern { position: absolute; z-index: 4; top: -50px; bottom: -50px; left: 0; width: 269px; transform-origin: 0 0; transform: rotate(10deg) translateX(20px); pointer-events: none; opacity: 0.2; } .hero .bg .pattern:before { content: ''; position: absolute; top: 0; bottom: -300px; left: -10px; right: 0; background: url('../../images/layout/safari_pattern.png?1520252234') repeat-y 0 0/auto 300px; animation: pattern_motion 15s linear infinite; } @media (max-width: 1000px) { .hero .bg .pattern { transform: rotate(45deg) translate(0, -120px); } } @media (max-width: 600px) { .hero .bg .pattern { transform: rotate(45deg) translate(-80px, -120px); } } .hero .bg .brush { position: absolute; top: -50px; bottom: -50px; z-index: 3; opacity: 0.8; transform-origin: 0 0; transform: rotate(8deg) translateX(-60px); } @media (max-width: 1000px) { .hero .bg .brush { transform: rotate(45deg) translate(-60px, -220px); } } @media (max-width: 600px) { .hero .bg .brush { transform: rotate(45deg) translate(-140px, -140px); } } .hero .bg .brush:before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 350px; background: #d15d0d; } @media (max-width: 1200px) { .hero .bg .brush:before { width: 320px; } } .hero .bg .brush:after { content: ''; position: absolute; top: 0; bottom: 0; left: 349px; width: 100px; background: url('../../images/layout/brush_edge.png?1527714771') no-repeat 0 0/auto 100%; } @media (max-width: 1200px) { .hero .bg .brush:after { left: 319px; } } @media (max-width: 600px) { .hero .bg:after { content: ''; position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)); } } .hero .content { display: inline-block; vertical-align: middle; white-space: normal; padding: 0 30px; margin-top: 90px; } @media (max-width: 600px) { .hero .content { vertical-align: bottom; margin-top: 0; margin-bottom: 110px; } } .hero .content .heading { position: relative; opacity: 0; transition: opacity 1s; } .hero .content .heading .heading_inner { color: #fff; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 48px; font-weight: bold; letter-spacing: 0.2em; line-height: 1.1; text-transform: uppercase; line-height: 1; padding-bottom: 50px; opacity: 0; transform: translateX(-20px); transition: opacity 1s, transform 1s cubic-bezier(0.215, 0.61, 0.355, 1); } @media (max-width: 1000px) { .hero .content .heading .heading_inner { font-size: 36px; } } @media (max-width: 600px) { .hero .content .heading .heading_inner { text-align: center; letter-spacing: 0.15em; } } @media (max-width: 1000px) { .hero .content .heading .heading_inner { padding-bottom: 30px; } } @media (max-width: 600px) { .hero .content .heading .heading_inner { font-size: 30px; padding-bottom: 30px; } } .hero .content .heading .heading_inner em { position: relative; display: inline-block; top: 10px; left: -5px; font-size: 170%; text-transform: capitalize; letter-spacing: 0.05em; margin-bottom: 15px; } @media (max-width: 1000px) { .hero .content .heading .heading_inner em { top: 7px; } } @media (max-width: 1000px) { .hero .content .heading .heading_inner span { display: block; } } @media (max-width: 1000px) { .hero .content .heading .heading_inner span:first-child { font-size: 25px; } } @media (max-width: 600px) { .hero .content .heading .heading_inner span:first-child { font-size: 20px; } } .hero .content #scroll_down { position: absolute; bottom: 90px; left: 50%; width: 40px; height: 40px; margin-left: -20px; border-radius: 100%; background-image: url('../../images/layout/next_arrow_white.png?1525445580'); background-repeat: no-repeat; background-position: 50% 50%; background-size: 12px 16px; transform: rotate(90deg); transition: background 0.3s; animation: scroll_down 3s cubic-bezier(0.645, 0.045, 0.355, 1) infinite; } @media (min-width: 601px) { .hero .content #scroll_down { display: none; } } .hero .content #scroll_down:active { background-color: rgba(255, 255, 255, 0.2); } .hero .content .text { opacity: 0; transition: opacity 1s 1s; } .hero .content .text .descriptions { position: relative; display: inline-block; vertical-align: middle; height: 54px; overflow: visible; padding-right: 50px; margin-right: 50px; } @media (min-width: 721px) and (min-width: 1001px) { .hero .content .text .descriptions { width: 260px; } } @media (min-width: 721px) and (max-width: 1000px) { .hero .content .text .descriptions { width: 230px; padding-right: 40px; margin-right: 0; } } @media (max-width: 720px) { .hero .content .text .descriptions { display: block; width: 230px; padding: 0 0 20px 0; margin: auto; } } @media (max-width: 600px) { .hero .content .text .descriptions { display: none; } } .hero .content .text .descriptions p { color: #fff; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: normal; letter-spacing: 0.05em; line-height: 1.5; display: block; line-height: 27px; box-sizing: border-box; opacity: 0; transform: translateX(-20px); margin-top: -54px; transition: opacity 0.3s, transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } @media (max-width: 1000px) { .hero .content .text .descriptions p { font-size: 16px; } } @media (max-width: 600px) { .hero .content .text .descriptions p { font-size: 15px; } } .hero .content .text .descriptions p a, .hero .content .text .descriptions p [href] { position: relative; display: inline; color: #20c7d2; font-style: italic; font-weight: bold; transition: color 0.3s; box-shadow: 0 0 0 rgba(32, 199, 210, 0); transition: color 0.3s, box-shadow 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); cursor: pointer; } .hero .content .text .descriptions p a:hover, .hero .content .text .descriptions p [href]:hover { box-shadow: 0 2px 0 #20c7d2; } .hero .content .text .descriptions p:first-child { margin-top: 0; } @media (min-width: 721px) and (min-width: 1001px) { .hero .content .text .descriptions:after { content: ''; position: absolute; right: -3px; top: 0; width: 3px; height: 100%; background: #fff; border-radius: 3px; transform: scaleY(0) rotate(2deg); transition: transform 2s cubic-bezier(0.215, 0.61, 0.355, 1) 2.4s; } } .hero .content .text .button_outer { display: inline-block; vertical-align: middle; opacity: 0; transition: opacity 1s; } @media (max-width: 600px) { .hero .content .text .button_outer { position: absolute; bottom: 0; left: 0; width: 100%; } } .hero .content .text .button_outer .button { position: relative; display: inline-block; z-index: 0; color: #fff; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.2; padding: 10px 30px; background-color: transparent; border: 3px solid #dda63a; box-sizing: border-box; transition: color 0.3s; cursor: pointer; line-height: 21px; opacity: 0; transform: translateX(-20px); transition: opacity 1s 1.4s, color 0.3s, transform 1s cubic-bezier(0.215, 0.61, 0.355, 1) 1.4s; } @media (max-width: 1000px) { .hero .content .text .button_outer .button { font-size: 16px; font-weight: bold; } } @media (max-width: 600px) { .hero .content .text .button_outer .button { letter-spacing: 0.1em; padding-left: 25px; padding-right: 25px; } } .hero .content .text .button_outer .button:after { content: ''; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background: #dda63a; transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .hero .content .text .button_outer .button:hover { color: #1c2c32; } .hero .content .text .button_outer .button:hover:after { transform: scaleX(1); } @media (max-width: 600px) { .hero .content .text .button_outer .button { display: block; width: 100%; color: #fff !important; text-align: center; padding-top: 20px; padding-bottom: 19px; background: #dda63a; border: none; transition: background 0.3s; } .hero .content .text .button_outer .button:after, .hero .content .text .button_outer .button:before { content: none; } .hero .content .text .button_outer .button:active { background: #e4b861; } } .hero .content .text .button_outer .button .name { display: block; height: 21px; overflow: hidden; text-align: center; } .hero .content .text .button_outer .button .name > span { display: block; margin: auto; opacity: 0; transition: opacity 0.3s, transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .hero .content .text .button_outer .button > span { display: inline-block; vertical-align: middle; } .hero .dots { position: absolute; z-index: 2; bottom: 40px; left: 0; width: 100%; text-align: center; } @media (max-width: 1000px) { .hero .dots { bottom: 20px; } } @media (max-width: 600px) { .hero .dots { display: none; } } .hero .dots .dot { position: relative; display: inline-block; width: 40px; height: 40px; border-radius: 100%; transition: background 0.3s; } @media (max-width: 1000px) { .hero .dots .dot { width: 20px; height: 20px; } } .hero .dots .dot span { position: absolute; top: 15px; left: 15px; width: 10px; height: 10px; border-radius: 100%; background: #fff; transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.3s; } @media (max-width: 1000px) { .hero .dots .dot span { top: 6px; left: 6px; width: 8px; height: 8px; } } @media (max-width: 600px) { .hero .dots .dot span { top: 7px; left: 7px; width: 6px; height: 6px; } } .hero .dots .dot:hover { background: rgba(255, 255, 255, 0.2); } .hero:after { content: ''; display: inline-block; vertical-align: middle; width: 0; height: 100%; } .hero.active-0 .bg { opacity: 1; } .hero.active-0 .bg .bg_slide:nth-child(1) { z-index: 1; opacity: 0.5; } @media (max-width: 600px) { .hero.active-0 .bg .bg_slide:nth-child(1) { opacity: 1; } } .hero.active-0 .content .heading { opacity: 1; } .hero.active-0 .content .heading .heading_inner { opacity: 1; transform: translateX(0); } .hero.active-0 .content .text { opacity: 1; } .hero.active-0 .content .text .descriptions p { transform: translateX(0); } .hero.active-0 .content .text .descriptions p:nth-child(1) { opacity: 1; } .hero.active-0 .content .text .descriptions:after { transform: scaleY(1) rotate(2deg); } .hero.active-0 .content .text .button_outer { opacity: 1; } .hero.active-0 .content .text .button_outer .button { opacity: 1; transform: translateX(0); } .hero.active-0 .content .text .button_outer .button .name > span { transform: translateY(0px); } .hero.active-0 .content .text .button_outer .button .name > span:nth-child(1) { opacity: 1; } .hero.active-0 .dots .dot:nth-child(1) span { transform: scale(1.5); background: #dda63a; } @media (max-width: 600px) { .hero.active-0 .dots .dot:nth-child(1) span { transform: scale(1.2); } } .hero.active-1 .bg { opacity: 1; } .hero.active-1 .bg .bg_slide:nth-child(2) { z-index: 1; opacity: 0.5; } @media (max-width: 600px) { .hero.active-1 .bg .bg_slide:nth-child(2) { opacity: 1; } } .hero.active-1 .content .heading { opacity: 1; } .hero.active-1 .content .heading .heading_inner { opacity: 1; transform: translateX(0); } .hero.active-1 .content .text { opacity: 1; } .hero.active-1 .content .text .descriptions p { transform: translateX(0); } .hero.active-1 .content .text .descriptions p:nth-child(2) { opacity: 1; } .hero.active-1 .content .text .descriptions:after { transform: scaleY(1) rotate(2deg); } .hero.active-1 .content .text .button_outer { opacity: 1; } .hero.active-1 .content .text .button_outer .button { opacity: 1; transform: translateX(0); } .hero.active-1 .content .text .button_outer .button .name > span { transform: translateY(-21px); } .hero.active-1 .content .text .button_outer .button .name > span:nth-child(2) { opacity: 1; } .hero.active-1 .dots .dot:nth-child(2) span { transform: scale(1.5); background: #dda63a; } @media (max-width: 600px) { .hero.active-1 .dots .dot:nth-child(2) span { transform: scale(1.2); } } .hero.active-2 .bg { opacity: 1; } .hero.active-2 .bg .bg_slide:nth-child(3) { z-index: 1; opacity: 0.5; } @media (max-width: 600px) { .hero.active-2 .bg .bg_slide:nth-child(3) { opacity: 1; } } .hero.active-2 .content .heading { opacity: 1; } .hero.active-2 .content .heading .heading_inner { opacity: 1; transform: translateX(0); } .hero.active-2 .content .text { opacity: 1; } .hero.active-2 .content .text .descriptions p { transform: translateX(0); } .hero.active-2 .content .text .descriptions p:nth-child(3) { opacity: 1; } .hero.active-2 .content .text .descriptions:after { transform: scaleY(1) rotate(2deg); } .hero.active-2 .content .text .button_outer { opacity: 1; } .hero.active-2 .content .text .button_outer .button { opacity: 1; transform: translateX(0); } .hero.active-2 .content .text .button_outer .button .name > span { transform: translateY(-42px); } .hero.active-2 .content .text .button_outer .button .name > span:nth-child(3) { opacity: 1; } .hero.active-2 .dots .dot:nth-child(3) span { transform: scale(1.5); background: #dda63a; } @media (max-width: 600px) { .hero.active-2 .dots .dot:nth-child(3) span { transform: scale(1.2); } } .hero.active-3 .bg { opacity: 1; } .hero.active-3 .bg .bg_slide:nth-child(4) { z-index: 1; opacity: 0.5; } @media (max-width: 600px) { .hero.active-3 .bg .bg_slide:nth-child(4) { opacity: 1; } } .hero.active-3 .content .heading { opacity: 1; } .hero.active-3 .content .heading .heading_inner { opacity: 1; transform: translateX(0); } .hero.active-3 .content .text { opacity: 1; } .hero.active-3 .content .text .descriptions p { transform: translateX(0); } .hero.active-3 .content .text .descriptions p:nth-child(4) { opacity: 1; } .hero.active-3 .content .text .descriptions:after { transform: scaleY(1) rotate(2deg); } .hero.active-3 .content .text .button_outer { opacity: 1; } .hero.active-3 .content .text .button_outer .button { opacity: 1; transform: translateX(0); } .hero.active-3 .content .text .button_outer .button .name > span { transform: translateY(-63px); } .hero.active-3 .content .text .button_outer .button .name > span:nth-child(4) { opacity: 1; } .hero.active-3 .dots .dot:nth-child(4) span { transform: scale(1.5); background: #dda63a; } @media (max-width: 600px) { .hero.active-3 .dots .dot:nth-child(4) span { transform: scale(1.2); } } .hero.active-4 .bg { opacity: 1; } .hero.active-4 .bg .bg_slide:nth-child(5) { z-index: 1; opacity: 0.5; } @media (max-width: 600px) { .hero.active-4 .bg .bg_slide:nth-child(5) { opacity: 1; } } .hero.active-4 .content .heading { opacity: 1; } .hero.active-4 .content .heading .heading_inner { opacity: 1; transform: translateX(0); } .hero.active-4 .content .text { opacity: 1; } .hero.active-4 .content .text .descriptions p { transform: translateX(0); } .hero.active-4 .content .text .descriptions p:nth-child(5) { opacity: 1; } .hero.active-4 .content .text .descriptions:after { transform: scaleY(1) rotate(2deg); } .hero.active-4 .content .text .button_outer { opacity: 1; } .hero.active-4 .content .text .button_outer .button { opacity: 1; transform: translateX(0); } .hero.active-4 .content .text .button_outer .button .name > span { transform: translateY(-84px); } .hero.active-4 .content .text .button_outer .button .name > span:nth-child(5) { opacity: 1; } .hero.active-4 .dots .dot:nth-child(5) span { transform: scale(1.5); background: #dda63a; } @media (max-width: 600px) { .hero.active-4 .dots .dot:nth-child(5) span { transform: scale(1.2); } } .featured_event { position: relative; z-index: 1; width: 100%; height: 60vh; min-height: 300px; text-align: center; white-space: nowrap; overflow: hidden; background-color: #334147; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; } @media (min-width: 1001px) { .featured_event { z-index: 90; } } @media (max-width: 1000px) { .featured_event { background-size: auto 130%; background-position: 50% 100%; } } @media (max-width: 600px) { .featured_event { height: 80vh; } } .featured_event .jagged_edges { position: absolute; z-index: 1; top: -1px; bottom: -1px; left: 0; width: 100%; height: auto; background: url('../../images/layout/jagged_top_home_page.png?1519925766') no-repeat 0 0/100% auto, url('../../images/layout/jagged_bottom.png?1519925378') no-repeat 0 100%/100% auto; } @media (max-width: 1000px) { .featured_event .jagged_edges { box-shadow: 0 -1px 0 0 #1c2c32, 0 1px 0 0 #fff; background-image: url('../../images/layout/jagged_top_home_page_mobile.png?1520013486'), url('../../images/layout/jagged_bottom.png?1519925378'); } } @media (max-width: 600px) { .featured_event .jagged_edges { background-position: 0 0, 100% 100%; background-size: 150% auto, 150% auto; } } .featured_event .content { position: relative; width: 100%; z-index: 2; display: inline-block; vertical-align: middle; padding-bottom: 20px; padding-left: 120px; padding-right: 120px; box-sizing: border-box; white-space: normal; } @media (max-width: 1200px) { .featured_event .content { padding-left: 80px; } } @media (max-width: 1000px) { .featured_event .content { padding-left: 50px; } } @media (max-width: 600px) { .featured_event .content { padding-left: 30px; } } @media (max-width: 1200px) { .featured_event .content { padding-right: 80px; } } @media (max-width: 1000px) { .featured_event .content { padding-right: 50px; } } @media (max-width: 600px) { .featured_event .content { padding-right: 30px; } } @media (max-width: 1000px) { .featured_event .content { vertical-align: bottom; padding-bottom: 100px; } } @media (max-width: 600px) { .featured_event .content { padding-bottom: 60px; } } .featured_event .content .date { color: #fff; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: normal; letter-spacing: 0.05em; line-height: 1.5; display: inline-block; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding-bottom: 10px; } @media (max-width: 1000px) { .featured_event .content .date { font-size: 16px; } } @media (max-width: 600px) { .featured_event .content .date { font-size: 15px; } } .featured_event .content .date a, .featured_event .content .date [href] { position: relative; display: inline; color: #20c7d2; font-style: italic; font-weight: bold; transition: color 0.3s; box-shadow: 0 0 0 rgba(32, 199, 210, 0); transition: color 0.3s, box-shadow 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); cursor: pointer; } .featured_event .content .date a:hover, .featured_event .content .date [href]:hover { box-shadow: 0 2px 0 #20c7d2; } .featured_event .content h2 { color: #fff; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 48px; font-weight: bold; letter-spacing: 0.2em; line-height: 1.1; text-transform: uppercase; padding-bottom: 40px; } @media (max-width: 1000px) { .featured_event .content h2 { font-size: 36px; } } @media (max-width: 600px) { .featured_event .content h2 { text-align: center; letter-spacing: 0.15em; } } .featured_event .content .logo_image { display: block; width: 400px; max-width: 90%; height: auto; margin: 8px auto 40px auto; } @media (max-width: 1000px) { .featured_event .content .logo_image { width: 300px; margin-bottom: 25px; } } @media (max-width: 600px) { .featured_event .content .logo_image { width: 240px; } } @media (min-width: 601px) { .featured_event .content .button { position: relative; display: inline-block; z-index: 0; color: #fff; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.2; padding: 10px 30px; background-color: transparent; border: 3px solid #e45b25; box-sizing: border-box; transition: color 0.3s; cursor: pointer; } } @media (min-width: 601px) and (max-width: 1000px) { .featured_event .content .button { font-size: 16px; font-weight: bold; } } @media (min-width: 601px) and (max-width: 600px) { .featured_event .content .button { letter-spacing: 0.1em; padding-left: 25px; padding-right: 25px; } } @media (min-width: 601px) { .featured_event .content .button:after { content: ''; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background: #e45b25; transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .featured_event .content .button:hover { color: #1c2c32; color: #fff; } .featured_event .content .button:hover:after { transform: scaleX(1); } } @media (max-width: 600px) { .featured_event .content .button { position: relative; display: inline-block; z-index: 0; color: #fff; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.2; padding: 10px 30px; background-color: transparent; border: 3px solid #e45b25; box-sizing: border-box; transition: color 0.3s; cursor: pointer; font-size: 14px; font-weight: bold; padding: 8px 30px; border-width: 2px; } } @media (max-width: 600px) and (max-width: 1000px) { .featured_event .content .button { font-size: 16px; font-weight: bold; } } @media (max-width: 600px) and (max-width: 600px) { .featured_event .content .button { letter-spacing: 0.1em; padding-left: 25px; padding-right: 25px; } } @media (max-width: 600px) { .featured_event .content .button:after { content: ''; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background: #e45b25; transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .featured_event .content .button:hover { color: #1c2c32; color: #fff; } .featured_event .content .button:hover:after { transform: scaleX(1); } } @media (max-width: 600px) and (max-width: 1000px) { .featured_event .content .button { font-size: 14px; } } .featured_event.has_logo_image .content h2 { display: none; } .featured_event:before { content: ''; position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 100%; background: rgba(28, 44, 50, 0.5); } .featured_event:after { content: ''; display: inline-block; vertical-align: middle; width: 0; height: 100%; } .event_calendar { position: relative; z-index: 1; background: #fff; padding: 150px 0 200px 0; box-sizing: border-box; } @media (max-width: 1000px) { .event_calendar { padding-top: 120px; padding-bottom: 120px; } } @media (max-width: 1000px) and (max-width: 1200px) { .event_calendar { padding-top: 80px; } } @media (max-width: 1000px) and (max-width: 1000px) { .event_calendar { padding-top: 80px; } } @media (max-width: 1000px) and (max-width: 1200px) { .event_calendar { padding-bottom: 80px; } } @media (max-width: 1000px) and (max-width: 1000px) { .event_calendar { padding-bottom: 80px; } } .event_calendar .button { position: relative; display: inline-block; z-index: 0; color: #1c2c32; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.2; padding: 10px 30px; background-color: transparent; border: 3px solid #e45b25; box-sizing: border-box; transition: color 0.3s; cursor: pointer; font-size: 14px; font-weight: bold; padding: 8px 30px; border-width: 2px; } @media (max-width: 1000px) { .event_calendar .button { font-size: 16px; font-weight: bold; } } @media (max-width: 600px) { .event_calendar .button { letter-spacing: 0.1em; padding-left: 25px; padding-right: 25px; } } .event_calendar .button:after { content: ''; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background: #e45b25; transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .event_calendar .button:hover { color: #fff; } .event_calendar .button:hover:after { transform: scaleX(1); } @media (max-width: 1000px) { .event_calendar .button { font-size: 14px; } } .event_calendar .heading { padding-left: 120px; padding-right: 120px; } @media (max-width: 1200px) { .event_calendar .heading { padding-left: 80px; } } @media (max-width: 1000px) { .event_calendar .heading { padding-left: 50px; } } @media (max-width: 600px) { .event_calendar .heading { padding-left: 30px; } } @media (max-width: 1200px) { .event_calendar .heading { padding-right: 80px; } } @media (max-width: 1000px) { .event_calendar .heading { padding-right: 50px; } } @media (max-width: 600px) { .event_calendar .heading { padding-right: 30px; } } .event_calendar .heading h2 { color: #1c2c32; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 30px; font-weight: normal; letter-spacing: 0.1em; line-height: 1.2; text-transform: uppercase; margin-bottom: 80px; } @media (max-width: 1000px) { .event_calendar .heading h2 { font-size: 24px; margin-bottom: 40px; } } @media (max-width: 600px) { .event_calendar .heading h2 { text-align: center; font-weight: 600; } } @media (min-width: 601px) { .event_calendar .heading h2 { display: inline-block; } } @media (min-width: 601px) { .event_calendar .heading .button_outer.above { float: right; margin-top: -3px; } } @media (min-width: 601px) and (max-width: 1000px) { .event_calendar .heading .button_outer.above { margin-top: 0; } } @media (max-width: 600px) { .event_calendar .heading .button_outer.above { display: none; } } .event_calendar .event_calendar_list { width: 100%; overflow: hidden; white-space: nowrap; } .event_calendar .event_calendar_list .event_calendar_list_inner { overflow: hidden; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; } .event_calendar .event_calendar_list .event_calendar_list_inner::-webkit-scrollbar { display: none; } .event_calendar .event_calendar_list a { position: relative; z-index: 0; display: inline-block; vertical-align: middle; width: 300px; height: 360px; background-color: #1c2c32; /* background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; */ color: #fff; text-align: left; margin-left: 10px; border-radius: 3px; white-space: nowrap; overflow: hidden; } @media (max-width: 1000px) { .event_calendar .event_calendar_list a { width: 240px; height: 300px; } } @media (max-width: 600px) { .event_calendar .event_calendar_list a { /* width: 160px; height: 220px; */ } } .event_calendar .event_calendar_list a .bg_image { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; transition: opacity 1s; } .event_calendar .event_calendar_list a .date { position: absolute; top: 40px; left: 40px; font-family: "din-2014", Helvetica, Arial, sans-serif; line-height: 1; white-space: normal; } @media (max-width: 1000px) { .event_calendar .event_calendar_list a .date { top: 30px; left: 30px; } } @media (max-width: 600px) { .event_calendar .event_calendar_list a .date { /* top: 20px; left: 20px; */ } } .event_calendar .event_calendar_list a .date .month { display: block; font-size: 16px; font-weight: bold; letter-spacing: 0.2em; text-transform: uppercase; } @media (max-width: 1000px) { .event_calendar .event_calendar_list a .date .month { padding-bottom: 3px; } } .event_calendar .event_calendar_list a .date .day { display: block; font-size: 60px; letter-spacing: 0.025em; margin-left: -2px; } @media (max-width: 1000px) { .event_calendar .event_calendar_list a .date .day { font-size: 40px; } } .event_calendar .event_calendar_list a .date .weekday { display: block; font-size: 16px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; } @media (max-width: 1000px) { .event_calendar .event_calendar_list a .date .weekday { padding-top: 3px; } } .event_calendar .event_calendar_list a .logo_image { display: block; position: absolute; top: 100px; bottom: 40px; left: 40px; right: 40px; background-size: contain; background-position: 50% 100%; background-repeat: no-repeat; } @media (max-width: 1000px) { .event_calendar .event_calendar_list a .logo_image { bottom: 30px; left: 30px; right: 30px; } } @media (max-width: 600px) { .event_calendar .event_calendar_list a .logo_image { /* bottom: 20px; left: 20px; right: 20px; */ } } .event_calendar .event_calendar_list a .text { position: relative; z-index: 0; display: inline-block; width: 100%; vertical-align: bottom; white-space: normal; padding: 35px 40px; box-sizing: border-box; } @media (max-width: 1000px) { .event_calendar .event_calendar_list a .text { padding: 25px 30px; } } .event_calendar .event_calendar_list a .text .day { display: block; color: rgba(255, 255, 255, 0.5); font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 12px; font-weight: bold; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.4; padding-bottom: 10px; transition: opacity 0.3s; } .event_calendar .event_calendar_list a .text .title { display: block; font-family: "merriweather", "Times New Roman", serif; font-size: 22px; letter-spacing: 0.025em; line-height: 1.4; transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } @media (max-width: 1000px) { .event_calendar .event_calendar_list a .text .title { font-size: 18px; } } .event_calendar .event_calendar_list a .text .category { display: block; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 15px; letter-spacing: 0.025em; line-height: 1.4; padding-top: 5px; transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } @media (max-width: 600px) { .event_calendar .event_calendar_list a .text .category { font-size: 14px; } } .event_calendar .event_calendar_list a .text .more_outer { display: block; position: absolute; bottom: 25px; right: 40px; opacity: 0; transition: opacity 0.3s; } .event_calendar .event_calendar_list a .text .more { display: block; color: #1c2c32; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 12px; font-weight: bold; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.4; opacity: 0; transform: translateY(10px); transition: opacity 0.3s 0.2s, transform 0.3s 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); } .event_calendar .event_calendar_list a .text:before { content: ''; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background: #e45b25; transform: scaleY(0); transform-origin: 50% 100%; transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .event_calendar .event_calendar_list a:after { content: ''; display: inline-block; vertical-align: bottom; width: 0; height: 100%; } .event_calendar .event_calendar_list a[href] { cursor: pointer; } .event_calendar .event_calendar_list a[href]:before { content: ''; position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 100%; background: rgba(28, 44, 50, 0.5); border-radius: 3px; } .event_calendar .event_calendar_list a[href]:hover .text .day { opacity: 0; } .event_calendar .event_calendar_list a[href]:hover .text .title, .event_calendar .event_calendar_list a[href]:hover .text .category { transform: translateY(-26px); } .event_calendar .event_calendar_list a[href]:hover .text .more_outer { opacity: 1; } .event_calendar .event_calendar_list a[href]:hover .text .more { opacity: 1; transform: translateY(0); } .event_calendar .event_calendar_list a[href]:hover .text:before { transform: scaleY(1); } .event_calendar .event_calendar_list a.has_logo_image .text { display: none; } .event_calendar .event_calendar_list a:first-child { margin-left: 0; margin-left: 120px; } @media (max-width: 1200px) { .event_calendar .event_calendar_list a:first-child { margin-left: 80px; } } @media (max-width: 1000px) { .event_calendar .event_calendar_list a:first-child { margin-left: 50px; } } @media (max-width: 600px) { .event_calendar .event_calendar_list a:first-child { margin-left: 30px; } } .event_calendar .event_calendar_list a.last { margin-right: 120px; } @media (max-width: 1200px) { .event_calendar .event_calendar_list a.last { margin-right: 80px; } } @media (max-width: 1000px) { .event_calendar .event_calendar_list a.last { margin-right: 50px; } } @media (max-width: 600px) { .event_calendar .event_calendar_list a.last { margin-right: 30px; } } @media (min-width: 601px) { .event_calendar .button_outer.below { display: none; } } @media (max-width: 600px) { .event_calendar .button_outer.below { padding: 50px 0 0 0; } } .event_calendar { position: relative; z-index: 1; background: #fff; padding: 0; box-sizing: border-box; padding: 150px 0 200px 0; } .event_calendar .button { position: relative; display: inline-block; z-index: 0; color: #1c2c32; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.2; padding: 10px 30px; background-color: transparent; border: 3px solid #e45b25; box-sizing: border-box; transition: color 0.3s; cursor: pointer; font-size: 14px; font-weight: bold; padding: 8px 30px; border-width: 2px; } @media (max-width: 1000px) { .event_calendar .button { font-size: 16px; font-weight: bold; } } @media (max-width: 600px) { .event_calendar .button { letter-spacing: 0.1em; padding-left: 25px; padding-right: 25px; } } .event_calendar .button:after { content: ''; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background: #e45b25; transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .event_calendar .button:hover { color: #fff; } .event_calendar .button:hover:after { transform: scaleX(1); } @media (max-width: 1000px) { .event_calendar .button { font-size: 14px; } } .event_calendar .heading { padding-left: 120px; padding-right: 120px; } @media (max-width: 1200px) { .event_calendar .heading { padding-left: 80px; } } @media (max-width: 1000px) { .event_calendar .heading { padding-left: 50px; } } @media (max-width: 600px) { .event_calendar .heading { padding-left: 30px; } } @media (max-width: 1200px) { .event_calendar .heading { padding-right: 80px; } } @media (max-width: 1000px) { .event_calendar .heading { padding-right: 50px; } } @media (max-width: 600px) { .event_calendar .heading { padding-right: 30px; } } .event_calendar .heading h2 { color: #1c2c32; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 30px; font-weight: normal; letter-spacing: 0.1em; line-height: 1.2; text-transform: uppercase; margin-bottom: 80px; } @media (max-width: 1000px) { .event_calendar .heading h2 { font-size: 24px; margin-bottom: 40px; } } @media (max-width: 600px) { .event_calendar .heading h2 { text-align: center; font-weight: 600; } } @media (min-width: 601px) { .event_calendar .heading h2 { display: inline-block; } } @media (min-width: 601px) { .event_calendar .heading .button_outer.above { float: right; margin-top: -3px; } } @media (min-width: 601px) and (max-width: 1000px) { .event_calendar .heading .button_outer.above { margin-top: 0; } } @media (max-width: 600px) { .event_calendar .heading .button_outer.above { display: none; } } .event_calendar .event_calendar_list { position: relative; width: 100%; overflow: hidden; white-space: nowrap; /* &:after { content: ''; position: absolute; z-index: 1; top: 0; right: 0; @include spacing('width'); height: 100%; background: linear-gradient(to right, rgba(#fff,0) 0%, rgba(#fff,0.5) 100%); } */ } .event_calendar .event_calendar_list .event_calendar_list_inner { overflow: hidden; overflow-x: auto; text-align: center; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; } .event_calendar .event_calendar_list .event_calendar_list_inner::-webkit-scrollbar { display: none; } .event_calendar .event_calendar_list a { position: relative; z-index: 0; display: inline-block; vertical-align: middle; width: 300px; height: 360px; background-color: #1c2c32; /* background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; */ color: #fff; text-align: left; margin-left: 10px; border-radius: 3px; white-space: nowrap; overflow: hidden; } @media (max-width: 1000px) { .event_calendar .event_calendar_list a { width: 240px; height: 300px; } } @media (max-width: 600px) { .event_calendar .event_calendar_list a { /* width: 160px; height: 220px; */ } } .event_calendar .event_calendar_list a .bg_image { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; transition: opacity 1s; } .event_calendar .event_calendar_list a .date { position: absolute; top: 40px; left: 40px; font-family: "din-2014", Helvetica, Arial, sans-serif; line-height: 1; white-space: normal; } @media (max-width: 1000px) { .event_calendar .event_calendar_list a .date { top: 30px; left: 30px; } } @media (max-width: 600px) { .event_calendar .event_calendar_list a .date { /* top: 20px; left: 20px; */ } } .event_calendar .event_calendar_list a .date .month { display: block; font-size: 16px; font-weight: bold; letter-spacing: 0.2em; text-transform: uppercase; } @media (max-width: 1000px) { .event_calendar .event_calendar_list a .date .month { padding-bottom: 3px; } } .event_calendar .event_calendar_list a .date .day { display: block; font-size: 60px; letter-spacing: 0.025em; margin-left: -2px; } @media (max-width: 1000px) { .event_calendar .event_calendar_list a .date .day { font-size: 40px; } } .event_calendar .event_calendar_list a .date .weekday { display: block; font-size: 16px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; } @media (max-width: 1000px) { .event_calendar .event_calendar_list a .date .weekday { padding-top: 3px; } } .event_calendar .event_calendar_list a .logo_image { display: block; position: absolute; top: 100px; bottom: 40px; left: 40px; right: 40px; background-size: contain; background-position: 50% 100%; background-repeat: no-repeat; } @media (max-width: 1000px) { .event_calendar .event_calendar_list a .logo_image { bottom: 30px; left: 30px; right: 30px; } } @media (max-width: 600px) { .event_calendar .event_calendar_list a .logo_image { /* bottom: 20px; left: 20px; right: 20px; */ } } .event_calendar .event_calendar_list a .text { position: relative; z-index: 0; display: inline-block; width: 100%; vertical-align: bottom; white-space: normal; padding: 35px 40px; box-sizing: border-box; } @media (max-width: 1000px) { .event_calendar .event_calendar_list a .text { padding: 25px 30px; } } .event_calendar .event_calendar_list a .text .day { display: block; color: rgba(255, 255, 255, 0.5); font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 12px; font-weight: bold; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.4; padding-bottom: 10px; transition: opacity 0.3s; } .event_calendar .event_calendar_list a .text .title { display: block; font-family: "merriweather", "Times New Roman", serif; font-size: 22px; letter-spacing: 0.025em; line-height: 1.4; transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } @media (max-width: 1000px) { .event_calendar .event_calendar_list a .text .title { font-size: 18px; } } .event_calendar .event_calendar_list a .text .category { display: block; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 15px; letter-spacing: 0.025em; line-height: 1.4; padding-top: 5px; transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } @media (max-width: 600px) { .event_calendar .event_calendar_list a .text .category { font-size: 14px; } } .event_calendar .event_calendar_list a .text .more_outer { display: block; position: absolute; bottom: 25px; right: 40px; opacity: 0; transition: opacity 0.3s; } .event_calendar .event_calendar_list a .text .more { display: block; color: #1c2c32; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 12px; font-weight: bold; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.4; opacity: 0; transform: translateY(10px); transition: opacity 0.3s 0.2s, transform 0.3s 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); } .event_calendar .event_calendar_list a .text:before { content: ''; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background: #e45b25; transform: scaleY(0); transform-origin: 50% 100%; transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .event_calendar .event_calendar_list a:after { content: ''; display: inline-block; vertical-align: bottom; width: 0; height: 100%; } .event_calendar .event_calendar_list a[href] { cursor: pointer; } .event_calendar .event_calendar_list a[href]:before { content: ''; position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 100%; background: rgba(28, 44, 50, 0.5); border-radius: 3px; } .event_calendar .event_calendar_list a[href]:hover .text .day { opacity: 0; } .event_calendar .event_calendar_list a[href]:hover .text .title, .event_calendar .event_calendar_list a[href]:hover .text .category { transform: translateY(-26px); } .event_calendar .event_calendar_list a[href]:hover .text .more_outer { opacity: 1; } .event_calendar .event_calendar_list a[href]:hover .text .more { opacity: 1; transform: translateY(0); } .event_calendar .event_calendar_list a[href]:hover .text:before { transform: scaleY(1); } .event_calendar .event_calendar_list a.has_logo_image .text { display: none; } .event_calendar .event_calendar_list a:first-child { margin-left: 0; margin-left: 120px; } @media (max-width: 1200px) { .event_calendar .event_calendar_list a:first-child { margin-left: 80px; } } @media (max-width: 1000px) { .event_calendar .event_calendar_list a:first-child { margin-left: 50px; } } @media (max-width: 600px) { .event_calendar .event_calendar_list a:first-child { margin-left: 30px; } } .event_calendar .event_calendar_list a.last { margin-right: 120px; } @media (max-width: 1200px) { .event_calendar .event_calendar_list a.last { margin-right: 80px; } } @media (max-width: 1000px) { .event_calendar .event_calendar_list a.last { margin-right: 50px; } } @media (max-width: 600px) { .event_calendar .event_calendar_list a.last { margin-right: 30px; } } .event_calendar .event_calendar_list .arrow { position: absolute; top: 50%; width: 60px; height: 60px; border-radius: 100%; margin: -30px 0 0 0; background: #fff url('../../images/layout/prev_arrow_dark.png?1525891099') no-repeat 50% 50%/12px auto; transition: background 0.3s; } @media (max-width: 1000px) { .event_calendar .event_calendar_list .arrow { display: none; } } .event_calendar .event_calendar_list .arrow:hover { background-color: #e8eaeb; } .event_calendar .event_calendar_list .arrow.back { left: 60px; margin-left: -30px; } @media (max-width: 1200px) { .event_calendar .event_calendar_list .arrow.back { left: 40px; } } @media (max-width: 1000px) { .event_calendar .event_calendar_list .arrow.back { left: 25px; } } @media (max-width: 600px) { .event_calendar .event_calendar_list .arrow.back { left: 15px; } } .event_calendar .event_calendar_list .arrow.forward { right: 60px; margin-right: -30px; background-image: url('../../images/layout/next_arrow_dark.png?1525891085'); } @media (max-width: 1200px) { .event_calendar .event_calendar_list .arrow.forward { right: 40px; } } @media (max-width: 1000px) { .event_calendar .event_calendar_list .arrow.forward { right: 25px; } } @media (max-width: 600px) { .event_calendar .event_calendar_list .arrow.forward { right: 15px; } } @media (min-width: 601px) { .event_calendar .button_outer.below { display: none; } } @media (max-width: 600px) { .event_calendar .button_outer.below { padding: 50px 0 0 0; } } .event_calendar.instances { background: transparent; margin: 0; padding-bottom: 120px; } @media (max-width: 1200px) { .event_calendar.instances { padding-bottom: 80px; } } @media (max-width: 1000px) { .event_calendar.instances { padding-bottom: 80px; } } .event_calendar.instances .event_calendar_list .event_calendar_list_inner { padding-top: 40px; } .event_calendar.instances .event_calendar_list a { height: 300px; } @media (max-width: 1000px) { .event_calendar.instances .event_calendar_list a { height: 240px; } } .event_calendar.instances .event_calendar_list a:first-child { overflow: visible; border-radius: 0 3px 3px 3px; } .event_calendar.instances .event_calendar_list a:first-child .next_up { display: block; position: absolute; top: -40px; left: 0; color: #fff; font-family: "din-2014", Helvetica, Arial, sans-serif; font-size: 12px; font-weight: bold; letter-spacing: 0.2em; text-transform: uppercase; line-height: 40px; text-align: center; padding: 0 40px; border-radius: 3px 3px 0 0; background: #dda63a; box-sizing: border-box; } @media (max-width: 1000px) { .event_calendar.instances .event_calendar_list a:first-child .next_up { padding: 0 30px; } } .event_calendar.instances .event_calendar_list a:first-child:before { border-radius: 0 3px 3px 3px !important; } @media (min-width: 601px) { .event_calendar.count-1, .event_calendar.count-2 { width: 100%; max-width: 940px; margin-left: auto; margin-right: auto; box-sizing: border-box; padding-left: 120px; padding-right: 120px; } } @media (min-width: 601px) and (max-width: 1200px) { .event_calendar.count-1, .event_calendar.count-2 { padding-left: 80px; } } @media (min-width: 601px) and (max-width: 1000px) { .event_calendar.count-1, .event_calendar.count-2 { padding-left: 50px; } } @media (min-width: 601px) and (max-width: 600px) { .event_calendar.count-1, .event_calendar.count-2 { padding-left: 30px; } } @media (min-width: 601px) and (max-width: 1200px) { .event_calendar.count-1, .event_calendar.count-2 { padding-right: 80px; } } @media (min-width: 601px) and (max-width: 1000px) { .event_calendar.count-1, .event_calendar.count-2 { padding-right: 50px; } } @media (min-width: 601px) and (max-width: 600px) { .event_calendar.count-1, .event_calendar.count-2 { padding-right: 30px; } } @media (min-width: 601px) and (max-width: 1200px) { .event_calendar.count-1, .event_calendar.count-2 { max-width: 860px; } } @media (min-width: 601px) and (max-width: 1000px) { .event_calendar.count-1, .event_calendar.count-2 { max-width: 750px; } } @media (min-width: 601px) { .event_calendar.count-1 .event_calendar_list .event_calendar_list_inner, .event_calendar.count-2 .event_calendar_list .event_calendar_list_inner { text-align: left; } .event_calendar.count-1 .event_calendar_list a:first-child, .event_calendar.count-2 .event_calendar_list a:first-child { margin-left: 0; } .event_calendar.count-1 .event_calendar_list a.last, .event_calendar.count-2 .event_calendar_list a.last { margin-right: 0; } .event_calendar.count-1 .event_calendar_list .arrow, .event_calendar.count-2 .event_calendar_list .arrow { display: none; } } @media (max-width: 1000px) { .event_calendar { padding-top: 120px; padding-bottom: 120px; } } @media (max-width: 1000px) and (max-width: 1200px) { .event_calendar { padding-top: 80px; } } @media (max-width: 1000px) and (max-width: 1000px) { .event_calendar { padding-top: 80px; } } @media (max-width: 1000px) and (max-width: 1200px) { .event_calendar { padding-bottom: 80px; } } @media (max-width: 1000px) and (max-width: 1000px) { .event_calendar { padding-bottom: 80px; } }