/* first for Internet Explorer < 9 */
@font-face {
    font-family: "CDUKievit";
    src: local("CDUKievit"), url("CDUKievitWeb-Medium.eot");
}
@font-face {
    font-family: "CDUKievit Bold";
    src: local("CDUKievit Bold"), url("CDUKievitWeb-BoldItalic.eot");
}
/* then for WOFF-capable browsers */
@font-face {
    font-family: "CDUKievit";
    src: local("CDUKievit"), url("CDUKievitWeb-Medium.woff") format("woff");
}
@font-face {
    font-family: "CDUKievit Bold";
    src: local("CDUKievit Bold"), url("CDUKievitWeb-BoldItalic.woff") format("woff");
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video   {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

img {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  outline: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html { overflow-y: scroll; }
body { 
  background-color: #FFF;
  font-family: 'CDUKievit',Arial,Helvetica,Verdana,sans-serif;
  line-height: 1.4375;
  color: #000;
  padding-top: 53px;
  font-size: 16px;
  background: url('../img/bg_rathaus.jpg') no-repeat top center fixed;
  /* background: url('../img/tobias4.jpg') no-repeat top center fixed; */
}

/* br { display: block; line-height: 1.6em; } */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }

#lette_box ol, #lette_box ul { list-style: disc; margin-bottom: 20px; }
#lette_box li { margin-left: 30px; }

#ziele_box ol, #ziele_box ul { list-style: disc; margin-bottom: 20px; }
#ziele_box li { margin-left: 30px; }

#aktionen_box img {
    border: 13px solid white;
}



.footerNavBox ol, .container ul { list-style: none;  }
.footerNavBox li { margin-left: 0px; }

input, textarea { 
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: none; 
}

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong, b { font-weight: bold; } 

table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }

p {
    margin-bottom: 20px;   
}

h1 {
    display: inline-block;
    color: #000000;
    font-family: 'CDUKievit Bold',Arial,Helvetica,Verdana,sans-serif;
    font-size: 150%;
    line-height: 1.1;
    margin: 20px 0 20px;
}

h2 {
    display: inline-block;
    color: #000000;
    font-family: 'CDUKievit Bold',Arial,Helvetica,Verdana,sans-serif;
    font-size: 150%;
    line-height: 1.1;
    margin: 20px 0 20px;
}

h3 {
    display: inline-block;
    color: #000000;
    font-family: 'CDUKievit Bold',Arial,Helvetica,Verdana,sans-serif;
    font-size: 125%;
    line-height: 1.1;
    margin: 20px 0 20px;
    width: 100%;
}

h4 {
    display: inline-block;
    color: #000000;
    font-family: 'CDUKievit Bold',Arial,Helvetica,Verdana,sans-serif;
    font-size: 100%;
    line-height: 1.1;
    margin: 20px 0 5px;
    width: 100%;
}


.header {
    margin: 50px 0 0;
}

h2 .fa { margin-right: 5px; }

a {
    color: #E95D0F;
    text-decoration: none;
}
a:hover {
    color: #E95D0F;
    text-decoration: underline;
}
a:visited {
    color: #E95D0F;
    text-decoration: none;
}

i.fa {
    width: 22px;   
}

.red {
    color: #E95D0F;
}

.grey {
    color: #98968A;
}

a .black {
    color: #000;
}

.mini {
    font-size: 75%;
}

hr.hr {
    border: 0;
	border-top: 4px solid #EAE9E2;
	margin-top: 20px;
	margin-bottom: 20px;
}

.white {
    background-color: white;
    font-size: 20px;
}

.white p.small {
    padding: 0 20px;
}

strong {
    font-weight: normal;
    font-family: 'CDUKievit Bold',Arial,Helvetica,Verdana,sans-serif; 
}

.dotbox {
    margin-top: 25px;
    position: relative    
}

.doticon {
    float: left;
    width: 60px;    
    margin-bottom: 10px;
}


.dot span {
    display: block;
    float: left;
    text-indent: -5000px;
    text-decoration: none;
    width: 1px;
}
a.dot {
    font-size: 26px;
    text-align: center;
    color: #FFFFFF;
    display: block;
    line-height: 44px;
    padding: 0;
    text-decoration: none;
    top: 0;
    background-color: black;
    height: 44px;
    width: 44px;
    -moz-border-radius: 22px; /* Firefox */
    -webkit-border-radius: 22px; /* Safari, Chrome */
    -khtml-border-radius: 22px; /* Konqueror */
    border-radius: 22px; /* CSS3 */
}
.doticon a:hover {
    background-color: #E95D0F;
}

.doticon a.twitter:hover  { background-color: #55ACEE; }
.doticon a.facebook:hover { background-color: #3664A2; }
.doticon a.google:hover   { background-color: #B93C2C; }

/** page structure **/
#top {
    display: block;
    position: fixed;
    /* position: absolute; */
    top: 0;
    height: 100px;
    width: 100%;
    background: #F0EFEA;
    border-bottom: 5px solid #E2E0D7;
    z-index: 9900;
}

#top ul  { padding-left: 0px; }

#top ul li { 
    display: block;
    width: auto;
}

#top ul li a {
    font-family: 'CDUKievit Bold',Arial,Helvetica,Verdana,sans-serif;
    display: block;
    float: left;
    line-height: 30px;
    margin-right: 10px;
    padding: 0 15px;
    font-size: 1em;
    color: #333;
    text-decoration: none;
}

