@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap');

* {
	box-sizing: border-box;
}

body {
	font-family: 'Open Sans', sans-serif;
	padding: 0px;
	margin: 0px;
}

header {
	position: relative
}

.header__logo-wrapper {
	left: auto;
	margin: 4rem auto 0;
	right: auto;
	position: relative;
	justify-content: center;
	display: flex;
}

.header__link {
	display: block;
	margin: 0;
	position: relative;
	background-color: transparent;
	text-decoration: none;
	box-sizing: border-box;
	height: 100px !important;
}

.header__logo {
	width: 100px;
	height: 100px;
}

.main__content {
	padding: 3rem 0 4rem;
}	

/* ############################################ */
/* ############################################ */
/* Hero */
/* ############################################ */
/* ############################################ */

.hero {
	background-color: #6A0136;
	color: #fff;
	padding: 3rem 2rem;
	margin-bottom: 2rem;
}

.hero .inner {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
}

.hero h1 {
	font-size: 2rem;
	padding: 1rem 0 1rem 1.5rem;
	border-left: 2px solid #fff;
	margin: 0;
}

/* ############################################ */
/* ############################################ */
/* Grid */
/* ############################################ */
/* ############################################ */

.grid__wrapper {
	width: 100%;
}

.main__content .grid__wrapper:first-of-type {
	padding-bottom: 0px;
}

.grid {
	width: 100%;
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
}

.grid__title {
	margin: 0px;
	margin-bottom: 15px;
}

.grid__row {
	position: relative;
	width: auto;
	margin-bottom: 0px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 2rem;
}

.grid__box__container {
	width: 100%;
	position: relative;
}

.grid__box {
	display: inline-block;
	vertical-align: top;
	position: relative;
	text-decoration: none;
	width: 100%;
	height: 0;
	margin: 0;
	padding: 0;
	padding-bottom: 100%;
	color: #fff;
	background-color: #6A0136;
	border-radius: 0; var(--default-border-radius);
	transition: all 200ms;
}
.grid__box:hover {
	box-shadow: 10px 10px 0 rgba(106, 1, 54,0.3);
	transform: translateY(-10px);
}

.grid__box__container:nth-of-type(even) .grid__box {
	background-color: #B01749;
}

.grid__box__container:nth-of-type(even) .grid__box:hover {
	box-shadow: 10px 10px 0 rgba(176, 23, 73, 0.3);
}

.box__heading {
	position: relative;
	max-width: 90%;
	margin: 0;
	margin-top: 25px;
	margin-left: 26px;
	padding-left: 16px;
	padding-top: 7px;
	padding-bottom: 7px;
	font-size: 30px;
	font-weight: 600;
	border-left: 2px solid #fff;
	text-decoration: none;
	text-align: left !important;
}

.box__hashtag.true {
	position: absolute;
	display: block;
	margin-top: 18px;
	margin-left: 28px;
	/* background: linear-gradient(90deg, #e3000f, #B61C3E); */
	background-color: #e3000f;
	color: #fff;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0.7px;
	border-radius: 50px;
	padding: 2px 12px;
}
.box__hashtag.true::before {
	content: "#";
	margin-right: 2px;
}

.box__hashtag.false {
	display: none;
}


.box__link {
	position: absolute;
	bottom: 25px;
	right: 25px;
	font-size: 22px;
	border-bottom: 1.5px solid #fff;
	text-transform: uppercase;
	text-decoration: none;
	text-align: right!important;
}

/* ############################################ */
/* Box Colours */
/* ############################################ */

/* SPD CD Colours */

.box--red {
	background-color: #e3000f;
}
.box--red .box__hashtag.true{
	background-color: #fff;
	color: #e3000f;
}

.box--dark-red {
	background-color: #B61C3E;
}
.box--purple {
	background-color: #980267;
}
.box--blue {
	background-color: #00B4CC;
}
.box--grey {
	background-color: #22272a;
}

/* Gradients */

.box--grad-red {
	background: linear-gradient(135deg, #e3000f, #B61C3E);
}
.box--grad-blue {
	background: linear-gradient(135deg, #00B4CC, #003399 250%);
}

/* Juso Colours */

.box--jusos-mint {
	background-color: var(--color-jusos-mint);
}
.box--jusos-helles-mint {
	background-color: var(--color-jusos-helles-mint);
}
.box--jusos-rosa {
	background-color: var(--color-jusos-rosa);
}
.box--jusos-gelb {
	background-color: var(--color-jusos-gelb);
}

/* Additional Colours */

.box--europe-blue {
	background-color: #003399;
}

/* ############################################ */
/* ############################################ */
/* ############################################ */
/* Responsive */
/* ############################################ */
/* ############################################ */
/* ############################################ */

@media screen and (max-width:1065px) {

	/* ############################################ */
	/* ############################################ */
	/* Main */
	/* ############################################ */
	/* ############################################ */

	/* ############################################ */
	/* Grid */
	/* ############################################ */

	.grid__title {
		margin-left: 20px;
	}
	
	.grid__row {
		grid-template-columns: 1fr 1fr;
	}
}

@media screen and (max-width:768px) {

	.menu__left {
		margin-left: 25px;
	}
	.menu__right.move-left {
		margin-right: 85px;
	}

	.menu__account {
		margin-right: 25px;
	}
	.menu__account .user-name {
		display: none !important;
	}

	/* ############################################ */
	/* ############################################ */
	/* Main */
	/* ############################################ */
	/* ############################################ */

	/* ############################################ */
	/* Hero */
	/* ############################################ */

	.hero__big h1 {
		margin: 0;
		padding: 0;
		font-size: 45px;
	}
	.hero__big h3 {
		margin: 0;
		margin-top: 15px;
		padding: 0;
		font-size: 17px;
		font-weight: 400;
	}

	.hero__search {
		width: 100%;
		margin-top: 30px;
	}
	.hero__search input {
		width: 80%;
	}

	/* ############################################ */
	/* Main Content */
	/* ############################################ */


	/* ############################################ */
	/* Grid */
	/* ############################################ */
	
	.grid__row {
		grid-template-columns: 1fr;
	}

	.grid__box {
		width: 100%;
		margin-right: 0px;
	}

	/* ############################################ */
	/* ############################################ */
	/* PAGE: Auth */
	/* ############################################ */
	/* ############################################ */

	.auth__wrapper {
		width: auto !important;
		margin-left: 0;
		transform: translateX(0);
		min-width: inherit;
		max-width: inherit;
		padding: 27px 27px;
	}

}