/* DAVE HOFF STYLE CSS */

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap');

* {
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    margin:0;
    padding:0;
}

body {
	background-color:rgba(155,129,0,1.0);/* ... oder: rgba(244,223,110,1.0); */
    font-family:'Arsenal', Arial, sans-serif;
    font-size:0.9em;
	color:rgba(1,1,1,1.0);
	/* overflow:hidden; Scrollbalken weg, aber auch kein Scollen mehr. */ 
}

html,
body {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%
}

header {
	display: borderbox;
    height: 74px;
    margin: 0 auto
}

main {
    display: table-row;
    height: 100%
}

li {
	list-style:none;
}

a {
    color:rgba(1,1,1,1.0);
    text-decoration:none;
}

a:hover {
    color:rgba(1,1,1,0.4);
}

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

footer {
    display: table-row
}

/* START: Ab hier für FWDesign */

.container_logo_fwd {
    max-width: 100%;
    height: auto;
    overflow: hidden;
    padding:10px;
}
#wrapper_logo_fwd {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: inline-block;
}

.font_garamond_reg {
	font-family: 'EB Garamond';
	font-size: 22px;
}

.container_text_fwd {
    max-width: 100%;
    height: auto;
    overflow: hidden;
    padding:10px;
}
#wrapper_text_fwd {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: inline-block;
}

/* ENDE: von FWDesign */

.header_h1 {
	margin:0;
    padding-top: 10px;
    padding-left: 10px;
}

.container {
    max-width: 960px;
    margin: 0 auto
}

.video_container {
	width: 90%;
	height: auto;
	margin: auto;
}

.video_0001 {
	width: 100%;
	height: auto;
}

.columns {
    float: left;
    padding-left: 10px;
    padding-right: 10px
}

.box_bg {
    background: rgba(87, 100, 120, 0.025)
}

.teaser_border {
    border: solid 1px rgba(87, 100, 120, 0.5);
    box-shadow: 2px 2px 2px 0 rgba(87, 100, 120, 0.45);
    margin-bottom: 10px;
}

.teaser_text {
    text-align: left;
    padding-left: 10px;
    padding-right: 10px
}

.h1 {
    font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 0;
    line-height: 100%;
    /*color: rgba(76, 88, 105, 1.0)*/
}

.h3 {
    font-size: 1.15em;
    margin-top: 10px;
    margin-bottom: 10px;
    /*color: rgba(87, 100, 120, 0.8)*/
}

.bold {
  font-weight:bold;
}

.italic {
    font-style:italic;
}

/* .p ist hier deaktiviert !!!
.p {
	text-align:center;
	color:rgba(255,255,255,0.6);
}
*/

.teaser_br {
    display:block;
    width:100%;
    height:13px;
    font-size:0.8125em;
}

.kontakt_name, .kontakt_nachname, .kontakt_mailadress, .kontakt_betreff {
	width: 100%;
	height: 30px;
	border: 1px solid rgba(87, 100, 120, 0.5);
	margin-top: 5px;
	padding: 5px;
}

.kontakt_nachricht {
	width: 100%;
	height: 320px;
	border: 1px solid rgba(87, 100, 120, 0.5);
	margin-top: 5px;
	padding: 5px;
}

.submit_padding {
	padding-left:5px;
	padding-right:5px;
}

.link_site_up {
  font-weight:normal;
  color:rgba(0,0,0,0.6);
  text-decoration:none;
}

.small-1 {
    width: 50%
}

.small-2 {
    width: 100%
}

/* START News Flash */
.news_flash {
	animation:flash linear 1.8s infinite;
	color:rgba(230,0,0,1.0);
}

@keyframes flash {
	0% {opacity:1.0;}
	50% {opacity:0.2;}
	100% {opacity:1.0;}
}

/* ENDE News Flash */

/* START MediaQuery News Flash */
@media screen and (max-width:801px)  {
	.news_flash {
		-webkit-animation-name:flash;
		-webkit-animation-timing-function:linear;
		-webkit-animation-duration:1.8s;
		-webkit-animation-iteration-count:infinite;
		color:rgba(230,0,0,1.0);
	}

	@-webkit-keyframes flash {
		0% { -webkit-opacity:1.0;}
		50% { -webkit-opacity:0.2;}
		100% { -webkit-opacity:1.0;}
	}
}
/* ENDE MediaQuery News Flash */

/* START MediaQuery Google reCaptcha */
@media screen and (max-width: 575px){
	#rc-imageselect, .g-recaptcha {
		transform:scale(0.77);
		-webkit-transform:scale(0.77);
		transform-origin:0 0;
		-webkit-transform-origin:0 0;																																											
	}
}
/* ENDE MediaQuery Google reCaptcha */

@media screen and (max-width:320px)  {
	.btn {
		width:146px;
	}
}

@media screen and (max-width:29.9375em) {
    .small_001 {
        width:50%;
    }
    .small_002 {
        width:100%;
    }
}

@media screen and (min-width:62.875em) and (max-width:78.75em) {
    .large_001 {
        width:8.333333%;
    }
    .large_002 {
        width:16.666666%;
    }
    .large_004 {
        width:33.333333%;
    }
    .large_005 {
        width:41.666666%;
    }
    .large_007 {
        width:58.333333%;
    }
    .large_008 {
        width:66.666666%;
    }
    .large_009 {
        width:75%;
    }
    .large_010 {
        width:83.333333%;
    }
    .large_011 {
        width:91.666666%;
    }
    .large_012 {
        width:100%;
    }
}