/* ##################################################
TPX - The very Base CSS Defintions
------------------------------------------------
SIMPLE RESET
################################################## */

html, body                                  { height: initial; }
html {
    font-size:62.5%;
    height:100%;
    -webkit-box-sizing:border-box;
            box-sizing:border-box;
    scroll-behavior:smooth;/* for a smooth scroll behavier with firefox */
}

textarea                                     { overflow:auto; }
img                                          { border:0; }
button, input, optgroup,
select, textarea, form, fieldset             { color:inherit; background-color:inherit; font:inherit; margin:0; padding:0; border-radius:0;   }
main, nav, section, article, header, pre,
blockquote, dl, figure, figcapture           { display:block; padding:0; margin:0; }

/* inheriting border-box from html*/
*,
*:before,
*:after               { -webkit-box-sizing:inherit; box-sizing:inherit; }


/* ##################################################
Basic Styling
html is set to 62.5% so that all the REM measurements throughout exo
are based on 10px sizing. So basically 1.5rem = 15px.
If you simply set the font-size in media query to ex. 60% it will reduce all the rem declarations.
################################################## */

body {
    font-family:'Overpass', Helvetica, Arial, sans-serif;
    font-size:1.7em;
    font-weight:300;
    height:100%;
    /* this trick prevents the body to have margin collapse, if a child element has a margin*/
    margin:-1px 0 0 0;
    padding:1px 0 0 0;
    /* */
    -webkit-overflow-scrolling: touch;/* smooth scrolling for ios devices*/

    /* for "better" font smoothing display on all devices, ony if neede for fonts
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;*/
}


section,
.base-box,
.site-main,
.full-width.item-box,
.item-box .item-box     { width:100%; max-width:100%; position:relative; z-index: 2;}
.full-size.item-box     { width:100%; height:100vh; max-width: 100%;}

.base-box               { min-height:100vh; }
.item-box               { width:calc(100% - 4rem); max-width:1440px; margin:0 auto 0 auto; position:relative; z-index: 2;}
.blue-box .item-box { max-width:920px; }
.contact-box .item-box { max-width:1080px; }
#page-footer .item-box { max-width:920px; }
.blue-box .item-box.smaller-box { max-width:760px; }

.txt-center       { text-align:center; }
.txt-left         { text-align:left; }
.txt-right        { text-align:right; }
.txt-uppercase    { text-transform:uppercase; }
.txt-reset        { text-transform:none; text-align:left; }

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

.no-margin        { margin:0; }
.overflow-hidden  { overflow:hidden; }