#top ul li a:hover {
  background: #D4D4CC;
  border-bottom: 5px solid #E95D0F;
}

#logo-box {
    position: fixed;
    /* position: absolute; */
    right: 0;
    top: 0;
    z-index: 99900;
}

#logo-box img.logo {
    margin-top: 8px;
    height: 50px;
    z-index: 99900;
}

/** page sections **/
.wrapperCounter {
    display: block;
    min-height: 0px;
	padding: 0;
	width: 100%;
}

.wrapperDanke {
    display: block;
    min-height: 0px;
	padding: 0;
	width: 100%;
}

.wrapper {
    display: block;
    min-height: 500px;
	padding: 0;
	width: 100%;
}

.wrapperKopf {
    display: block;
    min-height: 500px;
	padding: 0;
	width: 100%;
}

.wrapperSmall {
    display: block;
    min-height: 300px;
	padding: 0;
	width: 100%;
}

.wrapperMap {
    display: block;
    min-height: 450px;
	padding: 0;
	width: 100%;
}

.wrapperMapKand {
    margin-top: 25px;
    display: block;
    min-height: 450px;
	padding: 0;
	width: 100%;
}

.wrapperKandidat {
    display: block;
    min-height: 500px;
	padding: 0;
	width: 100%;
}

/************************************************************************************
STRUCTURE
*************************************************************************************/


.container {
    padding: 80px 15px 50px 15px;
	margin: 0 auto;
    width: 1020px;
    text-align: left;
}

.container {
    padding: 80px 15px 50px 15px;
	margin: 0 auto;
    width: 1020px;
    text-align: left;
}

.containerCounter {
    padding: 0px 15px 0px 15px;
	margin: 0 auto;
    width: 1020px;
    text-align: center;
}

.containerDanke {
    padding: 75px 15px 70px 15px;
	margin: 0 auto;
    width: 1020px;
    text-align: left;
}

.containerLeft {
    float: left;
    padding: 0px 50px 0px 0px;
    width: 520px;
    text-align: left;
    margin-bottom: 50px;
}

.containerRight {
    float: left;
    padding: 0px 0px 0px 0px;
    width: 470px;
    text-align: left;
    margin-bottom: 50px;
}

.containerBrand1 {
    height: 65px;
	margin: 0 auto;
    padding-top: 15px;    
    width: 1020px;
    text-align: left;
    display: block;
    font-size: 25px;        
}

.containerBrand2 {
    position: fixed;
    /* position: absolute; */
    left: 45px;
    top: 13px;
    z-index: 99900;    
    display:none;
    font-size: 20px;        
}
.containerBrand3 {
    position: fixed;
    /* position: absolute; */
    left: 45px;
    top: 13px;
    z-index: 99900;    
    display: none;
    font-size: 20px;        
}

