/*
Theme Name: Freyer Haufen zu Rosselowe e.V.
Author: Steven Vogler
Author URI: https://www.facebook.com/nevetsbbg/
Description: Dies ist das Theme für den Freyen Haufen zu Rosselowe e.V.
Version: 2.0
*/

@import url(/wp-content/themes/freyer-haufen/css/kontakt.css);

body, html{
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background: url(img/bg.jpg) no-repeat center center fixed; 
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
}


/* header */

header{
        margin: 0 auto;
        padding: 0;
        max-width: 1200px;
        width: 100%;
        height: 170px;
        background: url(img/header.png) no-repeat;
        background-position: center top;
		background-size: contain;
}

header h1{
	margin: 0;
	padding: 0;
	display: none;	
}

/* Navigation */

nav{
        margin: -10px auto;
        padding: 0;
        max-width: 1200px;
        width: 100%;
        text-align: center;
}

nav ul{
	padding-left: 35px;
}

nav ul li{
	display: inline;
	margin-right: 40px;
}

nav ul li a{
	display: inline-block;
	font-size: 26px;
	font-family: 'UnifrakturMaguntia';
	text-decoration: none;
	color: #000;
}
nav ul li a:first-letter{
	color: #830405;
}

nav ul li a:hover{
	color: #cad39e;
}


/* Trenner */

#trenner{
        margin: 0 auto;
        margin-bottom: 30px;
        padding: 0;
        max-width: 1200px;
        width: 100%;
        height: 64px;
        background: url(img/trenner.png) 50% 50% no-repeat;
        background-size: 100% 100%;
}

/* Content */

#main-top{
        margin: 0 auto;
        padding: 0;
        max-width: 1200px;
        width: 100%;
        height: 105px;
        background: url(img/main_top.png) 50% 50% no-repeat;
        background-size: 100% 100%;
        text-align: center;
}

#main-top h3{
	padding-top: 32px;
	font-family: 'UnifrakturMaguntia';
	font-size: 22px;
}

#main-top h3:first-letter{
	color: #830405;
}

#main{
        margin: 0 auto;
        padding: 0;
        max-width: 1200px;
        width: 100%;
        min-height: 580px;
        background: url(img/main.png) 50% 50% no-repeat;
        background-size: 100% 100%;
}

#main h3{
	margin: 0;
	padding: 0;
	font-family: 'UnifrakturMaguntia';
	font-size: 22px;
}

#main h3:first-letter{
	color: #830405;
}

#main article{
	margin: 0;
	padding: 0px 80px;	
}

#main article p{
	margin: 0;
	padding: 0;
}

#main article a{
	color: #000;
	text-decoration: none;
}

#main article a:hover{
	color: #cad39e;
	text-decoration: none;
}

#category{
	margin: 0 24px !important;
	display: inline-block;
	width: 390px;
	vertical-align: top;
	text-align: center;
}

#category .title{
	font-weight: bold;
}

#category img{
	width: 50%;
	height: 50%;
}

#main-mit-sidebar{
        margin: 0 auto;
        padding: 0;
        max-width: 1200px;
        width: 100%;
        min-height: 580px;
        background: url(img/main.png) 50% 50% no-repeat;
        background-size: 100% 100%;
}

#main-mit-sidebar article{
	display: inline-block;
	vertical-align: top;
	margin: 0;
	padding: 0;
	width: 60%;
	text-align: left;
}

#main-mit-sidebar article p{
	margin: 0;
	padding: 0;
}

#main-mit-sidebar aside{
	display: inline-block;
	vertical-align: top;
	margin: 0;
	padding-right: 20px;
	width: 30%;
	text-align: left;
}

#main-mit-sidebar aside p{
	margin: 0;
	padding: 0;
}

#main-mit-sidebar aside h3{
	margin: 0;
	padding: 0;
	
}

#main-mit-sidebar aside a{
	color: #000;
}

#tablepress-1{
	margin: 0;
	padding: 0;
}

.tablepress{
	margin-bottom: 0px !important;
}

#tablepress-3 tbody td, #tablepress-3 tbody th{
	border: 0px !important;
}



#main-bottom{
        margin: 0 auto;
        margin-bottom: 30px;
        padding: 0;
        max-width: 1200px;
        width: 100%;
        height: 107px;
        background: url(img/main_bottom.png) 50% 50% no-repeat;
        background-size: 100% 100%;
}

/* Footer */

footer{
        margin: 0 auto;
        padding: 10px 0;
        max-width: 1200px;
        width: 100%;
        color: #cad39e;
	text-align: center;
	background: linear-gradient(to bottom,  #9b3435 1%,#610102 100%);
	background: -moz-linear-gradient(top,  #9b3435 1%, #610102 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#9b3435), color-stop(100%,#610102));
	background: -webkit-linear-gradient(top,  #9b3435 1%,#610102 100%);
	background: -o-linear-gradient(top,  #9b3435 1%,#610102 100%);
	background: -ms-linear-gradient(top,  #9b3435 1%,#610102 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9b3435', endColorstr='#610102',GradientType=0 );
}

footer p{
	margin: 0;
	padding: 0;	
}

footer a{
	text-decoration: none;
	color: #cad39e;
}

footer a:hover{
	color: #000;
}

footer ul{
	margin: 0;
	padding: 0;
}

footer ul li{
	display: inline;
	margin: 0 2px;
}

footer ul li a{
	display: inline-block;
	text-decoration: none;
	color: #cad39e;
}

footer ul li a:hover{
	color: #000;
}
/* Responsive navigation */
#menu-toggle {
    background: none;
    border: none;
    font-size: 26px;
    cursor: pointer;
}

/* Layout tweaks for small desktops */
@media (max-width: 1024px) {
    nav.main-nav ul li a {
        font-size: 24px;
    }
    main article {
        padding: 0 60px;
    }
    section.categories {
        width: 45%;
    }
    section.categories img {
        width: 60%;
        height: auto;
    }
}


/* Layout tweaks for tablets */
@media (max-width: 768px) {
	header {
		width:100%;
		background: url(img/LogoMobile.png) no-repeat;
		background-size: contain;       /* scales proportionally to fit */
        background-repeat: no-repeat;   /* avoids tiling */
	}
    /* Menü bleibt sichtbar, aber als Spalte */
    nav.main-nav {
        width: 100%;
    }

    nav.main-nav ul {
        padding-left: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    nav.main-nav ul li {
        margin: 10px 0;
    }

    nav.main-nav ul li a {
        font-size: 22px;
    }

    header.site-header {
        height: 140px;
        background-size: contain;
    }

    main h3 {
        font-size: 20px;
    }

    main article {
        padding: 0 30px;
    }

    section.categories {
        width: 80%;
        margin: 0 auto 20px;
    }

    section.categories img {
        width: 70%;
        height: auto;
    }
}


/* Layout tweaks for phones */
@media (max-width: 480px) {
	body{
		margin: 0
	}
	#main article {
		margin: 0;
		padding: 0px 10px;
	}
    nav.main-nav ul li a {
        font-size: 18px;
    }

    nav.main-nav ul li {
        margin-right: 20px;
    }

    header.site-header {
        height: 120px;
        background-size: contain;
    }

    main h3 {
        font-size: 18px;
    }

    main article {
        padding: 0 15px;
    }

    section.categories img {
        width: 100%;
        height: auto;
    }
}