/*
 * =======================================================================================
 *
 *	Theme Name:   INDOORDRIVE Feldafing
 *	Theme URI:    http://www.indoordrive.de
 *
 *	Description:  INDOORDRIVE - Indoorgolf in Feldafing am Starnberger See.
 *
 *	Author:       INTERPAGEmedia
 *	Author URI:   http://www.interpage.de
 *
 *	Version:      1.0
 *
 *	Date created:	03/06/2020
 *	Last modified:	05/06/2020
 *
 * =======================================================================================
 */





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


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

* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;

    color: #666;
    font-size: 100%;
    font-weight: 300;
    font-family: 'Open Sans',sans-serif;
}

body {
    padding: 0;
    height: 100%;
    margin: 0px auto;
    background: #fff;
}



/* Content Lazy Loading*/

@keyframes starting {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

#cover-content,
#page-title article,
.main-content article{
    animation-name: starting;
    animation-duration: 1.2s;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}


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

/* Headlines */
h1 {
    color: #EB681C;
    font-size: 48px;
    font-weight: 300;
    line-height: 130%;
    margin: 0;
}

    h1 b, h1 strong {
        font-weight: 800;
    }

h2 {
    color: #EB681C;
    font-size: 36px;
    font-weight: 300;
    line-height: 130%;
    margin: 0 0 30px 0;
}

h3 {
    color: #EB681C;
    font-size: 24px;
    font-weight: 300;
    line-height: 130%;
    margin: 0 0 15px 0;
}

h4, h5, h6 {
    color: #666;
    font-size: 22px;
    font-weight: 700;
    font-style: italic;
    font-family: 'Noto Serif', sans-serif;
    margin: 0 0 15px 0;
}

    h1 + h4,
    h1 + h5,
    h1 + h6 {
        margin: 0;
    }


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


/* Bold Font */
b,strong {font-weight: 700;}


/* Text aligns */
.text-left {text-align: left;}
.text-center {text-align: center;}
.text-right {text-align: right;}


/* Hyperlinks */
article a:link {color: #EB681C; text-decoration: none;}
article a:hover {color: #EB681C; text-decoration: underline;}
article a:active {color: #EB681C; text-decoration: underline;}
article a:visited {color: #EB681C; text-decoration: none;}

a.button {
    transition: all ease 0.3s;
    background: #EB681C;
    display: inline-block;
    padding: 10px 20px 10px 20px;

    color: #fff !important;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;

    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);    
}

a.button:hover {
    opacity: 0.75;
    text-decoration: none;
    transition: all ease 0.3s;
}


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

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

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;
    border-bottom: 5px solid #f6f6f6;
}


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


/* Image links */
a img {
    border: none;
    transition: all ease 0.4s;
}

a img:hover {
    opacity: 0.75;
    transition: all ease 0.4s;
}


/* Images align */

.wp-caption {
    display: table-cell;
    width: auto !important;
}

img.alignleft,
.wp-caption.alignleft {
    float: left;
    margin: 0 25px 25px 0;
}

img.alignright,
.wp-caption.alignright {
    float: right;
    margin: 0 0 25px 25px;
}

img.aligncenter,
.wp-caption.aligncenter {
    margin: auto;
    display: block;
}


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

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

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

.wp-caption img {
    width: 100%;
    height: auto;
    display: block;
}


/* Image Captions */

.wp-caption .wp-caption-text {
    width: 100%;
}



/*======================================================================================*/
/*	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=date],
        input[type=email],
        input[type=password] {
            border: none;
            width: calc(94% - 2px);
            padding: 12px 3% 12px 3%;
            background: #f6f6f6;
            border: 1px solid #fff;
            outline: none; /* Kein Rahmen bei klick (Chrome) */

            color: #666;
            font-size: 16px;
            font-weight: 300;
            font-family: 'Open Sans',sans-serif;
        }

        .bg-grey select,
        .bg-grey textarea,
        .bg-grey input[type=tel],
        .bg-grey input[type=text],
        .bg-grey input[type=date],
        .bg-grey input[type=email],
        .bg-grey input[type=password] {
            background: #fff;
        }
        
        select {
            width: 100%;
        }
        
        textarea {
            height: 150px;
            overflow: auto;
        }

        input[type=radio],
        input[type=checkbox] {
            margin: 0 10px 10px 0;
        }        
        
        select:focus,
        textarea:focus,
        input[type=tel]:focus,
        input[type=text]:focus,
        input[type=date]:focus,
        input[type=email]:focus,
        input[type=password]:focus {
            color: #EB681C;
            border: 1px solid #EB681C;
        }
        
        /* Buttons */
        input[type=submit],
        button[type=submit] {
            border: none;
            cursor: pointer;
            transition: all ease 0.3s;
            background: #EB681C;
            display: inline-block;
            padding: 14px 20px 14px 20px;
        
            color: #fff !important;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 1px;
            text-decoration: none;
            text-transform: uppercase;
        
            -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
            -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
            box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);  
        }
        
        input[type=submit]:hover,
        button[type=submit]:hover {
            opacity: 0.75;
            transition: all ease 0.3s;
        }
        
        input[type=submit]:active,
        button[type=submit]:active {
            outline: none;
        }



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

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


/* Complete fixed header with horizontal Menu (and Dropdown) */

header {
    position: fixed;
    top: 0;
    z-index: 100;
    width: 100%;
    height: 60px;
    border-bottom: 1px solid transparent;
    background: rgba(255, 255, 255, 0.7);
}

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

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

        #logo {
            width: 100%;
            height: auto;
            max-width: 200px;

            -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
            -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
            box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
        }

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

        nav#main-menu {
            width: auto;
        }

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

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

                    nav#main-menu ul li a {
                        width: auto;
                        height: 42px;
                        display: block;
                        margin: 0 0 0 35px;
                        padding: 18px 0 0 0;
                        transition: all ease 0.4s;

                        color: #000;
                        font-size: 16px;
                        font-weight: 500;
                        line-height: 150%;
                        letter-spacing: 1px;
                        text-decoration: none;
                        text-transform: uppercase;
                    }

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

                    nav#main-menu ul li a.has-sub.sub-open:after {
                        background: url(img/menu-arrow.png) no-repeat;
                        -webkit-transform: rotate(180deg);
                        -moz-transform: rotate(180deg);
                        -ms-transform: rotate(180deg);
                        -o-transform: rotate(180deg);
                        transform: rotate(180deg);
                        background-size: 10px 10px;
                    }

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

                    nav#main-menu ul li.current-menu-item > a,
                    nav#main-menu ul li.current-menu-ancestor > a {
                        color: #EB681C;
                    }

            /* 2nd Level */
            @keyframes menu-dd {
                0%   {opacity: 0;}
                100% {opacity: 1;}
            }

            nav#main-menu ul li ul {
                position: absolute;
                top: 60px;
                height: auto;
                width: 200px;
                display: none;
                margin: 0 0 0 15px;
                padding: 5px 0 10px 0;
                background: rgba(255, 255, 255, 0.5);
            }

            nav#main-menu ul li:hover ul {
                display: block;

                animation-name: menu-dd;
                animation-duration: 0.4s;
                animation-iteration-count: 1;
                animation-direction: alternate;
                animation-timing-function: ease-in-out;
                animation-fill-mode: forwards;            
            }

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

                nav#main-menu ul li ul li.overview {
                    display: none;
                }

                    nav#main-menu ul li ul li a {
                        margin: 0;
                        height: auto;
                        padding: 10px 20px 10px 20px;
                    }


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

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

    .parallax-window {
        min-height: 800px;
        background: transparent;
        position: relative;
      }

    #cover-content {
        position: absolute;
        top: 50%;
        width: 100%;
    }

        @keyframes covertext {
            0% {margin: 30px auto 0 auto}
            100% {margin: 0 auto;}
        }

        #cover-txt {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;

            animation-name: covertext;
            animation-duration: 1.2s;
            animation-iteration-count: 1;
            animation-direction: alternate;
            animation-timing-function: ease-in-out;
            animation-fill-mode: forwards;
        }

            #cover-title {
                color: #EB681C;
                font-size: 48px;
                font-weight: 800;
                text-transform: uppercase;
                display: block;
            }

            #cover-subtitle {
                color: #fff;
                font-size: 22px;
                font-weight: 700;
                font-style: italic;
                font-family: 'Noto Serif', sans-serif;
            }

                #cover-subtitle big {
                    font-size: 42px;
                }


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

