/* Box sizing rules */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	list-style-type: none;}

/* Prevent font size inflation */
html {
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	font-size: 10px;}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'], ol[role='list'] {
	list-style: none;}

/* Set core body defaults */
body {
	min-height: 100vh;
	line-height: 1.4;
	font-size: 100.01%;
	width: 100%;
	-webkit-font-smoothing: subpixel-antialiased;}
	
html, body {
	height: 100%;
	width: 100%;}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4, button, input, label {
	line-height: 1.1;}

/* A elements that don't have a class get default styles */
a:not([class]) {
	text-decoration-skip-ink: auto;
	color: currentColor;}

/* Make images easier to work with */
img, picture {
	max-width: 100%;
	display: block;}

/* Inherit fonts for inputs and buttons */
input, button, textarea, select {
	font-family: inherit;
	font-size: inherit;}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
	min-height: 10em;}

/* Anything that has been anchored to should have extra scroll margin */
:target {
	scroll-margin-block: 5ex;}

/*------------------------------------------------------------------------------------------*/
/*                                       PROJECT'S CSS                                      */
/*------------------------------------------------------------------------------------------*/

@font-face {
	font-display: swap; 
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 300;
	src: url('../fonts/montserrat-v26-latin-300.woff2') format('woff2');}

@font-face {
	font-display: swap; 
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/montserrat-v26-latin-regular.woff2') format('woff2');}

@font-face {
	font-display: swap; 
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/montserrat-v26-latin-700.woff2') format('woff2');}

@font-face {
	font-display: swap; 
	font-family: 'Archivo Narrow';
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/archivo-narrow-v30-latin-700.woff2') format('woff2');}

h1 {
	font-family: Montserrat, sans-serif;
	font-weight: 300;
	font-style: normal;
	font-size: 7.2rem;
	color: #000;
	padding-bottom: 2rem;}
	
h2 {
	font-family: Archivo Narrow, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 3.2rem;
	color: #000;
	padding-bottom: 4rem;}
	
p {
	font-family: Montserrat, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 2rem;
	color: #000;
	margin-bottom: 2.8rem;}
	
b {
	font-weight: 700;
	font-size: 2.2rem;}
	
.name {
	text-transform: uppercase;
	letter-spacing: 3px;}
.notice {
	font-size: 1.8rem;}

a, li {
	font-family: Montserrat, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 2rem;
	color: #000;
	text-decoration: none;}
a:hover {
	text-decoration: underline;
	text-decoration-color: #000;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;}
	
/*------------------------------------------------------------------------------------------*/
/*                                     NAVIGATION                                           */
/*------------------------------------------------------------------------------------------*/

nav {
	position: relative;
	width: 90vw;
	max-width: 1600px;
	margin: 0 auto;
	height: auto;}

.logo {
	position: absolute;
	top: 10rem;
	left: 0;
	width: 210px;
	height: auto;}
	
/*------------------------------------------------------------------------------------------*/
/*                                       HEADER                                             */
/*------------------------------------------------------------------------------------------*/

header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	z-index: -10;}
	
img, picture {
	height: 100%;
	width: 100%;
	object-fit: cover;}
	

/*------------------------------------------------------------------------------------------*/
/*                                        CONTENT                                           */
/*------------------------------------------------------------------------------------------*/

main {
	position: relative;
	width: 90vw;
	max-width: 1600px;
	margin: 0 auto;
	top: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);}
	
.impressum {
	top: 200px;
	-ms-transform: translateY(0);
	transform: translateY(0);}
	
.contentainer {
	width: 100%;
	display: flex;
	align-items: top;
	justify-content: space-between;
	flex-wrap: wrap;}
	
.itemleft {
	width: 60%;}
	
.itemright {
	width: 37%;
	padding-top: 0.6rem;}
	
.linkedin {
  display: inline-block;
  height: 40px;
  width: 40px;
  background-position: 0 0;
  background-image: url("../img/reynoldsson-icon-linkedin.png");
  background-size: auto 100%;
  background-repeat: no-repeat;
margin: 8px 0 0 0;}

.linkedin:hover {
background-position: -40px 0;}

.clearer {
	clear: both;}
	
/*------------------------------------------------------------------------------------------*/
/*                                       MAPS                                               */
/*------------------------------------------------------------------------------------------*/
	


/*------------------------------------------------------------------------------------------*/
/*                                         FOOTER                                           */
/*------------------------------------------------------------------------------------------*/


	
/*------------------------------------------------------------------------------------------*/
/*                                     MEDIA QUERIES                                        */
/*------------------------------------------------------------------------------------------*/	

@media only screen and (max-width: 1500px), screen and (max-height: 770px) {

.logo {
	top: 5rem;}
	
}

@media only screen and (max-width: 1300px), screen and (max-height: 700px) {

main {
	top: 200px;
	-ms-transform: translateY(0);
	transform: translateY(0);}
	
}

@media only screen and (max-width: 1000px) {
	
.itemleft {
	width: 100%;}
	
.itemright {
	width: 100%;
	padding-top: 4rem;
	padding-bottom: 6rem;}
	
}