body {
    background: url('http://www.it-kilian.de/reitstallkilian/files/images/background.jpg') no-repeat fixed center top / 100% 100% transparent;
    background-attachment: fixed;
    font-size: 16px;
    font-family: verdana;
}

.schwarz {
    color: rgb(0, 0, 0);
    transition: all 0.5s;
    /* Kontrolliert die Animationsgeschwindigkeit*/
}

.grün {
    color: #8EB852;
}

.einrueckung {
    padding: 3px 0px 3px 10px;
}

#mainDiv {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

#mainNavi li {
    float: left;
}

#header-klein {
    display: block;
}

@media only screen and (min-width: 1032px) {
    #header-klein {
        display: none;
    }
}

#header-normal {
    display: none;
}

@media only screen and (min-width: 1032px) {
    #header-normal {
        display: block;
    }
}

#normalerHeader {
    width: 98.4%;
}

@media only screen and (min-width: 1000px) {
    #normalerHeader {
        width: 98.5%;
    }
}

@media only screen and (min-width: 1000px) {
    #normalerHeader {
        width: 98.6%;
    }
}

@media only screen and (min-width: 1220px) {
    #normalerHeader {
        width: 1200px;
    }
}

#top {
    padding-top: 6.5rem;
}

@media only screen and (min-width: 1032px) {
    #top {
        padding-top: 9.5rem;
    }
}

#agenturHeader {
    left: 29rem;
}

#suchFeld {
    left: 28.5rem;
}

@media only screen and (max-width: 1150px) {
    #agenturHeader {
        left: 27.5rem;
    }
    #suchFeld {
        left: 27rem;
    }
}

@media only screen and (max-width: 1100px) {
    #agenturHeader {
        left: 25.5rem;
    }
    #suchFeld {
        left: 25.5rem;
    }
}

@media only screen and (max-width: 1050px) {
    #agenturHeader {
        left: 24rem;
    }
    #suchFeld {
        left: 24rem;
    }
}

@media only screen and (max-width: 1000px) {
    #agenturHeader {
        left: 22.5rem;
    }
    #suchFeld {
        left: 22.5rem;
    }
}

@media only screen and (max-width: 950px) {
    #agenturHeader {
        left: 21rem;
    }
    #suchFeld {
        left: 20.5rem;
    }
}

#breadcrumbs {
    display: block;
}

@media only screen and (min-width: 1032px) {
    #breadcrumbs {
        display: none;
    }
}

a {
    text-decoration: none;
    color: black;
}

#topImg {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    margin-bottom: 5px;
    height: 20px;
    width: 30px;
}

#toTopBtn {
    width: 30px;
    height: 30px;
    display: none;
    position: fixed;
    bottom: 2rem;
    right: 1rem;
    z-index: 99;
    border: solid 2px white;
    background: #093f7b;
    color: white;
    cursor: pointer;
    font-size: 30px;
    padding: 5px;
    padding-left: 14px;
    padding-right: 14px;
    border-radius: 20px;
}

#toTopBtn:hover {
    background-color: cornflowerblue;
}

.heading {
    z-index: 1;
    height: auto;
    padding: 10px;
    font-size: 20px;
    position: -webkit-sticky;
    position: sticky;
    top: 107px;
    text-align: center;
    color: white;
    border-radius: 3px;
}

@media only screen and (min-width: 1032px) {
    .heading {
        top: 155px;
    }
}

.boxshadow {
    -webkit-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.75);
}

.header-container {
    width: 100%;
    display: flex;
    align-content: stretch;
    margin-left: auto;
    margin-right: auto;
}

.header-item {
    background: white;
    flex: 1;
    height: auto;
    text-align: center;
    font-family: verdana;
}

.bezahlmethoden-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto;
}

.bezahlmethoden-item {
    color: black;
    flex-grow: 1;
    margin: 1px;
    height: auto;
    text-align: center;
    padding-top: 1px;
    padding-bottom: 1px;
    font-family: verdana;
    font-size: 16px;
    text-decoration: none;
}

.kataloge-container {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 3px;
}

.kataloge-item {
    background: rgba(255, 255, 255, 0);
    height: auto;
    text-align: center;
    font-family: verdana;
    margin: 5px;
}

.klappmenuhauptform a {
    display: block;
    color: white;
    
}

