:root {
    --key:#222;
    --bluekey:#006090;
    --bluelight:#0da8dc;
    --bluelightlight:rgba(13, 168, 220, 0.91);
    --orange:#fa9b00;
    --visited:#8e87a4;
    --neutral:#cec9de;
    --veryneutral:#e8e3f7;
    --highlight:#fff3d4;
}
 


/*own font*/
@font-face {
    font-family:'Unikorn';
    font-weight: normal;
    font-style: normal;
    src: url('https://files.cargocollective.com/c354924/Vollkorn_DEMO.ttf');
}

body {
	background-color: transparent;
	color:				var(--key);
    font-family:	  Karla, Icons;
	font-style: 		normal;
	font-weight: 		300;
}

a:active 
	{opacity: 1;}
a
	{color: var(--key)}

i	
	{font-style: italic;}

b,strong 
	{font-weight: bold;}

sub,sup {
	position: relative;
	vertical-align: baseline;
}

sub 
	{top: 0.3em;}

sup 
	{top: -0.4em;}

img {
	border: 0;
	padding: 0;
}
/* OUT?    
.pinned {
    position:static !important
}*/

.pinned_top {
    padding:0px;
}

ul,
ol {
	margin: 0;
	padding: 0 0 0 1em;
}

blockquote {
	margin: 0;
	padding: 0 0 0 2em;
}

/*line after entry*/

hr {
	background:    var(--bluelight);
    height:        1px;
    border:        0px;
    margin-top:    1em;
   	margin-bottom: 0em;
}

hr.top {
	background:    var(--bluelight);
    height:        1px;
    border:        0px;
    margin-top:    10em;
   	margin-bottom: 1em;
}

.mobile hr.top {
    margin-top:    4em;

}

hr.top_landing {
	background:    var(--bluelight);
    height:        1px;
    border:        0px;
    margin-top:    2em;
   	margin-bottom: 1em;
}


.content img {
	float: none;
	margin-bottom: auto;
}

.gallery_image_caption {
    font-size:     8.5px;
	font-weight:   400;
	font-family: "Routed Gothic Wide", Icons;
	font-style:    normal;
    color:         var(--key);
    text-align:    center;
    margin-top:    0.4em;
    margin-bottom: 0.4em;
}

.mobile .gallery_image_caption {
    font-size:     2.2vw;
    margin-top:    1vw;
    margin-bottom: 1vw;
}

/* Loading Animation */

.loading[data-loading] {
	position: fixed;
	bottom:   8px; 
    left:     8px;
}

/* Editor Styles */

[data-predefined-style="true"] bodycopy {
	font-size:   18px;
	font-family: Karla, Icons;
	font-style:  normal;
	font-weight: 300;
    line-height: 1; 
    text-align: left;
    color:       var(--key);
}

[data-predefined-style="true"] bodycopy a {
}

[data-predefined-style="true"] bodycopy a:hover {
}

bodycopy a.image-link,
bodycopy a.icon-link,
bodycopy a.image-link:hover,
bodycopy a.icon-link:hover {
	border-bottom:  0;
	padding-bottom: 0;
}
	
/*
  FONTS
  h1 	 WEBSITE HEADER
  h2 	 POST TITLES
  h3 	 BROWSE MORE
  hello	 WELCOME TEXT
  knopf	 BUTTON
  small  TAGS & SUBHEAD
  quoted FROGMAN
*/

.card {
	text-align: left;
    margin-top: 30px;
    margin-bottom: 40px;


}


[data-predefined-style="true"] h1 {
	font-family:  "Routed Gothic Wide", Icons;
    font-size:      35px;
    font-style:     normal;
	font-weight:    400;
	line-height:    14px;
    letter-spacing:-0.5px;
    color:          var(--bluekey);
    padding:        0;
	margin:         27px 0 0 0;
	}

