body {
width:100vw;
position:fixed;
}
button{
background-color:white;


}

#footer{
display:none;
}

#mainbox{
width:100vw;
position:absolute;

left: 0vw;
}

h1{
font-size: 1.3em;
}

h2{
font-size: 1.1em;
background: inherit;
}

h3{
font-size: 1em !important;
line-height: 1em;
}

ul{
max-width:85%;
}

.listenbutton{
display:inline;
z-index:100;
}

#middlebox img{
max-width:98vw;
}


#middlebox{


margin: 3px 3px;
}

.iphoneliste{
margin-top:-0.2em;
}

#iphonebox{
display:inline;
position:fixed;

left:0vw;
width:100vw;
overflow-y: scroll;
z-index: 0;
transition: -webkit-transform 0.5s;
transition: -ms-transform 0.5s;
transition: -moz-transform 0.5s;
transition: -o-transform 0.5s;
transition: transform 0.5s;
-webkit-overflow-scrolling:touch;
z-index:0;
}


#listenbildli{
-webkit-transform: scale(1,1);
-ms-transform: scale(1,1);
-moz-transform: scale(1,1);
-o-transform: scale(1,1);
transform: scale(1,1);
}

#listendreieck{
-webkit-transform: scale(1,0);
-ms-transform: scale(1,0);
-moz-transform: scale(1,0);
-o-transform: scale(1,0);
transform: scale(1,0);
}

.menu{
position:fixed;
-webkit-transform: scale(1,0);
-ms-transform: scale(1,0);
-moz-transform: scale(1,0);
-o-transform: scale(1,0);
transform: scale(1,0);
transition: -webkit-transform 0.5s;
transition: -ms-transform 0.5s;
transition: -moz-transform 0.5s;
transition: -o-transform 0.5s;
transition: transform 0.5s;
-webkit-user-select: none;
z-index:110;
}

#listenbildliklein{
position: relative;
left: 0vw;
top: 2vw;
height: 11vw;
width: 11vw;
}

#listen3eck{
position:absolute;
top: 1vh;
left: 0.4vw;
height: 11vw;
width: 11vw;
display:none;
transition: -webkit-transform 0.5s;
transition: -ms-transform 0.5s;
transition: -moz-transform 0.5s;
transition: -o-transform 0.5s;
transition: transform 0.5s;
}

.angebotstextbox{
top: 4vh;
position: relative;
}

.kleinmenu{
position: fixed;
top: 30vh;
left: 2vw;
}

.menuh1{
position: relative;
left: 14vw;
width:30vw;
}

.listenstrichli{
position: relative;
left: 10%;
top: 0%;
height: 10%;
width: 85%;
margin-bottom: 20%;
background-color: #fff;
-moz-border-radius:1em 1em 1em 1em;
-webkit-border-radius:1em 1em 1em 1em;
border-radius: 1em 1em 1em 1em;
transition: -webkit-transform 0.5s;
transition: -ms-transform 0.5s;
transition: -moz-transform 0.5s;
transition: -o-transform 0.5s;
transition: transform 0.5s;
}

.angebot{
background-color: black;
}

#header{
position: fixed;
background-image: url('http://marianna-mackay.ch/testsite/images/himmeloben.jpg');
background-size: 100%;
background-position: 00% 0%;
background-repeat: no-repeat;
z-index: 0;
}

.listenpunkt{
margin-bottom: -1.4em
}

.listerechts{

}

#layer{
position: fixed;
top: 2vh;
left: 0px;
background-color: rgba(255, 236, 174, 0.48);
color: rgba(233, 137, 14, 1);
height: 5vh;
width: 100%;

font-size: 4vh;
padding: 1vh 0vh 0vh 4vh;
z-index:100;
}

#titelbutton{
position:absolute;
z-index:100;
background-image:url('http://marianna-mackay.ch/testsite/images/himmelunten.jpg');
background-size:600%;
}

#buttonbild{
margin:3% 7%;
height:94%;
}
#titelbildbox{
position: fixed;
top: 9vh;
left: 9px;
width: calc(100vw - 18px);
height:calc(((100vw - 18px)/980)*355);
background-size: 100%;
background-repeat: no-repeat;
}

#titelbild{
position: fixed;
top: 9vh;
left: 9px;
width: calc(100vw - 18px);
height: calc(((100vw - 18px)/980)*355);
background-size: 100%;
background-repeat: no-repeat;
box-shadow: 0px 5px 10px 5px #1a150c;
background-image:url('http://marianna-mackay.ch/images/stories/30/slide/slider6.jpg');
}



 #rahmenumsbild{
	position: fixed;
	width: calc(100vw - 18px);
height:calc(((100vw - 18px)/980)*355);
border:solid 1px black;

top: 9vh;
left: 9px;


