@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
/* Importerar här ovan in flera fonts/teckensnitt */

* {
	margin: 0;
	padding: 0;
}

body {
	background-color: white; 						/* tidigare add8e6 */
}

nav {
	position: sticky;				/* nav-elementet har en "fast position" på sidan, alltid i toppen även vid scrollning */
	top: 0px;						/* placeras på sidans absoluta topp */
}

.navbar { 							/* Här styr jag navbarens placering */
	margin-top: 0.25%; 				/* navbar placeras lite lite nedanför sidans "absoluta topp" */
	min-height: 3rem;  				/* minsta höjden på nav-elementet */
	display: flex;					/* ska visas som flexbox - så de hamnar intill varandra som standard och "flexar" vid olika skärmstorlekar */
	justify-content: space-evenly;	/* horisontellt centrerad */
	align-items: center;			/* vertikalt centrerad */
}

.knapp {
	background-color: #29c0db;    /* bakgrundsfärg knappar (tidigare #29c0db) */
	width: 16%; 					/* knapparnas bestämda bredd */
	/* height: 2,6rem; 				/* knapparnas bestämda höjd */
	font-size: 2.1rem; 				/* textstorlek text i knappar */
	text-align: center; 			/* text centreras i knappen */
	border: 2px solid black;	   /* ram som är 2px tjock, "hel linje runt", svart färg */
	text-decoration: none;			/* tar bort understruket som blir vid länk */
	color: black;	
}

.knapp:hover { 						/* här styrs vad som händer när man lägger musen över en knapp på navbaren */
	background-color: #adcae6; 	/* val av färg vid "hover" (tidigare #27b2b7) */
	text-decoration: none;			/* tar bort understruket som blir vid länk */
	color: black;
}

main {
	display: flex;						/* allt ska vara "flex" dvs enkelt att strukturera under varandra, kollumn */
	flex-direction: column;				/* att allt ska placeras under varandra, kollumn */
	align-items: center;				/* centrering på sidan */
	font-family: "Raleway", serif;		/* annat typsnitt - ändras på all text som INTE specificerats ska ha ett bestämt typsnitt */
}

.valkommen {						/* div-classen välkommen */
	width: 70%;						/* bredd på sidan */
	margin-top: 10vh;				/* marginal uppåt för utrymme */
	text-align: center;				/* centrerad text */
}

h1 {
	font-size: 3.3rem;;								/* 3,3 rem = 3,3 * normal font-size (ställer i ex webbläsare inställningar) */
	font-family: "Architects Daughter", cursive;	/* annat typsnitt */
	font-weight: 400;								/* typsnittets tjocklek */
	font-style: normal;								/* stil normal dvs ex. ej kursiv */
}

h2 {
	font-size: 1.8rem;				/* 1 rem = normal font-size (ställer i ex webbläsare inställningar) */
	font-family: "Raleway", serif;	/* annat typsnitt */
  	font-weight: 600;				/* fontens "tjocklek" */
  	font-style: normal;				/* stil normal dvs. ej kursivt t.ex. */
}

h3 {
	font-size: 1.6rem;							/* 1 rem = normal font-size (ställer i ex webbläsare inställningar) */
	font-family: "Architects Daughter", serif;	/* annat typsnitt */
	font-weight: 400;							/* typsnittets tjocklek */
	font-style: normal;							/* stil normal dvs ex. ej kursiv */
}

.bild {
	margin-top: 10vh;				/* marginal uppåt för utrymme */
	width: 60%;						/* satt bredd på diven */
}

.bild img {							/* ändrar bilden */
	max-width: 100%;				/* får ta upp hela sidans bredd */
	height: auto;					/* höjden följer med enligt bildens storlek */
}

