/*
Theme Name: nrwjusos
Theme URI:
Author: Media-Nova.com
Author URI: https://wordpress.org/
Description: NRWJusos
Version: 1.1

Text Domain: juso
Tags: one-column, flexible-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, theme-options,

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/


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:'Rund Grotesk', Helvetica, Arial, sans-serif;
    font-size:2em;
    letter-spacing: 0.02em;
    font-weight:500;
    line-height: 1.4;
    color:#646464;
    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*/
}

main { padding: 5rem 0; }
.home main { padding: 5rem 0 0 0; }
section,
.base-box,
.site-main,
.full-width .item-box,
.item-box .item-box     { width:100%; max-width:100%; position:relative; }

.base-box               { min-height:100vh; }
.item-box               { width:96%; width:calc(100% - 6rem); max-width:1170px; margin:0 auto 0 auto; position:relative; }

@media (max-width:330px) {
   .item-box  {  width:calc(100% - 4rem); }
}

.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-transparent   { background-color:transparent; } /* Transparent */
.bg-white         { background-color:#fff; }/* Weiß */
.bg-black         { background-color:#000; }/* Schwarz */
.bg-error         { background-color:#d50303; }/* FEHLER rot */

.bg-1             { background-color:#e20916;} /* Rot */
.bg-2             { background-color:#646464;} /* Grau */
.bg-3             { background-color:#337ab7;} /* Hellblau */
.bg-4             { background-color:#006a86;} /* Hellblau */

.cl-transparent   { color:transparent; } /* transparent */
.cl-white         { color:#fff; }/* Weiß */
.cl-black         { color:#000; }/* Schwarz */
.cl-error         { color:#d50303; }/* FEHLER rot */

.cl-1             { color:#e20916;} /* Schrift Rot */
.cl-2             { color:#646464;} /* Schrift Grau */
.cl-3             { color:#337ab7;} /* Schrift Hellblau */
.cl-4             { color:#006a86;} /* Schrift Hellblau */


.p-0              { padding:0; }
.p-1              { padding:1rem; }
.p-2              { padding:2rem; }
.p-3              { padding:3rem; }
.p-4              { padding:4rem; }
.p-8              { padding:8rem; }

.pd-1             { padding:1rem 0; }
.pd-2             { padding:2rem 0; }
.pd-3             { padding:3rem 0; }
.pd-4             { padding:4rem 0; }
.pd-8             { padding:8rem 0; }

.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-t8            { padding-top:8rem; }

.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-b8            { padding-bottom:8rem; }


/* Link Definition */
a                 { color:#006a86; }
a:hover           { color:#23527c; }
main a            { text-decoration: none;}
main a:hover            { text-decoration:underline;}
a:focus,
a:active          {  outline:0; }



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

h1, h2, h3, h4, h5, h6  {
  font-size:2.5rem;
  margin:2rem 0 1rem 0;
  /* word Wraps */
  word-wrap: normal;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
      hyphens: auto;
  font-weight: 800;
  line-height: 1.1;
}
h4, h5, h6  { font-size:1.8rem }
@media (min-width:790px) {
  h1              { font-size:4rem; }
  h2              { font-size:3rem; }
}

p                 { margin:0 0 1rem 0; word-wrap: normal; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
.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; }

.p-1 .image-box.out-of-box          { margin:-1rem; width:calc(100% + 2rem); }
.p-2 .image-box.out-of-box          { margin:-2rem; width:calc(100% + 4rem); }
.p-3 .image-box.out-of-box          { margin:-3rem; width:calc(100% + 6rem); }
.p-4 .image-box.out-of-box          { margin:-4rem; width:calc(100% + 8rem); }
.p-8 .image-box.out-of-box          { margin:-8rem; width:calc(100% + 16rem); }


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


.col-item,
.flex-item           { display:inline-block; width:100%; position:relative; vertical-align: top; margin:0 0 2rem 0; }

.base-box,
.col-box,
.flex-box            { display: -webkit-box; display: -ms-flexbox; display: flex; }

.col-box,
.wrap                 { -ms-flex-wrap:wrap; flex-wrap:wrap; }

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

.col-box,
.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 */

@media (min-width:790px) {

    #secondary { width:25%; }
    #primary-content { width:70%; margin-right:5%;}

    /* predefined margins for the standard boxes */
    .col-box                       { margin:0 0 0 -2rem; }
    .col-box .col-item             { margin:0 0 2rem 2rem; }

    .flex-box>.flex-item            { margin:0 0 2rem 0; }
    .col-2>.col-item,
    .col-2>.flex-item               { width:calc(50% - 2rem); }
    .col-3>.col-item,
    .col-3>.flex-item               { width:calc(33.333333% - 2rem); }
    .col-4>.col-item,
    .col-4>.flex-item               { width:calc(25% - 2rem); }

    .col-box>.col-item.box-20       { width:calc(20% - 2rem); }
    .col-box>.col-item.box-25       { width:calc(25% - 2rem); }
    .col-box>.col-item.box-30       { width:calc(30% - 2rem); }
    .col-box>.col-item.box-33       { width:calc(33.333333% - 2rem); }
    .col-box>.col-item.box-35       { width:calc(35% - 2rem); }
    .col-box>.col-item.box-40       { width:calc(40% - 2rem); }
    .col-box>.col-item.box-45       { width:calc(45% - 2rem); }
    .col-box>.col-item.box-50       { width:calc(50% - 2rem); }
    .col-box>.col-item.box-55       { width:calc(55% - 2rem); }
    .col-box>.col-item.box-60       { width:calc(60% - 2rem); }
    .col-box>.col-item.box-65       { width:calc(65% - 2rem); }
    .col-box>.col-item.box-66       { width:calc(66.666666% - 2rem); }
    .col-box>.col-item.box-70       { width:calc(70% - 2rem); }
    .col-box>.col-item.box-75       { width:calc(75% - 2rem); }
    .col-box>.col-item.box-80       { width:calc(80% - 2rem); }
    .col-box>.col-item.box-85       { width:calc(85% - 2rem); }
    .col-box>.col-item.box-100      { width:calc(100% - 2rem); }

}

@media (max-width:790px) {
  .flex-box.sidebar-active { display:block; }
  #secondary { width:100%; }
  #primary-content { width:100%; margin-right:0;}
}

/* Header */
.site-header           { position:relative; width:100%; z-index: 100; }
.fixed .site-header    { position:fixed; }

/* Logo */
.branding              { position:relative; z-index:1; width:100%;}
.logo                  { display:inline-block; padding: 1rem 0 2rem 0;  position: relative; z-index: 11; }
.logo span {
    display:inline-block;
    background-image:url('images/logo_NRWJusos.svg');
    background-position:bottom left;
    background-repeat:no-repeat;
    background-size: contain;
    height: 95px;
    width: 145px;
    vertical-align: top;
}
.logo img { max-width:145px; vertical-align: top;}


@media (max-width:960px) {
  .branding .item-box  { display:block;}
  .logo span { height: 66px; width: 100px; }
  .logo img { max-width:100px; }
}

/* buttons */
.button,
button,
input[type="submit"]  {
    position:relative;
    display:inline-block;
    cursor:pointer;
    padding: 0.6rem 1.2rem;
    line-height: 1.4;
    font-size: 1.4rem;
    vertical-align: middle;
    margin:0;
    border-radius:0.4rem;
    border:1px solid #e20916;
    outline:0;
    text-decoration:none;
    -webkit-appearance:none;/* removing the apearance for safari input types*/
    color: #fff;
    background-color: #e20916;
}

.button:hover,
button:hover,
input[type="submit"]:hover { outline:0;  background-color: #337ab7; border-color:#337ab7; color:#fff; text-decoration:none;}

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


/* Local Fonts */
/* Rund Grotesk Bold - latin */
@font-face {
  font-family: 'Rund Grotesk';
  font-style: normal;
  font-weight: 800;
  src: local('Rund Grotesk Bold'), local('RundGrotesk-Bold'),
  url('css/fonts/rund-grotesk_bold-webfont.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
  url('css/fonts/rund-grotesk_bold-webfont.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* Rund Grotesk Medium - latin */
@font-face {
  font-family: 'Rund Grotesk';
  font-style: normal;
  font-weight: 500;
  src: local('Rund Grotesk Medium'), local('RundGrotesk-Medium'),
       url('css/fonts/rund-grotesk_medium-webfont.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('css/fonts/rund-grotesk_medium-webfont.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}




/* must have higher specificity than alternative color schemes inline styles */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
	/* many screen reader and browser combinations announce broken words as they would appear visually */
	word-wrap: normal !important;
}
.skip-link {
	background-color: #f1f1f1;
	box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
	color: #21759b;
	display: block;
	font-size: 14px;
	left: -9999em;
	outline: none;
	padding: 15px 23px 14px;
	text-decoration: none;
	text-transform: none;
	top: -9999em;
}