﻿/**************/
/*neu*/
/*************/
html, body {
	background : #fff;
	overflow : auto;
	margin: 0;
	padding: 0;
	height: 100%;
	border: none;
	color:#666666;
	font-size: 1.0em;
	line-height: 1.5em;
	font-family: 'Source Sans Pro', sans-serif;
	-webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);

}
.ct81{
	-moz-hyphens: auto; /*auto umbruch im Content*/
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	-o-hyphens: auto;
	hyphens: auto;

}
.bg8
{
 background-color:#E9E9E9;
 padding:12px;
}
.clear{
	clear:both;
}
#hmb3{
	display:none;
}
.hmbnav{
	display:none;
	
}

h1{
    margin: 0;
	padding: 0;
	font-size: 1.7em;
	line-height: 1.4em;
	color:#414D6B;
    font-weight:400;
    padding-bottom:5px;
}
a:link {
	color:#414D6B;
	text-decoration : none;
	background-color : transparent;
	font-weight:400;
	}
a:visited {
	color : #414D6B;
	text-decoration : none;
	background-color : transparent;
	font-weight:400;

}
a:hover {
	color : #A34940;
	text-decoration : none;
	background-color : transparent;
	font-weight:400;

}

 .jasmin{
        float:right;
        margin-top:0px;
        margin-right:8px;
        overflow:hidden;
        -webkit-animation: fadeinout 6s linear forwards;
        animation: fadeinout 6s linear forwards;
        opacity: 0;
}

@-webkit-keyframes fadeinout {
    50% { opacity: 0; }
}

@keyframes fadeinout {
    100% { opacity: 1; }
}
/**************
Socialmedia
**************/
   .ct801{
                    margin:12px 0 64px 0;
                    display:flex;
                    justify-content: center;
                }

               .lgo81 {
                   font-size:4.8em;
                   width:10%;
               }
               .lgo81:nth-child(1){
                   margin-right:16px;
                   margin-left:12px;
               }
               .ct801 a:link:nth-child(1){
               color:#336699;
               }
                .ct801 a:visited:nth-child(1){
               color:#336699;
               }
               .ct801 a:hover:nth-child(1){
               opacity:0.7;
               }

               .ct801 a:link:nth-child(2){
               color:#cc3399 ;
               }
                .ct801 a:visited:nth-child(2){
               color:#cc3399 ;
               }
               .ct801 a:hover:nth-child(2){
               opacity:0.7;
               }

/*************/
/* div-Grid */
/*************/
#wrappr{
	bottom: 0;
	position: absolute;
	overflow: none;
	max-width:1680px;
	-webkit-overflow-scrolling: touch;
	width: 99.7%;
	height: 100%;
	bottom: 0;
	z-index: 80;

}
#halign {
	position:relative;
	margin:auto;
	width:93%;
	max-width:1680px;
 	margin-top:2%;
	z-index: 1;

}
.hdtmpl3{
	background-color:#ccc;
}

.wprgh5{
	position:relative;
	float:right;
	width:80%;
	/*background-color:lime;*/
	z-index:  83; 
}
.wptop1{
	position:absolute;
	width:100%;
	height:20%;
	min-height:120px;
	max-height:207px;
	z-index:  86;
	background: rgba(53, 90, 167, .5);
	border-bottom: 1px solid rgba(255, 255, 255, .8);   
}
.hmnu{
	position:absolute;
	bottom:0;
	right:0;
	display: -webkit-flex;
	display: flex;
	justify-content: left;
	width:72%;
	padding-right:6%;
	padding-left:12%;
	height:22px;
	background: rgba(0, 0, 0, .4);
	color:#fff;
	z-index:95;
}

.wpmeteo{
	position:relative;
	top:65%;
	width:20%;
	text-align:center;
	height:auto;
	z-index:78;

}
.wpbot{
	position:relative;
	margin-top:-39px;
	width:100%;
	height:32px;
	z-index:  85;
	background: rgba(53, 90, 167, .6);
	border-top: 1px solid rgba(255, 255, 255, .8);

}
.meteo3{
	display:none;
}

.wpborder{
	position:absolute;
	left:22.1%;
	margin-top:2%;
	width:3px;
	height:80%;
	z-index:95;
	opacity:0.6;
	z-index:67;
	
}

