/**************/
/*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*/