.klappmenu-container {
    display: flex;
    justify-content: space-between;
    background: #093f7b;
	border-top: solid 1px white;
}

.klappmenu-item {
    text-align: center;
    font-family: verdana;    
    background: #093f7b;
}

.submenu-aufklappen {
    font-size: 1rem;
    padding: 1rem;
    padding-left: 3.3rem;
    transition: all 0.3s;
    background: #535353;
}

.submenu-aufklappen a {
    display: block;
    padding: 10px;
}

.submenu-aufklappen form input {
    display: block;
    padding: 10px;
    font-size: 1rem;
}

.submenu-zuklappen {
    font-size: 0rem;
    padding: 0rem;
    padding-left: 3.3rem;
    transition: all 0.3s;
}

.submenu-zuklappen input {
    font-size: 0rem;
    padding: 0rem;
    padding-left: 3.3rem;
    transition: all 0.3s;
}

.footer-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto;
}

.footer-item {
    background: rgb(255, 255, 255);
    color: black;
    flex-grow: 1;
    margin: 1px;
    height: auto;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: verdana;
    font-size: 16px;
    text-decoration: none;
    border-radius: 3px;
}

.homecontent-container {
    width: 100%;
    display: flex;
    /*flex-wrap: wrap-reverse;	Nur bei ungrader Anzahl nutzen*/
    flex-wrap: wrap;
    justify-content: space-around;
}

.homecontent-item {
    position: relative;
    flex-basis: 300px;
    margin: 6px;
    flex-grow: 1;
}

.homecontent-innerbuttons-container {
    width: 100%;
    display: flex;
    /*flex-wrap: wrap-reverse;	Nur bei ungrader Anzahl nutzen*/
    flex-wrap: wrap;
    justify-content: space-around;
}

.homecontent-innerbuttons-item {
    margin: 5px;
    padding: 5px;
}


/*
.homecontent-item-right
{
    position: relative;
    flex-basis: 300px;
	margin: 6px 0px 6px 0px;		/* top right bottom left
    flex-grow: 1;
}
*/

@media only screen and (min-width: 500px) {
    .homecontent-item {
        flex-basis: 220px;
    }
}

@media only screen and (min-width: 800px) {
    .homecontent-item {
        flex-basis: 230px;
    }
}

@media only screen and (min-width: 910px) {
    .homecontent-item {
        flex-basis: 270px;
    }
}

@media only screen and (min-width: 1110px) {
    .homecontent-item {
        flex-basis: 300px;
    }
}


/* Nur bei ungrader Anzahl nutzen
#homecontentItem1
{
	order: 5;
}
#homecontentItem2
{
	order: 4;
}
#homecontentItem3
{
	order: 3;
}
#homecontentItem4
{
	order: 2;
}
#homecontentItem5
{
	order: 1;
}

@media only screen and (min-width: 500px) 
{
    #homecontentItem2
	{
		order: 3;
	}
	#homecontentItem3
	{
		order: 4;
	}
	#homecontentItem4
	{
		order: 1;
	}
	#homecontentItem5
	{
		order: 2;
	}		
}

@media only screen and (min-width: 712px) 
{
    #homecontentItem1
	{
		order: 4;
	}
	#homecontentItem2
	{
		order: 5;
	}
	#homecontentItem3
	{
		order: 3;
	}
	#homecontentItem4
	{
		order: 3;
	}
	#homecontentItem5
	{
		order: 3;
	}
}
*/

.maincontent-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.maincontent-item {
	background: rgb(255, 255, 255);
    position: relative;
    flex-basis: 250px;
    max-width: 600px;
    margin: 5px;
    flex-grow: 1;
    height: auto;
    border-radius: 3px;
	border: solid 1px black; 
}



.main-innercontent-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.main-innercontent-item {
    position: relative;
    flex-basis: 200px;
    margin: 5px;
    flex-grow: 1;
    height: auto;
    border-radius: 3px;
    border: solid 0px black;
}



.info-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.info-item {
    position: relative;
    flex-basis: 150px;
    margin: 3px;
    flex-grow: 1;
    font-size: 0.8rem;
    text-align: left;
    padding: 5px;
}

.messe-kataloge-downloads-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.messe-kataloge-downloads-item {
    position: relative;
    flex-basis: 150px;
    margin: 3px;
    flex-grow: 1;
    font-size: 0.8rem;
    text-align: left;
    padding: 5px;
}

