@font-face { font-family: 'scifly'; src: url('fonts/SciFly-Sans.ttf') format('truetype'); }

body {
	font-family: "Source Sans Pro", "Open Sans", Verdana, sans-serif;
	font-weight: 300;
	font-size: 1em;
	padding: 0; margin: 0;
	color: #666;
}

header, main, footer, section, div, article, aside { box-sizing: border-box; width: 100%;}

h1,h2,h3, h5, h6{ font-family: "Lato", sans-serif; font-weight: 600; font-size: 1.8em; text-transform:uppercase;}
h2, h3 {padding: 1.2em 0 0.8em 0;margin: 0;}
h4 {margin: 2em 0 0 0;}
h5, h6 {color: white; margin-top: 0.5em;}
h6 {font-size: 5em;}
p {font-size:1.2em; margin-top: 0.4em;}
ul { list-style: none; margin: 0; padding: 0;}
//ul li { float:left; }
ul:after {clear: both;}
a:link, a:focus, a:active, a:visited { text-decoration: none;}


img {max-width: 100%; height: auto; }

/*--- spezielle Klassen ---*/
a.button {color: white; background-color: #d38908; padding: 8px 12px; margin-bottom: 0.7em;}
a.button:hover {background-color: #a36a06;}
a.borderButton { color: black; background-color: #DFDFDF; padding: 8px 12px; border: 2px black; margin-right: 8px; display: inline-block;}
a.borderButton:hover {background-color:#EFEEEC ; color: black; }

.width800  { max-width: 800px; margin: 0 auto;}
.width960  { max-width: 960px; margin: 0 auto; }
.width1400  { max-width: 1400px; margin: 0 auto; }
.width1200  { max-width: 1200px;  margin: 0 auto;}
.maxwidth50 { max-width: 50%;}
.maxwidth33 { max-width: 33%;}
.maxwidth25 { max-width: 25%;}
.container {padding-bottom: 1em; }
.padBot {padding-bottom: 4em; }
.padTop {padding-top: 1em; background-color: #f2f9f8;}
div.quadTeaser { background-color: #d38908; margin:0 auto;width:25%; height:280px; float: left; font-size: 0.9em;}
div.tripleTeaser { background-color: #d38908; margin:0 auto;width:33.33%; height:280px; float: left; font-size: 0.9em;}
div.linkbox { background-color: white; padding: 0px; border: 1px solid grey;margin-bottom: 0.8em;}
	div.linkbox h4 { background-color: grey; color: white; padding: 0.5em 0 0.5em 0.5em; margin: 0;}
	div.linkbox a { color: #d38908; display: block; padding: 8px 0 8px 8px; border-bottom: 1px solid grey;} 
	div.linkbox a:last-of-type {border: none;}
	div.linkbox a:hover {color: white; background-color: #d38908; }
div.contentTeaser { border: 1px solid #d38908; max-width:320px;width:100%;}
div.contentTeaser a {width: 100%; color: #000; display: block;}
div.contentTeaser a:hover {background-color: #c75b6b;}
div.contentTeaser a h4{margin: 0 0 0 10px; padding: 0.5em 0.5em 0.5em 12px; background: url("../../img/linkextern.png") no-repeat center left;}
div.contentTeaser a p {padding: 0 0.5em 0.5em 0.5em; margin: 0; font-size: 0.8em;}	
.center { text-align: center;}
.weiss {background-color: #FFFFFF; }
.schwarz{background-color: #000000;}
.hellgrau {background-color: #EFEEEC;}
.mittelgrau {background-color: #DFDFDF;}
.dunkelgrau {background-color: #6C655F;}
.hellrot {background-color: #ED1C24;}
.rot { background-color: #B00000;}
.dunkelrot {background-color: #651012;}
.blau { background-color: #306A9A;}
.mittelblau { background-color: #234C6F;}
.dunkelblau { background-color: #152F44;}
.tuerkis {background-color: #378D9B;}
.mitteltuerkis {background-color: #286670;}
.dunkeltuerkis {background-color: #183E44;}
.lila {background-color: #9C4E9A;}
.mittellila {background-color: #71386F;}
.dunkellila {background-color: #452244;}
.fontWhite { color: #FFFFFF;}
div.clear { clear: both; }


/*--- HEADER ---*/
header {
	position: absolute;
	text-align:center;	
	z-index: 999;
	}
	
	a {
		color: black;
	}
	
/*---Diverses---*/
a {font-weight: bolder;}

.linkangebot{
  background-color: #f44336;
  color: white;
  padding-top: 90px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  width: 300px;
  height: 200px;
  margin: 5px;
  border-radius: 5px;
  font-size: 20px;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2);
  font-weight: bolder;
}


.linkangebot:hover{
	background-color: white;
	transition: background-color 0.4s;
	text-decoration: underline;
	color: grey;
	border: 1px solid #f1f1f1f1;
}



.linkangebot1{
	background-color: #008CBA;	
	}
.linkangebot2{
	background-color: #4CAF50;	
}
.linkangebot3{
	background-color: #f44336;	
}
.linkangebot4{
	background-color: #fbc407;	
}
.linkangebot5{
	background-color: #aa0e62;	
}
.linkangebot6{
	background-color: #233E70;
}
.linkangebot7{
	background-color: #bdbdbd;	
	width:400px;
	height: 90px;
	padding-top: 35px;
	}

/*---Button---*/
.buttonAnmeldung{
  color: white; 
  width: 300px;
  height: 215px;
  margin: 5px;
  border-radius: 10px;
  font-size: 20px;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2);
  font-weight: bolder;
  display: block;
  float: left;

}

a {
	display: inline-block;
}


.button1{
	background-color: #008CBA;	
	}
.button2{
	background-color: #4CAF50;	
}
.button3{
	background-color: #f44336;	
}
.button4{
	background-color: #fbc407;	
}
.button5{
	background-color: #aa0e62;	
}
.button6{
	background-color: #233E70;
}

	
#texthover{
	font-size:0px;	
}

.buttonAnmeldung:hover #text{
	display:none;	
}

.buttonAnmeldung:hover #texthover{
	color: black;
	font-size: 16px;
	transition: font-size 0.8s;	

}
.buttonAnmeldung:hover{
	background-color: #f2f9f8;
	transition: background-color 0.4s;
	border: 1px solid #f1f1f1f1;
	cursor: pointer;
	}

.buttonAnmeldung.button1:hover #texthover{
	color: black;
	font-size: 20px;
	transition: font-size 0.8s;	
}

.buttonAnmeldung.button2:hover #texthover{
	color: black;
	font-size: 20px;
	transition: font-size 0.8s;	
}
.buttonAnmeldung.button3:hover #texthover{
	color: black;
	font-size: 20px;
	transition: font-size 0.8s;	
}






#anmeldunghover:hover {
	transition: background-color 0.4s;
	background-color: #f1f1f1f1;
	border-radius: 4px;
}


#rundgang {
	margin-bottom: ;
}


#bilddigitalmiteinander {
	padding-bottom:80px;
}

#angebot {
	padding-top:60px;
	padding-bottom:80px;
}

#digital {
	background: #f2f9f8;
	padding-top:80px;
}

/*---NAVIGATION---*/
/* Create a sticky/fixed navbar */
#navbar {
  overflow: hidden;
  background-color: #2d6760;
  padding: 20px 40px; /* Large padding which will shrink on scroll (using JS) */
  transition: 0.4s; /* Adds a transition effect when the padding is decreased */
  position: fixed; /* Sticky/fixed navbar */
  width: 100%;
  top: 0; /* At the top */
  z-index: 99;
}

/* Style the navbar links */
#navbar a {
  float: left;
  color: white;
  text-align: center;
  padding: 20px;
  text-decoration: none;
  font-size: 20px;
  line-height: 25px;
  border-radius: 6px;
  font-weight: bolder;
}

/* Style the logo */
#navbar #logo {
  font-size: 35px;
  font-weight: bold;
  transition: 0.6s;
}


/* Links on mouse-over */
#navbar a:hover {
  background-color: #ddd;
  opacity: 90%;
  color: black;
  transition: 0.6s;
}

/* Style the active/current link */
#navbar a.active {
  background-color: dodgerblue;
  color: white;
}

/* Display some links to the right */
#navbar-right {
  float: right;
}

/* Add responsiveness - on screens less than 580px wide, display the navbar vertically instead of horizontally */
@media screen and (max-width: 580px) {
  #navbar {
    padding: 20px 10px !important; /* Use !important to make sure that JavaScript doesn't override the padding on small screens */
  }
  #navbar a {
    float: none;
    display: block;
    text-align: left;
  }
  #navbar-right {
    float: none;
  }
}



/* SCROLLNAVIGATION */
nav#scrollNav, nav#scrollNavPoints {	
	display: block;
	position: fixed;
	bottom: 45%;
	left: 0;
	z-index: 999;
}

nav#scrollNav ul, nav#scrollNavPoints ul {
	padding: 0; margin: 0; text-align: center;
}

nav#scrollNav ul li {
	background: #EFEEEC; color: white;
	margin-bottom: 8px;
	display: block;
}

nav#scrollNav ul li a:link , nav#scrollNav ul li a:focus, nav#scrollNav ul li a:visited{ color: #FFFFFF;  margin: 0; padding: 8px; display: block;}
nav#scrollNav ul li a:hover { background-color: #EFEEEC; }
nav#scrollNav ul li img {max-width: 25px;}

nav#scrollNavPoints ul li {
	margin: 0 0 8px 12px;
	display: block;
}
nav#scrollNavPoints ul li a { 
background-image: url("../../img/oie_trans.png");
background-position: center center; background-repeat: no-repeat;
width: 11px; height: 11px; text-indent: -9999px; display: block;}
nav#scrollNavPoints ul li a:hover { background-image: url("../../img/oie_trans_hover.png");}

/*IMAGE TEASER */
//section.imgTeaser {
	background-color:#009590;
	background-image: url("../../img/smartcity.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;
	background-attachment: //fixed;
	height: 35vh;
	color: black;
	padding: 5% 0 0 0 ;
 } 
 section.imgTeaser {position: relative;margin-bottom: 20px;}
 section.imgTeaser div.respImgCaption {position: absolute; top: 40%; }
 
 section.imgTeaser2 {position: relative;margin-bottom: 20px;}
 section.imgTeaser2 div.respImgCaption {position: absolute; top: 40%; }

/* RESPONSIVE IMAGE*/
section.respImg {position: relative;}
section.respImg div.respImgCaption {position: absolute; top: 40%; }
//section.respImg div.respImgCaption h2{display: inline-block;}
//section.respImg div.respImgCaption p {display: inline;}

/*QUADTEASER NO MARGINS*/ 
div.quadTeaser.qt1{background-image: url("../../img/dom_gr.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover;}
div.quadTeaser.qt2{ background-image: url("../../img/neumarkt_gr.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover;}
div.quadTeaser.qt3 { background-image: url("../../img/altermarkt_gr.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover;}
div.quadTeaser.qt4 { background-image: url("../../img/rudolfplatz_gr.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover;}
div.darkOverlay { opacity: 0; background-color: rgba(0, 0, 0, 0.6); 
-webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; width: 100%; height: 100%; padding: 15% 5% 5% 5%; color: #FFF;}
div.darkOverlay:hover { opacity: 1; }
div.darkOverlay h3 { margin-top: 0; }

/*TRIPLETEASER NO MARGINS*/ 
div.tripleTeaser.tt1 {background-image: url("../../img/jugendliche_bibliothek_original.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover;}
div.tripleTeaser.tt2{ background-image: url("../../img//buecherbus.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover;}
div.tripleTeaser.tt3 { background-image: url("../../img/makerbot.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover;}

/* FIGURE IMAGES */
figure {margin: 0;}
figure.figLeft {float: left; margin-right: 0.8em;}
figure.figRight {float: right; margin-left: 0.8em;}
figure figcaption { font-size: 0.7em;}

/*SOCIAL ICONS*/
article div.socialLinks {padding-top: 0.5em;}
article.socialIcons { padding: 3em; text-align: center;}
article.socialIcons h3 {display: inline; margin-right: 1em; }
article.socialIcons a {margin-right: 1em; }
article.socialIcons img { margin-bottom: 1.5em; margin-left: 1.2em; max-width: 300px; height: auto; }

/*PARALLAX*/
section.parallax {
	height: 55vh;
	background-image: linear-gradient(
      rgba(0, 0, 0, 0.4),
      rgba(0, 0, 0, 0.4)
    ), url("../../img/Digitaltag_ohneText_1200x628px_72dpi_rgb.jpg");
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
	padding-top: 8%;
	color: white;
	margin-top: 50px;
	margin-bottom: 50px;
}

section.parallax2 {
	height: 45vh;
	background-image: linear-gradient(
      rgba(0, 0, 0, 0.4),
      rgba(0, 0, 0, 0.4)
    ), url("../../img/200406_DT_Social Media_Aktionanmelden_LI.jpg");
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
	padding-top: 13%;
	color: white;
}




/*--- ACCORDION ---*/
.accordion h3, .accordion2 h3, .accordion3 h3 {border-bottom: 2px solid #b81647; cursor:pointer; text-align:left; margin-bottom: 0.5em;}
.accordion h3.ui-accordion-header-collapsed, .accordion2 h3.ui-accordion-header-collapsed, .accordion3 h3.ui-accordion-header-collapsed { background: url("../../img/akkordeon-aufklappen_neu.png") no-repeat center right; }
.accordion h3.ui-accordion-header-active, .accordion2 h3.ui-accordion-header-active, .accordion3 h3.ui-accordion-header-active { background: url("../../img/akkordeon-zuklappen_neu.png") no-repeat center right; }
.accordion .ui-accordion-content p, .accordion2 .ui-accordion-content p, .accordion3 .ui-accordion-content p {font-size: 0.8em; margin-top: 0;}
.accordion ul li h3, .accordion2 ul li h3, .accordion3 ul li h3 {border-bottom: 0; padding: 0 0 0.4em 0; font-weight: 400;}
.accordion div.calendarInfo h3, .accordion2 div.calendarInfo h3, .accordion3 div.calendarInfo h3   {cursor: default;}

/*--- DIALOG ---*/
#dialog {background-color: #71386F; color: white; padding: 10px; border: 1px solid #333; }

/*--- CALENDAR ----*/
//section.calendar ul.calendarList { font-size: 0.8em;}
section.calendar ul.calendarList li { display: block;border-bottom: 1px dashed #a3a3a3; margin-bottom: 12px; position:relative;}
section.calendar ul.calendarList li figure {width: 20%; height: auto; float:left; margin-right: 2%;}
section.calendar ul.calendarList li figcaption {margin-top: -6px; font-size: 0.8em; margin-bottom: 4px;}
section.calendar ul.calendarList li div.calendarInfo {float:left; width: 68%;}
//section.calendar ul.calendarList li div.calendarInfo:after {clear: both;}
section.calendar ul.calendarList li h3 {text-align: left; font-size: 1.2em; margin: 0 0 0.4em 0; padding-top: 0;}
section.calendar ul.calendarList li p {margin: 0; font-size: 1em;}
section.calendar ul.calendarList li div.calendarMeta { font-size: 0.8em; }
section.calendar ul.calendarList li div.calenderLinks {float:left; width: 10%;}
section.calendar ul.calendarList li a {font-size: 0.8em; width:100%; text-align:center; display: block;}
	
/*--- iframe Anmeldung & Karte ---- */
section#anmeldung, div.myiframe {float: left; width: 50%; background-color: #d1d1d1; color:#000; height: 500px;} 






/*--- VIDEO Background---*/
video#bgvid { 
    //position: fixed;
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    z-index: -100;
    /*-ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);*/
    background: url(polina.jpg) no-repeat;
    background-size: cover; 
	background-color:#f2f9f8;
}


/*--- RESPONSIVE YOUTUBE VIDEO---*/
.html5-video-player{
    background-color: #f2f9f8;
}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	text-align:center;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*--- SLIDER ---*/
.slider {position:relative;}

/*--- CHARTS ---*/
.ct-chart { width: auto;}
.ct-chart-donut .ct-label, .ct-chart-pie .ct-label {color: white; fill: white; font-weight: bold;}

/*--- KONTAKTFORMULAR 
form input, form textarea{ width: 100%; margin-bottom: 0.5em; border-radius: 6px; background-color: #FFFFFF; color: #333;}
form button { background-color: #d38908; color: white; width: 100%; border: none;border-radius: 6px; height: 60px;  }
form button:hover {background-color: #a36a06;cursor:pointer}
form .formLeft, form .formRight{width: 99%;float: left; margin-right: 0.5%;}---*/


/*--- Footer ---*/
footer {color: #000;padding: 1em; background-color: #2d6760;}
footer #markenlogo {	background-image: url("../../img/header-background.png"); background-repeat: repeat-x; background-size: auto 100%;}
a#topLink {position: fixed; bottom: 0; right: 10px; background-color: #2d6760; padding: 0.3em; color: #FFF; border-color: white; border-width: 1px; border-style: solid; border-radius: 3px;}
footer a:link{color: #000;}