@media (max-width:480px){

/* Box-sizing */

header, footer, section, div, p, span, figure, a, ul, ol, li, input, form, button, h1, h2, h3, h4, h5, h6, img {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
  
#cont {
width:90%;
margin:0 5% 0 5%;
padding:200px 0 0 0;
}

header {
position: absolute;
top: 0;
left: static;
z-index: 5;
height: 100px;
margin: 0;
padding-top: 0;
vertical-align: bottom !important;
background: #fff;
}

#bar {
position: absolute;
top: 100px;
width: 90%;
left: static;
z-index: 4;
margin: 0 0 100px 0;
}

section {
padding: 0 0 5em 0;
height: auto;
overflow: hidden;
}

footer {
padding: 0.5em 0.5em 2em 0.5em !important;
}
  

/*--------------------------- Header ---------------------------*/
  
/* Logo */

header div.logo {
width: 150px;
}
  
/* Titel */

header div.titel {
display: none;
} 
  
/* Oeffnungszeiten */
  
header div.oez {
display: none;
}

/* Kontakt */
  
header div.kontakt {
display: none;
position: relative;
top: 20px;
left: 20px;
}

/* Hauptmenue */
  
button.dj-mobile-open-btn {
position: absolute;
top: 40px;
right: 40px;
}

div.dj-accordion.nav {
position: absolute;
top: 85px !important;
right: 40px !important;
}

/* --------------------- BAR ------------------------ */

#bar #zz {
display: block;
margin: 0 auto 0 auto;
line-height: 0.5em;
padding:0 0 0.8em 0;
}

  
/* ------------------- Section ---------------------- */

.page-header {
hyphens: auto;
}

/* --- Home --- */
section div.moduletable.vollbild {
width: 100%;
height: auto;
margin: 0;
padding:0;
text-align: center;
}

section div.moduletable.vollbild .custom, section div.moduletable.vollbild p {
width: 100%;
height: 100%;
overflow: hidden;
margin:0;
padding:0;
text-align: center !important;
}

section div.moduletable.vollbild img {
width: auto;
height: 70vh;
overflow: hidden;
margin:auto auto auto -20%;
padding:0;
text-align: center !important; 
}

section div.moduletable.vollbild .custom h2 {
position: relative;
top: -200px;
z-index:2;
width: 100%;
margin: auto 0 auto auto !important;
font-size: 2em;
padding: 0.3em 0 0.3em 0.4em;
background: #ff7518;
text-align: center !important;
}

section div.moduletable.vollbild .custom h2 a {
color: #fff;
text-decoration: none;
}

/* --- KATEGORIELISTE --- */

section div.categories-list div.com-content-categories__item {
width: 100%;
float: left;
height: auto;
margin: 0 0 6% 0;
padding:0;
border: 1px solid #ff7518;
overflow: hidden;
}

div.com-content-categories__item-title-wrapper, div.com-content-categories__item-title {
width: 100%;
height: auto;
margin: 0;
padding:0 auto;
border: 0;
text-align: center;
overflow: hidden;
}

section div.categories-list div.com-content-categories__item div.com-content-categories__item-title a {
width: 100%;
height: 100%;
display: block;
margin: 0;
padding:0.2em 1em 1em 1em;
text-align: center;
border: 0;
font-size: 1.5em;
line-height: 1.2em;
}

div.com-content-categories__item > a {
width: 100%;
height: 100%;
display: block;
padding:1em 1em 0.2em 1em;
}

/* Hauptbeitraege auf Home */

div.moduletable.haupt ul.mod-articles-items.mod-list {
width: 100%;
padding:0;
margin:0;
}

div.moduletable.haupt ul.mod-articles-items.mod-list li {
width: 100%;
margin: 0 0 5% 0 !important;
padding:1em 0 0 0;
background:#ff7518;
}

div.moduletable.haupt ul.mod-articles-items.mod-list h2 {
font-size: 1.5em !important;
margin: 0 auto;
color: #fff;
}

div.moduletable.haupt ul.mod-articles-items.mod-list h2 a {
width: 100%;
height: 100%;
display: block;
margin: 0;
padding:0.2em 1em 1em 1em;
text-align: center;
border: 0;
line-height: 1.2em;
color: #fff;
}

/* Modul Kinder auf HOME */

div.moduletable.kinder p {
width: 100;
height: auto;
overflow: hidden;
padding: 0;
float: none;
}

/* --- BLOG --- */

/* Blog mit override */
  
/* Blog - Kategoriebeschreibung */

.blog div.category-desc {
text-align: left;
margin: 0 0 5em 0;
padding: 0;
height: auto;
overflow-y: hidden;
}

.blog div.category-desc p{
clear: both;
}

.blog div.category-desc figure, .blog div.category-desc img.linksaussen {
width: 100px;
height: auto;
float: left;
margin: 0 20px 10px 0;
padding: 0;
}

.blog div.category-desc figure img {
width: 100%;
height: auto;
margin: 0;
padding: 0;
}

/* Blog-Elemente */

div.com-content-category-blog__items {
clear: both;
width: 100%;
padding: 0;
}

.blog-item {
width: 100%;
height: auto;
margin: 0 0 6% 0;
padding:0;
background: #ff7518;
}

