/* CSS Document Beatrice Strub Rituale */



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

hauptfenster mittig

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

body {background-color:#dee6f0;}

#main{
	position: relative;
	width: 900px;
	height: 720px;
	z-index: 10;
	margin-left: auto;
	margin-right: auto;
	top: 40px;
	background-color: #ffffff;
        }

#logo{

        position: absolute;

        width: 219px;

        height: 75px;

        z-index: 100;

        right: 25px;

        top:19px;

        }
	
.fbin{
	position: absolute;
	width: 47px;
	height: 79px;
	z-index: 500;
	left: -4px;
	top: 490px;
	float: none;
        }



#telmobimail{

        position: absolute;

        width: 41px;

        height: 47px;

        z-index: 100;

        right: 126px;

        top:139px;

        }



#adresse{

        position: absolute;
        width: 143px;
        height: 58px;
        z-index: 100;
        right: 32px;
        top:113px;
     
        font-size:11px; 
        color:#718aa7; 
        font-weight:normal; 
        line-height:120%; 
        text-align:right;

        }



#email{

        position: absolute;

        width: 143px;

        height: 12px;

        z-index: 100;

        right: 32px;

        top:165px;

        }



#zeichnung{

        position: absolute;

        width: 479px;

        height: 432px;

        z-index: 30;

        left: 210px;

        top:40px;

        }



#mainmenu{

        position: absolute;

        width: 244px;

        height: 132px;

        z-index: 70;

        left: 38px;

        top:32px;

        }



#mitreden{
	position: absolute;
	width: 900px;
	height: 20px;
	z-index: 130;
	left: 0px;
	bottom: 16px;
        }


#textfeld{

        position: absolute;

        width: 830px;

        min-height: 150px;

        z-index: 130;

        left: 38px;

        top:488px;

        }
		
.light{
		text-align:left;	
		float:left;
 		/*margin-right: 2%;*/
		 padding: 11px;
		 background:#fff;
		 box-sizing: border-box;
		}
       
/*     Mobile Anpassungen -  Großansicht    */


#zeichnungen{ position: absolute;  width:900px; height:384px;  z-index: 100;  text-align:center;     top:200px;}
#indexbildgross { position: absolute;  width: 731px; height:561px;  z-index: 10;      left: 147px;    top:70px;}
#indexhochzeit{ position: absolute;   width: 188px; height:44px;  z-index: 120;     left: 74px;    top:78px;}
#indexlebensfeier{
	position: absolute;
	width: 139px;
	height: 46px;
	z-index: 120;
	left: 32px;
	top: 191px;
}
#indexabschied{
	position: absolute;
	width: 112px;
	height: 51px;
	z-index: 120;
	left: 21px;
	top: 302px;
}
#indexgeburt{
	position: absolute;
	width: 117px;
	height: 54px;
	z-index: 120;
	left: 45px;
	top: 422px;
}
#indexlightbox{position: absolute; width: 112px; height: 51px; z-index: 120; left: 732px; top: 602px;}
#uebermich #foto{ position: absolute;  width:290px; height:384px;  z-index: 100;      left: 505px;    top:0px;}
#kontakt #foto{ position: absolute;  width:290px; height:384px;  z-index: 100;      left: 425px;    top:0px;}


        
#arbeitsweise #main {
	height: 820px;
}

#arbeitsweise #textfeld {
top:320px;

}

#lightbox #main {
	height: 820px;
}

#lightbox #textfeld {
top:320px;

}

#uebermich #main {
height:768px;
}

#uebermich #textfeld {
top: 300px;
width: 480px;
}

#trauer #main {
height:785px;
}

#links #main {
height:1200px;
}

#lebensfeier #main {
	height: 740px;
}

#lightbox #main {
	height: 780px;
}

#kontakt #main {
height: 666px;
}

#kontakt #textfeld {
top: 300px;
width: 380px;

}

#hochzeit #main {
height: 740px;
}

#geburt #main {
height: 703px;
}

h1.mobil {
display: none;
}