background-size: 100% 100%;
background-repeat: no-repeat;
box-shadow: 0px 5px 10px 5px #1a150c;
background-image: url(http://marianna-mackay.ch/images/astrologie4.jpg);
	}
	
#unterrueck{
position:absolute;
top:1vh;
left:80vw;
height:8vw;
width:8vw;
}

#unterrueck .listenpfili{
transform:rotate(90deg);
}

#titelbildbild{
position: fixed;
top: 11vh;
left: 9px;
width: calc(100vw - 18px);

background-size: 100%;
background-repeat: no-repeat;
box-shadow: 0px 5px 10px 5px #1a150c;
background-image:url('http://marianna-mackay.ch/images/stories/30/slide/slider6.jpg');
z-index:99;
}

.mandalazeichen {
color: rgb(255, 102, 0);
font-size:1.5em;
}

.mandalas {
display: flex;
flex-direction: column;
align-items: center;
}

.mandalas p, .mandalas h1, .mandalas h2, .mandalas h3{
text-align: center;
}
/*////////////////////////////////////////////////////////////*/

@media only screen and (orientation : portrait){ 

#iphonebox{
top:25vh;
height:60vh;
}



#header{
top:0px; left:0vw;
width:100vw;
height:12vh;
padding:2vh 0vw;
}

#logo{
position: absolute;
top: 0vw;
width: 70vw;
height: 11vh;
background-size: 100%;
background-position: 0% 20%;
background-repeat: no-repeat;
background-image: url('http://marianna-mackay.ch/testsite/images/logoiphone2.png');
left: 1vw;
}

.listenbutton{
position: absolute;
top: 1vh;
}

#textbox table{
position:relative;
top:0px;
left:0px;
width:96vw !important;
padding:0px !important;
margin:0px !important;
}

#textbox table td{
vertical-align:top;
}

#textbox table tr td:first-child{
display:inline-block;
width:44vw;
}
#textbox table tr td:nth-child(2){
display:inline-block;
text-align:right;
width:24vw;
}

#textbox table tr td:nth-child(3){
display:inline-block;
text-align:left;
width:21vw;
margin-left:2vw;
}

#bildbox{
position:relative;
width:calc(100vw - 18px);
margin:5px;
padding: 0vh 0vw 0vh 0vw;

}
#titelbutton{
top:0vh;
left:0px;
width:100%;
height:90vw;
}
#textbox, #textbox2, textbox3{
border:none;
padding: 0 2vw;
}

.listenbildli{
position:absolute;
left:86vw;
top:2vw;
height:11vw;
width:11vw;
}

.listenpfili {
display:block;
width: 100%; 
height: 100%;
background-image:url('../images/pfeil.png');
background-repeat:no-repeat;
background-size:100%;
background-position:50% 80%; 
/*border-left: 5vw solid transparent;
border-right: 5vw solid transparent;
border-bottom: 5vw solid #fff;*/

-webkit-transform:rotate(180deg);
}

#unterrueck{
top: 0vh;
left: 75vw;
}

.menu{
top: 9vh;
left: 0px;
font-size: 8vh;
width: 100%;
background-color: rgba(10, 36, 83, 0.7);
background-image: url('http://marianna-mackay.ch/testsite/images/himmelunten.jpg');
background-repeat: no-repeat;
background-position: 5.7% 70%;
}



.menuitem a {
color: #e77824;
font-size: 4vh;
}

.menuitem {
font-size: 4vh;
background-color: #fff;
color: #e77824;
padding: 1vh 5vw 0vh 5vw;
margin: 2vh auto 2.5vh auto;
width: 70vw;
height: 5vh;
border-radius: 4vh;
text-decoration: none;
}

.keinbild{
height:8vh;
}

#textbox img{
max-width:80vw !important;
margin-left:5vw;
}

}


/*/////////////////////////////////////////////////////////////*/


@media only screen and (orientation : landscape){ 

#iphonebox{
top: 35vh;
height: 50%;
}

h1{
font-size:6vh;
}

h2{
font-size:0.9em;
background: inherit;
}

h3{
/*font-size: 0.7em !important;*/
line-height: 1em;
}
#textbox table{
position:relative;
top:0px;
left:0px;
width:96vw !important;
padding:0px !important;
margin:0px !important;
}

#textbox table td{
vertical-align:top;
font-size:1em;
}

#textbox table tr td:first-child{
display:inline-block;
width:40vw;
}
#textbox table tr td:nth-child(2){
display:inline-block;
text-align:right;
width:27vw;
}
#textbox table tr td:nth-child(3){
display:inline-block;
text-align:left;
width:27vw;
margin-left:2vw;
}


#titelbild{
top: 3vh;
left: 32%;
width: calc(62vw - 18px);
height: calc(((62vw - 18px)/980)*355);
}

#titelbildbild{
top: 3vh;
left: 32%;
width: calc(62vw - 18px);
}

