/*
 * =======================================================================================
 *
 *	Theme Name:   das werkhaus
 *	Theme URI:    http://www.das-werkhaus.de
 *
 *	Description:  WordPress Theme fuer "das werkhaus" in Raubling bei Rosenheim.
 *
 *	Author:       INTERPAGEmedia
 *	Author URI:   http://www.interpage.de
 *
 *	Version:      1.0
 *
 * =======================================================================================
 */





/*######################################################################################*/
/*	NORMAL DESKTOP VIEW
/*######################################################################################*/


/*--------------------------------------------------------------------------------------*/
/*	General
/*--------------------------------------------------------------------------------------*/

* {
    margin: 0;
    padding: 0;
}


body {
    padding: 0;
    margin: 0px auto;
    text-align: center;

    color: #333;
    font-size: 100%;
    font-weight: 400;
    line-height: 150%;
    font-family: 'Slabo 27px', serif;
}



/*--------------------------------------------------------------------------------------*/
/*	Text Formats, Images & Videos
/*--------------------------------------------------------------------------------------*/

/* Headlines */
h1 {color: #000; font-size: 2.4rem; font-weight: 400; font-family: "Interstate Light Condensed"; text-transform: uppercase; line-height: 120%; margin: 0 0 25px 0;}

h2 {color: #000; font-size: 1.8rem; font-weight: 400; font-family: "Interstate Light Condensed"; text-transform: uppercase; line-height: 120%; margin: 0 0 25px 0;}

h3 {color: #000; font-size: 1.4rem; font-weight: 400; font-family: "Interstate Light Condensed"; text-transform: uppercase; line-height: 120%; margin: 0 0 25px 0;}

h4 {color: #000; font-size: 1.1rem; font-weight: 700; line-height: 120%; margin: 0 0 25px 0;}

h5 {color: #000; font-size: 3.2rem; font-weight: 700; font-family: "Interstate Light Condensed"; text-transform: uppercase; line-height: 120%; margin: 0 0 25px 0;}

h6 {display: none;}


/* Absatz */
p {margin: 0 0 25px 0;}


/* Hyperlinks */
section#mainblock a:link {color: #0083b4; text-decoration: none;}
section#mainblock a:hover {color: #0083b4; text-decoration: underline;}
section#mainblock a:active {color: #0083b4; text-decoration: underline;}
section#mainblock a:visited {color: #0083b4; text-decoration: none;}


/* Auflistungen */
section#mainblock ul {
    list-style: disc;
    margin: 0 0 25px 15px;
}

section#mainblock ol {
    margin: 0 0 25px 15px;
}

section#mainblock li {
    margin: 0;
}


/* Horizontale Linie */
hr {
    border: 0;
    padding: 0;
    height: 1px;
    margin: 0 0 25px 0;
    border-bottom: 1px solid #888;
}


/* Textmarkierung */
::selection {background: #888; color: #fff;}
::-moz-selection { background: #888; color: #fff;}


/* verlinktes DIV */
a.div {
    width: 100%;
    height: 100%;
    display: block;
    cursor: pointer;
}

/* verlinktes Bild */
a img {
    border: none;
}

/* Thumbnail Bilder */
img.wp-post-image {
    width: 100%;
    height: auto;
}


/* Bild-Ausrichtungen */

img.alignleft {
    float: left;
    margin: 0 25px 25px 0;
}

img.alignright {
    float: right;
    margin: 0 0 25px 25px;
}

img.aligncenter {
    margin: auto;
    display: block;
}


/* ### Bild-Gr��enverh�ltnisse ### */

/* Bei voller Inhaltsbreite */

article#voll img.size-full,
article#voll img.size-large {
    width: 100%;
    height: auto;
}

article#voll img.size-medium {
    width: 65.44%;
    height: auto;
}

article#voll img.size-thumbnail {
    width: 30.9%;
    height: auto;
}


/* Bei 2/3 Inhaltsbreite */

article#zweidrittel img.size-full,
article#zweidrittel img.size-large,
article#zweidrittel img.size-medium {
    width: 100%;
    height: auto;
}

article#zweidrittel img.size-thumbnail {
    width: 47.222%;
    height: auto;
}


/* Bei 1/3 Inhaltsbreite */

aside img.size-full,
aside img.size-large,
aside img.size-medium,
aside img.size-thumbnail {
    width: 100%;
    height: auto;
}



