/*
Theme Name:   Basis
Theme URI:    https://www.understrap.com
Description:  Theme
Author:       Studio divv
Template:     understrap
Version:      0.5.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  understrap-child
*/
@import "variables.css";


html { 
    font-size: 55%; 
    scroll-behavior: smooth;
} 

body.admin-bar {
    position: relative;
    top: 0px;
}

body.fixed {
    position: fixed;
}

/*Default*/

.borders, .borders-opening {
    border: solid 1px #FFA564;
    transition: border 2s ease;
    position: absolute;
    width: calc(100vw - 30px);
    height: calc(100vh - 30px);
    left: 15px;
    top: 15px;
}

.nav-link, .nav-link:hover, .online, .title h2 {
    color: #000;
    transition: color 2s ease;
}

#openingscreen {
    background-color: #FFDCDC;
}

svg.logo path, .controls p svg path {
    fill: #FFA564; 
    transition: fill 2s ease;
}

.controls p svg g line {
    stroke: #000;
    transition: stroke 2s ease;
}

input.form-control {
    border: solid 1px #FFA564;
    background: transparent;
    border-radius: 0px;
}

/*Red
light: #FFDCDC
middle: #FF8686
dark: #FF3E3E
*/

.red {
    color: #FFDCDC;
    transition: color 2s ease;
}

.red .color-overlay, .red .title, .page-id-99.red, .red .modal-body {
    background-color: #FFDCDC;
    transition: background 2s ease;
}

.red .borders, .red .border-color {
    border-color: #FFDCDC;
    transition: border 2s ease;
}

.red .borders-opening, .page-id-99.red .borders, .page-id-99.red .border-color {
   border: solid 1px #FF3E3E;
    transition: border 2s ease; 
}

.page-id-99.red, .page-id-99.red ::placeholder, .red .modal-body, .red .close {
    color: #FF3E3E;
    transition: color 2s ease;
}

.page-id-99.red button.btn.btn-primary {
    background-color: #FF3E3E;
    transition: background 2s ease;
}

.page-id-99.red svg.logo path, .page-id-99.red svg.insta path, .page-id-99.red svg.spotify path {
    fill: #FF3E3E; 
    transition: fill 2s ease;
}

.red .nav-link, .red .nav-link:hover, .red .online, .red .title h2 {
    color: #FFDCDC;
    transition: color 2s ease;
}

.red .controls p svg g line {
    stroke: #FFDCDC;
    transition: stroke 2s ease;
}

.red #openingscreen {
    background-color: #FFDCDC;
    transition: background 2s ease;
}

.red svg.logo path, .red .controls p svg path, .red svg.insta path, .red svg.spotify path {
    fill: #FFDCDC; 
    transition: fill 2s ease;
}

.red .controls p svg#play path {
    fill: #FFDCDC;
    transition: fill 2s ease;
}

.red .controls p svg#pause line {
    stroke: #FFDCDC;
    transition: stroke 2s ease;
}
/*Dark red*/

.red .intro-tekst h1,  .red #start {
    color: #FF8686;
    transition: color 2s ease;
}

.red .button-background {
    border-color: #FFDCDC !important;
    transition: border 2s ease;
}

.page-id-99.red .button-background {
    border-color: #FF3E3E !important;
    transition: border 2s ease;
}

.red .button.start .button-background {
    border-color: #FF8686 !important;
    transition: border 2s ease;
}

/*Orange
light: #FFF0E2
middle: #FFA564
dark: #FFA564
*/

.orange {
    color: #FFF0E2;
    transition: all 2s ease;
}

.orange .color-overlay, .orange .title, .page-id-99.orange, .page-id-99, .orange .modal-body {
    background-color: #FFF0E2;
    transition: background 2s ease;
}

.orange .borders, .orange .border-color {
    border-color: #FFF0E2;
    transition: border 2s ease;
}

.orange .borders-opening, .page-id-99.orange .borders, .page-id-99.orange .border-color {
    border: solid 1px #FFA564;
    transition: border 2s ease;
}

.page-id-99.orange, .page-id-99.orange ::placeholder, .orange .modal-body, .orange .close {
    color: #FFA564;
    transition: all 2s ease;
}

.page-id-99.orange button.btn.btn-primary {
    background-color: #FFA564;
    transition: background 2s ease;
}

.page-id-99.orange svg.logo path, .page-id-99.orange svg.insta path, .page-id-99.orange svg.spotify path, .orange svg.logo path {
    fill: #FFA564; 
    transition: fill 2s ease;
}

.orange .nav-link, .orange .nav-link:hover, .orange .online, .orange .title h2 {
    color: #FFF0E2;
    transition: color 2s ease;
}

.orange .controls p svg g line {
    stroke: #FFF0E2;
    transition: stroke 2s ease;
}

.orange #openingscreen {
    background-color: #FFF0E2;
    transition: background 2s ease;
}

.orange svg.logo path, .orange .controls p svg path, .orange svg.insta path, .orange svg.spotify path {
    fill: #FFF0E2; 
    transition: fill 2s ease;
}

.orange .controls p svg#play path {
    fill: #FFF0E2;
    transition: fill 2s ease;
}

.orange .controls p svg#pause line {
    stroke: #FFF0E2;
    transition: stroke 2s ease;
}
/*Dark orange*/

.orange .intro-tekst h1,  .orange #start {
    color: #FFA564;
    transition: color 2s ease;
}

.orange .button-background {
    border-color: #FFF0E2 !important;
    transition: border 2s ease;
}

.page-id-99.orange .button-background {
    border-color: #FFA564 !important;
    transition: border 2s ease;
}

.orange .button.start .button-background {
    border-color: #FFA564 !important;
    transition: border 2s ease;
}

/*Yellow
light: #FFFEE2
middle: #FEC558
dark: #FEC558
*/

.yellow {
    color: #FFFEE2;
    transition: all 2s ease;
}

.yellow .color-overlay, .yellow .title, .page-id-99.yellow, .yellow .modal-body {
    background-color: #FFFEE2;
    transition: background 2s ease;
}

.yellow .borders, .page-id-99.yellow .borders, .yellow .border-color {
    border-color: #FFFEE2;
    transition: border 2s ease;
}

.yellow .borders-opening, .page-id-99.yellow .borders, .page-id-99.yellow .border-color {
    border: solid 1px #FEC558;
    transition: border 2s ease;
}

.page-id-99.yellow, .page-id-99.yellow ::placeholder, .yellow .modal-body, .yellow .close {
    color: #FEC558;
    transition: all 2s ease;
}

.page-id-99.yellow button.btn.btn-primary {
    background-color: #FEC558;
    transition: background 2s ease;
}

.page-id-99.yellow svg.logo path, .page-id-99.yellow svg.insta path, .page-id-99.yellow svg.spotify path {
    fill: #FEC558; 
    transition: fill 2s ease;
}

.yellow .nav-link, .yellow .nav-link:hover, .yellow .online, .yellow .title h2 {
    color: #FFFEE2;
    transition: color 2s ease;
}

.yellow .controls p svg g line {
    stroke: #FFFEE2;
    transition: stroke 2s ease;
}

.yellow #openingscreen {
    background-color: #FFFEE2;
    transition: background 2s ease;
}

.yellow svg.logo path, .yellow .controls p svg path, .yellow svg.insta path, .yellow svg.spotify path {
    fill: #FFFEE2; 
    transition: fill 2s ease;
}

.yellow .controls p svg#play path {
    fill: #FFFEE2;
    transition: fill 2s ease;
}

.yellow .controls p svg#pause line {
    stroke: #FFFEE2;
    transition: stroke 2s ease;
}

.yellow .controls p svg#plause line {
    stroke: #FFFEE2;
    transition: stroke 2s ease;
}
/*Dark yellow*/

.yellow .intro-tekst h1,  .yellow #start {
    color: #FEC558;
    transition: color 2s ease;
}