.fett {
font-weight: bold;
}

#footer {
width:100%;
}

#footer p, #footer a {
text-align: center;
color: #55a2fb;
}


       
@media screen and (max-width: 680px) {

body {background-color:white;}


#main {
position: relative;
width: 100%;
margin-left: 0px;
height: auto;
left: 0;
top: 0;
}



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

.fbin{
	position: absolute;
	width: 47px;
	height: 79px;
	z-index: 500;
	left: 250px;
	top: 402px;
	float: none;
        }
		
.fbin img{
	width:25px;
	height:auto;
	float:none;}




/*     Mobile Anpassungen für die Startseite    */

h1.mobil {
display: block;
text-align: left !important;
font-size: 17px !important;
background-color: yello;
font-weight: normal;
margin: 20px 0 20px 0;
letter-spacing: 2;
font-family: calibri, sans-serif;
}

#index h1.mobil {
display: block;
text-align: center !important;
font-size: 17px !important;
background-color: yello;
font-weight: normal;
margin: 20px;
letter-spacing: 2;
font-family: calibri, sans-serif;
}

#indexhochzeit, #indexlebensfeier, #indexabschied, #indexgeburt, #indexlightbox{
position: relative;
width: auto;
margin-left: 0px;
height: auto;
left: 0;
top: 0;
display: inline;
}

#indexmobil-navi {
text-align: center;
padding: 20px;
border-bottom: 1px solid #8499b4;
margin-bottom: 20px;
}

#indexmobil-navi img {
padding: 2px;
height: 50px;
border: 1px solid gray;
margin: 5px;
}

#indexbildgross {
position: relative;
max-width: 100%;
height: auto;
left: 0;
top: 0;
}


/*     Mobile Anpassungen der Unterseiten    */
 
.mobilunsichtbar  {
display: none !important;
}

#zeichnung {
position: relative;
width: 40%;
margin-left: 0px;
margin-top: 20px;
height: auto;
left: 0;
top: 0;
}

#zeichnungen {
position: relative;
width: 100%;
margin-left: 0px;
height: auto;
left: 0;
top: 0;	
}

 #logo {
position: relative;
width: 60%;
margin-left: 0px;
height: auto;
left: 0;
top: 0;
}	

#adresse {
padding-bottom: 30px;

}

#mainmenu, #adresse, #telmobimail{
position: relative;
width: 100%;
margin-left: 0px;
height: auto;
left: 0;
top: 0;
text-align: left;
}

#mainmenu {
margin: 0px 0 0 -9px !important;
padding: 10px 0 10px 20px;
border-bottom: 1px solid #8499b4;
border-top: 1px solid #8499b4;
background-color: #d6dde7;
width: 100%;
}

#textfeld, #mitreden {
position: relative;
width: 100%;
margin-left: 0px;
height: auto;
left: 0;
top: 0 !important;
text-align: left;	
}
#abstandmobil{
	margin:100px;}

/*#footer {

margin-top: 20px;

}*/
#footer {
    background-color:rgba(255,255,255,1);
	border-top: 1px solid #8499b4;
	position: fixed;
    bottom: 0px;

}

#footer p, #footer a {
text-align: left !important;
}

table{
position: relative;
width: 120%;
left: 0;
top: 0;
}

td {
width: 400px;
}

#uebermich #foto {
position: relative;
width: 100%;
margin-left: 0px;
height: auto;
left: 0;
top: 0 !important;
text-align: left;		
}

#uebermich #foto img {
width: 50%;
margin-bottom: 40px;
}

#uebermich #textfeld {
top: 0px;
width: 90%;
}

#kontakt #foto {
position: relative;
width: 100%;
margin-left: 0px;
margin-top: 20px;
height: auto;
left: 0;
top: 0 !important;
text-align: left;		
}

.abstand {
display: block;
margin-top: 10px;
}

#kontakt td {
text-align: left;
}

.kontakt-spalte {
width: 50px;
}

td.leer {
width: 0px !important;
}
 
 }