:root {
	--black: #000000;
	--black-alpha: rgba(0, 0, 0, 0.75);
	--grey: #808080;
	--white: #ffffff;
	/*--heading-font: 'Megrim', serif;*/
	--paragraph-font: 'Helvetica', 'Times New Roman', sans-serif;

}

/* *** */
* {
	box-sizing: content-box;
	margin: 0;
	padding: 0;
	text-decoration: none;
}

body {
	background-color: var(--black);
}

button {
	background-color: var(--white);
	border: 2px solid var(--white);
	color: var(--black);
	padding: 4px 8px;
	width: auto;
}

button:hover {
	background-color: var(--black);
	color: var(--white);
}

html {
	scroll-behavior: smooth;
}

/* SELECTION */
::selection {
  background: var(--white);
  color: var(--black);
}

/* SCROOLBAR */
::-webkit-scrollbar {
	width: 10;
}

::-webkit-scrollbar-track {
	background: var(--white);
	border: 2px solid var(--white);
}
::-webkit-scrollbar-thumb {
	background: var(--black);
	border: 2px solid var(--white);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--white);
	border: 2px solid var(--black);
}

/* TEXT */
a {
	color: var(--white);
	height: auto;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--white);
	font-family: var(--heading-font);
	font-size: 2em;
	text-align: center;
}

.material-icons {
	color: var(--white);
	font-size: 50px;
}

p {
	color: var(--white);
	font-family: var(--paragraph-font);
	font-size: 20px;
	text-align: center;
}

/* HEADER */
header {
  background: var(--black-alpha);
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  padding: 25px;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

header img {
	height: 50px;
	width: auto;
}

/* HEADER - NAVBAR */
nav {}

ul {
  list-style-type: none;
  margin: 0;
}

li {
  color: var(--white);
  float: left;
  font-family: var(--heading-font);
  font-size: 25px;
  margin: 10px;
}

/* HEADER - HAMBURGERMENU */
#hamburgermenu {
	display: none;
}

#hamburgermenu-open, #hamburgermenu-close {
	align-items: center;
	cursor: pointer;
	display: flex;
	height: 50px;
	left: 20px;
	position: absolute;
	top: 20px;
	width: 50px;
}

#hamburgermenu-open {
	flex-direction: column;
	justify-content: space-evenly;
}

.hamburgermenu-open-line {
	background: var(--white);
	height: 10px;
	width: 50px;
}

#hamburgermenu-close {
	display: none;
	justify-content: center;
}
#hamburgermenu-close-leftdown, #hamburgermenu-close-rightdown {
	background: var(--white);
	height: 50px;
	position: absolute;
	width: 10px;
}

#hamburgermenu-close-leftdown {
	transform: rotate(45deg);
}

#hamburgermenu-close-rightdown {x
	transform: rotate(-45deg);
}

/* SECTIONS */
section {
  display: flex;
  flex-direction: row;
  height: 100vh;
  padding: 25px 25px 0 25px
}

/* SECTIONS - SECTION-LEFT & SECTION-RIGHT */
.section-left, .section-right {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 25px 0;
  width: 50%;
}

/* FORSIDE */
#frontpage {}

#frontpage-logo {
	height: 350px;
	width: 350px;
}

.section-right-icons {
	align-items: center;
	display: flex;
	flex-direction: row;
	height: 150px;
	justify-content: space-evenly;
	position: relative;
	width: 50%;
}

.section-right-icons img {
	height: 80px;
	width: 80px;
}

/* SKILLS */
#skills {}

.section-right-skills {
	align-items: center;
	display: flex;
	justify-content: center;
}

.section-right-skills img {
	height: 50px;
	margin: 10px;
	width: auto;
}

.section-right-skills-small img  {
	height: 25px;
}

/* CASES */
#cases {}

#cases .section-right {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	height: auto;
	overflow-x:auto;
	white-space: nowrap;
}

.cases-container {
	display: none;
	float: left;
	width: auto;
}

.show {
  display: block;
}

.cases-container img {
	height: 300px;
	width: auto;
}

.cases-container-show  {
	display: block;
}

/* OM MIG */
#about {}

#about img {
	border-radius: 50%;
	height: 350px;
	width: auto;
}

/* KONTAKT */
#contact {}

#contact .section-right {
	flex-direction: row;
}

/* FOOTER */
footer {
	align-items: center;
	display: flex;
	height: 50px;
	justify-content: center;
	width: 100%;
}

footer img {
	height: 25px;
	width: 25px;
}