/*!
Theme Name: Hyper.LW
Author: Christoph Joschko
Author URI: http://webandprint.solutions
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

.smallscreen_hide {
	display: block;
}

.bigscreen_hide {
	display: none;
}

@media screen and (max-width: 600px) {
	.bigscreen_hide {
		display: block;
	}
	.smallscreen_hide {
		display: none;
	}
}

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/
/* Normalize
--------------------------------------------- */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
	 ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */
/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}




@font-face {
	font-family: 'Montserrat-Light';
	font-style: normal;
	font-weight: 300;
	src: url('./assets/font/Montserrat/MontserratLight.eot');
        src: url('./assets/font/Montserrat/MontserratLight.eot') format('embedded-opentype'),
             url('./assets/font/Montserrat/MontserratLight.woff2') format('woff2'),
             url('./assets/font/Montserrat/MontserratLight.woff') format('woff'),
             url('./assets/font/Montserrat/MontserratLight.ttf') format('truetype'),
             url('./assets/font/Montserrat/MontserratLight.svg#MontserratLight') format('svg');
}



:root {
    --col-accent : #8c0f00;
    --col-text-dark : #000000;
    --col-text-light : #FFFFFF;
    --col-text-banner : #a9a9a9;
    --bgcol-red : #8c0f00;
    --bgcol-grey : #c2c2c2;
    --bgcol-light : #FFFFFF;

    --font-family-banner : 'Montserrat-Light';
}

html {
	box-sizing: border-box;
}


body {
    font-size: 1.8rem;
    font-family: "AvantGarde", Arial, sans-serif;
}

a {
    font-family: inherit;
    color : var(--col-accent);
    text-decoration: none;
}

#main-nav-menu a {
    font-family: "AvantGarde", Arial, sans-serif;
    color : var(--col-accent);
    text-decoration: none;
}

#site-content,
.content-width {
    width: 100vw;
    max-width: 98%;
    margin-left: auto;
    margin-right: auto;
}

#the-lawyers a {
    display: inline-block;
    width: 100%;

    color : var(--col-text-light);
}

#header-branding,
.branding,
.flex-col-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
    align-items: stretch;
    column-gap: .5rem;
    row-gap : 0.5rem;
}

.column {
    flex : 1 0 30%;
}

#header-branding .column,
.branding .column,
.flex-col-wrapper .colum {
    flex: 1 0 30%;
    min-height: 1.2em;
}

.flex-col-wrapper .fullwidth {
    flex : 1 0 100%;
}

.column.grey {
    background-color: var(--bgcol-grey);
    color : var(--col-text-light);
}

.column.red {
    background-color: var(--bgcol-red);
    color : var(--col-text-light);
}

#banner {
    flex : 1 0 100%;
    margin-top: 0.5em;

    background-color: #FFF;
    text-align: center;
}

#banner a {
    color : var(--col-text-banner);
    text-decoration: none;
    font-family: var(--font-family-banner);
    font-size: 1.1em;
    
}


#site {
    width : 100vw;
    padding : 0 .8rem;
}

ul#main-nav-menu {
    list-style-type: none;
    padding : 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
}

ul#main-nav-menu .menu-item {    
    padding: 0.5em;
}

#site-content h1 {
    font-size: 1.2em;
}

#site-content h2 {
    font-size: 1.0em;
}

#site-content p {
    font-size: 1.3rem;
    line-height: 1.15em;
}

#site-content img {
    width : 100%;
}
#site-content img.shadow {
    -webkit-box-shadow: .4em .4em 0px 0px var(--bgcol-grey); 
    box-shadow: .4em .4em 0px 0px var(--bgcol-grey);
}

#the-lawyers {
    margin-top: 1em;
}

#the-lawyers ul {
    list-style-type: none;
    padding : 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
}

#the-lawyers ul li {
    padding : .3em .8em;
    text-transform: uppercase;
    font-size: .8em;
    font-weight: 600;
}


#the-lawyers > .lawyer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-bottom: 2.8rem;
}

.lawyer .column-text {
    flex: 1 0 100%;
    min-height: 18rem;
}

.lawyer .lawyer-logo {
    flex: 1 0 100%;
    text-align: center;
    background-color: var(--bgcol-light);
    min-height: 3.7em;
}

.lawyer-logo img {vertical-align: middle;margin: 0.5em auto .3em auto;}

div#footer {
    padding: .8rem .5rem;
    margin-top: 1.0em;
}

@media screen and (min-width:600px) {
    
    ul#main-nav-menu {
        flex-direction: row;
        margin-right: 0;
        margin-left: auto;
        justify-content: flex-end;

    }

    #site {
        width: 70vw;
        min-width: 54em;
        max-width: 1600px;
        margin-left: auto;
        margin-right: auto;
    }

    #header-branding,
    .branding,
    .flex-col-wrapper {
        column-gap : 0.5rem;
    }

    #site-content,
    .content-width {
        width: 60vw;
        max-width: 1000px;
        min-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }


        #site-content h1 {
            font-size: 1.8em;
        }

    .kontakt .flex-wrapper {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }
    
        div#kontakt-lageplan {
            flex: 1 0 45%;
            margin-right: 10%;
        }
        
        div#kontakt-anschrift {
            flex: 1 0 20%;
        }

}