/**
 * CU Whitlabel v1.0
 * Most basic Defintions for the Whitlabel
 *
 *
 * Released on: Nov 3, 2021
 */

 /* ##################################################
 SIMPLE RESET
 ################################################## */

 html, body                                  { height: initial; }
 html {
     font-size:62.5%;/* Basedefintion for rem 1rem --> 10px*/
     height:100%;
     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; }

 /* define border box for all Elements*/
 *,
 *:before,
 *:after               { -webkit-box-sizing:border-box; box-sizing:border-box; }

 body {
     font-size:1.6em;
     font-weight:400;
     min-height: 100vh;
     /* this trick prevents the body to have margin collapse, if a child element has a margin*/
     margin:-1px 0 0 0!important;
     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;
     overflow-x: hidden;/* hide horizontal scrolls*/
     width: 100%;
     max-width:100%;
 }


a:focus,
a:active          {  outline:0; }
a[href^="mailto:"] { word-wrap: break-word;  }


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

h1, h2, h3, h4, h5, h6, .block-style  {
  font-size:2rem;
  word-wrap: normal;
  line-height:1.2;
  font-weight:700;
  margin:0 0 2rem 0;
  max-width:100%;/* IE Weirdness*/ }

h1, h2, h3    {font-size:3rem;}

@media (min-width:790px) {
  h1, h2     { font-size:5rem; }
  h3         { font-size:4rem;  }
  h4         { font-size:3rem; }
  h5         { font-size:2.5rem; }
  h6         { font-size:2rem; }
}

p {
  word-wrap: normal;
  line-height: 1.3;
  margin:0 0 2rem 0;
  max-width:100%;/* IE Weirdness*/
}
small         { font-size:1.2rem; }
b, strong     { font-weight:700; }

table          { margin:3rem 0; padding:0; border-collapse:collapse!important; border-spacing:0!important; border:0!important;}
table table    { margin:0.2rem; }
td, th         { padding:0.5rem; border-style:solid; border-width:1px; text-align:left; border-color:currentColor; vertical-align: top; }

hr             { height:1px; border:0; border-top:1px solid currentColor; margin:3rem 0;  }

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

img            { width:auto; max-width:100%; height:auto; }

/* setting the footer always to the bottom, if the browser is capable of displaying flexbox*/
.base-box      {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
  -webkit-box-align:stretch;
  -ms-flex-align:stretch;
  align-items:stretch;
  height:100%;
  min-height:100vh;
 }
.site-footer   { flex: 0; }/* do not shrink or enlarge */
.base-item     { -webkit-box-flex:1; -ms-flex:1 0 auto; flex:1 0 auto; position:relative;} /* shrink and enlarge this */

/* Each item box is centered and had a max-width*/
.item-box           {  width:calc(100% - 2rem); max-width:1280px; margin:0 auto 0 auto; }
.item-box .item-box { max-width:100%; width:100%; }

@media (min-width:560px) {
  .item-box           {  width:calc(100% - 6rem); }
}

/* buttons */
.button,
button,
input[type="submit"]  {
    position:relative;
    display:inline-block;
    cursor:pointer;
    padding:0;
    margin:0;
    border-radius:0;
    border:0;
    outline:0;
    text-decoration:none;
    -webkit-appearance:none;/* removing the apearance for safari input types*/
    vertical-align: baseline;
}
.button {
  display:block;
  border-radius:30px;
  padding: 12px 26px 12px 26px;
  border-style: solid;
  border-width:2px;
}


/* ##################################################
Formdefinitions
################################################## */
.form-box,
.field-item                  { position:relative; z-index:inherit; }
.field-item                  { display: -webkit-box; display: -ms-flexbox; display: flex;  -ms-flex-wrap:wrap; flex-wrap:wrap;  }
.field-item-wrapper          { width:100%; }
@supports (flex-wrap: wrap)  {
  .field-item  { -webkit-flex-wrap: wrap; } /* hide from incomplete Firefox versions */
}

