@charset "utf-8";

/* browser reset*/
body,html,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
  margin:0;
  padding:0;
}
table {
  border-collapse:collapse;
  border-spacing:0;
}
fieldset,img {
  border:0;
}
address,caption,cite,code,dfn,em,th,var {
  font-style:normal;
  font-weight:normal;
}
ol,ul,li {
  list-style:none;
}
caption,th {
  text-align:left;
}
h1,h2,h3,h4,h5,h6 {
  font-size:100%;
  font-weight:normal;
}
q:before,q:after {
  content:'';
}
abbr,acronym { border:0;}
/* end of browser reset */

/*---------------------------------------------------------------------*/

/*Fonts*/
@font-face {
  font-family: TeX Gyre Adventor;
  src: url("../fonts/TeXGyreAdventor/Regular/TeXGyreAdventor-Regular.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: TeX Gyre Adventor;
  src: url("../fonts/TeXGyreAdventor/Italic/TeXGyreAdventor-Italic.woff") format("woff");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: TeX Gyre Adventor;
  src: url("../fonts/TeXGyreAdventor/Bold/TeXGyreAdventor-Bold.woff") format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  }
  
/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open_sans/open-sans-v20-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open_sans/open-sans-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open_sans/open-sans-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open_sans/open-sans-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open_sans/open-sans-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open_sans/open-sans-v20-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/open_sans/open-sans-v20-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open_sans/open-sans-v20-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open_sans/open-sans-v20-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open_sans/open-sans-v20-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open_sans/open-sans-v20-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open_sans/open-sans-v20-latin-italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-condensed-300 - latin */
@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/open_sans/open-sans-condensed-v15-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open_sans/open-sans-condensed-v15-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open_sans/open-sans-condensed-v15-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open_sans/open-sans-condensed-v15-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open_sans/open-sans-condensed-v15-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open_sans/open-sans-condensed-v15-latin-300.svg#OpenSansCondensed') format('svg'); /* Legacy iOS */
}

/* open-sans-condensed-300italic - latin */
@font-face {
  font-family: 'Open Sans Condensed';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/open_sans/open-sans-condensed-v15-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open_sans/open-sans-condensed-v15-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open_sans/open-sans-condensed-v15-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open_sans/open-sans-condensed-v15-latin-300italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open_sans/open-sans-condensed-v15-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open_sans/open-sans-condensed-v15-latin-300italic.svg#OpenSansCondensed') format('svg'); /* Legacy iOS */
}

/* open-sans-condensed-700 - latin */
@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open_sans/open-sans-condensed-v15-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open_sans/open-sans-condensed-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open_sans/open-sans-condensed-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open_sans/open-sans-condensed-v15-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open_sans/open-sans-condensed-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open_sans/open-sans-condensed-v15-latin-700.svg#OpenSansCondensed') format('svg'); /* Legacy iOS */
}




/*-------*/


body {
  font-family: Open Sans Condensed,TeX Gyre Adventor,Arial,Helvetica,Verdana,sans-serif;
  color:#fff;
  background-color: #3697b0;
  font-size:10px;
  display:flex;
  justify-content:center;
}

h1 {
  font-size:2em;
  margin-bottom:15px;
  color:#666;
}

h2 {
  margin-bottom:5px;
  margin-top:15px;
  font-weight:bold;
  color:#f18500;
}

h3 {
  margin-bottom:5px;
  margin-top:15px;
  font-weight:bold;
  color:#666;
}


p {
	font-family: Open Sans Condensed;
  margin-bottom:15px;
}

th {
  font-weight:bold;
}

/*.item-page {
  max-width: 62%;
  margin: auto;
}*/

.content-category th, td {
  height:2.5em;
  padding: 10px 5px;
  border-bottom: 1px solid#eeeeee;
}

.content-category a {
  text-decoration: none;
}

.content-category table {
  width:100%;
}

.content-category .cat-list-row0 {
  /*background-color:#eeeeee;*/
}

.banner-image {
	background-color:#bfbfbf;
}

.banner-over {
	width: 90%;
	height: 40px;
	color: #bfbfbf;
	margin: auto;
	padding-top: 210px;
}