[data-predefined-style="true"] h1 a {
    text-decoration: none;
    color:          var(--bluekey);
}

[data-predefined-style="true"] .mobile h1  {


    font-size:        5vw;
    line-height:      5vw;
    
    letter-spacing:  -0.5px;
    text-align:       left;
    color:            var(--bluekey);
    
    padding:          0 0 0 0;
	margin:           0 0 0 0;

	}
[data-predefined-style="true"] h2 {
	font-family: DINosaur, Icons;
	font-style: normal;
	font-weight: 700;
	padding: 0;
	margin: 0;
    margin-bottom: 6px;
    color: var(--key);
    font-size: 18px;
	line-height: 18px;
    letter-spacing: 0.04em;
    text-transform: uppercase; 
	}
[data-predefined-style="true"] error {
	font-size:          11px;
	font-family:     "Routed Gothic Wide",Icons;
	font-style:         normal;
	font-weight:        400;
    display:            inline;
    color:              white;
}
    
[data-predefined-style="true"] h2 a {
}

[data-predefined-style="true"] .mobile h2  {
    font-size: 16px;
    line-height: 16px;
}

[data-predefined-style="true"] h3 {
	font-family:  DINosaur, Icons;
    font-size:      20px;
	font-style:     normal;
	font-weight:    700;
    
    line-height:    1;
    letter-spacing: 0.1rem;
    text-transform: uppercase; 
    text-align: center;
    
	padding:        0;
	margin:         0;
    color:          var(--bluelight);
}

[data-predefined-style="true"] h3 a {    color: #fff;
}

[data-predefined-style="true"] .mobile h3  {
;
	font-size:       4.5vw;
    text-align:      center;
    padding-bottom:  .3em;
}

[data-predefined-style="true"] hello {
	font-family: "Routed Gothic Wide", Icons;
    font-size:      1.2vw;
	font-style:     normal;
	font-weight:    400;
    
    line-height:    1;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    
	padding:        0;
	margin:         0;
    text-align:     center !important;
    color:          var(--bluelight);
}

[data-predefined-style="true"] hello a {    
    color:     var(--bluelight);
}


[data-predefined-style="true"] .mobile hello{
;
	font-size:       2.5vh;
	line-height:     2.5;
    text-align:      left !important;
}

[data-predefined-style="true"] knopf {
	font-family: "Routed Gothic Wide", Icons;
    font-size:      1.6rem;
	font-style:     normal;
	font-weight:    400;
    
    line-height:    1;
    text-transform: uppercase;
    
	padding:        0;
	margin:         0;
    text-align:     center !important;
    color:          transparent;
}

[data-predefined-style="true"] knopf a {    
    color:     var(--bluelight);
}

[data-predefined-style="true"] .mobile knopf{
;
	font-size:       2.5vh;
	line-height:     2.5;
    text-align:      left !important;
}
[data-predefined-style="true"] small {
	font-size:          11px;
	font-family:     "Routed Gothic Wide",Icons;
	font-style:         normal;
	font-weight:        400;
    display:            inline;
    color:              var(--key); 
    
}

/*[data-predefined-style="true"] .mobile small {
	font-family:     "Routed Gothic",Icons;
    
}*/

[data-predefined-style="true"] small a {
    color:            var(--bluelight);
    text-decoration:  none;
}

[data-predefined-style="true"] quoted {
	font-family:   "Routed Gothic Wide", Icons;
	font-style:      normal;
	font-weight:     400;
    margin-left:     30px;

    color:           var(--key);
    font-size:       .9em;
	line-height:     1.2;
    letter-spacing:  0.04em;
    display: block;
	}
[data-predefined-style="true"] quoted a {
}

[data-predefined-style="true"] .mobile quoted  {
    font-size: 10px;
    margin-left: 6px;
    line-height: 1.4;

}

/* Breakpoints */


[data-css-preset] .main_container {
        margin-top: 0px;
}

