/* = = = = = = = = = = = = = = = = = datei format.css = = = = = = = = = = = = = = = = = = = = = = = = = */


/* ############################################################ */
/* allgemein */
/* ############################################################ */

*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

html, body {
font-family:'open_sanslight',georgia, tahoma, arial, Verdana, Segoe, 'Open Sans',helvetica,roboto ,sans-serif;
font-size:62.5%;
line-height:1.5;
font-weight:normal;
min-height:100%;
}

body {overflow-x:hidden;
color:#61380B;
font-size:1.7rem;
margin: 0 auto;
background-image:url(../images/logo01.jpg);
background-position:50% 0%;
background-repeat:no-repeat;
background-attachment:fixed;
background-size:auto;
}

/* unterseiten-hintergrundbilder */

body.logobild-01 {
background-image:url(../images/logo02.jpg);
}

body.logobild-02 {
background-image:url(../images/logo03.jpg);
}

body.logobild-03 {
background-image:url(../images/logo04.jpg);
}

body.logobild-04 {
background-image:url(../images/logo05.jpg);
}

body.logobild-05 {
background-image:url(../images/logo06.jpg);
}

body.logobild-06 {
background-image:url(../images/logo07.jpg);
}

body.logobild-07 {
background-image:url(../images/logo08.jpg);
}

body.logobild-08 {
background-image:url(../images/logo09.jpg);
}

body.logobild-09 {
background-image:url(../images/logo10.jpg);
}

body.logobild-10 {
background-image:url(../images/chakras.jpg);
}

audio {
  width: 80%;
}


/*  berschriften */

h1, h2, h3, h4, h5 {color:#61380B;
text-align:left;
letter-spacing:0px;
font-weight:bold;
text-transform:none;
}

h1 {
font-size:3rem;
line-height: 3.5rem;
margin-top: 0rem;
margin-bottom: 5.2rem;
}

h2 {
font-size:2.5rem;
line-height: 3rem;
margin-top: 1rem;
margin-bottom: 3.5rem;
}


h3 {
font-size:1.8rem;
line-height: 2.3rem;
margin-top: 1rem;
margin-bottom:2.5rem;
letter-spacing:0rem;
}


/* allgemeine links, solche, die in den Texten verwendet werden  */

a {background:transparent;
color:#610B0B;
text-decoration: underline;
}

a:hover  {color:#000;
text-decoration:none;
}

/*   bersichtsseiten f r Klangschalen, Anfang eigener Teil an css Definitonen */

p.leerzeile 	{ margin:-5px 0 -5px 0; padding:0; font-size:0.5em; }

.warecontainer 	{ width:100%; text-align:center; vertical-align:top; margin-top:14px; margin-right:auto; margin-bottom:14px; margin-left:auto; padding:0px; }

