/*Felles for alt*/

body {

}


* {
	box-sizing: border-box;
}

img {
	display: block;
	width: 100%;
	height: auto;
}

figure,
ul {
	margin:  0;
	padding:  0;
}

/* 
Fonts:

font-family: 'W95FA', sans-serif;

*/

a, p, h1, h2, h3, h4, h5{
	font-family: 'W95FA', sans-serif;
}

/*
Colors:

Windows Grå: #C0BFC0
Bevel: #F6F5F5
Windows Blå: #262C63
teal/cyan?: #026262
*/

/*Main elements*/




@media screen and (min-width: 360px){


	/* INDEX.HTML */

	/* Fonter og Links */

	a:link{
		color: black;
		list-style: none;
		text-decoration: none;
	}

	a:visited{
		color: black;
		list-style: none;
		text-decoration: none;
	}

	/* Artikkel Boks */

	.article-box{
		width: 90%;
		background-color: #C0BFC0;
		margin-bottom: 5em;
		padding: 3px;
		border: 1px solid rgba(0, 0, 0, 0.5);
		border-left: 1px solid rgba(255, 255, 255, 0.5);
		border-top: 1px solid rgba(255, 255, 255, 0.5);
	}

	.top-bar{
		width: 100%;
		display: flex;
		justify-content: space-between;
		color: white;
		background-color: #000080;
		height: 15px;
		border: 1px solid rgba(0, 0, 0, 0.5);
		border-left: 1px solid rgba(255, 255, 255, 0.5);
		border-top: 1px solid rgba(255, 255, 255, 0.5);
	}

	.top-bar-left{
		display: flex;
		justify-content: space-between;
		position: relative;
	}

	.top-bar-left img{
		width: 13px;
		height: 13px;
		padding-left: 2px;
	}

	.top-bar-left p{
		font-size: 10px;
		text-align: center;
		align-items: center;
		position: absolute;
		left: 120%;
		top: -65%;
	}


	.top-bar-right{
		display: flex;
	}

	.top-bar-right img{
		padding: 1px 2px 1px 0;
		height: 15px;
		width: 15px;
	}

	.bot-bar{
		position: relative;
		height: 9px;
		background-color: #C0BFC0;
	}

	.bot-bar ul{
		width: 30%;
		height: 3px;
		display: flex;
		color: black;
		position: absolute;
		top: -70%;
	}

	.bot-bar ul li{
		padding-right: 5px;
		list-style: none;
		text-decoration: none;
	}

	.bot-bar ul li p{
		font-size: 7px;
	}

	.article-section{
		width: 100%;
		margin: auto;
		background-color: white;
		border: 1px solid rgba(255, 255, 255, 0.5);
		border-left: 1px solid rgba(0, 0, 0, 0.5);
		border-top: 1px solid rgba(0, 0, 0, 0.5);
	}

	.article-section article{
		height: auto;
		padding: 1px;
	}

	/* IMG BOKS */

	.image-box-logo{
		background-color: #C0BFC0;
		margin-bottom: 5em;
		padding: 2px;
		border: 1px solid rgba(0, 0, 0, 0.5);
		border-left: 1px solid rgba(255, 255, 255, 0.5);
		border-top: 1px solid rgba(255, 255, 255, 0.5);
	}

	.image-top-bar{
		width: 100%;
		display: flex;
		justify-content: space-between;
		color: white;
		background-color: #000080;
		height: 15px;
		border: 1px solid rgba(0, 0, 0, 0.5);
		border-left: 1px solid rgba(255, 255, 255, 0.5);
		border-top: 1px solid rgba(255, 255, 255, 0.5);
	}

	.image-top-bar-left{
		display: flex;
		justify-content: space-between;
		position: relative;
	}

	.image-top-bar-left img{
		width: 13px;
		height: 13px;
		padding-left: 2px;
	}

	.image-top-bar-left p{
		font-size: 10px;
		text-align: center;
		align-items: center;
		position: absolute;
		left: 120%;
		top: -65%;
	}


	.image-top-bar-right{
		display: flex;
	}

	.image-top-bar-right img{
		padding: 1px 2px 1px 0;
		height: 15px;
		width: 15px;
	}

	.image-bot-bar{
		position: relative;
		height: 9px;
		background-color: #C0BFC0;
	}

	.image-bot-bar ul{
		width: 30%;
		height: 3px;
		display: flex;
		color: black;
		position: absolute;
		top: -70%;
	}

	.image-bot-bar ul li{
		padding-right: 5px;
		list-style: none;
		text-decoration: none;
	}

	.image-bot-bar ul li p{
		font-size: 7px;
	}

	.image-section{
		width: 100%;
		margin: auto;
		background-color: #C0BFC0;
		border: 1px solid rgba(255, 255, 255, 0.5);
		border-left: 1px solid rgba(0, 0, 0, 0.5);
		border-top: 1px solid rgba(0, 0, 0, 0.5);
	}

	.image-section img{
		width: 100%;
		padding: 1em;
	}

	/* FOLDER BOKS */

	.folder-box{
		width: 90%;
		background-color: #C0BFC0;
		margin-bottom: 5em;
		padding: 3px;
		border: 1px solid rgba(0, 0, 0, 0.5);
		border-left: 1px solid rgba(255, 255, 255, 0.5);
		border-top: 1px solid rgba(255, 255, 255, 0.5);
	}

	.folder-top-bar{
		width: 100%;
		display: flex;
		justify-content: space-between;
		color: white;
		background-color: #000080;
		height: 15px;
		border: 1px solid rgba(0, 0, 0, 0.5);
		border-left: 1px solid rgba(255, 255, 255, 0.5);
		border-top: 1px solid rgba(255, 255, 255, 0.5);
	}

	.folder-top-bar-left{
		display: flex;
		justify-content: space-between;
		position: relative;
	}

	.folder-top-bar-left img{
		height: 13px;
		width: auto;
		padding: 1px;
		padding-left: 2px;
	}

	.folder-top-bar-left p{
		font-size: 10px;
		text-align: center;
		align-items: center;
		position: absolute;
		left: 120%;
		top: -65%;
	}


	.folder-top-bar-right{
		display: flex;
	}

	.folder-top-bar-right img{
		padding: 1px 2px 1px 0;
		height: 15px;
		width: 15px;
	}

	.folder-mid-bar{
		position: relative;
		height: 9px;
		background-color: #C0BFC0;
	}

	.folder-mid-bar ul{
		width: 30%;
		height: 3px;
		display: flex;
		color: black;
		position: absolute;
		top: -70%;
	}

	.folder-mid-bar ul li{
		padding-right: 5px;
		list-style: none;
		text-decoration: none;
	}

	.folder-mid-bar ul li p{
		font-size: 7px;
	}

	.folder-bot-bar{
		display: flex;
		justify-content: space-between;
		width: 40%;
		height: 9px;
		background-color: white;
		border: 1px solid rgba(255, 255, 255, 0.5);
		border-left: 1px solid rgba(0, 0, 0, 0.5);
		border-top: 1px solid rgba(0, 0, 0, 0.5);
		padding: 0 0 0 2px 0;
	}

	.folder-bot-bar-left{
		display: flex;
		position: relative;
	}

	.folder-bot-bar-left p{
		font-size: 7px;
		position: absolute;
		top: -103%;
		left: 100%;
	}

	.folder-bot-bar-left img{
		width: 10px;
		height: auto;
		padding: 1px;
	}

	.folder-bot-bar-right img{
		width: 8px;
		height: auto;
	}

	.file-section{
		width: 100%;
		margin: auto;
		background-color: white;
		border: 1px solid rgba(255, 255, 255, 0.5);
		border-left: 1px solid rgba(0, 0, 0, 0.5);
		border-top: 1px solid rgba(0, 0, 0, 0.5);
	}

/* bakgrunnsbilde */

	.background-image{
		height: 100vh;
		width: 100%;
		position: fixed;
		z-index: -10;
	}

	.background-image img{
		width: 100vh;
		height: 100vh;
	}

	.container{
		margin: auto;
		width: 90%;
	}

/* HEADER OG NAV */

	.rmm{
		position: fixed;
		z-index: 100;
		padding: 0 1% 0 0;
	}

	header{
		display: flex;
		padding: 3% 3% 0 3%;
		width: 100%;
	}

	.image-box-logo{
		width: 50%;
		margin-bottom: 1em;
	}

/* TOP */

.article-box-intro{
	width: 80%;
	background-color: #C0BFC0;
	padding: 3px;
	border: 1px solid rgba(0, 0, 0, 0.5);
	border-left: 1px solid rgba(255, 255, 255, 0.5);
	border-top: 1px solid rgba(255, 255, 255, 0.5);
	margin: 0 0 3em 5em;
}

/* MID (ikke engang gud vet hva jeg har prøvd å få til her) */

	.proj1{
		background-image: url(images/proj1-backdrop.png);
		background-size: contain;
		background-repeat: no-repeat;
		padding: 8%;
		display: block;
	}

	.proj2{
		background-image: url(images/proj2-backdrop.png);
		background-size: contain;
		background-repeat: no-repeat;
		padding: 8%;
		display: none;
	}

	.proj3{
		background-image: url(images/proj3-backdrop.png);
		background-size: contain;
		background-repeat: no-repeat;
		padding: 8%;
		display: none;
	}

	.proj4{
		background-image: url(images/proj4-backdrop.png);
		background-size: contain;
		background-repeat: no-repeat;
		padding: 8%;
		display: none;
	}

	.folder-box{
		width: 90%;
		margin-left: auto;
	}

	.project-selector{
		display: flex;
		justify-content: space-between;
		margin-bottom: 10%;
		width: 90%;
	}

	.btn-proj1,
	.btn-proj2,
	.btn-proj3,
	.btn-proj4{
		width: 25%;
		text-align: center;
		font-family: 'W95FA', sans-serif;
		height: auto;
	}

	.btn-proj1:hover,
	.btn-proj2:hover,
	.btn-proj3:hover,
	.btn-proj4:hover{
		border: 1px black;
		border-style: dotted;
	}

	.btn-proj1 img,
	.btn-proj2 img,
	.btn-proj3 img,
	.btn-proj4 img{
		padding: 1em 1em 0 1em;
	}

	.btn-container{
		width: 50;
		display: flex;
		justify-content: space-between;
	}

	.image-box-cute-dog{
		display: none;
	}

/* BOT */

.index-div-bot{
	margin-top: 8em;
}

.icons{
	width: 75%;
	display: flex;
	justify-content: space-between;
}

.icons a{
	width: 20%;
}

.icons a p{
	font-family: 'W95FA', sans-serif;
	color: white;
	background-color: #026262;
	text-align: center;
	font-size: small;
}

.some{
	width: 75%;
	display: flex;
	justify-content: space-between;
	margin: 1em 0 0 0;
}

.some a{
	width: 20%;
}

.some a:hover,
.icons a:hover{
	border: 1px black;
	border-style: dotted;
}

.some a p{
	font-family: 'W95FA', sans-serif;
	color: white;
	background-color: #026262;
	text-align: center;
	font-size: small;
}

.article-box-tjenester{
	width: 90%;
	background-color: #C0BFC0;
	margin-bottom: 2em;
	padding: 3px;
	border: 1px solid rgba(0, 0, 0, 0.5);
	border-left: 1px solid rgba(255, 255, 255, 0.5);
	border-top: 1px solid rgba(255, 255, 255, 0.5);
}

.article-box-reviews{
	width: 90%;
	background-color: #C0BFC0;
	margin: auto;
	padding: 3px;
	border: 1px solid rgba(0, 0, 0, 0.5);
	border-left: 1px solid rgba(255, 255, 255, 0.5);
}

.article-section article a p{
	text-decoration: underline 2px solid blue;
	color: blue;
}

/* FOOTER */

	footer{
		position: relative;
		margin-top: 3em;
		border-top: 3px solid rgba(255, 255, 255, 0.5);
		width: 100%;
		background-color: #C0BFC0;
		display: flex;
		justify-content: space-between;
		padding: 2.5%;
	}

	footer a{
		width: 25%;
		align-self: center;
		text-align: center;
		font-family: 'W95FA', sans-serif;
		font-size: small;
	}

	footer a:link,
	footer a:visited{
		font-family: 'W95FA', sans-serif;
		text-decoration: none;
	}

	/* TJENESTER.HTML */


	/* TJENESTE-DIV-TOP */

	.article-box-om-tjeneste{
		width: 90%;
		background-color: #C0BFC0;
		margin-bottom: 2em;
		padding: 3px;
		border: 1px solid rgba(0, 0, 0, 0.5);
		border-left: 1px solid rgba(255, 255, 255, 0.5);
		border-top: 1px solid rgba(255, 255, 255, 0.5);
	}

	.image-box-tjeneste{
		width: 90%;
		background-color: #C0BFC0;
		margin-bottom: 3em;
		margin-left: auto;
		padding: 3px;
		border: 1px solid rgba(0, 0, 0, 0.5);
		border-left: 1px solid rgba(255, 255, 255, 0.5);
		border-top: 1px solid rgba(255, 255, 255, 0.5);
	}

	/* TJENESTE-DIV-MID */

	.article-box-eksempel-tjenester{
		width: 100%;
		background-color: #C0BFC0;
		margin-bottom: 2em;
		padding: 3px;
		border: 1px solid rgba(0, 0, 0, 0.5);
		border-left: 1px solid rgba(255, 255, 255, 0.5);
		border-top: 1px solid rgba(255, 255, 255, 0.5);
	}

	.image-container{
		display: flex;
		width: 100%;
		justify-content: space-between;
	}

	.image-box-eksempel1,
	.image-box-eksempel2,
	.image-box-eksempel3,
	.image-box-eksempel4,
	.image-box-eksempel5{
		background-color: #C0BFC0;
		padding: 3px;
		border: 1px solid rgba(0, 0, 0, 0.5);
		border-left: 1px solid rgba(255, 255, 255, 0.5);
		border-top: 1px solid rgba(255, 255, 255, 0.5);
	}

	.image-box-eksempel1,
	.image-box-eksempel2{
		width: 48%;
		display: block;
	}

	.image-box-eksempel3,
	.image-box-eksempel4,
	.image-box-eksempel5{
		display: none;
	}

	.icons-tjeneste,
	.some-tjeneste{
		display: none;
	}

	/* TJENESTE-DIV-BOT */

	.article-box-tjeneste-end{
		margin-top: 3em;
		width: 90%;
		background-color: #C0BFC0;
		padding: 3px;
		border: 1px solid rgba(0, 0, 0, 0.5);
		border-left: 1px solid rgba(255, 255, 255, 0.5);
		border-top: 1px solid rgba(255, 255, 255, 0.5);
	}

	/* Fonter overwrite */
	h1,
	h2{
		font-family: "Jersey 10", sans-serif;
  		font-weight: 400;
 	 	font-style: normal;
	}
}