.yellow .button-background {
    border-color: #FFFEE2 !important;
    transition: border 2s ease;
}

.page-id-99.yellow .button-background {
    border-color: #FEC558 !important;
    transition: border 2s ease;
}

.yellow .button.start .button-background {
    border-color: #FEC558 !important;
    transition: border 2s ease;
}

/*Green
light: #EDFFEF
middle: #6FE545
dark: #3BCB08
*/

.green {
    color: #EDFFEF;
    transition: all 2s ease;
}

.green .color-overlay, .green .title, .page-id-99.green, .green .modal-body {
    background-color: #EDFFEF;
    transition: background 2s ease;
}

.green .borders, .green .border-color {
    border-color: #EDFFEF;
    transition: border 2s ease;
}

.green .borders-opening, .page-id-99.green .borders, .page-id-99.green .border-color {
    border: solid 1px #3BCB08;
    transition: border 2s ease;
}

.page-id-99.green, .page-id-99.green ::placeholder, .green .modal-body, .green .close {
    color: #3BCB08;
    transition: all 2s ease;
}

.page-id-99.green button.btn.btn-primary {
    background-color: #3BCB08;
    transition: background 2s ease;
}

.page-id-99.green svg.logo path, .page-id-99.green svg.insta path, .page-id-99.green svg.spotify path {
    fill: #3BCB08; 
    transition: fill 2s ease;
}

.green .nav-link, .green .nav-link:hover, .green .online, .green .title h2 {
    color: #EDFFEF;
    transition: color 2s ease;
}

 .green #openingscreen {
    background-color: #EDFFEF;
     transition: background 2s ease;
}

.green svg.logo path, .green .controls p svg path, .green svg.insta path, .green svg.spotify path {
    fill: #EDFFEF; 
    transition: fill 2s ease;
}

.green .controls p svg#play path {
    fill: #EDFFEF;
    transition: fill 2s ease;
}

.green .controls p svg#pause line {
    stroke: #EDFFEF;
    transition: stroke 2s ease;
}

.green .controls p svg g line {
    stroke: #EDFFEF;
    transition: stroke 2s ease;
}

/*Dark green*/

 .green .intro-tekst h1,  .green #start {
    color: #6FE545;
     transition: color 2s ease;
}

 .green .button-background {
    border-color: #EDFFEF !important;
     transition: border 2s ease;
}

.page-id-99.green .button-background {
    border-color: #3BCB08 !important;
    transition: border 2s ease;
}

 .green .button.start .button-background {
    border-color: #6FE545 !important;
     transition: border 2s ease;
}

/*Blue
light: #E1F8FF
middle: #61D9FF
dark: #2DBFED
*/
.blue {
    color: #E1F8FF;
    transition: all 2s ease;
}


.blue .color-overlay, .blue .title, .page-id-99.blue, .blue .modal-body {
    background-color: #E1F8FF;
    transition: background 2s ease;
}


.blue .borders, .blue .border-color {
    border-color: #E1F8FF;
    transition: border 2s ease;
}

.blue .borders-opening, .page-id-99.blue .borders, .page-id-99.blue .border-color {
    border: solid 1px #2DBFED;
    transition: border 2s ease;
}

.page-id-99.blue, .page-id-99.blue ::placeholder, .blue .modal-body, .blue .close {
    color: #2DBFED;
    transition: all 2s ease;
}

.page-id-99.blue button.btn.btn-primary {
    background-color: #2DBFED;
    transition: background 2s ease;
}

.page-id-99.blue svg.logo path, .page-id-99.blue svg.insta path, .page-id-99.blue svg.spotify path {
    fill: #2DBFED; 
    transition: fill 2s ease;
}

.blue .nav-link, .blue .nav-link:hover, .blue .online, .blue .title h2 {
    color: #E1F8FF;
    transition: color 2s ease;
}

.blue .controls p svg g line {
    stroke: #E1F8FF;
    transition: stroke 2s ease;
}

.blue #openingscreen {
    background-color: #E1F8FF;
    transition: background 2s ease;
}

.blue svg.logo path, .blue .controls p svg path, .blue svg.insta path, .blue svg.spotify path {
    fill: #E1F8FF; 
    transition: fill 2s ease;
}

.blue .controls p svg#play path {
    fill: #E1F8FF;
    transition: fill 2s ease;
}

.blue .controls p svg#pause line {
    stroke: #E1F8FF;
    transition: stroke 2s ease;
}

/*Dark blue*/

.blue .intro-tekst h1,  .blue #start {
    color: #61D9FF;
    transition: color 2s ease;
}

.blue .button.start .button-background {
    border-color: #61D9FF !important;
    transition: border 2s ease;
}

.page-id-99.blue .button-background {
    border-color: #2DBFED !important;
    transition: border 2s ease;
}

.blue .button-background {
    border-color: #E1F8FF !important;
    transition: border 2s ease;
}

/* Purple
light: #F7EAFF
middle: #D086FF
dark: #BD55FF
*/

.purple {
    color: #F7EAFF;
    transition: all 2s ease;
}


.purple .color-overlay, .purple .title, .page-id-99.purple, .purple .modal-body {
    background-color: #F7EAFF;
    transition: background 2s ease;
}

.purple .borders, .purple .border-color {
    border-color: #F7EAFF;
    transition: border 2s ease;
}

.purple .borders-opening, .page-id-99.purple .borders, .page-id-99.purple .border-color {
    border: solid 1px #BD55FF;
    transition: border 2s ease;
}

.page-id-99.purple, .page-id-99.purple ::placeholder, .purple .modal-body, .purple .close {
    color: #BD55FF;
    transition: all 2s ease;
}

.page-id-99.purple button.btn.btn-primary {
    background-color: #BD55FF;
    transition: background 2s ease;
}

.page-id-99.purple svg.logo path, .page-id-99.purple svg.insta path, .page-id-99.purple svg.spotify path  {
    fill: #BD55FF; 
    transition: fill 2s ease;
}

.purple .nav-link, .purple .nav-link:hover, .purple .online, .purple .title h2 {
    color: #F7EAFF;
    transition: color 2s ease;
}

.purple .controls p svg g line {
    stroke: #F7EAFF;
    transition: stroke 2s ease;
}

.purple #openingscreen {
    background-color: #F7EAFF;
    transition: background 2s ease;
}

.purple svg.logo path, .purple .controls p svg path, .purple svg.insta path, .purple svg.spotify path {
    fill: #F7EAFF; 
    transition: fill 2s ease;
}

.purple .controls p svg#play path {
    fill: #F7EAFF;
    transition: fill 2s ease;
}

.purple .controls p svg#pause line {
    stroke: #F7EAFF;
    transition: stroke 2s ease;
}

/*Dark purple*/

.purple .intro-tekst h1,  .purple #start {
    color: #D086FF;
    transition: color 2s ease;
}

.purple .button-background, .page-id-99.purple .button-background  {
    border-color: #F7EAFF !important;
    transition: border 2s ease;
}

.page-id-99.purple .button-background {
    border-color: #BD55FF !important;
    transition: border 2s ease;
}

.purple .button.start .button-background  {
    border-color: #D086FF !important;
    transition: border 2s ease;
}

/*Disabled*/
.controls .disabled #prev-song svg#prev-song {
   opacity: 0.3;
}

.page-id-99 .menu {
    display: none;
}

.page-id-99 .row {
    height: 100%;
}

button.btn.btn-primary {
    border: 0px;
    background-color: #FFA564;
    font-family: "futura-pt",sans-serif;
    padding: 10px 15px;
    border-radius: 0px;
    font-weight: 500;
    font-size: 1.5rem;
    float: right;
}

.page-id-99, .page-id-99 ::placeholder {
    color: #FFA564;
}

/*Body*/

