/*
Theme Name: Surprise
Theme URI: http://www.surprise-online.de
Description: Wordpress-Seite der Fa. Surprise Cocktail & Funfood Catering, Hannover. 
Version: 3.5
Author: Steffen Schmitt
Author URI: http://www.freshandeazy.com
Design 
Tags: cocktails, funfood, catering, messe, events, hannover, hamburg, cocktailservice
font-family: 'Open Sans', sans-serif;

colors:
yellow #ffd100
d'green #306d38
lila #9c1d82
d'blue #312783
red #d61217
orange #f18700
l'blue #009fe3
l'green #9fa22c
coffee #453740

*/

 
@import "css/reset.css";
@import "css/fonts.css";


body { margin: 0 auto; background:rgba(0,0,0,.94); font-family: 'Open Sans', sans-serif; font-size:1rem; line-height:1.4; color: rgba(255,255,255,0.55); }
html, body { height:100%; }
.clear {clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0; }
.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}
* html .clearfix,*:first-child+html .clearfix{zoom:1}
.borderline { clear: both; border-top:1px solid rgba(255,255,255,.11); height:1rem; padding:0 0 .5rem 0; display:block; margin:.5rem auto 0; }
.wp-caption {/*border:1px solid #666;text-align:center;background:#ccc;padding:10px;margin:10px*/}
.textalignright { text-align:right; } 
.textaligncenter { text-align: center; } 
.hidden { display:none; }
.nomargin { margin: 0 auto !important; }

hr { margin:1.5rem auto; border: 0; height: 0; border-top: 1px solid rgba(255,255,255,.11); border-bottom: 1px solid rgba(0, 0, 0, 0.3); }

.hidden { display:none; }