.field-label                 { order:1; width:100%; margin-bottom:0.5rem; }
.field-item input            { order:2; }
.form-row                    { margin-bottom:2rem; width:100%;  }

input[type="text"],
input[type="email"]          { width:100%; padding: 12px; min-height:4rem; border-style: solid; border-width:1px; position: relative; z-index: 2;}
textarea                     { width:100%; min-height:250px; }

.standard-radio input[type="radio"],
.standard-radio input[type="checkbox"],
.standard-checkbox input[type="checkbox"] { position:absolute; z-index:-1; opacity:0; }
.standard-radio label,
.standard-checkbox label {
    display:inline-block;
    padding: 1.2rem 0 1.2rem 4.5rem;
    margin:0;
    position:relative;
    cursor:pointer;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
input[type="radio"] + label::before,
input[type="radio"]:checked + label::after { position:absolute; content:''; border-radius:50%; border:0;}
input[type="radio"] + label::before        { width:34px; height:34px; top:5px; left:0; border-style: solid; border-width:1px; }
input[type="radio"]:checked + label::after { width:18px; height:18px; top:13px; left:8px; }

input[type="checkbox"] + label::before,
input[type="checkbox"]:checked + label::after { position:absolute; content:'';  border:0;}
input[type="checkbox"] + label::before        { width:34px; height:34px; top: 5px; left:0; border-style: solid; border-width:1px; }
input[type="checkbox"]:checked + label::after { width:18px; height:18px; top: 13px; left:8px; }

/* only for modern browsers
This is for changing the size if the Labels, when the input is selected*/
@supports (object-fit: cover) {
  input[type="text"],
  input[type="email"]          { width:100%; padding: 18px 12px 6px 12px; }
  input:not(:placeholder-shown) + label.field-label,
  input:placeholder-shown + label.field-label,
  input:focus + label.field-label                      { position: absolute; z-index:1;  top: 0; left: 0; height: 100%; padding: 1rem;}
  textarea:not(:placeholder-shown) + label.field-label,
  textarea:placeholder-shown + label.field-label,
  textarea:focus + label.field-label                   { position: absolute; top: 0; left: 0; height: 100%;}
  input[type="text"]:focus + label.field-label,
  input[type="text"]:not(:placeholder-shown) + label.field-label,
  input[type="email"]:focus + label.field-label,
  input[type="email"]:not(:placeholder-shown) + label.field-label,
  textarea:focus + label.field-label,
  textarea:not(:placeholder-shown) + label.field-label,
  input.disabled-field + label.field-label              { font-size:1.1rem; top:0; left:0; padding:0.5rem;}
}

.validation-box                   { padding:1rem 5rem 1rem 1rem; border-style:solid; border-width:1px; position: relative; }


/* ##################################################
Iframe and video box Responsiveness for iframes and videos
################################################## */

.iframe-box        { position: relative; overflow: hidden; padding-top: 57.25%; }
.iframe-box iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.video-box         { position: relative;}
.video-box  video  { width:100%; height:auto; position: relative;  }

/* ##################################################
BG Image --> simulating Backgroundimages
################################################## */
.bg-image                         { position:absolute; z-index:0; height:100%;  width:100%; top:0; top:0; left:0; }
.bg-image .image-box              { position:relative; z-index:1; height:100%; width:100%; }

@supports (object-fit: cover) {
  .bg-image .image-box img        { object-fit: cover; object-position:50% 50%;  height:100%; width:100%; transform:none; left:0; top:0; }
}

/* Polyfill BG Object fit images for IE */
.bg-image .image-box.ie-polyfill            { background-repeat:none; background-size: cover; background-position: center center;}
.bg-image .image-box.ie-polyfill img        { display:none; }

.hidden { display:none; }

/* Text meant only for screen readers. */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}