html, body { 
    font-family: 'futura-pt', sans-serif;
    font-weight: 500;
    height: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

#header .row {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}

a, a:hover, p {
    color: inherit;
    font-family: futura-pt;
}

p, ul li {
    margin: 0;
    font-size: 2.2rem;
    line-height: 1.4;
    font-weight: 500;
    margin-bottom: 10px;
}

ul {
    padding: 0;
    margin: 0;
}

ul li {
    list-style: none;
    line-height: 1.2;
    margin: 0;
    font-family: "futura-pt",sans-serif;
}

.form-control {
    font-family: "futura-pt",sans-serif;
    font-weight: 500;
    font-size: 2rem;
    color: #282828;
    padding: 8px 10px;
}

.form-control:focus {
    background-color: transparent;
    box-shadow: none;
     color: #282828;
}

.form-control:focus::-webkit-input-placeholder {
    color: transparent !important;
    transition: none !important;
}

.form-control:focus:-moz-placeholder, .form-control:focus:-ms-input-placeholder, .form-control:focus::-moz-placeholder {
   color: transparent !important;
    transition: none !important; 
}

form {
    margin-top: 50px;
}

.thanks .col-md-6 {
    display: none;
}

a {
    margin: 0;
    margin: 0;
    font-size: 2.2rem;
    line-height: 1.4;
    font-weight: 500;
}

a:hover {
    text-decoration: none;
}

.menu .button a {
    padding: 0px 12px;
    height: 50px;
    display: flex;
    align-items: center;
    border: solid 1px;
    text-transform: lowercase;
}

.menu .button .button-background {
    right: 5px;
    transform: skewY(-45deg);
    bottom: unset;
    top: -5px;
}

.menu .button:last-of-type .button-background {
    right: -10px;
}

.menu .button:last-of-type .button-background:last-of-type {
    right: -10px;
    width: 100%;
}

.menu .button .button-background:last-of-type {
    width: calc(100% - 15px);
    bottom: unset;
    top: -10px;
    transform: skewX(-45deg);
    border-top: solid 1px;
    border-right: solid 1px;
    border-bottom: 0px;
}

.menu .button:not(:last-of-type) a {
    margin-right: 15px;
}

.menu .button:hover {
    transform: translate(-10px, 10px);
}

.controls .button.disabled:hover {
    transform: none;
}

.controls .button.disabled:hover p svg, .button.disabled:hover, .controls .button.disabled:hover p{
    cursor: auto !important;
}

.button.disabled:hover .button-background {
    display: none;
}

.title.js-conveyor {
    position: relative;
    overflow: hidden;
    width: 280px;
    margin-right: 20px;
}

.title h2 {
    position: absolute;
    right: -100%;
    top: 0;
    height: 100%;
    display: inline-flex;
    align-items: center;
    font-size: 2.6rem;
    font-family: futura-pt-condensed, sans-serif;
    font-weight: 800;
    font-style: normal;
    margin: 0;
    color: #000 !important;
    text-transform: uppercase;
    transform: translate3d(0, 0, 0);
}

.started .title h2 {
    animation: moveSlideshow 10s linear infinite;
}

@keyframes moveSlideshow {  
  100% { 
    -webkit-transform: translateX(-250%);  
  }
}

.controls .button {
    margin-right: 10px;
    border: solid 1px;
    min-height: 45px;
    min-width: 45px;
}

.controls .button-background:last-of-type {
    width: 102%;
    left: 4px;
}

.controls .button-background {
    height: 102%;
}

.controls .button:hover {
    transform: translate(-4px, -9px);
}

h1 {
    font-family: futura-pt-condensed, sans-serif;
    font-weight: 800;
    text-transform: lowercase;
    font-size: 20rem;
    line-height: 0.8;
    letter-spacing: -0.04em;
    text-align: center;
}

h2 {
    font-size: 1.8rem;
    line-height: 2rem;
    margin-bottom: 2rem;
}

h3 {
    font-size: 1.5rem;
    line-height: 1.8rem;
    margin-bottom: 2rem;
}

h4 {
    font-size: 1.2rem;
    line-height: 1.6rem;
    margin-bottom: 2rem;
}

h5 {
    font-size: 1.2rem;
    line-height: 1.6rem;
    text-transform: uppercase;
    margin-bottom: 2rem;
}

h6 {
    font-size: 1rem;
    line-height: 1.5rem;
    text-transform: uppercase;
    margin-bottom: 2rem;
}

.slick-list, .slick-slide {
    width: 100%;
}

span.edit-link, button.toggle {
    display: none;
}

button:focus{
    outline: none;   
}

button.toggle {
    background: none;
    border: none;
    width: auto;
    height: auto;
    cursor: pointer;
}

.button {
    align-items: center;  
    display: inline-flex;
    justify-content: center;
    position: relative;
    min-height: 50px;
}

.logo, .logo h1 {
    padding: 15px;
    border-right: solid 1px;
    border-bottom: solid 1px;
}

svg.logo {
    padding: 0px;
    border: 0px !important;
}

nav ul li a:hover {

}

nav ul {
    padding: 0px;
    margin: 0px;
}

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

nav ul li {
    margin-left: 30px;
}

.nav-link {
    display: block;
    padding: 0;
    font-size: 3rem;
    text-decoration: none;
    text-transform: lowercase;
    font-weight: 500;
}

.nav-link:hover {
    text-decoration: underline;
}

.block img {
    max-width: 100%;
    height: auto;
}

.block.flex {
    display: flex;
}

.flex {
    display: flex;
    align-items: center;
}

.block.flex div {
    width: 100%;
}

.wp-block-columns:last-of-type {
    margin-bottom: 0px;
}

.wp-block-columns.has-2-columns {
    width: 100%;
    display: flex;
    padding-left: 15px;
    padding-right: 15px;
}

.wp-block-columns {
    margin-bottom: 120px;
}

.row .block {
    width: 100%;
    margin-bottom: 120px;
}

.wp-block-column:not(:first-child) {
    margin-left: 120px;
}

.wp-block-column {
    flex-basis: calc(50% - 60px);
    flex-grow: 0;
    flex-wrap: wrap;
    display: flex;
}

.block {
    margin-bottom: 60px;
}

.block:last-of-type {
    margin-bottom: 0px;
}

.wp-block-column {
    word-break: unset;
    overflow-wrap: unset;
}

form input, form textarea {
    width: 100%;
    border: solid 1px #C3C3C3;
    margin-bottom: 10px;
    padding: 5px 10px;
    font-size: 30px;
}

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

form textarea {
    margin-bottom: 20px;
}

input.wpcf7-form-control.wpcf7-submit {
    width: auto;
    display: block;
    float: right;
    border-radius: 8px;
    border: none;
    color: #fff;
    padding: 8px 35px;
}

div.wpcf7-validation-errors, div.wpcf7-acceptance-missing {
    border: 1px solid #2EAC66;
}

span.wpcf7-not-valid-tip {
    color: #E34811;
    font-size: 0.8em;
    font-weight: normal;
    display: block;
    position: relative;
    bottom: 25px;
}

div.wpcf7-response-output {
    margin: 0;
    margin-top: 25px;
    font-size: 0.8em;
}

.order-sm-1 {
    -webkit-box-ordinal-group: 3!important;
    -ms-flex-order: 2!important;
    order: 2!important;
}

.order-md-2 {
    -webkit-box-ordinal-group: 2 !important;
    -ms-flex-order: 1!important;
    order: 1!important;
}

div#page-wrapper {
    padding: 0px 100px;
    height: 100%;
}

span#mvreguserss, span#mvmbuserss {
    display: none;
}

.online {
    position: absolute;
    font-family: futura-pt-condensed, sans-serif !important;
    font-weight: 800 !important;
    right: 0px;
    bottom: 15px;
    font-size: 2.6rem;
    text-transform: uppercase;
    /* border: solid 1px; */
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    padding-right: 15px;
    z-index: 100000000000000;
}

span#useronline-count, span.useronline-count  {
    padding: 0 15px;
    height: 50px;
    border-right: solid 1px;
    display: flex;
    align-items: center;
    /* margin-right: 15px; */
}

