@import url(../../../../../_assets/fonts/robotoslab_bold_macroman/stylesheet.css);
@import url(../../../../../_assets/fonts/robotoslab_regular_macroman/stylesheet.css);
@import url(../../../../../_assets/fonts/pacifico/stylesheet.css);
@import url(../../../../../_assets/fonts/merriweather/stylesheet.css);


:root {
  --white: #FFF;
  --black: #685b52;
  --altweiss: #f3f0eb;
  --red: #302923;
  --dunkelrot: #520815;
  --gelb: #e4af13;
  --blau: #5188d8;
 
  --hamburger-menu-button-stripes-color: var(--anthrazit);
  --hamburger-menu-button-background-color: var(--light);

  --body-font-size: 1.2rem;
  --body-line-height:  1.4rem;
  
  --body-font-headline: 'roboto_slabbold'; 
  --body-font-family: 'roboto_slabregular'; 
  --written-font-family: 'Pacifico Regular';
  --kommentar-font-family:'roboto_slabregular';
  
   --body-font-headline: 'Merriweather'; 
  --body-font-family: 'Merriweather'; 
  --written-font-family: 'Pacifico Regular';
  --kommentar-font-family:'Merriweather';
  
  
  --body-color: var(--black);
  
  
  
}

@media all {
	
	
body {
  background: var(--altweiss) !important;
  font-size: var(--body-font-size);
  font-family: var(--body-font-family);
  line-height: var(--body-line-height);
}

p {
margin: 0 auto;
line-height: 160%;
}

ul {
line-height: 160%;
}

a {
  color: var(--red);
  font-weight: 600;
}

a:focus, a:hover {
  color: var(--gelb)!important;
  text-decoration: none;
  font-weight: 600;
}

a:not([class]) {
  text-decoration: none;
  font-weight: 600;
}	

.btn-primary {
  background-color: var(--gelb);
  border-color: var(--gelb);
}



/***************  Seitenaufbau  ***************/

.written {
	font-family: var(--written-font-family);
}

body.wrapper-fluid .site-grid  {
  grid-gap: 0;
}

.topbar {
/*background-image: url("../img/sonne_background.png");
background-repeat: no-repeat;*/
}	

.brand-logo {
display: none
}



header {
  background: var(--altweiss) !important;
}

header .container-topbar h1 {
  font-size: 2.1rem;
  font-family: var(--written-font-family);
  font-weight: normal;
  text-align: center;
  margin-bottom: 0.65rem;
 color: var(--red) ;
}

header .container-topbar p {
  font-size: 1.2rem;
  font-family: var(--body-font-family);
  font-weight: normal;
  text-align: center;
  margin-bottom: 0;
 color: var(--red) ;
}


.container-header nav {
  margin-top: .5em;
  padding: 0;
  margin: 0 auto;
  margin-top: 0px;

}

.container-header .container-nav {
  padding-bottom: 0;
}


.container-nav {
background-color: var(--red) !important;
}


.container-banner {
  display: block;
  margin: 0;
}



header nav {
  margin-top: 0 !important;
}
header nav ul {
  color: var(--black) !important;
  justify-content: center;
}
header nav li {
  padding: 0 !important;
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap !important;
}
header nav li a {
  color: var(--white)!important;
  display: inline-block;
  padding: 1rem 1rem 1rem 0.5rem;
  font-size: 1.3em;
  font-weight: 400!important;
  text-transform: uppercase;
  letter-spacing: 0.1pt;
  text-decoration: none;
}


header nav li.active,
header nav li:hover,
header nav li:active,
header nav li:focus {
  background-color: transparent;
  color: var(--gelb)!important;
  text-decoration: none;
  
}

header nav li.active::after,
header nav li:hover::after {
  background: transparent !important;
  text-decoration: none;
}

.metismenu > li.level-1 > a:hover, .container-header .metismenu > li.level-1 > button:hover {
   color: var(--gelb)!important;
}


header nav li.level-1 + li.level-1 {
  margin-left: 0.5rem !important;
}
header nav i.fa {
  padding-left: 1rem;
}


.container-header .metismenu > li.active > a::after, .container-header .metismenu > li.active > button::before, .container-header .metismenu > li > a:hover::after, .container-header .metismenu > li > button:hover::before {
  background: transparent;
  left: 0;
  right: 0;
}

.container-top-a > *, .container-top-b > * {
  background-color: var(--gelb);
  padding: 1% 0;
  margin: 0;
}



.com-content-article__body {
margin: 0 auto;
padding: 0 20%;
}

.container-component {
min-height: 400px;
}
	
	
 /*.ig-gallery-wrapper {
  padding: 0 20%!important;
}	*/
	
 .igallery_title	{
  padding: 0 20%!important;
}

	
	
		
.grid-child {
max-width: 100%;
width: 100%;
}



#main {
  
  display: flex;
  flex-direction: row;
  background-color: var(--altweiss);
  padding-top: 0rem;
  padding-bottom: 1.5rem;
  }