.orange a.brand  {
    font-family: 'CDUKievit Bold',Arial,Helvetica,Verdana,sans-serif; 
    background-image: -moz-linear-gradient(top left, #E95D0F 0%, #F49A00 100%);
    background-image: -webkit-linear-gradient(top left, #E95D0F 0%, #F49A00 100%);
    background-image: -ms-linear-gradient(top left, #E95D0F 0%, #F49A00 100%);
    background-image: -o-linear-gradient(top left, #E95D0F 0%, #F49A00 100%);
    color: #FFF; 
    margin-left: 15px;
    padding: 8px 13px 4px 13px; 
    -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px;
}

.orange a.brand:hover {
    background-color: #EE8018;
    text-decoration: none   ; 
}


.containerBrandGross {
    height: 130px;
	margin: 0 auto;
    padding-top: 15px;    
    width: 1020px;
    text-align: left;
    display: block;
    font-size: 50px;        
}


.orangeGross a.brand  {
    font-family: 'CDUKievit Bold',Arial,Helvetica,Verdana,sans-serif; 
    background-image: -moz-linear-gradient(top left, #E95D0F 0%, #F49A00 100%);
    background-image: -webkit-linear-gradient(top left, #E95D0F 0%, #F49A00 100%);
    background-image: -ms-linear-gradient(top left, #E95D0F 0%, #F49A00 100%);
    background-image: -o-linear-gradient(top left, #E95D0F 0%, #F49A00 100%);
    color: #FFF; 
    margin-left: 15px;
    padding: 12px 26px 4px 26px; 
    -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px;
}



.containerTop {
    top: 65px;    
	margin: 0 auto;
    width: 1020px;
    text-align: left;
}

.box {
    padding: 20px;
    background: rgba(212, 212, 204, 0.9);
    opacity: 0.9;
    filter: alpha(opacity=90);
}


.container .img {
	width: 30%;
	float: left;
}

.container .img img.kand {
	width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 10px 10px 10px 10px;
    border: 1px solid #98968A;
    background-color: #FFFFFF;
}

.container .text {
	width: 65%;
	float: left;
    margin-left: 4%;
}

.container .content {
	width: 95%;
    margin-left: 4%;
}

/************************************************************************************
DATA CONTENT
*************************************************************************************/

/* --- SLIDER --- */     
.cycle-slideshow, .cycle-slideshow * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.cycle-slideshow { width: 100%; min-width: 200px; margin: auto; padding: 0; }

/* anchors */
.cycle-slideshow > a { 
    position: absolute; top: 0; left: 0;
    width: 100%; padding: 0; background-color: #222; display: block;
}

/* images */
.cycle-slideshow > a > img { 
    width: 100%;
    position: static;
    display: block;
}

/* divs */
.cycle-slideshow > div { 
    position: absolute; top: 0; left: 0;
    width: 100%; padding: 0;
}

.composite-example > div { background: white }
.composite-example > div > img { display: block; }
.composite-example > div .cycle-overlay { 
    color: white; background: black; opacity: .6; filter: alpha(opacity=60);
    position: absolute; bottom: 0; width: 100%; padding: 15px;
}

.cycle-slide p { margin: 0; padding: 10px }
/* --- SLIDER --- */


/* --- owlCarousel --- */
#owl-demo {
    margin-top: 30px;
}

#owl-demo .item{
    background: #E95D0F;
    padding: 5px 0px;
    margin: 10px;
    color: #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
}

#owl-demo .item img{
    width: 100%;
}

#owl-demo .item .name {
    margin-top: 5px;
    color: #FFF;
}

#owl-demo .item .name a {
    color: #FFF;
}

.customNavigation{
    text-align: center;
}
/* use styles below to disable ugly selection */
.customNavigation a{
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* --- owlCarousel --- */

#footerNav {
    color: #FFFFFF;
    font-size: 0.9em;
    
}

#footerNav .footerNavBox {
    width: 180px;
    float: left;
    margin-bottom: 40px;
}

#footerNav h3 {
    color: #FFFFFF;
}


#footerNav a {
    color: #FFFFFF;
    text-decoration: none;
}

#footerNav a:hover {
    text-decoration: underline;
}

#copyright {
    border-top: 4px solid #98968A;
    padding: 20px 0;
    color: #FFF;   
}

/* -- Kandidaten -- */

.kand_wrapper {
    width: 100%;
	margin-top: 20px;
}

.left {
	border-top: 4px solid #EAE9E2;
	margin-top: 40px;
	padding-top: 60px;
}

.right {
	border-top: 4px solid #EAE9E2;
	margin-top: 40px;
	padding-top: 60px;
}

.kand_image a {
    display: block;
    padding: 0;
    margin: 0;
}

.kand_image {
	width: 15%;
    padding: 10px 10px 10px 10px;
    border: 1px solid #dadada;
    background-color: #FFFFFF;
    border: 1px solid #98968A;
}

.kand_image:hover {
    -webkit-transform: scale(1.03);
    -moz-transform: scale(1.03);
    -ms-transform: scale(1.03);
    -o-transform: scale(1.03);
    transform: scale(1.03);
} 


.kand_image2 a {
    display: block;
    padding: 0;
    margin: 0;
}

.kand_image2 {
    float: left;
	width: 15%;
    padding: 10px 10px 10px 10px;
    border: 1px solid #dadada;
    background-color: #FFFFFF;
    border: 1px solid #98968A;
    margin: 0 20px 15px 0;
}


.right .kand_image {
	float: left;
	margin-right: 5%;
}

.left .kand_image {
	float: right;
	margin-left: 5%;
}

.kand_image img {
	width: 100%;
	height: auto;
}


.kand {
	width: 75%;
	float: left;
	text-align: left;
}

.kand h2 { 
	font-size: 24px;
	margin-bottom: 10px;
	color: #323232;
}

.kand h3 {
	font-size: 18px;
	margin-bottom: 20px;
	color: #E95D0F;
}

/* -- */

#nProfile { 
    margin: 20px 0;
    width: 100%; 
    min-height: 100px;
}

#nProfile .nKand  { 
    min-height: 400px;  
    float: left;    
    width: 25%;
    padding: 10px;
}

#nProfile .nKand h2 { 
    margin: 10px 0 6px 0;
}

#nProfile .nKand h4 { 
    color: #E95D0F;
}

#nProfile .nKand .box { 
    border: 2px solid #98968A;
    height: 400px;  
    width: 220px;
    background-color: #E2E0D7; 
    text-align: center;
    margin: 0 auto;
    -moz-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; border-radius:10px;

}

#nProfile .nKand .name { 
    height: 100px;  
}

#nProfile .nKand .box img.kand2 { 
    width: 150px;  
    padding: 10px 10px 10px 10px;
    border: 1px solid #dadada;
    background-color: #FFFFFF;
    border: 1px solid #98968A;
    -moz-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; border-radius:10px;
}