.clear{
	clear:both;
}
.okgo{
  text-align:center;
  Margin:-24px 0 24px 0;
}
.okgo img{
   width:50%;
   height: auto;
   max-width:111px;
}
.okgo img:hover{
    opacity:0.7;
}

/*************/
/* hmnu spans 
etc */
/*************/

.hmnu a:link, .hmnu a:visited{
	color:#D9D9D9;
	display:inline-block;
	font-size: 0.90em;
	line-height: 1.4em;
	text-decoration:none;
	padding: 0 8px 0 8px ;
	border-left: 1px solid rgba(255, 255, 255, .2);
	/*border-right: 1px solid rgba(255, 255, 255, .2);*/
}
.hmnu a:hover{
	color:#fff;
	display:inline-block;
	font-size: 0.90em;
	line-height: 1.4em;
	text-decoration:none;
	padding: 0 8px 0 8px ;
	border-left: 1px solid rgba(255, 255, 255, .2);
	/*border-right: 1px solid rgba(255, 255, 255, .2);*/
	background: rgba(91, 114, 173, .5);
}

.hmnu a:nth-last-child(1){
	border-right: 1px solid rgba(255, 255, 255, .2);
}



/*************/
/* tmplpic */
/*************/

.tmplpic{
	position:relative;
	width:95%;
	height:auto;
	margin-right:10%;	

}
.logopic{
	width:16.2%;
	height:auto;
	padding-top:4.6%;
	padding-left:1.5%;
	
}
.logopic:hover{
	opacity: 0.8;
}
.wappen{
	margin-left:70%;
        margin-top:4.2%;
	width:5.05%;
	height:auto;
	position:relative;
	z-index:90;
	
}
.meteo{
	width:60%;
	max-width: 178px;
	min-width:108px;
	height:auto;	
}
.meteo:hover, .meteo1:hover{
	opacity: 0.6;
}
.meteo1{
	display:none;
}
 .logo12{
                width:280px;
                height:160px;
                float:left;
                background-image:url(../_tmc_daten/Image/logo_sgh_2022.png);
                background-repeat: no-repeat;
                background-attachment: scroll;
                background-position: 100% 70%;
                padding-left:12px;
            }
             .logo12 img{
                width:100%;
                height:70%;
             }



//**************/
/*content*/
/*************/

.content{
	position:relative;
	width: 100%;
	
}
/**************/
/*wpmid*/
/*************/

.wpmid{
	position:relative;
    width:76.89%; 
    height:100%; 
	margin-left:20%;
	margin-right:4.88%;
	margin-top:-6px;
    z-index:97;   
    border-left:4px #E0E0E0 solid;
    z-index:95;
}

.content .wpmid{
	float:left;
	width: 59%;
	height:100%;
	min-height:1400px;
	margin-right:0;
	margin-top:50px;
	border-right: 4px solid rgba(207, 207, 207, .5);
	padding: 0 2% 0 2.5%;
	
}
.wpmid .ctbx22:first-child{
	margin-top:0px;
}
.ctbx22{
	margin-bottom:24px;
}
.ctbx22 h2{

    margin:-24px 0 0 0;
	padding: 0;
	font-size: 1.1em;
	line-height: 1em;
	color:#1C4859;
    font-weight:400;
    padding-bottom:1px;
	
}

.pcmd1{
	float:left;
    display:block;
    width:48.9%;
    height:auto;
    margin: 24px 0 20px 0;
}
.pcmd2{
	float:right;
    display:block;
    width:48.9%;
    height:auto;
    margin: 24px 0 20px 0;
}
.pct102{
	float:left;
    display:block;
    width:142px;
    height:auto;
    margin: -5px 24px 20px 0;

}
.ic{
   margin:0 8px -1px 0;
   width:100%;
   max-width:25px;
   height:auto;

}
.ic1{
   float:left;
   margin:12px 42px 0 0;
   display:block;
   font-size:small;

}
.leg5{
	float:right;
	width:40.9%;
	font-style:italic;
	font-size:small;
	line-height:1.25em;
	margin: 18px 0 18px 0;
	padding:12% 8% 0 0;	
}