.startseite #main {
  padding:0!important;
}


.page-header {
padding: 0 20%;
}


h1 {
font-family: var(--body-font-headline);
color: var(--red);
font-weight: 400;
margin: 20px 0;
}
	

h2 {
  font-size: 150%;
  font-family: var(--body-font-headline);
   color: var(--black);
  font-weight: 400;
  margin-bottom: 20px;
}




h3, h4,
header nav {
font-family: var(--body-font-headline);
color: var(--black);
font-weight: 400;
}

 
 .footer a {
  color: var(--white);
   font-family: var(--body-font-headline);
   text-decoration: overline;
   font-weight: 400;
}


.footer {
  background-color: var(--red);
  background-image: none;
  padding: 15px;
}



/*********  Back-top  *********/
#back-top {
  position: fixed;
  border: none;
  padding: 0.75rem 1rem;
  color: var(--white);
  background-color: var(--blau);
  transition: opacity 0.2s ease-in, background-color 0.35s;
}
#back-top:hover {
  background-color: var(--black);
}
#back-top span[class*="icon"] {
  position: relative;
  top: 0.1rem;
  width: auto;
}
#back-top span[class*="icon"]::before {
  font-size: 2rem;
}
@media all and (max-width: 767px) {
  #back-top {
    right: 0.5rem;
    bottom: 0.5rem;
    padding: 0.25rem;
  }
}


/***************  Formate   ***************/



.wf-column {
  background-color: var(--white);
  padding: 20px;
  box-shadow: 0 0 2px rgba(51,57,66,.1),0 2px 5px rgba(51,57,66,.08),0 5px 15px rgba(51,57,66,.08),inset 0 0 0 var(--cassiopeia-color-primary);
}


.btn-secondary {
  background-color: var(--red);
  border-color: var(--red);
  color: var(--white);
  font-weight: 600;
   margin-top: 20px;
}

.btn-secondary a{
  font-weight: 600;

}

.btn-secondary:hover{
 background-color: var(--red);
  border-color: var(--red);
  color: var(--gelb);
  font-weight: 600;

}





/***************  Interne Seite   ***************/

 .login-greeting {
  color: var(--gelb);
}


.mod-whosonline {
  color: var(--gelb);
  font-style: italic;
  font-size: 75%;
}

.mod-list{
  padding-left: 10%;
}

.top-a a:hover{
 color: #fff!important;
}


.container-search h3 {
font-size: 75%;
color: var(--gelb);
font-style: italic;
margin-top: 15px;
}




/***************  Gestaltung Startseite ***************/


.startseite p {
padding: 0 20%;
}




.bgimg-1 {
  	background-color: #000;
	background-image: url("../img/header_holly_holleber.jpg");
	background-size: contain;
  	min-height: 500px;
	width: 100%;
	padding: 50px;
  }
  
  
  .bgimg-1 p {
	padding:0;
  }
  
  
 
  
  
[class^="bgimg-"] {
  position: relative;
  opacity: 1.0;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}





.startseite .com-content-article__body {
margin: 0;
padding: 0;
}



/*Blog*/

.icon-calendar::before {
  content: "\f00c"!important;
}

.icon-calendar::before {
  content: "\f00c";
}