.ware300 	{ width:300px; min-height:300px; display:inline-block; margin:2px; text-align:center; vertical-align:top; padding:10px; border:ridge medium #8E8E8E; }
.ware360 	{ width:300px; min-height:360px; display:inline-block; margin:0 0 2px 0; text-align:center; vertical-align:top; padding:10px 2px 4px 2px; border:ridge medium #8E8E8E; }
.ware440 	{ width:330px; min-height:460px; text-align:center; vertical-align:top; padding:20px; margin:20px 1% 20px 1%; display:inline-block; background-color: #F7BE81; border-radius:18px; }
.ware450 	{ width:260px; min-height:670px; text-align:center; vertical-align:top; padding:10px; margin:20px 1% 20px 1%; display:inline-block; background-color: #F7BE81; border-radius:18px; }
.ware530 	{ width:300px; min-height:530px; text-align:center; vertical-align:top; padding:4px; margin:20px 1% 20px 1%; display:inline-block; background-color: #F7BE81; border-radius:18px; }

/* Warenkorbtabelle  */
.warendiv 	{ width:auto; text-align:center; margin-top:4px; margin-right:auto; margin-bottom:4px; margin-left:auto; padding:0px; }
.warenkorb 	{ min-width:320px; max-width:800px; min-height:120px; text-align:center; margin-top:2px; margin-right:auto; margin-bottom:2px; margin-left:auto; padding:2px 2px 2px 2px; background-color:#fce3be; border-style:solid; border-color:#411307 #AD6A59 #AD6A59 #411307; border-width:1px; border-radius:36px 36px 36px 36px; -moz-border-radius:36px 36px 36px 36px; -webkit-border-radius:36px 36px 36px 36px; box-shadow: 10px 10px 40px #6B2918; filter:alpha(opacity=80); /* IE */ opacity:0.8; /* allgemein */ -moz-opacity:0.8; /* Mozilla */ -khtml-opacity:0.8; /* KTHML */ -opera-opacity:0.8; /* Opera */ }
p.warenzeile 	{ text-align:center; margin:0; padding:0; }
p.p100 		{ text-align:center; min-width:360px; max-width:480px; margin:22px auto 6px auto; padding:4px; }


/* Spalten mit links- und rechts-Ausrichtung */

.columnleft.listleft 	{ max-width:260px; min-width:200px; display:inline-block; margin:0; text-align:left; vertical-align:top; padding:4px 1% 4px 0px; }
.columnright.listright 	{ max-width:260px; min-width:200px; display:inline-block; margin:0; text-align:right; vertical-align:top; padding:4px 0px 4px 1%; }
.columnleft 	{ width:260px; display:inline-block; margin:0; text-align:center; vertical-align:top; padding:4px 2% 4px 0px; }
.columnright 	{ width:260px; display:inline-block; margin:0; text-align:center; vertical-align:top; padding:4px 0px 4px 2%; }




/* Zeile (P) mit gr  erer fetter Schrift. Links und Rechtsb ndig */

p.lpleft 	{ margin:0; padding:0; text-align:left; font-size:1.1em; font-weight:bold; }
p.lpright 	{ margin:0; padding:0; text-align:right; font-size:1.1em; font-weight:bold; }

/* Grafikgalerien umschlie ender Container */
.thumbcontainer { width:100%; text-align:center; vertical-align:top; margin-top:0px; margin-right:auto; margin-bottom:10px; margin-left:auto; padding:0px; }

/* Grafiken Einzelcontainer, je Einzel-Grafik */
div.imgfloat 	{ width:220px; height:164px; padding:0; margin:15px 1% 15px 1%; display:inline-block; }
div.imgfloat2 	{ width:200px; height:200px; padding:0; margin:50px 1% 15px 1%; display:inline-block; border-style: solid; border-width: 5px; border-color: #FA8258; border-radius: 2%;}

.textcontainer 	{ width:100%; text-align:center; font-size: 1.1em; vertical-align:top; margin-top:14px; margin-right:auto; margin-bottom:14px; margin-left:auto; padding:0px; }
.sitedescription { width:60%; min-width:320px; margin-top:10px; margin-right:auto; margin-bottom:10px; margin-left:auto; padding:10px; text-align:justify; font-size:1.2em; border-style:solid; border-width:0px; }
.kundebestellueberschrift { width:auto; padding-top:10px; margin:0; height:60px; background-color:#f9dca2; font-size:1.1em; }
.kundebestell 	{ width:auto; padding:8px; margin:0; min-height:40px; }

.bildcontainer {
	position: relative
}

.bildcontainer img {
	position: absolute;
	top: -76px;
	right: 10px;
}

.bildcontainer2 {
	position: relative
}

.bildcontainer2 img {
	position: absolute;
	top: -76px;
	right: 70px;
}

.bildcontainer3 {
	position: relative;
}

.bildcontainer3 img {
	position: absolute;
	top: -107px;
	right: 60%;
}

.orderbutton {
	background-color: #C18004; 
	color: #7c3604; 
	font-size: 1.1em;
    font-weight: bold;	
	border: 5px solid #f6c9a8; 
	border-set: groove; 
	padding: 5px;
	width: 350px;
}

.new { text-align: center;
max-width: 600px;
}

a.new {
text-decoration: underline;
font-weight:bold;
}

h1.new {
text-align: center;
font-size:2.5rem;
line-height: 3.5rem;
margin-top: 0rem;
margin-bottom: 0.2rem;
}

a.one {background:transparent;
text-decoration: underline;
}

a.one:hover  {color:#f9852c;
text-decoration:none;
}

p.one { text-align:justify; }

h1.one { text-align: center;
         font-size:2.5rem;
         line-height: 3.0rem;
         margin-top: 0rem;
         margin-bottom: 3.2rem;
}

h1.two { text-align: center;}
h2.two { text-align: center;}
h3.two { text-align: center;}

.chakras {
   display: grid;
   justify-content: center;
   align-items: center;
}

.chakrabox {display:inline-block;
text-align: center;
width:100%;
vertical-align:top;
padding:.2rem;
margin:0 -.2rem 0 -.2rem ;/* ausgleich ( minus-margin) f r INLINE-BLOCK-WHITESPACE-BUG*/
}

.enger {max-width: 1200px; 
 margin-left: auto;
  margin-right: auto;
}

.zweispalten {width:50%; padding:10px 20px 10px 20px;
}

img.resize {
    width:300px; /* you can use % */
    height: auto;
}

.tableresp { 
    width: 100%; 
    overflow: auto;
}

/* Ende eigener Teil an css Definitonen */



/* Bildbox mitten auf der Seite */

#box1 {
  width: 400px;
  height: 400px;
  background-color: white;
  background-image: url("images/logo01.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  opacity: 0.8;
}

/* ############################################################ */
/*  speziell*/
/* ############################################################ */

.container_haupt {height:100%;
margin:0 auto;
padding:0;
width:100%;
}


/* bilder  anpassen der gr sse  */
/*
wenn sie eigene einzelne bilder einbauen, unabh ngig von unserem bilderstystem,
dann werden diese bilder maximal (max-width) so gross wie die original-abmessungen des bildes
bwz. des umschliessenden containers wenn vorhanden
*/

img {max-width: 100%;
height: auto;
margin:0 auto;
}



/* = = = = = = = = = =  = = = = = = = = = =  = = = = = = = = = = = = = = = = = = = = */
/*  GRID-SYSTEM #1  - mit DISPLAY:INLINE-BLOCK */
/*  fuer boxen und bilder */
/* = = = = = = = = = =  = = = = = = = = = =  = = = = = = = = = = = = = = = = = = = = */

.wrapper-box {display:block;
text-align:center;
padding:0rem;
}

.box {display:inline-block;
width:100%;
vertical-align:top;
text-align:center;
padding:.2rem;
margin:0 -.2rem 0 -.2rem ;/* ausgleich ( minus-margin) f r INLINE-BLOCK-WHITESPACE-BUG*/
}

.box-b {display:inline-block;
width:100%;
vertical-align:top;
text-align:center;
padding:.2rem;
margin:0 -.2rem 0 -.2rem ;/* ausgleich ( minus-margin) f r INLINE-BLOCK-WHITESPACE-BUG*/
}

.box-1_of_1 ,
.box-1_of_2 ,
.box-1_of_3 ,
.box-1_of_4,
.box-1_of_3b {width:100%;
}

.box-1_of_4b {width:50%;
}

.box-1_of_4c {width:260px;
}

.box-1_of_10 {width:10%;
}

.box-1_of_5 {width:20%;
}

.box-1_of_6 {width:30%;
}



#Zweispaltig .box-1_of_2 {width:50%; padding:10px 40px 10px 40px;
}

#gallery .box-1_of_3 {width:33.33%;
}

.box img,
.box a img {display:block;
box-shadow:none;
width: 100%;
height: auto;
border-style: solid; 
border-width: 5px; 
border-color: #ffffff; 
border-radius: 2%;
}

.box-b img,
.box-b a img {display:block;
box-shadow:none;
width: 100%;
height: auto;
}



/* ############################################################ */
/* logo bereich */
/* ############################################################ */

.logo {display:block;
width:100%;
margin:0;
padding:0;
box-shadow:1px 1px 1px white;
}

.logobox-a  {display:table;
width:100%;height:100vh;
margin: 0 ;
padding:0;
}


/* name */

#name  {display:table-cell;
background:rgba(0,0,0,.3);
color:#fff;text-align:center;vertical-align:middle;
text-shadow:1px 1px 1px #000;
font-weight:bold;
font-size:3.0rem;
line-height:3.8rem;
padding:1rem ;
}

#name span {
font-size:1.6rem;
font-style:normal;
color:#fff;
}

/* seitentitel - z.b.  -home- */
#name b {display:block;
font-size:1.4rem;text-transform:uppercase;
letter-spacing:2px;
}


/* ############################################################ */
/* bereich content */
/* ############################################################ */

.inhalt {display:table;
width:100%;
/*margin:0;*/
margin-left: auto;
margin-right: auto;
padding:0;
background:#fff;/* IE9*/
}

.inhaltbox-a {
display:table-cell;
width:260px;height:100vh;
margin-left: auto;
margin-right: auto;
padding:10vh 1vw;
text-align:left;
vertical-align:top;
background-color: hsla(35, 80%, 84%, 0.3);
}


/* ############################################################ */
/* bereich fuss */
/* ############################################################ */

.fuss {POSITION:relative;
width:100%;
margin:0;
background-image:url(../images/logo01.jpg);
background-position:50% 100%;
background-repeat:no-repeat;
background-attachment:fixed;
height:100vh;
background-size:auto;
}

/* unterseiten-hintergrundbilder */

.fuss.logobild-01{
background-image:url(../images/logo02.jpg);
}

.fuss.logobild-02{
background-image:url(../images/logo03.jpg);
}

.fuss.logobild-03{
background-image:url(../images/logo04.jpg);
}

.fuss.logobild-04{
background-image:url(../images/logo05.jpg);
}

.fuss.logobild-05{
background-image:url(../images/logo06.jpg);
}

.fuss.logobild-06{
background-image:url(../images/logo07.jpg);
}

.fuss.logobild-07{
background-image:url(../images/logo08.jpg);
}

.fuss.logobild-08{
background-image:url(../images/logo09.jpg);
}

.fuss.logobild-09{
background-image:url(../images/logo10.jpg);
}

.fuss.logobild-10{
background-image:url(../images/chakras.jpg);
}



.fussbox-a {display:inline-block;
text-align:center;vertical-align:middle;
width:100%;
padding:6vh 6vw ;
}


/* -----menu  ----- */

#menu-fuss ul {text-align:center;
padding:0rem;
margin:0;
}

#menu-fuss  li {list-style:none;display:inline;
padding:0rem 0rem;
margin:0;
line-height:2rem;
}

#menu-fuss li a {position: RELATIVE;
display: inline-block;
overflow: hidden;
font-size:1.4rem;
letter-spacing:0rem;
padding-right:0rem ;
margin: -1px;
padding:.5rem .7rem;
text-decoration : none;
color:#000;
background: #5f5f5f;/*IE9*/
background:rgba(255,255,255,.7);
border: 1px solid #efefef;
border-radius: 4px;
}