#nProfile .nKand .box img.kand2:hover {
    -webkit-transform: scale(1.03);
    -moz-transform: scale(1.03);
    -ms-transform: scale(1.03);
    -o-transform: scale(1.03);
    transform: scale(1.03);
    -moz-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; border-radius:10px;
} 

#nProfile .nKand .button {
    text-align: center;
    margin: auto;
    margin-top: 5px;
}

#nProfile .nKand .link {
    float: left;
    height: 50px;
    width: 50px;
    background-color: #00ff00;
}

#nProfile .nKand .link a {
    display: block;
    height: 50px;
    line-height: 50px;
    width: 50px;
    background-color: #00ff00;
    margin: 2px;
}

.box ul.button {
    margin: 8px 0 0;
    padding: 0;
}

.box ul.button li {
    display: inline-block;
    float: none;
}

li.icon {
    background-color: #000000;
    color: #FFFFFF;
    float: left;
    text-align: center;
    vertical-align: middle;
    border-radius: 22px;
    font-size: 125%;
    height: 44px;
    line-height: 40px;
    margin-left: 18px;
    width: 44px;    
}

li.icon:first-child {
    margin-left: 0;
}

li.icon a {
    color: #FFFFFF;
    display: block;
    height: 100%;
    line-height: inherit;
    padding: 0;
    text-decoration: none;
    top: 0;
    width: 100%;
}

li.icon:hover {
    background-color: #ff0000;
}

.i_face          { background:url(../img/icon.png) top left; background-position:     0      0; }             
.i_face:hover    { background:url(../img/icon.png) top left; background-position: -50px      0; }             

.i_twitter       { background:url(../img/icon.png) top left; background-position:     0  -50px; }             
.i_twitter:hover { background:url(../img/icon.png) top left; background-position: -50px  -50px; }             

.i_mail          { background:url(../img/icon.png) top left; background-position:     0 -100px; }             
.i_mail:hover    { background:url(../img/icon.png) top left; background-position: -50px -100px; }             

.i_search        { background:url(../img/icon.png) top left; background-position:     0 -150px; }             
.i_search:hover  { background:url(../img/icon.png) top left; background-position: -50px -150px; }             

.i_info          { background:url(../img/icon.png) top left; background-position:     0 -200px; }             
.i_info:hover    { background:url(../img/icon.png) top left; background-position: -50px -200px; }             

/* Detailseite */

.info {    
    position: relative;
    margin-top: 10px;    
}

.info .icon {    
    float: left;
    width: 30px;
}

.info .data {    
    float: left;
    width: 200px;
}

.info span {   
    width: 30px;
}

.iconSite {
    background-color: #FFF;
    font-size: 500px;
    padding: 100px;
}

/* Go to Top */

#scrollUp {
    background: url("../img/icon_top.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    bottom: 50px;
    display: none;
    height: 40px;
    opacity: 0.3;
    position: fixed;
    right: 50px;
    text-indent: -9999px;
    width: 40px;
    z-index: 999;
}


/* --- */

.line {
    border: none;
    /* top    */ border-top: 2px solid #ccc;
    /* middle */ background-color: #ddd; color: #ddd;
    height: 2px;
}


/** clearfix **/
.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
    line-height: 0;
}

.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
 
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }



#kontaktformular label                { top: 10px; }
#kontaktformular .ctheader            { font-weight: normal; }
#kontaktformular .cttext              { }
#kontaktformular .ctfield             { color: #333333; font-weight:normal; }
#kontaktformular .cterror             { color: #E95D0F; font-weight:normal; }
#kontaktformular input.widthSmall     { width: 100%; }
#kontaktformular input.widthBig       { width: 100%; }
#kontaktformular textarea.width       { width: 100%; }
#kontaktformular input.ctfield        { border: 1px solid #B9B7AF; font-weight:normal; color: #333333; margin:2px 0px 10px 0px; font-size:18px; background:#FAFAFA; }
#kontaktformular select.ctfield       { border: 1px solid #B9B7AF; font-weight:normal; color: #333333; margin:0px 0px 10px 0px; font-size:18px; background:#FAFAFA; }
#kontaktformular textarea.ctfield     { border: 1px solid #B9B7AF; font-weight:normal; color: #333333; margin:2px 0px 10px 0px; font-size:18px; background:#FAFAFA; height:150px; }
#kontaktformular input.cterror        { border: 1px solid #E95D0F; font-weight:normal; color: #E95D0F; margin:2px 0px 10px 0px; font-size:18px; background:#FEECE2; }
#kontaktformular select.cterror       { border: 1px solid #E95D0F; font-weight:normal; color: #E95D0F; margin:0px 0px 10px 0px; font-size:18px; background:#FEECE2; }
#kontaktformular textarea.cterror     { border: 1px solid #E95D0F; font-weight:normal; color: #E95D0F; margin:2px 0px 10px 0px; font-size:18px; background:#FEECE2; height:150px; }
#kontaktformular .selectBoxStyle      { border-color: #B9B7AF; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; }
#kontaktformular #cterrorbox          { margin:10px 0px 0px 0px; padding:2px 0px 2px 10px;  background:#FEECE2;  border: 1px solid #E95D0F; }

