@import url('https://fonts.googleapis.com/css?family=Raleway:700,400,300,100');
@import url('https://fonts.googleapis.com/css?family=PT+Sans:100,300,400,700');
@import url('https://fonts.googleapis.com/css?family=Rock+Salt:300,400,700');
/*@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700,900');*/
/*@import url('https://fonts.googleapis.com/css?family=Playfair+Display:700,700italic');*/

@font-face { font-family: 'sketch'; src: url('../../system/fonts/Sony_Sketch/Sony_Sketch_Bold_205.ttf') format('truetype'); }
@font-face { font-family: 'sansation-bold'; src: url('../../system/fonts/Sansation/Sansation_Bold.ttf') format('truetype'); }


/* Changelog

06.07.2018      new: Gruppe/Gliederung LAYER, ICONS INDEX
02.07.2018      deleted: jPlist-Klassen
01.07.2018   

*/

/* Farben 

*/
/* Typographie 
 * p  font:     300  1rem 'Verdana' color:#27252a
 * h3 font:     700  2rem 'Verdana' color:#27252a
 * a (nav)      0.875em 14px
 * 
    10px    0.625em
    11px    0.688em
    12px    0.75rem
    13px	0.813rem	
    14px	0.875rem
    15px	0.938rem
    16px	1.000rem
    17px	1.063rem
    18px	1.125rem
    19px	1.188rem
    20px	1.250rem
    24px	1.500rem
    32px	2.000rem	
 * 
*/
/* Ebenen z-index
    100... Menu nav (top)
    101... Menu pullout  (top, right ... )
*/


html, body {
    color:#444;
    height: 100%;   /* sticky footer 1|4  */
    font-size:100%
    }
.body-wrapper {   /* sticky footer 2|4  */
    position: relative;
    min-height: 100%;
    height: auto !important;
    height: 100%;
}


/*MENU*/

.nav {
    position:relative; 
    z-index:100; 
    display:block; 
    top:0;
    width:100%; 
    height:50px; 
    border-bottom: 2px solid #757F8A; 
    margin-bottom:-50px; 
    background-color: rgba(34, 34, 34, 0.3); 
    padding:0px 0 10px 20px}