.intro {
	width: 70%;						/* divens bredd på sidan */
	margin-top: 5vh;				/* marginal uppåt för utrymme */
	text-align: center;				/* centrering text */
	font-family: "Raleway", serif;	/* annat typsnitt */
  	font-weight: 300;				/* tjocklek typsnitt */
  	font-style: normal;				/* stil normal dvs ex. ej kursiv */
}

.intro h4 {
	margin-bottom: 10vh;			/* marginal nedåt för utrymme */
}

h4 {
	font-size: 1.1rem;				/* 1 rem = normal font-size (ställer i ex webbläsare inställningar) */
	font-family: "Raleway", serif;	/* annat typsnitt */
  	font-weight: bolder;			/* tjocklek typsnitt */
  	font-style: normal;				/* stil normal dvs ex. ej kursiv */
}

.info {
	width: 70%;						/* divens bredd på sidan */
	text-align: center;				/* centrering text */
	display: flex;					/* diven sätts som flex, för att knapparna ska hamna intill varandra med auto-avstånd */
	align-items: center;			/* centrering av elementen i diven */
	flex-wrap: wrap;				/* tillåter att knapparna förflyttas sig beroende på skärmstorlek */
	justify-content: space-evenly;	/* horisontellt centrerad */
}

.nedreKnapp {
	width: 35%;						/* knapparnas bestämda bredd, 70% av sidans bredd */
	/* height: 2,6rem;				/* knapparnas bestämda höjd */
	background-color: #29c0db;    /* bakgrundsfärg knappar (tidigare #29c0db)*/
	font-family: "Architects Daughter", serif;
	font-size: 1.6rem; 				/* textstorlek text i knappar */
	text-align: center; 			/* text centreras i knappen */
	border: 2px solid black;	   /* ram som är 2px tjock, "hel linje runt", svart färg */
	text-decoration: none;			/* tar bort understruket som blir vid länk */
	color: black;				   /* textfärg */
}

.nedreKnapp:hover {
	background-color: #adbce6;
	text-decoration: none;			/* tar bort understruket som blir vid länk */
	color: black;					/* textfärg */
}

.rubriker {
	width: 70%;						/* divens bredd på sidan */
	margin-top: 10vh;				/* marginal uppåt för utrymme */
	text-align: center;				/* text center */
}

.rubriker h2 {
	margin-bottom: 1vw;							/* marginal nedåt för utrymme */
	font-family: "Architects Daughter", serif;	/* annat typsnitt */
	font-size: 1.3rem;							/* 1 rem = normal font-size (ställer i ex webbläsare inställningar) */
}

.samarbetspartners {
	width: 85%;						/* divens bredd på sidan */
	text-align: center;				/* text center */
	display: flex;					/* fortsatt flex som låter den "flexa" ;) */
	flex-direction: row;			/* ska läggas efter varandra på *rad* (ej kolumn) */
	justify-content: space-evenly;	/* horisontellt centrerad */
	gap: 2%;						/* mellanrum mellan varje element i denna div */
	align-items: center;			/* vertikalt centrerad */
}

.litenKvadrat {						/* sponsorbilderna! */
	max-width: 10vw;				/* max bredd bild */
	height: auto;					/* höjden följer med bildens förhållande bredd-höjd */
}

.knapparKollumn {
	width: 70vw;					/* divens bredd på sidan */
	text-align: center;				/* centrerad text */
	display: flex;					/* flex, för att kunna hamna under varandra snyggt */
	flex-direction: column;			/* ska läggas under varandra */
	gap: 3vh;						/* mellanrum mellan "kollumnerna" */
	align-items: center;			/* centrering av allt i diven */
	justify-content: space-evenly;	/* horisontellt centrerad */
}

.knappCenter {
	width: 20vw;						/* knapparnas bestämda bredd, 70% av sidans bredd */
	background-color: #add8e6;    /* bakgrundsfärg knappar (tidigare #29c0db)*/
	font-family: "Architects Daughter", serif;
	font-size: 1.6rem; 				/* textstorlek text i knappar */
	text-align: center; 			/* text centreras i knappen */
	border: 2px solid black;	   /* ram som är 2px tjock, "hel linje runt", svart färg */
	text-decoration: none;			/* tar bort understruket som blir vid länk */
	color: black;				   /* textfärg */
}

