/*--- Sidan ska fylla från kant till kant på webbläsaren med en bakgrundsbild  ---*/
body{
margin: 0px;
text-align:center;
font-family: sans-serif;
background-color: #F2EF87;
background-image: url("blurred.png");
background-repeat: repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
}
/*--- Denna är till för att skapa en viss bredd på hemsidan, min så att kallade container ---*/
#Head,#mitt,#navigera,#footmiddle,#welcome,footer,#space,#extramitt,.mobile{
max-width: 1020px;
width: 100%;
display: table;
margin: 0px auto; 
background-color: #F2EF87;
border-radius: 5px;
}

/*--- Vit bakgrund i mitten---*/
#mitt,#extramitt{
background-color: white;
}
/*---Mitt-delen eller content delen  ---*/
#middle,#extramiddle{
color: black;
width: 100%;
box-sizing: border-box;
background-color: white;
border-radius: 5px;
padding-top: 10px;
padding-bottom: 40px;
padding-left: 5px;
padding-right: 5px;
text-align: left;
font-size: 1em;
}

/*--- Regler för menyn ---*/
#navuppe{
display: table-cell;
vertical-align: middle;
}
/*--- footer, clear both för att inte den ska gå i nåt annat element ---*/
footer{
background-color: transparent;
color: white;
clear: both;
}
/*Text regler för aktuellt sidan, ingen margin*/
#text p{
	margin: 0px;
}
h4{
	padding: 0px;
	margin:0px;
}
h3{
	padding: 0px;
	margin: 0px;
}
h2{
font-size: 2em;
padding: 0px;
margin: 0px;
font-weight: inherit;
}
h1{
font-size: 80px;
}
/*--- Figure element som logo-bilden ligger i ---*/
#figurelogo,#figurelogoo{
height: 100px;
margin: 0px;
padding-top: 0px;
float: left;
vertical-align: middle;
}
#logobild,#logobildd{
display: table-cell;
padding-top: 20px;
padding-left: 10px;
}
/*--- meny, ingen styling, lite padding för texten och så ska de ligga i rad ---*/
#meny li{
display: inline;
list-style: none;
padding: 0 10px 5px 5px;
}
/*--- Text storlek, färg och utseende för menyn---*/
#meny li a{
font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
font-size: 1em;
color: black;
text-decoration: none;
}
/*--- Första sidan, Välkomst text---*/
#welcome{
background-color: white;
padding-bottom: 25px;
padding-top: 20px;
clear: both;
font-family: 'Calligraffitti', cursive;
}
#welcome p{
font-family: 'Calligraffitti', cursive;
font-size: 30px;
color: blue;
}
/*--- Bild första sidan---*/
#bild{
margin: 0px auto;
padding: 0px;
max-width: 1020px;
height: 765px;
width: 100%;
}
/*--- Bild första sidan---*/
#image{
width: 100%;
height: 100%;
background-image: url(hus2.jpg);
background-repeat: no-repeat;
background-position: center center;
border-radius: 5px;
}
/*--- Mellanrum gyllene-snittet ---*/
#space{
background-color: transparent;
height: 80.9px;
}
div.space2{
background-color: transparent;
height: 50px;
clear:both;
}
/*Kontaktformulär, Input, Textfält och Skicka knapp*/
input{
	width: 50%;
	height: 2em;
}
textarea{
	width: 80%;
	height: 8em;
	margin-bottom: 1em;
}
Button{
	height: 3em;
	width: 10em;
}
/*Regler för galleri bilderna, en ram runt */
div.img {
    margin: 5px;
    border: 2px solid #ccc;
    float: left;
    width: 505px;
	padding: 10px;
	box-sizing:border-box;
}	
div.img:hover {
    border: 2px solid #777;
}
/*Bilden fyller ut div-taggen den ligger i*/
div.img img {
    width: 100%;
    height: auto;
}
/*Bild text*/
div.desc {
    padding: 15px;
    text-align: center;	
}
/*Hjärtan som bryter av i Aktuellt-sidan */
#hrstyle{
	background-image: url(heart.png);
	height: 27px;
	 border-style: none;
	 width: 95%;
	 box-sizing:border-box;
	
}
/* Meny regler - hamburger meny*/
.mobile{
  display: none;
  width: 99%;
}

