/* CSS Document */

body{
	/*säger vilken font familg som ska används*/
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	/*sätter borden till 0*/
	margin: 0px;
}

.meny{
	/*sätter bakurnden till blå*/
	background-color: #67feff;
	/*sätter border till 0*/
	margin: 0px;
}

.menytext{
	/*sätter texten till mitten*/
	text-align: center;
}

.loggo{
	/*sätter texten till mitten*/
	text-align: center;
	/*flyttar loggan från kanten*/
	padding: 1% 0 0 2%;
}

.heder{
	/*sätter bakrunden till blå*/
	background-color: #67feff;
	/*sätter basen till 100% av sidan*/
	width: 100%;
}

.left{
	/*sätter basen till 50% av sidan*/
	width: 50%;
}

.hoger{
	/*sätter basen till 50% av sidan*/
	width: 50%;
}

.info{
	/*flyttar texten*/
	padding: 100px 0 50px;
	/*flyttar texten från topen*/
	padding-top: 50px;
	/*sättet texten i mitten*/
	text-align: center;
	/*sätter bakrun färgen till grön*/
	background-color: #b3ff99;
	/*sätter bräden till 50%*/
	width: 50%;
	/*flyttar bild till mitten*/
	margin: auto;
	/*avrundr kanten på diven*/
	border-radius: 50px;
	/*gör ett melan rum mellan divens boten*/
	margin-top: 100px;
	
}

.info-learn-more{
	/*flytter texten*/
	padding: 30px;
	/*sätter texten till vänster*/
	text-align: left;
	/*sätter bakrundsfärgen till gul*/
	background-color: #ffff87;
	/*sätter bräddden till 40%*/
	width: 40%;
	/*flyttar bilden till miten*/
	margin: auto;
	/*avrundar kanten*/
	border-radius: 20px;
	/*gör ett mellan rum på boten*/
	margin-top: 50px;
}

.botel{
	/*avrundar kanterna på en bild*/
	border-radius: 20px;
}

.info-easy-to-make{
	/*flyttar texten*/
	padding: 30px;
	/*sätter att texten är på vänster sida*/
	text-align: left;
	/*sätter bakrunds färgene till grön*/
	background-color: #b3ff99;
	/*sätter bräden till 40%*/
	width: 40%;
	/*flyttar bilden till mitten*/
	margin: auto;
	/*avrundar kanten*/
	border-radius: 20px;
	/*gör ett melan rum på boten vad diven*/
	margin-top: 20px;
}

.info-get-juice{
	/*flyttar texten*/
	padding: 30px;
	/*flyttar texten till vänser sida*/
	text-align: left;
	/*sätter bakrund färgen till gul*/
	background-color: #ffff87;
	/*ärndrar brädden till 40%*/
	width: 40%;
	/*sätter vilden till mitten*/
	margin: auto;
	/*avrundar kanten*/
	border-radius: 20px;
	/*gör ett melan rum på topen*/
	margin-top: 20px;
	/*gör ett melan rum på botten*/
	margin-bottom: 30px;
}

.buten{
	/*ändrar bakrunden till röd på kanpen*/
	background-color: red;
	/*gör texten vit */
	color: white;
	/*avrundar kanten*/
	border-radius: 10px;
	/*ändrar stoleken på kanpen*/
	padding: 15px 50px;
	/*öker font storlekeken*/
	font-size: 20px;
}

.buten:hover{
	/*bakrunden är blå när man hover över den*/
	background-color: #67feff;
	/*och texten bli svart*/
	color: black;
}

.rainbows{
	/*ändar värt bilden sitter*/
	padding: 100px 0 0 0;
	/*sätter att bilden är på mitten*/
	display: block;
	/*fluttar bilden till mitten*/
	margin-left: auto;
	margin-right: auto;
	/*ändrar stolekn på bilden*/
	width: 75%;
	height: 75%;
}

.flavors{
	/*ändrar stolektn på diven*/
	width: 60%;
	/*ändra texten till justfid*/
	text-align: justify;
	/*ändar bakrunden färgen till gul*/
	background-color: #ffff87;
	/*flyttar bilden till mitten*/
	margin: auto;
	/*flyttar allt till vänster*/
	margin-left: 250px;
	/*flytar allt i diven*/
	padding: 20px;
	/*avrundar kanten*/
	border-radius: 20px;
}

.form-box{
	/*ändra bakrund färgen till grön*/
	background-color: #b3ff99;
	/*ändrar höjden*/
	height: 30px;
}