.banner-text {
	color: #fff;
	height: 20px;
	margin: auto;
    margin-bottom: auto;
	width: 100%;
	max-width: 200px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #333;
	margin-bottom: 5px;
	padding: 2px;
	opacity: 75%;
	border-radius: 5px;
}
	

.banner-button {
    width: 100%;
	max-width:180px;
	height:40px;
	border-radius:10px;
	border:1px solid #fff;
    text-align: center;
	background-color:#f18500;
	margin:auto;
	display: flex;
  	align-items: center;
  	justify-content: center;
}

.banner-button i {
	margin: 0 8px;
}

.banner-button, .banner-button i, .banner-button a, .banner-button a:visited {
	color:#fff;
}
	
.social-media-buttons {
    width:100%;
	max-width:220px;
	height:30px;
	margin: 5px auto;
    text-align: center;
	display: flex;
  	align-items: center;
  	justify-content: center;
}

.social-media-buttons i, .social-media-buttons a{
    font-size:30px;
	margin:0 auto;
	color:#fff;
	text-shadow: 0 0 2px #333;
}

.custom-leading-image {
  width:100vw;
  height:55px;
  overflow:hidden;
  position:relative;
}

.custom-leading-image img{
  position:absolute;
 /* top:-350px;*/
  right:0px;
}

.custom-leading-image-start{
  height:330px;
  background-image:url('../../../images/bgr.jpg');
  background-position:center;
  max-width:1280px;
  margin: auto;
}

.custom-leading-image-start img{
  /*top:-190px;*/
}

.grid {
  background-color: #3697b0;
  width:100vw;
  height:99vh;
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr;
  grid-template-rows:120px auto 50px;
  grid-template-areas:
    "top top top top"
    "content content content content"
    "footer footer footer footer";
}

.inner {
  width:95%;
  max-width:1280px;
  margin:auto;
}

.content.inner {
  max-width:1150px;
  font-family: Open Sans Condensed;
}

.querformat-links {
	float:left;
	width: 450px;
	height:auto;
	max-width:50%;
	margin: 5px;
	margin-right: 15px;
	font-size:0.8em;
	font-weight:normal;
	color:#333;
}

.querformat-rechts {
	float:right;
	width: 450px;
	height:auto;
	max-width:50%;
	margin: 5px;
	margin-left: 15px;
	font-size:0.8em;
		font-weight:normal;
	color:#333;
}

.hochformat-links {
	float:left;
	width: 200px;
	height:auto;
	max-width:30%;
	margin: 5px;
	margin-right: 15px;
	font-size:0.8em;
		font-weight:normal;
	color:#333;
}

.hochformat-rechts {
	float:right;
	width: 200px;
	height:auto;
	max-width:30%;
	margin: 5px;
	margin-left: 15px;
	font-size:0.8em;
		font-weight:normal;
	color:#333;
}
	
.umbruch {
	clear:both;
	}
	
.datum {
	background-color: #333;
	height: 25px;
	color: #fff;
	border-radius: 5px;
	display: inline-block;
	text-align: center;
	padding: 0 10px;
	margin-top: 10px;
}

.vollformat {
	width: 90%;
	height:auto;
	margin: 5px;
	margin-left: 15px;
	font-size:0.8em;
}

.mobile{display:none;}

.header-container {
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr;
  grid-template-rows:70px 50px;
  grid-template-areas:
  "header header header header"
  "ws-menu ws-menu ws-menu ws-menu";
  position:fixed;
  width:100vw;
  background-color: #3697b0;
  z-index:2;
  opacity: 90%;
}

header {
  grid-area: header;
  display:flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size:2rem;
}

.logo img {
  width:600px;
}

.logo a, .logo a:hover, .logo a:visited {
  color:#fff;
  text-decoration:none;
  font-weight:normal;
}

.ws-login {
  display:flex;
  justify-content: flex-end;
  align-items: center;
  color:#fff;
}


.ws-login div {
  padding-left:50px;
}

.ws-login a {
  color:#fff;
}

.ws-login a:hover, .ws-login a:active {
  color:#f18500;
}

