/*
Theme Name: No to Racism
Theme URI: https://notoracism.ch
Description: Custom Theme for No To Racism
Author: Roger Burkhard
Author URI: http://www.rogerburkhard.com
*/

/*------------------------------------------------------
VARIABLES
------------------------------------------------------*/

:root {
  --offset: 60px;
  --offset-minus:  -60px;
  --max_width: 100%;
  --columns: 12;
  --gap: 16px;
  --baseline: 0;
  --baseline-offset: 0;
  --font_color: #073430;
  --color_orange:#FF7800;
  --color_grey:#969696;
  --easing:cubic-bezier(0.5, 1, 0.89, 1);

  --grid_color: hsla(204, 80%, 72%, 0.25);
  --repeating_width: calc(100% / var(--columns));
  --column_width: calc((100% /  (var(--columns)) -  var(--gap)));
  --background_width: calc(100% +  var(--gap));
  --background_columns: repeating-linear-gradient(to right, var(--grid_color), var(--grid_color) var(--column_width), transparent var(--column_width), transparent var(--repeating_width));
  --background_baseline: repeating-linear-gradient(to bottom, var(--grid_color), var(--grid_color) 1px, transparent 1px, transparent var(--baseline));
}

/*------------------------------------------------------
THE BIG FAT RESET
------------------------------------------------------*/

* {
    min-height: 0;
    min-width: 0;
}


html, body, div, span, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td, header, footer {
    margin: 0;
    padding: 0;
}

sub, sup {
    line-height: 0;
}

/*------------------------------------------------------
IMPORT FONTS
------------------------------------------------------*/