section#page-title {
    position: relative;
    width: 100%;
    background: #fff;
    margin: 0px auto;
    padding: 300px 0 0 0;
}

section#cover + section#page-title {
    padding: 100px 0 0 0;

    -webkit-box-shadow: 0px -6px 6px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px -6px 6px 0px rgba(0,0,0,0.1);
    box-shadow: 0px -6px 6px 0px rgba(0,0,0,0.1);
}

section.main-content {
    position: relative;
    width: 100%;
    z-index: 10;
    margin: 0px auto;
    padding: 100px 0 50px 0;
}

section#page-title + section.main-content.bg-white {
    padding: 30px 0 50px 0;
}

section.main-content:last-of-type {
    -webkit-box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.1);
}

.bg-white {
    background: #fff;
}

.bg-grey {
    background: #f6f6f6;
}

    article {
        width: 90%;
        height: auto;
        margin: 0px auto;
        max-width: 1200px;

        font-size: 18px;
        line-height: 160%;

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

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

        .half {
            flex-basis: 47.5%;
            margin: 0 0 20px 0;
        }

        .third {
            flex-basis: 30%;
            margin: 0 0 20px 0;
        }


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

aside#pre-footer {
    position: relative;
    z-index: 5;
    width: 100%;
    height: auto;
}

    aside#pre-footer .parallax-window {
        min-height: 600px;
    }

        a.tooltip {
            width: 100%;
            height: 600px;
            display: block;
            text-decoration:none;
            position:relative;
        }

        a.tooltip span {
            display: none;
        }

        a.tooltip:hover span {
            position:fixed;
            display: block;
            padding: 10px 15px 10px 15px;

            overflow:hidden;
            margin: 0px auto;
            background: #EB681C;

            -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
            -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
            box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);

            color: #fff;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
        }


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