.save div.d-flex {
    /* font-family: futura-pt-condensed, sans-serif !important; */
    font-weight: 800 !important;
    font-size: 2.6rem;
    padding: 0 15px;
    height: 50px;
}

.save svg.spotify {
    margin-right: 15px;
}

.hide {
    display: none !important; 
}

.online .button {
    border: solid 1px;
    min-height: 52px;
    min-width: 45px;
}

.online .count {
    border: solid 1px;
    min-height: 52px;
    min-width: 45px;
}

.online .button.save:hover {
    transform: translate(-9px, -9px);
}

.save .button-background {
    height: 103%;
}

.save .button-background:last-of-type {
    left: 3px;
}

.online div:last-of-type:not(.wpmwo_online_visitors):not(.button-background) {
    margin-left: 15px;
}

/* .online .save {
    margin-right: 10px;
} */

.title {
    display: flex;
    align-items: center;
    padding-left: 20px;
}

/* LOAD */
#loader-wrapper {
    display: flex;
    color: #FF8686;
    text-align: center;
    z-index: 9999999999;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #FFDCDC;
    transition: 0.6s;
}

#loader-wrapper.loaded {
    opacity: 0;
    display: none;
}

/* START */


  #openingscreen {
    display: none;
    color: white;
    text-align: center;
    z-index: 999999999;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* opacity: 0.5; */
  }

.home #openingscreen {
    display: flex;
}

  #openingscreen input {
      padding: 5px;
      border: 2px solid white;
  }

.intro-tekst h1 {
    font-family: futura-pt-condensed, sans-serif !important;
    font-weight: 800 !important;
    font-size: 17rem;
    line-height: 0.6;
    letter-spacing: -0.05em;
    text-transform: lowercase;
    color: #FFA564;
}

.button.start {
    color: #FFA564;
    border-color: #FFA564;
}

.intro-tekst h1 span {
    position: relative;
    right: 38%;
}

#start, #load {
    font-size: 2rem;
}

.tk-futura-pt.ready, #load.tk-futura-pt {
    font-family: "futura-pt",sans-serif;
    font-weight: 500; 
}

#start {
    min-height: 50px;
}

.button-background {
    right: -10px;
    bottom: -5px;
    width: 10px;
    height: 100%;
    transform: skewY(45deg);
    background: transparent !important;
    border-right: 1px solid;
    border-top: 1px solid;
    border-bottom: 1px solid;
    position: absolute;
    opacity: 0;
}

.button-background:last-of-type {
    width: 100%;
    left: 5px;
    right: unset;
    height: 10px;
    border-left: 1px solid;
    border-right: 0px;
    border-top: 0px;
    transform: skewX(45deg);
    bottom: -10px;
}

.button.start {
    margin-top: 75px;
}

.button:hover .button-background {
    opacity: 1;
    transition: opacity 0.5s ease;
}

#start.ready:hover + .button-background {
    opacity: 1;
}

.button:hover {
    cursor: pointer;
    transform: translate(-0.5em, -0.5em);
    transition: transform 0.5s ease;
}

#start.ready {
    background: transparent;
    border: solid 1px;
    border-radius: 0px;
    padding: 10px 20px;
    display: inline-block;
    min-width: 180px;
    font-family: futura-pt-condensed, sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    font-size: 2.6rem;
}

div#filters {
    display: none;
}

.menu {
    position: absolute;
    right: 15px;
    top: 15px;
}

/* RADIO */

.start #pause {
    display: block;
    transition: 2s ease;
}

.start #play {
    display: none;
    transition: 2s ease;
}

.paused-player .start #play {
    display: block;
}

.paused-player .start #pause {
    display: none;
}

p#prev-song svg {
    transform: rotate(180deg);
}

div#page {
    max-height: 100vh;
    height: 100vh;
    overflow: hidden;
}

#radio-player{
    width:100vw;
    height:100vh;
    overflow:hidden;
    position:relative;
    z-index: -1;
  }

  #radio-player iframe{

    transform: scale(1.7);
  }

  #header {
      position: absolute;
      z-index: 99999999;
      padding: 15px;
      left: 0;
      width: 100vw;
  }

  .controls {
    display: flex;
    justify-content: start;
  }

.control-wrapper {
    position: absolute;
    bottom: 15px;
    left: 15px;
    right: 0;
    display: flex;
    justify-content: start;
    z-index: 99999999;
  }

  .controls p {
     cursor: pointer;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

.controls p svg {
    cursor: pointer;
    margin: 0 auto;
}

.plyr--video .plyr__video-wrapper {
    opacity: 0;   
    transition: opacity 2s;
}

.plyr--playing .plyr__video-wrapper, .paused-player .plyr--video .plyr__video-wrapper {
    opacity: 1;
}

.plyr__poster {
    display: none;
}

h1.outro {
    position: absolute;
    top: 50%;
    left: 50px;
    font-family: futura-pt-condensed, sans-serif;
    font-weight: 800;
    text-transform: lowercase;
    font-size: 20rem;
    line-height: 0.7;
    letter-spacing: -0.04em;
    max-width: 60vw;
    opacity: 0;
    z-index: 1000000;
    text-align: left;
}

h1.intro {
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 50px;
    font-family: futura-pt-condensed, sans-serif;
    font-weight: 800;
    text-transform: lowercase;
    font-size: 20rem;
    line-height: 0.7;
    letter-spacing: -0.04em;
    max-width: 60vw;
    z-index: 10000;
    display: block;
    z-index: 1000000;
    -webkit-animation: fadeIn 500ms ease-in-out; /* Chrome, Safari, Opera */
    animation: fadeIn 500ms ease-in-out;
    animation-delay: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
    text-align: left;
}

.button p {
    margin: 0;
}

.ending h1.intro {
    display: none;
}

.ending .color-overlay {
    opacity: 1;
}

.ending h1.outro {
    -webkit-animation: fadeInUp 0.5s ease-in-out; /* Chrome, Safari, Opera */
    animation: fadeInUp 0.5s ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: 0.5s;
    display: block;
}

.loading h1.intro {
    display: none;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(-50%);
    }
}

/* Standard syntax */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    100% {
        opacity: 1;
        transform: translateY(-50%);
    }
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* Standard syntax */
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Standard syntax */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.plyr, .plyr__video-embed, .plyr__video-wrapper--fixed-ratio {
    height: 101%;
    box-sizing: content-box;
}

.plyr--video, .loading-overlay {
    background: transparent;
/*    background-image: url(https://wordpress-124419-1258083.cloudwaysapps.com/wp-content/uploads/2020/05/JZSC.gif);*/
    overflow: hidden;
    background-size: cover;
}

.loading-overlay {
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    z-index: 100;
}

.color-overlay {
    width: 100%;
    height: 100%;
    opacity: 0.2;
    position: absolute;
    z-index: 100;
    background-color: #000 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23ffffff' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}

.loading .loading-overlay {
    opacity: 1;
    background-color: transparent;
}

.loading .color-overlay {
    opacity: 1;
}

.loading h1.intro {
    display: none;
}

.paused-player .plyr--video {
    background: transparent;
    background-image: none;
}

.control-wrapper {
    opacity: 1;
}

.loading .control-wrapper {
    opacity: 0;
    transition: 0.5s ease;
}

.grapjas {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    z-index: -1;
}

/*Modal*/

.modal {
    z-index: 1000000000;
}

.modal-open #header {
    z-index: 0;
}

.modal p {
    margin-bottom: 20px;
}

.modal p:nth-of-type(7) {
    margin-top: 20px;
}

.modal-body {
    padding: 35px;
}

.modal-content {
    border: solid 1px;
    border-radius: 0px;
    padding: 15px;
    background: transparent;
}

p.creator {
    margin: 0;
}

p.creator span {
    font-family: futura-pt-condensed, sans-serif;
    font-size: 2.3rem;
    text-transform: uppercase;
    margin-right: 10px;
}

p.creator a:first-of-type {
    margin-right: 5px;
}