.tabell{
	/*sätter tabeln till 100% bred*/
	width: 100%;
}

.fruktbad{
	/*avrundar kanten*/
	border-radius: 20px;
	/*flyttar diven vänster*/
	margin-left: 25px;
}

.titel{
	/*sätter texten i mitten*/
	text-align: center;
	/*sätter bräden till 60%*/
	width: 60%;
	/*sätter bilden i mitten*/
	margin: auto;
}

.barn-med-juice{
	/*rundar av kanten*/
	border-radius: 20px;
	/*flyttar diven till vänster*/
	margin-left: 245px;
}

.healthy{
	/*ädrar bräden till 60%*/
	width: 60%;
	/*sätter texten till justifi*/
	text-align: justify;
	/*ändar bakrund färgen till grön*/
	background-color: #b3ff99;
	/*flyttar bild till miten*/
	margin: auto;
	/*flytar diven till höger*/
	margin-right: 245px;
	/*minska i diven*/
	padding: 20px;
	/*avrundar kanterna*/
	border-radius: 20px;
}

.ineholsfortakning{
	/*flyttar texten*/
	margin: 50px;
}

.footer{
	/*sätter färgen till blå*/
	background-color: #67feff;
}

/*Sätter att bilden är synlig.
Breden är 100% av diven.
Höjden är atomatiskt systeras av breden.
Det tar fördröjd tid att byta bild*/
.book{
	opacity: 1;
	width: 100%;
	height: auto;
	transition: .5s ease;
}


/*När man hovrar över bilden så försviner den*/
.book:hover{
	opacity: 0;
	
}


/*Sätter att bilden inte är synlig.
Bilden komer atltid stan på sama plats.
Bilden sitter 0px från topen.
Den sitter också 0px från venster.
Bilden har ingen melanrumrut sig.
Det tar fördröjd tid att byta bild*/
.bookOver{
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	transition: .5s ease;
}


/*när man hoovrar över bilden så komer den fram*/
.bookOver:hover{
	opacity: 1;
}


/*Diven kan flyttas på.
Breden och öjden är 50%.
Flyttar diven till mitten.*/
.bookDiv{
	position: relative;
	width: 23%;
	height: 100%;
	float: right;
}


/*När du hovrar över Diven så komer en bild fram*/
.bookDiv:hover .bookOver{
	opacity: 1;
}


/*När du hovrar över diven så försivner en bild*/
.bookDiv:hover .book{
	opacity: 0;
}

/*Sätter att bilden är synlig.
Breden är 100% av diven.
Höjden är atomatiskt systeras av breden.
Det tar fördröjd tid att byta bild*/
.Twitter{
	opacity: 1;
	width: 100%;
	height: auto;
	transition: .5s ease;
	text-align: right;
}


/*När man hovrar över bilden så försviner den*/
.Twitter:hover{
	opacity: 0;
}


/*Sätter att bilden inte är synlig.
Bilden komer atltid stan på sama plats.
Bilden sitter 0px från topen.
Den sitter också 0px från höger.
Bilden har ingen melanrumrut sig.
Det tar fördröjd tid att byta bild*/
.TwitterOver{
	opacity: 0;
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	transition: .5s ease;
}


/*när man hoovrar över bilden så komer den fram*/
.TwitterOver:hover{
	opacity: 1;
}


/*Diven kan flyttas på.
Breden och öjden är 20%.
Flyttar diven till höger.*/
.TwitterDiv{
	position: relative;
	width: 17%;
	height: 20%;
	margin: auto;
}


/*När du hovrar över Diven så komer en bild fram*/
.TwitterDiv:hover .instaOver{
	opacity: 1;
}


/*När du hovrar över diven så försivner en bild*/
.TwitterDiv:hover .insta{
	opacity: 0;
}

.footerTwitter{
	/*ändrar bräden till 33%*/
	width: 33%;
}

.Contact-Us{
	/*ändrar bräden till 33%*/
	width: 33%;
}

.footerBook{
	/*ändrar bräden till 33%*/
	width: 33%;
}

.Contact{
	/*ändrar font storleken till 20 px*/
	font-size: 20px;
}

.footermail{
	/*ändrar gmail adresens fär till svart*/
	color: black;
}

.footermail:hover{
	/*ändrar färgen till lila när du hovrar över texten*/
	color: blueviolet;
}

.butenMeny{
	margin: 20px;
	padding: 10px 30px;
	background-color: red;
	color: white;
}

.butenMeny:hover{
	background-color: #b3ff99;
	color: black;
}