body {
    padding-top: 0px;
    background-color: #F6F6F6 !important;
    font-family: 'Rokkitt', serif;
    margin-bottom: 40px;
    min-height: 100vh;
}

@media (min-width: 992px) {
	body {
		padding-top: 0px;
	}
}


@media (max-width:1024px){  /*bigger font on smaller devices*/
	.sidemenu {
		font-size: 98%!important;
	}
	.submenu {
		font-size: 96%!important;
	}
	.sitecontent {
    font-size: 133%!important;
	}
	.disclaimer {
		font-size: 97%!important;
	}
	.btn-primary {
		font-size: 97%!important;
	}
	.table {
		font-size: 98%!important;
	}
	.tableSys {
		font-size: 96%!important;
	}
	.steckbrief {
		font-size: 83%!important;
	}
	.faq{
		font-size:95%!important;
	}
	
}


/* Collapsing the menu */
@media (max-width: 991px) {
	.navbar-header {
		float: none;
	}
	.navbar-left, .navbar-right {
		float: none !important;
	}
	.navbar-toggle {
		display: block;
	}
	.navbar-collapse {
		border-top: 1px solid transparent;
		box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
	}
	.navbar-fixed-top {
		top: 0;
		border-width: 0 0 1px;
	}
	.navbar-collapse.collapse {
		display: none!important;
	}
	.navbar-nav {
		float: none!important;
		margin-top: 7.5px;
	}
	.navbar-nav>li {
		float: none;
	}
	.navbar-nav>li>a {
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.collapse.in {
		display: block !important;
	}
}


/* LANGUAGE */
.en {
    display: none;
}
.de {
    display: none;
}
.languagebuttons{
	float:right;
	margin-top:-8px;
	margin-right:0px;
	padding-top:0px!important;
	padding-bottom:0px!important;
	color:#CCC!important;
	font-family: 'PT Sans', sans-serif;
}
.deButton{
	font-size:65%;
	margin-right:-8px!important;
	padding-left:10px!important;
	padding-right:10px!important;
	padding-bottom:3px;
	color:#557F00;
}
.enButton{
	font-size:65%;
	margin-left:0!important;
	padding-left:10px;
	padding-right:10px;
	padding-bottom:3px;
	color:#557F00;
}


/* SUBMENUS (ID for JS)*/
#menuinvisible {
    display: none;
}
html {
    position: relative;
    min-height: 100%;
}