p.creator a {
    font-size: 1.6rem;
}

button.close {
    position: absolute;
    right: -55px;
    top: -35px;
    cursor: pointer;
}

.close {
    font-size: 10rem;
    font-weight: 100;
    text-shadow: none;
    opacity: 1;
}

.instagram a, .privacy a {
    text-decoration: underline;
}

.instagram, .privacy {
    float: left;
    width: 50%;
    margin-top: 40px;
    margin-bottom: 0px !important;
}

.privacy {
    text-align: right;
}

#song-overlay, .close-mobile {
    display: none;
}

span.online-mobile {
    margin-right: 6px;
}

@media only screen and (max-width: 1440px) {
 
    html, body {
        font-size: 50%;
    }
    
    h1.intro, h1.outro {
        max-width: 70vw;
    }
}

@media only screen and (max-width: 1024px) {
 
  #radio-player iframe {
        transform: scale(3);
    }  
}

@media only screen and (max-width: 768px) {
    
    .home-menu {
        display: block;
    }
    
    html, body {
        font-size: 56.5%;
    }
    
    .order-sm-1 {
        -webkit-box-ordinal-group: 2 !important;
        -ms-flex-order: 1!important;
        order: 1!important;
    }

    .order-md-2 {
        -webkit-box-ordinal-group: 3!important;
        -ms-flex-order: 2!important;
        order: 2!important;
    }
    
    .col-md-6, .col-md-2, .col-md-4, .col-md-3, .col-md-9 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .wp-block-column {
        margin-bottom: 60px;
    }
    
    .wp-block-columns {
        margin-bottom: 60px;
    }
    
    body.admin-bar {
        top: 0px;
    }
    
    .wp-block-columns.has-2-columns {
        padding: 30px 0px;
    }
    
    .wp-block-column {
        flex-basis: 100%;
        flex-grow: 0;
    }
    
    .wp-block-column:not(:first-child) {
        margin-left: 0px;
    }
    
    .col-md-6, .col-md-3, .col-md-4, .col-md-2, .col-md-9 {
        margin-bottom: 30px;
    }
    
    .col-md-6:last-of-type, .col-md-3:last-of-type, .col-md-4:last-of-type, .col-md-2:last-of-type  {
        margin-bottom: 0px;
    }
    
    .col-md-4.fact:last-of-type {
        margin-bottom: 30px;
    }
    
    button.toggle {
        display: block;
    }
    
    .nav.active button.toggle {
        display: block;
        position: absolute;
        right: 15px;
        top: 15px;
    }
    
    .nav {
        width: 100%;
    }
    
    .nav.active {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1000;
        width: 100vw;
        height: 100vh;
        transition: background-color 0.5s;
        background-color: #000;
    }
    
    .nav.active div#navbarNavDropdown {
        margin: 0;
        position: absolute;
        top: 50%;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        left: 0;
        right: 0;
    }

    .nav.active nav#menu{
        display: block !important;
    }
    
    .nav.active .nav-wrapper {
        height: 100vh;
        animation: fadeIn;
        animation-duration: 2s;
    }
    
    .nav.active a.nav-link {
        font-size: 3rem;
        line-height: 3.5rem;
    }
    
    ul li a.nav-link {
        white-space: normal;
        overflow: visible;
    }
    
    .nav.active nav ul li {
        display: block;
        text-align: center;
        font-size: 2rem;
    }
    
}

@media only screen and (max-width: 767px) {
    
    .row {
        margin: 0;
    }
    
    .online-mobile {
        display: none;
    }
    
    .col-md-6, .col-md-3, .col-md-4, .col-md-2, .col-md-9 {
        padding: 0;
    }
    
    .modal-content.border-color {
        max-width: calc(100% - 60px);
        padding: 0px;
        position: relative;
        left: 30px;
        top: 135px;
        margin-bottom: 30px;
    }
    
    button.close {
        right: 20px;
        top: 10px;
        z-index: 100000;
    }
    
    .close span {
        display: none;
    }
    
    .close .close-mobile {
        display: block !important;
        font-family: "futura-pt",sans-serif !important;
        font-weight: 500;
        font-size: 2.2rem;
        text-decoration: underline;
    }
    
    .modal-body {
        padding-top: 50px;
    }
    
    .modal-dialog-centered {
        display: block;
        margin: 0;
    }
    
    .modal {
       max-width: 100vw; 
    }
    
    .button:hover .button-background {
        display: none;
    }
    
    .button:hover, .menu .button:hover {
        transform: none !important;
    }
    
    .title.js-conveyor {
        display: none;
    }
    
    .intro-tekst h1 {
        font-size: 10rem;
    }
    
    h1 {
        font-size: 9rem;
    }
    
    .col-md-12 {
        padding: 0;
    }
    
    .col-md-8.intro-tekst {
        position: relative;
        left: 20px;
    }
    
    .button.start {
        position: relative;
        right: 20px;
    }
    
    h1.intro, h1.outro {
        font-size: 10rem;
        text-align: center;
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
        left: unset;
        padding: 0 30px;
    }
    
    #song-overlay {
        display: block;
        font-family: "futura-pt",sans-serif !important;
        text-transform: capitalize;
        font-size: 2.6rem;
        text-align: center;
        margin-top: 30px;
        font-weight: 500;
        left: unset;
        letter-spacing: 0;
    }
    
    #radio-player iframe {
        transform: scale(3.5);
    }
    
    .online {
        font-size: 2rem;
        min-height: 45px;
        position: unset; 
        padding: 0px;
        justify-content: flex-end;
        flex-grow: 1;
    }
    
    .control-wrapper {
        display: inline-flex;
        width: 154px;
        position: unset;
    }
    
    .container-fluid.info {
        position: absolute;
        bottom: 15px;
    }
    
    span#useronline-count {
        /* height: 43px;
        padding: 0;
        border-right: 0px; */
    }
    
    div#page-wrapper {
        padding: 30px;
        padding-top: 0px;
    }
    
    .page-id-99 p:first-of-type {
        margin-top: 120px;
    }
    
    p, ul li, a {
        font-size: 2rem;
    }
    
    form {
        margin-top: 20px;
    }
    
    .instagram, .privacy {
        margin-bottom: 30px !important;
    }

    .mobile-hide {
        display: none;
    }

    .save svg.spotify {
        margin-right: 0px;
    }
    
    span.useronline-count {
        border-right: 0px;
    }

}

@media only screen and (max-width: 500px) {

    .online {
        padding-top: 10px;
    }

    .control-wrapper {
        margin-top: 10px;
    }
    
}

@media only screen and (max-width: 375px) {

    .page-id-99 p:first-of-type {
        margin-top: 120px;
    }
    
    p, ul li, a, .form-control {
        font-size: 1.8rem;
    }
    
    .form-control {
        padding: 5px;
    }
    
    span#useronline-count, span.useronline-count {
        padding: 0 10px;
    }
    
    .save div.d-flex {
        padding: 0px;
    }
    
    .online div:last-of-type:not(.wpmwo_online_visitors):not(.button-background) {
        margin-left: 12px;
    }
    
    .menu .button:not(:last-of-type) a {
        margin-right: 10px;
    }
    
}

@media only screen and (max-width: 374px) {
    .online {
        display: none;
    }
    
    .online div:last-of-type:not(.wpmwo_online_visitors):not(.button-background) {
        font-size: 1.5rem;
    }
    
    .menu .button:last-of-type {
        display: none;
    }
    
    div#spotify {
        display: none !important;
    }
    
    .intro-tekst h1, h1.intro, h1.outro {
        font-size: 8rem;
    }
    
    .logo, .logo h1 {
        padding: 16px;
    }
    
    p, ul li, .form-control {
        font-size: 1.4rem;
    }

    .menu .button a {
        padding: 0px 10px;
    }
    .menu .button:not(:last-of-type) a {
        margin-right: 10px;
    }
}