.mobile .main_container {
    margin-bottom: 40px;
    padding-left: 8px;
    padding-right: 8px; 
}


[data-css-preset] .page {
    background-color: initial /*!page_bgcolor*/;
}

.mobile .page,
[data-css-preset].mobile .page {
	position: relative;
	min-height: 40px;
    padding: 0 3px 0 3px;
	width: 100%;
	background-color: transparent /*!page_bgcolor*/;
}

[data-css-preset] .container {
	margin-left:      120px; /*!content_center*/;
	margin-right:     auto /*!content_center*/;
    margin-top:       20px;
    background-color: rgba(255, 255, 255, 0);
    text-align:       center /*!text_right*/;
    max-width:        1000px;
    
}

[data-css-preset] .mobile .container  {
margin-left: auto /*!content_center*/;
}
	

[data-css-preset] body {
	background-color: rgb(255, 255, 255)/*!body_bgcolor*/;
}

[data-css-preset] .container_width {
	width: 60%/*!content_center*/;
}
	

[data-css-preset] .content_padding {
	padding-top: 0px /*!main_margin*/;
	padding-bottom: 0px /*!main_margin*/;
	padding-left: 15px /*!main_margin*/;
	padding-right:  15px /*!main_margin*/;
    
}
[data-css-preset] .mobile .content_padding  {
	padding-top: 20px /*!main_margin*/;
	padding-bottom: 10px /*!main_margin*/;
	padding-left: 130px /*!main_margin*/;
	padding-right:  30px /*!main_margin*/;
    
}

[data-css-preset] text-limit {
	display: inline-block /*!text_width*/;
	max-width: 66rem/*!text_width*/;
}

/*Thumbnails*/

div[thumbnails] {
    margin-left:  		5px !important;
    margin-right:		5px !important;
    justify-content:	space-around;
    background-color: #fff;
}

[data-css-preset] .thumbnails {
   	background-color: 	transparent/*!thumbnails_bgcolor*/; 
}

[data-css-preset] .thumbnails_width {
    width: 				100%/*!thumbnails_width*/;
    padding-bottom: 	160px;



}

body.mobile  .thumbnails_width {
    padding-top:		8px;
    padding-bottom: 	160px;
}
[data-css-preset] [thumbnails-pad] {
    padding: 			1.2rem/*!thumbnails_padding*/;
}

[data-css-preset] [thumbnails-gutter] {
    margin: 			0/*!thumbnails_ng*/;
}

[data-css-preset] [responsive-layout] [thumbnails-pad] {
    padding: 			0.15rem/*!responsive_thumbnails_padding*/;
    padding-bottom: 	2rem;
   }

[data-css-preset] [responsive-layout] [thumbnails-gutter]{
    margin: 			auto;
    /*!responsive_thumbnails_padding*/ 
}

.thumbnails .thumb_image {
	outline: 			2px none rgba(183, 55, 55, 0);
    outline-offset: 	0px;



}

.thumbnails .title {
    margin-top: 		0.9em;
    margin-bottom: 		0.3em;
    font-size: 			1.4em;
	font-weight: 		400;
	color:				var(--key);
	font-family:	 "Routed Gothic", Icons;
	font-style: 		normal;
	line-height: 		1.1em;
    text-align: 		center /*!text_left*/; 
    text-transform: 	uppercase;
}

 .mobile .thumbnails .title {

    font-size: 			13px;
    line-height: 		1.4rem;

}

.thumbnails .tags {
    margin-top: 		1.2rem;
    margin-bottom: 		0.5rem;
    font-size: 			10px;
	font-weight: 		400;
	color:				white;
	font-family: 	  Karla, Icons;
	font-style:			normal;
	line-height: 		1.2;
    text-align: 		center /*!text_left*/;
}

.mobile .thumbnails .tags {
}

