@charset "utf-8";

/* ----- GLOBAL & WRAPPER ----- */

* {
	margin: 0;
	padding: 0;
	font-family: 'Exo', sans-serif;
}

html, body {box-sizing: border-box; overflow: hidden;}

#wrapper {width: 100vw; height: 100vh;}

/* ----- GLOBAL TYPOGRAPHY ----- */

h1 {
	color: white;
	font-size: 4rem;
	font-weight: 700;
	line-height: 4rem;
	margin-bottom: 1rem;
}

h2 {
	color: white;
	font-size: 1.75rem;
	font-weight: 100;
	line-height: 1.75rem;
}

/* ----- GLOBAL BUTTONS ----- */

.primaryBtn {
	color: white;
	border: 1px solid white;
	padding: .8rem 2rem;
	text-decoration: none;
	transition: all 0.2s ease-in-out;
}

.primaryBtn:hover {
	background-color: white;
	color: black;
}

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

#content {
	background: -moz-linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,0) 100%);
	background: linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,0) 100%);
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 10;
}

#text {
	position: absolute;
	top: 50%;
	left: 4rem;
	transform: translateY(-50%);
	width: calc(100% - 8rem);
}

/* ----- BOTTOM BAR ----- */

#bottombar {
	background-color: black;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 2rem;
	height: 100px;
	width: calc(50% - 4rem);
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 9;
}

.contactBtn {font-size: 1rem;}

/* ----- BACKGROUND ----- */

#bg {
	width: 100%;
	height: 100%;
	background: url("Resources/BGs/01_DKDesigneren_DRByen.jpg") no-repeat center bottom;
	background-size: cover;
}

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

@media only screen and (max-width: 940px) {
	#bottombar {
		padding: 0 4rem;
		width: calc(100% - 8rem);
	}
}

@media only screen and (max-width: 768px) {
	#content {
		background: -moz-linear-gradient(90deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.5) 100%);
		background: -webkit-linear-gradient(90deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.5) 100%);
		background: linear-gradient(90deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.5) 100%);}
	#text {left: 3rem; width: calc(100% - 6rem);}
	h1 {font-size: 2.5rem; line-height: 2.5rem; margin-bottom: 0.25rem;}
	h2 {font-size: 1.25rem;}
	#bottombar {padding: 0 3rem; width: calc(100% - 6rem);}
	#bg {background-position: -200px;}
}

@media only screen and (max-width: 500px) {
	#content {background: rgba(0,0,0,.9);}
	#bg {background-position: -400px;}
}

@media only screen and (max-width: 440px) {
	#text {left: 1.5rem; width: calc(100% - 3rem);}
	#text > h1 {text-align: center;}
	#text > h2 {text-align: center;}
	#bottombar {padding: 0 1.5rem; height: 75px; width: calc(100% - 3rem);}
	.contactBtn {font-size: .8rem; padding: .6rem 1.5rem;}
}

@media only screen and (max-width: 375px) {#bottombar > h2 > span {display: none;}}

@media only screen and (max-width: 320px) {
	h1 {font-size: 2rem; line-height: 2rem; margin-bottom: 0.1rem;}
	h2 {font-size: 1rem;}
	#bottombar {justify-content: center;}
	#bottombar > h2 {display: none;}
}