/*
 * =======================================================================================
 *
 *	Theme Name:   Schmid Grafikdesign
 *	Theme URI:    http://www.schmid-grafikdesign.de
 *
 *	Description:  
 *
 *	Author:       INTERPAGEmedia
 *	Author URI:   http://www.interpage.de
 *
 *	Version:      1.0
 *
 *	Date created:	17/09/2018
 *	Last modified:	23/08/2021 (rz)
 *
 * =======================================================================================
 */





/*######################################################################################*/
/*	NORMAL (DESKTOP) VIEW
/*######################################################################################*/


/*======================================================================================*/
/*	General
/*======================================================================================*/

* {
    margin: 0;
    padding: 0;
}

body {
    padding: 0;
    margin: 0px auto;
    background: #fff;

    color: #595957;
    font-size: 100%;
    font-weight: 300;
    font-family: 'Roboto', sans-serif;
}



/*======================================================================================*/
/*	Content formats  
/*======================================================================================*/

/* Headlines */
h1 {color: #F39400; font-size: 2.4rem; font-weight: 300; line-height: 130%; text-transform: uppercase; margin: 0 0 40px 0; font-family: 'VeneerThree', sans-serif; }

h2 {color: #F39400; font-size: 2.4rem; font-weight: 300; line-height: 130%; text-transform: uppercase; margin: 0 0 40px 0; font-family: 'VeneerThree', sans-serif; }

h3 {color: #F39400; font-size: 1.4rem; font-weight: 300; line-height: 130%; text-transform: uppercase; margin: 0 0 20px 0;}

h4 {font-size: 1.4rem; font-weight: 300; line-height: 160%; margin: 0 0 20px 0;}
    .bg-black h4 {color: #fff;}
    .bg-white h4 {color: #000;}

h5, h6 {display: none;}


/* Paragraphs */
p {margin: 0 0 20px 0;}


/* Hyperlinks */
article a:link {color: #F39400; text-decoration: none;}
article a:hover {color: #F39400; text-decoration: none; opacity: 0.6; transition: all ease 0.25s;}
article a:active {color: #F39400; text-decoration: none;}
article a:visited {color: #F39400; text-decoration: none;}


/* Lists */
article ul {
    list-style: square;
    margin: 0 0 20px 16px;
}

article ol {
    margin: 0 0 20px 16px;
}

article ul ol,
article ol ul,
article ul ul,
article ol ol {
    margin: 10px 0 10px 30px;
}

article li {
    margin: 0 0 10px 0;
}


/* Tables */
table {
    margin: 0;
    padding: 0;
    border-collapse: collapse;
}

    tr {vertical-align: middle;}
    
        td {padding: 0;}


/* Horizont ruler */
hr {
    border: 0;
    padding: 0;
    height: 1px;
    margin: 40px 0 40px 0;
}

.bg-white hr {
    border-bottom: 1px solid #000;
}

.bg-black hr {
    border-bottom: 1px solid #fff;
}


/* Text selection */
::selection {background: #F39400; color: #fff;}
::-moz-selection { background: #F39400; color: #fff;}


/* Image links */
a img {border: none;}


/* Images align */
img.alignleft {
    float: left;
    margin: 0 25px 25px 0;
}

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

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


/* Images size ratio */
img.size-full,
img.size-large {
    width: 100%;
    height: auto;
}

img.size-medium {
    width: 50%;
    height: auto;
}

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

img.size-icon {
    width: 50px;
    height: auto;
    display: block;
}

img.size-icon-black {
    width: auto;
    height: 45px;
	margin: 5px auto;
    display: block;
}

img.size-icon-book {
    width: auto;
    height: 50px;
    display: block;
}

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


/* Störer "Handmade" */

.stoerer-handmade {
    position: absolute;
    right: 0;
    z-index: 10;
    width: 300px;
    height: 300px;
    margin: -30px 0 0 0;
    background: url(img/icons/handmade.svg) no-repeat;
    background-size: 300px 300px;
}

.stoerer-handmade-kontakt {
    position: absolute;
    right: 10%;
    width: 200px;
    height: 200px;
    background: url(img/icons/handmade.svg) no-repeat;
    background-size: 200px 200px;
}



/*======================================================================================*/
/*	Forms
/*======================================================================================*/

form {
    margin: 0;
    padding: 0;    
}

    fieldset {
        margin: 0;
        padding: 0;
        border: none;
    }
    
        legend {display: none;}
        
        label  {display: block;}
        
        
        /* Input fields */
        select,
        textarea,
        input[type=tel],
        input[type=text],
        input[type=email],
        input[type=password] {
            
        }
        
        select {}
        
        textarea {}

        input[type=radio],
        input[type=checkbox] {
            
        }        
        
        select:focus,
        textarea:focus,
        input[type=tel]:focus,
        input[type=text]:focus,
        input[type=email]:focus,
        input[type=password]:focus {
            
        }
        
        /* Buttons */
        input[type=submit],
        button[type=submit] {
            
        }
        
        input[type=submit]:hover,
        button[type=submit]:hover {
            
        }
        
        input[type=submit]:active,
        button[type=submit]:active {
            
        }



/*======================================================================================*/
/*	Site Structure
/*======================================================================================*/

/*  Header Area ------------------------------------------------------------------------*/

header {
    position: fixed;
    width: 100%;
    height: 80px;
    z-index: 100;

    background: #000000; /* Old browsers */
    background: -moz-linear-gradient(left, #000000 40%, #ffffff 40%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #000000 40%,#ffffff 40%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #000000 40%,#ffffff 40%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}

    #header-content {
        position: relative;
        width: 90%;
        height: auto;
        max-width: 1200px;
        margin: 0 auto 0 auto;

        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-between;
    }

        #logo {
            width: 100%;
            height: auto;
            max-width: 300px;
            margin: 20px 0 0 0;
        }

            #logo img {
                width: 100%;
                height: auto;
                display: block;
            }

        .open-menu {
            display: none;
        }

        nav#main-menu {
            width: auto;
            margin: 30px 0 0 0;
            display: inline-block;
        }

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

                nav#main-menu ul li {
                    float: left;
                }

                    nav#main-menu ul li a {
                        float: left;
                        display: block;
                        margin: 0 0 0 20px;

                        color: #595957;
                        font-size: 1.0rem;
                        font-weight: 300;
                        text-transform: uppercase;
                        text-decoration: none;
                    }

                    nav#main-menu ul li a:hover {
                        color: #F39400;
                        transition: all ease 0.3s;
                    }

                    nav#main-menu ul li.current > a {
                        color: #F39400;
                    }

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

    #header-space {
        position: relative;
        width: 100%;
        height: 80px;
    }


/*  Cover Image Area -------------------------------------------------------------------*/

section#cover-images {
    position: relative;
    width: 100%;
    height: auto;
}

    section#cover-images img {
        position: relative;
        width: 100%;
        height: auto;
        display: block;
        min-height: 180px;
        object-fit: cover;
    }

    #cover-txt {
        position: absolute;
        top: -15px;
        left: 20%;
        width: 30%;
        height: 100%;
        display: table;

        color: #000;
        font-size: 3.0rem;
        font-family: 'lobster', sans-serif;
    }

        #cover-txt span {
            display: table-cell;
            vertical-align: middle;
        }

    #cover-splash {
        position: relative;
        bottom: 0;
        width: 800px;
        height: 160px;
        margin: -160px 0 0 0;
        background: url(img/splash-black-bottom.png) no-repeat;
        background-size: 800px 160px;
    }

    #cover-splash.white {
        background: url(img/splash-white-bottom-left.png) no-repeat;
        background-size: 800px 160px;
    }