.ws-menu {
  grid-area:ws-menu;
  font-size:1.8em;
  display:flex;
  justify-content:space-between;
  align-items: center;
  width:80%;
}

.menu {
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items: center;
}

.menu, .ws-menu a {
  color: #FFFFFF;
  text-decoration: none;
  font-weight:bold;
}

.menu li{
  padding: 5px;
}

.active a {
  font-weight: bold;
  color:#ffc782;
  text-shadow: 0 0 1px #000;
}

.content_container {
  width:100%;
  background-color: #eee;
  grid-area:content;
  color:#666;
  font-size: 1.8em;

}
.content {
  padding-top:25px;
  padding-bottom:25px;

}

.content li {
  padding: 10px 5px;
  margin-left:15px;
  border-bottom: 1px solid #fff;
}

.pagination li {
  padding:0;
}

.content-category .list-title a{
  font-weight: bold;
}

.button, .btn, .btn-primary {
  font-family: TeX Gyre Adventor,Arial,Helvetica,Verdana,sans-serif;
  font-size: 16px;
  margin: 15px 0px;
  min-height: 25px;
  padding: 3px 5px;
}

input, select, textarea  {
  min-height:25px;
  font-size:14px;
  color:#555;
  padding:3px 5px;
  border-radius: 4px;
  border:1px solid #666;
  max-width:394px;
}

select  {
  height:30px;
}

.control-group {
  margin-top:10px;
}

/* USER LOGIN */

#login_toggle {
  z-index:5;
  position:fixed;
  width:100vw;
  height:100vh;
  background:rgba(0, 0, 0, 0.6);
  top:0px;
  display:none;
}

.login-fields {
	clear:both;
  min-height:31px;
}

.login label {
	float:left;
	width:100%;
	margin-top:10px;
  margin-bottom:5px;
  }

  .content_container .login {
    width:400px;
    left:calc((100vw - 460px) / 2);
    display:none;
    position:fixed;
    top:75px;
    z-index:10;
    background:rgba(255, 255, 255, 0.95);
    /*background-image: url('../img/login_img.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;*/
    border-radius:4px;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    padding: 5px 10px 15px 30px;
  }

  .content_container .login:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -3;
    opacity: 0.95;
    background-color:rgba(255, 255, 255, 0.95);
    background-image: url('../img/login_img.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  #form-login-remember label {
    width:auto;
    margin:10px 0px;
  }

  #form-login-remember input {
    margin:8px;
  }

  #register_button {
   float:left;
   text-decoration:none;
   text-align:center;
   padding:3px 5px;
   border:solid 1px #ffffff;
   border-radius: 4px;
   margin: 5px 0px;
   font-weight:bold;
   font-size:16px;
   color:#E5FFFF;
   background-image:none;
   background-color:#ff7121;
   box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
   cursor:pointer;
    }

    #register_button a {
     text-decoration:none;
     text-align:center;
     color:#E5FFFF;
     cursor:pointer;
    }

    .login-button, #register_button {
      width:300px;
    }

    div.seminarman div#course_appform form#login-form ul {
    display: block;
    }

    div.seminarman div#course_appform form#login-form ul li{
    padding:0;
    }


/* Customize the label (the container) */
.css-checkbox {
  display: block;
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.css-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 2px;
  left: 0;
  height: 16px;
  width: 16px;
  background-color: #eee;
}

