/*
 * =======================================================================================
 *
 *	Theme Name:   Test Theme
 *	Theme URI:    http://www.your-page.de
 *
 *	Description:  Here comes the description of the theme.
 *
 *	Author:       lakeSITE webdesign
 *	Author URI:   http://www.lakesite-webdesign.de
 *
 *	Version:      1.0
 *
 *	Date created:	00/00/2000
 *	Last modified:	00/00/2000
 *
 * =======================================================================================
 */





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


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

* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-padding-top: 100px; /* for fixed headers */
}

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

    color: #2C2E35;
    font-size: 20px;
    font-weight: 300;
    line-height: 140%;
    font-family: 'Hind', sans-serif;
}


/*======================================================================================*/
/*	Fonts  
/*======================================================================================*/

/* hind-300 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Hind';
font-style: normal;
font-weight: 300;
src: url('fonts/hind-v16-latin-300.eot'); /* IE9 Compat Modes */
src: url('fonts/hind-v16-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('fonts/hind-v16-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
        url('fonts/hind-v16-latin-300.woff') format('woff'), /* Modern Browsers */
        url('fonts/hind-v16-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
        url('fonts/hind-v16-latin-300.svg#Hind') format('svg'); /* Legacy iOS */
}
/* hind-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Hind';
font-style: normal;
font-weight: 400;
src: url('fonts/hind-v16-latin-regular.eot'); /* IE9 Compat Modes */
src: url('fonts/hind-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('fonts/hind-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
        url('fonts/hind-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
        url('fonts/hind-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
        url('fonts/hind-v16-latin-regular.svg#Hind') format('svg'); /* Legacy iOS */
}
/* hind-500 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Hind';
font-style: normal;
font-weight: 500;
src: url('fonts/hind-v16-latin-500.eot'); /* IE9 Compat Modes */
src: url('fonts/hind-v16-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('fonts/hind-v16-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
        url('fonts/hind-v16-latin-500.woff') format('woff'), /* Modern Browsers */
        url('fonts/hind-v16-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
        url('fonts/hind-v16-latin-500.svg#Hind') format('svg'); /* Legacy iOS */
}
/* hind-600 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Hind';
font-style: normal;
font-weight: 600;
src: url('fonts/hind-v16-latin-600.eot'); /* IE9 Compat Modes */
src: url('fonts/hind-v16-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('fonts/hind-v16-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
        url('fonts/hind-v16-latin-600.woff') format('woff'), /* Modern Browsers */
        url('fonts/hind-v16-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
        url('fonts/hind-v16-latin-600.svg#Hind') format('svg'); /* Legacy iOS */
}
/* hind-700 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Hind';
font-style: normal;
font-weight: 700;
src: url('fonts/hind-v16-latin-700.eot'); /* IE9 Compat Modes */
src: url('fonts/hind-v16-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('fonts/hind-v16-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
        url('fonts/hind-v16-latin-700.woff') format('woff'), /* Modern Browsers */
        url('fonts/hind-v16-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
        url('fonts/hind-v16-latin-700.svg#Hind') format('svg'); /* Legacy iOS */
}



/*======================================================================================*/
/*	Text Formats  
/*======================================================================================*/

/* Headlines */
h1, h2, h3, h4, h5, h6 {margin: 0 0 28px 0;}

h1 {
    font-size: 120px;
    font-weight: 600;
    text-transform: uppercase;
}

h2 {
    font-size: 44px;
    font-weight: 600;
    line-height: 130%;
    margin: 0 0 60px 0;
}

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

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

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

/* Hyperlinks */
main a {color: #2C2E35; text-decoration: none;}
main a:hover {color: #2C2E35; text-decoration: underline;}



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

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


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


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

main {
    position: relative;
    width: 90%;
    height: 100vh;
    margin: 0 auto;
    max-width: 1280px;

    display: flex;
    align-items: center;
}

    article {
        position: relative;
        width: 100%;
        height: auto;

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

        .third {
            flex-basis: 32%;
        }

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




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

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


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


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


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




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

@media only screen and (max-width: 1024px) { 
  
body {
    font-size: 18px;
}

h1 {
    font-size: 100px;
    margin: 0 0 20px 0;
}

h2 {
    font-size: 34px;
    letter-spacing: 4px;
}

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


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


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

.third {
    flex-basis: 100%;
}


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




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

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


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


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


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