.mobile .thumbnails .tags a {
    font-size: 			10px;
}
.thumbnails .tags a {
	border-bottom:   0;
    color:           var(--bluelight);
    text-decoration: none;
    cursor:          pointer;
}

.thumbnails .has_title .tags {
	margin-top: .5rem;
}

/* Site Menu Button*/

[data-css-preset] #site_menu_button {
    color:       rgba(255, 255, 255, 0.75);
    background:  rgba(255, 255, 255, 0);
    font-size:     28px /*!site_menu_button*/;
    line-height:   1;
    position:      fixed;
    padding:       0px;
}

body.mobile #site_menu_button {
  
}

#site_menu_button.custom_icon {
	width:   65px;
    top:     20px;
    left:    40px;
    z-index: 10!important;
    
}

body.mobile #site_menu_button.custom_icon {
	width:       55px;
    top:         4.5px !important/*!site_menu_button*/;
	left:        2px !important/*!site_menu_button*/;
    /*padding:     0.9rem!ausgleich zum cargo-internen padding*/;
}


#site_menu_button.active .custom_icon {
    z-index:     100!important;
}

/* Site Menu */

#site_menu {
	font-family:	  DINosaur, Icons;
	background:		   	var(--neutral);
	font-size: 		   	18px;
	font-style: 		normal;
	font-weight: 		400;
	padding: 			20px;

    margin-top:			82px;
    margin-left:		82px;
    margin-bottom:		90px;
    border-radius: 		0 5px 5px 5px;
	min-width: 			595px;
    box-shadow: 0px 4px 0px -0.1px  var(--visited);
    /*
    border-color:		var(--bluekey);
    border-width: 		1px;
    border-style: 		solid;
    */

}

body.mobile #site_menu {
    margin:         0px;

    padding: 		20px;
	width: 			auto;
    font-size:		18px;
    border-radius:	0;
}

#site_menu .page-link a {
  color:			var(--bluekey);
   
}

#site_menu .set-link > a {
	color:			 white;
    font-weight:     bold;
    font-weight:     bold;
    margin-top:      0.1em;
    margin-bottom:   0.1em;

}

#site_menu a:active {
	  color:		#fff;
}

#site_menu a.active {
	color:			white;
}

#site_menu .close {
	color:		  rgba(255, 255, 255, 1);
   	font-size: 		60px;
    font-weight:	bold;
	line-height:	0.85em;
    
    position:		fixed;
    margin: 	    80px 500px 0 0;
    margin-left:	625px;
    left:           0px;
}

body.mobile #site_menu .close {
    text-align:		right;
    padding: 		0px 5px 0 0;
    margin: 		0 0 0 0;
}

#site_menu .break {
 	height: 		6px;
}


#site_menu .indent {
	margin-left:   26px;
    margin-right:  15px;
    margin-bottom: 10px;
}
body.mobile #site_menu .indent  {
	margin-left:   8px;
    margin-right:  8px;
}

/* Shop Button */

[data-css-preset] #shop_button {
	color: rgba(0, 0, 0, 0.85);
    background: transparent;
	font-size: 32px;
    font-style: normal;
	font-weight: 400;
    line-height: 1;
    position: fixed;
	padding: 6px;
	top: 2rem /*!shop_button*/;
	right: 2rem /*!shop_button*/;
}

#shop_button.text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	font-size: 2rem;
    padding: 0;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.85);
}

#shop_button.custom_icon {
	width: 40px;
    height: auto;
}

body.mobile #shop_button:not(.text) {
	margin: -6px;
    font-size: 36px;
}

/* Shop Product Widget */

.shop_product {
    width: 100%;
	max-width: 22rem;
    position: relative;
    display: block;
}

.shop_product .price {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	font-size: 2rem;
	line-height: 1;
	color: rgba(0, 0, 0, 0.85);
    display: block;
    margin-bottom: 1rem;
}