@font-face {
    font-family: 'Neue Haas Display Pro Roman';
    src: url('styles/fonts/NeueHaasDisplay-Roman.woff2') format('woff2'),
         url('styles/fonts/NeueHaasDisplay-Roman.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Neue Haas Display Pro Medium';
    src: url('styles/fonts/NeueHaasDisplay-Medium.woff2') format('woff2'),
         url('styles/fonts/NeueHaasDisplay-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Neue Haas Display Pro Bold';
    src: url('styles/fonts/NeueHaasDisplay-Bold.woff2') format('woff2'),
         url('styles/fonts/NeueHaasDisplay-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'PT Serif Regular';
    src: url('styles/fonts/PTSerif-Regular.woff2') format('woff2'),
         url('styles/fonts/PTSerif-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'PT Serif Bold';
    src: url('styles/fonts/PTSerif-Bold.woff2') format('woff2'),
         url('styles/fonts/PTSerif-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/*------------------------------------------------------
GRID HELPER
------------------------------------------------------*/

/* Grid */

/*
html::before {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    width: calc(100% - (2 * var(--offset)));
    max-width: var(--max_width);
    min-height: calc(100vh - 86px);
    content: '';
    background-image: var(--background_columns), var(--background_baseline);
    background-size: var(--background_width) 100%;
    background-position: 0 var(--baseline-offset);
    z-index: 1000;
    pointer-events: none;
}

/* Squares */

/*
$square: transparent 0 calc(20px - 1px),#ccc 0 20px;

body {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background: repeating-linear-gradient(to right, $square), repeating-linear-gradient(to bottom,$square) #fff;
}
*/

/*------------------------------------------------------
GENERAL
------------------------------------------------------*/

html {
    width: 100%;
    height: 100%;
    background: #fff;
    margin:0 !important;
    -webkit-text-size-adjust: 100%;
}

body {
    width: -moz-calc(100% - (var(--offset))*2);
    width: -webkit-calc(100% - (var(--offset))*2);
    width: -o-calc(100% - (var(--offset))*2);
    width: calc(100% - (var(--offset))*2);
    padding: 0 var(--offset);
    font: normal 19px/25px 'PT Serif Regular', Helvetica, Arial, Verdana, sans-serif;
    color: var(--font_color);
    overflow-x: hidden;
    min-width: 320px;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
}

body.noscroll {
    overflow: hidden;
}

body.wait, body.wait a {
    cursor:wait;
    overflow-y:hidden;
}

#wpadminbar {
    display:none !important;
}

div:focus {
    outline: none;
    ie-dummy: expression(this.hideFocus=true);
}

::selection {
  background: #FF7800 !important;
  color:#fff;
}

::-moz-selection {
  background: #FF7800 !important;
  color:#fff;
}

a::selection {
    color:#fff !important;
}

a::-moz-selection {
    color:#fff !important;
}



.ie_message {
    display: none;
    padding: 10px;
}

/*------------------------------------------------------
TYPOGRAPHY
------------------------------------------------------*/

h1 {
    font: normal 43px/44px 'Neue Haas Display Pro Medium', Helvetica, Arial, Verdana, sans-serif;
    text-transform:uppercase;
}

h2, .live_search_outer input {
    font: 30px/normal 'Neue Haas Display Pro Medium', Helvetica, Arial, Verdana, sans-serif;
}

span.heading_1 {
    display:block;
    font: 43px/44px 'Neue Haas Display Pro Medium', Helvetica, Arial, Verdana, sans-serif;
    text-transform:uppercase;
    margin-bottom:30px;
}

span.heading_2 {
    font: 29px/31px 'Neue Haas Display Pro Medium', Helvetica, Arial, Verdana, sans-serif;
}

p {
    margin-bottom: 20px;
}

b, strong {
    font-weight: normal;
    font-family:'PT Serif Bold';
}

/*------------------------------------------------------
GENERAL LINKS
------------------------------------------------------*/

a {
    outline: none;
    text-decoration: none;
    cursor: pointer;
    color: var(--font_color);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    -webkit-transition:color 0.4s var(--easing);
    transition:color 0.4s var(--easing);
}

a:hover {
    color:var(--color_grey);
}

:focus {
    -moz-outline-style: none;
}

a.button {
    display:table;
    font-family:'Neue Haas Display Pro Roman';
    background:var(--font_color);
    color:var(--color_grey);
    padding:12px 40px;
    border-radius:300px;
    text-decoration:none;
    margin-top:30px;
    margin-bottom:30px;
    font-size:22px;
    letter-spacing:0.01em;
    -webkit-transition:color 0.4s var(--easing), background 0.4s var(--easing);
    transition:color 0.4s var(--easing), background 0.4s var(--easing);
}

body.no_touch a.button:hover {
    background:var(--color_orange);
    color:var(--font_color);
}

/*------------------------------------------------------
IMAGES
------------------------------------------------------*/

img {
    display: block;
    border: none 0;
}

.lazyload, .lazyloading {
    opacity: 0;
}

.lazyloaded {
    opacity: 1;
    -webkit-transition:opacity 0.5s;
    transition: opacity 0.5s;
}

/*------------------------------------------------------
VIDEO
------------------------------------------------------*/

video {
    display:block;
    outline: 0;
    -moz-outline-style: none;
}

/* Responsive iFrame */

.video_wrap {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}

.video_wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*------------------------------------------------------
CLEAR
------------------------------------------------------*/

.clear {
    clear: both;
}

/*------------------------------------------------------
Focus Input & Textarea
------------------------------------------------------*/

input, textarea {
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    resize: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { 
    display: none; 
}

textarea:focus, input:focus, select:focus {
    outline: 0;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="button"], button {
   outline:none !important;
}
input[type="button"]::-moz-focus-inner, button::-moz-focus-inner {
   border: 0 !important;
}

/*------------------------------------------------------
WYSIWIG CONTENT
------------------------------------------------------*/

.wysiwig_content img {
    display: block;
    width: 100%;
    height: auto;
}

.wysiwig_content ul {
    list-style: none;
    margin-left: 0;
    padding-left: 1em;
}

.wysiwig_content ul > li:before {
    display: inline-block;
    content: "–";
    width: 1em;
    margin-left: -1em;
}

/*------------------------------------------------------
GRID
------------------------------------------------------*/

.grid {
    display: -ms-grid;
    display: grid;
    grid-gap: var(--gap);
    grid-row-gap: 0px;
    grid-template-columns: repeat(var(--columns), 1fr);
    align-items: start;
}

.full_columns {
    -ms-grid-columns: 1 / 13;
    grid-column:1 / 13;
}

/*------------------------------------------------------
HEADER
------------------------------------------------------*/

header {
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:90px;
    background:var(--font_color);
    display: flex;
    justify-content: left;
    align-items: center;
    z-index:100;
}

header .home_logo {
    position:absolute;
    font-size:37px;
    line-height:37px;
    left:var(--offset);
    color:var(--color_orange);
    font-family:'Neue Haas Display Pro Medium';
    text-transform:uppercase;
    text-decoration:none;
    z-index:100;
    -webkit-transition:color 0.4s var(--easing);
    transition:color 0.4s var(--easing);
}

body.no_touch header .home_logo:hover {
    color:var(--color_grey);
}

header nav {
    position: absolute;
    right: var(--offset);
    top: 0;
    bottom:0;
    width: -moz-calc(100% - 390px);
    width: -webkit-calc(100% - 390px);
    width: -o-calc(100% - 390px);
    width: calc(100% - 390px);
    text-align: right;
    display: flex;
    justify-content: right;
    align-items: center;
}

header nav ul {
    display:inline-block;
    list-style:none;
}

header nav ul li {
    display:inline-block;
    margin-right:20px;
}

header nav ul li:last-child {
    margin-right:0;
}

header nav ul li a {
    color:var(--color_grey);
    font-family:'Neue Haas Display Pro Medium';
    text-transform:uppercase;
    text-decoration:none;
    font-size:19px;
    line-height:19px;
    -webkit-transition:color 0.4s var(--easing);
    transition:color 0.4s var(--easing);
}

header nav ul li.current-menu-item a {
    color:var(--color_orange);
}

body.no_touch header nav ul li a:hover {
    color:var(--color_orange);
}

header a.hamburger {
    display:none;
}

/*------------------------------------------------------
PAGE DEFAULT
------------------------------------------------------*/

.page_default {
    padding-top:190px;
    max-width:1400px;
    margin-left:auto;
    margin-right:auto;
    opacity:0;
    -webkit-transition:opacity 1s var(--easing);
    transition:opacity 1s var(--easing);
}

.page_default.show {
    opacity:1;
}

/*------------------------------------------------------
FLEXIBLE CONTENT
------------------------------------------------------*/

.flexible_content {
    margin-bottom:60px;
}

/*------------------------------------------------------
FLEXIBLE CONTENT - 2 SPALTEN TEXT + BILD
------------------------------------------------------*/

.flexible_content_bild_text_2_spalten {
    display: -ms-grid;
    display: grid;
    grid-gap: var(--gap);
    grid-row-gap: 0px;
    grid-template-columns: repeat(var(--columns), 1fr);
    align-items: start;
}

.flexible_content_bild_text_2_spalten .column_left {
    -ms-grid-columns: 2 / 6;
    grid-column:2 / 6;
}

.flexible_content_bild_text_2_spalten .column_left img {
    width:100%;
    height:auto;
}

.flexible_content_bild_text_2_spalten .column_right {
    -ms-grid-columns: 6 / 12;
    grid-column:6 / 12;
}

.flexible_content_bild_text_2_spalten span.heading_2 {
    display:block;
    margin-bottom:30px;
}

/*------------------------------------------------------
FLEXIBLE CONTENT - TEXT
------------------------------------------------------*/

.flexible_content_text {
    -ms-grid-columns: 3 / 11;
    grid-column:3 / 11;
}

/*------------------------------------------------------
FLEXIBLE CONTENT - ACCORDEON
------------------------------------------------------*/

.flexible_content_glossar {
    -ms-grid-columns: 3 / 11;
    grid-column:3 / 11;
}

.accordeon {
    margin-top:30px;
}

.accordeon .accordeon_row {
    border-bottom:1px solid var(--font_color);
}

.accordeon .accordeon_row.grau,
.accordeon .accordeon_row.grau a  {
    color:var(--color_grey);
}

.accordeon .accordeon_row:first-child {
    border-top:1px solid var(--font_color);
} 

.accordeon .accordeon_row .accordeon_title {
    position:relative;
    padding-top:10px;
    padding-bottom:10px;
    cursor:pointer;
    -webkit-transition:color 0.4s var(--easing);
    transition:color 0.4s var(--easing);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none; 
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.accordeon .accordeon_row .accordeon_title h2 {
    padding-right:30px;
}

.accordeon .accordeon_row .accordeon_title s {
  text-decoration: line-through;
  text-decoration-thickness: 3px;
}

body.no_touch .accordeon .accordeon_row  .accordeon_title:hover {
    color:var(--color_orange);
}

.accordeon .accordeon_row  .accordeon_title .plus {
    width:24px;
    height:24px;
    margin-top:-12px;
    position:absolute;
    right:0;
    top:50%;
}

.accordeon .accordeon_row .accordeon_title .plus span.line_1 {
    position:absolute;
    width:24px;
    height:2px;
    top:50%;
    margin-top:-1px;
    background:var(--color_orange);
}

.accordeon .accordeon_row .accordeon_title .plus span.line_2 {
    position:absolute;
    width:2px;
    height:24px;
    left:50%;
    margin-left:-1px;
    background:var(--color_orange);
    transform: rotate(0);
    -webkit-transform: -webkit-rotate(0);
    transform-origin: center center;
    -webkit-transform-origin: center center;
    -webkit-transition: -webkit-transform 0.4s var(--easing);
    transition: transform 0.4s var(--easing);
}

.accordeon .accordeon_row.active .accordeon_title .plus span.line_2 {
        transform: rotate(90deg);
    -webkit-transform: -webkit-rotate(90deg);
}

.accordeon .accordeon_row .accordeon_content,
.accordeon .accordeon_row .keywords {
    display:none;
}

.accordeon .accordeon_row .accordeon_content del {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

/*------------------------------------------------------
SUCHE
------------------------------------------------------*/

.live_search_outer {
    display:block;
}

.live_search_outer input {
    display:block;
    width:100%;
    background:none;
    border:none 0;
    border-bottom:1px solid #969696;
    padding-bottom:10px;
    margin-bottom:60px;
    color:#969696;
}

.live_search_outer input::-webkit-input-placeholder {
    color: #969696;
}

.live_search_outer input:-moz-placeholder {
   color: #969696;
   opacity: 1;
}

.live_search_outer input::-moz-placeholder {
   color: #969696;
   opacity: 1;
}

.live_search_outer input:-ms-input-placeholder {
   color: #969696;
}

/*------------------------------------------------------
FOOTER
------------------------------------------------------*/

footer {
    background:var(--color_orange);
    text-align:center;
    font-family:'Neue Haas Display Pro Medium';
    padding-top:30px;
    padding-bottom:30px;
    margin-left:var(--offset-minus);
    margin-right:var(--offset-minus);
    margin-top:60px;
    background:greeen;
}

/*------------------------------------------------------
IE
------------------------------------------------------*/

.ie_message {
    display: none;
    padding: 10px;
}

.ie_message a {
    text-decoration: underline;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
    .ie_message {
        display: block !important;
    }
   header, main, footer {
    display: none !important
   }
}

/*------------------------------------------------------
LAPTOP
------------------------------------------------------*/

@media all and (max-width: 1200px) and (min-width: 0) {

    .flexible_content_bild_text_2_spalten .column_left {
        -ms-grid-columns: 1 / 6;
        grid-column: 1 / 6;
    }

    .flexible_content_bild_text_2_spalten .column_right {
        -ms-grid-columns: 6 / 13;
        grid-column: 6 / 13;
    }

}

/*------------------------------------------------------
TABLET
------------------------------------------------------*/

@media all and (max-width: 1000px) and (min-width: 0) {

    :root {
      --offset: 30px;
      --offset-minus:  -30px;
    }

    .flexible_content_text,
    .flexible_content_glossar {
        -ms-grid-columns: 2 / 12;
        grid-column: 2 / 12;
    }

    body {
        font-size:16px;
        line-height:21px;
    }

    h1 {
        font-size:23px;
        line-height:24px;
    }

    h2, .live_search_outer input {
        font-size:19px;
    }

    span.heading_1 {
        font-size:23px;
        line-height:24px;
    }

    span.heading_2 {
        font-size:19px;
        line-height:21px;
    }

    a.button {
        font-size:16px;
    }

    .accordeon .accordeon_row .accordeon_title s {
        text-decoration-thickness: 2px;
    }

    .accordeon .accordeon_row .accordeon_content del {
        text-decoration-thickness: 1px;
    }

    header {
        height:80px;
    }

    header .home_logo {
        font-size:21px;
        line-height:22px;
    }

    header nav {
        display:none;
        position: fixed;
        top: 60px;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--font_color) !important;
        z-index: 1000;
        height: calc(100% - 60px);
        width: 100vw;
    }

    header nav ul {
        display:flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width:100vw;
        height: calc((var(--vh, 1vh) * 100) - 60px);
    }

    header nav ul li {
        display:block;
        text-align:center;
        margin-bottom:30px;
    }

    header nav ul li a  {
        font-size:31px;
        line-height:31px;
    }

    .page_default {
        padding-top:120px;
    }

    header a.hamburger {
        display:block;
    }

    .hamburger {
        display: block;
        width: 25px;
        height: 14px;
        position: fixed;
        right: 10px;
        z-index: 1000;
        padding: 10px;
    }
    
    .hamburger span {
        position: absolute;
        left:10px;
        right:10px;
        height: 2px;
        background: var(--color_grey);
        transform: rotate(0deg);
        -webkit-transform: -webkit-rotate(0deg);
        transform-origin: center center;
        -webkit-transform-origin: center center;
        -webkit-transition: -webkit-transform 0.4s var(--easing);
        transition: transform 0.4s var(--easing);
    }

    .hamburger span.line_1 {
        top: 10px;
    }

    .hamburger span.line_2 {
        top: -moz-calc(10px + 6px);
        top: -webkit-calc(10px + 6px);
        top: -o-calc(10px + 6px);
        top: calc(10px + 6px);
    }

    .hamburger span.line_3 {
        top: -moz-calc(10px + 12px);
        top: -webkit-calc(10px + 12px);
        top: -o-calc(10px + 12px);
        top: calc(10px + 12px);
    }

    .hamburger.active span.line_2 {
        display: none;
    }

    .hamburger.active span.line_1 {
        transform: rotate(45deg);
        -webkit-transform: -webkit-rotate(45deg);
        top: -moz-calc(10px + 5px);
        top: -webkit-calc(10px + 5px);
        top: -o-calc(10px + 5px);
        top: calc(10px + 5px);
    }

    .hamburger.active span.line_3 {
        transform: rotate(-45deg);
        -webkit-transform: -webkit-rotate(-45deg);
        top: -moz-calc(10px + 5px);
        top: -webkit-calc(10px + 5px);
        top: -o-calc(10px + 5px);
        top: calc(10px + 5px);
    }

    .accordeon .accordeon_row  .accordeon_title .plus {
        width:18px;
        height:18px;
        margin-top:-9px;
    }

    .accordeon .accordeon_row .accordeon_title .plus span.line_1 {
        width:18px;
    }

    .accordeon .accordeon_row .accordeon_title .plus span.line_2 {
        height:18px;
    }

    .accordeon .accordeon_row .accordeon_title {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .accordeon_content p:last-child {
        margin-bottom:10px;
    }

}

/*------------------------------------------------------
TABLET SMALL
------------------------------------------------------*/

@media all and (max-width: 860px) and (min-width: 0) {

    .flexible_content_text,
    .flexible_content_glossar {
        -ms-grid-columns: 1 / 13;
        grid-column: 1 / 13;
    }

}

/*------------------------------------------------------
MOBILE
------------------------------------------------------*/

@media all and (max-width: 560px) and (min-width: 0) {

    header {
        height:60px;
    }

    .page_default {
        padding-top:100px;
    }

    a {
        text-underline-offset: 2px;
    }

    .flexible_content_bild_text_2_spalten .column_left,
    .flexible_content_bild_text_2_spalten .column_right {
        -ms-grid-columns: 1 / 13;
        grid-column:1 / 13;
    }

    .flexible_content_bild_text_2_spalten .column_left {
        margin-bottom:30px;
    }

    .flexible_content {
        margin-bottom:30px;
    }

    footer {
        margin-top:30px;
    }

}

@media all and (max-width: 900px) and (min-width: 0) {

}

@media all and (max-width: 640px) and (min-width: 0) {
    
}