@charset "utf-8";

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

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

#wrapper {
	background: url("Resources/CorporateBuilding.jpg") no-repeat center bottom;
	background-size: cover;
	box-sizing: border-box;
	width: 100vw;
	height: 100vh;
}

#wrapper::after {
	content: '';
	background: url("Resources/Grain.png") no-repeat center center;
	position: absolute;
	mix-blend-mode: overlay;
	opacity: 50%;
	width: inherit;
	height: inherit;
}

#wrapper::before {
	content: '';
	background: -moz-linear-gradient(to right, #af7d32 0%, rgba(0,0,0,.1) 100%);
	background: -webkit-linear-gradient(to right, #af7d32 0%, rgba(0,0,0,.1) 100%);
	background: linear-gradient(to right, #af7d32 0%, rgba(0,0,0,.1) 100%);
	position: absolute;
	width: inherit;
	height: inherit;
}

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

h1 {
	font-size: 4rem;
	font-weight: 100;
}

h2 {
	font-size: 2rem;
	font-weight: 100;
}

a {
	color: inherit;
	font-weight: 500 !important;
	text-decoration: none;
	transition: all 0.2s ease-in-out;
}

a:not(.button):hover {text-decoration: underline;}

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

.button {
	border: 1px solid white;
	color: white;
	display: inline-block;
	padding: 12px 32px;
	transition: all 0.2s ease-in-out;
}

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

/* ----- TEXT ----- */

#text {
	margin: 0 4rem;
	position: absolute;
	z-index: 10;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-oz-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}

/* ----- CONTACT BAR ----- */

#contact-bar {
	background-color: black;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	width: 50%;
	padding: 2rem;
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 10;
}

#contact-bar > p {
	color: white;
	display: inline-flex;
	align-items: center;
	font-size: 1.75rem;
	font-weight: 100;
	line-height: 2rem;
}

#buttons > .button {margin-left: 2rem;}
.button.mail {margin-left: 0;}

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

@media only screen and (max-width: 1440px) {
	h1 {font-size: 3rem;}
	h2 {font-size: 1.5rem;}
	
	#contact-bar {width: 100%;}
}

@media only screen and (max-width: 768px) {
	h1 {font-size: 2.5rem;}
	h2 {font-size: 1.25rem;}
	.button.insta {display: none;}
}

@media only screen and (max-width: 550px) {
	#wrapper::before {
		background: -webkit-linear-gradient(90deg, rgba(175,125,50,.9) 0%, rgba(175,125,50,.9) 100%);
		background: -moz-linear-gradient(90deg, rgba(175,125,50,.9) 0%, rgba(175,125,50,.9) 100%);
		background: -oz-linear-gradient(90deg, rgba(175,125,50,.9) 0%, rgba(175,125,50,.9) 100%);
		background: -o-linear-gradient(90deg, rgba(175,125,50,.9) 0%, rgba(175,125,50,.9) 100%);
		background: linear-gradient(90deg, rgba(175,125,50,.9) 0%, rgba(175,125,50,.9) 100%);
	}
	#text {margin: 0 2rem; width: calc(100% - 4rem);}
	h1 {text-align: center; margin-bottom: 1rem;}
	h2 {text-align: center;}
	#contact-bar {padding: 1.5rem;}
	#contact-bar > p {font-size: 1.25rem;}
	.button {font-size: .8rem;}
}

@media only screen and (max-width: 375px) {
	h1 {font-size: 2rem;}
	h2 {font-size: 1rem;}
	#contact-bar > p {font-size: 1rem;}
}