.form-validate {
  margin: 10%;
}
body {
  font-size: clamp(1rem, 2vw, 1.25rem);
  background-color: #131313;
}
.profile, .registration, .profile-edit {
  margin-left: 5%;
  margin-right:5%;
}
.plg_system_webauthn_login_button{
  display: none;
}
h1 {
  color: #31baf7;
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: bolder;
}
h2 {
  color: #31baf7;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
}
h2 a, h3 a {
  color: #c79a4b;
}
h3 {
  color: #31baf7;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
}
h4 {
  color: #31baf7;
  font-size: clamp(1rem, 2vw, 1.5rem);
  text-decoration: underline;
}
h4 a {
  color:#c79a4b;
}
a {
  color:#c79a4b;
}
button {
  margin-top: 20px;
  margin-bottom:20px;
  padding: 10px;
  border-radius: 20px;
  border-color:#31baf7;
  background-color: #155691;
  color: #fff;
  box-shadow: 2px 2px 2px 0px rgba(255,255,255,0.5);
}
button:hover {
  box-shadow: -2px -2px 2px 0px rgba(255,255,255,0.5);
  transform: translate(2px,2px);
}
.logo {
  display: none;
}
.t3-header {
  margin:0;
  padding:0;
  background-color: #155691;
  width: 100%;
}
.t3-wrapper{  
  background-color: #131313;
  color: #aaaaaa;
}
.t3-copyright {
  display: none;
}
.off-canvas-toggle {
  display: none;
}
.container {
  margin-left: 0;
  margin-right:0;
  width:100%;
  padding: 0;
}
.t3-mainbody {
  padding: 0;
  margin: 0;
}
.t3-content {
  padding:0;
  margin: 0;
}
/*-----------------------------------------------------Navigation-------------------------------------------------*/
.t3-mainnav {
  background-color: #155691;
}
.navbar-default {
  border: none;
  padding-left: 30%;
}
.navbar-nav > .active > a {
  background-color: rgba(220, 220, 220, 0.8) !important;
  color:#333333 !important;
  -webkit-border-bottom-right-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}