/**************/
/*wplft/
/*************/
.wplft{
	position:absolute;
	margin-top:68px;
	width: 20%;
	text-align:right;
}
.wplft ul {
	float: right;
	padding: 0;
	margin: 0;
	width:50%;
	list-style-type: none;
}
.wplft li a:link, .wplft a:visited {
	display:block;
	text-align:left;	
	background-color:#2C3C55;
	margin:0 0 12px 0;
	padding: 2px 0 3px 8px;
	font-size: 0.85em;
	line-height: 1.0em;
	color:#fff;
	opacity:0.8;
	text-decoration:none;
	
}
.wplft li a:hover{
	display:block;
	opacity:0.98;
	}
.f17{
	display:-webkit-flex;
	display:flex;
	width: 100%;
	padding:0 1px 0 1px;

	
}
.f17 span {
    background-color: #566377;
    color:#fff;
    width: 100px;
    border:1px black solid;
    padding:3px 2px 2px 5px;
    font-weight:600;
    font-size: 1.1em;
	line-height: 1.5em;

}
.f17 span:nth-of-type(1){
	 width:120px;
}
.f17 span:nth-of-type(2){
	 width:120px;
}
.f17 span:nth-of-type(3){
	width: 60%;
}
.f17 span:nth-of-type(4){
	width:170px;

}



.fp8{
	display:-webkit-flex;
	display:flex;
	width: 100%;
	padding:0 1px 0 1px;

	
}

.fp8 span {
    background-color: #566377;
    color:#fff;
    width: 100px;
    border:1px black solid;
    padding:3px 2px 2px 5px;
    font-size: 0.95em;
	line-height: 1.5em;

}

.fp8 a {
    color:#fff;
    display:block;
}
.fp8 a:hover {
    color:#e9e9e9;
}


.fp8 span:nth-of-type(1){
	 width:120px;
}
.fp8 span:nth-of-type(2){
	 width:120px;
}
.fp8 span:nth-of-type(3){
	width: 60%;
}
.fp8 span:nth-of-type(4){
	width:170px;
	background-color:#02B906;

}
.fp8 span:nth-of-type(5){
	text-align:center;
    font-size:1.4em;
    background-color:#02B906;

}





/**************/
/*wprght*/
/*************/

.wprght{
	position:relative;
	float:left;
	width: 15.8%;
	height:100%;
	margin-top:48px;
	font-size: 0.85em;
	line-height: 1.0em;

	

}
.al3{
	display:block;
	text-align:left;	
	background-color:#2C3C55;
	margin:0 0 12px 0;
	padding: 2px 0 3px 8px;
	opacity:0.8;
	color:#fff;
	
}
.wprght p {
	margin:-5px 0 32px 8px;
	line-height: 1.4em;
}

.wprght a:link, .wprght a:visited {
	color:#566377;
	font-size: 0.84em;
	font-weight:600;
}
.wprght a:hover {
	color:#000;
}
.al4{

	display:block;
	text-align:left;	
	background-color:#A34940;
	margin:0 0 12px 0;
	padding: 2px 0 3px 8px;
	color:#fff;

}
.wbcam2{
    width:100%;
    height: auto;
}


/**************/
/*gallery*/
/*************/

.ctbx11{
	display: -webkit-flex;
 	display:flex;
 		
}
.hb3{
	
	width:95%;
 	height:auto;
}
/**************/
/*footer*/
/*************/
.footer{
	position:relative;
	border-top: 4px solid rgba(207, 207, 207, .5);
	margin-bottom:36px;
	z-index:99;
}  
.footer .wpmid{
	border-right: 4px solid rgba(207, 207, 207, .5);
	width: 63.50%;	

	text-align:center;
	font-size:small;
	padding-top:12px;
}

/**************/
/*Templategalerie*/
/*************/

#tpgal9 img{
	position: absolute;
	top:0;
	right:0;
	left:0;
}	
#tpgal9 img{
	opacity: 0;
}	
#tpgal9 img:nth-of-type(1) {
    -webkit-animation: fade 30s 3s ease-in-out infinite;
    animation: fade 30s 3s  ease-in-out infinite;
}

#tpgal9 img:nth-of-type(2) {
    -webkit-animation: fade 33s 9s ease-in-out infinite;
    animation: fade 33s 9s ease-in-out infinite;
}

#tpgal9 img:nth-of-type(3) {
    -webkit-animation: fade 33s 15s ease-in-out infinite;
    animation: fade 33s 15s ease-in-out infinite;
}