/*  Main Content Area ------------------------------------------------------------------*/

section.content {
    position: relative;
    width: 100%;
    height: auto;
}

.bg-white {background: #fff;}

.bg-black {background: #000;}

.bg-white.splash-bottom {
    background: url(img/splash-black-bottom.png) #fff no-repeat;
    background-size: 800px 160px;
    background-position: bottom left;
}

.bg-black.splash-top {
    background: url(img/splash-white-top.png) #000 no-repeat;
    background-size: 1200px 180px;
    background-position: top center;    
}

.bg-black.splash-bottom {
    background: url(img/splash-white-bottom.png) #000 no-repeat;
    background-size: 800px 180px;
    background-position: bottom right;    
}

    article {
        position: relative;
        width: 90%;
        height: auto;
        max-width: 1200px;
        margin: 0 auto 0 auto;
        padding: 120px 0 120px 0;

        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-between;

        font-size: 1.1rem;
        font-weight: 300;
        line-height: 160%;
        text-align: center;
    }

    .bg-black article {
        color: #fff;
    }

    .bg-black.splash-top article {
        padding: 220px 0 120px 0;
    }

        .full {
            flex-basis: 100%;
            margin: 0 0 20px 0;
        }

        .half {
            flex-basis: 48.75%; /* 585px */
            margin: 0 0 20px 0;
        }

        .third {
            flex-basis: 31.666%; /* 380px */
            margin: 0 0 20px 0;
        }

        .quarter {
            flex-basis: 23.75%; /* 285px */
            margin: 0 0 20px 0;
        }

            article img {
                margin: 0 auto 0 auto;
            }


    /* Accordion */

    .accordion {
        margin: -60px 0 0 0;
    }

    .accord-header {
        margin: 0;
        padding: 10px 0 35px 0;
        width: 100%;
        border: none;
        background: none;
        cursor: pointer;
        background: url(img/arrow-down.png) no-repeat;
        background-position: bottom center;
        background-size: 32px 32px;

        color: #fff;
        font-size: 1.4rem;
        font-weight: 300;
        text-align: center;
        text-transform: uppercase;
        font-family: 'Roboto', sans-serif;
    }
    
    .active, .accord-header:hover {
        color: #F39400;
        transition: all ease 0.3s;
    }
    
    .active {
        color: #F39400;
    }
    
    .accord-content {
        display: none;
    }  
    
    
    /* Slider */

    .events {
        list-style: none;
    }
      
    .callbacks_container {
        margin-bottom: 10px;
        position: relative;
        float: left;
        width: 100%;
    }
      
    .callbacks {
        position: relative;
        list-style: none;
        overflow: hidden;
        width: 100%;
        padding: 0;
        margin: 0;
    }
      
    .callbacks li {
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;
    }
      
    .callbacks img {
        display: block;
        position: relative;
        z-index: 1;
        height: auto;
        width: 100%;
        border: 0;
    }
      
    .callbacks .caption {
        display: block;
        position: absolute;
        z-index: 2;
        font-size: 20px;
        text-shadow: none;
        color: #fff;
        background: #000;
        background: rgba(0,0,0, .8);
        left: 0;
        right: 0;
        bottom: 0;
        padding: 10px 20px;
        margin: 0;
        max-width: none;
    }
      
    .callbacks_nav {
        position: absolute;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        top: 52%;
        left: 0;
        opacity: 0.7;
        z-index: 3;
        text-indent: -9999px;
        overflow: hidden;
        text-decoration: none;
        height: 61px;
        width: 38px;
        background: transparent url("img/slider-arrows.gif") no-repeat left top;
        margin-top: -45px;
    }
      
    .callbacks_nav:active {
        opacity: 1.0;
    }
      
    .callbacks_nav.next {
        left: auto;
        background-position: right top;
        right: 0;
    }    


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

footer {
    position: relative;
    width: 100%;
    height: auto;
    background: #000;
}

    #footer-content {
        position: relative;
        width: 90%;
        height: auto;
        max-width: 1200px;
        margin: 0 auto 0 auto;
        padding: 60px 0 60px 0;

        color: #fff;
        font-size: 1.0rem;
        font-weight: 300;
        text-align: center;
    }

        nav#footer-menu {
            width: 100%;
            height: auto;            
        }

            nav#footer-menu ul {
                width: 100%;
                list-style: none;
            }

                nav#footer-menu ul li {
                    display: inline;
                }

                    nav#footer-menu ul li a {
                        display: inline-block;
                        padding: 0 20px 0 20px;

                        color: #fff;
                        font-size: 1.0rem;
                        text-decoration: none;
                        text-transform: uppercase;
                    }

                    nav#footer-menu ul li a:hover {
                        color: #F39400;
                        transition: all ease 0.3s;
                    }

                    nav#footer-menu ul li.current > a {
                        color: #F39400;
                    }