.mellanrum {
	margin-top: 10vh;				/* marginal uppåt för utrymme */
}

/* + + + + + + + + + + + + + + + + + + + */

/* ______ FOOTER VARJE SIDA ______ */

footer {
	height: 100%;							/* footerns höjd - tar det den behöver */
	position: static;						/* statiskt placerad nere */
	bottom: 0;								/* 0px från botten */
	left: 0;								/* 0px från vänster */
	margin-top: 5vh;						/* marginal uppåt för utrymme */
	background-color: #adcae6;	   /* bakgrundsfärg för att urskilja footer */
	display: flex;							/* flex, för att kunna hamna under varandra snyggt */
	flex-direction: column;					/* ska läggas under varandra */
	justify-content: center;				/* horisontellt centrerad */
	align-items: center;					/* centreas vertikalt */
}

footer h3 {							/* rubrik i footer */
	font-size: 1.2rem;;				/* 1 rem = normal font-size (ställer i ex webbläsare inställningar) */
}

footer h4 {							/* rubrik i footer */
	font-size: 1rem;;				/* 1 rem = normal font-size (ställer i ex webbläsare inställningar) */
}

/* ______ FOOTER VARJE SIDA ______ */

/* + + + + + + + + + + + + + + + + + + + */

/* ______ PÅ INBJUDAN-SIDAN ______ */

.inbjudanBilder {					/* PDFen inbjudan i bildform */
	border: 2px solid;				/* ram runt alla bilder för "enhetligt" */
	width: 80%;						/* bestämd bredd på diven */
	display: flex;					/* flex för att bilderna fint ska hamna under varandra */
	flex-direction: column;			/* ska läggas under varandra */
	align-items: center;			/* centreras */
	justify-content: space-evenly;	/* horisontellt centrerad */
;
}

.inbjudanBilder img {
	width: 100%;						/* bildens bestämda bredd, höjd hänger med i förhållande */
}

/* ______ PÅ INBJUDAN-SIDAN ______ */

/* + + + + + + + + + + + + + + + + + + + */

/* ______ PÅ NYHETER-SIDAN ______ */

.nyhetRuta {
	border: 1px black double;
	border-radius: 2%;
	margin-top: 5vh;
	padding: 3vh 3vw 3vh 3vw;
	text-align: center;
	width: 80%;
}

.fastnalad { /* visar text att nyheten är fastnålad dvs placerad överst */
	margin-bottom: 3vh;					/* marginal nedåt */
	border-bottom: 1px solid red;	   /* linje under texten */
	width: 30%;							/* texten tar 30% av diven */
	font-size: 0.8rem;					/* mindre storlek på text */
	color: red;					   /* röd textfärg */
}

.datum {	/* konfigurerar datumet på nyheten */
	text-align: right;		/* ska ligga åt höger */
	margin-bottom: 1vh;		/* med marginal nedåt */
}

#visaMer { 
	display: none;			/* som standard ska det som ska visas vid tyck på knappen för att visa mer, vara dolt */
}

#merKnapp {
	width: 70%;					 	 /* knappens bredd */
	background-color: #29c0db;		/* knappens färg */
	padding: 1vh 1vw 1vh 1vw;	 	 /* packning runt innehållet i diven - topp/höger/nedåt/vänster */
	border: 1px solid black;		/* ram runt knappen, svart hel linje 1px bred */
	border-radius: 10%;			 	 /* rundning på knappen */
}
/* ______ PÅ NYHETER-SIDAN ______ */

/* + + + + + + + + + + + + + + + + + + + */

/* ______ PÅ FAQ-SIDAN ______ */

