/* ———————————————————————————————————————————————————————————————————————————————————————————— DEFAULT * * Default state of UI & common html elements * * 1. Customization of these elements (fonts, colors, etc.) should be handled in site theme file * 2. Multiple classes can be used for the same element * 3. Selector can be paired with a class to modify specific attributes (i.e. #selector .class {} ) ———————————————————————————————————————————————————————————————————————————————————————————— */ @import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800'); @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,700'); 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, 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, 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; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { background: transparent; border: 0; display: block; font-size: 100%; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } *, *:after, *:before { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } ::selection, ::-webkit-selection, ::-moz-selection { background-color: #cd1212; color: #fff; } /* browser text selection */ html { } html, body { height: 100%; } a, a:link, a:visited { color: #000; text-decoration: none; } a:hover, b a:hover, h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { opacity: 0.9; text-decoration: none; } a img { border: none; overflow: hidden; } article {} blockquote { font-size: 3em; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2em; margin: 2em auto 1em auto; padding: 0.5em; text-align: left; text-transform: inherit; width: 100%; max-width: 960px; } b { font-weight: 500; letter-spacing: 0.02em; } body { color: #000; font-family: "Poppins", Helvetica, sans-serif; font-size: 1em; font-weight: lighter; } br { line-height: 1em; } div { display: block; } em { font-style: italic; } fieldset { background-color: rgba(0,0,0,0.01); border-radius: 0.2em; padding: 2em; } fieldset hr { border-top: solid 1px rgba(0,0,0,0.15); margin: 3em 0 3em 0; } figcaption { font-size: 0.75em; font-weight: 300; margin: 0.25em 0 0.25em; opacity: 0.35; text-align: left; } footer { display: block; font-size: 0.9em; letter-spacing: 0.9; padding: 3em 0 3em 0; position: relative; } footer a { font-weight: 600; text-transform: inherit; } h1 { font-size: 4em; font-weight: 600; letter-spacing: -0.01em; line-height: 1em; margin-bottom: 0.2em; text-transform: capitalize; } h1 a, h1 a:link, h1 a:visited { text-decoration: none; } h1 a:hover { text-decoration: none; } h2 { font-size: 3em; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3em; margin-bottom: 0.2em; text-transform: inherit; } h2 a, h2 a:link, h2 a:visited { text-decoration: none; } h2 a:hover { text-decoration: none; } h3 { font-size: 2em; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2em; margin-bottom: 0.5em; text-transform: inherit; } h3 a, h3 a:link, h3 a:visited { text-decoration: none; } h3 a:hover { text-decoration: none; } h4 { font-size: 1.5em; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2em; margin-bottom: 0.5em; text-transform: inherit; } h4 a, h4 a:link, h4 a:visited { color: #000; text-decoration: none; } h4 a:hover { text-decoration: none; } h5 { font-size: 1.2em; font-weight: 400; line-height: 1.2em; margin-bottom: 0.5em; text-transform: inherit; } h6 { font-size: 1em; font-weight: 400; line-height: 1.; margin-bottom: 10px; text-transform: inherit; } h7 { font-size: 0.8em; font-weight: 400; line-height: 1.; margin-bottom: 10px; text-transform: inherit; } h8 { font-size: 0.6em; font-weight: 400; line-height: 1.; margin-bottom: 10px; text-transform: inherit; } header {} hr { background: none; border: 0; border-top: 1px solid #333; margin: 2em 0 2em 0; } i { font-style: italic; } img { height: auto; width: 100%; } input { appearance: none; -moz-appearance: none; -webkit-appearance: none; background: #fff; border: solid 1px rgba(0,0,0,0.25); display: block; font-family: "Poppins", Helvetica, sans-serif; font-size: 1em; font-weight: 400; height: auto; margin-bottom: 0.5em; padding: 1em; width: auto; } input[type=button] { background-color: #000; color: #fff; display: inline-block; width: auto; } input[type=button]:disabled { opacity: 0.6; } input[type=button]:hover { background: #333; color: #fff; } input[type=checkbox] { background: none; border: solid 1px #000; border-radius: 0.08em; clear: both; display: inline-block; float: left; font-size: 1.1em; height: 0.3em; margin: 0 0.5em 0.3em 0; padding: 0.3em; transition: 0.20s all ease; width: 0.4em; } input[type=checkbox]:hover { border: solid 1px rgba(0,0,0,0.5); } input[type=checkbox]:checked { background: #000; transition: 0.20s all ease; } input[type="email"] { -webkit-appearance: none; margin-bottom: 1em; width: 100%; } input[type=password] { -webkit-appearance: none; margin-bottom: 1em; width: 100%; } input[type=radio] { background: rgba(0,0,0,0.0); border: solid 1px #000; clear: both; display: inline-block; float: left; margin: 0 0.5em 0.3em 0; padding: 0.3em; transition: 0.20s all ease; width: auto; } input[type=radio]:hover { border: solid 1px rgba(0,0,0,0.5); } input[type=radio]:checked { background: rgba(0,0,0,1.0); transition: 0.20s all ease; } input[type=submit] { background: #000; border: none; color: #fff; margin-bottom: 0.5em; padding: 1em 1.5em 1em 1.5em; text-align: center; text-transform: capitalize; width: auto; } input[type=submit]:disabled { opacity: 0.6; } input[type=submit]:hover { background: #333; color: #fff; } input[type="text"] { -webkit-appearance: none; margin-bottom: 1em; width: 100%; } label { display: inline; color: #333; font-size: 0.95em; font-weight: 500; margin-bottom: 0.5em; text-transform: capitalize; } legend { color: #111; font-weight: 500; font-size: 1em; } li { line-height: 1.8em; margin: 0 0 1em 1em; } main {} nav { height: auto; position: relative; width: 100%; z-index: 9999; } nav a, nav a:link, nav a:visited {} nav a:hover { text-decoration: none; } ol {} ol li { line-height: 1.8em; margin: 0 0 1em 1em; } ol li::before { font-weight: 500; } p { font-family: "Open Sans"; letter-spacing: 0.02em; line-height: 2em; } p a, p a:link, p a:visited { text-decoration: underline; } p a:hover { text-decoration: none; } section { background: none; /* background: #fff; */ display: block; height: 100%; position: relative; } section:nth-child(even) { background: none; } select { appearance: none; -webkit-appearance: none; background: url('/img/icon_chevron-down.svg'); background-color: none; background-repeat: no-repeat; background-position-x: 97%; background-position-y: 50%; background-size: 20px 17px; border: solid 1px rgba(0,0,0,0.05); border-radius: 0; clear: both; color: #000; font-family: "Poppins", Helvetica, sans-serif; font-size: 1em; margin-bottom: 1em; padding: 1em; text-transform: capitalize; min-width: 5em; width: 100%; } select:focus { background-color: rgba(0,0,0,0.1); } span { } strong { font-weight: bold; } time { font-size: 0.73em; font-weight: lighter; margin-bottom: 2em; } table { border-bottom: solid 1px #dedede; border-collapse: collapse; font-size: 0.8em; font-weight: normal; width: 100%; } table td { border: none; padding: 1.5em 0 1.5em 0; text-align: left; vertical-align: middle; } table td a, a:link, a:visited { color: #222; } table td img { height: auto; width: 100%; } table td span { color: #999; font-size: 0.8em; } table th { background: none; font-weight: 500; padding: 1.5em 0 1.5em 0; text-align: left; vertical-align: middle; } table tr { border-top: solid 1px #dedede; width: 100%; } table tr:hover { background-color: rgba(255,255,255,0.25); } textarea { appearance: none; -moz-appearance: none; -webkit-appearance: none; background: #fff; border: solid 1px rgba(0,0,0,0.05); color: #333; height: 100px; margin-bottom: 10px; padding: 5px; width: 99%; } ul {} ul li { list-style: disc; list-style-type: disc; } /* ———————————————————————————————————————————————————————————————————————————————————————————— CLASSES * * Use throughout the site to modify the appearance and functionality of a specific element * * 1. Multiple classes can be used for the same element, but should be done sparingly (overuse indicates an element should be simplified) * 2. Selector can be paired with a class to modify specific attributes (i.e. #selector .class {} ) ———————————————————————————————————————————————————————————————————————————————————————————— */ .align {} .align_bottom { margin: auto; vertical-align: bottom; } .align_center { margin: auto; text-align: center; } .align_left { text-align: left; } .align_middle { bottom: 0; height: 50%; left: 0; margin: auto; position: absolute !important; right: 0; top: 0; vertical-align: middle; } .align_right { text-align: right; } [class*='animation_'].loop { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animation_blink { -webkit-animation: blink 0.6s 3s both; animation: blink 0.6s 3s both; } @-webkit-keyframes blink { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes blink-1 { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } .animation_hover { -webkit-animation: animation_hover 1.7s cubic-bezier(0.445, 0.050, 0.550, 0.950) infinite both; animation: animation_hover 1.7s cubic-bezier(0.445, 0.050, 0.550, 0.950) infinite both; } @-webkit-keyframes animation_hover { 0%,50%,100% { -webkit-transform: translateY(0); transform: translateY(0); } 25%, 75% { -webkit-transform: translateY(5px); transform: translateY(5px); } } @keyframes animation_hover { 0%,50%,100% { -webkit-transform: translateY(0); transform: translateY(0); } 25%, 75% { -webkit-transform: translateY(5px); transform: translateY(5px); } } .animation_rotate_0 { transform: rotate(0); -webkit-transform: rotate(0deg); transition: 0.35s all ease; } .animation_rotate_45 { transform: rotate(45); -webkit-transform: rotate(45deg); transition: 0.35s all ease; } .animation_rotate-360 { -webkit-animation: rotate-center 40s ease-in-out infinite both; animation: rotate-center 40s ease-in-out infinite both; } @-webkit-keyframes rotate-center { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate-center { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .animation_scale_in_center { animation: scale-in-center 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s both; -webkit-animation: scale-in-center 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s both; } @-webkit-keyframes scale-in-center { 0% { -webkit-transform: translateZ(600px); transform: translateZ(600px); opacity: 0; } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } @keyframes scale-in-center { 0% { -webkit-transform: translateZ(600px); transform: translateZ(600px); opacity: 0; } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } .animation_slide_in_left { animation: slide-in-left 0.4s cubic-bezier(0.29, 0.98, 0.73, 0.99) ; -webkit-animation: slide-in-left 0.4s cubic-bezier(0.29, 0.98, 0.73, 0.99); } @-webkit-keyframes slide-in-left { 0% { -webkit-transform: translateX(-200%); transform: translateX(-200%); opacity: 0.8; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1.0; } } @keyframes slide-in-left { 0% { -webkit-transform: translateX(-200%); transform: translateX(-200%); opacity: 0.8; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1.0; } } .animation_slide_in_right { animation: slide-in-right 0.4s cubic-bezier(0.29, 0.98, 0.73, 0.99) ; -webkit-animation: slide-in-right 0.4s cubic-bezier(0.29, 0.98, 0.73, 0.99); } @-webkit-keyframes slide-in-right { 0% { -webkit-transform: translateX(200%); transform: translateX(200%); opacity: 0.5; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1.0; } } @keyframes slide-in-right { 0% { -webkit-transform: translateX(200%); transform: translateX(200%); opacity: 0.5; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1.0; } } .animation_slide_in_top { animation: slide-in-top 0.4s cubic-bezier(0.29, 0.98, 0.73, 0.99) ; -webkit-animation: slide-in-top 0.4s cubic-bezier(0.29, 0.98, 0.73, 0.99); } @-webkit-keyframes slide-in-top { 0% { -webkit-transform: translateY(-200%); transform: translateY(-200%); opacity: 0.5; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1.0; } } @keyframes slide-in-top { 0% { -webkit-transform: translateY(-200%); transform: translateY(-200%); opacity: 0.5; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1.0; } } .animation_slide_out_bottom { animation: slide-out-bottom 0.5s cubic-bezier(0.600, -0.280, 0.735, 0.045) both; -webkit-animation: slide-out-bottom 0.5s cubic-bezier(0.600, -0.280, 0.735, 0.045) both; } @-webkit-keyframes slide-out-bottom { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1.0 } 100% { -webkit-transform: translateY(110%); transform: translateY(110%); opacity: 0; } } @keyframes slide-out-bottom { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1.0; } 100% { -webkit-transform: translateY(110%); transform: translateY(110%); opacity: 0; } } .animation_slide_out_left { animation: slide-out-left 0.4s cubic-bezier(0.550, 0.055, 0.675, 0.190) ; -webkit-animation: slide-out-left 0.4s cubic-bezier(0.550, 0.055, 0.675, 0.190); } @-webkit-keyframes slide-out-left { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1.0 } 99% { -webkit-transform: translateX(-200%); transform: translateX(-200%); opacity: 0.8; } 100% { opacity: 0; } } @keyframes slide-out-left { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1.0; } 100% { -webkit-transform: translateX(-200%); transform: translateX(-200%); opacity: 0; } } .animation_slide_out_right { animation: slide-out-right 0.4s cubic-bezier(0.550, 0.055, 0.675, 0.190) ; -webkit-animation: slide-out-right 0.4s cubic-bezier(0.550, 0.055, 0.675, 0.190); } @-webkit-keyframes slide-out-right { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1.0 } 100% { -webkit-transform: translateX(200%); transform: translateX(200%); opacity: 0; } } @keyframes slide-out-right { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1.0; } 100% { -webkit-transform: translateX(200%); transform: translateX(200%); opacity: 0.75; } } .animation_slide_out_top { animation: slide-out-top 0.4s cubic-bezier(0.29, 0.98, 0.73, 0.99) ; -webkit-animation: slide-out-top 0.4s cubic-bezier(0.29, 0.98, 0.73, 0.99); } @-webkit-keyframes slide-out-top { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1.0 } 100% { -webkit-transform: translateY(-100%); transform: translateY(-100%); opacity: 0.9; } } @keyframes slide-out-top { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1.0; } 100% { -webkit-transform: translateY(-100%); transform: translateY(-100%); opacity: 0.9; } } .animation_wobble { animation: animation_wobble 1.3s ease-in-out infinite both; -webkit-animation: animation_wobble 1.3s ease-in-out infinite both; } @-webkit-keyframes animation_wobble { 0%, 100% { -webkit-transform: translateX(0%); transform: translateX(0%); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } 15% { -webkit-transform: translateX(-30px) rotate(-6deg); transform: translateX(-30px) rotate(-6deg); } 30% { -webkit-transform: translateX(15px) rotate(6deg); transform: translateX(15px) rotate(6deg); } 45% { -webkit-transform: translateX(-15px) rotate(-3.6deg); transform: translateX(-15px) rotate(-3.6deg); } 60% { -webkit-transform: translateX(9px) rotate(2.4deg); transform: translateX(9px) rotate(2.4deg); } 75% { -webkit-transform: translateX(-6px) rotate(-1.2deg); transform: translateX(-6px) rotate(-1.2deg); } } @keyframes animation_wobble { 0%, 100% { -webkit-transform: translateX(0%); transform: translateX(0%); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } 15% { -webkit-transform: translateX(-30px) rotate(-6deg); transform: translateX(-30px) rotate(-6deg); } 30% { -webkit-transform: translateX(15px) rotate(6deg); transform: translateX(15px) rotate(6deg); } 45% { -webkit-transform: translateX(-15px) rotate(-3.6deg); transform: translateX(-15px) rotate(-3.6deg); } 60% { -webkit-transform: translateX(9px) rotate(2.4deg); transform: translateX(9px) rotate(2.4deg); } 75% { -webkit-transform: translateX(-6px) rotate(-1.2deg); transform: translateX(-6px) rotate(-1.2deg); } } /* Blocks */ [class*='block_'] { display: block; margin: 0 auto 0 auto; padding: 0 0 2em 0; position: relative; } /* Advertisement */ .block_advertisement { display: block; flex-basis: 100%; flex-grow: 1; height: auto; margin: 0; padding: 1em; text-align: center; width: 100%; } .block_advertisement p { font-size: 0.6em; margin-top: 0.4em; opacity: 0.35; } .block_advertisement .wrap_outer { margin: auto; padding: 2em; text-align: center; } /* Author */ .block_author {} .block_author .byline { margin: 4em 0 2.5em 0; text-align: center; text-transform: uppercase; } /* Billboard */ .block_billboard { /* background-color: #000; */ height: auto; overflow: hidden; position: relative; width: auto; } .block_billboard a, .billboard a:link, .billboard a:visited { color: #fff; } .block_billboard a:hover { text-decoration: none; } .block_billboard .image { /* opacity: 0.85; */ height: 600px; } .block_billboard .copy { background: linear-gradient(rgba(0,0,0,.0), rgba(0,0,0,.6) 100%); bottom: 0; color: #fff; padding: 4em 2em 2em 2em; position: absolute; /* text-shadow: 1px 1px 1px rgba(0,0,0,0.25); */ width: 100%; } .block_billboard .copy h1 { color: #fff; width: 50%; } .block_billboard .copy h2.subhead { color: #fff; font-size: 3em; margin-bottom: 0.5em; padding: 0; text-shadow: 0px 0px 15px rgba(0,0,0,0.35); } .block_billboard .copy h3 { color: #fff; font-size: 6em; font-weight: 200; line-height: 0.96em; letter-spacing: -0.035em; } /* Button */ .block_button {} .block_button [class*='button_'] { background: #0099ff; border: solid 2px #0099ff; color: #fff; font-size: 1.1em; font-weight: 500; margin: 2em 0 2em 0; padding: 1em 2em 1em 2em; text-align: center; min-width: 12em; } .block_button [class*='button_']:hover { color: #fff; opacity: 1.0; } .block_button .button_rounded_outline { background: none; border-radius: 10em; color: #0099ff; } .block_button .button_rounded_outline:hover { background: #0099ff; color: #fff; } .block_button .button_rounded_solid { border-radius: 20em; } .block_button .button_square_outline { background: none; color: #0099ff; } .block_button .button_square_outline:hover { background: #0099ff; color: #fff; } .block_button .button_square_solid {} /* Embed Code */ .block_code { min-height: 250px; } /* Collection */ .block_collection {} .block_collection [class*='span_'] { padding-right: 0.25em; } .block_collection [class*='span_']:nth-last-child { padding-right: 0; } .block_collection .box { background: #dfdfdf; min-height: 15em; height: 100%; width: 100%; } /* Default */ .block_default { background: rgba(0,0,0,0.05); height: 250px; overflow: hidden; /* outline: dashed 1px rgba(0,0,0,0.5); outline-offset: -0.5em; */ position: relative; padding: 5em 0 5em 0; text-align: center; transition: 0.35s all ease; } /* sets default state of block */ .block_default img { height: 75px !important; margin: auto; opacity: 0.25; transform: scale(1.0); transition: 0.35s all ease; width: auto; } /* sets default state of image */ .block_default label { display: block; font-size: 0.8em !important; font-weight: 400; opacity: 0.25; } .block_default .position_middle { height: 110px; } /* Gallery*/ .block_gallery {} .block_gallery figure {} .block_gallery figure figcaption {} .block_gallery figure img {} /* Header */ .block_header { padding: 5em 0 2em 0; width: 85%; } .block_header .byline { font-size: 0.90vw; font-weight: 400; letter-spacing: 0.4em; margin: 0; text-transform: uppercase; } .block_header .date { font-size: 0.85em; font-weight: 400; letter-spacing: 0.09em; margin: 0 0 2em 0; text-transform: uppercase; } .block_header .dek { margin: auto; max-width: 80%; } .block_header .headline { margin-bottom: 0.25em; } .block_header .hero { background: rgba(0,0,0,0.02); max-height: 1080px; height: 100%; margin: 2em auto 2em auto; overflow: hidden; padding: 0 !important; width: 100%; z-index: 2; } .block_header .hero img { height: 100%; object-fit: contain; object-position: center bottom; width: 100%; max-width: 1800px; } .block_header .share { margin: 2em auto 2em auto; text-align: center; } .block_header .share a { margin-right: 0.8em; } .block_header .share .fa { font-size: 1.3em; } /* Header Featured */ .block_header.featured { height: 98%; margin: 0; padding: 0 !important; position: relative; width: 100%; } .block_header.featured hgroup { margin: auto; max-width: 85%; } .block_header.featured .arrowdown { animation: float 1.5s ease-in-out infinite; bottom: 8%; display: block; height: auto; left: auto; margin: auto; position: absolute; right: 2em; transform: translatey(0px); width: 50px; z-index: 999; } @keyframes float { 0% { transform: translatey(0px); } 50% { transform: translatey(-5px); } 100% { transform: translatey(0px); } } .block_header.featured .byline { color: #fff; display: none; font-size: 0.90vw; font-weight: 400; letter-spacing: 0.4em; margin: 0; text-transform: uppercase; } .block_header.featured .date { color: #fff; display: block; font-size: 0.85em; font-weight: 400; letter-spacing: 0.09em; margin: 0 0 2em 0; text-transform: uppercase; } .block_header.featured .dek { color: #fff; font-size: 1.5em; font-weight: 400; letter-spacing: 0.08em; line-height: 1.2em; margin: auto; max-width: 80%; } .block_header.featured .headline { color: #fff; font-family: "Playfair Display"; font-size: 6.5em; font-style: italic; font-weight: 600; letter-spacing: -0.04em; line-height: 0.9em; margin-bottom: 0.25em; text-transform: lowercase; } .block_header.featured .hero { max-height: 95%; overflow: hidden; width: 100%; } .block_header.featured .hero img { width: 100%; max-width: 100%; } .block_header.featured .share { color: #fff; font-size: 1em; margin: 2.5em 0 1em 0; } .block_header.featured .share a { color: #fff; margin-right: 0.8em; } .block_header.featured .position_middle { height: 50%; padding: 2em; width: 85%; z-index: 999; transition: 0.25s all ease; } .block_header.featured img { filter: brightness(0.75); height: 100%; object-fit: cover; object-position: center top; width: auto; max-width: 100%; } /* Heading */ .block_heading { display: block; padding: 0.5em 0 0.5em 0; } .block_heading h3 { margin: auto; } .block_heading .wrap_inner { } /* Hero */ .block_lead-image { background: rgba(0,0,0,0.03); max-height: 1200px; height: 100%; margin: auto; overflow: hidden; padding: 0 !important; width: 100%; z-index: 2; } .block_lead-image figure { margin: auto; overflow: hidden; padding: 0; max-width: 1800px; } .block_lead-image img { height: 100%; filter: brightness(0.9); object-fit: fill; } .block_lead-image .noimage { max-height: 600px; padding: 2em; } .block_lead-image .overlay { background: rgba(0,0,0,0.5); display: none; position: absolute; z-index: 887; } /* Image */ .block_image { margin: 0 auto 0 auto; overflow: hidden; padding: 0; } .block_image figure {} .block_image figure figcaption {} .block_image .image {} .block_image .noimage { background: rgba(0,0,0,0.07); margin: 0; padding: 5em; } .block_image .noimage img { max-height: 500px; } .block_image .wrap { padding: 0 4em 0 4em; } /* Line */ .block_line { margin: 1em auto 3em auto; padding: 2em 0 2em 0; width: 100%; } .block_line .line_thick { border-top: solid 3px #000; } .block_line .line_thin { border-top: solid 1px #000; } /* Recipe */ .block_recipe {} .block_recipe h3 { margin-bottom: 1em; } .block_recipe hr { margin: 4em 0 4em 0; } .block_recipe [class*='recipe_'] { padding: 2em; } /* Teaser */ .block_teaser { margin: 0; padding: 0 !important; } /* ad */ .block_teaser .ad { margin: auto; text-align: center; } .block_teaser .ad p { font-size: 0.6em; margin-top: 0.4em; opacity: 0.35; } /* default */ .block_teaser [class*='grid_'] { background: none; overflow: hidden; height: 250px; margin: 0 0 2em 0; padding-right: 1em; position: relative; width: 100%; } .block_teaser [class*='grid_'] .copy { background: #fff; bottom: 0; height: 40%; left: 0; margin: auto; padding: 1em 0.5em 1em 0.5em; position: absolute; right: 0; text-align: center; top: 0; width: 100%; } .block_teaser [class*='grid_'] .copy hgroup { bottom: 0; height: 90%; left: 0; margin: auto; right: 0; top: 0; width: auto; } .block_teaser [class*='grid_'] .copy h3 { font-size: 2.5vw; font-weight: 600; line-height: 1.1em; } .block_teaser [class*='grid_'] .copy p { font-size: 0.93em; font-weight: 300; letter-spacing: 0.05em; line-height: 0.8em; } .block_teaser [class*='grid_'] .image { height: 60%; overflow: hidden; position: relative; width: 100%; } .block_teaser [class*='grid_'] .image img { height: 100%; object-fit: cover; transform: scale(1.0); transition: 0.35s all ease; } .block_teaser [class*='grid_']:hover .image img { transform: scale(1.02); transition: 0.35s all ease; } .block_teaser [class*='grid_'] .rubric { display: block; font-size: 0.65em; font-weight: 600; letter-spacing: 0.1em; margin: 1em auto 1em auto; text-align: center; text-transform: uppercase; width: auto; max-width: 100px; } /* 1 column */ .block_teaser .grid_columns_1 { height: 500px; } .block_teaser .grid_columns_1 .copy { bottom: 0; height: 100%; left: auto; margin: 0; overflow: hidden; padding: 5%; position: absolute; right: 0; text-align: center; top: 0; width: 50%; } .block_teaser .grid_columns_1 .copy hgroup {} .block_teaser .grid_columns_1 .copy h3 { font-size: 2.5em; font-weight: 600; line-height: 1.1em; margin-bottom: 0.5em; } .block_teaser .grid_columns_1 .copy h4 { font-size: 1.1em; font-weight: 400; line-height: 1.5em; } .block_teaser .grid_columns_1 .copy p { line-height: 1.8em; margin: auto; max-width: 75%; } .block_teaser .grid_columns_1 .copy time { color: #fff; font-size: 0.9em; font-weight: 300; } .block_teaser .grid_columns_1 .image { height: 100%; left: 0; overflow: hidden; position: absolute; width: 50%; } .block_teaser .grid_columns_1 .image img { object-fit: cover; filter: brightness(0.85); height: 100%; width: 100%; transition: 0.35s all ease; } .block_teaser .grid_columns_1:hover .image img { filter: brightness(0.90); transform: scale(1.02); transition: 0.35s all ease; } .block_teaser .grid_columns_1 .rubric { display: block; font-size: 0.6em; font-weight: 600; letter-spacing: 0.05em; margin: 1em auto 1em auto; padding: 1em !important; text-align: center; text-transform: uppercase; width: auto; max-width: 100px; } /* 2 columns */ .block_teaser .grid_columns_2 { height: 600px; } .block_teaser .grid_columns_2 .copy { display: block; position: relative; } .block_teaser .grid_columns_2 .copy hgroup { width: 100%; } .block_teaser .grid_columns_2 .copy h3 { font-size: 1.5em; font-weight: 600; line-height: 1.1em; margin-bottom: 0.5em; position: relative; } .block_teaser .grid_columns_2 .copy h4 { font-size: 1.1em; font-weight: 400; line-height: 1.5em; } .block_teaser .grid_columns_2 .copy p { font-size: 0.9em; line-height: 1.5em; margin: auto; max-width: 90%; } .block_teaser .grid_columns_2 .copy time { color: #fff; font-size: 0.9em; font-weight: 300; } .block_teaser .grid_columns_2 .image {} .block_teaser .grid_columns_2 .image img { object-fit: cover; filter: brightness(0.85); height: auto; width: 100%; transition: 0.35s all ease; } .block_teaser .grid_columns_2 .rubric { display: block; } /* 3 columns */ .block_teaser .grid_columns_3 { height: 350px; } .block_teaser .grid_columns_3 .copy { /* height: 40%; */ position: relative; width: 100%; } .block_teaser .grid_columns_3 .copy hgroup {} .block_teaser .grid_columns_3 .copy h3 { font-size: 1.2em; } .block_teaser .grid_columns_3 .copy p { display: none; font-size: 0.75em; line-height: 1.3em; margin-top: 0.2em; } .block_teaser .grid_columns_3 .image {} /* .block_teaser .grid_columns_3:nth-child(even) .copy { bottom: auto; position: absolute; top: 0; } .block_teaser .grid_columns_3:nth-child(even) .image { bottom: 0; position: absolute; top: auto; } */ /* 4 columns */ .block_teaser .grid_columns_4 { height: 300px; } .block_teaser .grid_columns_4 .copy { /* height: 40%; */ position: relative; width: 100%; } .block_teaser .grid_columns_4 .copy h3 { font-size: 1.2em; } .block_teaser .grid_columns_4 .copy p { display: none; font-size: 0.9em; line-height: 1.3em; } .block_teaser .grid_columns_4 .image {} /* ad */ .block_teaser .grid_columns_1.ad { height: auto; } /* hero */ .block_teaser .hero { height: 800px; margin: auto; overflow-x: hidden; padding: 0; position: relative; max-width: 2000px; width: 100%; } .block_teaser .hero .copy { background: none; bottom: 10%; height: 75%; left: 0; margin: auto; position: absolute; right: 0; text-align: center; top: auto; width: 75%; } .block_teaser .hero .copy hgroup { bottom: 0; height: 40%; left: 0; margin: auto; position: absolute; right: 0; top: 0; } .block_teaser .hero .copy h3 { color: #fff; font-size: 6.5em; font-weight: 600; letter-spacing: -0.02em; line-height: 0.9em; } .block_teaser .hero .copy p { color: #fff; font-size: 1.5em; font-weight: 500; letter-spacing: 0.05em; line-height: 1.2em; margin: auto; text-transform: capitalize; max-width: 75%; } .block_teaser .hero .image { height: 100%; overflow: hidden; } .block_teaser .hero .image img { height: 100%; filter: brightness(0.75); object-fit: cover; object-position: center top; transform: scale(1.0); transition: 0.35s all ease; width: 100%; } .block_teaser .rubric { display: none; } /* Text */ .block_text { margin: auto; padding: 2.5em 0 2.5em 0; } .block_text h1 { margin: auto; } .block_text h2 { margin: auto; } .block_text h3 { margin: auto; } .block_text h4 { margin: auto; } .block_text p { margin: auto; padding: 0.5em 0 0.5em 0;; } .block_text ol { margin: auto; padding-bottom: 1em; } .block_text ul { margin: auto; padding-bottom: 1em; } /* Video */ .block_video { background: #000; } .block_video .wrap { margin: auto; padding: 0; text-align: center; width: 100%; } .border { border: solid 1px #bbb; } .border_bottom { border-bottom: solid 1px #d0d0d0; } .border_left { border-left: solid 1px #d0d0d0; } .border_right { border-right: solid 1px #d0d0d0; } .border_test { border: solid 1px #0ff; } .button { background-color: #000; color: #fff; display: inline-block; font-family: "Poppins", Helvetica, sans-serif; font-weight: 500; padding: 1em 2em 1em 2em; text-align: center; text-decoration: none; text-indent: 0; transition: 0.50s all ease; vertical-align: middle; width: auto; } .button:active { position: relative; top: 1px; } .button:hover { background-color: #333; transition: 0.50s all ease; } [class*='button_'] { background: #0099ff; border: solid 2px #0099ff; color: #fff; display: inline-block; margin: 1em 0 1em 0; padding: 0.8em 2em 0.8em 2em; text-align: center; min-width: 12em; } [class*='button_']:hover { color: #fff; opacity: 1.0; } .button_rounded_outline { background: none; border-radius: 10em; color: #0099ff; } .button_rounded_outline:hover { background: #0099ff; color: #fff; } .button_rounded_solid { border-radius: 20em; } .button_rounded_solid:hover { color: #fff; opacity: 0.5; } .button_square_outline { background: none; color: #0099ff; } .button_square_outline:hover { background: #0099ff; color: #fff; } .button_square_solid {} .capitalize { text-transform: capitalize; } .carousel { height: 720px; overflow: hidden; position: relative; width: 100%; } .carousel__nav { bottom: 0; height: 100%; position: absolute; top: 0; width: 100%; } .carousel__nav ul li { background: #000; border: solid 3px #000; border-radius: 2em; display: inline-block; height: 12px; list-style: none !important; transition: 0.20s all ease; width: 12px; } .carousel__nav ul li.active { background: #fff; border: solid 3px #000; height: 12px; transition: 0.20s all ease; width: 12px; } .carousel__nav ul { bottom: 0; height: 20px; margin: auto; left: 0; position: absolute; right: 0; } .carousel button { appearance: none; -webkit-appearance: none; background: rgba(255,255,255,0.25); border: none; border-radius: 2em; font-size: 3em; opacity: 0.05; transition: 0.20s all ease; } .carousel button img { min-height: 40px; width: auto; } .carousel button:hover { opacity: 1.0; transition: 0.20s all ease; } .carousel .prev { bottom: 0; left: 0; position: absolute; top: 0; } .carousel .next { bottom: 0; position: absolute; right: 0; top: 0; } .clear { clear: both; height: 0.000001em; } .circle { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; display: inline-block; overflow: hidden; text-align: center; } .color {} .color_black { background-color: #000; color: #000; fill: #000; } .color_blue { color: rgba(52, 152, 219,0.75); } .color_green { color: rgba(46, 204, 113,0.75); } .color_orange { color: rgba(243, 156, 18,0.75); } .color_purple { color: rgba(155, 89, 182,0.75); } .color_red { color: rgba(231, 76, 60,0.75); } .color_white { background-color: #fff; color: #333; fill: #fff; } .color_yellow { color: rgba(241, 196, 15,0.75); } .color_primary { background-color: rgba(0,0,0,1.0); color: #000; } .color_secondary { background-color: rgba(0,0,0,0.75); color: #000; } .color_tertiary { background-color: rgba(0,0,0,0.50); color: #000; } .column_ {} [class*='column_'] { column-gap: 1em; -moz-column-gap: 1em; -webkit-column-gap: 1em; } .column_2 { column_count: 2; -moz-column-count: 2; -webkit-column-count: 2; } .column_3 { column_count: 3; -moz-column-count: 3; -webkit-column-count: 3; } .column_4 { column_count: 4; -moz-column-count: 4; -webkit-column-count: 4; } .column_5 { column_count: 5; -moz-column-count: 5; -webkit-column-count: 5; } .column_6 { column_count: 6; -moz-column-count: 6; -webkit-column-count: 6; } .container {} .dim { opacity: 0.25; } .display { display: block; } .dropcap {} .dropcap:first-letter { color:#000; float:left; font-size: 5em; font-style: normal; font-weight: 600; line-height: 0.5em; margin: 0.20em 0 0 0; padding: 0 0.08em 0 0; text-transform: uppercase; } .error { clear: both; color: #ae4f4f; display: block; } /* form validation */ input.error { border: solid 1px #cd1212; box-shadow: 0 0 8px #fcd7d7; font-size: 16px; font-weight: lighter; margin-bottom: 10px; padding: 10px; } label.error { color: #cd1212; font-size: 0.8em; margin: 0.3em 0 0.8em 0; padding: 0.5em 0 0.5em 0; text-transform: capitalize; width: 98%; } .float { bottom: 0; left: 0; margin: 0; position: absolute; right: 0; top: 0; z-index: 99; } .float_center { bottom: 0; height: 45%; left: 0; margin: auto; position: absolute; right: 0; top: 0; z-index: 800; } .float_left { float: left; } .float_right { float: right; } .fullscreen { bottom: 0; height: 100%; left: 0; position: absolute; right: 0; top: 0; width: 100%; } .grid { display: flex; flex-wrap: wrap; height: 100%; justify-content: space-between; margin: 0 0 0 0; } [class*='grid_columns_'] { /* display: grid; grid-gap: 2em; */ height: 100%; padding: 0 0 0 0; width: 100%; } .grid_columns_1 { /* grid-template-columns: repeat(1,1fr); */ flex-grow: 1; } .grid_columns_2 { /* grid-template-columns: repeat(2,2fr); */ flex-basis: 50%; flex-grow: 1; } .grid_columns_3 { /* grid-auto-rows: minmax(300px, 550px); grid-template-columns: repeat(3,3fr); */ flex-basis: 33%; flex-grow: 1; } .grid_columns_4 { /* grid-template-columns: repeat(4,4fr); */ flex-basis: 25%; flex-grow: 1; } .grid_masonry { display: flex; flex-direction: row; flex-wrap: wrap; height: 100vw; max-height: 600px; } .grid_masonry_child { width: 16.67%; } .hidden { display: none; } .hover { opacity: 0; transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; -webkit-transition: opacity .2s ease-in-out; } .hover:hover { opacity: 1; transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; -webkit-transition: opacity .2s ease-in-out; } .icon { height: auto; max-width: 20px; } .icon_xsmall { max-width: 15px; } .icon_small { max-width: 22px; } .icon_medium { max-width: 30px; } .icon_large { max-width: 40px; } .icon_xlarge { max-width: 60px; } .icon_xxlarge { max-width: 120px; } .icon_checkmark { animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both; border-radius: 50%; box-shadow: inset 0px 0px 0px #fafafa; display: block; height: 40%; margin: 10% auto; stroke: rgba(0,0,0,0); stroke-miterlimit: 10; stroke-width: 1; width: 40%; max-width: 140px; } .icon_checkmark .animate_check { transform-origin: 50% 50%; stroke-dasharray: 48; stroke-dashoffset: 48; animation: stroke 0.4s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; } .icon_checkmark .animate_circle { stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 2; stroke-miterlimit: 10; stroke: #000; fill: none; animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; } @keyframes stroke { 100% { stroke-dashoffset: 0; } } @keyframes scale { 0%, 100% { transform: none; } 50% { transform: scale3d(1.1, 1.1, 1); } } @keyframes fill { 100% { box-shadow: inset 0px 0px 0px 30px #000; } } .icon_spinner { background-color: rgba(0,0,0,0.25); border-radius: 100%; bottom: 0; height: 50px; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 50px; } .icon_spinner.animate { animation: spinner-scaleout 1.0s infinite ease-in-out; -webkit-animation: spinner-scaleout 1.0s infinite ease-in-out; } @-webkit-keyframes spinner-scaleout { 0% { -webkit-transform: scale(0) } 100% { -webkit-transform: scale(1.0); opacity: 0; } } @keyframes spinner-scaleout { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1.0); transform: scale(1.0); opacity: 0; } } .inline { list-style: none; list-style-type: none; list-style-position: inherit; list-style-image: none; } .inline li { float: left; } .inline li:last-of-type { margin-right: 0; } .inline_block { display: inline-block; } .invisible { visibility: hidden; } .kicker { /* label or short deck above the head */ } .lowercase { text-transform: lowercase; } .mail_canvas { background: #fff; margin: 2em auto 2em auto; padding: 2em; width: 80%; } .mail_canvas p { margin: auto; max-width: 80%; } .margin { margin: 1em; } .margin_bottom { margin-bottom: 1em; } .margin_left { margin-left: 1em; } .margin_none { margin: 0; } .margin_right { margin-right: 1em; } .margin_top { margin-top: 1em; } .masonry { column_count: 4; -moz-column-count: 4; -webkit-column-count: 4; } .masonry_item { display: inline-block; margin-bottom: 0.5em; position: relative; } .menu { } .menu ul { list-style: none; list-style-type: none; position: absolute; left: -9999px; width: 100%; z-index: 9999; /* hide off-screen when not needed */ } .menu ul a { color: #fff; letter-spacing: 0.07em; white-space: nowrap; /*top level links */ } .menu ul li { background-color: #333; float: none; padding: 2em; list-style: none; } .menu li:hover ul { height: auto; left: 0; padding-top: 0.6em; width: 100%; /* bring back on-screen when needed */ } .menu li:hover ul a { clear: both; display: block; padding-bottom: 0.5em; } .menu li:hover ul h3 { color: #fff; font-size: 0.95em; padding-bottom: 0.6em; text-decoration: underline; } .offscreen { left: -999em; position: absolute; } .outline {} .outline_dashed { outline: dashed 3px #e9e9e9; padding: 5em; } .overlay { background: rgba(250,249,248,1.0); bottom: 0; height: 100%; left: 0; margin: auto; position: fixed; right: 0; top: 0; width: 100%; z-index: 99999; } .overlay .loading { bottom: 0; height: 50px; left: 0; margin: auto; right: 0; position: absolute; top: 0; text-align: center; width: auto; } .pad { padding: 1em; } .pad_bottom { padding-bottom: 0.5em; } .pad_bottom_5 { padding-bottom: 5em; } .pad_bottom_10 { padding-bottom: 10em; } .pad_left { padding-left: 2em; } .pad_none { padding: 0; } .pad_right { padding-right: 2em; } .pad_top { padding-top: 1em; } .pad_top_5 { padding-top: 5em; } .pad_top_10 { padding-top: 10em; } .parallax { background-attachment: fixed; background-position: center top; background-repeat: no-repeat; background-size: cover; height: 100%; margin-bottom: 1em; object-fit: cover; transform: translateZ(2px) scale(1.05); width: 100%; z-index: 1; } .position_bottom { bottom: 0; margin: auto; position: absolute; } .position_bottom_left { bottom: 0; left: 0; margin: auto; position: absolute; } .position_bottom_right { bottom: 0; margin: auto; right: 0; position: absolute; } .position_left { bottom: 0; left: 0; margin: auto; position: absolute; right: auto; top: 0; } .position_middle { bottom: 0; left: 0; margin: auto; position: absolute; right: 0; top: 0; } .position_relative { position: relative; } .position_right { bottom: 0; left: auto; margin: auto; position: absolute; right: 0; top: 0; } .position_top { margin: auto; position: absolute; top: 0; } .position_top_left { left: 0; margin: auto; position: absolute; top: 0; } .position_top_right { margin: auto; position: absolute; right: 0; top: 0; } [class*='position_'].fixed { position: fixed; } .rotate {} .rotate_45 { transform: rotate(45deg); } .rotate_90 { transform: rotate(90deg); } .rubric { font-size: 0.9em; margin 1em 0 1em 0; padding: 1em; min-width: 60px; } .share { font-size: 1.1em; margin: 2em 0 2em 0; } .share a { margin-right: 0.5em; } .slider { margin: 0 auto 0 auto; overflow: hidden; position: relative; } .slider ul { height: 500px; list-style: none; margin: 0; padding: 0; position: relative; width: 100%; } .slider ul li { display: block; float: left; height: 200px; margin: 0; padding: 0; position: relative; width: 500px; } .slider_control_next, .slider_control_prev { cursor: pointer; display: block; height: auto; opacity: 0.8; padding: 0.2em; position: absolute; top: 40%; width: auto; z-index: 999; } .slider_control_next { right: 0; } .slider_control_prev { left: 0; } .social { font-size: 1.5em; margin: 2em 0 2em 0; } .span_ { } [class*='span_'] { float: left; } [class*='span_'] img { height: auto; width: 100%; } .span_1 { width: 8.333%; } .span_2 { width: 16.67%; } .span_3 { width: 25.00%; } .span_4 { width: 33.33%; } .span_5 { width: 41.66%; } .span_6 { width: 50.00%; } .span_7 { width: 58.33%; } .span_8 { width: 66.67%; } .span_9 { width: 75.00%; } .span_10 { width: 83.33%; } .span_11 { width: 91.67%; } .span_12 { width: 100.0%; } .sticky { background: none /* rgba(255,255,255,0.95)*/; border-bottom: none 1px #eee; left: 0; position: fixed; top: 0; z-index: 10001; } .theme { background-color: #fff; /* default color, can be overwritten in cms */ } .tombstone {} .tombstone p:last-child:after { color: #000; content: " \220E"; display: inline-block; font-size: 1.5em; padding-left: 0.2em; } .ui_modal_close { border: none; color: #fff; margin: 1em; outline: none; padding: 0.3em 0.6em 0.3em 0.6em; position: absolute; top: 0; right: 0; z-index: 9999; } .ui_modal_close a img { outline: none; } .ui_tab { font-weight: 500; margin: 2em auto 3em auto; padding: 1em 0 1em 0; text-align: center; width: 100%; } .ui_tab_button { border-bottom: solid 1px rgba(0,0,0,0.0); font-size: 0.95em; font-weight: 500; padding: 0.5em 1.5em 0.5em 1.5em; text-transform: uppercase; transition: 0.3s; min-width: 100px; width: auto; } .ui_tab_button.active { border-bottom: solid 1px #000; } .ui_tab_content { display: none; } .uppercase { text-transform: uppercase; } .video { height:0; overflow:hidden; padding-bottom:56.25%; position:relative; } .video iframe { height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .wrap { height: 100%; margin: auto; padding: 0 2em 0 2em; max-width: 1280px; } /* max-width determined by responsive media queries */ .wrap_inner { height: 100%; margin: auto; padding: 0 2em 0 2em; max-width: 800px; } .wrap_none { height: 100%; margin: auto; padding: 0; width: 100%; } .wrap_outer { height: 100%; margin: auto; padding: 0 1em 0 1em; width: 100%; } /* ———————————————————————————————————————————————————————————————————————————————————————————— SELECTORS * * Selectors are to be used as overwrites to customize the appearance of elements within a particular section * * 1. Selectors most commonly apply to parent pages * 2. Use sparingly (overuse typically indicates a new block/layout should be created or page should be simplified) ———————————————————————————————————————————————————————————————————————————————————————————— */ /* Advertisements */ #advertisement { /* background: rgba(0,0,0,0.05); border-bottom: solid 1px #dfdfdf; border-top: solid 1px #dfdfdf; */ margin: 0 auto 0 auto; padding: 1em; text-align: center; width: 100%; } #advertisement img { width: auto; } #advertisement p { font-size: 0.6em; margin-top: 0.4em; opacity: 0.35; } #advertisement .block { margin-bottom: 1.5em; padding: 1em 0 1em 0; } #advertisement .horizontal-large { } #advertisement .large-skyscraper { } #advertisement .large-rectangle { } #advertisement .leaderboard { margin: 0; padding: 1em; } #advertisement .medium-rectangle { height: 300px; } #advertisement .mobile-banner { margin: 1em 0 1em 0; padding: 1em 0 1em 0; } #advertisement .responsive { } /* .block_teaser .grid_columns_1.ad { background: rgba(0,0,0,0.05); height: 500px; } .block_teaser .grid_columns_1.ad #advertisement { background: none; bottom: 0; height: 40%; margin: auto; padding: 0; position: absolute; top: 0; } */ #content { height: 100%; margin: 0 auto 0 auto; } #content_credentials { background: none; height: 100%; position: relative; text-align: center; width: 100%; } #content_credentials fieldset { background: none; bottom: 0; height: 55%; left: 0; margin: auto; position: absolute; right: 0; text-align: center; top: 0; max-width: 450px; } #content_credentials h2 { margin-bottom: 1em; } #content_credentials h4 { font-size: 1em; font-weight: 600; } #content_favorites {} #content_favorites .ui_form_delete_id { opacity: 0; transition: 0.35s all ease; } #content_favorites tr { background: none; transition: 0.35s all ease; } #content_favorites tr:hover { background: rgba(0,0,0,0.02); transition: 0.25s all ease; } #content_favorites tr:hover .ui_form_delete_id { opacity: 1.0; transition: 0.25s all ease; } #common_footer { text-align: center; } #common_footer .copyright { clear: both; display: block; font-size: 0.8em; } #common_footer .denim { clear: both; display: block; margin: 2.5em auto 1.5em auto; max-width: 130px; } #common_footer .social { text-align: center; } #common_loader { background: none; display: none; } #common_loader .overlay { opacity: 1.0; } #common_modal {} #common_modal .overlay { background: rgba(255,255,255,0.98); padding: 5%; } #common_modal_iframe { background: #fff; } #common_modal_iframe .overlay { background: rgba(25,25,25,0.92); padding: 3% 5% 3% 5%; } #common_modal_iframe #modal_iframe_content { border-radius: 1.5em; height: 100%; overflow-y: scroll; padding: 1em; width: 100% } #common_nav { background-color: none; font-family: "Poppins", Helvetica, sans-serif; height: auto; left: 0; padding: 0.5em 0 0.5em 0; top: 0; width: 100%; } #common_nav.nav_admin { background-color: rgba(0,0,0,0.10); font-size: 0.8em; font-weight:400; text-transform: inherit; } #common_nav .nav_primary { font-size: 1.2em; font-weight: 600; letter-spacing: 0.02em; } #common_nav .nav_primary .nav_primary_button { background-color: none; color: #000; font-size: 0.65em; font-weight: 400; min-height: 20px; padding: 0.8em; } #common_nav .nav_primary .nav_primary_link { color: #000; display: inline; opacity: 1.0; transition: 0.15s all ease; text-transform: capitalize; } #common_nav .nav_primary .nav_primary_link:hover { opacity: 0.5; } #common_nav .nav_secondary { display: none; } #common_nav .nav_secondary .nav_secondary_button { background-color: none; color: #000; font-size: 0.7em; font-weight: 400; min-height: 20px; padding: 0.8em; } #common_nav .nav_secondary .nav_secondary_link { color: #000; display: inline; opacity: 1.0; transition: 0.15s all ease; text-transform: capitalize; } #common_nav .nav_tertiary { background: rgba(255,255,255,0.95); height: 100%; margin: 0; padding: 2%; position: fixed; top: 0; width: 100%; z-index: 999; } /* nav menu */ #common_nav .nav_tertiary .nav_menu_slideout { font-family: "Poppins", sans-serif; font-weight: 600; text-align: center; text-transform: capitalize; } #common_nav .nav_tertiary .nav_tertiary_link { display: block; font-size: 2em; } /* nav search */ #common_nav .nav_tertiary .nav_menu_search { height: 30%; left: 0; margin: auto; position: absolute; right: 0; text-align: center !important; top: 15%; } #common_nav .nav_tertiary .nav_menu_search h3 { color: #333; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 0; text-align: center; } #common_nav .nav_tertiary .nav_menu_search h5 { color: #333; } #common_nav .nav_tertiary .nav_menu_search input { background: none /*url('/img/icon_magnifier.svg'); background-position-x: 98%; background-repeat: no-repeat; */; border: none; border-radius: 0; border-bottom: solid 1px #333; font-size: 6vh; font-weight: 600; letter-spacing: -0.04em; margin: 0.5em auto 0.5em auto; outline: none; padding: 0.5em 0 0.2em 0; text-align: center; text-transform: uppercase; width: 80%; max-width: 600px; } /* nav icons */ #common_nav [class*='ui_icon_'] { border: none; margin: 0; padding: 0.5em 1em 0.5em 1em; vertical-align: middle; min-width: auto; width: 30px; } #common_nav .ui_icon_close { display: block; margin: 1em; left: 0; padding: 0; position: fixed; top: 0; width: 100%; } #common_nav .ui_icon_menu { background: url('/img/icon_menu.svg'); background-position: center center; background-repeat: no-repeat; background-size: 25px 30px; width: 30px; } #common_nav .ui_icon_logo { display: block; margin: 1.5em 0 3em 0; } #common_nav .ui_icon_logo img { max-width: 350px; } #common_nav .ui_icon_search { background: url('/img/icon_magnifier_black.svg'); background-position: center center; background-repeat: no-repeat; background-size: 25px 30px; } /* nav ui components */ #common_nav .overlay { background: rgba(0,0,0,0.75); z-index: 1; } #common_nav .wrap { height: auto; margin: auto; } #default { height: 100%; position: relative; } #error { background: none; height: 100%; position: relative; text-align: center; } #error .error_message { } #notification { display: block; height: auto; left: 0; opacity: 0.98; padding: 0; position: fixed; text-align: center; top: 0; vertical-align: middle; width: 100%; z-index: 99999; } #notification p { color: #fff; font-family: "Poppins"; font-size: 0.98em; font-weight: 400; letter-spacing: 0.06em; margin-bottom: 0; text-align: center; } #notification .error { background-color: #e74c3c; padding: 0.5em; } #notification .info { background-color: #2ecc71; padding: 0.5em; } #notification.unpublished { background: #0099FF; bottom: 0; height: auto; padding: 0.5em; top: auto; width: 100%; } #notification.warning { background-color: #e67e22; padding: 0.5em; } #search_results { padding-bottom: 5em; } #search_results h2 { font-weight: 700; } #search_results header { padding: 2em 0 2em 0; text-align: center; } #search_results .teaser #advertisement { /* border-bottom: solid 1px #e9e9e9; border-top: solid 1px #e9e9e9; */ margin: 3em auto 0 auto; padding: 2em 0 2em 0; text-align: center } #search_results .teaser { border-bottom: none 1px #e9e9e9; padding: 1em 0 2em 0; } #search_results .teaser h3 { font-size: 1.4em; font-weight: 500; } #search_results .teaser h4 { font-size: 1em; font-weight: 300; } #search_results .teaser .image { padding-right: 2em; } #search_results .teaser .rubric { font-size: 0.75em; } /* ————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— MEDIA QUERIES * * Conditions modify existing classes & selectors to change the appearance of elements based on screen width * * 1. The default 3 conditions typically cover majority of screen sizes, though additional conditions can be included. * 2. Use sparingly (complex modifications typically indicate an element should be simplified) * * ————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— */ @media screen and (min-width: 64.000em){ #common_nav .nav_primariy { display: block; } #common_nav .nav_secondary { display: none; } #common_nav .nav_tertiary { display: none; } #common_nav .wrap { margin: auto; max-width: 1280px; } } @media screen and (min-width: 45.000em) and (max-width: 63.999em) { /*————————————————————————————————————— BREAKPOINT DETAILS Min-Width: 720px Max-Width: 1024px Target Device: Tablet Orientation: Portait —————————————————————————————————————*/ /*——————————————————————————————— CLASSES 720px-1024px ————————————————————————————————*/ [class*='column_'] { column_count: 1; -moz-column-count: 1; -webkit-column-count: 1; column-gap: 0; -moz-column-gap: 0; -webkit-column-gap: 0; } .icon { height: auto; max-width: 40px; } .icon_xsmall { max-width: 30px; } .icon_small { max-width: 40px; } .icon_medium { max-width: 45px; } .icon_large { max-width: 55px; } .icon_xlarge { max-width: 70px; } .wrap { margin: auto; padding: 0; width: 100%; } #common_nav .nav_primary { display: none; } #common_nav .nav_secondary { display: block; } #common_nav .nav_tertiary { display: none; } } @media screen and (min-width: 18.750em) and (max-width: 44.999em) { /*————————————————————————————————————— BREAKPOINT DETAILS Min-Width: 300px Max-Width: 720px Target Device: Smartphone Orientation: Portait & Landscape —————————————————————————————————————*/ footer { text-align: center; text-transform: inherit; } footer .links a { display: block; font-weight: 600; letter-spacing: 0.1em; width: 100%; } footer .copyright { margin-top: 2em; } footer .denim { line-height: auto; margin: 2em 0 1em 0; text-transform: lowercase; } footer .denim a { font-weight: 400; } h1 { font-size: 10vw; } h2 { font-size: 8vw; } h3 { font-size: 5vw; } /*——————————————————————————————— CLASSES 300px-720px ————————————————————————————————*/ .block_image { text-align: center; } .block_image .wrap { margin: auto; overflow-x: hidden; padding: 0 1em 0 1em; width: 100%; } .block_text { padding: 0.5em 0 0.5em 0; width: 100%; } .block_text blockquote { width: 95%; } .block_text ol { width: 85%; } .block_text ul { width: 85%; } [class*='column_'] { column_count: 1; -moz-column-count: 1; -webkit-column-count: 1; column-gap: 0; -moz-column-gap: 0; -webkit-column-gap: 0; } [class*='grid_columns_'] { display: block; flex-basis: 100%; flex-grow: 1; } .wrap { padding: 0; width: 100%; } #common_nav .nav_primary { display: none; } #common_nav .nav_secondary { display: block; } #common_nav .nav_tertiary { display: none; } } /* ————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— EMAIL NOTIFICATIONS * * Specific to email notifications sent out by the server * * 1. Visuals are dependent on the theme established above * 2. Elements should be modified to work at screen resolutions of 320px X 480px or larger * 3. Complexity in this section indicates overall theme should be expanded ————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— */ .mail { background: #ffffff; border: solid 1px rgba(0,0,0,0.05); min-height: 20em; left: 1em; margin: 3em auto 3em auto; padding: 1.5em 2.5em 3em 2.5em; right: 1em; min-width: 320px; max-width: 600px; } .mail a, a:link, a:visited { color: #000; text-decoration: none; } .mail a:hover, b a:hover, h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { opacity: 0.9; text-decoration: none; } .mail footer { font-size: 0.6em; font-weight: 300; opacity: 0.35; padding: 1em 0 5em 0; text-align: center; } .mail footer .links a { font-weight: 500; } .mail footer .copyright { margin-top: 2em; } .mail footer .denim { margin: 2em 0 1em 0; text-transform: lowercase; } .mail h1 { font-size: 2.5em; margin: 0.5em 0 0.5em 0; line-height: 0.9em; text-transform: inherit; } .mail h1 a, h1 a:link, h1 a:visited { text-decoration: none; } .mail h1 a:hover { text-decoration: none; } .mail h2 { font-size: 2em; margin-bottom: 0.5em; text-transform: inherit; } .mail h2 a, h2 a:link, h2 a:visited { text-decoration: none; } .mail h2 a:hover { text-decoration: none; } .mail h3 { font-size: 1.5em; margin-bottom: 0.5em; text-transform: inherit; } .mail h3 a, h3 a:link, h3 a:visited { color: #000; text-decoration: none; } .mail h3 a:hover { text-decoration: none; } .mail h4 { font-size: 1.1em; margin-bottom: 0.5em; text-transform: inherit; } /*——————————————————————————————— MAIL CLASSES ————————————————————————————————*/ .mail .avatar { border-radius: 25em; box-shadow: 0px 0px 50px rgba(0,0,0,0.15); height:220px; margin: auto; overflow: hidden; width: 220px; } .mail .avatar img { filter: grayscale(100%); -moz-filter: grayscale(100%); -webkit-filter: grayscale(100%); object-fit: cover; min-width: 300px; } .mail .button { color: #fff !important; display: inherit; font-family: "Poppins", sans-serif; font-size: 1em; font-weight: 500; letter-spacing: 0.04em; margin: 2em auto 2em auto; padding: 1.3em 2em 1.3em 2em; text-align: center; text-decoration: none; text-indent: 0; transition: 0.25s all ease; vertical-align: middle; width: auto; min-width: 8em; max-width: 12em; } .mail .circle { border-radius: 25em; height: 55px; margin: 0 0.3em 0 0.3em; padding: 0.5em; position: relative; width: 55px; } .mail .circle img { bottom: 0; margin: auto; left: 0; position: absolute; right: 0; top: 0; } .mail .color_gradient { background: rgb(162,57,202); background: linear-gradient(to right, rgba(162,57,202,1) 0%,rgba(71,23,246,1) 100%); background: -moz-linear-gradient(left, rgba(162,57,202,1) 0%, rgba(71,23,246,1) 100%); background: -webkit-linear-gradient(left, rgba(162,57,202,1) 0%,rgba(71,23,246,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a239ca', endColorstr='#4717f6',GradientType=1 ); } .mail .icon_small { height: 25px; margin: 0 0.5em 0 0.5em; width: 27px; max-width: 27px !important; } .mail .wrap { max-width: 95%; }