/* latin */
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('PT Serif'), local('PTSerif-Regular'), url(../fonts/PT_Serif-regular.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('PT Serif Bold'), local('PTSerif-Bold'), url(../fonts/PT_Serif-bold.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

#stoerer {
    position: absolute;
    right: 55px;
    top: 150px;
    z-index: 99;
}


html,body,div,p,h1,h2,h3,h4,h5,h6,li,ul,span {
	margin:0;padding:0;
}
html, body {
	color: #222;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px; line-height: 1.5;
	/*position: relative;   */
}
html {
	height: 100%;
	background: #837a61 url('../img/bg.gif') repeat-x;
}

body {
	margin: 50px auto 0 auto;
	width: 957px;
	text-align: center;

}
.address {
	font-style: normal;
	display:block;
	margin-bottom: 1em;
}
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

#T a:link, #T a:focus, #T a:hover, #T a:active, #T a:visited,
.teaser a:link {
	color: #BF471A;
	padding-right: 25px;
	background: transparent url('../img/lp_blue.gif') right 60% no-repeat;
}
.teaser a:link, .teaser a:focus, .teaser a:hover, .teaser a:active, .teaser a:visited {
	background-image: url('../img/lp_trans.gif');
	color: #ad501f !important;
}
.teaser a:focus, .teaser a:hover, .teaser a:active {
	color: #cd5d22;
}
#T a:focus, #T a:hover, #T a:active,
.teaser a:focus, .teaser a:hover, .teaser a:active {
	text-decoration: underline;
}
#H h1 {
	background: transparent url(../img/logo.gif) no-repeat;
	width: 377px;
	display: block;
	margin: 5px auto;
	height: 200px;
}
h1 span, h2 span, .alt {
	display: none;
	text-indent:-9999px;
}

.alt {
	position:absolute;
}

p {
	margin-bottom: .5em;
}
img {
	margin: 0;
	padding: 0;
	border: none;
}
dt, h3 {
	font-weight: bold;
	margin-bottom: 0.125em;
	margin-top: 1em;
	font-size: 14px; line-height: 1.5;
}
.sc-content-preise_2 h3 {
	font-weight: bold;
	margin-bottom:0em;
	margin-top: 0em;
	font-size: 14px; 
    line-height: 1.5;
}
dt span {
	display:block;
	font-size: 86%;
	font-weight: normal;
	color: #444;
}
ul.twocol li {
	float: left;
	width: 49%;
	display: block;
}

#W, #C, #H, #M, #F { margin:0;padding:0; }

#W {
	margin: 50px 0 20px 0;
	width: 957px;
	text-align: left;
	position: relative;
	/* padding-bottom: 17px; */
	/* background: transparent url(../img/ct_bg_bot.png) 1px bottom no-repeat; */
}
#X {
	height: 17px;
	background: transparent url(https://www.gesangsunterricht-duesseldorf.net/img/ct_bg_bot.png) top left no-repeat;
}
#H {
 height: 190px;
    padding: 54px 0 0;
	background: transparent url('../img/ct_bg_top.png') top left no-repeat;
}
#H h2 {
	display: none; /* remove first h2 */
}
a {
	text-decoration: none;
}
.twocol a {
	color: #333;
}


#M {
	background: transparent url(../img/ct_bg_fill2.png);
}

#C { 
	margin: 0 0 0 4px;
	padding: 1px 0;
	min-height: 361px;
	width: 950px;
}
* html #C {
	height: 361px;
}

#F {
	min-height: 60px;
	padding: 0 10px 10px 10px;
	/*	background: transparent url(../img/ct_bg_bot.png) bottom left no-repeat; */
}
* #F {
	height: 127px;
}

#C {
	padding: 1px 30px 1px 409px;
	width: 510px;
	position: relative;
}

.sc-content-home    {
    line-height: 1;
}


#home #C {
	padding: 0;
}
strong.copy, strong.hl {
	margin-top: 27px;
	margin-bottom: 21px;
	height: 25px;
	display: block;
	text-indent: -9999px;
}

h2 {
/* 	height: 36px; */
	text-indent: -9999px;
	margin-bottom: 13px;
}
/* #T {
overflow:auto;
height:210px;
width:494px;
padding-right: 1em;
} */
#T ul {
	margin-bottom: 1em;
	padding-left: 15px;

}

.teaser {
	width: 350px;
	background-color: rgb(220,220,211);
	background-color: rgba(255,255,255,0.5);
	position: absolute;
	top: 452px;
	right: 16px;
	padding: 10px 15px;
	color: #444;
	font-size: 12px;
}
.teaser h2 {
	font-size: 13px;
	line-height: 1.2;
	margin: 0;
	padding: 0;
	height: auto;
	text-indent: 0px;
}
.teaser em {
	font-weight: bold;
	font-style: normal;
	display: block;
	margin-bottom: 0.5em;
}
.teaser p {
}