.nav a {display:block; text-align:right; margin-right:20px; padding-top:10px; font-size:1.25rem; font-weight:bold; color:#fff}

/* Menu Pullout Button */
.nav .mm-pullout {padding:20px 5% 0 5%} 
.nav .pullout button {float:right; color: #1A9FE0; font-size:2rem; margin:8px 20px 0 0}
.nav .pullout button:hover {color:#0A548A} 
.nav .pullout h3 {font-size:1.5rem; margin:0} 
.nav .pullout p {font-size:0.875rem; margin:0} 
.nav .mm-pullout-footer {margin-top:30px}
.nav .mm-pullout-footer button.close {width:100%; text-align:center; margin-top:-1rem } 
.nav .mm-pullout-footer button.close:hover i {color:#0A548A} 
.nav .mm-pullout-footer button i { color: #1A9FE0; font-size:2rem} 
/* Menu Content */
.nav .menu {padding:5px}  
.nav .menu h3 {font-size:1.5rem; color:#1A9FE0 }
.nav .menu i {margin-right:10px }
/* Menu Back-Button todo */
.nav a.back {
  background-color: rgba(34, 34, 34, 0.4);
  color: #cbcbcb;
  font-size: 40px;
  font-weight: 300;
  height: 50px;
  padding: 1px 13px  0 17px;
  position: absolute;
  right: 0;
  top: 0;
  width: 70px;
  z-index: 9999;
  border-left:1px solid gray;
  border-bottom:1px solid gray
}
.nav .back i  {color:#1A9FE0}    /* todo */
.nav .back span  {color:#1A9FE0; font-weight:bold; }  /* todo */

/*CONTENT*/

.content {padding-bottom:88px} /* sticky footer 188 px 3|4  */
div.include {display:none}

section {padding:20px 40px 20px 100px; max-width:1500px}
section a {border-bottom: 1px black dotted}


/*FOOTER */

.footer {width:100%; bottom: 0px; position: absolute; height:88px; background-color:#222; opacity:0.4; text-align:center; padding: 55px 10px 10px 20px; } /* sticky footer 4|4 188px */
.footer span, .footer i, .footer a {color:#fff; font-size:0.813rem; line-height:1.125rem; margin:0}
.footer i {margin-right: 5px}


/*FARBEN*/

.black {color:#000}
.gray {color:#a7a7a7}
.white {color:#fff}


/*ICONS */

.fas.fa-times-circle, .fas.fa-times {opacity:0.5}


/*TYPOGRAPHIE*/

.bold {font-weight:600}
.center {text-align:center}
.italic {font-style:italic}
.uppercase {text-transform:uppercase}

.highlight.link {letter-spacing:1px; font-size:0.938rem;  margin: 0 2px 0 2px}

p, h3, a, td, li, span, div {font-weight:300; font-family:Raleway}
h3 {font:700  2rem 'PT Sans'; margin-top:60px }
h3.title {font:700  2rem 'PT Sans'; margin:30px 0 20px 0 }
h3.main {text-transform: uppercase}
h3.sup {font:700  1rem 'PT Sans'; margin:20px 0 -10px 0}
h3.sub {font:700  1.125rem 'PT Sans'; margin:0 0 40px 0}
h3.question {font:300  1.125rem 'PT Sans'; margin:0 0 40px 7px}
h6 {font:700  0.875rem 'PT Sans'}


/*TABELLEN*/

/*td {padding-top:0; padding-bottom:0; vertical-align:top}*/
/*td:first-child {padding-left:0}*/


/*LAYER*/

.lightbox h3 {font-size:1.25rem; margin: 0 0 15px 0; color:#0A548A; border-bottom: 1px solid #0A548A}
.lightbox .row {margin-bottom:20px}
.lightbox .close-button i {font-size:1rem}


/*LISTEN*/

ul {list-style-type:none}
ul[class="cog-icon"] li:before {    
font-family: 'FontAwesome';
font-size:12px;
content: '\f013';
margin:0 10px 0 -18px;
color: green;
}
ul[class="cube-icon"] li:before {    
font-family: 'FontAwesome';
font-size:12px;
content: '\f1b2';
margin:0px 10px 0 -23px;
color: green;
}
ul[class="minus-icon"] li:before {    
font-family: 'FontAwesome';
font-size:10px;
content: '\f068';
margin:0 10px 0 -18px;
color: #f00;
}
ul[class="plus-icon"] li:before {    
font-family: 'FontAwesome';
font-size:10px;
content: '\f067';
margin:0px 10px 0 -18px;
color: green;
}
ul[class="wrench-icon"] li:before {    
font-family: 'FontAwesome';
font-size:10px;
content: '\f0ad';
margin:0 10px 0 -18px;
color: #f00;
}

li[class="label"]:before {content:none !important;}
li[class="label"] {font-weight:bold; margin:0 10px 0 -26px;}

.list-item {border-top:1px solid gray; padding-bottom:10px; margin-bottom:40px}
.list-item h3 {font-size:1.25rem; margin:0 0 1px 1px} /* text-transform:uppercase */
.list-item p {line-height:1.125rem}



/*FILTER*/

.mm-filter {padding:15px}
.mm-filter h3 {font-size:1.250rem; color:#1A9FE0; margin:0 0 20px 0}
.mm-filter i {font-size:0.875rem; color:#1A9FE0}

.mm-filter-group {margin: 5px 0 0 0; padding:10px; width:187px; }   
.mm-filter-group div {float:none !important; border:none !important} /* filter-group wrapper */
.mm-filter-group h3, .mm-filter-group h5 {font-weight:bold; font-size:0.935rem}
.mm-filter-group ul {margin:5px 0 10px 0 !important}
.mm-filter-group li {display:block; font-size:0.875em; color:#0A548A; cursor:pointer}
.mm-filter-group li span:hover {color:#0A548A; font-weight:bold}
.mm-filter-group li i {margin:0 4px 0 1px; font-size:0.813rem} /* icon jplist items */
.mm-filter-reset-button button {color:#0A548A; font-size:0.813rem; width:155px; margin-top:10px} 
.mm-filter-reset-button button:hover {color:#0A548A; font-weight:bold} 
.mm-filter-reset-button button i {margin:0 4px 0 12px; font-size:0.813rem} /* icon jplist reset button */
.jplist-selected {color:#F56F31; font-weight:bold;}
.jplist-selected::after {
    color:#0A548A;
    font-family:'Font Awesome\ 5 Free';
    font-size:12px;
    content: "\f057";
    margin-left: 5px;
    float: right;
    opacity:0.8}

.uf-filter .uf-tags a {
	font-size: 12px;
	color: #797979;
	padding: 1px 5px 1px 5px;
	height: 19px;
	border: none;
	text-align: left;}
.uf-filter .uf-tags li {
	display:block;
	margin: 0;
	max-width: 135px;}
.uf-selected a {color:#1A9FE0 !important; font-weight:bold !important}
.uf-filter .uf-tags .uf-reset {
    opacity: 0.5 !important;
	background: url(../../WB/ICT-Animatoren/Aktuell/WB_ICT/system/module/c9/2.3/images/uf-clear.png) no-repeat center !important;
	margin-left: 75%;
	margin-top: -25px;}	

.jplist-group {border:1px solid blue !important; border-radius:7px}




/*FORMULARE*/

.input-group {height:30px; width:240px; margin:0 0 3px 0}
.input-group i {display:inline-block; float:left; width:30px; height:30px; text-align:center; padding-top:7px; border-bottom-left-radius: 4px !important;border-top-left-radius: 4px !important; background:#C8C8C8}
.input-group.register {width:390px;}
.inputUsername {width:210px; height:30px}
.inputPassword {width:210px; height:30px}
.input-group input.inputName {display:inline-block; height:30px; width:200px; border-left:none}
.input-group input.inputForename {display:inline-block; height:30px; width:130px; border-right:none}
.input-group input.inputEmail {display:inline-block; height:30px; width:330px}
.input-group.logout  {padding:5px 10px 5px}
.input-group.logout a {color:#fff; display:block; text-align:right; padding-left:10px}
.input-group.logout .fa-unlock-alt {color:#fff; border-radius: 5px }

input {font-size:0.9rem !important;padding-bottom:0.2rem !important}
input[type="text"] {margin: 0;}
input[type="submit"] {
	background-color: #1A9FE0;
	border:none;
	border-radius:4px;
	padding:4px 12px 4px 12px;
	margin-top:10px;
	margin-bottom:10px;
	cursor: pointer;
	color:#fff;
	width:100px}



/*INDEX page*/
/*PROJEKTE page*/

.projekt {margin-bottom:10px}
.projekt h3 {font-size:1.125rem; border-bottom: 1px solid gray; margin-bottom:10px}
.projekt p {margin-bottom:5px}
.projekt .project-category {font-size:0.75rem; color:gray; padding-right:10px}

/*ASSET page*/

.author {font-style:italic; margin-bottom:7px}

.box.asset {background-color:#B2BEC0; margin-top:10px}
.box.asset .bibl {font-size:0.875rem; font-style:italic; padding: 10px 10px 25px 10px; width:86%}
.box.asset .author {margin-bottom:2px;line-height:1rem}
.box.asset .title {margin-bottom:5px;line-height:1rem}

.pullout-content {padding:30px}
.pullout-content .pullout-button {margin: -50px 0 0 90%; padding-bottom:10px}
.pullout-content .pullout-button i {font-size:0.938rem}
.pullout-content .pullout-button i.fa-file-pdf {color:#1A9FE0; font-size:1.125rem}
.pullout-content .close-button {display:block; background:transparent; color:#1A9FE0; text-align:center; width:100%}
.pullout-content .close-button:hover {color:#0A548A}
.pullout-content .close-button:focus {outline:none}


/*MODULE*/


.reveal.medium {width: 70%}
@media only screen and (max-width: 40em) {
.reveal.medium {width: 100%}
}

/* c3 LayerSlider  */
.c3 {text-align:center}
.c3.mm-slider {z-index:1} /* prüfen */
.c3.mm-slider .news {font-size:2rem; color:#fff; padding:10px 30px 10px 30px; border-radius:10px; background-color:black; opacity:0.6}  /* prüfen */
.c3 h3 {font: 700  2rem 'PT Sans'; margin-bottom:0;  text-transform:uppercase; line-height:5rem; opacity:0.8;}
.c3 h3.black {opacity:0.5;}
.c3 h3.sub {font-size:2rem; line-height:2.5rem; font-weight:400; margin-top:0px;  text-transform:none; opacity:1}
.c3 img {width:100%; height:100%; background-size:cover; background-repeat: no-repeat;}


/* i5 iLightBox  */
.ilightbox-overlay {background-color:#706A60 !important}
.ilightbox-wrapper {padding:0px; width:100% !important; border: 1px solid #706A60}
.ilightbox-wrapper ul {padding:20px}
.layerContent {padding:10px}
.layerContent h3 {font-size:1rem}
.i5.button {padding:2px; margin:0}


/* v3 MediaElement  */
.mejs__captions-selector-label {color:#fff}
.mejs__captions-text {font-weight:bold !important}
.responsive-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.responsive-video {
position: relative;
padding-bottom: 56.25%; /* Default for 1600x900 videos 16:9 ratio*/
padding-top: 0px;
height: 0;
overflow: hidden;
}