/*
 * =======================================================================================
 *
 *	Filename:    	style.css
 *	Website:     	www.sirius-image.com
 *	Author:      	INTERPAGEmedia
 *	Author URL:  	http://www.interpage.de
 *
 *	Date created:	23/11/2017
 *	Last modified:	06/11/2018
 *
 *	Description:	Standard CSS for page layout.
 *
 * =======================================================================================
 */





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


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

/*  Google Font  (Roboto) */
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Bold.woff2') format('woff2'),
        url('fonts/Roboto-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Black.woff2') format('woff2'),
        url('fonts/Roboto-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Italic.woff2') format('woff2'),
        url('fonts/Roboto-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-ThinItalic.woff2') format('woff2'),
        url('fonts/Roboto-ThinItalic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-BoldItalic.woff2') format('woff2'),
        url('fonts/Roboto-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Light.woff2') format('woff2'),
        url('fonts/Roboto-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-BlackItalic.woff2') format('woff2'),
        url('fonts/Roboto-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Regular.woff2') format('woff2'),
        url('fonts/Roboto-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Thin.woff2') format('woff2'),
        url('fonts/Roboto-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-LightItalic.woff2') format('woff2'),
        url('fonts/Roboto-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Medium.woff2') format('woff2'),
        url('fonts/Roboto-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-MediumItalic.woff2') format('woff2'),
        url('fonts/Roboto-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}


* {
    margin: 0;
    padding: 0;
}

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

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



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

/* Headlines */
h1 {color: #FFAC00; font-size: 3.0rem; font-weight: 300; line-height: 130%; margin: 0 0 35px 0;}

h2 {color: #404040; font-size: 2.0rem; font-weight: 300; line-height: 130%;margin: 0 0 25px 0;}
.darkgrey h2 {color: #9E968D; font-weight: 700;} 
.yellow h2 {color: #fff;}
.image h2 {color: #fff;}
.transparent h2 {color: #fff;}

h3 {color: #404040; font-size: 1.2rem; font-weight: 700; line-height: 130%; margin: 0 0 15px 0;}
.darkgrey h3 {color: #9E968D;} 
.yellow h3 {color: #fff;}
.image h3 {color: #fff;}
.transparent h3 {color: #fff;}

h4, h5, h6 {display: none;}


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


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


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

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

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

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


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

    tr {vertical-align: middle;}
    
        td {padding: 10px;}


/* Horizont ruler */
hr {
    border: 0;
    margin: 0;
    padding: 0;
    height: 1px;
    margin: 50px 0 50px 0;
    border-bottom: 1px solid #9E968D;
}


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


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


/* iFrames */
iframe {
    display: block;
}



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

form {
    margin: 0;
    padding: 0;    
}

    fieldset {
        margin: 0;
        padding: 0;
        border: none;
    }
    
        legend {}
        
        label  {}
        
        
        /* Input fields */
        select,
        textarea,
        input[type=tel],
        input[type=text],
        input[type=email],
        input[type=password] {
            
        }
        
        select {}
        
        textarea {}
        
        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;
    z-index: 100;
    width: 100%;
    height: 100px;
    background: rgba(255, 255, 255, 0.75)
}

    #logo {
        position: absolute;
        left: 5%;
        top: 15px;
    }

        #logo img {
            width: auto;
            height: 40px;
            display: block;
        }

    #open-menu {
        display: none;
    }

    nav#main-menu {
        position: absolute;
        right: 5%;
        top: 35px;
        display: inline-block;
    }

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

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

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

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

                    color: rgb(70, 68, 66);
                    font-size: 1.2em;
                    font-weight: 900;
                    text-decoration: none;
                    text-transform: uppercase;
                }

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


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

section#cover-image {
    position: fixed;
    z-index: 10;
    width: 100%;
    height: 100%;
}

    section#cover-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    #cover-txt {
        position: fixed;
        z-index: 20;
        top: 45%;
        width: 90%;
        padding: 0 5% 0 5%;

        color: #fff;
        font-weight: 700;
        font-size: 3.5rem;        
        text-align: center;
       /* text-transform: uppercase; */
        text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.75);
    }


/*  Content Parts ----------------------------------------------------------------------*/

section.content {
    position: relative;
    top: 100%;
    z-index: 50;
    width: 100%;
}

.white {background: #fff;}

.lightgrey {background: #eee;}

.darkgrey {background: #404040; color: #9E968D;}

.yellow {background: #FFAC00; color: #fff;}

.image {
    background: transparent; 
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

    color: #fff;
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.9);
}

.transparent {
    background: transparent; 
    min-height: 550px; 
    color: #fff;
}


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

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

        font-size: 1.2rem;
        font-weight: 400;
        line-height: 160%;
    }

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

        .half {
            flex-basis: 47.9166%; /* 575px */
            margin: 0 0 25px 0;
        }

        .third {
            flex-basis: 30%; /* 360px */
            margin: 0 0 25px 0;
        }

        .fullimg img,
        .full img,
        .half img,
        .third img {
            width: 100%;
            height: auto;
            display: block;
        }


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

footer {
    position: relative;
    top: 100%;
    z-index: 50;
    width: 100%;
    height: 100px;
    background: rgba(0, 0, 0, 0.75)
}

    #copyright {
        position: absolute;
        left: 5%;
        top: 40px;

        color: #9E968D;
        font-size: 1.0rem;
        font-weight: 700;
    }

    nav#footer-menu {
        position: absolute;
        right: 5%;
        top: 40px;
        display: inline-block;
    }

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

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

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

                    color: #9E968D;
                    font-size: 1.0rem;
                    font-weight: 700;
                    text-decoration: none;
                    text-transform: uppercase;
                }

                nav#footer-menu ul li a:hover {
                    color: #FFAC00;
                }




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

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

h1 {font-size: 2.0rem;}

h2 {font-size: 1.5rem;}

h3 {font-size: 1.0rem;}    
    
/*  Header Area ------------------------------------------------------------------------*/

#logo {
    top: 25px;
}

    #logo img {
        height: 50px;
    }

nav#main-menu {
    top: 40px;
}

    nav#main-menu ul li a {
        margin: 0 0 0 20px;
        font-size: 1.0rem;
    }


/*  Content Parts ----------------------------------------------------------------------*/

article {
    font-size: 1.0rem;
}    


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

#cover-txt {
    font-size: 2.0rem;
}
    
} /* <--- END MEDIA */




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

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

#open-menu {
    position: absolute;
    right: 5%;
    top: 30px;
    cursor: pointer;
    display: block;
}

    #open-menu img {
        width: 32px;
        height: 32px;
        display: block;
    }

nav#main-menu {
    top: 0;
    width: 100%;
    left: 0 !important;
    display: none;
    background: #000;
}

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

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

        nav#main-menu ul li a {
            margin: 0;
            width: 90%;            
            padding: 14px 5% 14px 5%;
            border-bottom: 2px solid #222;

            text-align: center;
        }

            nav#main-menu ul li#close-menu a img {
                width: 32px;
                height: 32px;
                display: block;
                margin: 0px auto;
            }


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

#copyright {
    top: 20px;
}

nav#footer-menu {
    top: 55px;
    left: 5% !important;
}

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

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



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

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

/*  Content Parts ----------------------------------------------------------------------*/

.half {
    flex-basis: 100%;
}

.third {
    flex-basis: 100%;
}

} /* <--- END MEDIA */