/* ------------- Navigation --------------- */
#N, #N li {
	margin:0; padding:0; float:left; list-style: none;
	 margin-top: 6px;  
}
#N li {
/* margin:6px 0 0 12px; */
	margin-left: 12px;
	overflow: hidden;
}
#N li a span {
	/*display: none;*/
}
#N a {
	display: block;
	width: 100px;
    height: 33px;
	/*background: transparent url(../img/navi.png) top left;*/
	font-family: 'PT Serif';
	font-weight: 400;
	color: #7a6846;
	text-transform: uppercase;
}
#N a:hover {
	color:#cd5d22;
}
#N a:active, #N li.active a {
	/*border-bottom: 1px solid #cd5d22;*/
	color:#cd5d22;
}

#N #Nkonz {
	margin-left: 13px;
}
#Nkonz a {
	background-position: -31px 0;
	width: 71px;
}
#Nkonz.active a, #Nkonz a:active, #Nkonz a:hover, #Nkonz a:focus {
	background-position: -31px -33px;
}

#Nunte a {
	background-position: -116px 0px;
	width: 96px;
}
#Nunte.active a, #Nunte a:active, #Nunte a:hover, #Nunte a:focus {
	background-position: -116px -33px;
}

#Nwork a {
	background-position: -220px 0px;
	width: 93px;
}
#Nwork.active a, #Nwork a:active, #Nwork a:hover, #Nwork a:focus {
	background-position: -220px -33px;
}

#Nthem a {
	background-position: -324px 0px;
	width: 134px;

}
#Nthem.active a, #Nthem a:active, #Nthem a:hover, #Nthem a:focus {
	background-position: -324px -33px;
}

#Nbueh a{
	background-position: -450px 0px;
	width: 56px;
}
#Nbueh.active a, #Nbueh a:active, #Nbueh a:hover, #Nbueh a:focus {
	background-position: -450px -33px;
}

#Nprei a{
	background-position: -515px 0px;
	width: 55px;
}
#Nprei.active a, #Nprei a:active, #Nprei a:hover, #Nprei a:focus {
	background-position: -515px -33px;
}

#Nsoph a{
	background-position: -586px 0px;
	width: 152px;
}
#Nsoph.active a, #Nsoph a:active, #Nsoph a:hover, #Nsoph a:focus {
	background-position: -586px -33px;
}

/* #N #Nkont {
	margin-left: 108px;
} */

#Nkont a{
	background-position: -750px 0px;
	width: 73px;
}
#Nkont.active a, #Nkont a:active, #Nkont a:hover, #Nkont a:focus {
	background-position: -750px -33px;
}

#Nbros a{
	background-position: -829px 0px;
	width: 90px;
}
#Nbros.active a, #Nbros a:active, #Nbros a:hover, #Nbros a:focus {
	background-position: -829px -33px;
}


/*
	------------ jScrollPane CSS ---------------
*/

.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 1;
	border: 0;
    outline: 0;
}