#menu-fuss li a:hover {color:#000;
background:#f4f4f4;/*IE9*/
background:radial-gradient(circle,#FDFDFD,#F4F4F4);
}



/* fussname */

#fussname  {display:block;
overflow: hidden;
background:#000;
color:#EFEFEF;
font-weight:normal;
font-size:1.5rem;
padding:1vh 3vw;
text-align:center;
position:ABSOLUTE;bottom:0rem;
transform:rotate(-90deg);transform-origin:0% 0%;
}

#fussname .top-box-filter {display: inline-block;
POSITION: absolute;
left: -200%;
height: 200%;
width: 20px;
background: rgba(135,205,250,.5);
opacity: 0.8;
box-shadow: 0px 0px  30px white;
transform: rotate(0deg);transform-origin:0% 0%;
ANIMATION:shine-effect 6s 1s infinite;
}

/* slogan */

.slogan  {display:inline-block;
color:#fff;
transform:rotate(-45deg);
transform-origin:50% 100%;
font-weight:normal;
text-shadow:3px 3px 5px black;
font-size:2.2rem;
padding:1vh 3vw;
margin-top:30vh;
text-align:center;
}


/* ############################################################ */
/* M E D I A   Q U E R I E S - RESPONSIVE-BILDSCHIRMABFRAGEN */
/* ############################################################ */