.aligncenter, div.aligncenter { display: block; }
.alignleft {float:none;}
.alignright {float:none;}
.center {float:none; }
.wp-caption {border:1px solid #666;text-align:center;background:#ccc;padding:10px;margin:10px}
.textalignright { text-align:right; } 
.textaligncenter { text-align: center; } 
.fullwidth, .full { width:100%; height:auto; margin:0 auto !important; max-width: inherit !important; }
.side-products, .side-subs {padding: 2rem 0;}

p {margin:1rem auto;}
.side-products p, .side-subs p {margin:0 auto;}
blockquote p { font-weight:700;  }
p, li { font-size:1rem; }

/*   i m a g e   s t y l e s   */
.articleImage { width:100%; height: auto; }
.floatright { margin: 0 auto; }
.floatleft { margin: 0 auto; }
.card { padding:10px; background:#f1f1f1; border:1px solid #000; box-shadow:1px 1px 2px #ccc; width:275px; height:auto; }
.boximage { width:100%; height:auto; }
.oldimage { width:80%; height:auto; border:#000 solid 11px; margin:1.5rem auto 0 !important; }
.download { margin-right:30px; }
.rotateleft { -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); transform: rotate(2deg); }
.rotateright { -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); transform: rotate(-3deg); }


@media only screen and (min-width: 768px) { 
.hidden { display:block; }
.aligncenter, div.aligncenter { display: block;  }
.alignleft {float:left; margin-left:0;}
.alignright {float:right; margin-right:0;}
.center {float:left; margin-left:2% !important; }
.centa {float:left; margin-left:3.2%; }
.articleImage { width:49% !important; }	
.floatright { margin: 1.5rem 0 1.5rem 2% !important; }
.floatleft { margin: 1.5rem 2% 1.5rem 0 !important; }
}


a { color: rgba(255,255,255,.75); text-decoration:none; font-style: italic; font-weight:700; -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease; }
a:hover { color: rgba(255,255,255,.60); text-decoration:underline;  }



h1 { font-weight:900; font-size:1.75rem; line-height:1.1; margin:0 auto .5rem; display:block; text-transform:uppercase; letter-spacing:0; color:rgba(255,255,255,.35); }
h1 a { font-weight:900; }
h2 { font-weight:300; font-size:1.5rem; display:block; text-transform:uppercase; letter-spacing:1px; }
h3 { font-weight:700; font-size:1.375rem; margin:1.5rem auto; display:block; letter-spacing:1px; text-transform:uppercase; line-height: 1.5; }
h4 { font-weight:700; font-size:1.25rem; margin:1.5rem auto; display:block;  }
h5 { font-weight:700; font-size:1.125rem; margin:1.5rem auto; display:block; }
h6 { font-weight:400; font-size:.875rem; margin:1rem auto; display:block; letter-spacing:2px; font-style:italic; }

@media only screen and (min-width: 768px) { 
blockquote p { font-size:1.1rem; }
p, li { font-size:1rem; }

h1 { font-size:3rem; margin:2.5rem auto; line-height:1;letter-spacing:4px;  }
h2 { font-size:2rem; margin:1.5rem auto 0; letter-spacing:2px;  }
h3 { font-size:1.5rem; letter-spacing:2px; }
h4 { font-size:1.25rem; }
h5 { font-size:1.2rem; }
h6 { font-size:1.1rem; }
}

h4.boxheader { text-transform:uppercase; }


header { width:100%; }
hgroup { width:96%; max-width:1366px; height:4.5rem; margin:0 auto; overflow:visible; }
#logo { width:11rem; height:auto; margin:1rem auto 0; }

@media only screen and (min-width: 768px) {
	header { width:100%;  }
	hgroup { height:5.5rem; }
	#logo { margin:1.25rem auto 0; }
}

@media only screen and (min-width: 1060px) {
	hgroup {  height:6.5rem;  }
	#logo { float: left; width: 13rem; }
}


/*  m a i n - n a v  */

#main-nav { display: none;}
.rmp-container .rmp-menu-wrap .rmp-menu {text-transform: uppercase!important; }

li.surprise {background-color: #f08700;}
li.surprise a {color:rgba(0,0,0,.66) !important;}
li.surprise a:hover {color:rgba(0,0,0,1) !important;}

@media only screen and (min-width: 1060px) {

#main-nav { display: block; margin:2rem auto 0; width:auto; }
#main-nav ul { list-style: none; padding:0; margin:0; position:relative; z-index:900; }
#main-nav ul li { margin: 0; text-transform: uppercase; letter-spacing:1.5px; display:inline-block;  }
#main-nav ul li:last-child { margin:0; }
#main-nav a { text-decoration:none; font-weight:300; display:block; padding:0 10px; line-height:3; color: rgba(255,255,255,.66); font-style:normal; font-size:.875rem; -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease; }
#main-nav a:hover { text-decoration:none; color: rgba(255,255,255,1); background:rgba(255,255,255,.11); }

#main-nav ul ul { display:none; position:absolute; top:100%; }
#main-nav ul li:hover > ul { display:inherit;  }
#main-nav ul ul li { min-width:170px; display:list-item; position: relative; background:rgba(0,0,0,1); }
#main-nav ul ul li:last-child { margin: 0px -7px 0 0; }
#main-nav ul ul li:hover { /*background:rgba(88,89,91,1.00);*/}

#main-nav ul li > a:after { content:  ' +'; }
#main-nav ul li > a:only-child:after { content: ''; }

}

#responsive-menu a { font-weight:300; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing:1.5px; }
#responsive-menu-container {padding: 2rem 0 0 1rem !important;}

li#menu-item-5937 { background: rgba(214,18,23,1.00) !important; }
li#menu-item-5937 a { font-weight:700 !important; }
li#menu-item-5937 a:hover { background:rgba(241,135,0,1.00); }

#intro { width:100%; height:auto; max-width:1366px; margin:0 auto; position:relative; z-index:800; }

.homeslider {width: 100%; max-width: 1440px; height: auto; margin:0 auto; position: relative; z-index: 600; padding: 0 0 4rem; }
.screen {display: none;}
.mobile {display: block;}

#subsubintro { width:960px; height:auto; padding:25px 0px; margin:0 auto; /*background:url(images/wood-bg.jpg) center top; box-shadow:1px 1px 2px #666666; position:relative; z-index:500;*/ }
#subsubintro h1 {font-family: 'Open Sans', sans-serif; font-weight:800; font-size:24px; line-height:30px; margin:0 auto; display:block; letter-spacing:12px; font-style:normal; color:#FFF; text-shadow:#333 1px 1px 1px;}
#subintro { width:960px; height:425px; padding:20px; margin:0 auto; background:url(images/wood-bg.jpg) center top; box-shadow:1px 1px 2px #666666; position:relative; z-index:800; display:block; }
#intro-slider { background:#FFF; margin:0 auto; }
#sub-intro-slider { width:934px; height:399px; padding: 13px; background:#FFF; box-shadow:1px 1px 1px #666666; margin:0 auto; }
#sub-intro-slider h1 { font-size:60px; display:block; padding:330px 13px 13px;  margin:0 auto; letter-spacing:-1px; color:#fff; font-style:normal; font-weight:800; }

#content { width:100%; margin:0 auto; position:relative; z-index:700;  }

.wrap { width:94%; max-width: 1366px; margin:0 auto; position:relative; padding: 0 0 2rem 0;   }
div.wrap h2 {margin: 1.5rem auto; }
.wrapper {width:90%; max-width:1200px; margin:0 auto; padding: 1.5rem 0; }
.fullwrapper {width:98%; margin: 0 auto; }

.grey {background: rgba(255,255,255,.08); margin: 0 auto; padding: 4rem 0;}
.white {padding: 0 0 4rem; display: grid;}
.coffee {background: #453740; margin: 0 auto; padding: 7% 0; }
.coffee h2 {color:#f7e9dc;}
.white h3 { font-size:1.5rem; }

.instagram {text-align: center;width:94% !important; max-width: 1440px;margin: 0 auto;}
.instagram h3 {margin: 2rem auto;}

.news h3 {text-align: center;}
.news li {width: 100%; margin: 1rem 0; }
.news img {width: 47.8%; float: left; height: auto;}
.news a {display: block; width: 47.8%; float: right;}
.news a::after {clear: both;}
.news .mehr-button {text-align: center;}
.news .mehr-button a {float: none; display: inline-block;}


@media only screen and (min-width: 768px) { 
	
	.screen {display: block;}
	.mobile {display: none;}
	
.grid_1 { width:18%; }
.grid_1-5 { width:20.6%; }
.grid_2 { width:32%; }
.grid_3 { width:49%; }
.grid_4 { width:65.8%; }
.grid_5 { width:82.9%; }
.grid_6 { width:100%; }
.grid_7 { width:19%; }
.grid_8 { width:38.5%; }
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6 { display:block; }
	
	.grid_1-2 { width:48.4%; display:block; } 
	.grid_1-3 { width:31.2%; display:block; }
	.grid_1-4 { width:22.6%; display:block; } 
	.grid_1-1 { width:100%; display:block; }
	.grid_3-4 { width:74.2%; display:block;}
	.grid_2-3 { width:65.6%; display:block; }
	
	.fullwrapper {width:94%; }
	
	.news li {width: 21.7%; float: left; margin: 1rem 4.4% 1rem 0; }
	.news img {width: 100%; float: none; }
	.news a {width: 90%; float: none; margin:0 auto;}
	.news li:last-child {margin: 1rem 0;}
}

.categories {width: 92%;margin: 0 auto;padding: 2rem 0;max-width: 1366px;}

.categories h2, .variants h2 {margin:0 auto 2rem; }

div.cat {position: relative; width: 100%; padding-bottom: 100%; overflow: hidden; margin: 0 auto 5%;}
div.cat-wrap {position: absolute; padding:5%; background:rgba(0,0,0,.55); width: 90%; height: 90%; margin-top: 85%; transition: all 0.9s ease;}

div.cat:hover div.cat-wrap {margin-top: 0; background:rgba(0,0,0,.94); }

div.cat.cat1 {background-image: url(https://sunrise.surprise-online.de/wp-content/uploads/2025/10/sun-messen-teaser.jpg); background-repeat: no-repeat; background-position: top center; background-size: cover;} 
div.cat.cat2 {background-image: url(https://sunrise.surprise-online.de/wp-content/uploads/2025/10/sun-firmen-teaser.jpg); background-repeat: no-repeat; background-position: top center; background-size: cover;} 
div.cat.cat3 {background-image: url(https://sunrise.surprise-online.de/wp-content/uploads/2025/10/sun-privat-teaser.jpg); background-repeat: no-repeat; background-position: top center; background-size: cover;} 

div.cat-wrap.boxheader { background:none; margin:0 auto; padding:0; position:relative; }

div.cat-wrap h4.boxheader { background:none; margin:0 auto 1.5rem; padding:0; position:relative; }
div.cat-wrap h4.boxheader a {}
div.cat-wrap h4.boxheader a:hover {}
div.cat-wrap p { margin:.5rem auto; }

div.cat-wrap div.mehr-button {text-align: right;}

div.variants {width: 92%;max-width: 1366px; margin: 0 auto; padding: 0 0 2rem 0; }
/*div.variants div {margin-bottom: 1rem;}*/

div.var {position: relative; width: 100%; padding-bottom: 125%; overflow: hidden; }
div.var h3 { font-size:1.5rem; margin:0 auto;}
div.var p {margin:.5rem auto 0;}

div.var.cocktails div.var-wrap, div.var.barista div.var-wrap, div.var.funfood div.var-wrap {position: absolute; bottom: 0;  }
div.var.cocktails { background:url(https://sunrise.surprise-online.de/wp-content/uploads/2025/10/sun-cocktails-teaser.jpg) no-repeat center; background-size: cover; height: unset; margin-bottom:1rem; }
div.var.barista {background:url(https://sunrise.surprise-online.de/wp-content/uploads/2025/09/sun-barista-teaser.jpg) no-repeat center; background-size: cover; height:unset; margin-bottom:1rem;}

div.var.cocktails a, div.var.barista a, div.var.funfood a {background: rgba(0,0,0,.55);display: block;padding:5%; width: 90%;}
div.var.cocktails a:hover, div.var.barista a:hover, div.var.funfood a:hover {background: rgba(0,0,0,.94);}

#box { margin:1.5rem auto; }
#box h2 { font-family: 'Open Sans', sans-serif; font-weight:700; font-size:24px; line-height:24px; display:block; color:#fff; text-shadow:1px 1px 1px #000; letter-spacing:5px; text-transform:uppercase; height:55px; width:93.4%; padding:85px 3.3% 0px 3.3%; vertical-align: text-bottom; }
.boxheader { background:rgba(0,0,0,0.3); margin:-55px auto 0; padding:10px; position:relative; }
#box p { margin:10px auto 0 10px; /*display:none;*/ }

#box-bottom { border-bottom:3px solid #C7C1BA; padding-bottom:5px; margin-bottom:24px; text-align:right; }
#boxtext { background:rgba(0,0,0,0.3); padding:0 2%; width:96.1%; height:auto; margin:275px auto 0; overflow:hidden; webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease; }
#boxtext a { color: rgba(255,255,255,1)  }

.responsive-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.responsive-video { position: relative; padding-bottom: 56.25%; /* Default for 1600x900 videos 16:9 ratio*/ padding-top: 0px; height: 0; overflow: hidden; }

@media only screen and (min-width: 768px) { 
	
	div.var {position: relative; width:50%; padding-bottom: 35%; overflow: hidden; }
	div.variants div {float: left;}
	div.var.cocktails a, div.var.funfood a, div.var.barista a {padding: 5%;width: 90%;}
	div.var.cocktails div.var-wrap, div.var.barista div.var-wrap, div.var.funfood div.var-wrap { }
	
	.categories {padding: 4rem 0 6rem;}
	div.cat {width: 32%; padding-bottom: 32%; margin:0; }
	div.cat:nth-child(3) {margin:0 2%;}
	div.var h3 {font-size: 1.75rem; margin:1rem auto; }
	div.var p {margin:1rem auto;}
	
	#boxtext:hover { margin:175px auto 0; }
}

/*.cocktails { background:url(images/box_cocktail_588.jpg) no-repeat center; height:330px; overflow:hidden; }
.funfood { background:url(images/box_funfood_588.jpg) no-repeat center; height:330px; overflow:hidden; }*/

.themenbars { margin:0 auto; padding:1.5rem 0; text-align: center; }
.themenbars h4 { color:rgba(35,31,32,1.00);  }
.themenbars a { color:rgba(35,31,32,0.8); }
.themenbars a:hover { color:rgba(35,31,32,1); }
.themenbars .mehr-button { }

/*  t h e m e s   m e n u   */
#menu-themes { margin:2rem auto 0; }
#menu-themes li { float:left; margin:0 1% 1rem; width:48%; height:auto; font-size:1rem; text-transform:uppercase; transition: all 0.7s ease; position: relative; padding-bottom:50%; background-size: cover; background-repeat: no-repeat; background-position: right;}
#menu-themes li:hover {opacity: .55;}
#menu-themes li a {position: absolute;width:calc(100% - 1rem);height: 3rem;line-height: 3rem;padding: 0 0 0 1rem;background-color: rgba(0,0,0,.55); bottom:0; }
#menu-themes li a:hover {background-color:rgba(0,0,0,.94);}

#menu-themes li#menu-item-24 { background-image:url("images/sur_menu_beachbar.jpg"); }
#menu-themes li#menu-item-4929 { background-image:url("images/sur_menu_kiezbar.jpg"); }
#menu-themes li#menu-item-9817 { background-image:url("images/sur_menu_pierre.jpg"); }
#menu-themes li#menu-item-9818 { background-image:url("images/sur_menu_adot.jpg"); }
#menu-themes li#menu-item-9819 { background-image:url("images/sur_menu_grisu.jpg"); }
#menu-themes li#menu-item-9820 { background-image:url("images/sur_menu_b-trailer.jpg"); }
#menu-themes li#menu-item-9896 { background-image:url("images/sur_menu_sophie.jpg"); }

@media only screen and (min-width: 768px) { 
	#menu-themes li { width:calc(100%/3 - 2%); margin:0 1% 1rem; padding-bottom:20%;font-size:1.25rem; }
	#menu-themes li#menu-item-24 {   }
	#menu-themes li#menu-item-4929 { }
	#menu-themes li#menu-item-9817 { }
	#menu-themes li#menu-item-9818 { }
	#menu-themes li#menu-item-9819 { }
	#menu-themes li#menu-item-9820 { }

}

.mehr-button { text-transform:uppercase; font-size:1rem; font-style:italic; letter-spacing:2px; margin:2rem auto;  }
.mehr-button a {padding: .5rem 1.5rem; transition: all 0.7s ease;}
.mehr-button a:hover {opacity: .55;}

.white .mehr-button a {color: white;width: auto;background:#9c1d82;  }
.grey .mehr-button {width:230px; margin-left: calc(50% - 115px);}
.dekogarage .mehr-button a {color: white;width: auto;background:#f18700;  }
.green .mehr-button a {color: white;width: auto;background:#306d38;  }

.highlights img {float: left; margin: 0 auto .5rem auto; width: 25%; height:auto;}
.highlights a { color:rgba(35,31,32,0.8); font-size:1rem; display: block; float: right; width:70%; margin:0 0 .5rem auto; }
.highlights a:hover { color:rgba(35,31,32,1); }
.highlights ul {margin:0 auto 2rem;}
.highlights ul li { border-bottom:1px solid rgba(35,31,32,0.5); margin:0 auto 8px; padding:4px 0; }

footer { width:100%; min-height:330px; display:block;  margin:0 auto; position:relative; z-index:505; font-size:.875rem; background: rgba(255,255,255,.05); }
footer p, footer li { font-size:.85rem;  }


.footerdivs { width:90%; height:auto; padding:4rem 0; display:block; color:rgba(255,255,255,0.66); margin:0 auto; text-align:center; }
.footerdivs img.logo {width: 60%; height: auto; margin: 0 auto 1rem;}
.footerdivs h3 {font-size: 1rem; margin: 2rem auto 1rem;}
.footerdivs img.social {width:2rem; height: auto; opacity:.66; transition: all 0.7s ease;}
.footerdivs img.social:hover {opacity:1;}
.footerdivs .menu-footer-container {padding: 0 0 1rem;}
.footerbottom {width: 90%;max-width: 1366px;margin: 0 auto; padding:1rem 0 3rem; text-align: center;}


@media only screen and (min-width: 768px) { 
	.footerdivs {display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; grid-column-gap: 32px; grid-row-gap: 32px; max-width:1366px; padding:4rem 0 0;} 
	.footerdivs h3 { margin: 1rem auto;}
	.footerdiv1 { grid-area: 1 / 1 / 2 / 2; }
	.footerdiv2 { grid-area: 1 / 2 / 2 / 3; }
	.footerdiv3 { grid-area: 1 / 3 / 2 / 4; }
	.footerdiv4 { grid-area: 1 / 4 / 2 / 5; } 
}

/*    a r t i c l e   s t y l e s    */

article h1 { font-size:1.5rem; letter-spacing:0px !important; text-transform:none; font-style:normal; background:none !important; text-align:left !important; color:rgba(0,0,0,.88); line-height: 1.2 !important;  }
article h1 a { font-weight:300 !important; }
article h3 {font-size: 1.25rem;}
article footer { width:100%; height:50px; min-height:50px !important; display:block; background:none; border-bottom: 1px solid rgba(255,255,255,0.3);  }
#post-thumb { float:left; margin-left:-80px; }

aside h3 { font-size:19px; line-height:26px; letter-spacing:2px; color:#C7C1BA; }
aside ul li { border-bottom:3px solid #C7C1BA; padding-bottom:5px; margin-bottom:24px; }
aside ul li li { margin-left:5px; border-bottom:none; margin-bottom:5px; }

.blog nav a { font-size:12px; font-weight:400; font-style:italic; }

@media only screen and (min-width: 768px) {
	article h1 { font-size:33px; }
	 }


/*       f o r m s         */
.formbox h4 { color:#10BABC; font-size:39px; text-shadow: 1px 1px 0 #fff; filter: dropshadow(color=#ffffff, offx=1, offy=1); }
div.wpcf7 { background:url(images/stamp.png) bottom right no-repeat;  }
.wpcf7 p {  }
label { font-size:.85rem; }
input, textarea {border: thin solid #999;background: #fff;padding: .25rem .5rem; font-size: 1rem; line-height: 1.5;margin: 0 auto 1rem;width: 90%;}
input[type="submit"] { background-color: #f18800; color: rgba(255,255,255,0.8); cursor: pointer; font-weight: 700; padding: 8px 16px; width: auto; border:none; text-shadow: none; -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease; text-transform: uppercase; }
input[type="submit"]:hover { background: #009fe3; ccolor: rgba(255,255,255,1); text-shadow: none; }


/*   g a l l e r y     */

.ngg-gallery-thumbnail-box {width: calc(50%);}
.ngg-gallery-thumbnail img {width: 100%;}
.ngg-gallery-thumbnail a { margin: 0 !important; }
.ngg-gallery-thumbnail { border:0 !important; margin:.25rem !important; }

.ngg-thumbnail img {background-color:#FFFFFF;border:1px solid #fff;margin:4px 0px 4px 5px;padding:4px;position:relative;}
.ngg-thumbnail img:hover {background-color: #A9A9A9;}

.ngg-widget, .ngg-widget-slideshow {overflow: hidden;margin:0pt;padding:5px 0px 0px 0pt;text-align:left;}

.ngg-widget img {border:1px solid #A9A9A9; margin:4px 0px 4px 5px;padding:4px; background:#FFF;}
.ngg-widget img:hover {background-color: #A9A9A9;}

@media only screen and (min-width: 768px) {
	.ngg-gallery-thumbnail-box {width: calc(25%);}	
}


/*     c o n t e n t   s u b p a g e s       */

#content-sub, #content-neu { width:96%; max-width:1366px; min-height:800px; margin:0 auto; position:relative; z-index:700; padding:1rem 0 3rem;  }

.twentytwo div.su-row {width:100%; max-width: 1200px; margin: 0 auto 1.5rem; }

div.einleitung {width: 90% !important; margin: 1rem auto 1rem 5% !important;}


.adressbox { padding: 15px 0px 15px 10px; color:#fff;  }
.adressbox a { color:#FDFAB8; }
.adressbox a:hover { color:#FFF202; }

/*   shortcode styles   */
.su-label-type-info {  }
.su-label { color:rgba(255,255,255,0.8) !important; width:70%; padding:10px !important; font-size:15px !important; line-height:4 !important; font-weight:400 !important; margin-left:10px; }
.su-label img { margin:-33px 8px 0 -8px; } 

.su-note { border: #231f20 !important; }
.su-note a {   }

.su-row .su-column img {height: auto;}

.ssba { padding:25px 0 !important; }

div.barpage {width: 92%;max-width: 1366px;margin: 0 auto;position: relative;padding: 1rem 0 3rem;}
div.barpage img.barpage-hero, img.attachment-post-thumbnail {width: 100%; height: auto;}

div.info-bars {width: 100%;max-width: 1200px;margin:0 auto; display: block;}

div.info-col {padding:1.5rem; border:thin solid rgba(0,0,0,.11); background: rgba(0,0,0,.02);}
div.info-col h3 {font-size: 1.25rem;}
div.info-col li {line-height: 2; padding: 0 0 0 1.5rem; background-image: url(https://www.surprise-online.de/sp2013/wp-content/uploads/2022/01/ok-icon.svg); background-repeat: no-repeat; background-size: 1.15rem; background-position: left center;}

div.info-products, div.info-category {margin-top: 2rem;}
div.infotext li {list-style: disc; list-style-position: inside; margin:.5rem auto 0;}

div.side-products.grid_1-4, div.side-subs.grid_1-4 {width: calc(100% - 2rem);}
div.side-products, div.side-subs {padding:1rem; }
div.side-products h3 {font-size: 1.25rem; margin: 0 auto 2rem; }

div.side-subs h3 {font-size: 1.25rem; margin: 0 auto; background: rgba(0,0,0,.11); padding: .25rem;}

div.side-subs li {position: relative; margin: 0 auto 1.5rem;}
div.side-subs h3 {font-size: 1.25rem;padding:.25rem;z-index: 600;position: absolute;background: rgba(0,0,0,.66);line-height: 2;width: calc(100% - 0.5rem);bottom: 0;margin: 0.25rem auto; transition: all 0.7s ease; text-align: center;}
div.side-subs h3 a {color: white;}
div.side-subs h3:hover {background: rgba(0,0,0,.94); }

div.products li, 
div.themes li {position: relative; margin: 0 auto 1.5rem;}
div.products li img.attachment-post-thumbnail, div.themes li img.attachment-post-thumbnail {width: 100%;height: auto;}
div.products li h3, 
div.themes li h3 {font-size: 1.25rem;padding: .5rem .25rem;z-index: 600;position: absolute;background: rgba(0,0,0,.66);line-height: 1.2;width: calc(100% - 0.5rem);bottom: 0;margin: 0.25rem auto;transition: all 0.7s ease;text-align: left;}
div.products li h3 a, div.themes li h3 a {color: white;}
div.products li h3:hover, div.themes li h3:hover {background: rgba(0,0,0,.94); }



div#sb_instagram {padding-bottom:0 !important;}
div#sbi_images {padding:0 !important;}

div.socials {width: 80%; margin:1rem auto !important;}
div.socials img {width: 77%;}
div.su-row.socials .su-column-size-1-3 {width: 33.3333%; float: left; margin:0 auto;} 

@media only screen and (min-width: 768px) {
	div.infotext h2, div.infotext p, div.infotext h4 {padding: 0 0 0 6rem;}
	div.infotext p img.barimage {margin: .5rem 2rem 2rem -6rem;width: calc(50% + 6rem);height: auto;max-width: unset !important;}
	div.infotext p img.barimage-half {margin: .5rem 2rem 2rem -6rem;width: calc(25% + 6rem);height: auto;max-width: unset !important;}
	div.infotext p img.bannerimage {margin: .5rem 2rem 2rem -6rem;width: calc(100% + 6rem);height: auto;max-width: unset !important;}
	
	div.side-subs h3 {text-align: left;}
	
	div.side-products, div.side-subs {padding:0 0 0 2rem; border-left:thin solid rgba(255,255,255,.11); }
	
	div.side-products.grid_1-4, div.side-subs.grid_1-4 {width: calc(21.7% - 2rem);}
	div.info-products, div.side-products, div.info-category, div.side-subs {margin-top: 3rem;}	
	
	div.products h2, div.themes h2 {margin: 1.5rem auto;}
	div.products li {width:22.6%; display:block;float:left; margin: 0 3.2% 1.5rem 0; }
	div.products li:first-child {width: 100%; margin: 0 auto;}
	div.products li:nth-child(5) {margin:0 0 1.5rem auto;}
	
	div.themes li {width:31.2%; display:block;float:left; margin: 0 3.2% 1.5rem 0; }
	div.themes li:first-child {width: 100%; margin: 0 auto;}
	div.themes li:nth-child(4), div.themes li:nth-child(7), div.themes li:nth-child(10), div.themes li:nth-child(13), div.themes li:nth-child(16) {margin:0 0 1.5rem auto;}
	
	div.su-row.socials .su-column-size-1-3 {width: 30.66%; margin:0 0 0 4%;} 
	div.su-row.socials .su-column-size-1-3:last-child {margin: 0;}
}

div.grecaptcha-badge {z-index:999;}