/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
html {
    color: #000;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/* CSS Placeholder Color */
::-webkit-input-placeholder { /* Chrome , Safari */
   color:#e3e3e3;
   opacity:1;
}

:-moz-placeholder { /* Firefox 18- */
   color:#e3e3e3;
   opacity:1;
}

::-moz-placeholder {  /* Firefox 19+ */
   color:#e3e3e3;
   opacity:1;
}

:-ms-input-placeholder { /* IE 10+ */
   color:#e3e3e3;
}


/*
 * A better looking default horizontal rule
 */
hr {
    display: block;
    height: 2px;
    border: 0;
    border-top: 2px solid #e3e3e3;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}


button,
input,
select,
textarea,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline:0 none;
    border-radius: 0;
	-webkit-border-radius:0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  select,
  textarea,
  input {
    font-size: 16px;
  }
}


* { -webkit-tap-highlight-color:transparent; }

img, embed, object, video {
	max-width: 100%;
	height: auto;
	width: auto;
}


iframe{
	max-width: 100%;
	/*height: auto;*/
	width: 100%;
}


nav ul{margin:0; padding:0;}
nav ul li{margin:0; padding:0; list-style:none outside; display:inline-block;}


/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */
.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #010101;
    padding: 0.2em 0;
}

/* applies to GIF and PNG images; avoids blurry edges */
img[src$=".gif"], img[src$=".png"], img[src$=".svg"] {
    image-rendering: -moz-crisp-edges;         /* Firefox */
    image-rendering:   -o-crisp-edges;         /* Opera */
    image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
}


/* ==========================================================================
   Author's custom styles: Ajay Pulickal . riversite
   ========================================================================== */
html {
-webkit-tap-highlight-color:transparent;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
overflow-y:scroll;
/*overflow: auto;*/
/*font-size: 62.5%;*/
}