.navbar-nav a {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  color: #cccccc !important;
   margin-top: 4px;
  margin-bottom: 4px;
}
.navbar-toggle {
  margin-right: 30px;
  z-index: 2;
}
.buttons img:hover{
 	-webkit-transform: translateX(8px) translateY(6px);
	-moz-transform: translateX(8px) translateY(6px);
	-ms-transform: translateX(8px) translateY(6px);
	-o-transform: translateX(8px) translateY(6px);
	transform:  translateX(8px) translateY(6px);
  filter: brightness(70%);
}
.telefon{
  display: none;
}
/*--------------------------------------------------Sidebar----------------------------------------------------------*/
aside {
  position: fixed;
  width: clamp(35px, 5%, 50px);
  height: auto;
  opacity: 0.6;
  margin-left: 8px;
  border-radius:5px;
  z-index: 1;
}
aside img {
  padding: 8px;
}
aside img:hover{
  animation-name: hover;
  animation-duration: 0.5s;
  animation-fill-mode:forwards;
}
/*------------------------------------------------------Kacheln unten------------------------------------------------------*/
.unten4 img {
  padding: 2%;
}
.unten4 a:hover img{
   animation-name: hover;
   animation-duration: 1s;
   animation-fill-mode:forwards; /*bleibt beim letzten Kayframe stehen*/
}
.unten4 {
  margin: 2% 5%;
  clear: both;
}
/*------------------------------------------------------Inhalt Home--------------------------------------------------------*/
.oben {
  background-image: url("../../../images/headers/hintergrund_oben3.jpg");
  width: 100% !important;
  height: 200px;
  margin-top: -20px;
  padding: 5% 10% 0 0;
  z-index: 0;
}
.csk {
  margin-bottom: 5%;
  animation-name: opacity;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-timing-function:ease-out;/*am Ende langsam*/
}
@keyframes opacity {
  0% {opacity: 1; width: 100%; transform: translateX(0px);}
  25% {opacity: 0.3; width: 90%; transform: translateX(100px);}
  50% {opacity: 1; width: 100%; transform: translateX(0px);}
  100% {opacity: 1; width: 100%; transform: translateX(0px);}
}
.unten {
   background-color: #131313;
   padding: 0 10%; 
   padding-bottom: 10%;
   margin-top: 5%;
   min-height: 600px;
   max-height: 3500px;
   overflow: auto;
}
td {
  width: 50%;
}
td article, td h1 {
  padding-left: 3%;
  padding-right: 3%;
}
td, tr {
  border-top: none !important;
}
tr {
  margin-bottom: 2%;
}
.tabellentext {
  vertical-align: middle !important;
}
.tabellenlinie {
  border-bottom: 1px solid #333333 !important;
}
.tabellenlinie td {
  padding-bottom: 10px;
}
.leist {
  background-color: #232323;
  vertical-align: middle !important;
  padding-left: 2%;
}
.eule {
  padding-left: 3%;
}
.leist li{
  font-size: clamp(1.3rem, 3vw, 2.3rem);
}
.neu a {
  color: #ff0000;
  font-size: 5em;
  font-weight: bolder;
  padding-top: 3%;
}
.neu-text {
  padding-top: 3%;
  margin-bottom: 1%;
}
.neu-alles {
  border: 1px solid #ff0000 !important;
}
.unten1 {
   background-color: #131313;
   padding: 0 10%; 
   margin-bottom: 10%;
   margin-top: 5%;
   min-height: 600px;
   max-height: 1800px;
   overflow: auto;
  
}
.unten2{
 background-color: #131313;
   padding: 10% 10%; 
   margin-bottom: 10%;
   margin-top: 5%;
   min-height: 600px;
   max-height: 1200px;
   overflow: auto;
}
.unten3{
   background-color: #131313;
   padding:0 10% 10% 10%; 
   min-height: 600px;
   max-height: 1200px;
   overflow: auto;
}
.museum {
   background-image: url("../../../images/service/museum_hintergrund.jpg");
   padding: 0 10%;
   min-height: 600px;
   max-height: 1200px;
   overflow: auto;
   background-size: 100%;
   background-repeat: no-repeat;
   background-position: 50% 50%;
   margin-top: 10%
}
.wechsel {
  background-image: url("../../../images/service/aktuelles_rot.png");
  background-size: cover;
}
@keyframes wechsel {
  0% {opacity: 0;}
  50% {opacity: 1;}
  100% {opacity: 0;}
}
.wechsel img {
  animation-name: wechsel;
  animation-duration: 10s;
  animation-timing-function:linear;/*gleichmäßig*/
  animation-iteration-count: infinite;/*ständige Wiederholung*/
}
@keyframes hover {
  from {opacity: 1;transform: translate(0px, 0px);}
  to {opacity: 0.5;transform: translate(5px, -5px);}
 
}
.unten2 img {
 padding: 10px;
}
.parallax{
	background: url("../../../images/service/hintergrundplatine1.jpg") repeat fixed center 90%;
   	background-size: cover;
}
.parallax-inner{
	padding-top: 10%;
	padding-bottom: 10%;
}
/*=====================================================Inhalt Service=============================================*/
.oben1 {
  background-image: url("../../../images/headers/hintergrund_oben3.jpg");
  width: 100% !important;
  height: 200px;
}
.oben1 img {
  margin-left: auto;
  margin-right: auto;
}
.inhalt-service{
  margin: 0 10%;
}
.mein-element img {
  margin-left: 20%;
  margin-bottom: 20px;
}
.mein-element {
   opacity: 0;
   transition: all 1s ease-in-out;
   width: 50%;
   transform: translate(200px, 200px);
}
.mein-element.visible{
  opacity: 1;
  width: 100%;
  transform: translate(0, 0px);
}
.linie {
  margin-top: 50px;
  margin-bottom: 50px;
  display: block;
}
/*=====================================================Inhalt Verkauf=============================================*/
.obenv {
  background-image: url("../../../images/headers/hintergrund_oben3.jpg");
  width: 100% !important;
  height: 200px;
}
.obenv img {
  margin-left: auto;
  margin-right: auto;
}
.inhalt-verkauf {
  margin: 0 10%;
  margin-top: 5%;
}
.inhalt-verkauf img{
  padding:15% 15% 0 15%;
}
.inhalt-verkauf h4 {
  padding-left: 15%;
}
.individuell {
  
}
/*======================================================Inhalt Kurse==============================================*/
.inhalt-kurse{
  margin-top:10%;
  margin-left:10%;
  margin-right:10%;
}