.shop_product .dropdown {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
    font-size: 1.4rem;
    display: inline-block;
	width: 100%;
    border: 1px solid rgba(0,0,0,.2);
    background:  white url(https://static.cargo.site/assets/images/select-arrows.svg) no-repeat right;
    margin-bottom: 1rem;
    line-height: 1.2;
    padding: .7rem 1rem;
}

.shop_product .button {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	font-size: 1.4rem;
    background: rgba(0, 0, 0, 0.7);
    color: rgba(255,255,255,1);
    flex: 0 0 50%;
    text-align: left;
    display: inline-block;
	line-height: 1;
    padding: .8rem 1rem .9rem;
}

/* Image Zoom */

.content img.image-zoom:active {
  opacity: .7;
}

/**
 * Quick View
 */

[data-css-preset] .quick-view {
    padding-top: 2.5rem /*!quick_view_padding*/;
    padding-bottom: 5rem /*!quick_view_padding*/;
    padding-left: 2.5rem /*!quick_view_padding*/;
    padding-right: 2.5rem /*!quick_view_padding*/;
    height: 100% /*!quick_view_height*/;
    width: 99%/*!quick_view_width*/;
}

body.mobile .quick-view {
    width: 100%;
    height: 100%;
    margin: 0;
}


[data-css-preset] .quick-view-background {
	background: rgba(255, 255, 255, 1) /*!quick_view_bgcolor*/;
}

.quick-view-caption {
    font-family: "Routed Gothic Wide", Icons;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 2rem 0;
    text-align: center;
    font-size: 1.1rem;
	font-style: normal;
	font-weight: 400;
}

.mobile .quick-view-caption {
    font-size: 11px;

}

.quick-view-caption span {
    padding: 0.5rem 1rem;
    display: inline-block;
    background: transparent;
   	color: var(--key)
}


/* Image Zoom Navigation Arrows */

.quick-view-navigation .left-arrow,
.quick-view-navigation .right-arrow {
    /* Change height/width together to scale */
    height: 36px;
    width: 36px;
}

.quick-view-navigation .left-arrow .inner-color,
.quick-view-navigation .right-arrow .inner-color {
    stroke:  var(--key);
    stroke-width: 1.3px;
}

.quick-view-navigation .left-arrow .outer-color,
.quick-view-navigation .right-arrow .outer-color {
    stroke: #808080;
    stroke-width: 2.5px;
    opacity: 0.0;
}

.quick-view-navigation .close-button {  
    top: 10px;
    right: 10px;
    /* Change height/width together to scale */
    width: 36px;
    height: 36px;
}

.quick-view-navigation .close-button .inner-color {
    stroke: #808080;
    stroke-width: 1.5px;
}

.quick-view-navigation .close-button .outer-color {
    stroke: #000;
    stroke-width: 2.5px;
    opacity: 0.0;
}

/* Image Gallery Navigation Arrows */
 
.image-gallery-navigation .left-arrow,
.image-gallery-navigation .right-arrow {
    /* Change height/width together to scale */
    height: 32px;
    width: 32px;
}

.image-gallery-navigation .left-arrow .inner-color,
.image-gallery-navigation .right-arrow .inner-color {
    stroke: #808080;
    stroke-width: 1.5px;
}

.image-gallery-navigation .left-arrow .outer-color,
.image-gallery-navigation .right-arrow .outer-color {
    stroke: #000;
    stroke-width: 2.5px;
    opacity: 0.0;
}

/**
 * Wallpaper Backdrop Navigation Arrows 
 */

.wallpaper-navigation .left-arrow,
.wallpaper-navigation .right-arrow {
   /* Change height/width together to scale */
   width: 36px;
   height: 36px;
}

.wallpaper-navigation .left-arrow .inner-color,
.wallpaper-navigation .right-arrow .inner-color {
   stroke: #fff;
    stroke-width: 1.5px;
}

.wallpaper-navigation .left-arrow .outer-color,
.wallpaper-navigation .right-arrow .outer-color {
    stroke: #000;
    stroke-width: 2.5px;
    opacity: 0.6;
}


/* Feed */

.feed .content_container .page {
    border-top: 0px dashed rgba(0, 0, 0, 0.2);
}

.feed .content_container .page_container:first-child .page {
	border-top: 0;
}



/* Audio Player */

.audio-player {
    max-width: 36rem;
    height: 3.3rem;
    outline: 1px solid rgba(0,0,0,0.15);
    color: rgba(0, 0, 0, 0.6);
    background: #fff;
    font-size: 1.2rem;
    line-height: 1.3;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
    font-style: normal;
    font-weight: 400;
    text-align: left;
    margin: 1px 1px 1em 1px;
}

body.mobile .audio-player {
    max-width: 100%;
}

.audio-player .separator {
    width: 1px;
    background-color: rgba(0,0,0,0.15);
}

.audio-player .button {
    background: transparent;
    cursor: pointer;
    fill: rgba(0, 0, 0, 0.85);
}

.audio-player .icon {
    fill: rgba(0, 0, 0, 0.85);
    padding: 30%;
    width: 100%;
    margin: auto;
}

.audio-player .buffer {
    background: rgba(0,0,0,0.03);
}

.audio-player .progress {
    background: rgba(0,0,0,0.1);
}

.audio-player .progress-indicator {
    border: 1px solid rgba(0, 0, 0, 0.7);
    width: 1px;
    height: 100%;
    right: 0;
    position: absolute;
    cursor: ew-resize;
}

.audio-player .note-icon {
    height: 100%;
    width: 3.8rem;
    padding: 1rem;
    fill: rgba(0, 0, 0, 0.5);
}

.audio-player .current-time {
    padding-left: 1rem;
}

.audio-player .total-time {
    padding-right: 1rem;
}

/* Footer */

#footer {
   	position:      absolute;
    overflow:      auto;
	width:         100%;
    padding:       20px;
    bottom:        0px;
    border-bottom: 100px;
    
    text-align:        center;
   	background-color:  var(--neutral);
    color:             var(--key);
    font-family:     "Routed Gothic Wide", Icons;
    font-size:         10px;
    font-style:        normal;
	font-weight:       400;
}
        