.blog-item .item-content {
display: none;
}

.blog-item h2 a {
color: #fff;
}

.blog-item figure.item-image, .blog-item .item-image a, .blog-item .page-header, .blog-item .page-header h2, .blog-item .page-header h2 a {
width: 100%;
height: auto;
display: block;
margin:0;
}

.blog-item .item-image a {
padding:1em 1em 0.2em 1em;
}

.blog-item .page-header h2 a {
padding:0.2em 1em 1em 1em;
}

/* Blog-Elemente Unterkateogorien */

div.com-content-category-blog__child {
width: 100%;
height: auto;
margin: 0 0 6% 0;
}

/* Blog-Elemente Aktuelles */

div.blog-items.aktuelles .blog-item .item-image {
height: 200px;
}


/* --- Einzelner Beitrag --- */

.item-page div.page-header, div.com-contact div.page-header {
width: 100%;
padding-bottom: 2em;
}

.item-page div.page-header h1, div.com-contact div.page-header h1 {
line-height: 1.0em !important;
}

div.com-content-article__body, div.com-contact__container, div.com-contact__miscinfo {
width: 100%;
text-align: left;
padding-left: 0 !important;
}


/* --- Einzelner Beitrag Aktuelles und Erfolg --- */

div.com-content-article.item-page_aktuelles {
background-image: url('../images/icon_aktuelles_orange.png');
background-repeat: no-repeat;
background-position: left top;
padding-left: 0;
}

div.com-content-article.item-page_erfolg {
background-image: url('../images/icon_erfolg_orange.png');
background-repeat: no-repeat;
background-position: left top;
padding-left: 0;
}

div.com-content-article.item-page_aktuelles .item-image, div.com-content-article.item-page_erfolg .item-image {
width: 100%;
height: auto;
border: 0px solid #ff7518;
padding:100px 0 0 0 !important;
margin: 0 0 1em 0;
}

div.com-content-article.item-page_aktuelles figure.item-image img, div.com-content-article.item-page_erfolg figure.item-image img {
width: 100%;
height: auto;
padding:0 !important;;
margin:0 !important;
border: 0 !important;
}

div.com-content-article.item-page_aktuelles dd.published time {
position: absolute;
right: 5%;
top: 200px;
}

div.com-content-article.item-page_aktuelles div.page-header, div.com-content-article.item-page_erfolg div.page-header {
margin: 0;
padding:0;
}

div.com-content-article.item-page_aktuelles div.page-header h1, div.com-content-article.item-page_erfolg div.page-header h1 {
margin:1.0em 0 0.5em 0;
padding:0;
}

div.com-content-article.item-page_aktuelles nav.pagenavigation, div.com-content-article.item-page_erfolg nav.pagenavigation {
position: absolute;
right: 5%;
top: 230px;
}

/* Beitragslinks */

.item-page div.content-links {
margin:3em 0 0 0;
padding:0;
float: left;
width: 200px;
}

figure.einzelkontakt {
clear: both;
width: 100%;
margin: 0 0 15% 0;
}


/* --- KONTAKTE --- */

div.contact-category_vorstand h1, div.contact-category_lehrkraefte h1, div.contact-category_verwaltung h1, div.contact-category_ehrenamtliche h1 {
width: 100%;
height: 70px;
padding: 20px 0 0 100px;
margin-top: 0;
}

div.contact-category_vorstand h1 {
background-image: url('../images/icon_vorstand_orange.png');
background-repeat: no-repeat;
}

div.contact-category_lehrkraefte h1 {
background-image: url('../images/icon_lehrkraefte_orange.png');
background-repeat: no-repeat;
}

div.contact-category_verwaltung h1 {
background-image: url('../images/icon_verwaltung_orange.png');
background-repeat: no-repeat;
}

div.contact-category_ehrenamtliche h1 {
background-image: url('../images/icon_ehrenamtliche_orange.png');
background-repeat: no-repeat;
}

div.com-contact-category__items {
width: 100%;
margin: 0;
padding:0;
text-align: center;
}

table#contactList tr {
width: 100%;
height: 100%;
padding: 0 0 30px 0 !important;
overflow: hidden;
text-align: center;
}

table#contactList td {
width: 100%;
height: 100%;
padding: 0 auto 30px auto !important;
margin: 0 0 30px 0 !important;
overflow: hidden;
text-align: center;
}

table#contactList tr th.list-title {
width: 100%;
height: 120% !important;
padding: 0 auto 30px auto !important;
margin: 0 0 30px 0 !important;
overflow: hidden;
text-align: center;
font-family: robotolight;
}

table#contactList tr th div.kontaktbild {
width:200px;
height: 250px;
overflow-y: hidden;
margin: 0 auto 0.5em auto;
}

/* Einzelkontakt */

div.com-contact.contact div.com-contact__container, div.com-contact.contact div.com-contact__container > div {
width: 100% !important;
text-align: center !important;
padding: auto !important;
margin: auto !important;
}


/* ------------------- Footer ----------------------- */

footer div.moduletable, footer div.moduletable * {
width: 100%;
height: auto;
overflow-y: hidden;
text-align: center;
}

footer ul.nav {
display: none;
}

  
}