.create  {
  text-transform: uppercase;
  font-size: 90%;
}


.blog-items.columns-2 {
  grid-template-columns: 1fr 1fr;
  padding: 0 20%;
}

.blog h2 {
font-size:120%;
font-family: var(--body-font-headline);
color: var(--black);
font-weight: 400;
}


.blog .com-content-article__body {
  margin: 0 auto;
  padding: 0 20%;
}



.left.item-image {
  float: none;
  display: inline;
  padding: 0 20%;
}


.com-content-category-blog__item .left.item-image {
  padding: 0 ;
}

.com-content-category-blog__item p {
 line-height: 120%;
}


.left.item-image img  {
margin-bottom: 15px;
box-shadow: 0 0 2px rgba(51,57,66,.1),0 2px 5px rgba(51,57,66,.08),0 5px 15px rgba(51,57,66,.08),inset 0 0 0 var(--cassiopeia-color-primary);
}


.com-content-category-blog__item .left.item-image img  {
margin-bottom: 0;
}


.blog .article-info {
padding: 0 20%;
}

.blog .article-info {
padding: 0 20%;
}

.com-content-category-blog__item .article-info {
padding: 0;
}


.blog .page-header {
  padding: 0 20%;
}


.com-content-category-blog__item .page-header {
  padding: 0;
}



.boxed .blog-item {
  background-color: #fff;
  box-shadow: 0 0 2px rgba(51,57,66,.1),0 2px 5px rgba(51,57,66,.08),0 5px 15px rgba(51,57,66,.08),inset 0 0 0 var(--cassiopeia-color-primary);
}



#mod-custom117 {
  padding:0 20%;
  font-size: 90%;
}

.view-category  #mod-custom117 {
 display: none;
}


figcaption {
  padding: 0 20%;
  font-size: 90%;
}


/*SLIDESHOW UND HEADER*/



.banner {
	background:var(--altweiss);
	background-image:url(../img/header_holly_holleber.jpg);
	background-repeat: no-repeat;
	background-size: auto;
	height: 500px!important;
}


.kuenstler .banner {
	background-image:url(../img/header_holly_holleber-2.jpg);
	height: 270px!important;
}



.paedagoge .banner {
	background-image:url(../img/header_holly_holleber-3.jpg);
	height: 270px!important;
}

.blog .banner {
	background-image:url(../img/header_holly_holleber-4.jpg);
	height: 270px!important;
}


.programm .banner {
	background-image:url(../img/header_holly_holleber-5.jpg);
	height: 270px!important;
}


.videos .banner {
	background-image:url(../img/header_holly_holleber-6.jpg);
	height: 270px!important;
}


.termine .banner {
	background-image:url(../img/header_holly_holleber-7.jpg);
	height: 270px!important;
}


.kontakt .banner {
	background-image:url(../img/header_holly_holleber-8.jpg);
	height: 270px!important;
}

.impressum .banner {
	background-image:url(../img/header_holly_holleber-4.jpg);
	height: 270px!important;
}

.datenschutz .banner {
	background-image:url(../img/header_holly_holleber-6.jpg);
	height: 270px!important;
}



/*
.startseite .banner {
  height: 500px!important;
  background-image:url(../img/header_holly_holleber.jpg);
}








.blog .banner {
	background-image:url(../img/hijos_del_sol_mit_logo.jpg);
	height: 290px!important;
}

.programm .banner {
	background-image:url(../img/hijos_del_sol_mit_logo.jpg);
	height: 280px!important;
}


.galerie .banner {
	background-image:url(../img/hijos_del_sol_mit_logo.jpg);
	height: 280px!important;
}

.videos .banner {
	background-image:url(../img/hijos_del_sol_mit_logo.jpg);
	height: 280px!important;
}


.kontakt .banner {
	background-image:url(../img/hijos_del_sol_mit_logo.jpg);
	height: 280px!important;
}

.impressum .banner {
	background-image:url(../img/hijos_del_sol_mit_logo.jpg);
	height: 280px!important;
}

.datenschutz .banner {
	background-image:url(../img/hijos_del_sol_mit_logo.jpg);
	height: 280px!important;
}


.my404 .banner {
	background-image:url(../img/header_404.jpg);
}

*/

