:root {
--color: #65140c;
} @font-face{
font-family: alana,sans-serif;
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'EBGarmond08';
src: url(https://spinnradmaerchen.de/font/EBGaramond08-Regular.woff2) format('woff2'),
url(https://spinnradmaerchen.de/font/EBGaramond08-Regular.woff) format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'EBGarmondSC08';
src: url(https://spinnradmaerchen.de/font/EBGaramondSC08-Regular.woff2) format('woff2'),
url(https://spinnradmaerchen.de/font/EBGaramondSC08-Regular.woff) format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'EBGarmondSC12';
src: url(https://spinnradmaerchen.de/font/EBGaramondSC12-Regular.woff2) format('woff2'),
url(https://spinnradmaerchen.de/font/EBGaramondSC12-Regular.woff) format('woff');
font-weight: normal;
font-style: normal;
}
*{
color: var(--color);
padding: 0;
margin: 0;
}
body{
background: url(https://spinnradmaerchen.de/wp-content/uploads/2018/12/background_kl-_4.png);
background-size: 40%;
}
h3{
font-family: "alana",sans-serif;
font-size: 2.1em;
line-height: 1.5;
margin: 100px 0 20px 0;
}
h4, .event-title h3{
font-family: "alana",sans-serif;
font-size: 1.5em;
margin: 70px 0 50px 0;
}
input, textarea, select{
font-family: "EBGarmondSC08";
}
section{
display: grid;
grid-template-columns: 100px 1fr;
grid-column-gap: 100px;
padding: 0 150px 0 50px;
} #footer{
display: flex;
width: 100%;
height:60px;
background:
url(http://spinnradmaerchen.de/wp-content/uploads/2018/12/navBackgroundBorder_kl.png),
url(http://spinnradmaerchen.de/wp-content/uploads/2018/12/navBackground_kl.png);
background-size: 50% 100%;
align-items: center;
padding: 0 50px;
}
#footer a, #footer span{
background-image:linear-gradient(90deg,#cc923c,#e4c769,#cc923c,#e4c769,#cc923c);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#katrinPortrait{
width: 40%;
} .navItems{
width:100%;
justify-content: space-between;
align-items: center;
flex-direction: row;
}
.navigation{
background:url(http://spinnradmaerchen.de/wp-content/uploads/2018/12/navBackground_kl.png);
background-size: 50% 100%;
position: -webkit-sticky;
position: sticky;
top:0;
padding: 0;
z-index: 999;
}
.mobileNav{
display: none;
}
.backgroundBorder{
display: flex;
width: 100%;
justify-content: space-around;
padding: 10px 0;
background:  url(http://spinnradmaerchen.de/wp-content/uploads/2018/12/navBackgroundBorder_kl.png);
background-size: 50% 100%;
}
.navigation a, .navBackSpezial a{
font-family: "EBGarmondSC12";
text-transform: uppercase;
background-image:linear-gradient(90deg,#cc923c,#e4c769,#cc923c,#e4c769,#cc923c);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.container img{
border-radius: 10px;
border: 3px solid #cc923c;
}
.headline{
display: flex;
justify-content: center;
font-size: 3em;
text-align: center;
font-family: "alana",sans-serif;
font-weight: bold;
margin: 20px 0;
}
.headline p{
display: inline-block;
background: url(http://spinnradmaerchen.de/wp-content/uploads/2018/12/rolle_kl_2.png) no-repeat;
background-size: 100% 100%;
padding: 40px 70px;
}
.standartText{
margin: 20px 0;
font-family: "EBGarmond08";
font-size: 1.5em;
}
.formInput{
width: 60%;
margin: 5px auto;
border: 1px solid var(--color);
}
.formSelect{
border: 1px solid var(--color);
}
.rahmenText{
display: flex;
flex-direction: column;
justify-content: center;
background: url(http://spinnradmaerchen.de/wp-content/uploads/2018/12/rahmen_kl_2.png) no-repeat;
background-size: 100% 100%;
padding: 100px 50px;
font-family: "EBGarmond08";
font-size: 1.5em;
}
.rahmenText p{
display: inline-block;
margin: 0;
}
.logo img{
width: 400px;
margin: 40px;
}
.imageDiv{
width:100%;
height: 400px;
margin: 20px 0;
background-size: 100% 100% !important;
}
.aufzaehlung {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style: none;
margin-bottom: 90px;
font-family: "alana", sans-serif;
font-size: 20pt;
}
.aufzaehlung li{
width: 30%;
display: flex;
flex-direction: row;
margin-top: 20px;
}
.aufzaehlung li .zeichen{
width:20%;
height:100%;
background:url(http://spinnradmaerchen.de/wp-content/uploads/2018/12/aufzaehlung.png) no-repeat 0 0;
background-size: contain;
}
.aufzaehlungTermine {
display: flex;
flex-wrap: wrap;
list-style: none;
}
.aufzaehlungTermine li {
background:url(http://spinnradmaerchen.de/wp-content/uploads/2018/12/aufzaehlung.png) no-repeat 0 0;
background-size: 12% 100%;
padding-left:9%;
font-size: 12pt;
margin:10px 0;
}
.musterLinks{
background: url(http://spinnradmaerchen.de/wp-content/uploads/2018/12/musterLinks_kl.png);
background-size: 100%;
}
.spinnrad{
position: absolute;
right: 50px;
width: 200px;
border: none !important;
}
.rad1{
top:750px;
}
.rad2{
top:2300px;
right:100px;
}
.rad3{
top:3000px;
right: 100px;
}
.rad4{
top: 4340px;
right: 100px;
}
.rad5{
top: 4940px;
right: 100px;
}
.rad6{
top: 5480px;
right: 100px;
}
.rad7{
top: 6000px;
}
.custom-select{
display: block;
}
.mediaAndText{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-top: 80px;
}
.mediaAndText .text{
width: 50%;
}
.mediaAndText .media{
width: 45%;
}
.mediaLeft{
flex-direction: row-reverse;
}
.paraContainer{
width: 100%;
height: 500px;
}
.abstandUnten{
margin-bottom: 50px;
}
.ohneMarginTop{
margin-top: 30px;
}
.groessererAbstandOben{
margin-top: 100px;
}
.event{
display: grid;
grid-template-columns: 80px 1fr;
}
.event-date.single-date{
margin: 0;
}
.event-info.single-day{
margin: 0 0 0 2rem;
}
.startdate{
width: 100% !important;
height:100%;
background-color: transparent !important;
background: url(http://spinnradmaerchen.de/wp-content/uploads/2018/12/aufzaehlung.png) no-repeat 0 0;
background-size: 100%;
background-size: contain;
}
.startdate *{
display: none;
}
.event-content p{
font-size: 12pt;
margin-top:40px;
}
.anker{
width: 100%;
height:50px;
}
.video-center{
text-align: center !important;
}
.newsletterForm{
width:100%;
display: flex;
justify-content:center;
align-items:center;
}
.newsletterForm form .formInput{
width: 100%;
}