/* Colors */
.bg-inherited     { background-color:inherit; }
.bg-transparent   { background-color:transparent; }
.bg-white         { background-color:#fff; }
.bg-black         { background-color:#000; }
.bg-error         { background-color:#d50303; }/* FEHLER rot */
.bg-1             { background-color:#ecf2fb;  }/* Dunkelgrau rgba(88,88,88,1); */
.bg-2             { background-color:#fae700; }/* grau rgba(117,117,117,1); */
.bg-3             { background-color:#d6d6d6; }/* Hellgrau rgba(177,177,177,1); */

.cl-inherited     { color:inherit; }
.cl-white         { color:#fff; }
.cl-black         { color:#000000; }
.cl-error         { color:#d50303; }
.cl-1             { color:#585858;  }
.cl-2             { color:#757575; }
.cl-3             { color:#d6d6d6; }

/* Link Definition */
a                 { color:currentColor; }
a:hover           { color:#3030F8; }
a:focus,
a:active          {  outline:0; position: relative; cursor:default; caret-color:transparent; }
a:focus:before,
a:active:before   { content:''; border:1px dotted #ff0000; height:100%; width:100%; position: absolute; top:0; left:0;}
a:hover:before    { display:none; }


/* color overwrite for links in textboxes with colordefintions */
.cl-inherited a     { color:inherit; }
.cl-white a         { color:#fff; }
.cl-black a         { color:#000; }
.cl-error a         { color:#d50303; }
.cl-1 a             { color:#585858; }
.cl-2 a             { color:#757575; }
.cl-3 a             { color:#d6d6d6; }

.pd-t0            { padding-top:0; }
.pd-t1            { padding-top:1rem; }
.pd-t2            { padding-top:2rem; }
.pd-t3            { padding-top:3rem; }
.pd-t4            { padding-top:4rem; }
.pd-t5            { padding-top:5rem; }
.pd-t6            { padding-top:6rem; }
.pd-t7            { padding-top:7rem; }
.pd-t8            { padding-top:8rem; }
.pd-t9            { padding-top:9rem; }
.pd-t10           { padding-top:10rem; }
.pd-t12           { padding-top:12rem; }
.pd-t15           { padding-top:15rem; }

.pd-b0            { padding-bottom:0; }
.pd-b1            { padding-bottom:1rem; }
.pd-b2            { padding-bottom:2rem; }
.pd-b3            { padding-bottom:3rem; }
.pd-b4            { padding-bottom:4rem; }
.pd-b5            { padding-bottom:5rem; }
.pd-b6            { padding-bottom:6rem; }
.pd-b7            { padding-bottom:7rem; }
.pd-b8            { padding-bottom:8rem; }
.pd-b9            { padding-bottom:9rem; }
.pd-b10           { padding-bottom:10rem; }
.pd-b12           { padding-bottom:12rem; }
.pd-b15           { padding-bottom:15rem; }



/* ##################################################
Typography
################################################## */

h1, h2, h3, h4, h5, h6  {
  font-size:2.5rem;
  padding:0 0 3rem 0;
  margin:0;
  /* word Wraps */
  word-wrap: normal;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
      hyphens: auto;
  font-weight: 300;
    max-width:100%;/* IE Weirdness*/
    font-family:'Poppins', Helvetica, Arial, sans-serif;
    line-height:1.3;
    position: relative;
}
  h1              { font-size:4rem; }
  h2              { font-size:3rem;
  padding:0 0 4rem 0;}


@media (min-width:860px) {
  h1              { font-size:5rem; }
  h2              { font-size:4rem; }
  h3              { font-size:3rem; }
}

p                 { margin:0 0 3rem 0; word-wrap: normal; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; max-width:100%;/* IE Weirdness*/}
.small            { font-size:1.2rem; }
table             { margin:3rem 0; padding:0; border-collapse:collapse; border-spacing:0; border:0;}
td,
th                { padding:0.5rem; border-style:solid; border-width:1px; text-align:left; }
th                { color:#fff; background:rgba(0, 0, 0, 0.8); }
hr                { height:1px; border:0; background-color:#000; margin:2rem 0;  }

/*##################################################
 Lists
################################################## */
ul, ol                      { padding-left:2.5rem; margin:0 0 3rem 0; }
ul ul, ul ol, ol ol, ol ul  { margin:1.5rem 0 1.5rem 3rem; }
li                          { margin-bottom:0.5rem; position:relative; }


/*##################################################
Images and image box
################################################## */
.image-box,
.image-box img,
.image-box a                        { display:block; position:relative; vertical-align:top; width:100%; }
.image-box img                      { width:100%; max-width:100%; height:auto; }

.image-auto img,
.noscale img { max-width:100%; width:auto;}

/*##################################################
Flex Grid
################################################## */

.flex-item             { display:block; position:relative; vertical-align: top;  margin:0;}
.flex-cols .flex-item  { width:100%; margin:0 0 6rem 0;}
.base-box,
.flex-box              { display: -webkit-box; display: -ms-flexbox; display: flex;  }
.flex-cols,
.wrap                  { -ms-flex-wrap:wrap; flex-wrap:wrap; }

@supports (flex-wrap: wrap) { .flex-cols, .wrap  { -webkit-flex-wrap: wrap; }}/* hide from incomplete Firefox versions */


.flex-cols,
.stretch              { -webkit-box-align:stretch; -ms-flex-align:stretch; align-items:stretch; }

.flex-column,
.base-box             { -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; }
.flex-column          {  height: 100%; }

[class*="center-"]    { -webkit-box-align:center; -ms-flex-align:center; align-items:center; }
.center-center        { -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; }
.center-left          { -webkit-box-pack:flex-start; -ms-flex-pack:start; justify-content:flex-start; }
.center-right         { -webkit-box-pack:flex-end; -ms-flex-pack:end; justify-content:flex-end; }
.center-space         { -webkit-box-pack:space-between; -ms-flex-pack:justify; justify-content:space-between; }

[class*="bottom-"]    { -webkit-box-align:flex-end; -ms-flex-align:end; align-items:flex-end; }
.bottom-center        { -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; }
.bottom-left          { -webkit-box-pack:flex-start; -ms-flex-pack:start; justify-content:flex-start;  }
.bottom-right         { -webkit-box-pack:flex-end; -ms-flex-pack:end; justify-content:flex-end; }

[class*="top-"]       { -webkit-box-align:flex-start; -ms-flex-align:start; align-items:flex-start; }
.top-center           { -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; }
.top-left             { -webkit-box-pack:flex-start; -ms-flex-pack:start; justify-content:flex-start;  }
.top-right            { -webkit-box-pack:flex-end; -ms-flex-pack:end; justify-content:flex-end; }

.space-between        { -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;}


/* setting the footer always to the bottom, if the browser is capable of displaying flexbox*/
.site-footer,
.logo                         { -ms-flex-negative:0; flex-shrink:0; }/* do not shrink or enlarge */
.base-item,
.flex-column .content-box     { -webkit-box-flex:1; -ms-flex:1 0 auto; flex:1 0 auto; } /* shrink and enlarge this */
.base-item                    { overflow-x: hidden; }


@media (min-width:760px) {

     /* predefined margins for the standard boxes */
     .flex-box.flex-cols            { margin:0 0 0 -2rem; }
     .flex-cols > .flex-item        { margin:0 0 2rem 2rem; position: relative; }
     .box-20                        { width:20%; }
     .flex-cols > .box-20           { width:calc(20% - 2rem); }
     .box-25                        { width:25%; }
     .flex-cols > .box-25           { width:calc(25% - 2rem); }
     .box-30                        { width:30%; }
     .flex-cols > .box-30           { width:calc(30% - 2rem); }
     .box-33                        { width:33.33333%; }
     .flex-cols > .box-33           { width:calc(33.33333% - 2rem); }
     .box-40                        { width:40%; }
     .flex-cols > .box-40           { width:calc(40% - 2rem); }
     .box-45                       { width:45%; }
     .flex-cols > .box-45           { width:calc(45% - 2rem); }

     .box-50                        { width:50%; }
     .flex-cols > .box-50           { width:calc(50% - 2rem); }
     .box-55                       { width:55%; }
     .flex-cols > .box-55           { width:calc(55% - 2rem); }
     .box-60                        { width:60%; }
     .flex-cols > .box-60           { width:calc(60% - 2rem); }
     .box-66                        { width:66%; }
     .flex-cols > .box-66           { width:calc(66.66666% - 2rem); }
     .box-70                        { width:70%; }
     .flex-cols > .box-70           { width:calc(70% - 2rem); }
     .box-75                        { width:75%; }
     .flex-cols > .box-75           { width:calc(75% - 2rem); }
     .box-80                        { width:75%; }
     .flex-cols > .box-80           { width:calc(75% - 2rem); }
     .box-90                        { width:90%; }
     .flex-cols > .box-90           { width:calc(90% - 2rem); }
     .box-100                       { width:100%; }
     .flex-cols > .box-90           { width:calc(100% - 2rem); }
}


/* Header */
.site-header           { position:relative; width:100%; z-index: 100; }
.fixed .site-header    { position:fixed; background-color:#fff;  }
.fixed .base-item:before { content:''; width:100%; height:10rem; display:block; position: relative;}


/* Logo */
.branding              { position:relative; z-index:1; width:100%; }
.logo                  { display:inline-block; padding: 2.5rem 0 7.5rem 0;}
.logo span {
    display:inline-block;
    background-image:url('images/logo.png');
    background-position:bottom left;
    background-repeat:no-repeat;
    background-size: contain;
    height: 88px;
    width: 245px;
}
@media (min-width:760px) {
  .logo span           {  }
}


/* buttons */

.button,
button,
input[type="submit"]  {
    position:relative;
    display:inline-block;
    cursor:pointer;
    padding:1rem 6rem;
    margin:0;
    border-radius:0;
    border:2px solid #0b0bba;
    outline:0;
    text-decoration:none;
    -webkit-appearance:none;/* removing the apearance for safari input types*/
    background-color:#0b0bba;
    color:#fff;
    vertical-align: baseline;
    font-weight: 800;
    font-family: 'Poppins';
    font-size:2rem;
    text-transform:uppercase;
}
footer .button {width:100%; max-width:360px; text-align:center;}
.call-to-action,
.call-to-action           { background-color:#d50303; border-color:#d50303; }

.button:hover,
button:hover,
input[type="submit"]:hover { outline:0;  background-color:#fff;  color:#0b0bba;  }

.call-to-action:hover       { color:#d50303; }

.button { margin:2rem 1rem 1rem 0; }

#page-top .btn-reset,
#page-top .btn-reset:hover,
#page-top .btn-reset:focus   { background-color:transparent; color:inherit; }


/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: #eee;
  clip: auto !important;
  clip-path: none;
  color: #444;
  display: block;
  font-size: 1em;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000; /* Above WP toolbar. */
}

/* Local Fonts */
/* overpass-300 - latin */
@font-face {
  font-family: 'Overpass';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('css/fonts/overpass-v12-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('css/fonts/overpass-v12-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}


/* poppins-300 - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('css/fonts/poppins-v20-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('css/fonts/poppins-v20-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* poppins-800 - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  src: local(''),
       url('css/fonts/poppins-v20-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('css/fonts/poppins-v20-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}