/*links in menu */
a.list-group-item, a.list-group-item:visited {
    color: #86AC6B;
}
.submenu a, .submenu a:visited {
    color: #99B984;
}
#currentpage a {
    color: #8FC86C;
    padding-bottom: 4px;
	background-color:#484848;
}
@media (min-width: 992px) {
	#currentpage a {	
		margin-bottom: 6px;
		border-right: solid 3px #8FC86C!important;
		background: transparent; /* For browsers that do not support gradients */
		background: -webkit-linear-gradient(left, #2A2A2A, #222); /* For Safari 5.1 to 6.0 */
		background: -o-linear-gradient(left, #2A2A2A, #222); /* For Opera 11.1 to 12.0 */
		background: -moz-linear-gradient(left, #2A2A2A, #222); /* For Firefox 3.6 to 15 */
		background: linear-gradient(left, #2A2A2A, #222); /* Standard syntax */
	}
}


/* all other links */
a {
    color: #93BC4E;
    text-decoration: none;
}
a:visited {
    color: #8BB14A;
    text-decoration: none;
}
a:active {
    color: #9AAF78!important;
    text-decoration: none;
}
a:hover {
    color: #AACD75!important;
    text-decoration: none;
}

/* lines */
hr {
    margin-top: 2px;
    margin-bottom: 30px;
    border-color: #CCC;
}
.btn-xs {
    border: solid 0.5px #CECECE!important;
}



/* ------------------ HEADER ------------------*/


/* ----- Banner ------- */
nav.navbar {
    padding-top: 0px;
    padding-bottom: 0px;
    background-color: #F6F6F6 !important;
    display: block;
    /*Animation*/
    -webkit-transition: all 0.4s ease!important;
    transition: all 0.4s ease!important;
    border: 0px;
}
nav.navbar.shrink {
    min-height: 35px!important;
    padding-top: 0px!important;
    padding-bottom: 0px!important;
    font-size: 90%!important;
}
#topmargin.shrink {
    min-height: 35px!important;
}
.titlecontainer {
    background-image: url('../img/banner1_mobile.jpg');    /* <------  HIER mobile (!) Banner ändern (url)*/
    background-color: #1E2D1A;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: bottom right;
}

@media (min-width: 768px) {
	.titlecontainer {
		background-image: url('../img/banner1.jpg'); 		/* <------ HIER normalgroßen (!) Banner ändern (url)*/
	}
}
.titlecontainer.shrink {
    background-size: cover!important;
}
.title {
    font-size: 185%;
    padding-top: 100px;
    padding-bottom: 12px;
    padding-left: 2.6%;
    margin-top: 10px;
    font-family: 'PT Sans', sans-serif;
    font-weight: 200;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #eee;
}
.title.shrink {
    padding-top: 0px!important;
}
.title a {
    color: #eee!important;
}
.title a:visited {
    color: #eee;
}
.subtitle {
    font-size: 100%;
    font-family: 'PT Sans', sans-serif;
    font-weight: 200;
    letter-spacing: 1.5px;
    padding-bottom: 36px;
    padding-left: 2.6%;
    color: #ddd;
}
.titlehr {
    background-color: #DBDBDB;
    padding-bottom: 0px!important;
    margin-bottom: 2px!important;
    padding-top: 1px;
    margin-top: 0px;
}
.hidden {
    display: none!important;
    visibility: hidden!important;
}

@media (min-width: 992px) {
	.titlecontainer {
		padding-left: 0px;
		padding-right: 0px;
	}
	.subtitle {
		font-size: 110%;
		letter-spacing: 1.8px;
	}
}



/* ----- SIDEMENU -------- */
.backgroundcontainer {
    background-color: #EFEFEF;
}
.sidemenu {
    /*padding-top: 2px!important;*/
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: -10px;
    padding-left: 16px;
    padding-right: 0px;
    font-family: 'PT Sans', sans-serif;
    letter-spacing: 2px;
    font-size: 95%;
    background-color: transparent;
}
.sidemenulist {
    background-color: transparent;
    padding-left: 8px!important;
    border: solid 0.5px #ccc!important;
}
.sidemenulist:active {
    border: solid 0.5px #bbb!important;
	background-color:transparent!important;
}
.sidemenulist:hover{
	background-color:#555!important;
}
.menutitle {
    font-size: 110%;
    text-transform: uppercase;
    padding-top: 20px;
    padding-bottom: 6px;
    width: 85%;
	color: #111;
}
.submenu {
    font-size: 92%;
    margin-left: 16px;
    /*padding-top: 0;
    margin-top: -5px;
    margin-bottom: 5px;*/
}
.menudevider {
    border-color: transparent;
}
.menuchapterunderline {
    border-color: transparent;
    padding-bottom: 0px;
    margin-bottom: 0px;
    width: 85%;
    margin-left: 0;
}
.menutitletext {
}
.menuicon {
    display: none;
}


/* collapsed menu */
#menubutton {
    z-index: 100;
    background-color: #80A181;
    padding-top: 8px;
    margin-left: 4px;
    margin-right: 4px;
    width: calc(100% - 8px);
    border: solid 0.5px #CECECE!important;
    border-radius: 5px;
    float: none;
    margin-bottom: 0px;
    font-family: 'PT Sans', sans-serif;
    color: white;
    font-weight: 200;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}


@media (min-width:768px) {
	#menubutton {
		width: 750px!important;
		margin-left: auto;
		margin-right: auto;
	}
}