.css-checkbox:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.css-checkbox input:checked ~ .checkmark {
  background-color: #f18500;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.css-checkbox input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.css-checkbox .checkmark:after {
  left: 4px;
  top: 0px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/*---------------Seminarman Tooltips -----------------*/
.tip-wrap {
  width:100px;
  color:#666;
  text-align:center;
}

.tip-title {
  display:none;
}

.buttons a:hover, .favourites a:hover {
  color:#f18500;
}


/*-----------------FOOTER-----------------*/

.footer {
  grid-area:footer;
  font-size:1.2em;
  text-align:center;
}

.footer a, .footer a:visited, .footer a:active {
  color:#aaa;
}

.cpnb-buttons {
  margin-top:15px;
}

/* ---------------Benutzerkontolink ausblenden-----------------------*/

.item-731 {
  display:none;
}

@media (max-width: 767px){
	
  h2 {
	  margin-bottom:25px;
  }
  .item-731 {
    display:block;
  }


  .content_container {
    font-size:16px;
  }

  .cpnb-button,
  .cpnb-button-ok {
    padding: 6px;
    font-size:16px;
  }

  .grid {
   grid-template-rows:auto auto 50px;
  }

  .header-container {
   grid-template-rows:70px auto;
  }
  .menu {
    font-size:1.1rem;
    padding:0;
    transition: max-height 0.25s ease-out;
    max-height:0px;
    display:block;
    overflow:hidden;
  }


  .menu li {
    margin:0 40px 0 15px;
    border-bottom:1px solid #666;
  }

  .menu li:first-child {
    margin-top:15px;
  }

  .menu li:last-child {
    margin-bottom:15px;
  }

  .menu {display:block;}
  .desktop {display: none;}
  .logo  {font-size:1.6em;}
  .logo img {width:300px;}
  .mobile {display:block;}
  .content {
    min-height:calc(100vh - 145px);
  }

  .content_container .login {
    width:80%;
    left:5%;
    top:15px;
  }
  
  .banner-image {
	margin-top:70px;
}

  .custom-leading-image {
    top:70px;
  }

  .custom-leading-image .start{
    top:0px;
  }

  .custom-leading-image img{
    /*right:-300px;*/
  }
  
.querformat-links {
	width: 100%;
}

.querformat-rechts {
	width: 100%;
}

.hochformat-links {
	width: 100%;
}

.hochformat-rechts {
	width: 100%;
}

.querformat-links img {
	width: 95%;
	max-width:315px;
	float: none;
	margin: 15px 0;
}

.querformat-rechts img {
	width: 95%;
	max-width:315px;
	float: none;
	margin: 15px 0;
}

.hochformat-links img {
	width: 95%;
	max-width:315px;
	float: none;
	margin: 15px 0;
}

.hochformat-rechts img {
	width: 95%;
	max-width:315px;
	float: none;
	margin: 15px 0;
}

.umbruch {
	height:0px;
}

  .button, .btn, .btn-primary {
    font-size:16px;
  }

  /* USER LOGIN RESPONSIVE */

  .login-fields {
  	clear:both;
  }

  .login-fields label {
  	float:left;
  	width:100%;
  	margin-top:10px;
    margin-bottom:5px;
  }

  #remember-lbl, #remember {
    width:auto;
    margin-right:10px;
  }

  .login {
    padding:15px;
    width:90%;
    margin:auto;
    top:70px;
  }

  .login-button {
    width: calc(100% - 20px);
  }

  #register_button {
    width: calc(100% - 30px);
  }

  .login input {
    width: calc(100% - 30px);
  }

  #form-login-remember input {
    width: auto;
    margin-top:10px;
  }

  input, textarea {
    min-width: 0px;
    width: calc(100% - 20px);
  }

  input[type=checkbox] {
    width: auto;
  }

  input[type=radio] {
    width:auto;
    margin-right: 10px;
    margin-top: 11px;
    vertical-align: top;
  }

  .tip-wrap {
    position:absolute;
    margin-left:-100000px;
  }
}

#toggle{
  display:none;
}

#toggle:checked ~ .menu {
  max-height:1000px;
  transition: max-height 0.5s ease-in;
}



/*----------------------------------HACKS------------------------------------*/

input, textarea {
  font-size:16px !important;
}

input[type=text]:focus, textarea:focus {
  border: 1px solid #555;
  outline:none !important;
}

.list-edit, #adminForm .hasTooltip, #system-message-container {display:none;}

#cpnb_warningBoxBgOverlay {
  z-index:500;
}

#login-form input {
  min-width:0px;
}

#login-form .control-group {
  margin:0;
}

div#seminarman h2 {
    border-bottom: none;
  }

.tooltip {
    display: none!important;
  }

.popover {
    display:none !important;
  }

  #testbereich {
    background-color:#da8e63;
    width:350px;
    padding:10px;
  }

  #testbereich div {
    margin:10px;
  }

  #testbereich input {
    background-color:#fff;
    margin-top:5px;
  }