@media screen and (min-width: 760px){

	/* INDEX.HTML */

	/* bakgrunnsbilde */

	.background-image{
		height: 100vh;
		width: 100%;
		position: fixed;
		z-index: -10;
	}

	.background-image img{
		width: 100vh;
		height: 100vh;
	}


	/*Header og nav */
	.image-box-logo{
		margin-left: auto;
		width: 30%;
	}

	.rmm{
		width: 100%;
	}

	/* INDEX DIV TOP */

	.index-div-top{
		margin-top: 2em;
	}

	/* INDEX DIV MID */

	.index-div-mid{
		display: flex;
	}

	.project-viewer{
		width: 75%;
	}

	.folder-box{
		margin-top: 23em;
		position: absolute;
		width: 35%;
		height: auto;
		left: 63%;
	}

	.btn-container{
		scale: 90%;
	}

	.btn-proj1,
	.btn-proj2,
	.btn-proj3,
	.btn-proj4{
		margin: 4px;
	}

	.image-box-cute-dog{
		display: none;
	}


	/* INDEX DIV BOT */

	.icons{
		width: 70%;
	}

	.some{
		width: 70%;
	}

	.txt-boxss{
		margin-top: 3em;
		display: flex;
		justify-content: space-between;
	}

	.article-box-tjenester{
		width: 48%;
		height: auto;
		margin: auto;
	}

	.article-box-reviews{
		width: 48%;
		height: auto;
		margin: auto;
	}

	/* FOOTER */

	footer{
		position: relative;
		padding: 0 6em 0 6em;
	}

	footer a{
		width: 15%;
	}

	/* TJENSTE.HTML */


	/* TJENESTE-DIV-TOP */

	.article-box-om-tjeneste{
		scale: 110%;
		margin: auto;
	}

	.image-box-tjeneste{
		margin-top: 2em;
		width: 70%;

	}

	/* TJENESTE-DIV-MID */

	.article-box-eksempel-tjenester{
		scale: 110%;
		width: 80%;
		margin: auto;
		margin-bottom: 2em;
	}

	.image-box-eksempel1,
	.image-box-eksempel2,
	.image-box-eksempel3,
	.image-box-eksempel4,
	.image-box-eksempel5{
		background-color: #C0BFC0;
		padding: 3px;
		border: 1px solid rgba(0, 0, 0, 0.5);
		border-left: 1px solid rgba(255, 255, 255, 0.5);
		border-top: 1px solid rgba(255, 255, 255, 0.5);
	}

	.image-box-eksempel1,
	.image-box-eksempel2,
	.image-box-eksempel3{
		width: 32%;
		display: block;
	}

	.image-box-eksempel4,
	.image-box-eksempel5{
		display: none;
	}

	.icons-tjeneste,
	.some-tjeneste{
		display: none;
	}

	/* TJENESTE-DIV-BOT */

	/* Fonter overwrite */
	h1,
	h2{
		font-family: "Jersey 10", sans-serif;
  		font-weight: 400;
 	 	font-style: normal;
	}

}