@media only screen and (min-height: 800px) and (max-width: 375px) {
  #radio-player iframe {
        transform: scale(4);
    }  
}


/** BLOG **/
.page-template-articles div#page,
.single-post div#page {
    overflow-x: hidden;
    overflow-y: auto;
}

.page-template-articles h1 {
    padding-top: 160px;
    font-family: "futura-pt", sans-serif;
    font-weight: 300;
    margin-bottom: 60px;
    color: var(--orange-dark); 

}

.page-template-articles .articles-wrapper,
.page-template-articles .title-wrapper  {
    width: 50%;
    margin: auto;
}

.page-template-articles .articles-wrapper {
    padding-bottom: 120px;
}

.page-template-articles .articles-wrapper .article {
    padding: 30px 40px;
    margin-bottom:60px;
    border: 1px solid var(--orange-dark); 
}

.page-template-articles .articles-wrapper .article h2{
    font-family: "futura-pt", sans-serif;
    font-weight: 700;
    font-size: 3.4rem;
    line-height: 1.2;
    color: var(--orange-dark); 
}

.page-template-articles .articles-wrapper .article img{
    width: 100%;
    height: auto;
    margin-bottom: 30px;
}

.page-template-articles .articles-wrapper .article p{
    margin-bottom: 25px;
    color: var(--orange-dark); 
 }
 

.page-template-articles .articles-wrapper .article a{
   padding: 10px 20px;
   background-color: var(--orange-dark);
   color: var(--orange-light);
}

.single-post .article {
    width: 700px;
    max-width: 100%;
    margin: auto;
}

.single-post .article h1 {
    padding-top: 160px;
    font-family: "futura-pt", sans-serif;
    font-size: 3.7rem;
    font-weight: 700;
    margin-bottom: 30px;
    color: var(--black);  
    text-align: left; 
    line-height: 1.1;
    text-transform: unset;
}

.single-post .article img{
    width: 100%;
    height: auto;
}

.single-post .article figcaption{
   color: var(--black);
   font-size: 1.2rem;
   margin-top: 10px;
}

.single-post .article figure{
    margin-bottom: 20px;
 }
 
.single-post .article p {
    color: var(--black);
    font-size: 2.5rem;
}

.single-post .article p.detaills .author {
    font-weight: 700;
}

blockquote p{
    font-weight: 700;
    font-size: 3.7rem;
}

.single-post .buttonwrapper {
    width: 700px;
    max-width: unset;
    margin: auto;
    display: flex;
    justify-content: center;
    padding-top: 30px;
    padding-bottom: 120px;
}

.single-post .buttonwrapper a:last-of-type {
    margin-left: 15px;
}

@media only screen and (max-width: 1200px) {
    .page-template-articles .articles-wrapper,
    .page-template-articles .title-wrapper  {
        width: 70%;
    }

}

@media only screen and (max-width: 767px) {
    .page-template-articles .articles-wrapper,
    .page-template-articles .title-wrapper  {
        width: 80%;
    }

    /* .single-post .buttonwrapper {
        width: 80%;
    }

    .single-post .article {
        width: 80%;
    } */
}

@media only screen and (max-width: 500px) {
    .page-template-articles .articles-wrapper,
    .page-template-articles .title-wrapper  {
        width: 97%;
    }

    /* .single-post .buttonwrapper {
        width: 97%;
    }

    .single-post .article {
        width: 97%;
    } */
}


/** Blog - colors **/
.yellow.page-template-articles h1,
.yellow.page-template-articles .articles-wrapper .article h2,
.yellow.page-template-articles .articles-wrapper .article p {
    color: var(--yellow-dark); 
    transition: color 2s ease;
}

.yellow.page-template-articles .articles-wrapper .article {
    border: 1px solid var(--yellow-dark); 
        transition: border 2s ease;
}

.yellow.page-template-articles .articles-wrapper .article a{
    background-color: var(--yellow-dark);
    color: var(--yellow-light);
    transition: all 2s ease;

}

.orange.page-template-articles h1,
.orange.page-template-articles .articles-wrapper .article h2,
.orange.page-template-articles .articles-wrapper .article p {
    color: var(--orange-dark); 
    transition: color 2s ease;
}

.orange.page-template-articles .articles-wrapper .article {
    border: 1px solid var(--orange-dark); 
        transition: border 2s ease;
}

.orange.page-template-articles .articles-wrapper .article a{
    background-color: var(--orange-dark);
    color: var(--orange-light);
    transition: all 2s ease;

}

.red.page-template-articles h1,
.red.page-template-articles .articles-wrapper .article h2,
.red.page-template-articles .articles-wrapper .article p {
    color: var(--red-dark); 
    transition: color 2s ease;
}

.red.page-template-articles .articles-wrapper .article {
    border: 1px solid var(--red-dark); 
        transition: border 2s ease;
}

.red.page-template-articles .articles-wrapper .article a{
    background-color: var(--red-dark);
    color: var(--red-light);
    transition: all 2s ease;

}

.green.page-template-articles h1,
.green.page-template-articles .articles-wrapper .article h2,
.green.page-template-articles .articles-wrapper .article p {
    color: var(--green-dark); 
    transition: color 2s ease;
}

.green.page-template-articles .articles-wrapper .article {
    border: 1px solid var(--green-dark); 
        transition: border 2s ease;
}

.green.page-template-articles .articles-wrapper .article a{
    background-color: var(--green-dark);
    color: var(--green-light);
    transition: all 2s ease;

}

.blue.page-template-articles h1,
.blue.page-template-articles .articles-wrapper .article h2,
.blue.page-template-articles .articles-wrapper .article p {
    color: var(--blue-dark); 
    transition: color 2s ease;
}

.blue.page-template-articles .articles-wrapper .article {
    border: 1px solid var(--blue-dark); 
        transition: border 2s ease;
}

.blue.page-template-articles .articles-wrapper .article a{
    background-color: var(--blue-dark);
    color: var(--blue-light);
    transition: all 2s ease;

}

.purple.page-template-articles h1,
.purple.page-template-articles .articles-wrapper .article h2,
.purple.page-template-articles .articles-wrapper .article p {
    color: var(--purple-dark); 
    transition: color 2s ease;
}

.purple.page-template-articles .articles-wrapper .article {
    border: 1px solid var(--purple-dark); 
}

.purple.page-template-articles .articles-wrapper .article a{
    background-color: var(--purple-dark);
    color: var(--purple-light);
    transition: all 2s ease;
}



/** Dark borders **/

.page-template-articles {
    color: var(--orange-dark);
    transition: color 2s ease;
}

.page-template-articles .color-overlay, 
.page-template-articles .title, 
.page-template-articles .modal-body {
    background-color: var(--orange-dark);
    transition: background 2s ease;
}

.page-template-articles .borders, 
.page-template-articles .border-color {
    border-color: var(--orange-dark);
    transition: border 2s ease;
}

.page-template-articles .nav-link, 
.page-template-articles .nav-link:hover, 
.page-template-articles .online, 
.page-template-articles .title h2 {
    color: var(--orange-dark);
    transition: color 2s ease;
}

.page-template-articles .controls p svg g line {
    stroke: var(--orange-dark);
    transition: stroke 2s ease;
}

.page-template-articles svg.logo path, 
.page-template-articles .controls p svg path, 
.page-template-articles svg.insta path {
    fill: var(--orange-dark); 
    transition: fill 2s ease;
}

.single-post {
    color: var(--orange-dark);
    transition: color 2s ease;
} 

.single-post .button-background {
    border-color: var(--orange-dark) !important;
    transition: border-color 2s ease;
}

.single-post .color-overlay, 
.single-post .title {
    background-color: var(--orange-dark);
    transition: background 2s ease;
}

.single-post .modal-body {
    background-color: var(--orange-light);
    color: var(--orange-dark);
}

.single-post .close {
    color: var(--orange-dark);
}

.single-post .borders, 
.single-post .border-color {
    border-color: var(--orange-dark);
    transition: border 2s ease;
}