#video20JahreDCS {
    width: 350px;
}

@media only screen and (min-width: 701px) {
    #video20JahreDCS {
        width: 220px;
    }
}

@media only screen and (min-width: 801px) {
    #video20JahreDCS {
        width: 260px;
    }
}

@media only screen and (min-width: 801px) {
    #video20JahreDCS {
        width: 350px;
    }
}

@media only screen and (max-width: 700px) {
    #video20JahreDCS {
        width: 220px;
    }
}

@media only screen and (max-width: 660px) {
    #video20JahreDCS {
        width: 500px;
    }
}

@media only screen and (max-width: 550px) {
    #video20JahreDCS {
        width: 400px;
    }
}

@media only screen and (max-width: 500px) {
    #video20JahreDCS {
        width: 350px;
    }
}

@media only screen and (max-width: 410px) {
    #video20JahreDCS {
        width: 300px;
    }
}

@media only screen and (max-width: 340px) {
    #video20JahreDCS {
        width: 280px;
    }
}

@media only screen and (max-width: 1000px) {
    #newsl {
        display: none;
    }
}

.schlagwortheader-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.schlagwortheader-item {
    position: relative;
    flex-basis: 150px;
    margin: 3px;
    flex-grow: 1;
    font-size: 0.9rem;
    text-align: left;
    padding: 5px;
}

.schlagwortheader-item-zucht {
    position: relative;
    flex-basis: 180px;
    margin: 0px;
    flex-grow: 1;
    font-size: 0.9rem;
    text-align: left;
    padding: 0px;
}

@media only screen and (min-width: 424px) {
    .schlagwortheader-item {
        flex-basis: 150px;
    }
}

@media only screen and (min-width: 510px) {
    .schlagwortheader-item {
        flex-basis: 100px;
    }
}

.schlagwortfooter-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.schlagwortfooter-item {
    position: relative;
    flex-basis: 18rem;
    margin: 3px;
    flex-grow: 1;
    font-size: 0.9rem;
    text-align: left;
    padding: 5px;
}

@media only screen and (min-width: 950px) {
    .schlagwortfooter-item {
        flex-basis: 15rem;
    }
}

.schlagwort-flex-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.schlagwort-flex-item {
    position: relative;
    flex-basis: 150px;
    flex-grow: 1;
    font-size: 0.9rem;
    text-align: left;
    padding-left: 1px;
    padding-right: 1px;
    margin: 1px;
}

@media only screen and (min-width: 661px) {
    .schlagwort-flex-item {
        flex-basis: 200px;
    }
}

@media only screen and (min-width: 800px) {
    .schlagwort-flex-item {
        flex-basis: 230px;
    }
}

@media only screen and (min-width: 950px) {
    .schlagwort-flex-item {
        flex-basis: 150px;
    }
}

.kontaktdaten-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.kontaktdaten-item {
    flex-basis: 250px;
    flex-grow: 1;
}

.impressum-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.impressum-item {
    flex-basis: 250px;
    flex-grow: 1;
    margin: 10px;
}

.displayStorno {
    display: none;
}

@media only screen and (min-width: 1032px) {
    .displayStorno {
        display: block;
    }
}

.toBtn
{
	background: #CFD9E6; 
	color: black;			
}

.toBtn:hover
{
	background: white; 
	color: #8EB852;
	cursor: pointer;			
	-webkit-box-shadow:inset 0px 0px 0px 1px #8EB852;
	-moz-box-shadow:inset 0px 0px 0px 1px #8EB852;
	box-shadow:inset 0px 0px 0px 1px #8EB852;			
}

.messe 
{
	background: white;
	color: black;
}
.messe:hover 
{
	background: #8EB852;
	color: white;
}

.home-h1
{
	font-size: 1rem; 
	font-family: verdana; 
	font-weight: normal; 
	background: rgb(255, 255, 255); 
	padding: 6px; 
	border-radius: 5px; 
	margin-top: 10px;
}

@media only screen and (max-width: 1035px) 
{
   .home-h1
	{
        margin-top: 25px;
    }
}

@media only screen and (max-width: 1031px) 
{
   .home-h1
	{
        margin-top: 0px;
    }
}