#tpgal9 img:nth-of-type(4) {
    -webkit-animation: fade 33s 21s ease-in-out infinite;
    animation: fade 33s 21s ease-in-out infinite;
}

#tpgal9 img:nth-of-type(5) {
    -webkit-animation: fade 30s 27s ease-in-out infinite;
    animation: fade 30s 27s ease-in-out infinite;
}

@-webkit-keyframes fade {
    6.66%, 20%          {opacity:1;}
       0%, 26.66%, 100% {opacity:0;}
}

@keyframes fade {
    6.66%, 20%          {opacity:1;}
       0%, 26.66%, 100% {opacity:0;}
}
.pcmd2a{
	padding-top:0.24%;
 	position:relative;
 	width:41.7%;
 	height:auto;
 	margin-bottom:-0.15%;
 	opacity: 0.7;
 	z-index:999;

}
.fade {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }
/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}
/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
@-moz-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
@keyframes fadeOut { from { opacity:1; } to { opacity:0; } }

.fade-out{
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeOut ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeOut ease-in 1;
  animation:fadeOut ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}
        /**********************
        Newlogo patch
        **********************/
        @media screen and (max-width: 1635px) {
        .logo12{
            width:19%;
            background-image:url(../_tmc_daten/Image/logo_sgh_2022_1.png);
            background-size:85%, 90%;
            background-position: 45% 60%;
            }
        .wpmeteo{
        	top:45%;
        	width:22%;
        	margin-left:-18px;
        }

        } /*end*/



/*************/
/* Screen 1240px bis 1400px)*/
/*************/
@media screen and (max-width: 1400px) {
#wrappr {
	/*background-color:aqua;*/
}

}/*end*/
 @media screen and (max-width: 1320px) {
        .logo12{
            width:19%;
            background-image:url(../_tmc_daten/Image/logo_sgh_2022_2.png);
            background-size:85%, 90%;
            background-position: 45% 60%;
            }
        } /*end*/
/*************/
/* Screen 1000px bis 1240px Tablet Landscape und kleinere Desktopscreens (IPAD 1024px)*/
/*************/
@media screen and (max-width: 1240px) {
#wrappr {
	/*background-color:lime;*/
}
.wptop1{
	position:absolute;
	width:100%;
	height:20%;
	min-height:50px;
	max-height:160px;
	z-index:  86;
	background: rgba(53, 90, 167, .5);
	border-bottom: 1px solid rgba(255, 255, 255, .8);   
}

.hmnu a:link, .hmnu a:visited, .hmnu a:hover{
	font-size: 0.80em;
	line-height: 1.5em;
	padding: 0 6px 0 6px ;
}
.wpmeteo{
		top:25%;
	width:22%;
	margin-left:-12px;
}
.logopic{
	width:19%;
	height:auto;
	padding-top:4.6%;
	padding-left:0.5%;
	
}

.content .wpmid{
	width: 57%;	
}
.footer .wpmid{
	border-right: 4px solid rgba(207, 207, 207, .5);
	width: 61.50%;	
}
  .logo12{
            width:19%;
            background-image:url(../_tmc_daten/Image/logo_sgh_2022_3.png));
            background-position: 45% 40%;
            }




}/*end*/
/*************/
/* Screen kleine Tablets  */
/*************/
@media screen and (max-width: 1060px) {
#wrappr {
width: 100%;
	/*background-color:maroon;*/
	overflow-x:hidden;
}

#halign {
	width:100%;
 	margin-top:0;
}
.wpborder{
	left:20%;
	margin-top:0;	
}




}/*end*/

/*************/
/* Screen 500px bis 762px Mobilephone  */
/*************/
@media screen and (max-width: 985px) {
#wrappr {
	/*background-color:yellow;*/
}
     .logo12{
            width:360px;
            height:160px;
            float:left;
            background-image:url(../_tmc_daten/Image/logo_sgh_2022_4.png);
            }