.single-post .nav-link, 
.single-post .nav-link:hover, 
.single-post .online, 
.single-post .title h2 {
    color: var(--orange-dark);
    transition: color 2s ease;
}

.single-post .controls p svg g line {
    stroke: var(--orange-dark);
    transition: stroke 2s ease;
}

.single-post svg.logo path, 
.single-post .controls p svg path, 
.single-post svg.insta path {
    fill: var(--orange-dark); 
    transition: fill 2s ease;
}

.page-template-articles.orange {
    color: var(--orange-dark);
    transition: color 2s ease;
}

.page-template-articles.orange .button-background {
    border-color: var(--orange-dark) !important;
    transition: border-color 2s ease;
}

.page-template-articles.orange .color-overlay, .page-template-articles.orange .title {
    background-color: var(--orange-dark);
    transition: background 2s ease;
}

.page-template-articles.orange .borders, .page-template-articles.orange .border-color {
    border-color: var(--orange-dark);
    transition: border 2s ease;
}

.page-template-articles.orange .nav-link, .page-template-articles.orange .nav-link:hover, .page-template-articles.orange .online, .page-template-articles.orange .title h2 {
    color: var(--orange-dark);
    transition: color 2s ease;
}

.page-template-articles.orange .controls p svg g line {
    stroke: var(--orange-dark);
    transition: stroke 2s ease;
}

.page-template-articles.orange svg.logo path, .page-template-articles.orange .controls p svg path, .page-template-articles.orange svg.insta path, .page-template-articles.orange svg.spotify path {
    fill: var(--orange-dark); 
    transition: fill 2s ease;
}

.page-template-articles.yellow {
    color: var(--yellow-dark);
    transition: color 2s ease;
}

.page-template-articles.yellow .button-background {
    border-color: var(--yellow-dark) !important;
    transition: border-color 2s ease;
}

.page-template-articles.yellow .color-overlay, .page-template-articles.yellow .title {
    background-color: var(--yellow-dark);
    transition: background 2s ease;
}

.page-template-articles.yellow .borders, .page-template-articles.yellow .border-color {
    border-color: var(--yellow-dark);
    transition: border 2s ease;
}

.page-template-articles.yellow .nav-link, .page-template-articles.yellow .nav-link:hover, .page-template-articles.yellow .online, .page-template-articles.yellow .title h2 {
    color: var(--yellow-dark);
    transition: color 2s ease;
}

.page-template-articles.yellow .controls p svg g line {
    stroke: var(--yellow-dark);
    transition: stroke 2s ease;
}

.page-template-articles.yellow svg.logo path, .page-template-articles.yellow .controls p svg path, .page-template-articles.yellow svg.insta path, .page-template-articles.yellow svg.spotify path {
    fill: var(--yellow-dark); 
    transition: fill 2s ease;
}

.page-template-articles.red {
    color: var(--red-dark);
    transition: color 2s ease;
}

.page-template-articles.red .button-background {
    border-color: var(--red-dark) !important;
    transition: border-color 2s ease;
}

.page-template-articles.red .color-overlay, .page-template-articles.red .title {
    background-color: var(--red-dark);
    transition: background 2s ease;
}

.page-template-articles.red .borders, .page-template-articles.red .border-color {
    border-color: var(--red-dark);
    transition: border 2s ease;
}

.page-template-articles.red .nav-link, .page-template-articles.red .nav-link:hover, .page-template-articles.red .online, .page-template-articles.red .title h2 {
    color: var(--red-dark);
    transition: color 2s ease;
}

.page-template-articles.red .controls p svg g line {
    stroke: var(--red-dark);
    transition: stroke 2s ease;
}

.page-template-articles.red svg.logo path, .page-template-articles.red .controls p svg path, .page-template-articles.red svg.insta path, .page-template-articles.red svg.spotify path {
    fill: var(--red-dark); 
    transition: fill 2s ease;
}

.page-template-articles.green {
    color: var(--green-dark);
    transition: color 2s ease;
}

.page-template-articles.green .button-background {
    border-color: var(--green-dark) !important;
    transition: border-color 2s ease;
}

.page-template-articles.green .color-overlay, .page-template-articles.green .title {
    background-color: var(--green-dark);
    transition: background 2s ease;
}

.page-template-articles.green .borders, .page-template-articles.green .border-color {
    border-color: var(--green-dark);
    transition: border 2s ease;
}

.page-template-articles.green .nav-link, .page-template-articles.green .nav-link:hover, .page-template-articles.green .online, .page-template-articles.green .title h2 {
    color: var(--green-dark);
    transition: color 2s ease;
}

.page-template-articles.green .controls p svg g line {
    stroke: var(--green-dark);
    transition: stroke 2s ease;
}

.page-template-articles.green svg.logo path, .page-template-articles.green .controls p svg path, .page-template-articles.green svg.insta path, .page-template-articles.green svg.spotify path {
    fill: var(--green-dark); 
    transition: fill 2s ease;
}

.page-template-articles.blue {
    color: var(--blue-dark);
    transition: color 2s ease;
}

.page-template-articles.blue .button-background {
    border-color: var(--blue-dark) !important;
    transition: border-color 2s ease;
}

.page-template-articles.blue .color-overlay, .page-template-articles.blue .title {
    background-color: var(--blue-dark);
    transition: background 2s ease;
}

.page-template-articles.blue .borders, .page-template-articles.blue .border-color {
    border-color: var(--blue-dark);
    transition: border 2s ease;
}

.page-template-articles.blue .nav-link, .page-template-articles.blue .nav-link:hover, .page-template-articles.blue .online, .page-template-articles.blue .title h2 {
    color: var(--blue-dark);
    transition: color 2s ease;
}

.page-template-articles.blue .controls p svg g line {
    stroke: var(--blue-dark);
    transition: stroke 2s ease;
}

.page-template-articles.blue svg.logo path, .page-template-articles.blue .controls p svg path, .page-template-articles.blue svg.insta path, .page-template-articles.blue svg.spotify path {
    fill: var(--blue-dark); 
    transition: fill 2s ease;
}

.page-template-articles.purple {
    color: var(--purple-dark);
    transition: color 2s ease;
}

.page-template-articles.purple .button-background {
    border-color: var(--purple-dark) !important;
    transition: border-color 2s ease;
}

.page-template-articles.purple .color-overlay, .page-template-articles.purple .title {
    background-color: var(--purple-dark);
    transition: background 2s ease;
}

.page-template-articles.purple .borders, .page-template-articles.purple .border-color {
    border-color: var(--purple-dark);
    transition: border 2s ease;
}

.page-template-articles.purple .nav-link, .page-template-articles.purple .nav-link:hover, .page-template-articles.purple .online, .page-template-articles.purple .title h2 {
    color: var(--purple-dark);
    transition: color 2s ease;
}

.page-template-articles.purple .controls p svg g line {
    stroke: var(--purple-dark);
    transition: stroke 2s ease;
}

.page-template-articles.purple svg.logo path, .page-template-articles.purple .controls p svg path, .page-template-articles.purple svg.insta path, .page-template-articles.purple svg.spotify path {
    fill: var(--purple-dark); 
    transition: fill 2s ease;
}

/** dingle **/
.single-post.orange .button-background {
    border-color: var(--orange-dark) !important;
    transition: border-color 2s ease;
}

.single-post.orange .color-overlay, .single-post.orange .title {
    background-color: var(--orange-dark);
    transition: background 2s ease;
}

.single-post.orange .borders, .single-post.orange .border-color {
    border-color: var(--orange-dark);
    transition: border 2s ease;
}

.single-post.orange .nav-link, .single-post.orange .nav-link:hover, .single-post.orange .online, .single-post.orange .title h2 {
    color: var(--orange-dark);
    transition: color 2s ease;
}

.single-post.orange .controls p svg g line {
    stroke: var(--orange-dark);
    transition: stroke 2s ease;
}