footer {
    position: relative;
    bottom: 0;
    z-index: 100;
    width: 100%;
    height: 60px;
    margin: -60px 0 0 0;
    border-top: 1px solid #eee;
    background: rgba(255, 255, 255, 0.5);
}

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

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

        nav#footer-menu {
            width: auto;
            margin: 18px 0 0 0;
        }

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

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

                    nav#footer-menu ul li a {
                        width: auto;
                        display: block;
                        margin: 0 35px 0 0;
                        transition: all ease 0.4s;

                        color: #666;
                        font-size: 14px;
                        font-weight: 800;
                        line-height: 150%;
                        letter-spacing: 1px;
                        text-decoration: none;
                        text-transform: uppercase;
                    }

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

                    nav#footer-menu ul li.current-menu-item > a,
                    nav#footer-menu ul li.current-menu-ancestor > a {
                        color: #EB681C;
                    }

        #footer-logo {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 100%;
            height: auto;
            max-width: 100px;

            -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
            -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
            box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
        }

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




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

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

header {
    background: #fff;

    -webkit-box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.1);
}

    #header-content {
        width: 100%;
    }

    #logo {
        z-index: 10;
        margin: 0 0 0 5%;
        max-width: 100px !important;
    }

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

    #open-menu.is-open {
        margin: 17px 5% 0 0;
        background: url(img/icon-close.png) no-repeat;
        background-size: 24px 24px;
    }

    nav#main-menu {
        position: absolute;
        z-index: 5;
        top: 61px;
        width: auto;
        max-height: 500px;
        width: 100%;
        display: none;
        overflow: auto;
        background: #f6f6f6;
    }

        /* 1st Level */
        nav#main-menu ul {
            position: relative;
            float: none;
        }

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

                nav#main-menu ul li a {
                    margin: 0;
                    width: 90%;
                    height: auto;
                    text-align: right;
                    padding: 14px 5% 14px 5%;
                    border-bottom: 1px solid #eee;

                    font-size: 12px;
                }

                nav#main-menu ul li.current-menu-item > a,
                nav#main-menu ul li.current-menu-ancestor > a {
                    color: #EB681C;
                    background: transparent;
                } 

                nav#main-menu ul li a.has-sub:after {
                    margin: 4px 0 0 4px;
                }

        /* 2nd Level */
        @keyframes menu-dd {
            0%   {opacity: 1;}
            100% {opacity: 1;}
        }

        nav#main-menu ul li ul,
        nav#main-menu ul li:hover ul {
            position: relative;
            top: 0;
            width: 100%;
            display: none;
            opacity: 1 !important;
            background: transparent;
            margin: 0 0 0 0;
        }

            nav#main-menu ul li ul li.overview {
                display: block;
            }

            nav#main-menu ul li ul li a {
                padding: 10px 5% 10px 5%;
            }


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

.parallax-window {
    min-height: 600px;
}


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

section#page-title {
    padding: 150px 0 0 0;
}

section#cover + section#page-title {
    padding: 50px 0 0 0;
}

section.main-content {
    padding: 50px 0 20px 0;
}


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

aside#pre-footer .parallax-window {
    min-height: 400px;
}

    a.tooltip {
        height: 400px;
    }


/*  Footer Area ------------------------------------------------------------------------*/   
    
footer {
    background: #fff;
    -webkit-box-shadow: 0px -6px 5px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px -6px 5px 0px rgba(0,0,0,0.1);
    box-shadow: 0px -6px 5px 0px rgba(0,0,0,0.1);
}

    nav#footer-menu {
        margin: 22px 0 0 0;
    }

    nav#footer-menu ul li a {
        font-size: 12px;
    }

} /* <--- END MEDIA */




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

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

h1 {
    font-size: 40px;
}

h2 {
    font-size: 30px;
}

h3 {
    font-size: 20px
}

h4, h5, h6 {
    font-size: 18px;
}
    
/*  Header Area ------------------------------------------------------------------------*/


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

#cover-title {
    font-size: 30px;
}

#cover-subtitle {
    font-size: 16px;
}

    #cover-subtitle big {
        font-size: 28px;
    }


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

article {
    font-size: 16px;
}

    .half {
        flex-basis: 100%;
    }

    .third {
        flex-basis: 100%;
    }


/*  Footer Area ------------------------------------------------------------------------*/   
  
footer {
    height: auto;
    margin: 0;
    padding: 30px 0 10px 0;
}

    #footer-logo {
        bottom: auto;
    }

    nav#footer-menu {
        position: relative;
        width: 50%;
        margin: 0 0 10px 0;
    }

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

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

} /* <--- END MEDIA */




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

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


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

.parallax-window {
    min-height: 450px;
}

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


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