.hmnu{

display:none;
}
#hmb3{
	position:absolute;
        	top:1%;
	        right:6%;
	display:block;
	z-index:99;
}
.hmbnav{
	display:none;
	position:absolute;
	        top:4.5%;
        	right:8%;
	width:60%;
	z-index:999;
	background: rgba(255, 255, 255, .9);

	-webkit-box-shadow: 10px 9px 11px 10px rgba(0,0,0,0.31);
	-moz-box-shadow: 10px 9px 11px 10px rgba(0,0,0,0.31);
	box-shadow: 10px 9px 11px 10px rgba(0,0,0,0.31);
	border-radius: 5px;	
	padding:8%;
}
.hmbnav h1{
    margin:0;
	padding: 0;
	font-size: 1.1em;
	line-height: 1.0em;
	color:#1C4859;
    font-weight:400;
    padding-bottom:8px;
	
}
.hmbnav ul{
	margin-top:0;
	padding-top:0;
	list-style-type: none;
}
.hmbnav li:hover{
	color:#A34940;
	text-decoration:underline;
}
.hmbnav h1:hover{
	color:#A34940;
	text-decoration:underline;
}



.wplft{
	display:none;	
}
.wpborder{
	display:none;	
}
.footer .wpmid{
	border-right: 0;
	width: 99.50%;	
}
.wpmeteo{
	display:none;
}
.wpmid{
	position:relative;
    width:76.89%; 
    height:100%; 
	margin-left:8px;
	margin-right:4.88%;
	margin-top:-6px;
    z-index:97;   
    border-left:0px #E0E0E0 solid;
    z-index:95;
    
}

.content .wpmid{
	float:left;
	width: 70%;
	height:100%;
	min-height:1720px;
	margin-right:0;
	margin-top:50px;
	border-right: 4px solid rgba(207, 207, 207, .5);
	padding: 0 2% 0 2.5%;
	
}

.wprght{
	width: 23.2%;
}

.meteo1{
	display:block;
	width:95%;
	max-width: 178px;
	min-width:108px;
	height:auto;
	margin:0 0 24px 8px;	
}
.wprgh5{
	position:relative;
	float:right;
	width:100%;
	z-index:  83; 
}

.tmplpic{
	position:relative;
	width:100%;
	height:auto;
	margin-right:0;	

}
.wptop1{
	position:absolute;
	width:100%;
	height:13%;
	min-height:120px;
	max-height:207px;
	z-index:  86;
	background: rgba(53, 90, 167, .5);
	border-bottom: 1px solid rgba(255, 255, 255, .8);
     max-height:4.5%;
}

.logopic{
	width:36.2%;
	max-width:259px;
	height:auto;
	padding-top:8.6%;
	padding-left:3.5%;
	
}
.wappen{
	display:none;
	
}

}/*end*/
/*************/
/* Screen 0px bis 500px Mobilephone  */
/*************/
@media screen and (max-width: 601px) {
#wrappr {
	/*background-color:orange;*/
}
 .logo12{
            width:280px;
            height:160px;
            float:left;
            background-image:url(../_tmc_daten/Image/logo_sgh_2022_1.png);
            background-position: 45% 10%;
            }
#hmb3{
	        top:18px;
	        right:3%;


}
.hmbnav{
	display:none;
            top:2%;
        	right:0;
            left:20%;



}
    #hmb3 img{
            width:30px;
            height:auto;
        }
.hmbnav h1{
    padding-bottom:3px;
	
}
.wptop1{
	height:0.5%;
	min-height:71px;
	max-height:195px; 
}

.logopic{
	width:100%;
	max-width:250px;
	height:auto;
	padding-top:4.6%;
	padding-left:0.5%;

}
.content .wpmid{
	float:left;
	width: 90%;
	height:90%;
	min-height:290px;
	margin-right:0;
	margin-top:50px;
	border-right: 0px solid rgba(207, 207, 207, .5);
	padding: 0 2% 0 2.5%;
	
}

.wprght{
	margin-top:0;
	width: 89%;
	padding: 0 2% 0 5%;
}
.meteo1{
	display:none;
}
.meteo3{
	display:block;
	width:100%;
	height:auto;
	margin-bottom:48px;
}
.f17 span {
    font-size: 0.95em;

}


.f17 span:nth-of-type(1){
	 width:140px;
}


.fp8 span {
    font-size: 0.75em;
}

.fp8 span:nth-of-type(1){
	 width:140px;
}
.pct102{
	float:left;
    display:block;
    width:100px;
    height:auto;
    margin: -5px 24px 20px 0;

}

    .footer .wpmid{
	border-right: 0;
	width: 98%;
    text-align:center;

}
.ctbx22 h1{
    font-size: 1.25em;
	line-height: 1.4em;
}

}/*end*/