/* ==================================== ab 320 pixel ================================== */


/* - - - - -  nur info - - - - - */
/*  f r die kleinste smartphone-aufl sung von 320pixel ben tigen wir KEINE bildschirmabfragen (media queries),
denn hierf r gilt ja automtisch der gesamte vorstehende quelltext-code -
weil wir das template ja 'mobile-first' angelegt haben */



/* ==================================== ab 360 pixel ================================== */

@media (min-width: 360px) {

/* keine angabe */





/* ==================================== ab 400 pixel ================================== */

@media (min-width: 400px) {

/* keine angabe */

.ware450 	{ width:330px; min-height:670px; text-align:center; vertical-align:top; padding:10px; margin:20px 1% 20px 1%; display:inline-block; background-color: #F7BE81; border-radius:18px; 
}

.inhaltbox-a {
display:table-cell;
width:100%;height:100vh;
margin-left: auto;
margin-right: auto;
padding:10vh 1vw;
text-align:left;
vertical-align:top;
background-color: hsla(35, 80%, 84%, 0.3);
}

/* Spalten mit links- und rechts-Ausrichtung */

.columnleft.listleft 	{ max-width:300px; min-width:200px; display:inline-block; margin:0; text-align:left; vertical-align:top; padding:4px 1% 4px 0px; }
.columnright.listright 	{ max-width:300px; min-width:200px; display:inline-block; margin:0; text-align:right; vertical-align:top; padding:4px 0px 4px 1%; }
.columnleft 	{ width:340px; display:inline-block; margin:0; text-align:center; vertical-align:top; padding:4px 2% 4px 0px; }
.columnright 	{ width:340px; display:inline-block; margin:0; text-align:center; vertical-align:top; padding:4px 0px 4px 2%; }



}

/* ==================================== ab 480 pixel ================================== */

@media (min-width: 480px) {

/* keine angabe */


}

/* ==================================== ab 580 pixel ================================== */
@media (min-width: 580px) {

/* grid system */
.box-1_of_1 {width: 50%; }
.box-1_of_2 {width: 50%; }
.box-1_of_3 {width: 33.33%;  }
.box-1_of_3b {width: 33.33%; }
.box-1_of_4 {width: 25%; }
.box-1_of_4c {width: 300px; }

/* ende grid system */

#menu-fuss li  {display:inline; }

.box-1_of_2 {padding:0 10px 0 10px;}

audio {
  width: 60%;
}

}

/* ==================================== ab 640 pixel ================================== */
@media (min-width: 640px) {

/* keine angabe */
.box-1_of_2 {padding:0 20px 0 20px;}

}

/* ==================================== ab 760 pixel ================================== */
@media (min-width: 760px) {

html {font-size:70%;}

.logobox-a {height:46rem; }

/* grid system */
.box-1_of_3b {width: 100%; }
/* ende grid system */

.inhalt {
background:radial-gradient(circle at 50% 0%,
rgba(255,255,255,.6) 300px,#fff 500px );
}

.box-1_of_2 {padding:0 20px 0 20px;}

.slogan {font-size:3.5rem;}

.bildcontainer img {
	position: absolute;
	top: -36px;
	right: -10px;
}

.bildcontainer2 img {
	position: absolute;
	top: -36px;
	right: 50px;
}

.bildcontainer3 img {
	position: absolute;
	top: -77px;
	right: 89%;

}



/* ==================================== ab 960 pixel ================================== */
@media (min-width: 960px) {

.inhaltbox-a {text-align:justify;/* blocksatz */ }

/*  grid system */
.box-1_of_4 {width: 25%; }
/* ende grid system */

.bildcontainer img {
	position: absolute;
	top: -86px;
	right: -10px;
}

.bildcontainer2 img {
	position: absolute;
	top: -86px;
	right: 50px;
}


.bildcontainer3 img {
	position: absolute;
	top: -120px;
	right: 92%;
	
}


/* ===================================== ab 1100 pixel ================================= */

@media (min-width: 1100px) {

html { font-size:75%; }

.logobox-a {padding-top:4rem;/* da horizontales men  erscheint */ }


}


/* ===================================== ab 1200 pixel ================================= */

@media (min-width: 1200px) {

/* grid system */
.box-1_of_3b {width: 33.33%; }
/* ende grid system */


}


/* ===================================== ab 1400 pixel ================================= */

@media (min-width: 1400px) {

html { font-size:80%; }


}





/* +  +  +  +  + +  +  +  +  +  C O D E ENDE  +  +  +  +  +  +  +  +  +  + */