@media (min-width: 992px) {
	.backgroundcontainer {
		background-color: #2A2A2A;
	}
	.menutitle {
		color: #cfcfcf;
	}
	.sidemenu {
		margin-top: 22px!important;
		padding-top: 16px;
		padding-left: 6px!important;
		letter-spacing: 1.4px;
		font-size: 93%;
		position: relative;
	}
	.submenu {
		padding-top: 0;
		margin-top: -5px;
		margin-bottom: 5px;
	}
	.vertical-align-box {
		margin-top: 22px!important;
	}
	.sidemenulist {
		border: none!important;
		border-right: solid 3px transparent !important;
		border-radius:0!important;
		margin-right: -15px;
		padding-left: 12px!important;
		padding-right: 4px;
	}
	.sidemenulist:active {
		border: none!important;
		
	}
	.sidemenulist:hover{
		border-right: solid 3px #AACD75 !important;
	}
	.menudevider {
		margin-top: 15px;
		margin-bottom: 5px;
	}
	.menuchapterunderline {
		border-color: #999;
		margin-top: 16px;
		margin-bottom: 2px;
	}
	.menutitletext {
		width: 70%!important;
		float: left;
		text-align: left;
	}
	.menuicon {
		display: inline-block;
		float: left;
		width: 23.5%;
		opacity: 0.74;
		color: #888;
	}
	.icon1 {
		margin-top: -1px;
	}
	.icon2 {
		margin-top: -3px;
	}
	.icon3 {
		margin-top: 2.3px;
	}
}

@media (min-width: 1200px) {
	.menuicon {

		width: 22%;
	}
	.icon1 {
		margin-top: -5.5px;
	}
	.icon2 {
		margin-top: -7px;
	}
	.icon3 {
		margin-top: 1px;
	}
	.sidemenu {
		padding-left: 8px!important;
	}
	.sidemenulist {
		padding-left: 10px!important;
	}
}




/* ------------ MAIN CONTENT (Standard CSS = Phone view) --------------- */
.vertical-align-box {
	margin-top:-5px!important;
}
.btn-default {
    margin-top: 18px;
}
.sitecontent {
    background-color: #fff;
    font-size: 127.5%;
    padding-left: 5%;
    padding-right: 5%;
    line-height: 1.8em;
    min-height: 95vh;
}
.quote {
    text-align: center;
    font-size: 110%;
    padding: 30px;
    color: #666;
    line-height: 180%;
}
.contenttitle {
    font-family: 'PT Sans', sans-serif;
    letter-spacing: 5px;
    text-transform: uppercase;
    font-size: 185%;
    padding-bottom: 10px;
    padding-top: 10px;
    line-height: 140%;
    color: #395701;
}
.contentsubtitle {
    font-family: 'PT Sans', sans-serif;
    letter-spacing: 3.4px;
    font-size: 125%;
    padding-bottom: 10px;
    padding-top: 10px;
    margin-bottom: 0px;
    color: #69882E;
}

/*regular headlines*/
h1, h2, h3, h4, h5, h6 {
    font-family: 'PT Sans', sans-serif;
    font-weight: 250;
    letter-spacing: 1.5px;
    color: #69882E;
}
h5 {
    font-size: 88%;
    padding-top: 10px;
    color: #729531!important;
}