html, body{/*height:100vh; min-height: 100vh; background: rgba(120, 122, 129, 0.4);*/}
body{font-family: Arial, sans-serif; font-size:13px; font-weight:400; color:#000;}


/* ******************** */
h1, h2, h3, h4, h5, h6{font-weight:700; line-height:normal; color:#000; margin:0 0 17px;}
h1{font-size:29px; line-height:35px; margin:0 0 34px;}
h2{font-size:20px; line-height:24px;}


h3{font-size:26px;}
h4{font-size:20px; font-weight: 400;}

p,
li,
td{font-size:13px; line-height:17px;}

p,
ul,
ol,
table,
hr{margin:0 0 17px;}


a{color:#fff; text-decoration:none; display:inline-block;}
a:focus{color:#fff; text-decoration:none;}
a:hover{color:#fff; text-decoration:none;}
*:focus{outline:0;}

a[href^="tel:"]{}


b,
strong{font-weight:700;}

ul,
ol{padding-left: 16px;}
li{margin-bottom:3px;}

table{border:0; width:100%;}

img{border:0; -ms-interpolation-mode:bicubic;}

hr{clear:both; height:3px; line-height:3px; border:0; border-top:3px solid #ff63b2;}




/* *** Custom *** */
.regular{font-weight:400;}
.bold{font-weight:700;}

.abstand-nach-unten-0{margin-bottom:0;}
.abstand-nach-unten-klein{margin-bottom:8px;}
.abstand-nach-unten-normal{margin-bottom:17px;}
.abstand-nach-unten-gross{margin-bottom:26px;}
.abstand-nach-unten-sehrgross{margin-bottom:34px;}

.text-uppercase{text-transform:uppercase;}
.zeilenabstand{letter-spacing:1px;}

.position-left{float:left;}
.position-right{float:right;}

.table{display:table; width:100%;}
.table_row{display:table-row;}
.table_cell{display:table-cell;}

.align-center{text-align:center;}
.align-left{text-align:left;}
.align-right{text-align:right;}
.align-justify{text-align:justify;}

.inline-block-element{display:inline-block;}

.mehr,
.download{}

.button{display:inline-block; padding:6px 12px; font-size:15px; font-weight:700;
-webkit-border-radius: 5px;
border-radius: 5px;

-webkit-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.button.magenta{background:#ff63b2; color:#fff; border:1px solid #fff;}
li.active a.button.magenta,
a.button.magenta:hover{background:#0e78ad;}



/* typo3 inter classes */
.space-after-extra-small{margin-bottom:0;}
.space-after-small{margin-bottom:8px;}
.space-after-medium{margin-bottom:17px;}
.space-after-large{margin-bottom:26px;}
.space-after-extra-large{margin-bottom:34px;}

/* ******************** Page */
.page{height:100vh; position: relative;}

.top,
.left,
.right{position: relative;}



/* Header */
.header{position: fixed; z-index:3; height:auto; padding:20px; background:#fff; width:50%; margin:0 auto;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.header a{ color:#0e78ad;}

.header .top{height:100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;}

.header .top.left{padding-left:0px;}
.logo{width:100px; position: relative; margin:0 auto 20px;}
.logo img{width:100%;}


/* MainContent */
.main-content{position: relative; z-index:2; height:100vh;
-webkit-box-sizing: border-box;
box-sizing: border-box;}

.content{height:100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;}

.seitenbild{position: fixed; bottom:0; left:0; height:calc(100%); width:100%; z-index:1; background-color:#fff;}

.seitenbild img{display:none;}

.cover{
    background-size: cover;
	background-position: bottom center;
    background-repeat: no-repeat;
}


.contentWrap{/*max-width:65%; padding-left:60px;*/ padding:0 20px 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.contentWrap.no_page_info{padding-top:20px;}
.grid .container{width:100%; padding-left: 0; padding-right: 0; margin-left: 0;
margin-right: 0;}


/* flexelement */
.flexelement{position:relative; width:100%; height:100%; padding:40px 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.flexelement > .row{width:100%; height:100%; margin-bottom:0;
	display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.flexelement > .row > .column{float:none;}

/*.flexelement > .row > .column.four,
.flexelement > .row > .column.six{width: 88.88888889%;}*/

.pos-flex-align-start{-webkit-align-items: flex-start; align-items: flex-start;}
.pos-flex-align-center{-webkit-align-items: center; align-items: center;}
.pos-flex-align-end{-webkit-align-items: flex-end; align-items: flex-end;}

.pos-flex-justify-start{-webkit-justify-content: flex-start; justify-content: flex-start;}
.pos-flex-justify-center{-webkit-justify-content: center; justify-content: center;}
.pos-flex-justify-end{-webkit-justify-content:flex-end; justify-content:flex-end;}



.grid .container [class*="col-"] p:last-child{margin-bottom:0;}

.bg-white{background:rgba(255, 255, 255, 0.9); padding:20px 20px 0;
border-radius: 10px;
}



.onlyMobil{display:inline-block;}
.onlyMobilBlock{display:block;}
.onlyDesktop{display:none;}
/* ==========================================================================
   Media Queries
   ========================================================================== */
@media (max-width: 1025px) {
.grid .container [class*="col-"]{
	-webkit-box-flex: 0;
	-webkit-flex: 0 0 100%;
	-ms-flex: 0 0 100%;
	flex: 0 0 100%;
	max-width: 100%;
}

}



@media (min-width: 576px) {



}


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}


@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after,
    *:first-letter,
    *:first-line {
        background: transparent !important;
        color: #010101 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

   /* a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }*/

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    /*a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }*/

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }

	/* ************* */
	body, p{font-size:12px; line-height:16px;}
	h1{font-size:21px; line-height:normal;}
	h2{font-size:18px; line-height:normal;}
	h3{font-size:16px; line-height:normal;}
	h1, h2, h3, ul,
	p{margin-bottom:16px;}
	li{line-height:16px;}

}