.fragor {							/* hela diven för frågor, svar osv */
	width: 70%;						/* divens bredd på sidan */
}

.faq-block {						/* faq-block är hela "blocket" innehållande allt gällande FAQen */
  text-align: center;				/* mitten på diven */
  margin-top: 10vh;					/* marginal uppåt för utrymme */
  margin-bottom: 10vh;				/* marginal nedåt för utrymme */
}

.faq-fraga {						
	width: 70vw;							 /* divens bredd i diven */
  	padding-top: 1vh;						 /* marginal uppåt för utrymme */
  	padding-bottom: 1vh;					 /* marginal nedåt för utrymme */
  	border-bottom: 1px dotted black;  		/* ram nedanför för stil att skilja frågor från varandra */
}

.expandera-fraga {
  	font-size: 1.2rem;				/* 1 rem = normal font-size (ställer i ex webbläsare inställningar) */
  	margin: 0;						/* ingen marginal */
  	padding-bottom: 1vh;			/* marginal nedåt för utrymme */
  	display: block;					/* visas som block */
  	cursor: pointer;				/* styr muspekarens stil */
}

.expandera-svar {
  	font-size: 1rem;				/* 1 rem = normal font-size (ställer i ex webbläsare inställningar) */
  	height: 0;						/* höjd satt för att få önskad stil på "expanderingen" */
  	overflow: hidden;				/* det som ej får plats döljs - behöver för funktionen */
 	z-index: -1;					/* placering på varandra */
 	opacity: 0;						/* ogenomskinlighet */
	/* för animationen vid öppning... 4 rader ner... "4s" anger animationstid 0,4s... "ease" ger "mjuk övergång" */
/* behövs tydligen inte??? visas som varning i validator......  	-webkit-transition: .4s ease;	/* övergångseffekt, webbläsare som använder prefix -webkit- */
/* behövs tydligen inte??? visas som varning i validator......  	-moz-transition: .4s ease;		/* övergångseffekt, webbläsare från mozilla: äldre versioner av firefox */
/* behövs tydligen inte??? visas som varning i validator......  	-o-transition: .4s ease;		/* övergångseffekt, webbläsare med -o- prefix, dvs äldre opera */
  	transition: .4s ease;			/* för moderna webbläsare utan krav på prefix */
}

.expandera:checked ~ .expandera-svar {		/* använder checkbox för att visa svaret. vid klick "checkas boxen" vilket visar svaret */
  	height: auto;							/* höjd sätts automatiskt efter elementets innehåll */
  	opacity: 1;								/* ogenomskinlighet för effekt */
  	padding: 14px;							/* liten packning */
}

.plus {								/* plustecken för att visa att det går att expandera/öppna svaret */
  	float: right;					/* ska hålla sig åt höger */
  	z-index: 5;						/* ovanför allt annat */
  	font-size: 2.3rem;				/* 1 rem = normal font-size (ställer i ex webbläsare inställningar) */
  	line-height: 100%;				/* linjens höjd - behöver vara satt för att design ska fungera */
  	/* animeringar vid klick - + roterar och blir x (rad 276-284) */
/* behövs tydligen inte??? visas som varning i validator......	-webkit-user-select: none;    	/* förhindrar markering av text inom -webkit- */
/* behövs tydligen inte??? visas som varning i validator......  	-moz-user-select: none;			/* förhindrar markering av text för firefox */
/* behövs tydligen inte??? visas som varning i validator......  	-ms-user-select: none;			/* förhindrar markering av text för internetexplorer och edge dvs -ms- prefix */
/* behövs tydligen inte??? visas som varning i validator......  	-o-user-select: none;			/* förhindrar markering av text opera */
  	user-select: none;				/* förhindrar markering av text inom moderna webbläsaare */
/* behövs tydligen inte??? visas som varning i validator......  	-webkit-transition: .2s ease;	/* mjuk övergång på 0,2s för -webkit- */
/* behövs tydligen inte??? visas som varning i validator......  	-moz-transition: .2s ease;		/* mjuk övergång på 0,2s för mozilla-webbläsare */
/* behövs tydligen inte??? visas som varning i validator......  	-o-transition: .2s ease;		/* mjuk övergång på 0,2s för opera-webbläsare */
  	transition: .2s ease;			/* mjuk övergång på 0,2s */
}