/* Bilder-Galerie */

.gallery {
    width: 103.636%;
}

    .gallery dl {
        float: left;
        width: 29.65%;
        height: auto;
        margin: 0 3.636% 40px 0;
    }

        .gallery dl img {
            width: 100%;
            height: auto;
            display: block;
        }



/* Videos responsive einbinden */

.video {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
    margin: 0 0 25px 0;
}

    .video iframe {
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
    }



/*--------------------------------------------------------------------------------------*/
/*	Forms
/*--------------------------------------------------------------------------------------*/

fieldset {
    margin: 0;
    padding: 0;
    border: none;
}

    legend {display: none;}

    label  {display: block;}


    /* Eingabefelder */
    select,
    textarea,
    input[type=tel],
    input[type=text],
    input[type=email],
    input[type=password] {
        width: 94%;
        padding: 6px 2% 6px 2%;
        border: 1px solid #888;

        color: #000;
        font-size: 1.1rem;
        font-weight: 400;
        font-family: "Interstate Light Condensed";
    }

    select {}

    textarea {
        height: 150px;
        overflow: auto;
    }

    select:focus,
    textarea:focus,
    input[type=tel]:focus,
    input[type=text]:focus,
    input[type=email]:focus,
    input[type=password]:focus {
        border: 1px solid #000;
    }

    /* Schaltfl�chen */
    a.submitbutton,
    input[type=submit],
    button[type=submit] {
        border: none;
        width: 30.9%;
        background: #888;
        cursor: pointer;
        padding: 4px 0 4px 0;

        color: #fff;
        font-size: 1.1rem;
        font-weight: 400;
        font-family: "Interstate Light Condensed";
    }

    a.submitbutton {
        display: block;
        text-align: center;
        text-decoration: none;
    }

    a.submitbutton:hover,
    input[type=submit]:hover,
    button[type=submit]:hover {
        background: #000;
    }

    a.submitbutton:active,
    input[type=submit]:active,
    button[type=submit]:active {
        background: #444;
    }



    /* Contact Form 7 (Plugin) anpassungen */

    .wpcf7-response-output {
        margin: 40px 0 40px 0 !important;
        padding: 0 !important;
    }

    .wpcf7-mail-sent-ok {
        color: green;
        font-weight: 400;
        font-size: 1.4rem;
        line-height: 120%;
        margin: 0 0 0 0;
        border: none !important;
        text-transform: uppercase;
        font-family: "Interstate Light Condensed";

    }

    .wpcf7-validation-errors {
        color: red;
        font-weight: 400;
        font-size: 1.4rem;
        line-height: 120%;
        margin: 0 0 0 0;
        border: none !important;
        text-transform: uppercase;
        font-family: "Interstate Light Condensed";
    }



/*--------------------------------------------------------------------------------------*/
/*	Site Structure
/*--------------------------------------------------------------------------------------*/


/* ########## HEADER AREA ############################################################# */

header {
    position: fixed;
    top: 0;
    width: 100%;
    margin: auto;
    z-index: 100;
    height: 130px;
    background: #fff;
}

    #header-container {
        width: 91.66%;
        margin: 0px auto;
        text-align: left;
        max-width: 1100px;
        display: inline-block;
        padding: 30px 4.17% 20px 4.17%;
        border-bottom: 1px solid #000;
    }


    #logo {
        float: left;
        height: auto;
        width: 100%;
        max-width: 230px;
    }

        #logo img {
            width: 100%;
            height: auto;
        }
        
        
   /* Störer */
    #stoerer {
        position: absolute;
        right: 2%;
        width: 200px;
        height: 200px;
        z-index: 1000;
        margin: 50px 0 0 0; 
    }
    
    #stoerer img {
        width: 100%;
        height: auto;
    }


    /* ########## nav#menu AREA ########## */

    nav#menu {
        float: right;
        margin: 20px 0 0 0;

        color: #000;
        font-size: 1.2rem;
        font-family: "Interstate Light Condensed";
    }


        /* Menu Button */
        a#menubutton {display: none;}


        /* ##### 1st Level ##### */
        nav#menu ul {
            float: right;
            list-style: none;
        }

            nav#menu ul li {
                float: left;
            }

                /* Standard link */
                nav#menu ul li a {
                    float: left;
                    display: block;
                    margin: 0 0 0 20px;
                    padding: 8px 0 0 0;
                    border-top: 1px solid #fff;

                    color: #000;
                    text-decoration: none;
                }

                /* Mouseover Effect */
                nav#menu ul li a:hover {
                    border-top: 1px solid #000;
                }

                /* Active Link */
                nav#menu ul li.current-menu-item a {
                    border-top: 1px solid #000;
                }


        /* ##### 2nd Level ##### */
        nav#menu ul li ul {
            display: none;
        }