/*######################################################################################*/
/*	BREAKPOINT (@ 1400 Pixel)
/*######################################################################################*/

@media only screen and (max-width: 1400px) { 
    
/*  Header Area ------------------------------------------------------------------------*/



/*  Cover Images -----------------------------------------------------------------------*/

#cover-splash {
    width: 400px;
    height: 80px;
    margin: -80px 0 0 0;
    background-size: 400px 80px;
}


/*  Main Content Area ------------------------------------------------------------------*/

.bg-white.splash-bottom {
    background-size: 400px 80px;
    background-position: bottom left;
}

.bg-black.splash-top {
    background-size: 400px 60px;
    background-position: top center;    
}

.bg-black.splash-bottom {
    background-size: 400px 90px;
    background-position: bottom right;    
}

    .bg-black.splash-top article {
        padding: 100px 0 100px 0;
    }


/*  Footer Area ------------------------------------------------------------------------*/   
    
} /* <--- END MEDIA */




/*######################################################################################*/
/*	BREAKPOINT (@ 1200 Pixel)
/*######################################################################################*/

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

.stoerer-handmade {
    width: 150px;
    height: 150px;
    margin: 25px 0 0 0;
    background-size: 150px 150px;
}

    
/*  Header Area ------------------------------------------------------------------------*/