#titelbildbox{
top: 3vh;
left: 32%;
width: calc(62vw - 18px);
height: calc(((62vw - 18px)/980)*355);
}

#rahmenumsbild{
top: 3vh;
left: 32%;
width: calc(62vw - 18px);
height: calc(((62vw - 18px)/980)*355);
}

#header{
top:0px; left:0vw;
width:100vw;
height: 33vh;
}

#logo{
position: absolute;
width: 32vw;
height: 30vh;
background-size: 95%;
background-position: 30% 40%;
background-repeat: no-repeat;
background-image: url('http://marianna-mackay.ch/testsite/images/logoiphnonequer2.png');
left: 0vw;
top: 1vh;
}

#layer{
top: 2vh;
left: 0px;
background-color: rgba(255, 236, 174, 0.48);
color: rgba(233, 137, 14, 1);
height: 9vh;
width: 100%;
font-size: 8vh;
padding: 0vh 0vh 0vh 2vw;
z-index: -100;
}

#bild1{
border:none;
width:47vw;
padding: 0vh 0vw 0vh 0vw;
}

#bildbox{
float:right;
margin: 0vh 0vw 0vw 3vw;
padding: 0vh 3vw 0vh 0vw;
}

#textbox, #textbox2, #textbox3{
border:none;
margin-top: 7vh;
font-size:0.65em;
line-height:1em;
padding: 0 2vw;
}

#textbox h2, #textbox2 h2, #textbox3 h2{
font-size:1.1em;
}

.listenbildli{
position:absolute;
left:92vw;
top:5vh;
height:10vh;
width:10vh;
}

.listenpfili {
display: block;
width: 100%;
height: 100%;
background-image: url('../images/pfeil.png');
background-repeat: no-repeat;
background-size: 100%;
background-position: 50% 80%;
transform: rotate(270deg);
}

.menu{
padding-top: 1vh;
top: 0vh;
left: 0px;
font-size: 8vh;
width: 90vw;
height: 100vh;
background-color: rgba(10, 36, 83, 0.7);
background-image: url('http://marianna-mackay.ch/testsite/images/himmelunten.jpg');
background-repeat: no-repeat;
}

.menuitem{
position: relative;
width: 48%;
font-size: 9.5vh;
padding: 0vh 0vw 0vh 6vw;
height: 15vh;
}

.menuitem a {
font-size: 8vh;
background-color: #fff;
color: #e77824;
padding: 4% 5vw 2% 8vw;
margin: 2vw auto 2.5vw auto;
width: 48%;
height: 50%;
border-radius: 10vh;
text-decoration: none;
display: inline-block;
}

.kleinmenu{
position: fixed;
top: 30vh;
left: 2vw;
}

#listenbildliklein{
position: relative;
left: 0vw;
top: 2vw;
height: 6vw;
width: 6vw;
}

.listenstrichli{
position: relative;
left: 10%;
top: 0%;
height: 13%;
width: 85%;
margin-bottom: 20%;
background-color: #fff;
-moz-border-radius: 1em 1em 1em 1em;
-webkit-border-radius: 1em 1em 1em 1em;
border-radius: 2em 2em 2em 2em;
}

#listen3eck{
position: absolute;
position: absolute;
top: -14vh;
left: 70vw;
height: 8vw;
width: 8vw;
display: none;
transition: -webkit-transform 0.5s;
transition: -ms-transform 0.5s;
transition: -moz-transform 0.5s;
transition: -o-transform 0.5s;
transition: transform 0.5s;}
.angebot{
background-color: black;
}

#unterrueck{
top: 17vh;
left: 92vw;
height:8vh;
width:8vh;
}

.neben{
float:right;
top:-15vh;
}

.phone{
color: #fff;
} 

/*Kontaktformular*/
.error {color:red;}

.inputzeile p{
float:left;
padding:0vh;
margin:0px 0px 0px 20px;
width:5.8em;
font-size:18px;
}

.inputzeile input{
width:28%; 
}

.inputzeile textarea{
width:75%;
height:4em;
}

.inputzeile{
clear:left;
}

.kontaktformular{
margin:0px 0px 50px 0px;
padding:0px 0px 10px 0px;
}

.sendeknopf1{
margin:0px 0px 0px 20px;
} 

#richtig{
width:3em;
}

/*linkliste*/
.linkliste{
line-height:normal;
}

.listerechts{
width: 90%;
display: block;
word-wrap: break-word;
margin:-1em 0px 2em 0px;
}

.listelinks{
padding: 0vh 1.6vw 0vh 0vw;
}

.ortsliste{
line-height: normal;
font-size: 4.5vh;
margin: 0px 0px 1em 0px;
}

.pfeilliste{
line-height: 20px;
}

#menschtext{
margin-left:20px;
}

.keinbild{
height: 10vh !important;
top: 10vh !important;
}

.anstattbild{
font-size:200% !important;
text-align:center;
}
}