.expandera:checked ~ .plus {		/* vidare animationer... när div "expandera" är "checkad" ska div "plus" animeras... */
/* behövs tydligen inte??? visas som varning i validator......  	-webkit-transform: rotate(45deg);	/* rotation 45 grader -webkit- */
/* behövs tydligen inte??? visas som varning i validator......  	-moz-transform: rotate(45deg);		/* rotation 45 grader mozilla */
/* behövs tydligen inte??? visas som varning i validator......  	-o-transform: rotate(45deg);		/* rotation 45 grader opera */
  	transform: rotate(45deg);			/* rotation 45 grader */
}

.expandera {						/* att svaren inte visas utan tryck... */
  	display: none;
}

/* ______ PÅ FAQ-SIDAN ______ */

/* + + + + + + + + + + + + + + + + + + + */

/* ______ PÅ KONTAKT-SIDAN ______ */

.ruta {
	border: 1px black double;		/* sätter en ram runt innehållet, bildar en ruta... */
	border-radius: 15%;				 /* ramens rundning */
	margin-top: 5vh;				 /* marginal uppåt */
	padding: 3vh 3vw 3vh 3vw;		 /* packning runt innehållet i diven - topp/höger/nedåt/vänster */
	text-align: center;				 /* texten centreras */
	width: 50%;
}

/* ______ PÅ KONTAKT-SIDAN ______ */

/* + + + + + + + + + + + + + + + + + + + */

/* ______ PÅ BILJETT-SIDAN ______ */

.biljettshop {
	width: 80%;				/* diven tar upp 80% av sidan */
	margin-top: 10vh;		/* marginal upp */
	margin-bottom: 30vh;
}

.biljett-typ {
	display: flex;				/* flex för att få mer kontroll på varje div */
	align-items: center;		/* centrering vertikalt */
	justify-content: center;	/* centrering horisontellt */
	margin-top: 3vh;			/* marginal upp */
}

.biljett-typ button {			/* detta är + och - knappen */
	width: 10vw;					/* bredd knapp + - */
	height: 4vh;					/* höjd knapp + - */
	font-size: 20px;				/* font storlek */
	border: 1px solid black;	   /* ram runt 1px bred, hel linje, svart */
	background-color: #29c0db;	   /* knapp bakgrundfärg */
}

.biljett-typ .biljett {				/* rutan med biljettyp namn */
	border: 1px solid #1e2d38;		/* ram runt */
	padding: 1vh 2vw 1vh 2vw;		 /* packning mot ramen topp höger nedåt vänster */
	margin-right: 10px;				 /* marginal åt höger mellan ikon och text */
	font-weight: bold;				 /* tjockare text */
	border-radius: 5px;				 /* rundning knapp ram */
}

.biljett-typ .antal {				/* för antalet dvs "1" i mitten av + och - knapp */
	display: inline-block;				/* inline även denna, för korekt placering mellan + och - */
	width: 14vw;						/* bredd */
	text-align: center;					/* text centrerad */
	font-size: 1.3rem;					/* storlek text */
	border: 1px solid black;		   /* ram 1px tjock, hel linje, svart */
}	