/* Abstandhalter nach dem Header */
#spacer {
    position: relative;
    width: 100%;
    height: 130px;
}


/* ########## STARTSLIDER AREA ######################################################## */

#slides {
    z-index: 10;
    margin: -130px 0 0 0;
}

    a.prev {
        position: absolute;
        right: 2%;
        top: 50%;
        left: 1%;
        z-index: 10;
        width: 36px;
        height: 36px;
        display: block;
        background: url(img/icon-arrow-left.png) no-repeat;

        opacity: .8;
        -moz-opacity: .8;
        filter: alpha(opacity=80);
    }

    a.prev:hover {
        background: url(img/icon-arrow-left.png) no-repeat 0 -36px;
    }

    a.next {
        position: absolute;
        right: 2%;
        top: 50%;
        right: 1%;
        z-index: 10;
        width: 36px;
        height: 36px;
        display: block;
        background: url(img/icon-arrow-right.png) no-repeat;

        opacity: .8;
        -moz-opacity: .8;
        filter: alpha(opacity=80);
    }

    a.next:hover {
        background: url(img/icon-arrow-right.png) no-repeat 0 -36px;
    }


    .slides-text {
        position: relative;
        top: 30%;
        width: 91.66%;
        max-width: 1100px;
        margin: 0px auto;
        padding: 30px 4.17% 20px 4.17%;

        color: #fff;
        font-size: 3.2rem;
        text-align: left;
        line-height: 150%;
        text-shadow: 2px 2px 4px #000;
        font-family: "Interstate Light Condensed";
    }

    .slides-pagination {
        display: none;
    }


    .slides-more-link {
        position: absolute;
        right: 1%;
        bottom: 1%;
        height: 36px;
        width: 36px;
        z-index: 50;
        margin: 0 0 0 -18px;
        background: url(img/icon-arrow-down.png) no-repeat;

        opacity: .8;
        -moz-opacity: .8;
        filter: alpha(opacity=80);
    }

    .slides-more-link:hover {
        background: url(img/icon-arrow-down.png) no-repeat 0 -36px;
    }



/* ########## PAGETITLE AREA ###################################################### */

#pagetitle {
    width: 91.66%;
    max-width: 1100px;
    text-align: left;
    display: inline-block;
    padding: 0 4.17% 0 4.17%;
    margin: 40px auto 20px auto;
}

    #pagetitle h1 {
        float: left;
        margin: 0;
    }


    #gewerke-switch {
        float: right;
    }

        .g-prev {
            float: left;
            width: 36px;
            height: 36px;
            display: block;
            color: #0083b4;
            text-decoration: none;
            background: url(img/icon-arrow-left.png) no-repeat;
        }

        .g-prev:hover {
            background: url(img/icon-arrow-left.png) no-repeat 0 -36px;
        }

        .g-next {
            float: left;
            width: 36px;
            height: 36px;
            display: block;
            color: #0083b4;
            margin: 0 0 0 15px;
            text-decoration: none;
            background: url(img/icon-arrow-right.png) no-repeat;
        }

        .g-next:hover {
            background: url(img/icon-arrow-right.png) no-repeat 0 -36px;
        }




/* ########## COVER IMAGE AREA ######################################################## */

#cover-image {
    position: relative;
    width: 100%;
    height: auto;
    margin: 0px auto;
    max-height: 500px;
}

    #cover-image img {
        width: 100%;
        height: auto;
        display: block;
        margin: 0px auto;
        max-width: 1920px;
        min-height: 160px;
        max-height: 500px;
    }


    /* Plugin anpassungen (Simple Responsive Slider) */
    .rslides_container {
        margin: 0 !important;
    }

    .rslides_tabs {
        position: relative;
        z-index: 1000;
        height: 20px;
        margin: -40px 0 30px 0 !important;
    }

    .rslides_nav#menu {
        margin: -15px 0 0 0 !important;
    }



/* ########## MAINBLOCK AREA ########################################################## */

