/* GENERAL {{{ */

/* Global reset */

*,
*::before,
*::after {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
}	

/* Global variables */

/* Import fonts */

@font-face {
		font-family: 'MADE TOMMY Regular';
		src: url('fonts/Made_Tommy_Regular.otf');
}

@font-face {
		font-family: 'MADE TOMMY Bold', sans-serif;
		src: url('fonts/MADE TOMMY Bold_PERSONAL USE.otf');
}


/* General properties */

a {
		font-family: 'MADE TOMMY Regular';
		color: black;
		text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
		font-family: 'MADE TOMMY Bold', sans-serif;
}

h2 {
		font-size: 3rem;
}

p {
		font-family: 'MADE TOMMY Regular', sans-serif;
		font-size: 2rem;
}

button,
input,
b {
		font-family: 'MADE TOMMY Regular', sans-serif;
}


/* HEADER */

h1 {
		font-size: 5rem;
}

header {
		background: #412b6b;
		width: 100%;
		padding: 0 0 1rem;
}

header p {
		font-size: 1rem;
		margin: 0 auto 0.825rem; 
}


header h1, header p {
		text-align: center;
		color: white;
}

header img {
	width: 80%;
	margin: 0 10%;
}

/* Navigation */

.bar-wide {
		background: white;
		width: 80%;
		height: 0.2rem;
		margin: 0 auto;
}

.bar {
		background: white;
		width: 50%;
		height: 0.0825rem;
		margin: 0 auto;
}

nav ul {
		list-style: none;
}

nav a {
		display: block;
		text-align: center;
		font-size: 3rem;
		padding: 3rem;
		margin: 0 auto;
		padding: 1.6rem;
		color: white;
}

/* BODY */

section {
		padding: 0 3.33%;
}

.img-lg {
		display: block;
		box-shadow: 0 0.4rem 1.2rem -0.5rem;
		width: 100%;
		margin: 4rem auto;
}

.text-body {
		background: #eae2b7;
		box-shadow: 0 0.4rem 1.2rem -0.5rem;
		width: 100%;
		padding: 0.5rem 0.33rem;
		margin: 4rem auto;
}

.text-body p {
		margin: 1rem auto;
		font-size: 1.5rem;
}

.text-body h2 {
		font-size: 3rem;
}

/* Contact Form */

/* Full-width input fields */
input[type=text], input[type=password] {
		width: 100%;
		padding: 15px;
		margin: 5px 0 22px 0;
		display: inline-block;
		border: none;
		background: #f1f1f1;
}

/* Add a background color when the inputs get focus */
input[type=text]:focus, input[type=password]:focus {
		background-color: #ddd;
		outline: none;
}

/* Set a style for all buttons */
button {
		display: block;
		background-color: #d62828;
		color: white;
		padding: 1.5rem 2rem;
		margin: 4rem auto;
		border: none;
		cursor: pointer;
		width: 100%;
		opacity: 0.9;
}

button:hover {
		opacity:1;
}

.signupbtn {
		margin: 2rem auto;
}

/* Add padding to container elements */
.container {
		padding: 16px;
}

/* The Modal (background) */
.modal {
		display: none; /* Hidden by default */
		position: fixed; /* Stay in place */
		z-index: 1; /* Sit on top */
		left: 0;
		top: 0;
		width: 100%; /* Full width */
		height: 100%; /* Full height */
		overflow: auto; /* Enable scroll if needed */
		background-color: #474e5d;
		padding-top: 50px;
}

/* Modal Content/Box */
.modal-content {
		background-color: #fefefe;
		margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
		border: 1px solid #888;
		width: 80%; /* Could be more or less, depending on screen size */
}

/* Style the horizontal ruler */
hr {
		border: 1px solid #f1f1f1;
		margin: 1rem auto;
}

/* The Close Button (x) */
.close {
		position: absolute;
		right: 35px;
		top: 15px;
		font-size: 40px;
		font-weight: bold;
		color: #f1f1f1;
}

.close:hover,
.close:focus {
		color: #f44336;
		cursor: pointer;
}

/* Clear floats */
.clearfix::after {
		content: "";
		clear: both;
		display: table;
}

/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 300px) {
		.cancelbtn, .signupbtn {
				width: 100%;
		}
}

/* FOOTER */

footer {
		background: #412b6b;
		width: 100%;
		padding: 4rem 0;
}

.social-media-bar {
		width: 80%;
		margin: 0 10%;
}

.social-media-bar img {
		width: 4.5rem;
		margin: 1rem;
}