#kontaktformular .look                { padding:8px 8px; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; border-radius:5px; }

#kontaktformular .botton              { background-color: #E95D0F; width: 100px; color: #FFF; margin-top: 5px; padding:8px 8px 5px 10px; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; border-radius:5px; }
#kontaktformular .botton:hover        { background-color: #000000; text-decoration: none; }
#kontaktformular a                    { text-decoration: none; width: }

#kontaktformular input, textarea {
        -webkit-transition: all 0.30s ease-in-out;
        -moz-transition: all 0.30s ease-in-out;
        -ms-transition: all 0.30s ease-in-out;
        -o-transition: all 0.30s ease-in-out;
        outline: none;
}

#kontaktformular input:focus, #kontaktformular textarea:focus {
    box-shadow: 0 0 5px rgba(115, 113, 101, 1);
    border: 1px solid rgba(115, 113, 101, 1);
}


/* --- KARTE --- */

div#layerGround {
    border: 1px solid #D0CEBF;
    padding: 20px; 
    -moz-border-radius:8px; -webkit-border-radius:8px; -khtml-border-radius:8px; border-radius:8px;
    margin-top: 20px;
    position: relative;
    top: 20px;
}

div#layerBox {
    height: 10px;   
}

div#layerPopup {
    position: relative;
    top: -422px;
    left: 21px;
}
div#layerPopup2 {
    position: relative;
    top: -420px;
    left: 0px;
}

.wb {
    -moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px;
    background-color: #F0EFEA;
    position: relative;
    top: -841px;
    left: 440px;
    width: 400px;
    height: 300px;
    padding: 10px;
}

.wb2 {
    -moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px;
    background-color: #F0EFEA;
    position: relative;
    top: -420px;
    left: 440px;
    width: 400px;
    height: 300px;
    padding: 10px;
}


.kand_image_karte img {
    text-align: right;
	width: 30%;
	height: 30%;
}


.bubbleTest {
    width: 50%;
    margin: 0 auto;
}

.bubbleIndex {
    width: 50%;
    margin: 0 auto;
}

.bubble {
    margin: 25px 0;
    font-size: 20px;
    position: relative;
}