.VHS{
  clear: both;
  margin-top: 10%;
  margin-bottom:10%
}
.VHS img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.kurse {
  margin-top: 20px;
  margin-bottom: 20px;
}
.kurse td, .kurse th {
  border: 2px solid #333;
  padding: 10px;
}
.kurse th {
  color: #31baf7;
}
/*======================================================Inhalt Medien==============================================*/
.obenm {
  background-image: url("../../../images/headers/hintergrund_oben3.jpg");
  width: 100% !important;
  height: 200px;
}
.obenm img {
  margin-left: auto;
  margin-right: auto;
}
.inhalt-medien{
  clear: both;
}
.kreativ ul {
 list-style-type: none;
}
.kreativ{
   background-color: #131313;
   padding: 0 10%; 
   margin-bottom: 10%;
   margin-top: 5%;
   min-height: 400px;
   max-height: 1200px;
   overflow: auto;
}
.kreativ img {
  width: 100%;
  margin-top: 20px;
}
.design {
   background-color: #131313;
   padding: 0 10%; 
   margin-bottom: 10%;
   margin-top: 5%;
   min-height: 600px;
   max-height: 1200px;
   overflow: auto;
}
.druck {
   background-color: #131313;
   padding: 0 10%; 
   margin-bottom: 10%;
   margin-top: 5%;
   min-height: 600px;
   max-height: 2000px;
   overflow: auto;
}
.parallax1{
	background: url("../../../images/medien/hintergrund.jpg") repeat fixed center 90%;
   	background-size: cover;
}
.parallax2{
	background: url("../../../images/medien/hintergrund1.jpg") repeat fixed center 90%;
   	background-size: cover;
}
.parallax3{
	background: url("../../../images/medien/hintergrund3.jpg") repeat fixed center 90%;
   	background-size: cover;
}
.parallax4{
	background: url("../../../images/medien/hintergrund4.jpg") repeat fixed center 90%;
   	background-size: cover;
}
.logoentwicklung img{
  width: 15%;
  height: 15%;
  vertical-align: middle;
  display:table-cell;
  margin-right: 15px;
  margin-top: 15px;
  transition: all 0.3s linear;
}
.logoentwicklung img:hover{
  	transform: translate(0, -100px) scale(1.5);
}
.logoentwicklung, .papiere, .slider{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.papiere img {
  width: 30%;
}
.papiere {
  margin-left: 15%;
  margin-right: 15%;
  margin-top: 20px;
}
.slider {
  margin-top: 50px;
}
.n2-ss-slider .n2-ow{
  margin-bottom: 2px;
}
.buch td, .foto td {
  border-top: none !important;
  padding: 10px;
  word-wrap: break-word;
}
.buch table, .foto table{
  table-layout: fixed;
  width: 100%;
}
.webdesign {
   background-color: #131313;
   padding: 0 10%; 
   margin-bottom: 10%;
   margin-top: 5%;
   min-height: 600px;
   max-height: 1800px;
   overflow: auto;
}
.foto {
   background-color: #131313;
   padding: 0 10%; 
   margin-bottom: 10%;
   margin-top: 5%;
   min-height: 600px;
   max-height: 8000px;
   overflow: auto;
}
.video {
  margin-top: 50px;
}
.katalog {
  height: 300px;
}
/*======================================================tipps=====================================================*/
.obent {
  background-image: url("../../../images/headers/hintergrund_oben3.jpg");
  width: 100% !important;
  height:200px;
}
.obent img {
  margin-left: auto;
  margin-right: auto;
}
.inhalt-tipps{
  margin: 0 10%;
}
.downloads {
  width: 100%;
}
.downloads td {
  padding-top: 20px;
  padding-bottom: 20px;
}
/*======================================================Impressum================================================*/
.inhalt-impressum{
  margin: 0 10%;
}
.kontakt #field5{
  height: 100px;
}
.kontakt #field1, .kontakt #field2, .kontakt #field3, .kontakt #field4, .kontakt #field5 {
  width: 50%;
  border-color: #31baf7;
  color:#aaaaaa;
}
.kontakt #field6 {
  margin-top: 10px;
  margin-left: 0 !important;
}
.captcharefresh1 {
  margin-left: 31%;
}
.visCSStop10 {
   margin-left: 31%!important;
   width:200px!important;
   border-color: #31baf7!important;
}
.kontakt #field7 {
  background-color: #ff0000;
  color: #000000;
  padding: 4px;
}
.kontakt #field8 {
  background-color: #00ff00;
  color: #000000;
  padding: 4px;
}
.visBtnCon {
  text-align: left!important;
  margin-left: 31%;
}
.vis_mandatory {
  margin: 0!important;
  color: #aaaaaa;
}
.kontakt {
  border: solid 1px #31baf7;
  padding: 5px;
}
/*--------------------------------Datenschutz---------------------------------------------------------------------------------*/
.datenschutz {
  margin: 0 10%;
}
/*------------------------------------------------------Kundenlogin---------------------------------------------------------------------------------*/
.kunden{
  margin: 10% 10%;
}
/*-------------------------------------------------------Fehlerseite-------------------------------------------------------------------------------*/
.fehler {
  margin: 10%;
}
/*----------------------------------------------------------kundenlogin--------------------------------------------------------------------------*/

.kunden{
  border: 2px solid #31baf7;
  padding: 3%;
  border-radius: 30px;
}

