/*
Theme Name: FRICKE Landmaschinen Live Event
Theme URI: https://live.fricke24.de
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: fl
*/

@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;
}
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: 120px;
	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: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;
}

/********************
* 		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 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%;
}
form fieldset {
    display: flex;
    justify-content: space-around;
    background: #eee;
    padding-top: 25px;
    padding-bottom: 40px;
}
form.live-form {
    display: block;
}
.hidden {
    display: none !important;
}
.live-form .bier,
.live-form .balls {
    background: #eee;
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 25px;
}
.live-form .bier input,
.live-form .balls input {
    width: 200px;
    margin-top: 15px;
    margin-left: 50px;
    background: rgb(218, 218, 218);
}
.live-form legend {
    background: rgb(226, 32, 37);
    color: #fff;
    display: inline;
    padding: 15px 25px;
}
.live-form button {
    background: rgb(226, 32, 37);
}
main .wp-block-cover p.text-center {
    text-align: center;
}
form fieldset input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.checkmark {
    position: absolute;
    cursor: pointer;
    top: 30px;
    left: 40%;
    height: 25px;
    width: 25px;
    background-color: rgb(226, 32, 37);
    border-radius: 50%;
}
.checkmark:after {
    content: "X";
    position: absolute;
    display: none;
    font-size: 36px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%);
}
.container input:checked ~ .checkmark:after {
    display: block;
  }
/* 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;
}