/* * {transition:ease-in-out all 0.3s;} */


body { color: #111; font-size: 14px; font-family: 'Titillium Web', 'Open Sans', sans-serif;}

a {color: #666; text-decoration: none;}
a:hover {color: #8ba72c; text-decoration: none;}


/* Sidebar Hauptnavigation */

.sidebar {
	width:70px; 
	background-color:#8ba72c;
	transition: all 0.5s  ease-in-out;
	text-align: center;
	position: fixed;
	z-index: 1000;
	top:0;
	left: 0;
	bottom: 0;
	}
.sidebar ul {list-style:none; margin:0px; padding:0px; }
.sidebar li a,.sidebar li a.collapsed.active { display:block; color:#fff;border-left:0px solid #dedede;  text-decoration:none; height: 70px;}
.sidebar li a.active {background-color:#666; border-left:5px solid #dedede; transition: all 0.2s  ease-in-out;}
.sidebar li a.active span {margin-left: 0px;}
.sidebar li a:hover {background-color:#a2b956 !important;}
.sidebar li a i{ padding-top:12px; font-size: 28px;}
.sidebar span:before {content: ' ';clear: right; display: block;}
.sidebar span {font-size: 9px; margin-top: 5px; display: block; margin-left: -500px; transition: all 0.2s  ease-in-out;}
.sidebar .mainmenu:hover span {font-size: 9px; display: block; margin-left: 0px; transition: all 0.2s  ease-in-out;}
.sidebar .mainmenu {height: auto;}

.sidebar .bottom {position: absolute; bottom: 0; width: 100%; height: 70px;}
.sidebar .bottom .counter {
	background-color: red;
	width: 18px;
	height: 18px;
	border-radius: 15px;
	margin: 0;
	padding: 0;
	margin-left: 27px;
	font-size: 12px;
	}
	 
.sidebar .bottom li a i {padding-top: 0;}
.sidebar .bottom li a,.sidebar .bottom li a.collapsed.active {padding-top: 12px;}

.sidebar .user {width: 40px; height: 40px;  margin-top: 15px; border-radius: 50px; transition: all 0.3s ease-in-out;}
.sidebar a:hover .user {width: 70px; height: 70px; margin-top: 0; border-radius: 0; transition: all 0.3s ease-in-out;}


.sidebar .user2 {width: 40px; height: 40px;  margin-top: 0px; border-radius: 50px; transition: all 0.3s ease-in-out;}
.sidebar a:hover .user2 {width: 70px; height: 70px; margin-top: 0; border-radius: 0; transition: all 0.3s ease-in-out;}





/* Sub-Nav Kategoriebaum */

.table { display: table; position: absolute; height: 100%; padding-left: calc(70px + 20%); z-index: 1;}
.cell {display: table-cell;}

#sidebar_links {background-color: #F8F9F9; border-right: 1px solid #E9EBED; width: 20%; position:fixed; top:0; bottom:0; left:70px; padding-top:25px; overflow-y:auto; overflow-x:hidden; z-index:1000;}
#sidebar_links ul {list-style:none; padding:0px; }
#sidebar_links ul li {margin-left: 15px; }
#sidebar_links li a {display:block; color:#666;border-left:0px solid #dedede;  text-decoration:none;}
#sidebar_links li a.active, #sidebar_links li a:hover {color:#111; transition: all 0.2s  ease-in-out;}



.sidebar li.navi_border_top a,.sidebar li.navi_border_top a.collapsed.active { display:block; color:#b5bf93;border-left:0px solid #dedede;  text-decoration:none; height: 70px;}





.logo {
	position: fixed;
	z-index: 600;
	background-color: #fff;
	text-align: center;
	width: calc(20% - 1px);
	top: 0;
	padding: 12px;
	height: 70px;
}
.logo img {max-height: 35px;}


.controls {margin-bottom: 10px;}

.collapse-group {padding: 20px; border: none;  padding-bottom: 0;}
.panel-title a {font-size: 16px; color: #666; text-decoration: none;}
.panel-title a:hover {color: #8ba72c;}
.panel-title .trigger:after {
	content: "\f077";
	font-family: "Font Awesome\ 5 Pro";
	text-decoration: inherit;
	list-style: none;
	position: relative;
	margin-right: 8px;
	top: 0px;
	left: 1px;
	padding: 0;
	font-weight: 300;
	margin-top: 10px;
	float: right;
}
.panel-title .trigger.collapsed:after {
	content: "\f078";
	font-family: "Font Awesome\ 5 Pro";
	text-decoration: inherit;
	list-style: none;
	position: relative;
	margin-right: 8px;
	top: 0px;
	left: 1px;
	padding: 0;
	font-weight: 300;
}



/* Inhalt - Reiter/Bilder */

.header {position: fixed; z-index: 500; min-height: 100px;right: 0; width: calc(80% - 70px);background-color: rgba(255, 255, 255, 1.0); transition:ease-in-out 0.2s all;}
.header:hover {background-color: #fff;  transition:ease-in-out 0.2s all;}
.header .reiter {line-height: 40px;  padding:0px 30px 0px 30px; font-size: 14px;}
.header .reiter ul {list-style: none; margin:0px; padding:0px; border-bottom: 1px solid #E9EBED}
.header .reiter li {display: inline-block; padding:0 10px; font-weight:600;}
.header .reiter li:first-child {padding-left: 0;}
.header .reiter li a {border-bottom: 4px solid transparent;}
.header .reiter li a:hover, .header .reiter li a.active {color:#666; border-bottom: 1px solid #111; padding-bottom: 10px; }
.header .reiter .countbox {color: #aaa; margin-left: 9px; font-weight:400}
.header .reiter .countbox.aktiv:after {content:""; width:10px; height:10px; border-radius:5px; display:inline-block; position:absolute; background:#8ba72c; margin-top:7px;}


ul.tabmenu {list-style: none; margin:0px; margin-bottom:20px; padding:0px; padding-bottom: 5px; border-bottom: 1px solid #E9EBED;}
.tabmenu li {display: inline-block; padding:0 10px;}
.tabmenu li:first-child {padding-left: 0;}
.tabmenu li a {border-bottom: 1px solid transparent;}
.tabmenu li a:hover, .header .reiter li a.active {color:#666; border-bottom: 1px solid #111; padding-bottom: 5px; }




.header2:hover {background-color: #fff;  transition:ease-in-out 0.2s all;}
.header2 .reiter {line-height: 40px;  padding:0px 0px 0px 0px; font-size: 14px;}
.header2 .reiter ul {list-style: none; margin:0px; padding:0px; border-bottom: 1px solid #E9EBED}
.header2 .reiter li {display: inline-block; padding:0 10px; font-weight:600;}
.header2 .reiter li:first-child {padding-left: 0;}
.header2 .reiter li a {border-bottom: 4px solid transparent;}
.header2 .reiter li a:hover, .header .reiter li a.active {color:#666; border-bottom: 1px solid #111; padding-bottom: 10px; }
.header2 .reiter .countbox {color: #aaa; margin-left: 9px; font-weight:400}
.header2 .reiter .countbox.aktiv:after {content:""; width:10px; height:10px; border-radius:5px; display:inline-block; position:absolute; background:#8ba72c; margin-top:7px;}



.content {padding:190px 30px 95px 30px;}

.imagesbox {position: relative; text-align: center; height: 230px; margin-bottom: 30px;}
.imagesbox .picture {height: 200px; background-color: #e8e8e8; border: 5px solid #ffffff;}
.imagesbox .picture img {position: relative; top:50%; transform: translateY(-50%); max-height: 200px; padding: 5px 0;}
.imagesbox .mediatitle {height:30px; font-size: 14px; line-height: 30px;}
.picture.marker {border: 5px solid #999;}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 0px;
  width: 100%;
  height: 200px;
  line-height: 190px;
  text-align: center;
  border: 5px solid transparent;
}

.imagesbox:hover img {opacity: 1;}
.imagesbox:hover .middle {opacity: 1;}

.text {background: rgba(51,51,51,0.7); padding: 8px; height: 100%;}
.text a {color: #ffffff; padding: 5px; font-size: 35px; margin: 5px; transition: all 0.2s  ease-in-out;}
.text a:hover {background-color: #999; transition: all 0.2s  ease-in-out; }

.text i {width: 40px; height: 40px; }


.bildergalerie .test:before {content: ""; display: inline-block; padding-top: 57.0%; } 
.bildergalerie .hintergrundbild:before {content: ""; display: inline-block; padding-top: 59.0%;}
.bildergalerie .hintergrundbild {  border:1px solid #E9EBED; border-radius: 5px; background-image:url(http://isabell-klinner.cokunaprojects.de/coconutbox2/images/media/image001.jpg); background-repeat:no-repeat; background-size:cover; display:block; transition:ease-in-out 0.3s all;}

.bildergalerie p {margin:10px 0 25px 0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size: 14px;}

.bildergalerie .icons {display: none;}

.bildergalerie:hover .hintergrundbild {opacity:0.4; transition:ease-in-out 0.3s all; -webkit-filter: blur(25px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: blur(3px);}
.bildergalerie:hover .icons {position:absolute; width:100%; margin-left:-15px; padding:0px 15px; text-align:center; font-size:40px; margin-top:-38.0%; display:table; height:73%;}
.bildergalerie:hover .icons i {padding:0 20px; vertical-align:middle;}
.bildergalerie:hover .icons i:first-child {text-align:right;}
.bildergalerie:hover .icons i:last-child {text-align:left;}

.bildergalerie a {transition:ease-in-out 0.2s all;}
.bildergalerie a:hover {color:#111; transition:ease-in-out 0.2s all;}
/*
.bildergalerie.hover .hintergrundbild {opacity:0.4;}
.bildergalerie.hover .icons:before {content: ""; display: inline-block; padding-top: 55.0%;}
.bildergalerie.hover .icons {position:absolute; width:100%; margin-left:-15px; padding:0px 15px; text-align:center; font-size:40px; margin-top:-54.0%; display:table; height:73%;}
.bildergalerie.hover .icons i {padding:0 20px; height:100%; display:table-cell; vertical-align:middle; width:50%;}
.bildergalerie.hover .icons i:first-child {text-align:right;}
.bildergalerie.hover .icons i:last-child {text-align:left;}
*/

.bildergalerie.check .hintergrundbild {  border:0px solid #0070c9 !important; border-radius: 0px;}
.bildergalerie.check .bild_container {border:5px solid #0070c9; margin:-5px; border-radius: 5px;}
.bildergalerie .marker {position: absolute; z-index: 400; display: block; border-left: 0px solid transparent; border-right: 55px solid transparent; border-top: 52px solid #0070c9;}
.bildergalerie .marker i {position: absolute; color: #ffffff; font-size: 26px; margin-top: -45px; margin-left: 3px; }



.bildergalerie.check2 .marker {display:none;}
.bildergalerie.check2 .marker i {position: absolute; color: #ffffff; font-size: 26px; margin-top: -45px; margin-left: 3px; }


.bildergalerie.check2:hover .marker {position: absolute; z-index: 400; display: block; border-left: 0px solid transparent; border-right: 55px solid transparent; border-top: 52px solid #0070c9;}
.bildergalerie.check2:hover .marker i {position: absolute; color: #ffffff; font-size: 26px; margin-top: -45px; margin-left: 3px; }


.bildergalerie.check2:hover .hintergrundbild {  border:0px solid #0070c9 !important; border-radius: 0px;}
.bildergalerie.check2:hover .bild_container {border:5px solid #0070c9; margin:-5px; border-radius: 5px;}


/* Suche */

#suche { padding:15px 30px;}

#suche .inaktiv {border-bottom: 1px solid #E9EBED;}
#suche .inaktiv .input-group > div button {border-radius:0px; border:none; padding:10px 15px;}
#suche .inaktiv .input-group-append button {color:#666; background: none;}
#suche .inaktiv .form-control {padding:10px 0px; border:none; height:44px; border-radius: 0; background: none;}

#suche .aktiv .input-group > div button {border-radius:0px; border:none; padding:10px 15px;}
#suche .aktiv .input-group-append button {background:#8ba72c; color:#fff; border-radius: 0;}
#suche .aktiv .input-group-append button:hover {background:rgba(137, 166, 43, 0.8);}
#suche .aktiv .input-group-append button i {color:#fff;}
#suche .aktiv .form-control {padding:10px 15px; border:none; height:44px; background:#e8e8e8; border-radius: 0;}
#suche .aktiv .form-control:focus {outline:none; box-shadow:none;}
#suche .aktiv .input-group-prepend button {background:#ccc; color:#444;}
#suche .aktiv .input-group-prepend button:hover {background:rgba(204, 204, 204, 0.8);}
#suche .aktiv .input-group-prepend button i {color:#444;}

#suche .filter {display:none; position:absolute; width:100%; background:#e8e8e8; border-top:1px solid #ccc; z-index: 2000;}
#suche:hover .filter {display:block;}


#suche .filter .nav-tabs {border:none;}
#suche .filter .nav-tabs li {padding:0px 15px;}
#suche .filter .nav-tabs li:first-child {padding-left:0px;}
#suche .filter .nav-tabs li:last-child {padding-right:0px;}
#suche .filter .nav-tabs li a {display:inline-block; border-bottom:2px solid transparent; padding:0px 0px 5px 0px; color:#444; font-weight:400; font-size:14px;}
#suche .filter .nav-tabs li a:hover { text-decoration:none; border-bottom-color: #8ba72c;}
#suche .filter .nav-tabs li.active a {border-bottom:2px solid #8ba72c;}
#suche .filter .nav-tabs li a span{display:inline-block; color:#999; font-weight:400; padding-left:7px;}

#suche .filter form {font-size:14px;}
#suche .filter .col-form-label {text-align:right}
#suche .filter .form-control {background:#fff; border-radius:0; padding:5px 15px; height:34px; font-size:14px;}

#suche .filter.vorschlag {width: calc(100% - 239px); margin-left: 88px;}
#suche .filter.vorschlag p {margin:0; padding:5px 0;}
#suche .filter.vorschlag p:first-child {margin-top:-5px;}
#suche .filter.vorschlag p:last-child {margin-bottom:-5px;}
#suche .filter.vorschlag p:hover {color:#8ba72c; cursor:pointer;}
#suche .filter.vorschlag p:hover b {color:#8ba72c; cursor:pointer;}

.btn.btn-new { border-radius: 5px; padding: 9px 10px; color: #111; transition:ease-in-out 0.2s all;}
.btn.btn-new:hover {border: 1px solid #111; color: #111;  transition:ease-in-out 0.2s all;}

#suche .sortierung {text-align: right;}
#suche .btn.btn-default.rahmen {border: 1px solid #E9EBED; color: #999; border-radius: 5px; padding: 9px 10px; width: 42px; transition:ease-in-out 0.2s all;}
#suche .btn.btn-default.rahmen:hover {background-color: #E9EBED; transition:ease-in-out 0.2s all;}

.jumbotron {    background-color: #F8F9F9; }


.modul_name { margin-top: 8px; font-size: 18px; }

.btn-primary { background-color: #0070c9;}
.btn-primary:hover { background-color: #6bf;}

.subnavi_active { background-color: #E9EBED;}


.form-control{
	border: 0;
	border-bottom: 1px solid #6c757d;
	border-radius: 0;
	color:#6c757d;
}




/* Massenfunktionsleiste - BEGINN */

.massenfunktion {
	position: fixed;
	background-color: #E9EBED;
	z-index: 500;
	padding: 15px 30px;
	bottom: 0;
	right: 0;
	width: calc(80% - 70px);
}

.hintergrund {
	position: fixed;
	background-color: rgba(255, 255, 255, 0.8);
	z-index: 499;
	padding: 15px 30px;
	bottom: 0;
	right: 0;
	width: calc(80% - 70px);
	height: 76px;
	}

.massenfunktion .actionleft .files {margin-right: 15px; display: inline-block; vertical-align:middle; color: #444; font-size:30px;}
.massenfunktion .actionleft .files .warenkorb {position: absolute; color:#fff; background:#0070c9; display:inline-block; font-size:13px; padding:1px 5px; border-radius:11px; margin-left:-13px;}
.massenfunktion a.btn {color:#0070c9; border:none; border-radius:0; padding:11px 12px;}
.massenfunktion .actionright a.btn {color:#111; }
.massenfunktion .actionleft a:hover {color:#111;}
.massenfunktion .actionright a:hover {color:#444;}
.massenfunktion .actionright i {margin-right:2px;}



.sidebar_function {
	position: fixed;
	background-color: #E9EBED;
	z-index: 500;
	padding: 15px 22px;
	top: 0;
	left:70px;
	width: 288px;
	
}

html {
	height: 100%
}

body.login {
	background-image: url('../images/login-background-de_DE.png');
	background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    height: 100%
}


.blurred-box{
  position: relative;
  width: 900px;
  height: 350px;
  top: calc(50% - 175px);
  left: calc(50% - 450px);
  background: inherit;
  border-radius: 2px;
  overflow: hidden;
  background-color: rgba(17, 17, 17, 0.7);
}










/*
.blurred-box{
  position: relative;
  width: 250px;
  height: 350px;
  top: calc(50% - 175px);
  left: calc(50% - 125px);
  background: inherit;
  border-radius: 2px;
  overflow: hidden;
}

.blurred-box:after{
 content: '';
 width: 300px;
 height: 300px;
 background: inherit; 
 position: absolute;
 left: -25px;
 left position
 right: 0;
 top: -25px;  
 top position 
 bottom: 0;
 box-shadow: inset 0 0 0 200px rgba(255,255,255,0.15);
 filter: blur(10px);
}




*/


/* Massenfunktionsleiste - ENDE */


.accordion {font-size: 16px;}
.accordion button { color: #111; }
.accordion .card { background: none; border: none; }
.accordion .card-header { background: none; border: none; border-bottom: 1px solid #E9EBED; padding: 0; margin: 0 10px 0 10px;}
.accordion li:hover {background: #E9EBED; margin-left: -20px; padding-left: 10px;}
.accordion li { margin-left: -10px; padding-left: 10px;}
.accordion ul { margin-left: -22px; padding: 0;}
	
	
	

.form-control {
	background: none;
	font-size: 14px;
	padding-left: 0;
}

.form-control:focus {
	color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
    padding-left: 0;
}



.form-group {
	background-color: #f8f9fa;
	padding: 5px;
}



@media (max-width: 991px) {
	.header .reiter li {padding-left: 5px; font-size: 13px;}
	.panel-title a {font-size: 14px;}
	body {font-size: 14px;}
	.content {padding:200px 30px 95px 30px;}
	
	#suche .btn.btn-new {font-size: 13px; padding: 7px 10px;}
	#suche .btn.btn-default.rahmen {font-size: 13px; padding: 7px 10px; width: 35px;}
	
	#suche .inaktiv .form-control {font-size: 13px; height:36px;}
	#suche .inaktiv {height:36px;}
	
	.massenfunktion .actionleft span {display: none;}
	.massenfunktion .btn i {font-size: 25px;}
	.massenfunktion .btn i:last-child {font-size: 16px;}
	}


@media (max-width: 767px) {
	.header .reiter li {padding-left: 5px; font-size: 12px;}
	}


@media (max-width: 575px) {
	.bildergalerie:hover .icons {padding: 0px; font-size: 25px; margin-top: -34%;}
	.massenfunktion .actionright span {display: none;}
	
	}