Template:Duesseldorf/style

@charset "utf-8";

• {

   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box

} /* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */ html {

   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%

} /* Standard */ body {

   background-color: #e6e6e6;
   font-family: 'Roboto', sans-serif;
   margin: 0px;
   line-height: 1.5;
   font-size: 15px;

} h1, h2, h3, h4, h5, h6 {

   color: #0C9476;

padding: 0px 3px 0px 0px; margin: 0px; } h1 {

   font-size: 36px

} h2 {

   font-size: 30px

} h3 {

   font-size: 24px

} h4 {

   font-size: 20px

} h5 {

   font-size: 18px

} h6 {

   font-size: 16px

} p, a, li {

   padding-left: 3px;
   padding-right: 3px;

} .text-justify{

   text-align: justify;

} .text-left{

   text-align: left;

} .text-right {

   text-align: right;

} img {max-width:100%; height:auto} /* Nützliche Klassen*/ .middle {

   margin: auto;

} .width {

   width: 80%;
   max-width: 1200px;

} .top-padding{ padding-top:15px; } /*Responsive*/ .row { width:100%;

   float: left;

} .row::after {

   content: "";
   clear: both;
   display: table;

} /* For mobile phones: */ [class*="col-"] {

   width: 100%;

float:left; } .colhalf{ width:50%; } @media only screen and (min-width: 600px) {

   /* For tablets: */
   
   .col-m-1 {
       width: 8.33%;
   }
   .col-m-2 {
       width: 16.66%;
   }
   .col-m-3 {
       width: 25%;
   }
   .col-m-4 {
       width: 33.33%;
   }
   .col-m-5 {
       width: 41.66%;
   }
   .col-m-6 {
       width: 50%;
   }
   .col-m-7 {
       width: 58.33%;
   }
   .col-m-8 {
       width: 66.66%;
   }
   .col-m-9 {
       width: 75%;
   }
   .col-m-10 {
       width: 83.33%;
   }
   .col-m-11 {
       width: 91.66%;
   }
   .col-m-12 {
       width: 100%;
   }

} @media only screen and (min-width: 1024px) {

   /* For desktop: */
   
   .col-1 {
       width: 8.33%;
   }
   .col-2 {
       width: 16.66%;
   }
   .col-3 {
       width: 25%;
   }
   .col-4 {
       width: 33.33%;
   }
   .col-5 {
       width: 41.66%;
   }
   .col-6 {
       width: 50%;
   }
   .col-7 {
       width: 58.33%;
   }
   .col-8 {
       width: 66.66%;
   }
   .col-9 {
       width: 75%;
   }
   .col-10 {
       width: 83.33%;
   }
   .col-11 {
       width: 91.66%;
   }
   .col-12 {
       width: 100%;
   }

} /*Header*/ .banner {

   background-color: #e6e6e6;

} .navigation {

   background-color: #e6e6e6;

} ul.topnav {

 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;

} ul.topnav li {float:right;} ul.topnav li a {

 display: inline-block;
 color: grey;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
 transition: 0.3s;
 font-size: 17px;

} ul.topnav li a.active {color: #0C9476;} ul.topnav li a:hover {color: #111;} ul.topnav li.icon {display: none;} @media screen and (max-width:1024px) {

 ul.topnav li:not(:last-child) {display: none;}
 ul.topnav li {float:left;}
 ul.topnav li.icon {
   float: right;
   display: inline-block;
 }

} @media screen and (max-width:1024px) {

 ul.topnav.responsive {position: relative;}
 ul.topnav.responsive li.icon {
   position: absolute;
   right: 0;
   top: 0;
 }
 ul.topnav.responsive li {
   float: none;
   display: inline;
 }
 ul.topnav.responsive li a {
   display: block;
   text-align: left;
 }

} /*Page*/ .border {

   border-radius: 10px;

} .shadow {

   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.2);

} .page {

   background-color: #ffffff;
   margin-bottom: 6%;
   padding-top: 4%;
   padding-bottom: 2%;

overflow-x: auto } .content { } .footer { margin-top: 100px; } /* Footer Gallery */ .sponsor { padding: 5px; } .sponsor img {

   -webkit-filter: grayscale(100%);
   /* Chrome, Safari, Opera */
   
   filter: grayscale(100%);

} .sponsor img:hover {

   -webkit-filter: grayscale(0%);
   filter: none;

} /* Switch Gallery*/ .sg-container {

   max-width: 100%;
   float: left;
   display: list-item;
   list-style-type: none;
   position: relative;

margin:4px;

} .sg-container img {

   max-width: 100%;

border-radius: 10px 10px 10px 10px; -moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; border: 0px solid #000000; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.2); } .img-hidden {

   bottom: 0;
   position: absolute;
   opacity: 0;
   filter: alpha(opacity=0);
   width: 100%;
   z-index: 1000;
   transition: opacity 2s;
   -moz-transition: opacity 2s;
   -webkit-transition: opacity 2s;

} .sg-container.active .img-hidden {

   opacity: 1;
   filter: alpha(opacity=100);
   transition: opacity 2s;
   -moz-transition: opacity 2s;
   -webkit-transition: opacity 2s;

} /* Accordion */ button.accordion {

   background-color: #eee;
   color: #444;
   cursor: pointer;
   padding: 18px;
   width: 100%;
   border: none;
   text-align: left;
   outline: none;
   font-size: 15px;
   transition: 0.4s;

} button.accordion.active, button.accordion:hover {

   background-color: #ddd;

} div.panel {

   padding: 0 18px;
   background-color: white;
   max-height: 0;
   overflow: hidden;
   transition: 0.6s ease-in-out;
   opacity: 0;

} div.panel.show {

   opacity: 1;
   max-height: 500px;  

}