.login {
  margin: 5% 10% 5% 10%;
}
.login button {
  padding: 10px;
  border: solid 3px #31baf7;
  border-radius: 10px;
}
/*-----------------------------------------------------Registert-------------------------------------------------------------*/
.infos {
  margin: 0 10% 10%;
  display: flex !important;
  justify-content: space-between;
  flex-wrap: wrap;
}
.infos article {
  background-color: #f0f0f0;
  padding: 4%;
  margin-left: 1%;
  margin-top: 10%;
  border: 4px solid #155691;
  border-radius: 10px;
  -webkit-box-shadow: 2px 2px 15px 2px #cccccc; 
box-shadow: 2px 2px 15px 2px #cccccc;
}
.infos article a {
  color: #155691;
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: bolder;
  -webkit-box-shadow: 5px 5px 15px 5px #cccccc; 
	box-shadow: 5px 5px 15px 5px #cccccc;
}
.infos article a:hover {
  text-decoration: none;
}
.infos article:hover {
    -webkit-box-shadow: -2px -2px 15px 2px #cccccc; 
	box-shadow: -2px -2px 15px 2px #cccccc;
  -webkit-transform: translateX(8px) translateY(6px);
	-moz-transform: translateX(8px) translateY(6px);
	-ms-transform: translateX(8px) translateY(6px);
	-o-transform: translateX(8px) translateY(6px);
	transform:  translateX(8px) translateY(6px);
  filter: brightness(70%);
}
.registert {
  background-color:  #155691;
  margin: 0 10% 0 10%;
  padding: 5%;
  border-radius: 30px;
}

/*-----------------------------------------------------Softwareempfehlung----------------------------------------------------*/
.flex{
   display: flex !important;
  justify-content: space-between;
  flex-wrap: wrap;
  background-color: #eeeeee;
  color: #333333;
}
.elemente1 {
  width:300px;
  padding: 20px;
}
.elemente2 {
  width:900px;
  padding: 20px;
 
}
/*---------------------------------------------smartphone--------------------------------------------------------*/
.unterlagen {
   margin: 0 10% 10%; 
  background-color:  #155691;
}
.unterlagen table{
  width: 100%;
}
.unterlagen td{
  padding: 1%;
  border: 1px solid #ddd;
  color: #ddd;
  width: auto !important;
}
.unterlagen th {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  padding: 1%;
  border: 1px solid #ddd;
  color: #ddd;
}
.unterlagen button {
  background-color: #222;
  border-radius: 10px;
  padding: 6px;
  margin-left: 20px;
  margin-right: 30px;
}
.unterlagen article {
  padding: 1%;
  color: #ddd;
}
/*======================================================mobile====================================================
==================================================================================================================*/
@media (max-width:1055px) {
  aside {
    display: none;
  }
  .navbar-header {
    display: block;
  }
  .museum {
    background-repeat: repeat;
  }
  .museum img {
    width: 60%;
    padding-bottom: 10px;
  }
  .katalog {
  height: 100%;
}
  .individuell video {
    width: 100%!important;
  }

}
@media (max-width:750px){
 .parallax{
   background: url("../../../images/service/hintergrund_platine_mobile.jpg") repeat fixed center 100%;
   background-size: contain;
  }
  .oben {
  background-image: url("../../../images/header/hintergrund_oben_mobile.jpg");
  width: 100% !important;
  height: 80px;
  margin-top: -20px;
  padding: 5% 10% 0 0;
}
   .telefon {
    display: block;
    margin-left: 10%;
    margin-top: -10%;
    margin-bottom: 10%;
    font-weight: bolder;
    font-size: 14px;
  }
    .telefon a {
    border: 2px solid #c79a4b;
    padding: 3px;
    border-radius: 10px;
    box-shadow: 2px 2px 4px 1px rgba(0,0,0,0.75);
	-webkit-box-shadow: 2px 2px 4px 1px rgba(0,0,0,0.75);
	-moz-box-shadow: 2px 2px 4px 1px rgba(0,0,0,0.75);
  }
  .logoentwicklung img{
  	width: 30%;
    height: 30%;
  }
  .papiere img {
    width: 40%;
    margin-bottom: 20px;
  }
  .unten {
    margin-top: 0px;
    margin-bottom: 0px;
  }
  .inhalt-service{
  margin: 0 15%;
}
  .inhalt-medien{
    margin: 0 5%;
  }
  .mein-element {
   opacity: 1;
   transition: none;
   width: 100%;
   transform: none;
}
  .mein-element3 {
   opacity: 1;
   transition: none;
   transform: none;
  margin-top: 50px;
  margin-bottom: 50px;
}
  .buch td {
  padding: 2px;
}
  .downloads img {
    width: 50%;
  }
  .downloads td {
    padding-right: 10px;
  }
  .inhalt-tipps, .inhalt-service{
    margin-top: -40%;
  }
  .inhalt-verkauf, .inhalt-kurse, .inhalt-medien {
    margin-top: -30%;
  }
  .obent {
    padding-left: 5%;
  }
  .oben1 {
    padding-left: 10%;
    padding-right: 10%;
  }
}