@media screen and (min-width: 1300px){

	/* INDEX.HTML */

	/* Bakgrunn */

	.background-image{
		height: 100vh;
		width: 100%;
		position: fixed;
		z-index: -10;
	}

	.background-image img{
		width: 100vh;
		height: 100vh;
	}

	/* Header og Nav */

	header{
		width: 100%;
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
		z-index: 2;
	}

	.image-box-logo{
		display: block;
		margin-right: 80%;
		z-index: 2;
	}
	
	.img-box-logo .img-top-bar-left img{
	  width: 128px;
	  }


	.rmm{
		width: 100%;
		scale: 120%;
	}

	/* Index-div-top */

	.index-div-top{
		font-size: 2em;
	}
	
	.article-box-intro{
		position: absolute;
		width: 40%;
		left: 40%;
		top: 17%;
	}

	/* Index-div-mid */

	.image-box-cute-dog{
		position: absolute;
		height: 25em;
		width: 25em;
		top: 155%;
		left: 65%;
		display: block;
	}

	.index-div-mid{
		margin-bottom: 20em;
	}

	.project-viewer{
		width: 50%;
		z-index: 2;
	}

	.folder-box{
		width: 30%;
		left: 47%;
		z-index: 3;
	}


	/* Index-div-bot */

	.index-div-bot{
		margin-bottom: 15em;
	}

	.article-box-tjenester{
		z-index: 2;
	}

	.article-box-reviews{
		margin-top: 15em;
	}

	.icons,
	.some{
		width: 30%;
		position: fixed;
		z-index: 1;
		left: 6%;
	}

	.icons{
		top: 55%;
	}

	.some{
		top: 70%;
	}

	.icons a:hover,
	.some a:hover{
		border: 1px black;
		border-style: dotted;
		background-color: rgba(255, 255, 255, 0.1);
	}

	/* Footer */

	footer{
		display: flex;
		justify-content: space-evenly;
		border-top: 3px solid rgba(255, 255, 255, 0.5);
		width: 100%;
		height: 5em;
		padding-top: 3px;
		position: fixed;
		bottom: 0%;
		z-index: 10;
	}

	footer a{
		display: flex;
	}

	footer a p{
		font-size: 2em;
	}

	footer a img{
		height: 5em;
		width: 5em;
		margin-top: 1.9em;
	}

	.logo-footer{
		margin-bottom: 2em;
	}

	/* TJENESTE.HTML */


	/* TJENESTE-DIV-TOP */

	.tjenester-div-top{
		display: flex;
	}

	.article-box-om-tjeneste{
		width: 20em;
		scale: 200%;
	}

	.image-box-tjeneste{
		width: 48%;
	}

	/* TJENESTE-DIV-MID */

	.image-box-eksempel1,
	.image-box-eksempel2,
	.image-box-eksempel3,
	.image-box-eksempel4,
	.image-box-eksempel5{
		background-color: #C0BFC0;
		padding: 3px;
		border: 1px solid rgba(0, 0, 0, 0.5);
		border-left: 1px solid rgba(255, 255, 255, 0.5);
		border-top: 1px solid rgba(255, 255, 255, 0.5);
	}

	.image-box-eksempel1,
	.image-box-eksempel2,
	.image-box-eksempel3,
	.image-box-eksempel4,
	.image-box-eksempel5{
		width: 19%;
		display: block;
	}

	/* TJENESTE-DIV-BOT */

	.tjenester-div-bot{
		margin-bottom: 10em;
	}

	/* Fonter overwrite */
	h1,
	h2{
		font-family: "Jersey 10", sans-serif;
  		font-weight: 400;
 	 	font-style: normal;
	}

}