.bubble .bubbleOben {
    position: relative;
    float: left;
    font-size: 24px;
    font-family: 'CDUKievit Bold',Arial,Helvetica,Verdana,sans-serif; 
    background-image: -moz-linear-gradient(top left, #E95D0F 0%, #F49A00 100%);
    background-image: -webkit-linear-gradient(top left, #E95D0F 0%, #F49A00 100%);
    background-image: -ms-linear-gradient(top left, #E95D0F 0%, #F49A00 100%);
    background-image: -o-linear-gradient(top left, #E95D0F 0%, #F49A00 100%);
    color: #FFF; 
    margin-right: 45px;
    padding: 13px 18px 9px 18px; 
    -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px;    
}
.bubble .bubbleRect {
    position: relative;
    float: right;
    top: -35px;
    left: -40px;
}

.bubble .bubbleUnten {
    position: relative;
    font-size: 18px;
    float:  right;
    margin-top: 15px;
    margin-left: 45px;
    font-family: 'CDUKievit Bold',Arial,Helvetica,Verdana,sans-serif; 
    background-color: #FFF;
    padding: 13px 10px 9px 18px; 
    -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px;    
}




.bubbleOrange {
    text-align: center;
    margin: 25px 0;
    font-size: 20px;
    position: relative;
}

.bubbleOrange .bubbleOben {
    text-align: center;
    position: relative;
    float: left;
    font-size: 21px;
    font-family: 'CDUKievit Bold',Arial,Helvetica,Verdana,sans-serif; 
    background-image: -moz-linear-gradient(top left, #E95D0F 0%, #F49A00 100%);
    background-image: -webkit-linear-gradient(top left, #E95D0F 0%, #F49A00 100%);
    background-image: -ms-linear-gradient(top left, #E95D0F 0%, #F49A00 100%);
    background-image: -o-linear-gradient(top left, #E95D0F 0%, #F49A00 100%);
    color: #FFF; 
    margin-right: 25px;
    padding: 13px 18px 9px 18px; 
    -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px;    
}
.bubbleOrange .bubbleRect {
    text-align: center;
    position: relative;
    float: right;
    top: -35px;
    left: -40px;
}

.bubbleOrange .bubbleUnten {
    text-align: center;
    position: relative;
    font-size: 16px;
    float:  right;
    
    margin-top: 15px;
    margin-left: 25px;
    font-family: 'CDUKievit Bold',Arial,Helvetica,Verdana,sans-serif; 
    background-color: #FFF;
    padding: 13px 0px 9px 20px; 
    -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px;    
}



.footerLine {
    text-align: right;
    margin-top: 40px;
    padding: 10px; 
    font-size: 0.9em;
}


.zieleOrange {
    text-align: left;
    position: relative;
    float: left;
    font-size: 21px;
    font-family: 'CDUKievit Bold',Arial,Helvetica,Verdana,sans-serif; 
    background-image: -moz-linear-gradient(top left, #E95D0F 0%, #F49A00 100%);
    background-image: -webkit-linear-gradient(top left, #E95D0F 0%, #F49A00 100%);
    background-image: -ms-linear-gradient(top left, #E95D0F 0%, #F49A00 100%);
    background-image: -o-linear-gradient(top left, #E95D0F 0%, #F49A00 100%);
    color: #FFF; 
    margin-right: 25px;
    padding: 8px 13px 4px 13px; 
    width: 100%;
    -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px;    
}


/* Google Maps */

#map_canvas { width:100%; height:450px }

#google_map .container {
    padding: 0;
}

/* Countdown */

div#clock            { position: relative; top: -20px; color: white; margin: 0px auto; width: 560px; overflow: hidden; text-align: center; }
div#clock p          { background: #333; float: left; height: 88px; width: 88px; border: #E8E6DA 1px solid; }
div#clock p span     { display: block; font-size: 45px; line-height: 1.1em; font-weight: bold; padding: 8px 0 0; }
div#clock div.space  { color: #ccc; display: block; line-height: 1.1em; font-size: 50px; float: left; height: 88px; width: 30px; }
div#clock h3.counter { position: relative; top: -10px; }
div#clock .day       { position: relative; top: -2px; font-size: 14px; font-weight: normal; } 

/************************************************************************************
BACKGROUND SLIDER
*************************************************************************************/

#kopfbild {
    background-color: transparent; 
    /* background: url('../img/bg_merkel.jpg') no-repeat top center; */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;      
    /*css hack for ie*/     
    /* filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg_merkel.jpg',sizingMethod='scale'); */ 
    /* -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg_merkel.jpg',sizingMethod='scale')"; */ 
}

#countdown {
    background-image: url('../img/bg_ecru.jpg');
    background-repeat: no-repeat;  
    background-size: cover; 
    background-color: #E8E6DA; 
    /*css hack for ie*/     
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg1.jpg',sizingMethod='scale');
    -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg1.jpg',sizingMethod='scale')";
}

#danke {
    background-image: url('../img/bg_ecru.jpg');
    background-repeat: no-repeat;  
    background-size: cover; 
    background-color: #E8E6DA; 
    /*css hack for ie*/     
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg1.jpg',sizingMethod='scale');
    -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg1.jpg',sizingMethod='scale')";
}

#einfuehrung {
    background-image: url('../img/bg1.jpg');
    background-repeat: no-repeat;  
    background-size: cover; 
    background-color: #FFFFFF; 
    /*css hack for ie*/     
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg1.jpg',sizingMethod='scale');
    -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg1.jpg',sizingMethod='scale')";
}

#aktionen {
    background-image: url('../img/bg_ecru.jpg');
    background-repeat: no-repeat;  
    background-size: cover; 
    background-color: #E8E6DA; 
    /*css hack for ie*/     
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg_ecru.jpg',sizingMethod='scale');
    -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg_ecru.jpg',sizingMethod='scale')";
}

#aktuelles {
    background-image: url('../img/bg1.jpg');
    background-repeat: no-repeat;  
    background-size: cover; 
    background-color: #FFFFFF; 
    /*css hack for ie*/     
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg1.jpg',sizingMethod='scale');
    -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg1.jpg',sizingMethod='scale')";
}

#stadtrat {
    background-image: url('../img/bg_ecru.jpg');
    background-repeat: no-repeat;  
    background-size: cover; 
    background-color: #E8E6DA; 
    /*css hack for ie*/     
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg_ecru.jpg',sizingMethod='scale');
    -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg_ecru.jpg',sizingMethod='scale')";
}

#ziele {
    background-image: url('../img/bg1.jpg');
    background-repeat: no-repeat;  
    background-size: cover; 
    background-color: #FFFFFF; 
    /*css hack for ie*/     
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg1.jpg',sizingMethod='scale');
    -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg1.jpg',sizingMethod='scale')";
}


#neuekoepfe {
    background-image: url('../img/bg1.jpg');
    background-repeat: no-repeat;  
    background-size: cover; 
    background-color: #98968A; 
    /*css hack for ie*/     
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg1.jpg',sizingMethod='scale');
    -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg1.jpg',sizingMethod='scale')";
}

#lette {
    background-image: url('../img/bg_ecru.jpg');
    background-repeat: no-repeat;  
    background-size: cover; 
    background-color: #E8E6DA; 
    /*css hack for ie*/     
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg_ecru.jpg',sizingMethod='scale');
    -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg_ecru.jpg',sizingMethod='scale')";
}

#kreistag {
    background-image: url('../img/bg1.jpg');
    background-repeat: no-repeat;  
    background-size: cover; 
    background-color: #FFFFFF; 
    /*css hack for ie*/     
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg_ecru.jpg',sizingMethod='scale');
    -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg_ecru.jpg',sizingMethod='scale')";
}