#footer  a {
    text-decoration: none;
    color:var(--bluekey);
}

body.mobile #footer {
    padding: 22px;
    padding-top: 30px;
    padding-bottom: 30px;
    text-align: left ;
        }

body.mobile #footer  a {
    text-decoration: none;
    color:var(--bluekey);
    }



/* CHRISTIAN */

[local-style="6524819"] .container {
    max-width: none;
}

table {
  width: 100%;
}

table, th, td{
  border:          1px solid transparent;
  border-collapse: collapse;
}

td, th {
 vertical-align: top;
 padding-bottom: 8px;    
}

td{
}

th {
 font-weight:   inherit;
}

.mobile table {
 font-family: "Routed Gothic", Icons;
 font-weight:    400;
 font-style:     normal;
}

.mobile th {
 padding-right: 6px;
 text-align:    left; 
 font-weight:   inherit;
}



/* .page_container  {
} */

/* STEFAN */

a#site_menu_button{
    display: inherit !important;
}

.page-link[data-link-pid="6586922"]{
	margin-bottom:50px;
}

.thumbnails .tags a:not(.unlink):before {
  content: "︎︎︎";
}



a.unlink{
  pointer-events: none;
  color: rgba(0, 0, 0, 1)!important;
  background-color: #fff;
  font-style: normal;
  pointer-events: none;
}

#site_menu .page-link a:not(.active):visited {
  color: var(--visited);
}



[data-css-preset] .thumbnails_width{
/*width:calc(100% - 175px);*/
  width:80%;
}

html{
	/*--htmlBgColor is set via js*/
    background-color: var(--htmlBgColor)!important;
}