.mobiletoggle{
	
    padding-top: 9px;
    padding-right: 10px;
	padding-bottom: 9px;
	padding-left: 10px;
	margin-top: 30px;
	margin-right: 15px;
   box-sizing:border-box;
background: url(http://i.imgur.com/vKRaKDX.png) center no-repeat;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-size: 80%;
    width: 44px;
    height: 34px;
    outline: none;
	float: right;
  
}
.mobiletoggle.expanded{
      background-color: transparent;
      border: 0;
}

.mobilediv{
	
	   max-height: 250px;
	border-top: 1px solid transparent;
	clear:both;
	display: none; 
	border-color: #BFBFBF;
	overflow-y: auto;
	overflow-x: auto;
}
.mobilediv a{
  background: #eee;
  text-align: left;
  padding: 15px ;
 /* border-bottom: 1px solid #ddd;*/
  text-decoration: none;
  color: #222;
  display: block;

}
.mobilediv a:hover{
background-color: #e7e7e7;;
}
#currentLink{
background: #D6D6D6;
}
.expand {
 display: block; 
}
/* Hamburger menyregler slutar här */


@media screen and (max-width: 1000px)  
	{
		/*Min container, skapar en bredd på 99% */
#Head,#mitt,#navigera,#footmiddle,#welcome,footer,#space{
			width:99%;
		}
		/*Bilden på första sidan*/
#bild{
width: 99%;
height: 600px;
background-color: transparent;
}
#image{
background-size: 100% auto;

}
/*Minskar rubriken på första sidan*/
h1{
	font-size: 70px;
}

}

	@media screen and (max-width: 800px) 
	{
	/*Flyttar ner menyn då den börjar gå i loggo-bilden*/	
#meny{
	float: left;
	width: 100%;
	padding: 0px;
}
/*Gör så att meny-knapparna får lite mellanrum*/
#meny li{
padding: 3%;
}
#navuppe{
	float: left;
	width: 100%;
}
/*Minskar höjden på figure elementet som loggo-bilden ligger i för att göra plats åt menyn */
#figurelogo,#figurelogoo{
	height: 60px;
}
	}
@media screen and (max-width: 700px)
	{
		/*Minskar storleken på texten på första sidan*/
h1{
	font-size: 50px;
}
/*Galleri bilderna får en bredd på 95%*/
div.img{
	width: 95%;
}
/*Bilden på första sidan minskar i höjd*/
#bild{
height: 360px;
}
/*Kontaktformuläret får bredare fält*/
input{
	width: 98%;
}
textarea{
	width: 98%;
}
Button{
	width: 98%;

}
#figurelogo,#figurelogoo{
	height: 100px;
}
#Head{
	display: none;
}
#navuppe{
	display: none;
}
.mobile{
	width: 99%;
    display: table;
}
	}

@media screen and (max-width: 480px)
	{
		/*Minskar loggo-bilden*/
#logobild,#logobildd{
	width:250px;
	height: 33px;
}
#figurelogo,#figurelogoo{
	height: 80px;
}
/*Minskar text första sidan*/
h1{
	font-size: 40px;
}
/*Minskar text första sidan*/
#welcome p{
font-size: 25px;
}
h2{
	font-size: 1.5em;
	line-height: 1.3em;
	font-weight: inherit;
}
h3{
font-size: 1em;
line-height: 1.3em;

}
h4{
	font-size: 0.9em;
}
/*Minskar texten på alla sidor i content delen*/
#middle p{
	font-size: .875em;
	line-height: 1.45em;
}
/*Minskar bild första sidan*/
#bild{
height: 320px;
}
/*Mindre knappar i menyn*/
#meny li{
	padding: 2%;
}
#meny li a{
	font-size: 0.8em;
}


}
@media screen and (max-width: 350px)
{
	/*Minskar loggo-bilden*/
#logobild,#logobildd{
width:180px;
	height: 25px;
}

}