#mainblock {
    position: relative;
    z-index: 1;
    width: 91.66%;
    max-width: 1100px;
    display: inline-block;
    padding: 0 4.17% 0 4.17%;
    margin: 40px auto 0 auto;

    font-size: 1.1rem;
    text-align: left;
}


    /* Formatierung des Grundriss-Bildes */

    #grundriss-links {
        position: absolute;
        z-index: 0;
        width: 390px;
        height: 405px;
        margin: -195px 0 0 -195px;
        background: url(img/grundriss.png);
    }

    #grundriss-rechts {
        position: absolute;
        right: 10%;
        z-index: 0;
        width: 390px;
        height: 405px;
        margin: 50px 0 0 0;
        background: url(img/grundriss.png);
    }



    /* Formatierung des Newsletter Buttons */
    #button-nl {
        position: absolute;
        width: 110px;
        height: 110px;
        z-index: 50;
        margin: 50px 0 0 -20px;
        background: url(img/button-nl.png) no-repeat;
    }



    /* Formatierung der Gewerke-�bersicht */

    #gewerke-container {
        float: left;
        width: 100%
    }

        .gewerk {
            float: left;
            width: 30.9%;
            height: auto;
            cursor: pointer;
            max-height: 340px;
            margin: 0 3.636% 40px 0;
        }

        .gewerk:hover {
            -moz-box-shadow:    inset 0 0 0 1px #888;
            -webkit-box-shadow: inset 0 0 0 1px #888;
            box-shadow:         inset 0 0 0 1px #888;
        }

            .gewerk img {
                width: 100%;
                height: auto;
                display: block;
            }

        .gewerk:nth-child(3n) {
            margin: 0 0 40px 0;
        }



    /* Formatierungen f�r die Gewerke-Detailseite */

    #gewerke-kontaktdaten {
        margin: -20px 0 60px 0;
    }

        #gewerke-logo {
            position: absolute;
            z-index: 50;
            width: 250px;
            height: 150px;
            margin: -180px 0 0 0;
        }

            #gewerke-logo img {
                position: absolute;
                bottom: 0;
                display: block;
            }



    /* Formatierung der normalen Inhaltselemente */

    article#dreiviertel {
        float: left;
        width: 75%;
        padding: 0 25% 0 0;
        margin: 0 0 20px 0;
    }

    article#zweidrittel {
        float: left;
        width: 65.44%;
        margin: 0 0 20px 0;
    }

    article#voll {
        float: left;
        width: 100%;
        margin: 0 0 20px 0;
    }

    aside {
        float: right;
        width: 30.9%;
        margin: 0 0 20px 0;
    }




    /* Formatierung der Aktuelles und Newsletter Seite */

    .newsletter {
        margin: 0 0 30px 0;
        padding: 0 0 5px 0;
        border-bottom: 1px solid #888;
    }

        .newsletter img {
            width: 100%;
            height: auto;
            margin: 0 0 10px 0;
        }


    .aktuelles {
        margin: 0 0 20px 0;
        padding: 0 0 15px 0;
        border-bottom: 1px solid #888;
    }

        .aktuelles img {
            width: 100%;
            height: auto;
            margin: 0 0 10px 0;
        }

        .aktuelles h3 {
            margin: 0 0 5px 0;
        }

        .aktuelles p {
            margin: 0 0 5px 0;
        }



    /* Formatierung der Widget-Bereiche */

    #widgets {
        width: 100%;
        float: left;
        margin: 0 0 40px 0;
    }

        .widget {
            float: left;
            width: 30.9%;
            height: auto;
            margin: 0 3.636% 0 0;
        }

        .widget:nth-child(3n) {
            margin: 0 0 0 0
        }

            .widget h3 {
                font-weight: 400;
            }

            .widget p {
                margin: 0 0 10px 0;
            }




/* ########## UNTERE SPALTE AREA ###################################################### */

