Sitemap

 

Main colors
   bg-primary
   bg-primary-light
   bg-primary-dark
   bg-secondary
   bg-secondary-dark
Template sections
   body
   top-header
   header
   content
Footer Styles
   background
   text color
   link color
   horizontal line
Buttons
   style 1
   style 2
   style 3
   text color
Other elements
  social icons
  navigation color
  subnav background
Mobile navigation
   background color
   navigation color
Template configurations
 
has-right-nav g-font tertiary-font
 
Navigation styles
 
size-15 weight-400 snip-nav tertiary-font color-line --line02
 
Content styles
 
form-white
 
Footer styles
 
o-form color-white

 

Typography

Heading H1
primary-font weight-600
 
Heading H2
primary-font
 
Heading H3
primary-font weight-600
 
Buttons
tertiary-font
 
 
Advanced settings
 
Animations
 
 
Custom CSS

/* buttons */

.button_container {

position: fixed;

top: 10px;

right: 5px;

height: 30px;

width: 65px;

cursor: pointer;

z-index:1999999;

-webkit-transition: opacity .25s ease;

transition: opacity .25s ease;

}

.button_container.active {

background-color: none;

height: 38px;

}

.button_container:hover {

opacity: .7;

}

.button_container.active .top {

-webkit-transform: translateY(9px) translateX(0) rotate(45deg);

transform: translateY(9px) translateX(0) rotate(45deg);

background: #fff;

top: 9px;

width: 40px;

}

.button_container.active .middle {

opacity: 0;

background: #fff;

}

.button_container.active .bottom {

-webkit-transform: translateY(-9px) translateX(0) rotate(-45deg);

transform: translateY(-9px) translateX(0) rotate(-45deg);

background: #fff;

top: 27px;

width:40px;

}

.button_container span {

background: #000;

border: none;

height: 2px;

width: 40px;

position: absolute;

top: 8px;

left: 5px;

-webkit-transition: all .35s ease;

transition: all .35s ease;

cursor: pointer;

}

.button_container span:nth-of-type(2) {

top: 15px;

display:none;

}

.button_container span:nth-of-type(3) {

top: 20px;

}

 

/* overlay menu */

.overlay {

position: fixed;

z-index:1999998;

background: #000;

top: 0;

left: 0;

width: 100%;

height: 100%;

opacity: 0;

visibility: hidden;

-webkit-transition: opacity .35s,visibility .35s,height .35s;

transition: opacity .35s,visibility .35s,height .35s;

overflow-x:none;

overflow-y:auto;

}

.overlay.open {

opacity: .98;

visibility: visible;

height: 100%;

}

#cc-inner .my-class {

background: #000;

}

.jmd-nav .jmd-nav__toggle-button {

background-color: rgba(249, 244, 244, 0);

}

#cc-inner .jmd-nav .jmd-nav__toggle-button {

width: 55px;

height: 55px;

}

/*** list styles ***/

ul.m-quote,.has-quote-list .j-text ul,

ul.m-play,.has-play-list .j-text ul,

ul.m-check,

.has-check-list .j-text ul,

.has-check-list-2 .j-text ul,

.has-check-list-3 .j-text ul,

.has-check-list-4 .j-text ul,

.has-check-list-5 .j-text ul {

list-style:none;

padding-left:1em;

overflow:visible;

}

ul.m-check,

ul.m-timeline,

ul.m-timeline2,

ul.m-check li,.has-check-list .j-text ul,.has-timeline-list .j-text ul,

.has-check-list-2 .j-text ul,.has-check-list-3 .j-text ul,.has-check-list-4 .j-text ul,.has-check-list-5 .j-text ul   {

padding:5px!important;

margin:0!important;

right:0!important;

}

ul.m-check li:before,.has-check-list .j-text ul li:before {

content: "\f00c";

font-family: FontAwesome;

font-size:inherit;

left: 0;

margin: 0 5px 0 -28px;

color: #7f735b;

}

/* --------------------------------- /

MEDIA QUERIES - UPDATE 2026

/ --------------------------------- */

/*** Tablet Layout 768px ***/

@media only screen and (min-width: 746px) and (max-width: 1023px) {

/* Typography */

.g-font h1 {font-size:150%}

.g-font h2 {font-size:120%}

.g-font h3 {font-size:120%}

.g-font h4 {font-size:130%}

.g-font p {font-size:85%}

.g-font .hs-button {font-size:85%;}

}

/*** Wide Mobile Layout: 480px ***/

@media only screen and (min-width: 460px) and (max-width: 745px) {

/* Typography */

#hs-container,#hs-container p{font-size:20px;}

#hs-container h1{font-size:35px;}

#hs-container h2{font-size:25px;}

#hs-container h3{font-size:25px;}

#hs-container h4{font-size:20px; letter-spacing:0px;}

#hs-container p,#hs-container table,#hs-container td,#hs-container h1,#hs-container h2,#hs-container h3,.cc-page .slicknav_nav a,#contentfooter {-webkit-text-size-adjust:

none;}

}

/*** Mobile Layout: 320px ***/

@media only screen and (min-width: 290px) and (max-width: 459px) {

/* Typography */

#hs-container,#hs-container p{font-size:20px;}

.g-font .hs-button {font-size:85%;}

#hs-container h1{font-size:35px;}

#hs-container h2{font-size:25px;}

#hs-container h3{font-size:25px;}

#hs-container h4{font-size:20px; letter-spacing:0px;}

#hs-container p,#hs-container table,#hs-container td,#hs-container h1,#hs-container h2,#hs-container h3,.cc-page .slicknav_nav a,#contentfooter {-webkit-text-size-adjust:

none;}

}

.m-padding-large-top {

padding-top: 150px !important;

padding-bottom: 30px !important;

}

/* MATRIX-GLOBAL-SETTINGS-START */

:root {

--content-width: 1170px;

--special-pages-content-width: 900px;

}

#cc-inner #hs-container .j-formnew input[type='submit'],

#cc-inner #hs-container input.submitUser,

#cc-inner .hs-button,

#cc-inner .j-calltoaction-link,

#cc-inner input.cc-checkout-btn,

#cc-inner a.cc-shop-addtocard {

padding: 10px 15px !important;

}

/* MATRIX-GLOBAL-SETTINGS-END */


Note: All changes made here will be applied to your entire website.
Stiftung Rudolf von Tavel
draggable-logo