@media (min-width: 768px) {
	h1, h2, h3, h4, h5, h6 {
		letter-spacing: 3px;
	}
	h5 {
		font-size: 85%;
		letter-spacing: 2.2px!important;
	}
}
.contentimg {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* News sections on Index File */
.frontwidget {
    margin-bottom: 20px;
}
.newInfo {
    padding-left: 0;
    padding-right: 0;
}
.newPics {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 1px;
}
.newPicsRow {
    margin-left: 0.5%;
    margin-right: 0.5%;
    margin-bottom: 4%;
    height: 100px;
}
.newimageleft {
    height: 100%;
    padding-left: 0;
    padding-right: 2%;
}
.newimageright {
    height: 100%;
    padding-left: 2%;
    padding-right: 0;
}
.newimage {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}
.lastupdate {
    font-size: 85%;
    color: #69882E;
    padding-left: 0;
    padding-right: 0;
}

/* general image captions */
.caption {
    font-size: 90%;
    padding-top: 0px!important;
    line-height: 135%;
    color: #777;
    font-style: italic;
    margin-top: -6px;
}

/* caption changes in FAQ section*/
.finden {
    margin-top: -5px!important;
    padding-left: 0;
    padding-right: 0;
    font-size: 96%;
    text-align: justify;
}

@media (min-width: 768px) {
	.finden {
		padding-left: 6%;
		padding-right: 6%;
		font-size: 93%;
		text-align: center;
	}
	}

@media (min-width: 992px) {
	.vertical-align-box {
		margin-top:15px!important;
	}
	.finden {
		padding-left: 13%;
		padding-right: 13%;
	}
	.btn-default {
		margin-top: 2px;
	}
}


/* larger text for notes */
.note {
    font-size: 111%;
    letter-spacing: 0.3px;
    padding-top: 30px;
    padding-bottom: 15px;
}


/* disclaimer on about page */
.disclaimer {
    font-size: 95%;
}
.disclaimer-maintitle {
    font-family: 'PT Sans', sans-serif;
    letter-spacing: 3.4px;
    text-transform: uppercase;
    margin-bottom: 0px;
    margin-top: 10px;
    font-size: 105%;
}
.disclaimer-title {
    font-family: 'PT Sans', sans-serif;
    letter-spacing: 1px;
    font-size: 85%;
    padding-top: 15px;
    margin-bottom: 0px;
    text-decoration: underline;
}
.disclaimer-source {
    font-family: 'PT Sans', sans-serif;
    font-size: 70%;
    letter-spacing: 0.6px;
    text-align: right;
}


/* GALLERY OVERVIEW IMAGES (actual galleries have additional css file!) */
.galOverviewImg {
    height: 200px;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
    background-color: grey;
    background-size: cover;
    background-position: center;
    margin-bottom: 5px;
}
.galleryaz-overview-img {
    height: 150px;
    max-width: 280px;
    min-width: 150px;
    margin-left: auto;
    margin-right: auto;
    background-color: grey;
    background-size: cover;
    background-position: center;
}
.gallerycaption {
    font-family: 'PT Sans', sans-serif;
    letter-spacing: 1px;
    font-size: 75%;
    line-height: 140%;
    padding-top: 5px;
    padding-bottom: 2px;
}
.imghover:hover {
    filter: brightness(82%);
    transition: 0.4s;
}


/* Back to overview on species-az.php */
.backtooverview {
    font-family: 'PT Sans', sans-serif;
    letter-spacing: 2.2px;
    font-size: 70%;
    margin-top: 4px;
    margin-bottom: -32px;
    color: #bababa;
}
.backtooverview a, .backtooverview a:visited {
    color: #bababa;
}
.backtooverview a:hover {
    color: #cdcdcd!important;
}
/* FAQ DROPDOWNS */
.btn-primary {
    background-color: transparent;
    color: #000;
    text-align: left;
    border: none;
    padding-left: 0;
    padding-right: 0;
    font-size: 95%;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.focus, .btn-primary.active:focus, .btn-primary.focus, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:focus {
    background-color: transparent!important;
    color: #888;
    border: none!important;
    outline: none!important;
    box-shadow: none !important;
}
.faq-hr {
    width: 100%;
    height: 0.1px;
    padding: 0px;
    border-color: #A6BF96;
}

.faq{
	padding-top:0px;
	padding-bottom:60px;
	padding-left:15px;
	padding-right:15px;
	font-size:91%;
	margin-top:-30px;
}


/* Tables */
.table {
    font-size: 95%;
}
.tableSys {
    font-size: 92%;
}
.tableSys td {
    padding-top: 3.5px!important;
    padding-bottom: 3.5px!important;
}


/* Schleimi Steckbrief punkte */
.steckbrief {
    font-family: 'PT Sans', sans-serif;
    font-weight: 250;
    letter-spacing: 1px;
    color: #69882E;
    font-size: 80%;
}


/* general CSS changes when NOT phone view */
@media (min-width: 768px) {
	.quote {
		font-size: 120%;
		padding: 50px;
	}
	.newInfo {
		padding-left: 0;
		padding-right: 2%;
	}
	.newPics {
		padding-left: 2%;
		padding-right: 0;
		padding-bottom: 0;
	}
	.contenttitle {
		font-size: 195%;
		letter-spacing: 5.5px;
	}
	.contentsubtitle {
		letter-spacing: 4px;
	}
}



/* ------------ FOOTER ------------- */
footer {
    margin-bottom: 25px;
    margin-top: 25px!important;
    padding-top: 90px!important;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40px;
    font-family: 'PT Sans', sans-serif;
    font-weight: 200;
    letter-spacing: 1px;
    font-size: 90%;
}