.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
	height: 100%;
	/* background: #aaa; */
}
.jScrollPaneDrag {
	position: absolute;
	background: #666;
	cursor: pointer;
	overflow: hidden;
}
.jScrollPaneDragTop {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.jScrollPaneDragBottom {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
a.jScrollArrowUp {
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 9px;
}
a.jScrollArrowUp:hover {
	/*background-color: #f60;*/
}

a.jScrollArrowDown {
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 9px;
}
a.jScrollArrowDown:hover {
	/*background-color: #f60;*/
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
	/*background-color: #f00;*/
}
.jScrollPaneDrag {
	background-color: #4F432B;
	margin: 1px 0;
}
.jScrollPaneTrack {
	border: 1px solid #4F432B;
	height: 206px !important;
	padding: 1px;
}
.jScrollCap {
	height: 1px;
}

 .sc-content-datenschutz_2 .scroll-pane
{
	width: 100%;
	height: 30%;
	overflow: auto;
}

/* ------------------------- */ 
 .footer {
    bottom: 10px;
    float: left;
    position: absolute;
    text-align: center;
    width: 97%;
 }
.footer a, .footer h1, .footer h2, .footer h3   {
      display: inline;
      font-weight: normal;
     font-size: 12px;
     color: #7a6846;
     text-transform: uppercase;
}

.footer .blog {     
     background-color: #e87325; 
     color: #fff;  
     padding: 1px 7px;
      text-transform: none;
      font-size: 11px;
      margin-left: 3px;
}
.footer .fb {
    background-image: url("../img/facebook.gif");
    display: inline-block;
    font-size: 0;
    height: 0;
    left: 3px;
    margin-top: 2px;
    overflow: hidden;
    padding-top: 16px;
    position: relative;
    top: 4px;
    width: 17px;
}
.footer .linkedin {
    background: url(../img/linkedin.png) no-repeat  3px 4px #c5bbac ;
    display: inline-block;
    font-size: 0;
    height: 0;
    left: 10px;
    margin-top: 2px;
    overflow: hidden;
    padding-top: 16px;
    position: relative;
    top: 4px;
    width: 17px;

}


.footer .xing {
    background: url(../img/xing.png) no-repeat  3px 4px #c5bbac ;
    display: inline-block;
    font-size: 0;
    height: 0;
    left: 8px;
    margin-top: 2px;
    overflow: hidden;
    padding-top: 16px;
    position: relative;
    top: 4px;
    width: 17px;

}

.footer .google {
    background: url(../img/googleplus.png) no-repeat  3px 4px #c5bbac ;
    display: inline-block;
    font-size: 0;
    height: 0;
    left: 6px;
    margin-top: 2px;
    overflow: hidden;
    padding-top: 16px;
    position: relative;
    top: 4px;
    width: 17px;

}
.footer .youtube {
    background: url(../img/youtube.png) no-repeat  3px 4px #c5bbac;
    display: inline-block;
    font-size: 0;
    height: 0;
    left: 6px;
    margin-top: 2px;
    overflow: hidden;
    padding-top: 16px;
    position: relative;
    top: 4px;
    width: 17px;
}



.footer .google:hover, .footer .fb:hover, .footer .blog:hover, .xing:hover, .linkedin:hover {
    opacity:0.8;
}
.bilder-slider {
    height: 362px;
    left: 0;
     top: 0;
    overflow: hidden;
    position: absolute;
    width: 366px;
}

.bilder-slider.home {
    height: 363px;
    left: 0;
     top: 0;
    overflow: hidden;
    position: relative;
    width: 950px;
}



  
/*    Blog     */
.col-left {
  
    
    
        float: left;
    margin-right: 9px;
   /*  min-height: 511px; */
    width: 437px;
}

.col-right {  
    float: left;
    margin-left:0px;
    /* min-height: 411px; */
    width: 437px;
    margin-bottom: 9px;
    margin-right: 9px;
    
    
   
}
.col-right h2, .col-left h2 {
    
    border-top: 10px solid #FFFFFF;
    display: block;
    font-size: 19px;
    font-weight: normal;
    margin-bottom: 0;
    margin-top: 0;
    padding: 23px 15px 0;
    text-indent: 0;
    
    
}


.col-left h2:first-child, .col-right h2:first-child {
    border: 0 none;
}


.col-right p, .col-left p {
    padding: 15px;
}



 .col-right, .col-left {
   background-color: #f0efeb;  
 } 
 
  .col-right img, .col-left img, .col-right .sc-video, .col-left .sc-video {
  margin: 15px;
 }


    #C.blogcont {
  /*   width: 100%; */
	height: 361px;
	overflow: auto;
    background-color: #fff;
    padding-top: 0;
    color: #6e603d;
    }    
     .blogcont .einleitung {
         color:#4c3513;
     }
    
    .blogcont a {
        color: #cd5d22;
    }

 .blog .jScrollPaneContainer {
 background-color: #fff;
    margin-left: 4px;
    border-top: 52px solid #fff;
    /* border-bottom: 20px solid #fff; */
  
   
}
.blog .jScrollPaneTrack {
        height: 98.5% !important;
    margin: 0 10px 10px;
    overflow: hidden;
}

  #F.blog {
    height: 45px;
    min-height: 45px;
   
  }
  .blog .footer {
      bottom: 16px;
  }

 .blog .jScrollPaneDrag {
    background-color: #6E603D;
    margin: 1px 0;
}    
 .blog .jScrollPaneTrack {
    border: 1px solid #6E603D; 
   
}

   

  #H.blog {
     height: 365px;
    padding: 0;
	background: transparent url("../img/blog-bg-head.jpg") no-repeat scroll 2px top;
  }
  #N.blog {
    background-color: #FFFFFF;
    left: 4px;
    padding: 0 16px 12px 0;
    position: absolute;
    top: -433px;
    z-index: 12;
    
    
  }






 /*-------------*/



#control {
   
    bottom: 8px;
    left: 342px;
    position: absolute;
    z-index: 55;
     
}

.pause {
     background: url(../img/stopp.png) no-repeat top left;
     cursor: pointer; 
     width: 13px;
     height: 13px;
     display: block;
     border: 1px solid #FFFFFF;
}
.play {
     background: url(../img/start.png) no-repeat top left;
     cursor: pointer; 
     width: 13px;
     height: 13px;
     display: block;
     border: 1px solid #FFFFFF;
}

/*-------- Mailformular -------------*/

#alert  {
/* display: none; */
 margin-top: 0px; 
/*  opacity:0; */
border: 0px solid red;

position: relative;
top: 10px;
 margin-bottom: 18px;
 color: transparent;
 -webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;


}

.error {
    border: 1px solid #cd5d22;
}
.check-input.error    {
    outline: 1px solid #cd5d22;
}
.checkbox {
    float: left;  
    width: 100%;
}
.check-input {
    width: auto;
float: left;
margin-right: 10px;
}
.check-label {
/*     float: left; */
    width: 430px;
    clear: none;
    font-size: 11px;
    font-weight: normal;
}
.buttonbox .button {
   margin-top: 20px;
margin-right: 102px;
margin-bottom: 15px; 
}
.sterntext {
    width: 100%;
    float: left;
    font-size: 11px;
    margin-bottom: 20px;
}
        
#impressum #C h1 {
    margin-top: 27px;
    margin-bottom: 60px;
    font-size: 22px;
    font-weight: normal;
    color: white;
}        

.adminbar__modal {
left: 0;
}