.my404 .mod-articlesnews__item
{
	float: left;
	width: 30%;
	margin-left: 5%;
	background-color: white;
	padding: 2%;
}

.my404 .mod-articlesnews__item:first-of-type {

	margin-left: 0%;
}

.my404 .mod-articlesnews__item img {

	margin-bottom: 15px;
}


#gallery-scope-1 {
padding: 0 15%;
}




/** MEDIAQUERIES
*********************************************************************************************************
*/

@media all and (min-width: 1600px) and (max-width: 1919px) {

.mod-breadcrumbs__wrapper {
  margin-left: -10%;
}

#main {
  padding-left:10%;
  padding-right:10%;
}

.highlights {
  padding: 0% 10%;
}


}


@media all and (min-width: 1367px) and (max-width: 1599px) {

.mod-breadcrumbs__wrapper {
  margin-left: -8%;
}

#main {
  padding-left:8%;
  padding-right:8%;
}

.highlights {
  padding: 0% 8%;
}


}





@media all and (min-width: 1281px) and (max-width: 1366px) {

.mod-breadcrumbs__wrapper {
  margin-left: -8%;
}

#main {
  padding-left:8%;
  padding-right:8%;
}

.highlights {
  padding: 0% 8%;
}


}




@media all and (min-width: 992px) and (max-width: 1280px) {
	
.mod-breadcrumbs__wrapper {
  margin-left: -6%;
  margin-top: -1%!important;
}

#main {
  padding-left:6%;
  padding-right:6%;
}

.highlights {
  padding: 0% 6%;
}


}


@media all and (min-width: 768px) and (max-width: 991px) {


.mod-breadcrumbs__wrapper {
  margin-left: -10%;
}



#main {
  padding-left:10%;
  padding-right:10%;
}


.wf-columns .wf-column {
  flex: auto!important;
  text-align: center;
}

.highlights {
  padding: 0% 10%;
}

header nav li a {
  padding: 0.2rem;
  font-size: 1.3em;
}

header nav ul {
  display: flex!important;
  flex-direction: row!important;
  width: 100%!important;
}

}



@media all and (min-width: 501px) and (max-width: 767px) {

.container-header nav {
  border-bottom: 0px solid var(--black);
  -webkit-box-shadow: 0; 
box-shadow: 0;
}


.mod-breadcrumbs__wrapper {
  margin-left: -10%;
}


.banner {
background-size: contain;
height: 160px!important;
}


#main {
  padding-left:10%;
  padding-right:10%;
}

.wf-columns .wf-column {
  flex: auto!important;
  text-align: center;
}

.highlights {
  padding: 0% 10%;
}

.gedanken {
font-family: var(--written-font-family)!important;
 color: var(--black);
font-size: 180%;
}


}



@media all and (min-width: 1153px) and (max-width: 1280px) {

.banner {
background-size: contain;
height: 260px!important;
}

}

@media all and (min-width: 1025px) and (max-width: 1152px) {

.banner {
background-size: contain;
height: 240px!important;
}

}

@media all and (min-width: 992px) and (max-width: 1024px) {

.banner {
background-size: contain;
height: 208px!important;
}

.bgimg-1 img {
	width: 400px;
  }
  

}


@media all and (min-width: 801px) and (max-width: 991px) {

.banner {
background-size: contain;
height: 210px!important;
}

.mod-breadcrumbs__wrapper {
 margin-top: -1%!important;
}



}


@media all and (min-width: 768px) and (max-width: 800px) {

.banner {
background-size: contain;
height: 165px!important;
}

.mod-breadcrumbs__wrapper {
 margin-top: -2%!important;
}

}

@media all and (min-width: 501px) and (max-width: 767px) {

.banner {
background-size: contain;
height: 155px!important;
}


.mod-breadcrumbs__wrapper {
 margin-top: -2%!important;
}

}



