/* Theme Name: FFT 2020 Theme URI: https://fftue.de/ Author: GNR Author URI: https://wordpress.org/ Description: FAST FEET Tübingen 2020 Theme. Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: fft_2020 Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- HEADLINES --------------------------------------------------------------*/ @import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,200,300,400,500'); @import url('https://fonts.googleapis.com/css?family=Roboto+Mono:100,300'); /**/ /* RESET */ html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, dl, dt, dd, ol, ul, li, fieldset, form, label, legend { vertical-align: baseline; font-family: inherit; font-weight: inherit; font-style: inherit; font-size: 100%; outline: 0; padding: 0; margin: 0; border: 0; } /* remember to define focus styles! */ :focus { outline: 0; } body { background: white; line-height: 1; color: black; } ol, ul { list-style: none; } /* tables still need cellspacing="0" in the markup */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { font-weight: normal; text-align: left; } /* remove possible quote marks (") from &
*/ blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } /* SELECTION/HIGHLIGHT */ *::-moz-selection { background: #09F; color: #fff; } *::selection { background: #09F; color: #fff; } * { margin: 0; padding: 0; } *, *::before, *::after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } @keyframes text-glowing-white { 0% { text-shadow: 0 0 -10px #FFFFFF; } 40% { text-shadow: 0 0 20px #FFFFFF; } 60% { text-shadow: 0 0 20px #FFFFFF; } 100% { text-shadow: 0 0 -10px #FFFFFF; } } /* */ html, body { height: 100%; width: 100%; min-height: 100%; min-width: 100%; /** font-family: 'Roboto Mono', monospace; /**/ /**/ font-family: 'Roboto', sans-serif; /**/ /**/ font-weight: 100; /**/ /**/ font-size: 1.1rem; /**/ /**/ line-height: 1.6rem; /**/ /**/ -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 150%; -ms-text-size-adjust: 150%; /**/ /**/ font-size-adjust: 150%; /**/ } html { } body { background-color: rgba( 204, 204, 204, 0.4);/**/ color: #FFFFFF; } fft { white-space: nowrap; } /* ------------------------------------------------------------------------------------------------ */ /* HEADLINES */ /* ------------------------------------------------------------------------------------------------ */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: 'Roboto', sans-serif; margin-top: 0.5rem; margin-bottom: 0.75rem; font-weight: 300; line-height: 1.2; color: inherit; } h1, .h1 { font-size: 1.8rem; } @media (min-width: 746.25px) { h1, .h1 { font-size: 2.8rem; } } h2, .h2 { font-size: 1.6rem; } @media (min-width: 746.25px) { h2, .h2 { font-size: 2.4rem; } } h3, .h3 { font-size: 1.4rem; } @media (min-width: 746.25px) { h3, .h3 { font-size: 2rem; } } h4, .h4 { font-size: 1.2rem; } h5, .h5 { font-size: 1rem; } h6, .h6 { font-size: 0.8rem; } /* ------------------------------------------------------------------------------------------------ */ /* LINKS */ /* ------------------------------------------------------------------------------------------------ */ a { color: inherit; text-decoration: none; } a:visited { } a:hover { color: rgba( 204, 204, 204, 0.4); } a.tooltip { border-bottom: 1px dotted #FFFFFF; } .anchor { display: block; position: relative; top: -100px; visibility: hidden; color: #FF0000; } /* ------------------------------------------------------------------------------------------------ */ /* */ /* ------------------------------------------------------------------------------------------------ */ .full-width { display: block; width: 100% !important; min-width: 100% !important; } .full-height { display: block; height: 100% !important; min-height: 100% !important; } .center { text-align: center; } .blured { filter: blur(12px); } .float-left { float: left; } .float-right { float: right; } .right { text-align: right; } .left { text-align: left; } .flex-wrapper { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; justify-content: flex-start; justify-content: space-between; } .cover { position: absolute; top: 0; /**/ bottom: 0; /**/ min-width: 100%; height: 100% !important; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: center; /* align horizontal */ } .content { width:100%; padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; clear: both; } .content::after { clear: both; } .content p { margin-top: 1rem; margin-bottom: 1rem; } .footer .cover { min-height: 800px !important; height: auto; } /* */ /* ROW / COL */ /* */ .row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: flex-start; justify-content: space-between; width: 100%; } .no-gutters { margin-right: 0; margin-left: 0; } .no-gutters > .col, .no-gutters > [class*="col-"] { padding-right: 0; padding-left: 0; } .col { display: flex; flex: 1; justify-content: stretch; -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; /* max-width: 100%;/**/ } .col-1, .col-2, .col-3, .col-4, col-5, col-6, col-7, col-8, .col-1-1, .col-2-1, .col-3-1, .col-4-1, .col-5-1, .col-6-1, .col-7-1, .col-8-1, .col-1-2, .col-2-2, .col-3-2, .col-4-2, .col-5-2, .col-6-2, .col-7-2, .col-8-2, .col-1-3, .col-2-3, .col-3-3, .col-4-3, .col-5-3, .col-6-3, .col-7-3, .col-8-3, .col-1-4, .col-2-4, .col-3-4, .col-4-4, .col-5-4, .col-6-4, .col-7-4, .col-8-4, .col-1-5, .col-2-5, .col-3-5, .col-4-5, .col-5-5, .col-6-5, .col-7-5, .col-8-5, .col-1-6, .col-2-6, .col-3-6, .col-4-6, .col-5-6, .col-6-6, .col-7-6, .col-8-6, .col-1-7, .col-2-7, .col-3-7, .col-4-7, .col-5-7, .col-6-7, .col-7-7, .col-8-7, .col-1-8, .col-2-8, .col-3-8, .col-4-8, .col-5-8, .col-6-8, .col-7-8, .col-8-8, { display: flex; flex: 1; justify-content: stretch; } /* NO BREAKPOINT */ .col-1 { -ms-flex: 12.5%; flex: 12.5%; max-width: 12.5%; } .col-2 { -ms-flex: 25%; flex: 25%; max-width: 25%; } .col-3 { -ms-flex: 37.5%; flex: 37.5%; max-width: 37.5%; } .col-4 { -ms-flex: 50%; flex: 50%; max-width: 50%; } .col-5 { -ms-flex: 62.5%; flex: 62.5%; max-width: 62.5%; } .col-6 { -ms-flex: 75%; flex: 75%; max-width: 75%; } .col-7 { -ms-flex: 87.5%; flex: 87.5%; max-width: 87.5%; } .col-8 { -ms-flex: 100%; flex: 100%; max-width: 100%; } .col-1of10 { -ms-flex: 10%; flex: 10%; max-width: 10%; } .col-2of10 { -ms-flex: 20%; flex: 20%; max-width: 20%; } .col-3of10 { -ms-flex: 30%; flex: 30%; max-width: 30%; } .col-4of10 { -ms-flex: 40%; flex: 40%; max-width: 40%; } .col-5of10 { -ms-flex: 50%; flex: 50%; max-width: 50%; } .col-6of10 { -ms-flex: 60%; flex: 60%; max-width: 60%; } .col-7of10 { -ms-flex: 70%; flex: 70%; max-width: 70%; } .col-8of10 { -ms-flex: 80%; flex: 80%; max-width: 80%; } .col-9of10 { -ms-flex: 90%; flex: 90%; max-width: 90%; } .col-10of10 { -ms-flex: 100%; flex: 100%; max-width: 100%; } .col-1of7 { -ms-flex: 14.28571%; flex: 14.28571%; max-width: 14.28571%; } .col-2of7 { -ms-flex: 28.57142%; flex: 28.57142%; max-width: 28.57142%; } .col-3of7 { -ms-flex: 42.85714%; flex: 42.85714%; max-width: 42.85714%; } .col-4of7 { -ms-flex: 57.14285%; flex: 57.14285%; max-width: 57.14285%; } .col-5of7 { -ms-flex: 71.42857%; flex: 71.42857%; max-width: 71.42857%; } .col-6of7 { -ms-flex: 85.71428%; flex: 85.71428%; max-width: 85.71428%; } .col-7of7 { -ms-flex: 100%; flex: 100%; max-width: 100%; } .col-1of6 { -ms-flex: 16.66667%; flex: 16.66667%; max-width: 16.66667%; } .col-2of6 { -ms-flex: 33.33333%; flex: 33.33333%; max-width: 33.33333%; } .col-3of6 { -ms-flex: 50%; flex: 50%; max-width: 50%; } .col-4of6 { -ms-flex: 66.66666%; flex: 66.66666%; max-width: 66.66666%; } .col-5of6 { -ms-flex: 83.33333%; flex: 83.33333%; max-width: 83.33333%; } .col-6of6 { -ms-flex: 100%; flex: 100%; max-width: 100%; } .col-1of5 { -ms-flex: 20%; flex: 20%; max-width: 20%; } .col-2of5 { -ms-flex: 40%; flex: 40%; max-width: 40%; } .col-3of5 { -ms-flex: 60%; flex: 60%; max-width: 60%; } .col-4of5 { -ms-flex: 80%; flex: 80%; max-width: 80%; } .col-5of5 { -ms-flex: 100%; flex: 100%; max-width: 100%; } .col-1of4 { -ms-flex: 25%; flex: 25%; max-width: 25%; } .col-2of4 { -ms-flex: 50%; flex: 50%; max-width: 50%; } .col-3of4 { -ms-flex: 75%; flex: 75%; max-width: 75%; } .col-4of4 { -ms-flex: 100%; flex: 100%; max-width: 100%; } .col-1of3 { -ms-flex: 33.33333%; flex: 33.33333%; max-width: 33.33333%; } .col-2of3 { -ms-flex: 66.66666%; flex: 66.66666%; max-width: 66.66666%; } .col-3of3 { -ms-flex: 100%; flex: 100%; max-width: 100%; } .col-1of2 { -ms-flex: 50%; flex: 50%; max-width: 50%; } .col-2of2 { -ms-flex: 100%; flex: 100%; max-width: 100%; } /* BREAKPOINT 1 */ @media (max-width: 292.50px) { .col-1-bp-1 { -ms-flex: 12.5%; flex: 12.5%; max-width: 12.5%; } .col-2-bp-1 { -ms-flex: 25% ; flex: 25% ; max-width: 25% ; } .col-3-bp-1 { -ms-flex: 37.5%; flex: 37.5%; max-width: 37.5%; } .col-4-bp-1 { -ms-flex: 50% ; flex: 50% ; max-width: 50% ; } .col-5-bp-1 { -ms-flex: 62.5%; flex: 62.5%; max-width: 62.5%; } .col-6-bp-1 { -ms-flex: 75% ; flex: 75% ; max-width: 75% ; } .col-7-bp-1 { -ms-flex: 87.5%; flex: 87.5%; max-width: 87.5%; } .col-8-bp-1 { -ms-flex: 100% ; flex: 100% ; max-width: 100% ; } .col-1of7-bp-1 { -ms-flex: 14.28571%; flex: 14.28571%; max-width: 14.28571%; } .col-2of7-bp-1 { -ms-flex: 28.57142%; flex: 28.57142%; max-width: 28.57142%; } .col-3of7-bp-1 { -ms-flex: 42.85714%; flex: 42.85714%; max-width: 42.85714%; } .col-4of7-bp-1 { -ms-flex: 57.14285%; flex: 57.14285%; max-width: 57.14285%; } .col-5of7-bp-1 { -ms-flex: 71.42857%; flex: 71.42857%; max-width: 71.42857%; } .col-6of7-bp-1 { -ms-flex: 85.71428%; flex: 85.71428%; max-width: 85.71428%; } .col-7of7-bp-1 { -ms-flex: 100% ; flex: 100% ; max-width: 100% ; } .col-1of6-bp-1 { -ms-flex: 16.66667%; flex: 16.66667%; max-width: 16.66667%; } .col-2of6-bp-1 { -ms-flex: 33.33333%; flex: 33.33333%; max-width: 33.33333%; } .col-3of6-bp-1 { -ms-flex: 50% ; flex: 50% ; max-width: 50% ; } .col-4of6-bp-1 { -ms-flex: 66.66666%; flex: 66.66666%; max-width: 66.66666%; } .col-5of6-bp-1 { -ms-flex: 83.33333%; flex: 83.33333%; max-width: 83.33333%; } .col-6of6-bp-1 { -ms-flex: 100% ; flex: 100% ; max-width: 100% ; } .col-1of5-bp-1 { -ms-flex: 20%; flex: 20%; max-width: 20%; } .col-2of5-bp-1 { -ms-flex: 40%; flex: 40%; max-width: 40%; } .col-3of5-bp-1 { -ms-flex: 60%; flex: 60%; max-width: 60%; } .col-4of5-bp-1 { -ms-flex: 80%; flex: 80%; max-width: 80%; } .col-5of5-bp-1 { -ms-flex: 100%; flex: 100%; max-width: 100%; } .col-1of4-bp-1 { -ms-flex: 25%; flex: 25%; max-width: 25%; } .col-2of4-bp-1 { -ms-flex: 50%; flex: 50%; max-width: 50%; } .col-3of4-bp-1 { -ms-flex: 75%; flex: 75%; max-width: 75%; } .col-4of4-bp-1 { -ms-flex: 100%; flex: 100%; max-width: 100%; } .col-1of3-bp-1 { -ms-flex: 33.33333%; flex: 33.33333%; max-width: 33.33333%; } .col-2of3-bp-1 { -ms-flex: 66.66666%; flex: 66.66666%; max-width: 66.66666%; } .col-3of3-bp-1 { -ms-flex: 100% ; flex: 100% ; max-width: 100% ; } .col-1of2-bp-1 { -ms-flex: 50%; flex: 50%; max-width: 50%; } .col-2of2-bp-1 { -ms-flex: 100%; flex: 100%; max-width: 100%; } } /* BREAKPOINT 2 */ @media (min-width: 292.50px) { .col-1-bp-2 { -ms-flex: 12.5%; flex: 12.5%; max-width: 12.5%; } .col-2-bp-2 { -ms-flex: 25% ; flex: 25% ; max-width: 25% ; } .col-3-bp-2 { -ms-flex: 37.5%; flex: 37.5%; max-width: 37.5%; } .col-4-bp-2 { -ms-flex: 50% ; flex: 50% ; max-width: 50% ; } .col-5-bp-2 { -ms-flex: 62.5%; flex: 62.5%; max-width: 62.5%; } .col-6-bp-2 { -ms-flex: 75% ; flex: 75% ; max-width: 75% ; } .col-7-bp-2 { -ms-flex: 87.5%; flex: 87.5%; max-width: 87.5%; } .col-8-bp-2 { -ms-flex: 100% ; flex: 100% ; max-width: 100% ; } .col-1of7-bp-2 { -ms-flex: 14.28571%; flex: 14.28571%; max-width: 14.28571%; } .col-2of7-bp-2 { -ms-flex: 28.57142%; flex: 28.57142%; max-width: 28.57142%; } .col-3of7-bp-2 { -ms-flex: 42.85714%; flex: 42.85714%; max-width: 42.85714%; } .col-4of7-bp-2 { -ms-flex: 57.14285%; flex: 57.14285%; max-width: 57.14285%; } .col-5of7-bp-2 { -ms-flex: 71.42857%; flex: 71.42857%; max-width: 71.42857%; } .col-6of7-bp-2 { -ms-flex: 85.71428%; flex: 85.71428%; max-width: 85.71428%; } .col-7of7-bp-2 { -ms-flex: 100% ; flex: 100% ; max-width: 100% ; } .col-1of6-bp-2 { -ms-flex: 16.66667%; flex: 16.66667%; max-width: 16.66667%; } .col-2of6-bp-2 { -ms-flex: 33.33333%; flex: 33.33333%; max-width: 33.33333%; } .col-3of6-bp-2 { -ms-flex: 50% ; flex: 50% ; max-width: 50% ; } .col-4of6-bp-2 { -ms-flex: 66.66666%; flex: 66.66666%; max-width: 66.66666%; } .col-5of6-bp-2 { -ms-flex: 83.33333%; flex: 83.33333%; max-width: 83.33333%; } .col-6of6-bp-2 { -ms-flex: 100% ; flex: 100% ; max-width: 100% ; } .col-1of5-bp-2 { -ms-flex: 20%; flex: 20%; max-width: 20%; } .col-2of5-bp-2 { -ms-flex: 40%; flex: 40%; max-width: 40%; } .col-3of5-bp-2 { -ms-flex: 60%; flex: 60%; max-width: 60%; } .col-4of5-bp-2 { -ms-flex: 80%; flex: 80%; max-width: 80%; } .col-5of5-bp-2 { -ms-flex: 100%; flex: 100%; max-width: 100%; } .col-1of4-bp-2 { -ms-flex: 25%; flex: 25%; max-width: 25%; } .col-2of4-bp-2 { -ms-flex: 50%; flex: 50%; max-width: 50%; } .col-3of4-bp-2 { -ms-flex: 75%; flex: 75%; max-width: 75%; } .col-4of4-bp-2 { -ms-flex: 100%; flex: 100%; max-width: 100%; } .col-1of3-bp-2 { -ms-flex: 33.33333%; flex: 33.33333%; max-width: 33.33333%; } .col-2of3-bp-2 { -ms-flex: 66.66666%; flex: 66.66666%; max-width: 66.66666%; } .col-3of3-bp-2 { -ms-flex: 100% ; flex: 100% ; max-width: 100% ; } .col-1of2-bp-2 { -ms-flex: 50%; flex: 50%; max-width: 50%; } .col-2of2-bp-2 { -ms-flex: 100%; flex: 100%; max-width: 100%; } } /* BREAKPOINT 3 */ @media (min-width: 443.75px) { .col-1-bp-3 { -ms-flex: 12.5%; flex: 12.5%; max-width: 12.5%; } .col-2-bp-3 { -ms-flex: 25% ; flex: 25% ; max-width: 25% ; } .col-3-bp-3 { -ms-flex: 37.5%; flex: 37.5%; max-width: 37.5%; } .col-4-bp-3 { -ms-flex: 50% ; flex: 50% ; max-width: 50% ; } .col-5-bp-3 { -ms-flex: 62.5%; flex: 62.5%; max-width: 62.5%; } .col-6-bp-3 { -ms-flex: 75% ; flex: 75% ; max-width: 75% ; } .col-7-bp-3 { -ms-flex: 87.5%; flex: 87.5%; max-width: 87.5%; } .col-8-bp-3 { -ms-flex: 100% ; flex: 100% ; max-width: 100% ; } .col-1of7-bp-3 { -ms-flex: 14.28571%; flex: 14.28571%; max-width: 14.28571%; } .col-2of7-bp-3 { -ms-flex: 28.57142%; flex: 28.57142%; max-width: 28.57142%; } .col-3of7-bp-3 { -ms-flex: 42.85714%; flex: 42.85714%; max-width: 42.85714%; } .col-4of7-bp-3 { -ms-flex: 57.14285%; flex: 57.14285%; max-width: 57.14285%; } .col-5of7-bp-3 { -ms-flex: 71.42857%; flex: 71.42857%; max-width: 71.42857%; } .col-6of7-bp-3 { -ms-flex: 85.71428%; flex: 85.71428%; max-width: 85.71428%; } .col-7of7-bp-3 { -ms-flex: 100% ; flex: 100% ; max-width: 100% ; } .col-1of6-bp-3 { -ms-flex: 16.66667%; flex: 16.66667%; max-width: 16.66667%; } .col-2of6-bp-3 { -ms-flex: 33.33333%; flex: 33.33333%; max-width: 33.33333%; } .col-3of6-bp-3 { -ms-flex: 50% ; flex: 50% ; max-width: 50% ; } .col-4of6-bp-3 { -ms-flex: 66.66666%; flex: 66.66666%; max-width: 66.66666%; } .col-5of6-bp-3 { -ms-flex: 83.33333%; flex: 83.33333%; max-width: 83.33333%; } .col-6of6-bp-3 { -ms-flex: 100% ; flex: 100% ; max-width: 100% ; } .col-1of5-bp-3 { -ms-flex: 20%; flex: 20%; max-width: 20%; } .col-2of5-bp-3 { -ms-flex: 40%; flex: 40%; max-width: 40%; } .col-3of5-bp-3 { -ms-flex: 60%; flex: 60%; max-width: 60%; } .col-4of5-bp-3 { -ms-flex: 80%; flex: 80%; max-width: 80%; } .col-5of5-bp-3 { -ms-flex: 100%; flex: 100%; max-width: 100%; } .col-1of4-bp-3 { -ms-flex: 25%; flex: 25%; max-width: 25%; } .col-2of4-bp-3 { -ms-flex: 50%; flex: 50%; max-width: 50%; } .col-3of4-bp-3 { -ms-flex: 75%; flex: 75%; max-width: 75%; } .col-4of4-bp-3 { -ms-flex: 100%; flex: 100%; max-width: 100%; } .col-1of3-bp-3 { -ms-flex: 33.33333%; flex: 33.33333%; max-width: 33.33333%; } .col-2of3-bp-3 { -ms-flex: 66.66666%; flex: 66.66666%; max-width: 66.66666%; } .col-3of3-bp-3 { -ms-flex: 100% ; flex: 100% ; max-width: 100% ; } .col-1of2-bp-3 { -ms-flex: 50%; flex: 50%; max-width: 50%; } .col-2of2-bp-3 { -ms-flex: 100%; flex: 100%; max-width: 100%; } } /* BREAKPOINT 4 */ @media (min-width: 595.00px) { .col-1-bp-4 { -ms-flex: 12.5%; flex: 12.5%; max-width: 12.5%; } .col-2-bp-4 { -ms-flex: 25% ; flex: 25% ; max-width: 25% ; } .col-3-bp-4 { -ms-flex: 37.5%; flex: 37.5%; max-width: 37.5%; } .col-4-bp-4 { -ms-flex: 50% ; flex: 50% ; max-width: 50% ; } .col-5-bp-4 { -ms-flex: 62.5%; flex: 62.5%; max-width: 62.5%; } .col-6-bp-4 { -ms-flex: 75% ; flex: 75% ; max-width: 75% ; } .col-7-bp-4 { -ms-flex: 87.5%; flex: 87.5%; max-width: 87.5%; } .col-8-bp-4 { -ms-flex: 100% ; flex: 100% ; max-width: 100% ; } .col-1of7-bp-4 { -ms-flex: 14.28571%; flex: 14.28571%; max-width: 14.28571%; } .col-2of7-bp-4 { -ms-flex: 28.57142%; flex: 28.57142%; max-width: 28.57142%; } .col-3of7-bp-4 { -ms-flex: 42.85714%; flex: 42.85714%; max-width: 42.85714%; } .col-4of7-bp-4 { -ms-flex: 57.14285%; flex: 57.14285%; max-width: 57.14285%; } .col-5of7-bp-4 { -ms-flex: 71.42857%; flex: 71.42857%; max-width: 71.42857%; } .col-6of7-bp-4 { -ms-flex: 85.71428%; flex: 85.71428%; max-width: 85.71428%; } .col-7of7-bp-4 { -ms-flex: 100% ; flex: 100% ; max-width: 100% ; } .col-1of6-bp-4 { -ms-flex: 16.66667%; flex: 16.66667%; max-width: 16.66667%; } .col-2of6-bp-4 { -ms-flex: 33.33333%; flex: 33.33333%; max-width: 33.33333%; } .col-3of6-bp-4 { -ms-flex: 50% ; flex: 50% ; max-width: 50% ; } .col-4of6-bp-4 { -ms-flex: 66.66666%; flex: 66.66666%; max-width: 66.66666%; } .col-5of6-bp-4 { -ms-flex: 83.33333%; flex: 83.33333%; max-width: 83.33333%; } .col-6of6-bp-4 { -ms-flex: 100% ; flex: 100% ; max-width: 100% ; } .col-1of5-bp-4 { -ms-flex: 20%; flex: 20%; max-width: 20%; } .col-2of5-bp-4 { -ms-flex: 40%; flex: 40%; max-width: 40%; } .col-3of5-bp-4 { -ms-flex: 60%; flex: 60%; max-width: 60%; } .col-4of5-bp-4 { -ms-flex: 80%; flex: 80%; max-width: 80%; } .col-5of5-bp-4 { -ms-flex: 100%; flex: 100%; max-width: 100%; } .col-1of4-bp-4 { -ms-flex: 25%; flex: 25%; max-width: 25%; } .col-2of4-bp-4 { -ms-flex: 50%; flex: 50%; max-width: 50%; } .col-3of4-bp-4 { -ms-flex: 75%; flex: 75%; max-width: 75%; } .col-4of4-bp-4 { -ms-flex: 100%; flex: 100%; max-width: 100%; } .col-1of3-bp-4 { -ms-flex: 33.33333%; flex: 33.33333%; max-width: 33.33333%; } .col-2of3-bp-4 { -ms-flex: 66.66666%; flex: 66.66666%; max-width: 66.66666%; } .col-3of3-bp-4 { -ms-flex: 100% ; flex: 100% ; max-width: 100% ; } .col-1of2-bp-4 { -ms-flex: 50%; flex: 50%; max-width: 50%; } .col-2of2-bp-4 { -ms-flex: 100%; flex: 100%; max-width: 100%; } } /* BREAKPOINT 5 */ @media (min-width: 746.25px) { .col-1-bp-5 { -ms-flex: 12.5%; flex: 12.5%; max-width: 12.5%; } .col-2-bp-5 { -ms-flex: 25% ; flex: 25% ; max-width: 25% ; } .col-3-bp-5 { -ms-flex: 37.5%; flex: 37.5%; max-width: 37.5%; } .col-4-bp-5 { -ms-flex: 50% ; flex: 50% ; max-width: 50% ; } .col-5-bp-5 { -ms-flex: 62.5%; flex: 62.5%; max-width: 62.5%; } .col-6-bp-5 { -ms-flex: 75% ; flex: 75% ; max-width: 75% ; } .col-7-bp-5 { -ms-flex: 87.5%; flex: 87.5%; max-width: 87.5%; } .col-8-bp-5 { -ms-flex: 100% ; flex: 100% ; max-width: 100% ; } .col-1of7-bp-5 { -ms-flex: 14.28571%; flex: 14.28571%; max-width: 14.28571%; } .col-2of7-bp-5 { -ms-flex: 28.57142%; flex: 28.57142%; max-width: 28.57142%; } .col-3of7-bp-5 { -ms-flex: 42.85714%; flex: 42.85714%; max-width: 42.85714%; } .col-4of7-bp-5 { -ms-flex: 57.14285%; flex: 57.14285%; max-width: 57.14285%; } .col-5of7-bp-5 { -ms-flex: 71.42857%; flex: 71.42857%; max-width: 71.42857%; } .col-6of7-bp-5 { -ms-flex: 85.71428%; flex: 85.71428%; max-width: 85.71428%; } .col-7of7-bp-5 { -ms-flex: 100% ; flex: 100% ; max-width: 100% ; } .col-1of6-bp-5 { -ms-flex: 16.66667%; flex: 16.66667%; max-width: 16.66667%; } .col-2of6-bp-5 { -ms-flex: 33.33333%; flex: 33.33333%; max-width: 33.33333%; } .col-3of6-bp-5 { -ms-flex: 50% ; flex: 50% ; max-width: 50% ; } .col-4of6-bp-5 { -ms-flex: 66.66666%; flex: 66.66666%; max-width: 66.66666%; } .col-5of6-bp-5 { -ms-flex: 83.33333%; flex: 83.33333%; max-width: 83.33333%; } .col-6of6-bp-5 { -ms-flex: 100% ; flex: 100% ; max-width: 100% ; } .col-1of5-bp-5 { -ms-flex: 20%; flex: 20%; max-width: 20%; } .col-2of5-bp-5 { -ms-flex: 40%; flex: 40%; max-width: 40%; } .col-3of5-bp-5 { -ms-flex: 60%; flex: 60%; max-width: 60%; } .col-4of5-bp-5 { -ms-flex: 80%; flex: 80%; max-width: 80%; } .col-5of5-bp-5 { -ms-flex: 100%; flex: 100%; max-width: 100%; } .col-1of4-bp-5 { -ms-flex: 25%; flex: 25%; max-width: 25%; } .col-2of4-bp-5 { -ms-flex: 50%; flex: 50%; max-width: 50%; } .col-3of4-bp-5 { -ms-flex: 75%; flex: 75%; max-width: 75%; } .col-4of4-bp-5 { -ms-flex: 100%; flex: 100%; max-width: 100%; } .col-1of3-bp-5 { -ms-flex: 33.33333%; flex: 33.33333%; max-width: 33.33333%; } .col-2of3-bp-5 { -ms-flex: 66.66666%; flex: 66.66666%; max-width: 66.66666%; } .col-3of3-bp-5 { -ms-flex: 100% ; flex: 100% ; max-width: 100% ; } .col-1of2-bp-5 { -ms-flex: 50%; flex: 50%; max-width: 50%; } .col-2of2-bp-5 { -ms-flex: 100%; flex: 100%; max-width: 100%; } } /* BREAKPOINT 6 */ @media (min-width: 897.50px) { .col-1-bp-6 { -ms-flex: 12.5%; flex: 12.5%; max-width: 12.5%; } .col-2-bp-6 { -ms-flex: 25% ; flex: 25% ; max-width: 25% ; } .col-3-bp-6 { -ms-flex: 37.5%; flex: 37.5%; max-width: 37.5%; } .col-4-bp-6 { -ms-flex: 50% ; flex: 50% ; max-width: 50% ; } .col-5-bp-6 { -ms-flex: 62.5%; flex: 62.5%; max-width: 62.5%; } .col-6-bp-6 { -ms-flex: 75% ; flex: 75% ; max-width: 75% ; } .col-7-bp-6 { -ms-flex: 87.5%; flex: 87.5%; max-width: 87.5%; } .col-8-bp-6 { -ms-flex: 100% ; flex: 100% ; max-width: 100% ; } .col-1of7-bp-6 { -ms-flex: 14.28571%; flex: 14.28571%; max-width: 14.28571%; } .col-2of7-bp-6 { -ms-flex: 28.57142%; flex: 28.57142%; max-width: 28.57142%; } .col-3of7-bp-6 { -ms-flex: 42.85714%; flex: 42.85714%; max-width: 42.85714%; } .col-4of7-bp-6 { -ms-flex: 57.14285%; flex: 57.14285%; max-width: 57.14285%; } .col-5of7-bp-6 { -ms-flex: 71.42857%; flex: 71.42857%; max-width: 71.42857%; } .col-6of7-bp-6 { -ms-flex: 85.71428%; flex: 85.71428%; max-width: 85.71428%; } .col-7of7-bp-6 { -ms-flex: 100% ; flex: 100% ; max-width: 100% ; } .col-1of6-bp-6 { -ms-flex: 16.66667%; flex: 16.66667%; max-width: 16.66667%; } .col-2of6-bp-6 { -ms-flex: 33.33333%; flex: 33.33333%; max-width: 33.33333%; } .col-3of6-bp-6 { -ms-flex: 50% ; flex: 50% ; max-width: 50% ; } .col-4of6-bp-6 { -ms-flex: 66.66666%; flex: 66.66666%; max-width: 66.66666%; } .col-5of6-bp-6 { -ms-flex: 83.33333%; flex: 83.33333%; max-width: 83.33333%; } .col-6of6-bp-6 { -ms-flex: 100% ; flex: 100% ; max-width: 100% ; } .col-1of5-bp-6 { -ms-flex: 20%; flex: 20%; max-width: 20%; } .col-2of5-bp-6 { -ms-flex: 40%; flex: 40%; max-width: 40%; } .col-3of5-bp-6 { -ms-flex: 60%; flex: 60%; max-width: 60%; } .col-4of5-bp-6 { -ms-flex: 80%; flex: 80%; max-width: 80%; } .col-5of5-bp-6 { -ms-flex: 100%; flex: 100%; max-width: 100%; } .col-1of4-bp-6 { -ms-flex: 25%; flex: 25%; max-width: 25%; } .col-2of4-bp-6 { -ms-flex: 50%; flex: 50%; max-width: 50%; } .col-3of4-bp-6 { -ms-flex: 75%; flex: 75%; max-width: 75%; } .col-4of4-bp-6 { -ms-flex: 100%; flex: 100%; max-width: 100%; } .col-1of3-bp-6 { -ms-flex: 33.33333%; flex: 33.33333%; max-width: 33.33333%; } .col-2of3-bp-6 { -ms-flex: 66.66666%; flex: 66.66666%; max-width: 66.66666%; } .col-3of3-bp-6 { -ms-flex: 100% ; flex: 100% ; max-width: 100% ; } .col-1of2-bp-6 { -ms-flex: 50%; flex: 50%; max-width: 50%; } .col-2of2-bp-6 { -ms-flex: 100%; flex: 100%; max-width: 100%; } } /* BREAKPOINT 7 */ @media (min-width: 1048.75px) { .col-1-bp-7 { -ms-flex: 12.5%; flex: 12.5%; max-width: 12.5%; } .col-2-bp-7 { -ms-flex: 25% ; flex: 25% ; max-width: 25% ; } .col-3-bp-7 { -ms-flex: 37.5%; flex: 37.5%; max-width: 37.5%; } .col-4-bp-7 { -ms-flex: 50% ; flex: 50% ; max-width: 50% ; } .col-5-bp-7 { -ms-flex: 62.5%; flex: 62.5%; max-width: 62.5%; } .col-6-bp-7 { -ms-flex: 75% ; flex: 75% ; max-width: 75% ; } .col-7-bp-7 { -ms-flex: 87.5%; flex: 87.5%; max-width: 87.5%; } .col-8-bp-7 { -ms-flex: 100% ; flex: 100% ; max-width: 100% ; } .col-1of7-bp-7 { -ms-flex: 14.28571%; flex: 14.28571%; max-width: 14.28571%; } .col-2of7-bp-7 { -ms-flex: 28.57142%; flex: 28.57142%; max-width: 28.57142%; } .col-3of7-bp-7 { -ms-flex: 42.85714%; flex: 42.85714%; max-width: 42.85714%; } .col-4of7-bp-7 { -ms-flex: 57.14285%; flex: 57.14285%; max-width: 57.14285%; } .col-5of7-bp-7 { -ms-flex: 71.42857%; flex: 71.42857%; max-width: 71.42857%; } .col-6of7-bp-7 { -ms-flex: 85.71428%; flex: 85.71428%; max-width: 85.71428%; } .col-7of7-bp-7 { -ms-flex: 100% ; flex: 100% ; max-width: 100% ; } .col-1of6-bp-7 { -ms-flex: 16.66667%; flex: 16.66667%; max-width: 16.66667%; } .col-2of6-bp-7 { -ms-flex: 33.33333%; flex: 33.33333%; max-width: 33.33333%; } .col-3of6-bp-7 { -ms-flex: 50% ; flex: 50% ; max-width: 50% ; } .col-4of6-bp-7 { -ms-flex: 66.66666%; flex: 66.66666%; max-width: 66.66666%; } .col-5of6-bp-7 { -ms-flex: 83.33333%; flex: 83.33333%; max-width: 83.33333%; } .col-6of6-bp-7 { -ms-flex: 100% ; flex: 100% ; max-width: 100% ; } .col-1of5-bp-7 { -ms-flex: 20%; flex: 20%; max-width: 20%; } .col-2of5-bp-7 { -ms-flex: 40%; flex: 40%; max-width: 40%; } .col-3of5-bp-7 { -ms-flex: 60%; flex: 60%; max-width: 60%; } .col-4of5-bp-7 { -ms-flex: 80%; flex: 80%; max-width: 80%; } .col-5of5-bp-7 { -ms-flex: 100%; flex: 100%; max-width: 100%; } .col-1of4-bp-7 { -ms-flex: 25%; flex: 25%; max-width: 25%; } .col-2of4-bp-7 { -ms-flex: 50%; flex: 50%; max-width: 50%; } .col-3of4-bp-7 { -ms-flex: 75%; flex: 75%; max-width: 75%; } .col-4of4-bp-7 { -ms-flex: 100%; flex: 100%; max-width: 100%; } .col-1of3-bp-7 { -ms-flex: 33.33333%; flex: 33.33333%; max-width: 33.33333%; } .col-2of3-bp-7 { -ms-flex: 66.66666%; flex: 66.66666%; max-width: 66.66666%; } .col-3of3-bp-7 { -ms-flex: 100% ; flex: 100% ; max-width: 100% ; } .col-1of2-bp-7 { -ms-flex: 50%; flex: 50%; max-width: 50%; } .col-2of2-bp-7 { -ms-flex: 100%; flex: 100%; max-width: 100%; } } /* BREAKPOINT 8 */ @media (min-width: 1200.00px) { .col-1-bp-8 { -ms-flex: 12.5%; flex: 12.5%; max-width: 12.5%; } .col-2-bp-8 { -ms-flex: 25% ; flex: 25% ; max-width: 25% ; } .col-3-bp-8 { -ms-flex: 37.5%; flex: 37.5%; max-width: 37.5%; } .col-4-bp-8 { -ms-flex: 50% ; flex: 50% ; max-width: 50% ; } .col-5-bp-8 { -ms-flex: 62.5%; flex: 62.5%; max-width: 62.5%; } .col-6-bp-8 { -ms-flex: 75% ; flex: 75% ; max-width: 75% ; } .col-7-bp-8 { -ms-flex: 87.5%; flex: 87.5%; max-width: 87.5%; } .col-8-bp-8 { -ms-flex: 100% ; flex: 100% ; max-width: 100% ; } .col-1of7-bp-8 { -ms-flex: 14.28571%; flex: 14.28571%; max-width: 14.28571%; } .col-2of7-bp-8 { -ms-flex: 28.57142%; flex: 28.57142%; max-width: 28.57142%; } .col-3of7-bp-8 { -ms-flex: 42.85714%; flex: 42.85714%; max-width: 42.85714%; } .col-4of7-bp-8 { -ms-flex: 57.14285%; flex: 57.14285%; max-width: 57.14285%; } .col-5of7-bp-8 { -ms-flex: 71.42857%; flex: 71.42857%; max-width: 71.42857%; } .col-6of7-bp-8 { -ms-flex: 85.71428%; flex: 85.71428%; max-width: 85.71428%; } .col-7of7-bp-8 { -ms-flex: 100% ; flex: 100% ; max-width: 100% ; } .col-1of6-bp-8 { -ms-flex: 16.66667%; flex: 16.66667%; max-width: 16.66667%; } .col-2of6-bp-8 { -ms-flex: 33.33333%; flex: 33.33333%; max-width: 33.33333%; } .col-3of6-bp-8 { -ms-flex: 50% ; flex: 50% ; max-width: 50% ; } .col-4of6-bp-8 { -ms-flex: 66.66666%; flex: 66.66666%; max-width: 66.66666%; } .col-5of6-bp-8 { -ms-flex: 83.33333%; flex: 83.33333%; max-width: 83.33333%; } .col-6of6-bp-8 { -ms-flex: 100% ; flex: 100% ; max-width: 100% ; } .col-1of5-bp-8 { -ms-flex: 20%; flex: 20%; max-width: 20%; } .col-2of5-bp-8 { -ms-flex: 40%; flex: 40%; max-width: 40%; } .col-3of5-bp-8 { -ms-flex: 60%; flex: 60%; max-width: 60%; } .col-4of5-bp-8 { -ms-flex: 80%; flex: 80%; max-width: 80%; } .col-5of5-bp-8 { -ms-flex: 100%; flex: 100%; max-width: 100%; } .col-1of4-bp-8 { -ms-flex: 25%; flex: 25%; max-width: 25%; } .col-2of4-bp-8 { -ms-flex: 50%; flex: 50%; max-width: 50%; } .col-3of4-bp-8 { -ms-flex: 75%; flex: 75%; max-width: 75%; } .col-4of4-bp-8 { -ms-flex: 100%; flex: 100%; max-width: 100%; } .col-1of3-bp-8 { -ms-flex: 33.33333%; flex: 33.33333%; max-width: 33.33333%; } .col-2of3-bp-8 { -ms-flex: 66.66666%; flex: 66.66666%; max-width: 66.66666%; } .col-3of3-bp-8 { -ms-flex: 100% ; flex: 100% ; max-width: 100% ; } .col-1of2-bp-8 { -ms-flex: 50%; flex: 50%; max-width: 50%; } .col-2of2-bp-8 { -ms-flex: 100%; flex: 100%; max-width: 100%; } } /* */ .col-center { justify-content: center; align-items: center; } .col-right { justify-content: right; align-items: right; } .col-left { justify-content: left; align-items: left; } /* BREAKPOINT 1 */ @media (max-width: 292.50px) { .col-center-bp-1 { justify-content: center; align-items: center; } .col-right-bp-1 { justify-content: right; align-items: right; } .col-left-bp-1 { justify-content: left; align-items: left; } } /* BREAKPOINT 2 */ @media (min-width: 292.50px) { .col-center-bp-2 { justify-content: center; align-items: center; } .col-right-bp-2 { justify-content: right; align-items: right; } .col-left-bp-2 { justify-content: left; align-items: left; } } /* BREAKPOINT 3 */ @media (min-width: 443.75px) { .col-center-bp-3 { justify-content: center; align-items: center; } .col-right-bp-3 { justify-content: right; align-items: right; } .col-left-bp-3 { justify-content: left; align-items: left; } } /* BREAKPOINT 4 */ @media (min-width: 595.00px) { .col-center-bp-4 { justify-content: center; align-items: center; } .col-right-bp-4 { justify-content: right; align-items: right; } .col-left-bp-4 { justify-content: left; align-items: left; } } /* BREAKPOINT 5 */ @media (min-width: 746.25px) { .col-center-bp-5 { justify-content: center; align-items: center; } .col-right-bp-5 { justify-content: right; align-items: right; } .col-left-bp-5 { justify-content: left; align-items: left; } } /* BREAKPOINT 6 */ @media (min-width: 897.50px) { .col-center-bp-6 { justify-content: center; align-items: center; } .col-right-bp-6 { justify-content: right; align-items: right; } .col-left-bp-6 { justify-content: left; align-items: left; } } /* BREAKPOINT 7 */ @media (min-width: 1048.75px) { .col-center-bp-7 { justify-content: center; align-items: center; } .col-right-bp-7 { justify-content: right; align-items: right; } .col-left-bp-7 { justify-content: left; align-items: left; } } /* BREAKPOINT 8 */ @media (min-width: 1200.00px) { .col-center-bp-8 { justify-content: center; align-items: center; } .col-right-bp-8 { justify-content: right; align-items: right; } .col-left-bp-8 { justify-content: left; align-items: left; } } /* */ /* */ /* */ .nowrap { white-space: nowrap; } @media (max-width: 292.50px) { .nowrap-bp-1 { flex-direction: row; flex-wrap: nowrap; } } @media (min-width: 292.50px) { .nowrap-bp-2 { flex-direction: row; flex-wrap: nowrap; } } @media (min-width: 443.75px) { .nowrap-bp-3 { flex-direction: row; flex-wrap: nowrap; } } @media (min-width: 595.00px) { .nowrap-bp-4 { flex-direction: row; flex-wrap: nowrap; } } @media (min-width: 746.25px) { .nowrap-bp-5 { flex-direction: row; flex-wrap: nowrap; } } @media (min-width: 897.50px) { .nowrap-bp-6 { flex-direction: row; flex-wrap: nowrap; } } @media (min-width: 1048.75px) { .nowrap-bp-7 { flex-direction: row; flex-wrap: nowrap; } } @media (min-width: 1200.00px) { .nowrap-bp-8 { flex-direction: row; flex-wrap: nowrap; } } .invisible { display: none; } .visible-up-bp-0, .visible-up-bp-1, .visible-up-bp-2, .visible-up-bp-3, .visible-up-bp-4, .visible-up-bp-5, .visible-up-bp-6, .visible-up-bp-7, .visible-up-bp-8 { display: none; } @media (max-width: 292.50px) { .visible-up-bp-1 { display: var(--visible); } } @media (min-width: 292.50px) { .visible-up-bp-2 { display: var(--visible); } } @media (min-width: 443.75px) { .visible-up-bp-3 { display: var(--visible); } } @media (min-width: 595.00px) { .visible-up-bp-4 { display: var(--visible); } } @media (min-width: 746.25px) { .visible-up-bp-5 { display: var(--visible); } } @media (min-width: 897.50px) { .visible-up-bp-6 { display: var(--visible); } } @media (min-width: 1048.75px) { .visible-up-bp-7 { display: var(--visible); } } @media (min-width: 1200.00px) { .visible-up-bp-8 { display: var(--visible); } } .visible-down-bp-1, .visible-down-bp-2, .visible-down-bp-3, .visible-down-bp-4, .visible-down-bp-5, .visible-down-bp-6, .visible-down-bp-7, .visible-down-bp-8 { display: var(--visible); } @media (max-width: 292.50px) { .visible-down-bp-1 { display: none; } } @media (min-width: 292.50px) { .visible-down-bp-2 { display: none; } } @media (min-width: 443.75px) { .visible-down-bp-3 { display: none; } } @media (min-width: 595.00px) { .visible-down-bp-4 { display: none; } } @media (min-width: 746.25px) { .visible-down-bp-5 { display: none; } } @media (min-width: 897.50px) { .visible-down-bp-6 { display: none; } } @media (min-width: 1048.75px) { .visible-down-bp-7 { display: none; } } @media (min-width: 1200.00px) { .visible-down-bp-8 { display: none; } } /* */ /* */ /* */ [style*="--margin-left"] { margin-left: var(--margin-left); } [style*="--margin-right"] { margin-right: var(--margin-right); } [style*="--margin-top"] { margin-top: var(--margin-top); } [style*="--margin-bottom"] { margin-bottom: var(--margin-bottom); } [style*="--padding-left"] { padding-left: var(--padding-left); } [style*="--padding-right"] { padding-right: var(--padding-right); } [style*="--padding-top"] { padding-top: var(--padding-top); } [style*="--padding-bottom"] { padding-bottom: var(--padding-bottom); } @media (max-width: 292.50px) { [style*="--margin-left-bp-1"] { margin-left: var(--margin-left); } [style*="--margin-right-bp-1"] { margin-right: var(--margin-right); } [style*="--margin-top-bp-1"] { margin-top: var(--margin-top); } [style*="--margin-bottom-bp-1"] { margin-bottom: var(--margin-bottom); } [style*="--padding-left-bp-1"] { padding-left: var(--padding-left-bp-1); } [style*="--padding-right-bp-1"] { padding-right: var(--padding-right-bp-1); } [style*="--padding-top-bp-1"] { padding-top: var(--padding-top-bp-1); } [style*="--padding-bottom-bp-1"] { padding-bottom: var(--padding-bottom-bp-1); } } @media (min-width: 292.50px) { [style*="--margin-left-bp-2"] { margin-left: var(--margin-left); } [style*="--margin-right-bp-2"] { margin-right: var(--margin-right); } [style*="--margin-top-bp-2"] { margin-top: var(--margin-top); } [style*="--margin-bottom-bp-2"] { margin-bottom: var(--margin-bottom); } [style*="--padding-left-bp-2"] { padding-left: var(--padding-left-bp-2); } [style*="--padding-right-bp-2"] { padding-right: var(--padding-right-bp-2); } [style*="--padding-top-bp-2"] { padding-top: var(--padding-top-bp-2); } [style*="--padding-bottom-bp-2"] { padding-bottom: var(--padding-bottom-bp-2); } } @media (min-width: 443.75px) { [style*="--margin-left-bp-3"] { margin-left: var(--margin-left); } [style*="--margin-right-bp-3"] { margin-right: var(--margin-right); } [style*="--margin-top-bp-3"] { margin-top: var(--margin-top); } [style*="--margin-bottom-bp-3"] { margin-bottom: var(--margin-bottom); } [style*="--padding-left-bp-3"] { padding-left: var(--padding-left-bp-3); } [style*="--padding-right-bp-3"] { padding-right: var(--padding-right-bp-3); } [style*="--padding-top-bp-3"] { padding-top: var(--padding-top-bp-3); } [style*="--padding-bottom-bp-3"] { padding-bottom: var(--padding-bottom-bp-3); } } @media (min-width: 595.00px) { [style*="--margin-left-bp-4"] { margin-left: var(--margin-left); } [style*="--margin-right-bp-4"] { margin-right: var(--margin-right); } [style*="--margin-top-bp-4"] { margin-top: var(--margin-top); } [style*="--margin-bottom-bp-4"] { margin-bottom: var(--margin-bottom); } [style*="--padding-left-bp-4"] { padding-left: var(--padding-left-bp-4); } [style*="--padding-right-bp-4"] { padding-right: var(--padding-right-bp-4); } [style*="--padding-top-bp-4"] { padding-top: var(--padding-top-bp-4); } [style*="--padding-bottom-bp-4"] { padding-bottom: var(--padding-bottom-bp-4); } } @media (min-width: 746.25px) { [style*="--margin-left-bp-5"] { margin-left: var(--margin-left); } [style*="--margin-right-bp-5"] { margin-right: var(--margin-right); } [style*="--margin-top-bp-5"] { margin-top: var(--margin-top); } [style*="--margin-bottom-bp-5"] { margin-bottom: var(--margin-bottom); } [style*="--padding-left-bp-5"] { padding-left: var(--padding-left-bp-5); } [style*="--padding-right-bp-5"] { padding-right: var(--padding-right-bp-5); } [style*="--padding-top-bp-5"] { padding-top: var(--padding-top-bp-5); } [style*="--padding-bottom-bp-5"] { padding-bottom: var(--padding-bottom-bp-5); } } @media (min-width: 897.50px) { [style*="--margin-left-bp-6"] { margin-left: var(--margin-left); } [style*="--margin-right-bp-6"] { margin-right: var(--margin-right); } [style*="--margin-top-bp-6"] { margin-top: var(--margin-top); } [style*="--margin-bottom-bp-6"] { margin-bottom: var(--margin-bottom); } [style*="--padding-left-bp-6"] { padding-left: var(--padding-left-bp-6); } [style*="--padding-right-bp-6"] { padding-right: var(--padding-right-bp-6); } [style*="--padding-top-bp-6"] { padding-top: var(--padding-top-bp-6); } [style*="--padding-bottom-bp-6"] { padding-bottom: var(--padding-bottom-bp-6); } } @media (min-width: 1048.75px) { [style*="--margin-left-bp-7"] { margin-left: var(--margin-left); } [style*="--margin-right-bp-7"] { margin-right: var(--margin-right); } [style*="--margin-top-bp-7"] { margin-top: var(--margin-top); } [style*="--margin-bottom-bp-7"] { margin-bottom: var(--margin-bottom); } [style*="--padding-left-bp-7"] { padding-left: var(--padding-left-bp-7); } [style*="--padding-right-bp-7"] { padding-right: var(--padding-right-bp-7); } [style*="--padding-top-bp-7"] { padding-top: var(--padding-top-bp-7); } [style*="--padding-bottom-bp-7"] { padding-bottom: var(--padding-bottom-bp-7); } } @media (min-width: 1200.00px) { [style*="--margin-left-bp-8"] { margin-left: var(--margin-left); } [style*="--margin-right-bp-8"] { margin-right: var(--margin-right); } [style*="--margin-top-bp-8"] { margin-top: var(--margin-top); } [style*="--margin-bottom-bp-8"] { margin-bottom: var(--margin-bottom); } [style*="--padding-left-bp-8"] { padding-left: var(--padding-left-bp-8); } [style*="--padding-right-bp-8"] { padding-right: var(--padding-right-bp-8); } [style*="--padding-top-bp-8"] { padding-top: var(--padding-top-bp-8); } [style*="--padding-bottom-bp-8"] { padding-bottom: var(--padding-bottom-bp-8); } } /* */ /* */ /* */ /* media query - page-width */ .page-width { width:100%; max-width:100%; margin-left: 0px; margin-right: 0px; clear: both; margin-left: auto; margin-right: auto; } /* @media (max-width: 292.50px) { .page-width { max-width: 141.25px ; margin-left: auto; margin-right: auto; } } @media (min-width: 292.50px) { .page-width { max-width: 292.50px ; margin-left: auto; margin-right: auto; } } @media (min-width: 443.75px) { .page-width { max-width: 443.75px ; margin-left: auto; margin-right: auto; } }/**/ @media (min-width: 595.00px) { .page-width { max-width: 595.00px ; } } @media (min-width: 746.25px) { .page-width { max-width: 746.25px ; } } @media (min-width: 897.50px) { .page-width { max-width: 897.50px ; } } @media (min-width: 1048.75px) { .page-width { max-width: 1048.75px ; } } @media (min-width: 1200.00px) { .page-width { max-width: 1200.00px ; } } /* ------------------------------------------------------------------------------------------------ */ /* ASPECT RATIO */ /* ------------------------------------------------------------------------------------------------ */ /* media query - aspect ratio containers */ [style*="--aspect-ratio"] > :first-child, [style*="--aspect-ratio-bp-1"] > :first-child, [style*="--aspect-ratio-bp-2"] > :first-child, [style*="--aspect-ratio-bp-3"] > :first-child, [style*="--aspect-ratio-bp-4"] > :first-child, [style*="--aspect-ratio-bp-5"] > :first-child, [style*="--aspect-ratio-bp-6"] > :first-child, [style*="--aspect-ratio-bp-7"] > :first-child, [style*="--aspect-ratio-bp-8"] > :first-child { width: 100%; height: auto; } [style*="--aspect-ratio"] > img, [style*="--aspect-ratio-bp-1"] > img, [style*="--aspect-ratio-bp-2"] > img, [style*="--aspect-ratio-bp-3"] > img, [style*="--aspect-ratio-bp-4"] > img, [style*="--aspect-ratio-bp-5"] > img, [style*="--aspect-ratio-bp-6"] > img, [style*="--aspect-ratio-bp-7"] > img, [style*="--aspect-ratio-bp-8"] > img { height: auto; } @supports (--custom:propery) { [style*="--aspect-ratio"], [style*="--aspect-ratio-bp-1"], [style*="--aspect-ratio-bp-2"], [style*="--aspect-ratio-bp-3"], [style*="--aspect-ratio-bp-4"], [style*="--aspect-ratio-bp-5"], [style*="--aspect-ratio-bp-6"], [style*="--aspect-ratio-bp-7"], [style*="--aspect-ratio-bp-8"] { position: relative; width: 100%; } [style*="--aspect-height"] { width: auto; height: auto; } [style*="--aspect-height"] svg { width: auto; height: 100%; background: #5050D0; } [style*="--aspect-ratio"]::before, [style*="--aspect-ratio-bp-1"]::before, [style*="--aspect-ratio-bp-2"]::before, [style*="--aspect-ratio-bp-3"]::before, [style*="--aspect-ratio-bp-4"]::before, [style*="--aspect-ratio-bp-5"]::before, [style*="--aspect-ratio-bp-6"]::before, [style*="--aspect-ratio-bp-7"]::before, [style*="--aspect-ratio-bp-8"]::before { content: ""; display: block; } [style*="--aspect-ratio"]::before { padding-top: calc(100% / (var(--aspect-ratio))); } @media (max-width: 292.50px) { [style*="--aspect-ratio-bp-1"]::before { padding-top: calc(100% / (var(--aspect-ratio-bp-1))); } } @media (min-width: 292.50px) { [style*="--aspect-ratio-bp-2"]::before { padding-top: calc(100% / (var(--aspect-ratio-bp-2))); } } @media (min-width: 443.75px) { [style*="--aspect-ratio-bp-3"]::before { padding-top: calc(100% / (var(--aspect-ratio-bp-3))); } } @media (min-width: 595.00px) { [style*="--aspect-ratio-bp-4"]::before { padding-top: calc(100% / (var(--aspect-ratio-bp-4))); } } @media (min-width: 746.25px) { [style*="--aspect-ratio-bp-5"]::before { padding-top: calc(100% / (var(--aspect-ratio-bp-5))); } } @media (min-width: 897.50px) { [style*="--aspect-ratio-bp-6"]::before { padding-top: calc(100% / (var(--aspect-ratio-bp-6))); } } @media (min-width: 1048.75px) { [style*="--aspect-ratio-bp-7"]::before { padding-top: calc(100% / (var(--aspect-ratio-bp-7))); } } @media (min-width: 1200.00px) { [style*="--aspect-ratio-bp-8"]::before { padding-top: calc(100% / (var(--aspect-ratio-bp-8))); } } [style*="--aspect-ratio"]::after, [style*="--aspect-ratio-bp-1"]::after, [style*="--aspect-ratio-bp-2"]::after, [style*="--aspect-ratio-bp-3"]::after, [style*="--aspect-ratio-bp-4"]::after, [style*="--aspect-ratio-bp-5"]::after, [style*="--aspect-ratio-bp-6"]::after, [style*="--aspect-ratio-bp-7"]::after, [style*="--aspect-ratio-bp-8"]::after { content: ""; display: table; clear: both; } [style*="--aspect-ratio"] > :first-child, [style*="--aspect-ratio-bp-1"] > :first-child, [style*="--aspect-ratio-bp-2"] > :first-child, [style*="--aspect-ratio-bp-3"] > :first-child, [style*="--aspect-ratio-bp-4"] > :first-child, [style*="--aspect-ratio-bp-5"] > :first-child, [style*="--aspect-ratio-bp-6"] > :first-child, [style*="--aspect-ratio-bp-7"] > :first-child, [style*="--aspect-ratio-bp-8"] > :first-child { position: absolute; top: 0; left: 0; height: 100%; /* border: 1px solid rgba( 255, 255, 255, 0.25); background-color: rgba( 255, 255, 255, 0.1);/**/ } } /* */ /* */ /* */ /* */ /* */ /* */ body { background: #666666; } /* media query - section */ section { padding-top: 3.5em; padding-bottom: 3.5em; } @media (min-width: 595.00px) { section { } } @media (min-width: 746.25px) { section { } } @media (min-width: 897.50px) { section { } } @media (min-width: 1048.75px) { section { } } @media (min-width: 1200.00px) { section { } } section.border { border-bottom: 1px solid #FFFFFF; } .p10 { padding-left: 10px; padding-right: 10px; } #fft20_PAGE { display: block; min-height: 100% !important; /* background-image: linear-gradient(to right, #0d3078, #034895, #0d3078); background-image: -ms-linear-gradient(to right, #0d3078, #034895, #0d3078); background-image: -moz-linear-gradient(to right, #0d3078, #034895, #0d3078); background-image: -o-linear-gradient(to right, #0d3078, #034895, #0d3078); background-image: -webkit-linear-gradient(to right, #0d3078, #034895, #0d3078); background: #034895; /**/ background: #0d3078; } .admin-bar #fft20_PAGE { } body[class*="soft"] #fft20_PAGE { background: #780D78; } body[class*="ff2t"] #fft20_PAGE { background: #034895; } #fft20_INTRO, #fft20_EPILOG { overflow: hidden; position: relative; height: 100vh !important; } #fft20_FOOTER { overflow: hidden; position: relative; } .bg-fft, #fft20_INTRO, #fft20_EPILOG { background-image: radial-gradient( #034895, #0d3078 ); background-image: -ms-radial-gradient( #034895 0%, #0d3078 100% ); background-image: -moz-radial-gradient( #034895 0%, #0d3078 100% ); background-image: -o-radial-gradient( #034895 0%, #0d3078 100% ); background-image: -webkit-radial-gradient( #034895 0%, #0d3078 100% ); } .bg-soft, body[class*="soft"] #fft20_INTRO, body[class*="soft"] #fft20_EPILOG { background-image: radial-gradient( #940394, #780D78 ); background-image: -ms-radial-gradient( #940394 0%, #780D78 100% ); background-image: -moz-radial-gradient( #940394 0%, #780D78 100% ); background-image: -o-radial-gradient( #940394 0%, #780D78 100% ); background-image: -webkit-radial-gradient( #940394 0%, #780D78 100% ); } .bg-ff2t, body[class*="ff2t"] #fft20_INTRO, body[class*="ff2t"] #fft20_EPILOG { background-image: radial-gradient( #1358A5, #034895 ); background-image: -ms-radial-gradient( #1358A5 0%, #034895 100% ); background-image: -moz-radial-gradient( #1358A5 0%, #034895 100% ); background-image: -o-radial-gradient( #1358A5 0%, #034895 100% ); background-image: -webkit-radial-gradient( #1358A5 0%, #034895 100% ); } #fft20_INTRO .promo-picture, #fft20_EPILOG .promo-picture, #fft20_FOOTER .promo-picture { height: 100%; width: 100%; } #fft20_INTRO .promo-picture { background: url('./assets/img/fft_header_promo.svg'); background-size: auto 100%; background-repeat: no-repeat; background-position: bottom center; } #fft20_EPILOG .promo-picture, #fft20_FOOTER .promo-picture { background: url('./assets/img/fft_footer_promo.svg'); background-size: auto 100%; background-repeat: no-repeat; background-position: bottom center; } #fft20_INTRO .mouse-move { height: 76px; width: 76px; background: url('./assets/img/mouse_move_promo.svg'); animation-name: mouse-move; animation-duration: 4s; animation-iteration-count: infinite; align-self: flex-end; margin-bottom: 2.8em; animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1); } @keyframes mouse-move { 0% { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } 30% { -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); -o-transform: translateY(25px); transform: translateY(25px); } 50% { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } 57% { -webkit-transform: translateY(5px); -moz-transform: translateY(5px); -ms-transform: translateY(5px); -o-transform: translateY(5px); transform: translateY(5px); } 64% { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } 100% { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } } #fft20_INTRO .logo-picture { height: 100%; width: 100%; margin-top: calc(40px + 5vh); max-height: 230px; max-width: 700px; margin-left: 1em; margin-right: 1em; background: url('./assets/img/fft_header_logo.svg'); background-repeat: no-repeat; } #fft20_TOP_MENU { background-color: rgba( 13, 38, 85, 1); -webkit-box-shadow: 0px 0px 45px rgba(0,0,0, 0.2), 0px -0px 45px rgba(0,0,0, 0.2); box-shadow: 0px 0px 45px rgba(0,0,0, 0.2), 0px -0px 45px rgba(0,0,0, 0.2); -webkit-transition: 500ms ease; -moz-transition: 500ms ease; -ms-transition: 500ms ease; -o-transition: 500ms ease; transition: 500ms ease; z-index: 1800; } .sticky #fft20_TOP_MENU { } @media (min-width: 746.25px) { .sticky #fft20_TOP_MENU { position: fixed; top: 0px; padding-top: 60px; width: 100%; } .admin-bar.sticky #fft20_TOP_MENU { margin-top: 32px; } } #fft20_MAIN { min-height: 750px; } #fft20_SEARCH-MENU { position: fixed; top: 0px; width: 100%; min-height: 60px; color: #FFFFFF; font-size: 15px; line-height: 1.15; z-index: 1900; /**/ } .admin-bar #fft20_SEARCH-MENU { margin-top: 32px; } #fft20_PAGE_PROGRESS_BAR { width: 0px; } .page-progress-container { height: 3px; width: 100%; background: #282828; } .page-progress-bar { height: 3px; background: #AA0000; -webkit-transition: 500ms ease; -moz-transition: 500ms ease; -ms-transition: 500ms ease; -o-transition: 500ms ease; transition: 500ms ease; } .breadcrumb { margin-top: 1em; margin-bottom: 1em; color: rgba(200, 200, 200, 0.8); font-size: 14px; line-height: 1.15; } .rank-math-breadcrumb { color: rgba(170, 170, 0, 0.9); /**/ font-weight: 300; /**/ /**/ font-size: 0.9rem; /**/ } .bg-m01 { background-color: #3A63A7; } .bg-m02 { background-color: #29669A; } .bg-m03 { background-color: #48A829; } .bg-m04 { background-color: #669F26; } .bg-m05 { background-color: #75B326; } .bg-m06 { background-color: #D5D521; } .bg-m07 { background-color: #F5E705; } .bg-m08 { background-color: #D4D500; } .bg-m09 { background-color: #D59F1D; } .bg-m10 { background-color: #9D6917; } .bg-m11 { background-color: #603414; } .bg-m12 { background-color: #4361A6; } .thumb-date { position: absolute; display: inline-block; top: 50%; margin-top: -25px; left: -10px; padding-left: 0.5em; padding-right: 0.5em; text-align: center; -webkit-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.5); -moz-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.5); box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.5); } .thumb-date .day { display: block; font-size: 20px; font-weight: 300; } .thumb-date .month { display: block; } /* ------------------------------------------------------------------------------------------------ */ /* Styles for Posts / Events */ /* ------------------------------------------------------------------------------------------------ */ /* */ .post-title-image-wrapper { position: relative; width: 100%; background: #252525; clear: both; overflow: hidden; padding: 0; margin: 0; } .post-title-image-wrapper .blured { position: absolute; width: 100%; height: 100%; } .post-title-image-wrapper .color-overlay { position: absolute; width: 100%; height: 100%; background: rgba(31, 31, 31, 0.85); } .post-title-image-wrapper .box { position: relative; width: 100%; height: 100%; clear: both; } .post-title-image { height: auto; width: 100%; padding: 0; margin: 0; border: 5px solid #252525; } /* .post-title-image div { } */ @media (min-width: 897.50px) { .post-title-image-wrapper { } .post-title-image-wrapper .blured { } .post-title-image-wrapper .box { } .post-title-image { height: 100%; max-height: 480px; width: auto; } } /* .post-title-image-wrapper { position: relative; width: 100%; height: auto; min-height: 100px: max-height: 480px; overflow: hidden; background: #252525; text-align: center; content: ""; } .post-title-image-wrapper .blured { position: absolute; width: 100%; height: 100%; } .post-title-image-wrapper .color-overlay { position: absolute; top: 0px; width: 100%; height: 100%; } .post-title-image { border: 5px solid #252525; } .post-title-image div { background: #25A025; } .post-title-image div div { background-image: var(--img) ""; background-size: cover; } @media (min-width: 746.25px) { .post-title-image-wrapper { height: 480px; } .post-title-image-wrapper .blured { } .post-title-image-wrapper .color-overlay { background: rgba(20,20,20,0.75); } .post-title-image { height: 480px; } .post-title-image div div { border: 1px solid #FF2525; background-size: auto 480px; } } /**/ /* ------------------------------------------------------------------------------------------------ */ /* Button Styles */ /* ------------------------------------------------------------------------------------------------ */ .btn { display: inline-block; background: none; border: 1px solid; font: inherit; line-height: 1; font-size: 1.2em; margin: 0.5em; padding: 0.25em 0.5em; min-width:180px; } .btn { color: #FFFFFF; -webkit-transition: 0.5s; transition: 0.5s; } .btn:hover, .btn:focus { border-color: #FFFFFF; color: #FFFFFF; cursor: pointer; -webkit-box-shadow: inset 15em 0 0 0 rgba(255, 255, 255, 0.25); box-shadow: inset 15em 0 0 0 rgba(255, 255, 255, 0.25); } @media (min-width: 746.25px) { .btn { font-size: 1.5em; } } /* ------------------------------------------------------------------------------------------------ */ /* Input Styles */ /* ------------------------------------------------------------------------------------------------ */ input, textarea { padding: 8px; background: none !important; border: 1px solid rgba( 255, 255, 255, 0.5); color: #FFFFFF; margin-right: 5px; -webkit-transition: 0.5s; transition: 0.5s; width: 100%; } input[type="submit"] { display: inline-block; background: none; border: 1px solid; font: inherit; line-height: 1; font-size: 1.2em; margin: 0.5em; padding: 0.25em 0.5em; min-width:180px; width: auto; } input[type="submit"]:hover, input[type="submit"]:focus { border-color: #FFFFFF; color: #FFFFFF; cursor: pointer; -webkit-box-shadow: inset 15em 0 0 0 rgba(255, 255, 255, 0.25); box-shadow: inset 15em 0 0 0 rgba(255, 255, 255, 0.25); } @media (min-width: 746.25px) { input[type="submit"] { font-size: 1.5em; } } /* ------------------------------------------------------------------------------------------------ */ /* Search Input Styles */ /* ------------------------------------------------------------------------------------------------ */ .search-menu a, .search-menu a:active, .search-menu label, .search-menu label:active { color: #FFFFFF; cursor: pointer; padding: 8px; border: 1px solid transparent; } .search-input { -webkit-transition: 0.5s; transition: 0.5s; } input.search-input { padding: 8px; background: none !important; border: 1px solid rgba( 255, 255, 255, 0.5); color: #FFFFFF; margin-right: 5px; width: 20ch; } label.search-input:hover, label.search-input:focus, label.search-input:active, input.search-input:hover, input.search-input:focus, input.search-input:active { border: 1px solid #FFFFFF; background: rgba( 255, 255, 255, 0.2); } input.search-input:focus, input.search-input:active { width: 50ch; } .socialize { padding-top: 1.5em; padding-bottom: 1.5em; background: #0D2655; -webkit-box-shadow: 0px 5px 10px rgba(0,0,0, 0.2), 0px -5px 10px rgba(0,0,0, 0.2); box-shadow: 0px 5px 10px rgba(0,0,0, 0.2), 0px -5px 10px rgba(0,0,0, 0.2); } /* ------------------------------------------------------------------------------------------------ */ /* Diagramm front-page */ /* ------------------------------------------------------------------------------------------------ */ /* who-we-are */ svg#whoweare #figure { } /* ------------------------------------------------------------------------------------------------ */ /* MODAL */ /* ------------------------------------------------------------------------------------------------ */ .modal { display: none; position: fixed; z-index: 1990; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; /* padding: 3em;/**/ background-color: rgba(0, 0, 0, 0.6); } @media (min-width: 746.25px) { .modal { padding: 3em; } } .modal-selector[id="ms_main_menu"]:checked ~ .modal[for="ms_main_menu"], .modal-selector[id="ms_facebook"]:checked ~ .modal[for="ms_facebook"], .modal-selector[id="ms_google"]:checked ~ .modal[for="ms_google"], .modal-selector[id="ms_pinterest"]:checked ~ .modal[for="ms_pinterest"], .modal-selector[id="ms_instagram"]:checked ~ .modal[for="ms_instagram"], .modal-selector[id="ms_strava"]:checked ~ .modal[for="ms_strava"], .modal-selector[id="ms_gpsies"]:checked ~ .modal[for="ms_gpsies"], .modal-selector[id="ms_youtube"]:checked ~ .modal[for="ms_youtube"], .modal-selector[id="ms_mail"]:checked ~ .modal[for="ms_mail"], .modal-selector[id="ms_whatsapp"]:checked ~ .modal[for="ms_whatsapp"] { display: var(--display-option); } .modal-selector[id="ms_main_menu"]:checked ~ .modal-background, .modal-selector[id="ms_facebook"]:checked ~ .modal-background, .modal-selector[id="ms_google"]:checked ~ .modal-background, .modal-selector[id="ms_pinterest"]:checked ~ .modal-background, .modal-selector[id="ms_instagram"]:checked ~ .modal-background, .modal-selector[id="ms_strava"]:checked ~ .modal-background, .modal-selector[id="ms_gpsies"]:checked ~ .modal-background, .modal-selector[id="ms_youtube"]:checked ~ .modal-background, .modal-selector[id="ms_mail"]:checked ~ .modal-background, .modal-selector[id="ms_whatsapp"]:checked ~ .modal-background { filter: blur(12px); } .modal-inner { width:100%; margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; clear: both; border: 1px solid #888; min-height: 10%; max-height: 100%; min-width: 10%; max-width: 1200.00px; background-color: rgba(0,0,0,0.4); width: auto !important; height: auto !important; position: relative; } .modal .modal-close { position: absolute; right: 8px; top: 2px; color: rgba(255, 255, 255, 0.7); cursor: pointer; } @media (min-width: 746.25px) { .modal .modal-close { right: -20px; top: -20px; } } .modal .modal-close:hover { color: #FFFFFF; } .sl_btn { height: 100%; width: 100%; padding-top: 1.5em; padding-bottom: 1.5em; margin-left: 0.15em; margin-right: 0.15em; text-align: center; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0); font: inherit; font-size: 1.25em; -webkit-transition: 0.5s; transition: 0.5s; } .sl_btn:hover { border-color: #FFFFFF; color: #FFFFFF; /**/ -webkit-box-shadow: inset 15em 0 0 0 rgba(255, 255, 255, 0.25); box-shadow: inset 15em 0 0 0 rgba(255, 255, 255, 0.25);/**/ } .ms_facebook:hover, .btn[for="ms_facebook"]:hover, .sl_btn[for="ms_facebook"]:hover { border-color: #3b5998; color: #3b5998; /**/ -webkit-box-shadow: inset 15em 0 0 0 rgba( 59, 89, 152, 0.05); box-shadow: inset 15em 0 0 0 rgba( 59, 89, 152, 0.05); /**/ } .ms_instagram:hover, .btn[for="ms_instagram"]:hover, .sl_btn[for="ms_instagram"]:hover { border-color: #405de6; color: #405de6; /**/ -webkit-box-shadow: inset 15em 0 0 0 rgba( 64, 93, 230, 0.05); box-shadow: inset 15em 0 0 0 rgba( 64, 93, 230, 0.05); /**/ } .ms_strava:hover, .btn[for="ms_strava"]:hover, .sl_btn[for="ms_strava"]:hover { border-color: #fc4c02; color: #fc4c02; /**/ -webkit-box-shadow: inset 15em 0 0 0 rgba(252, 76, 2, 0.05); box-shadow: inset 15em 0 0 0 rgba(252, 76, 2, 0.05); /**/ } .ms_gpsies:hover, .btn[for="ms_gpsies"]:hover, .sl_btn[for="ms_gpsies"]:hover { border-color: #258BC7; color: #258BC7; /**/ -webkit-box-shadow: inset 15em 0 0 0 rgba( 37, 139, 199, 0.05); box-shadow: inset 15em 0 0 0 rgba( 37, 139, 199, 0.05); /**/ } .ms_youtube:hover, .btn[for="ms_youtube"]:hover, .sl_btn[for="ms_youtube"]:hover { border-color: #ff0000; color: #ff0000; /**/ -webkit-box-shadow: inset 15em 0 0 0 rgba(255, 0, 0, 0.05); box-shadow: inset 15em 0 0 0 rgba(255, 0, 0, 0.05); /**/ } .ms_mail:hover, .btn[for="ms_mail"]:hover, .sl_btn[for="ms_mail"]:hover { border-color: #DD0000; color: #DD0000; /**/ -webkit-box-shadow: inset 15em 0 0 0 rgba(170, 0, 0, 0.05); box-shadow: inset 15em 0 0 0 rgba(170, 0, 0, 0.05); /**/ } .ms_whatsapp:hover, .btn[for="ms_whatsapp"]:hover, .sl_btn[for="ms_whatsapp" ]:hover { border-color: #075e54; color: #075e54; /**/ -webkit-box-shadow: inset 15em 0 0 0 rgba( 7, 94, 84, 0.05); box-shadow: inset 15em 0 0 0 rgba( 7, 94, 84, 0.05); /**/ } /* ------------------------------------------------------------------------------------------------ */ /* PANELS */ /* ------------------------------------------------------------------------------------------------ */ .panels { } .panels > div { display: none; } input[for-panel="one"]:checked ~ .panels [data-panel="one"], input[for-panel="two"]:checked ~ .panels [data-panel="two"], input[for-panel="three"]:checked ~ .panels [data-panel="three"], input[for-panel="four"]:checked ~ .panels [data-panel="four"], input[for-panel="five"]:checked ~ .panels [data-panel="five"], input[for-panel="six"]:checked ~ .panels [data-panel="six"] { display: block; } .panel-label { border: 1px solid #FFFFFF; font-size: 1.25em; padding: 0.33em 0; color: #FFFFFF; -webkit-transition: 0.35s; transition: 0.35s; cursor: pointer; } .panel-label:focus, .panel-label:hover { -webkit-box-shadow: inset 15em 0 0 0 rgba(255, 255, 255, 0.25); box-shadow: inset 15em 0 0 0 rgba(255, 255, 255, 0.25); } .panel-label[for="ds_one" ] { background: rgba( 51, 51, 51, 0.4); } .panel-label[for="ds_two" ] { background: rgba( 102, 102, 102, 0.4); } .panel-label[for="ds_three" ] { background: rgba( 153, 153, 153, 0.4); } .panel-label[for="ds_four" ] { background: rgba( 204, 204, 204, 0.4); } .panel-label[for="ds_one" ]:focus, .panel-label[for="ds_one" ]:hover { color: #940394; border: 1px solid #940394; } .panel-label[for="ds_two" ]:hover { } .panel-label[for="ds_three" ]:hover { } .panel-label[for="ds_four" ]:hover { } /* ------------------------------------------------------------------------------------------------ */ /* MENU */ /* ------------------------------------------------------------------------------------------------ */ .top-menu-wrapper { display: none; } @media (min-width: 746.25px) { .top-menu-wrapper { display: block; } } #menu-top-menu { display: flex; } #menu-top-menu .menu-item { display: inline; } /* ------------------------------------------------------------------------------------------------ */ /* TAGS */ /* ------------------------------------------------------------------------------------------------ */ .tags { } .tags .FFT { background-color: #034895; } .tags .FF2T { background-color: #1358A5; } .tags .FFTTR { background-color: #EF7801; } .tags .SOFT { background-color: #940394; } .tags .EVENT { background-color: #057028; } .tags .ALL { background-color: #057028; } .tags .FFT:hover { background-color: #0d3078; } .tags .FF2T:hover { background-color: #034895; } .tags .FFTTR:hover { background-color: #E56E00; } .tags .SOFT:hover { background-color: #780D78; } .tags .EVENT:hover { background-color: #005E16; } .tags .ALL:hover { background-color: #005E16; } .tag { font-style: normal; display: inline; position: relative; line-height: 1.1rem; font-size: 0.7rem; width: 46px; text-align: center; vertical-align: middle; margin: 0; padding: 0; margin-right: 4px; padding-left: 5px; padding-right: 5px; /* padding-top: 1px; padding-bottom: 1px; */ transform: skewX(-20deg); } .tag > span { display: block; transform: skewX(20deg); } /* ------------------------------------------------------------------------------------------------ */ /* */ /* ------------------------------------------------------------------------------------------------ */ .wp-block-pullquote { border-top: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; } .wp-block-pullquote p { } .wp-block-pullquote cite, .wp-block-pullquote footer { font-style: italic; font-size: 80%; } /* ------------------------------------------------------------------------------------------------ */ /* FOOTER */ /* ------------------------------------------------------------------------------------------------ */ .footer- { font-style: italic; color: #AAAAAA; } .footer- a.footer-item, .footer- span.footer-item, .footer- .law-menu li, .footer- .law-menu li a { display: inline-block; text-decoration: none; line-height: 60px; color: #999999; } .footer- a:hover, .footer- .law-menu li:hover, .footer- .law-menu li a:hover { color: #034895; } .footer- .footer-item::after, .footer- .law-menu li::after { color: #999999; content: "|"; margin-left: 8px; margin-right: 7px; } .footer- .footer-item:last-child::after, .footer- .law-menu li:last-child::after { content: ""; margin-right: 0; } /* ------------------------------------------------------------------------------------------------ */ /* */ /* ------------------------------------------------------------------------------------------------ */ .report-list { width: 100%; padding-top: 10px; padding-bottom: 10px; font-size: 12px; } .report-list a { display: block; padding: 10px; border: 1px solid rgba(255, 255, 255, 0); } .report-list a:hover { color: #BBBBBB; background: rgba(125, 125, 125, 0.05); border: 1px solid rgba(255, 255, 255, 0.05); } .report-list a:visited { } .report-list .sponsor a, .report-list .menu-item-53, .report-list .menu-item-53 span a { font-weight: 1000 !important; } .report-list .title { border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 2px; font-size: 15px; line-height: 1.15; } .report-list .img-container { position: relative; margin-top: 5px; background: #282828; overflow: hidden; } .report-list .img-container .emblem { position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; max-height: 80px; max-width: 80px; background: url('./assets/img/emblem_round_white_transparent.png'); background-size: 100% 100%; background-repeat: no-repeat; background-position: center center; z-index: 80; } .report-list .img-container .img-bg { position: absolute; top: -10px; left: -10px; width: calc(100% + 20px); height: calc(100% + 20px); background-size: cover; background-repeat: no-repeat; background-position: center center; filter: blur(12px); z-index: 77; } .report-list .img-container .img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: #FF0000; background-size: cover; background-repeat: no-repeat; background-position: center center; z-index: 79; } .report-list .img-container .img-overlay { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(64, 64, 64, 0.75); background: rgba(3, 72, 149, 0.8); z-index: 78; } .report-list .tags { line-height: 1; text-align: left; justify-content: left; align-items: left; } .report-list .date { line-height: 1; text-align: right; justify-content: right; align-items: right; } /* ------------------------------------------------------------------------------------------------ */ /* */ /* ------------------------------------------------------------------------------------------------ */ strong { font-weight: 500; } small { font-size: 0.9rem; } fft , .fft { font-weight: 300; padding-left: 0.2em; padding-right: 0.2em; } /* ------------------------------------------------------------------------------------------------ */ /* Calendar */ /* ------------------------------------------------------------------------------------------------ */ .cl-calendar { font-weight: 100; } .col-cl { position: relative; border: 1px solid #FFFFFF; flex: 1; margin-top: -1px; margin-left: -1px; padding-top: 5px; padding-bottom: 5px; text-align: center; } .col-cl[--data-registered]::before { position: absolute; display: block; content: ""; font-size: 12px; top: -5px; right: -5px; height: 18px; width: 18px; background: #039548; background: #034895; border: 1px solid rgba(255, 255, 255, 0.75); border-radius: 100%; z-index: 10; } .col-cl[--data-registered]::after { position: absolute; display: block; content: attr(--data-registered); font-size: 12px; top: -10px; right: -5px; height: 18px; width: 18px; z-index: 11; color: rgba(255, 255, 255, 0.75); text-align: center; } .cl-month, .cl-day, .cl-week { } .cl-month { font-weight: 300; flex: 6; } .cl-day { font-weight: 300; background-color: rgba( 204, 204, 204, 0.4); } .cl-week { font-weight: 300; background-color: rgba( 153, 153, 153, 0.4); } .cl-no { color: rgba( 204, 204, 204, 0.4); } .cl-now { font-weight: 500; background-color: rgba( 255, 153, 153, 0.4); } .col-cl[--cl-nav]:hover { cursor: pointer; background-color: rgba( 153, 153, 153, 0.4); } .col-cl[--data-registered]:hover { background-color: rgba( 255, 153, 153, 0.4); } .col-cl[--data-registered]:hover .cl-info { display: block; } .cl-info { display: none; position: absolute; right: -10px; width: 310px; padding: 8px; border-radius: 8px; background-color: #222222; z-index: 12; box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35); } .cl-info[left] { left: 0px; } .big404 { font-size: 30vh; line-height: 100%; } .text404 { font-size: 3vh; line-height: 100%; padding-bottom: 0.1em; } .searchresult404 { }