.kassaKnapp {
	display: inline-block;				/* visas som "inline-block" dvs elementen på samma rad som övriga inline-divar, skapar ej "en ny rad". */
	padding-top: 2vh;					/* packning uppåt */
	padding-bottom: 2vh;				/* packning nedåt */
	border: 2px solid black;		   /* ram runt, 2px tjock, heldragen linje, svart */
	border-radius: 20%;					/* rundade hörn på knappen */
	font-size: 1.3rem;					/* textstorlek */
	font-weight: bold;				    /* tjockare text */
	background-color: #29c0db;		   /* knapp för kassa färg */
	display: flex;						/* flex för att få mer kontroll på varje div */
	align-items: center;				/* centrering vertikalt */
	justify-content: center;			/* centrering horisontellt */
	margin-top: 5vh;					/* marginal uppåt */
	width: 70%;							/* då bredd är 70% av 100, marginal 15% * 2 = 30% --> 70 + 30 = 100 */
	margin-left: 15%;					/* för centrering */
}

.kassaKnapp a {
	text-decoration: none;				/* tar bort understrecket som blir för länkar */
	color: black;
}

.kassaKnapp img {						/* ikon kassaikon */
	width: 2rem;						/* bredd - höjd ställs automatiskt genom bildförhållande */
	margin-left: 1vw;					/* marginal åt vänster för avstånd mellan text och ikon */
}

/* ______ PÅ BILJETT-SIDAN ______ */

/* + + + + + + + + + + + + + + + + + + + */

@media(max-width: 800px) {			/* här upprepas element som behöver anpassas extra för att passa mobil! */

	nav {
		position: sticky;				/* nav-elementet har en "fast position" på sidan, alltid i toppen även vid scrollning */
		top: 0px;						/* placeras HÖGST UPP på sidan */
	}

	.hamburgare {	/* visar hamburgareikonen som "triggar" sidonavbaren */
		display: block;				/* visas som block */
		position: static; 			/* fast position även vid scrollning */
		padding-left: 30px; 		/* 30px från vänster marginal */
		padding-top: 30px; 			/* menyn är 30px upp (till toppen) */
		padding-bottom: 30px; 		/* menyn går ner 30px under knappen*/
		width: calc(100% - 30px);	/* elementets bredd kalyleras för att ej gå utanför html-taggens storlek */
		background-color: #adcae6;
	}

	.navbarText {
		display: block;			/* visas som block */
		position: static; 		/* fast position även vid scrollning */
		float: right;			/* flyter åt höger på skärmen */
		padding-right: 10%;		/* med en packning åt höger dvs avstånd från höger */
		font-size: 1.3rem;		/* 1 rem = normal font-size (ställer i ex webbläsare inställningar) */
		font-family: "Architects Daughter", cursive;	/* annan font */
		font-weight: 400;		/* tjocklek font */
		font-style: normal;		/* ej ex kursiv text */
		text-align: center;		/* centrering text */
	}

	.hamburgareTecken {   			/* skapar hamburgareikon med CSS - https://www.w3schools.com/howto/howto_css_menu_icon.asp */
		width: 35px;				/* bredd "ikon" */
  		height: 5px;				/* höjd "ikon" */
  		background-color: black;	/* bakgrundsfärg svart */
  		margin: 6px 0;				/* marginaler */
	}

	.navbar {		/* navbaren som visas överst på desktop döljs */
		display: none;
	}

	/* här är konfigureringen av navbar på mobil - hamnar på sidan av skärmen. Styrs av JS. */
	.sidobarMobil {
		height: 100vh;					/* 100% viewport höjd */
		width: 0; 						/* 0 bredd - ej synlig - JS styr */
		position: fixed; 				/* fast position */
		z-index: 1; 					/* placeras över allt i z-led */
		top: 0; 						/* placering allra högst upp och nedåt */
		left: 0;						/* längst åt vänster kant */
		background-color: lightgray;	
		overflow-x: hidden; 			/* inaktiverar scrollning horisontellt */
		transition: 0.5s; 				/* ger en animation när navbaren tas fram på 0.5s */
	}

	.sidobarMobil a {					/* anger konfigurering för texten a-tagg i navbaren mobil */
		width: 180px;					/* bredden på knapparna! */
		margin-left: 10px;				/* litet utrymme mellan vänster kant och knappens början */
		padding: 8px 8px 8px 32px;		/* packning runt... */
		text-decoration: none;			/* tar bort så texten är "normal" dvs ingen länks färg, understruken osv */
		font-size: 2.1rem;;				/* textstorlek - kan vara fast då detta är på mobil */
		color: black;					/* textfärg */
		display: block;					/* visas som block för att synas */
		transition: 0.3s;				/* animering vid */
		margin-top: 3vh;
	}

	.sidobarMobil a:hover {				/* när man håller över texten, ändra färg... */
		color: #f1f1f1;
	}

	.sidobarMobil .stangNav {			/* "stängknappen" */
	    position: static;				/* absolut position... */
		width: 180px;					/* bredden på knapparna! */
		margin-left: 10px;				/* litet utrymme mellan vänster kant och knappens början */
		top: 30px;						/* överst på sidan */
		right: 30px;					/* aningen åt höger placerad */
		font-size: 4rem;;				/* bestämd textstorlek i px */
		color: red;						/* röd färg för den ska synas */
		padding-bottom: 3vh;
	}

	.knapparKollumn, .samarbetspartners, .info, .intro, .valkommen {
		width: 90%;		/* ändrar alla ovan angivna element till att vara 90% bred på skärmen ist för 70% på dekstop */
	}

	.bild {
		width: 100%;					/* tar upp 100% av "förälder-div" */
	}

	.samarbetspartners {
		width: 90%;						/* divens bredd på sidan */
		text-align: center;				/* text center */
		display: flex;					/* fortsatt flex som låter den "flexa" ;) */
		flex-wrap: wrap;
		flex-direction: row;			/* ska läggas efter varandra på *rad* (ej kolumn) */
		justify-content: space-evenly;	/* horisontellt centrerad */
		gap: 2%;						/* mellanrum mellan varje element i denna div */
		align-items: center;			/* vertikalt centrerad */
	}

	.litenKvadrat {						/* lilla sponsorbild-diven */
		max-width: 20vw;				/* responsivt men med max 20% av viewport-width */
		height: auto;					/* höjden automatisk i förhållande till bredden */
	}

	h3 {
		font-size: 1.3rem;;				/* 1 rem = normal font-size (ställer i ex webbläsare inställningar) */
	}

	.ruta {
		width: 85vw;					/* 1 rem = normal font-size (ställer i ex webbläsare inställningar) */
	}

}