@media all and (max-width: 500px) {
	
.container-header nav {
  margin-top: .5em;
  padding: 10px 0 15px 0;
}

.navbar {
  padding-left: 0!important;
  margin-left: 0!important;
}

.com-content-article__body {
  padding: 0 7.5%;
}

.page-header {
 padding: 0 7.5%;
}

.startseite p {
  padding: 0 7.5%;
}

 p {
  padding: 0 7.5%;
}

.blog-items.columns-2 {
  grid-template-columns: 1fr 1fr;
   padding: 0 7.5%;
}


.blog-items {
  display: block;
  width: 100%;
}

.blog-items div {

  margin-bottom: 25px!important;
}

.bgimg-1 img {
	width: 500px;
  }

navbar-toggler:focus {
  box-shadow: 0;
}

container-header .navbar-toggler {
  border: 0 solid #fff;
  margin-bottom: 5px;
}

.metismenu.mod-menu .metismenu-item {
    line-height: 1em;
}

.sidenavigation-modulebox {
    width: 100%;
    position: relative; /* Standardverhalten: Diese Modulebox scrollt mit. Falls sie fixiert ein soll, muss dieser Wert mit position: fixed übeschrieben und ein zussätzlicher top-Wert angegeben werden. */
  }

.quickMenue {
   display: flex;
   background: transparent;
   position: relative;
   justify-content: center;
  }
   
.quickMenue a.quickMenueAnchor {
  margin-right: 12px;
}


.mytooltip {
    display: none !important;
  }  
  

.quickMenue .mytooltip::after,
  .quickMenue .mytooltip::before {
    display: none !important;
  }  
  
  
 .nach_oben {
    display: none !important;
  }  


.wf-columns .wf-column {
  flex: auto!important;
  text-align: center;
}


.banner {
	background-image:url(../img/header_mobil.jpg)!important;
	background-size: cover;
	height: 400px!important;
}


/*
.my404 .banner {
	background-image:url(../img/header_404_mobil.jpg)!important;
	background-size: cover;
	height: 200px!important;
}


.my404 .mod-articlesnews__item {
  clear: left;
  width: 100%;
  margin-left: 0;
  margin-top: 3%;
  background-color: white;
  padding: 3%;
}

*/

.container-banner {
  margin: 0;
}





.startseite #slideshow_wrapper_inpage {
	display: none;
}

.gedanken {
font-family: var(--written-font-family)!important;
 color: var(--black);
font-size: 170%;
}



/*
	.slideshow li:nth-child(1) {background-image:  url(../img/header_contaflex_mobil-1899.jpg);animation-delay:  0s;}
	.slideshow li:nth-child(2) {background-image:  url(../img/header_contaflex_mobil-1901.jpg);animation-delay:  5s;}
	.slideshow li:nth-child(3) {background-image:  url(../img/header_contaflex_mobil-1923.jpg);animation-delay: 10s;}
	.slideshow li:nth-child(4) {background-image:  url(../img/header_contaflex_mobil-1898.jpg);animation-delay: 15s;}
	.slideshow li:nth-child(5) {background-image:  url(../img/header_contaflex_mobil-1912.jpg);animation-delay: 20s;}
	.slideshow li:nth-child(6) {background-image:  url(../img/header_contaflex_mobil-1916.jpg);animation-delay: 25s;}
	.slideshow li:nth-child(7) {background-image:  url(../img/header_contaflex_mobil-1919.jpg);animation-delay: 30s;}
	.slideshow li:nth-child(8) {background-image:  url(../img/header_contaflex_mobil-1921.jpg);animation-delay: 35s;}
	

.aboutme .banner {
	background-image:url(../img/header_mobil.jpg);
	background-size: cover;
}
.myblog .banner {
	background-image:url(../img/header_mobil.jpg);
	background-size: cover;
}
.webdesign .banner {
	background-image:url(../img/header_mobil.jpg);
	background-size: cover;
}
.erweiterungen .banner {
	background-image:url(../img/header_mobil.jpg);
	background-size: cover;
}
.fotografie .banner {
	background-image:url(../img/header_mobil.jpg);
	background-size: cover;
}
.galerien .banner {
	background-image:url(../img/header_getreide_wassertropfen.jpg);
	background-size: cover;
}
*/


	

}