header {
    height: 60px;
    background: #000000; /* Old browsers */
    background: -moz-linear-gradient(left, #000000 75%, #ffffff 75%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #000000 75%,#ffffff 75%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #000000 75%,#ffffff 75%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}

    #header-content {
        width: 100%;
    }

        #logo {
            margin: 10px 0 0 5%;
        }

        .open-menu {
            width: 24px;
            height: 24px;
            display: block;
            cursor: pointer;
            margin: 20px 5% 0 0;
            background: url(img/icon-menu.png) no-repeat;
            background-size: 24px 24px;
        }

        nav#main-menu {
            position: absolute;
            top: 61px;
            margin: 0;
            left: -100%; 
            width: 75%;
            background: #fff;   
        }

            /* 1st Level */
            nav#main-menu ul {
                width: 100%;
            }

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

                    nav#main-menu ul li a {
                        width: 90%;
                        margin: 0;
                        background: #F39400;
                        padding: 14px 5% 14px 5%;
                        border-bottom: 1px solid #fff;

                        color: #fff;
                    }

                    nav#main-menu ul li:last-child a {
                        border-bottom: none;
                    }

                    nav#main-menu ul li a:hover {
                        color: #fff;
                    }

                    nav#main-menu ul li.current > a {
                        color: #fff;
                    }

                    nav#main-menu ul li a.has-sub:after {
                        position: relative;
                        float: right;
                        width: 24px;
                        height: 24px;
                        content: "";
                        margin: -5px 0 0 0;
                        background: url(img/arrow-down.png) no-repeat;
                        background-size: 24px 24px;
                    }                    

            /* 2nd Level */
            nav#main-menu ul li ul {
                border-bottom: 1px solid #fff;
            }

                nav#main-menu ul li ul li a {
                    width: 88%;
                    font-size: 0.9rem;
                    padding: 12px 5% 12px 7%;
                }

#header-space {
    height: 60px;
}


/*  Cover Images -----------------------------------------------------------------------*/

#cover-txt {
    font-size: 2.0rem;
}


/*  Main Content Area ------------------------------------------------------------------*/

article {
    padding: 80px 0 80px 0;
}   

.bg-black.splash-top article {
    padding: 100px 0 80px 0;
}


/* Störer "Handmade" */

.stoerer-handmade-kontakt {
    width: 100px;
    height: 100px;
    background-size: 100px 100px;
}
    
} /* <--- END MEDIA */



/*######################################################################################*/
/*	BREAKPOINT (@ 800 Pixel)
/*######################################################################################*/

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

img.size-icon {
    width: 64px;
}

/*  Cover Images -----------------------------------------------------------------------*/

#cover-txt {
    left: 5%;
    width: 40%;
    font-size: 1.5rem;
}
   

/*  Main Content Area ------------------------------------------------------------------*/

article {
    font-size: 1.0rem;
}

.half {
    flex-basis: 100%;
}

.third {
    flex-basis: 100%;
}

.quarter {
    flex-basis: 48%;
}


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

nav#footer-menu ul li {
    width: 100%;
    display: block;
}

    nav#footer-menu ul li a {
        width: 100%;
        padding: 0;
        display: block;
        margin: 0 0 10px 0;
    }

    nav#footer-menu ul li:last-child a {
        margin: 0;
    }
    
} /* <--- END MEDIA */




/*######################################################################################*/
/*	BREAKPOINT (@ 600 Pixel)
/*######################################################################################*/

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

h1, h2 {
    font-size: 1.6rem;
}

h3 {
    font-size: 1.0rem;
}

h4 {
    font-size: 1.2rem;
}

.stoerer-handmade {
    right: calc(50% - 50px);
    width: 100px;
    height: 100px;
    margin: -20px 0 0 0;
    background-size: 100px 100px;
}
    
/*  Header Area ------------------------------------------------------------------------*/

#logo {
    max-width: 180px;
    margin: 18px 0 0 5%;
}  


/*  Cover Images -----------------------------------------------------------------------*/

#cover-splash {
    display: none;
}


/*  Main Content Area ------------------------------------------------------------------*/

article {
    padding: 40px 0 40px 0;
}


.stoerer-handmade-kontakt {
    right: 0;
    margin: -170px 0 0 0;
}
    
} /* <--- END MEDIA */