.single-post.orange svg.logo path, .single-post.orange .controls p svg path, .single-post.orange svg.insta path, .single-post.orange svg.spotify path {
    fill: var(--orange-dark); 
    transition: fill 2s ease;
}

.single-post.yellow {
    color: var(--yellow-dark);
    transition: color 2s ease;
}

.single-post.yellow .button-background {
    border-color: var(--yellow-dark) !important;
    transition: border-color 2s ease;
}

.single-post.yellow .color-overlay, .single-post.yellow .title {
    background-color: var(--yellow-dark);
    transition: background 2s ease;
}

.single-post.yellow .borders, .single-post.yellow .border-color {
    border-color: var(--yellow-dark);
    transition: border 2s ease;
}

.single-post.yellow .nav-link, .single-post.yellow .nav-link:hover, .single-post.yellow .online, .single-post.yellow .title h2 {
    color: var(--yellow-dark);
    transition: color 2s ease;
}

.single-post.yellow .controls p svg g line {
    stroke: var(--yellow-dark);
    transition: stroke 2s ease;
}

.single-post.yellow svg.logo path, .single-post.yellow .controls p svg path, .single-post.yellow svg.insta path, .single-post.yellow svg.spotify path {
    fill: var(--yellow-dark); 
    transition: fill 2s ease;
}

.single-post.red {
    color: var(--red-dark);
    transition: color 2s ease;
}

.single-post.red .button-background {
    border-color: var(--red-dark) !important;
    transition: border-color 2s ease;
}

.single-post.red .color-overlay, .single-post.red .title {
    background-color: var(--red-dark);
    transition: background 2s ease;
}

.single-post.red .borders, .single-post.red .border-color {
    border-color: var(--red-dark);
    transition: border 2s ease;
}

.single-post.red .nav-link, .single-post.red .nav-link:hover, .single-post.red .online, .single-post.red .title h2 {
    color: var(--red-dark);
    transition: color 2s ease;
}

.single-post.red .controls p svg g line {
    stroke: var(--red-dark);
    transition: stroke 2s ease;
}

.single-post.red svg.logo path, .single-post.red .controls p svg path, .single-post.red svg.insta path, .single-post.red svg.spotify path {
    fill: var(--red-dark); 
    transition: fill 2s ease;
}

.single-post.green {
    color: var(--green-dark);
    transition: color 2s ease;
}

.single-post.green .button-background {
    border-color: var(--green-dark) !important;
    transition: border-color 2s ease;
}

.single-post.green .color-overlay, .single-post.green .title {
    background-color: var(--green-dark);
    transition: background 2s ease;
}

.single-post.green .borders, .single-post.green .border-color {
    border-color: var(--green-dark);
    transition: border 2s ease;
}

.single-post.green .nav-link, .single-post.green .nav-link:hover, .single-post.green .online, .single-post.green .title h2 {
    color: var(--green-dark);
    transition: color 2s ease;
}

.single-post.green .controls p svg g line {
    stroke: var(--green-dark);
    transition: stroke 2s ease;
}

.single-post.green svg.logo path, .single-post.green .controls p svg path, .single-post.green svg.insta path, .single-post.green svg.spotify path {
    fill: var(--green-dark); 
    transition: fill 2s ease;
}

.single-post.blue {
    color: var(--blue-dark);
    transition: color 2s ease;
}

.single-post.blue .button-background {
    border-color: var(--blue-dark) !important;
    transition: border-color 2s ease;
}

.single-post.blue .color-overlay, .single-post.blue .title {
    background-color: var(--blue-dark);
    transition: background 2s ease;
}

.single-post.blue .borders, .single-post.blue .border-color {
    border-color: var(--blue-dark);
    transition: border 2s ease;
}

.single-post.blue .nav-link, .single-post.blue .nav-link:hover, .single-post.blue .online, .single-post.blue .title h2 {
    color: var(--blue-dark);
    transition: color 2s ease;
}

.single-post.blue .controls p svg g line {
    stroke: var(--blue-dark);
    transition: stroke 2s ease;
}

.single-post.blue svg.logo path, .single-post.blue .controls p svg path, .single-post.blue svg.insta path, .single-post.blue svg.spotify path {
    fill: var(--blue-dark); 
    transition: fill 2s ease;
}

.single-post.purple {
    color: var(--purple-dark);
    transition: color 2s ease;
}

.single-post.purple .button-background {
    border-color: var(--purple-dark) !important;
    transition: border-color 2s ease;
}

.single-post.purple .color-overlay, .single-post.purple .title {
    background-color: var(--purple-dark);
    transition: background 2s ease;
}

.single-post.purple .borders, .single-post.purple .border-color {
    border-color: var(--purple-dark);
    transition: border 2s ease;
}

.single-post.purple .nav-link, .single-post.purple .nav-link:hover, .single-post.purple .online, .single-post.purple .title h2 {
    color: var(--purple-dark);
    transition: color 2s ease;
}

.single-post.purple .controls p svg g line {
    stroke: var(--purple-dark);
    transition: stroke 2s ease;
}

.single-post.purple svg.logo path, .single-post.purple .controls p svg path, .single-post.purple svg.insta path, .single-post.purple svg.spotify path {
    fill: var(--purple-dark); 
    transition: fill 2s ease;
}

/**/

.home a {
    color: var(--orange-light);
    transition: color 2s ease;
}

.home.yellow a {
    color: var(--yellow-light);
    transition: color 2s ease;
}

.home.red a {
    color: var(--red-light);
    transition: color 2s ease;
}

.home.green a {
    color: var(--green-light);
    transition: color 2s ease;
}

.home.blue a {
    color: var(--blue-light);
    transition: color 2s ease;
}

.home.orange a {
    color: var(--orange-light);
    transition: color 2s ease;
}

.home.purple a {
    color: var(--purple-light);
    transition: color 2s ease;
}

.page-id-99 a,
.page-template-articles a,
.single-post a {
    color: var(--orange-dark);
    transition: color 2s ease;
}

.page-id-99.yellow a, 
.page-template-articles.yellow a,
.single-post.yellow a {
    color: var(--yellow-dark);
    transition: color 2s ease;
}

.page-id-99.red a, 
.page-template-articles.red a,
.single-post.red a {
    color: var(--red-dark);
    transition: color 2s ease;
}
.page-id-99.green a, 
.page-template-articles.green a,
.single-post.green a {
    color: var(--green-dark);
    transition: color 2s ease;
}
.page-id-99.blue a, 
.page-template-articles.blue a,
.single-post.blue a {
    color: var(--blue-dark);
    transition: color 2s ease;
}
.page-id-99.orange a, 
.page-template-articles.orange a,
.single-post.orange a {
    color: var(--orange-dark);
    transition: color 2s ease;
}

.page-id-99.purple a, 
.page-template-articles.purple a,
.single-post.purple a {
    color: var(--purple-dark);
    transition: color 2s ease;
}

.single-post .buttonwrapper a {
    padding: 10px 20px;
    background-color: var(--orange-dark);
    color: var(--orange-light);
    transition: all 2s ease;
}

.single-post.orange .buttonwrapper a {
    background-color: var(--orange-dark);
    color: var(--orange-light);
    transition: all 2s ease;
}

.single-post.yellow .buttonwrapper a {
    background-color: var(--yellow-dark);
    color: var(--yellow-light);
    transition: all 2s ease;
}

.single-post.blue .buttonwrapper a {
    background-color: var(--blue-dark);
    color: var(--blue-light);
    transition: all 2s ease;
}

.single-post.red .buttonwrapper a {
    background-color: var(--red-dark);
    color: var(--red-light);
    transition: all 2s ease;
}

.single-post.purple .buttonwrapper a {
    background-color: var(--purple-dark);
    color: var(--purple-light);
    transition: all 2s ease;
}

.single-post.green .buttonwrapper a {
    background-color: var(--green-dark);
    color: var(--green-light);
    transition: all 2s ease;
}