#untere-spalte {
    width: 100%;
    text-align: center;
    margin: 0px auto 0 auto;
}

    /* ##### Plugin anpassungen: ##### */


    /* Carousel anpassungen */

    .ug-tile-navigation-wrapper {
        width: 99% !important;
        margin:-188px 0 0 0 !important;
    }

    .ug-button-tile-navigation {
        float: none !important;
        position: absolute !important;
        z-index: 10000 !important;
    }

    .ug-button-tile-navigation.ug-button-tile-left {

        background: url(img/icon-arrow-left.png) no-repeat 0 0 !important;
    }

    .ug-button-tile-navigation.ug-button-tile-left:hover {
        background: url(img/icon-arrow-left.png) no-repeat 0 -36px !important;
    }

    .ug-button-tile-navigation.ug-button-tile-right {
        float: right;
        right: 0 !important;
        z-index: 1000 !important;
        background: url(img/icon-arrow-right.png) no-repeat 0 0 !important;
    }

    .ug-button-tile-navigation.ug-button-tile-right:hover {
        background: url(img/icon-arrow-right.png) no-repeat 0 -36px !important;
    }



    /* Wichtig: F�r die mobile Version ist ein Wert von 200x200 Pixel im Plugin eingestellt. F�r den Desktop muss das wieder aufgehoben werden: */

    .ug-thumb-wrapper,
    .ug-thumb-image {
        width: 340px !important;
        height: 340px !important;
    }



    /* Lightbox anpassungen */

    .ug-lightbox-arrow-left {
        background-image: url(img/icon-arrow-left-lb.png) !important;
    }

    .ug-lightbox-arrow-right {
        background-image: url(img/icon-arrow-right-lb.png) !important;
    }

    .ug-lightbox-button-close {
        width: 90px !important;
        background-image: url(img/icon-close-lb.png) !important;
    }




/* ########## FOOTER AREA ############################################################# */

footer {
    width: 100%;
    background: #888;
    margin: 40px auto 0 auto;

    color: #fff;
    font-size: 1.0rem;
    font-family: "Interstate Light Condensed";
}


    #footer-container {
        width: 91.66%;
        margin: 0px auto;
        max-width: 1100px;
        text-align: left;
        display: inline-block;
        padding: 40px 4.17% 30px 4.17%;
    }

    #footer-container a {
        color: #fff;
        text-decoration: underline;
    }


        #footer-logo {
            float: left;
            height: auto;
            max-width: 300px;
            margin: 0 0 30px 0;
        }

            #footer-logo img {
                width: 100%;
                height: auto;
            }


        #footer-content-box-container {
            float: left;
            width: 100%;
        }

            .footer-content-box {
                float: left;
                width: 18.545%;
                margin: 0 1.818% 30px 0;
            }

            .footer-content-box:nth-child(5n) {
                float: right;
                width: auto;
                margin: 0 0 30px 0;
            }

                #facebook {
                    float: left;
                    width: 48px;
                    height: 48px;
                    margin: 0 10px 0 0;
                    background: url(img/icon-facebook.png) no-repeat;
                }

                #facebook:hover {
                    background: url(img/icon-facebook.png) 0 -48px no-repeat;
                }
                
                #pinterest {
                    float: left;
                    width: 48px;
                    height: 48px;
                    margin: 0 10px 0 0;
                    background: url(img/icon-pinterest.png) no-repeat;
                }

                #pinterest:hover {
                    background: url(img/icon-pinterest.png) 0 -48px no-repeat;
                }

                #google {
                    float: left;
                    width: 48px;
                    height: 48px;
                    background: url(img/icon-google.png) no-repeat;
                }

                #google:hover {
                    background: url(img/icon-google.png) 0 -48px no-repeat;
                }


        #impressum {
            float: left;
            width: 100%;
        }



/*######################################################################################*/
/*	TABLET VIEW (ab 980 Pixel)
/*######################################################################################*/

@media only screen and (max-width: 980px) {


/* ########## HEADER AREA ############################################################# */

header {
    position: relative;
    height: auto;
}

    #header-container {
        border: none;
    }

        nav#menu {
            float: left;
            width: 100%;
            margin: 25px 0 0 0;
        }

            nav#menu ul {
                float: left;
            }

                nav#menu ul li a {
                    margin: 0 20px 0 0;
                }
                
    /* Störer */
    #stoerer {
        right: 10%;
        margin: 110px 0 0 0;
    }                


#spacer {
    display: none;
}



/* ########## PAGETITLE AREA ########################################################## */

#gewerke-switch {
    float: left;
    width: 100%;
    margin: 20px 0 0 0;
}



/* ########## MAINBLOCK AREA ########################################################## */

#grundriss-links,
#grundriss-rechts {
    display: none;
}

#button-nl {
    display: none;
}



/* ########## STARTSLIDER AREA ######################################################## */