#bild {
    background-color: #F0EFEA; 
    background: url('../img/tastatur2.jpg') no-repeat top center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;      
    /*css hack for ie*/     
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/tastatur2.jpg',sizingMethod='scale');
    -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/tastatur2.jpg',sizingMethod='scale')";
}


#kontakt {
    background-image: url('../img/bg_ecru.jpg');
    background-repeat: no-repeat;  
    background-size: cover; 
    background-color: #E8E6DA; 
    /*css hack for ie*/     
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg1.jpg',sizingMethod='scale');
    -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg1.jpg',sizingMethod='scale')";
}

#footer {
    background: #737165 url('../img/footer_bg.png') top center repeat-x ;
    /*css hack for ie*/     
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/footer_bg.png',sizingMethod='scale');
    -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/footer_bg.png',sizingMethod='scale')";
}


/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 1280px or less  -  (PC Desktop) */
@media screen and (max-width: 1280px) {

    .containerCounter   { width: 100%; }
    .container          { width: 100%; }
    .containerLeft      { width: 50%; }
    .containerRight     { width: 50%; }
    .containerTop       { width: 100%; }

    /* -- */
    
    .bubbleIndex        { width: 50%; }
    .bubbleTest         { width: 100%; }

    a.brand             { margin-left: 15px; }

    #slide0 {
      background-image: url('../img/bg_merkel2.jpg');
      filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg_merkel2.jpg',sizingMethod='scale');
      -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg_merkel2.jpg',sizingMethod='scale')";
    }

    .kand_image         { padding: 8px; }

    #nProfile .nKand    { width: 33%; }
}

/* for 1024px or less  -  (iPad landscape) */
@media screen and (max-width: 1024px) {


    .containerCounter   { width: 100%; }
    .container          { width: 100%; }
    .containerLeft      { width: 50%; }
    .containerRight     { width: 50%; }
    .containerTop       { width: 100%; }

    /* -- */

    .bubbleIndex        { width: 50%; }
    .bubbleTest         { width: 100%; }
    .bubbleOrange .bubbleOben  { font-size: 18px; padding: 13px 10px 9px 10px; }
    .bubbleOrange .bubbleUnten { font-size: 16px; padding: 13px 0px 9px 20px;  }
    
    a.brand             { margin-left: 15px; }

    #slide0 {
      background-image: url('../img/bg_merkel2.jpg');
      filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg_merkel2.jpg',sizingMethod='scale');
      -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg_merkel2.jpg',sizingMethod='scale')";
    }

    .kand_image         { padding: 8px; }

    #nProfile .nKand    { width: 25%; }
}

/* for 980px or less  - (iPad portrait) */
@media screen and (max-width: 980px) {

    .container          { width: 100%; }
    .containerLeft      { width: 50%; }
    .containerRight     { width: 50%; }
    .containerTop       { width: 100%; }

    /* -- */

    .orange a.brand     { margin-left: 5px; }        
    
    #slide0.wrapper     { min-height: 450px; }

    .kand_image         { padding: 6px; }
    
    .bubbleIndex        { width: 50%; }
    .bubbleTest         { width: 100%; }
    .bubbleOrange .bubbleOben  { font-size: 16px; padding: 13px 10px 9px 10px; }
    .bubbleOrange .bubbleUnten { font-size: 14px; padding: 10px 0px 6px 20px;  }


    #scrollUp           { bottom: 30px; right: 30px; }

    #nProfile .nKand    { width: 33%; }

    div#clock           { top: -20px; width: 420px; }
    div#clock p         { height: 68px; width: 68px; }
    div#clock p span    { font-size: 35px; line-height: 1.0em; padding: 6px 0 0; }
    div#clock div.space { line-height: 1.0em; font-size: 50px; height: 68px; width: 20px; }
    div#clock h3.counter { top: -10px; }
    div#clock .day      { font-size: 12px; font-weight: normal; } 

}