/* PÅ DESKTOP :  MOBILMENYN SKA DÖLJAS */
@media(min-width: 801px) {

	.hamburgare {
		display: none;
	}

	.sidobarMobil {
		display: none;
	}


	.inbjudanBilder img {
		width: 100%;
	}

	/* för biljett-sidan */

	.biljettshop {
		width: 40%; /* för att knapparna ej ska bli såååå breda */
	}

	.kassaKnapp {
		margin-top: 10vh;
	}

	/* för alla nedan divar */

	.nyhetRuta, .ruta, .inbjudanBilder, .intro, .fragor, .biljettshop {  /* för att alla sidor ska ha lika breda element på dator - dvs mellanrum mellan text och vänster kant resp. text och höger kant */
		width: 50vw;
	}

	/* för att diven fråga ej ska gå utanför diven */

	.faq-fraga {
		width: 100%;
	}


}
/* 0000000000000000000000000000000000000000000000 */

/* MELLAN 1200 OCH 801 PX SKÄRMBREDD, FÖR ATT FÅ NAVBAR-KNAPP "KÖP BILJETTER" ATT HÅLLA SIG
                    I SAMMA FORMAT SOM ÖVRIGA KNAPPAR, EJ VÄXA PÅ HÖJDEN					   */
@media(max-width: 1200px) and (min-width: 801px) {
	.knapp {
		font-size: 1.8rem;
	}
}
/* 0000000000000000000000000000000000000000000000 */