/*
Theme Name: GRANIT Live Event
Theme URI: https://granit.live
Author: Matthias Klindworth
Author URI: http://www.k-evolution.de
Description: Template WordPress Granit Parts
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: live-event
*/

@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 400;
	src: url("fonts/outfit.ttf") format("truetype");
}

@font-face {
	font-family: 'Font Awesome 5 Brands';
	font-style: normal;
	font-weight: 400;
	font-display: block;
	src: url("fonts/fa-brands-400.eot");
	src: url("fonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("fonts/fa-brands-400.woff2") format("woff2"), url("fonts/fa-brands-400.woff") format("woff"), url("fonts/fa-brands-400.ttf") format("truetype"), url("fonts/fa-brands-400.svg#fontawesome") format("svg"); }

.fab {
	font-family: 'Font Awesome 5 Brands';
	font-weight: 400; 
}


:root {
	--text: 0,0,0;
	--f: 226,32,37;
	--f: 205,46,40;
}
body {
	color: rgb(var(--text));
	font-size: 18px;
	margin: 0;
	padding: 0;
}
body * {
	color: inherit;
	text-decoration: inherit;
	font-size: inherit;
	font-family: "Outfit";
	font-weight: 400;
	list-style: inherit;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	line-height: 1.15em;
	outline: 0;
	-webkit-hyphens: auto;
	-webkit-hyphenate-limit-chars: auto 3;
	-webkit-hyphenate-limit-lines: 4;
	-ms-hyphens: auto;
	-ms-hyphenate-limit-chars: auto 3;
	-ms-hyphenate-limit-lines: 4;
	-moz-hyphens: auto;
  	hyphens: auto;
	position: relative;
	z-index: 1;
}
strong {
	font-size: 700;
}



h1 {
	font-size: 30px;
	font-weight: 700;
	margin-bottom: 1rem;
}
h1 small {
	font-weight: 300;
}

h2 {
	font-size: 20px;
	margin-bottom: 1rem;
}

img {
	max-width: 100%;
	height: auto;
}

ul {
	margin-left: 1.25em;
	margin-bottom: 1rem;
	line-height: 1.5;
}

p {
	font-weight: 300;
	margin-bottom: 1rem;
	line-height: 1.5;
}

main a {
	color: rgb(var(--f));
}

.container {
	width: 100%;
	max-width: 1640px;
	margin: auto;
	padding: 10px;
}
.wp-block-button__link {
	text-transform: uppercase;
	font-size: 25px;
}

/********************
* 		Header		*
********************/
header {
	background: #fff;
	position: fixed;
	top: 0;
	width: 100%;
	height: 75px;
	z-index: 999999;
}
/********************
* 		Teaser		*
********************/

main .wp-block-cover {
	height: 75vh;
	min-height: 550px;
}
main .wp-block-cover * {
	color: rgb(var(--f));
	/*text-align: right;*/
	font-size: calc(40px + 1.5vw);
}
main .wp-block-cover p:nth-child(1) {
	font-weight: 700;
}
main .wp-block-cover p:nth-child(2) {
	font-weight: 300;
}
/*
main .wp-block-cover .wp-block-button__link {
	margin-top: 1.5rem;
	font-size: calc(15px + .5vw);
}
main .wp-block-cover .wp-block-group__inner-container {
	display: flex;
	gap: 1.5rem;
	align-content: center;
	align-items: center;
	justify-content: center;
	border: 1px solid red;
}
main .wp-block-cover .wp-block-group__inner-container * {
	white-space: nowrap;
	border: 1px solid green;
	padding: 0;
	margin: 0;
}
main .wp-block-cover:nth-child(1) {
	/*filter: grayscale(100%);*/
	/*background-color: rgba(255,255,255,1);
	background-blend-mode: luminosity;
  	transition: background-color 1s ease-out;*/
/*}
main > div.wp-block-group.container:first-child {
	margin: 120px auto 60px auto;
}
*/

.home main .wp-block-cover {
	display: flex;
	align-content: flex-end;
	align-items: flex-end;
	justify-content: flex-end;
}
.home main .wp-block-cover .wp-block-group__inner-container {
	display: flex;
	gap: 1.5rem;
	align-content: center;
	align-items: center;
	justify-content: center;
	transform: translateY(-3rem);
}
.home main .wp-block-cover .wp-block-group__inner-container * {
	width: auto;
}
.home main .wp-block-cover .wp-block-group__inner-container .wp-block-buttons,
.home main .wp-block-cover .wp-block-group__inner-container .wp-block-buttons .wp-block-button {
	margin: 0 !important;
	padding: 0 !important;
	float: none;
	display: flex;
	align-content: flex-start;
	align-items: flex-start;
	justify-content: flex-start;
}
.home main .wp-block-cover .wp-block-group__inner-container a {
	font-size: calc(15px + .5vw);
	white-space: nowrap;
	margin: 0 !important;
}
.home main .wp-block-cover .wp-block-group__inner-container .wp-block-buttons .wp-block-button .wp-block-button__link {
	/*transform: translateY(-.75vw);*/
	/*transform: translateY(calc(calc(.75rem + 1.5vw) * -1));*/
}

@media(max-width:800px) {
	.home main .wp-block-cover .wp-block-group__inner-container {
		flex-direction: column;
	}
}

/********************
* 		Event		*
********************/
.event {
	background: rgb(var(--f));
	color: #fff;
	padding: 60px;
	transform: translateY(-60px);
}
.event > div {
	display: grid;
	grid-template-columns: 450px auto;
	grid-column-gap: 30px;
	grid-row-gap: 60px;
}
.event > div > div {
	padding-bottom: 100px;
}
.event figcaption {
	text-align: center;
	padding-top: 30px;
	font-weight: 300;
}
.event .wp-block-button__link {
	position: absolute;
	bottom: 23px;
	width: calc(50% - 15px);
	margin: 30px 0;
	font-weight: 300;
	display: flex;
	flex-direction: row;
	align-content: center;
	align-items: center;
	align-self: center;
	justify-content: center;
}
.event .wp-block-button__link:last-child {
	right: 0px;
}
.event .wp-block-button__link *:last-child {
	margin-right: 1rem;
	height: 20px;
}
.event p {
	line-height: 1.25;
}

/********************
* 		Footer		*
********************/
footer {
	background: #333;
	color: #fff;
	font-weight: 300;
}
footer a:Hover {
	color: rgb(var(--f));
}
footer .container {
	display: flex;
	flex-direction: row;
}
footer .container > * {
	padding: 30px;
	width: 100%;
}
footer .container > *:nth-child(1) {
	padding-left: 0;
}
footer .container > *:last-child() {
	padding-right: 0;
}
footer .h4 {
	display: block;
	font-size: 20px;
	font-weight: 400;
	margin-bottom: 30px;
}
footer ul {
	list-style: square;
	margin-left: 1.5rem;
}
footer li {
	margin-bottom: .5rem;
}
footer .fab {
	margin-right: 15px;
}


/********************
* 		Forms		*
********************/
form.container {
	display: none;
	margin: 60px auto;
	padding: 60px;
	background: rgb(var(--f));
	background: repeating-linear-gradient(
					  	-30deg,
					  	rgba(var(--f),.025),
						rgba(var(--f),.025) 1px,
					  	rgba(255,255,255,0.5) 2px,
					  	rgba(255,255,255,0.5) 16px
					);
}
form.show {
	display: block;
}
form legend {
	font-size: 30px;
	font-weight: 700;
}
form .wp-block-media-text {
	background: #fff;
}
form > div {
	display: flex;
}
form > div > div {
	width: 100%;
	margin-right: 30px;
}
form > div > div:last-child {
	margin-right: 0;
}
form > * {
	margin: 0;
	margin-bottom: 15px;
}
form label {
	display: block;
	margin-bottom: 10px;
}
form select,
form input {
	display: block;
	border: 1px solid rgb(var(--text));
	padding: 7.5px 15px;
	width: 100%;
}
form select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23d04338%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
      linear-gradient(to bottom, #ffffff 0%,#eeeeee 100%);
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto, 100%;
}
/* Hide arrow icon in IE browsers */
form select::-ms-expand {
    display: none;
}
form .checkbox {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-column-gap: 1rem;
}
form input[type=checkbox] {
	display: inline !important;
	width: auto;
}