/* for 700px or less - (iPhone 5 landscape) */
@media screen and (max-width: 700px) {

    body                { padding-top: 52px; background: url('../img/bg_rathaus1.jpg') no-repeat top center fixed; }
    .wrapperKopf        { min-height: 400px; }

    .containerCounter   { width: 100%; }
    .container          { width: 100%; }
    .containerLeft      { width: 100%; }
    .containerRight     { width: 100%; }
    .containerTop       { width: 100%; }
   
    /* -- */
    .containerBrand1    { display: none; }
    .containerBrand2    { display: block; }
    .containerBrand3    { display: none; }

    #top                { height: 50px; }

    #logo-box  img.logo { height: 40px; }

    #slide0.wrapper     { min-height: 400px; }

    .kand_image         { padding: 5px; }
    
    .bubbleIndex        { width: 50%; }
    .bubbleTest         { width: 100%; }
    .bubbleOrange .bubbleOben  { font-size: 16px; padding: 13px 10px 9px 10px; }
    .bubbleOrange .bubbleUnten { font-size: 14px; padding: 10px 0px 6px 20px;  }


    #scrollUp           { bottom: 20px; right: 20px; }

    #nProfile .nKand    { width: 50%; }

    div#layerGround     { height: 810px; }
    div#layerBox        { height: 10px; }
    div#layerPopup      { top: -769px; left: 21px;  }
    div#layerPopup2     { top: -420px; left: 0px; border: #00ff00 solid 1px; }
    .wb                 { top: -741px; left: 20px; }
    .wb2                { top: -320px; left: 20px; }    
    
    div#clock           { top: -20px; width: 370px; }
    div#clock p         { height: 58px; width: 58px; }
    div#clock p span    { font-size: 30px; line-height: 1.0em; padding: 5px 0 0; }
    div#clock div.space { line-height: 1.0em; font-size: 40px; height: 58px; width: 20px; }
    div#clock h3.counter { top: -10px; }
    div#clock .day      { font-size: 12px; font-weight: normal; } 
    
}

/* for 480px or less  -  (iPhone 2-4 landscape) */
@media screen and (max-width: 480px) {

    body                { padding-top: 52px; background: url('../img/bg_rathaus2.jpg') no-repeat top center fixed; }
    .wrapperKopf        { min-height: 250px; }

    .containerCounter   { width: 100%; }
    .container          { width: 100%; }
    .containerLeft      { width: 100%; }
    .containerRight     { width: 100%; }
    .containerTop       { width: 100%; display:none; }
    
    /* -- */

    .containerBrand1    { display: none; }
    .containerBrand2    { display: block; }
    .containerBrand3    { display: none; }

    .cycle-overlay      { display: none; }

    .short              { display: none; }

    #wahlbezirke        { display: none; }

    #top                { height: 50px; }

    #logo-box  img.logo { height: 35px; margin-top: 8px; }

    #slide0.wrapper     { min-height: 300px; }

    .container .img     { width: 100%; }
    .container .text    { width: 100%; padding-right: 15%; margin-bottom: 50px; }

    .kand_image         { padding: 4px; }

    .bubbleTest         { width: 100%; }
    .bubbleOrange .bubbleOben  { font-size: 18px; padding: 13px 10px 9px 10px; }
    .bubbleOrange .bubbleUnten { font-size: 16px; padding: 10px 0px 6px 20px;  }

    #scrollUp           { bottom: 10px; right: 10px; }

    #nProfile .nKand    { width: 50%; margin-bottom: 20px; }
    
        
    div#clock           { top: -20px; width: 330px; }
    div#clock p         { height: 50px; width: 50px; }
    div#clock p span    { font-size: 25px; line-height: 1.0em; padding: 3px 0 0; }
    div#clock div.space { line-height: 1.0em; font-size: 30px; height: 50px; width: 20px; }
    div#clock h3.counter { top: -10px; }
    div#clock .day      { font-size: 10px; font-weight: normal; } 

}

/* for 380px or less  -  (iPhone portrait) */
@media screen and (max-width: 380px) {

    .containerCounter   { width: 100%; }
    .container          { width: 100%; }
    .containerLeft      { width: 100%; }
    .containerRight     { width: 100%; }
    .containerTop       { width: 100%; display:none; }
    
    /* -- */

    .containerBrand1    { display: none; }
    .containerBrand2    { display: none; }
    .containerBrand3    { display: block; font-size: 18px; }
    .orange a.brand     { padding: 8px 13px 4px 13px; }
    
    .cycle-overlay      { display: none; }

    .short              { display: none; }

    #wahlbezirke        { display: none; }

    #top                { height: 50px; }

    #logo-box  img.logo { height: 35px; margin-top: 8px; }

    #slide0.wrapper     { min-height: 300px; }

    .container .img     { width: 100%; }
    .container .text    { width: 100%; padding-right: 15%; margin-bottom: 50px; }

    .right .kand_image  { float: left; margin-left: 0; width: 50%; padding: 4px; }
    .left  .kand_image  { float: left; margin-left: 0; width: 50%; padding: 4px; }
    .kand               { width: 100%; }

    .bubbleTest         { width: 100%; }
    .bubbleOrange .bubbleOben  { font-size: 18px; padding: 13px 10px 9px 10px; }
    .bubbleOrange .bubbleUnten { font-size: 16px; padding: 10px 0px 6px 20px;  }

    #scrollUp           { bottom: 10px; right: 10px; }

    #nProfile .nKand    { width: 100%; margin-bottom: 20px; }

    
    #copyright          { font-size: 12px; }
        
    div#clock           { top: -20px; width: 270px; }
    div#clock p         { height: 44px; width: 44px; }
    div#clock p span    { font-size: 20px; line-height: 1.0em; padding: 6px 0 0; }
    div#clock div.space { line-height: 1.0em; font-size: 20px; height: 44px; width: 12px; }
    div#clock h3.counter { top: -10px; }
    div#clock .day      { font-size: 9px; font-weight: normal; } 

}