#slides {
    margin: 0;
}

    a.prev,
    a.next {
        top: 1%;
    }

    .slides-text {
        top: 20%;
        font-size: 2.4rem;
    }



/* ########## FOOTER AREA ############################################################# */

    .footer-content-box,
    .footer-content-box:nth-child(5n) {
        float: left;
        width: 30.9%;
        margin: 0 3.636% 30px 0;
    }

    .footer-content-box:nth-child(3n) {
        margin: 0 0 30px 0;
    }


} /* <-- END MEDIA -- */




/*######################################################################################*/
/*	MOBILE VIEW (ab 640 Pixel)
/*######################################################################################*/

@media only screen and (max-width: 640px) {


/* ########## IMAGES ################################################################## */

/* Bei voller Inhaltsbreite */

article#voll img.size-medium {
    width: 100%;
    height: auto;
}

article#voll img.size-thumbnail {
    width: 48%;
    height: auto;
}


/* Bei 2/3 Inhaltsbreite */

article#zweidrittel img.size-thumbnail {
    width: 48%;
    height: auto;
}


/* Bei 1/3 Inhaltsbreite */

aside img.size-thumbnail {
    width: 48%;
    height: auto;
}



/* ########## STARTSLIDER AREA ######################################################## */

.slides-text {
    top: 10%;
    font-size: 1.8rem;
}



/* ########## HEADER AREA ############################################################# */


#header-container {
    padding: 75px 4.17% 30px 4.17%;
}

    /* Störer */
    #stoerer {
        right: 15%;
        margin: 50px 0 0 0;
    }


    nav#menu {
        position: absolute;
        top: 0;
        left: 0;
        margin: 0;
        padding: 0;
        width: 100%;
        z-index: 1000;
        background: #000;
    }

        /* Menu Button */

        nav#menu a#menubutton {
            width: 91.66%;
            display: block;
            background: #fff;
            padding: 10px 4.17% 10px 4.17%;
            border-bottom: 1px solid #000;

            color: #000;
            font-weight: 700;
            text-decoration: none;
            text-transform: uppercase;
    	}

        nav#menu a#menubutton:before {
            width: 16px;
            height: 16px;
            content:"";
            margin: 0 10px 0 0;
            display: inline-block;
            background: url(img/icon-menu.png) 0 2px no-repeat;
        }

        /* ##### 1st Level ##### */
        nav#menu ul {
            width: 100%;
            height: auto;
            display: none;
        }

            nav#menu ul li {
                width: 100%;
            }

                /* Standard Link */
                nav#menu ul li a {
                    margin: 0;
                    width: 91.66%;
                    padding: 10px 4.17% 10px 4.17%;
                    border-top: none !important;
                    border-bottom: 1px solid #fff;

                    color: #fff;
                }

                /* Last element in list */
                nav#menu ul li:last-child a {
                    border: none !important;
                }

                /* MouseOver and active link */
                nav#menu ul li a:hover,
                nav#menu ul li.current-menu-item a {
                    background: #0083b4;
                }



/* ########## MAINBLOCK AREA ########################################################## */

    .gewerk {
        width: 48%;
        margin: 0 4% 15px 0 !important;
    }

    .gewerk:nth-child(2n) {
        margin: 0 0 10px 0 !important;
    }

    article#zweidrittel,
    article#dreiviertel,
    article#voll,
    aside {
        float: left;
        padding: 0;
        width: 100%;
    }
    
    article#zweidrittel.news {
        float: right;
    }

    .widget {
        width: 100%;
    }


/* Störer */
    #stoerer {
        display: none;
    }


/* ########## FOOTER AREA ############################################################# */

    .footer-content-box,
    .footer-content-box:nth-child(3n),
    .footer-content-box:nth-child(5n) {
        float: left;
        width: 100%;
        margin: 0 0 30px 0;
    }



} /* <-- END MEDIA -- */




/*######################################################################################*/
/*	MOBILE VIEW (ab 480 Pixel)
/*######################################################################################*/

@media only screen and (max-width: 480px) {

    #logo,
    #footer-logo {
        width: 100%;
        height: auto;
    }


    .ug-tile-navigation-wrapper {
        width: 99% !important;
        margin: -118px 0 0 0 !important;
    }

    .ug-thumb-wrapper,
    .ug-thumb-image {
        width: 200px !important;
        height: 200px !important;
    }
	
	
	/* Störer */
    #stoerer {
        display: none;
    }

} /* <-- END MEDIA -- */