/* THE BASIC TYPO */
body {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  color: #4c4c4c;
  position: relative;
}

/* HEADER */
.header {
  padding: 0rem 15px;
  padding-bottom: 0;
  color: #000;
  background-color: #b00000;
}
.claim-wrapper 
{height:60px;}
.claim-image {position:absolute;
bottom:0}
.claim {
  font-size: 1rem;
  text-transform: uppercase;
  line-height: 1.1;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 300;
  position: absolute;
  bottom: 10px;
  display: block
}

/* Small devices (landscape phones, 544px and up) */
@media (min-width: 544px) {
  .claim-wrapper 
{height:100px;}
  .claim {
    font-size: 1.5rem;
  }
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
  .claim-wrapper 
{height:150px;}
  .claim {
    font-size: 2rem;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .claim-wrapper 
{height:200px;}
  .claim {
    font-size: 3rem;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .claim-wrapper 
{height:250px;}
  .claim {
    font-size: 3.5rem;
  }
}


p, ul, li, td {
    overflow-wrap: break-word;
  -ms-word-break: break-all;
  -webkit-hyphens: auto !important;
  -moz-hyphens: auto !important;
  -ms-hyphens: auto !important;
  hyphens: auto !important;}

img {
  max-width: 100%;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-family: inherit;
  font-weight: 700;
  line-height: 1.1;
  color: #000;
}
h1 {
  font-size: 2.25rem;
  margin-top: 0rem;
  margin-bottom: 1rem;
}
h1::after {
  display: block;
  width: 119px;
  height: 4px;
  margin-top: 19px;
  content: " ";
  background-color: #b00000;
}
h2 {
  font-size: 1.4rem;
  border-bottom: 4px solid #deded9;
  padding-bottom:0.5rem;
}
.h2-big {
  font-size: 2.25rem;
  margin-top: 0rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
}

.right-column h2 {
  font-size: 1.4rem;
  line-height:1.7rem;
  margin-top: 0.8rem;
  margin-bottom: 0.5rem;
  border-bottom:none;
}

.right-column h2::after {
  display: block;
  width: 119px;
  height: 4px;
  margin-top: 19px;
  content: " ";
  background-color: #deded9;
}

h3 {
  font-size: 1.2rem;

}


.lead {
  font-size: 1.4rem;
  line-height: 1.5;
  color: #767573;
  font-weight: 500;
}
a {
  color: #b00000;
  text-decoration: none;
  border-bottom: 1px solid #b00000;
}
.header a {
  color: #b00000;
  text-decoration: none;
  border-bottom: none;
}
.text a {
  text-decoration: underline;
}
a:hover {
  color: #9D0000;
  text-decoration: none;
}
a:focus {
  color: #9D0000;
  outline: none;
}
hr {
  border-top: 1px dotted #b00000 !important;
  margin-top: 2rem
}

ul {
    padding-left: 1.3rem;
    list-style-type: none;
}

ul li:before {
    content: '\2014';
    position: absolute;
    margin-left: -20px;
}

/* SPECIGIC TYPO */
.main-content {
  padding-top: 3rem;
}
/* fhnw logo
================================================== */
#logo {
  float: left;
  margin-right: 9px;
  max-width: 77px;
}
#logo-top p {
  font-size: 12px;
  line-height: 12px;
  font-weight: 300;
  margin: 0 0 0 9px;
  padding-top: 17px;
  white-space: nowrap;
}
#logo-bottom p {
  font-size: 12px;
  line-height: 12px;
  font-weight: 300;
  margin: 0 0 10px;
  padding-top: 5px;
  white-space: nowrap;
}
#logo-top a, #logo-bottom a {
  color: #ffffff;
  text-decoration: none;
}
.top-image .image-container img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
.top-image {
  background: url(../myUploadData/images/top_bilder/top_imedias_0.jpg);
  background-size: cover;
  background-position: center;
}
.top-page-title-icon-img {
  position: absolute;
  bottom: 0;
}
/* 
Extra small devices (portrait phones, less than 544px) 
No media query since this is the default in Bootstrap because it is "mobile first"
*/


/* footer */
.footer {
  min-height: 300px;
  background-color: #000000;
  color: #ffffff;
  margin: 0;
  padding: 0;
  margin-top: 100px;
  padding-bottom:60px;
}
.footer h1, .footer h2, .footer h3, .footer p {
  color: #ffffff;
}
.footer h1, .footer h2, .footer h3 {
  font-weight: 600;
  margin-top: 3.3rem;
  margin-bottom: 1rem;
}
.footer h3 {
  font-size: 1.5rem;
}
.footer p {
  font-weight: 300;
}
.footer a:link, .footer a:visited {
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px solid #ffffff;
}
.crop {
  border-radius: 50%;
  overflow: hidden;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}
.team_img {
  object-fit: cover;
  margin: -20px;
  max-width: 240px;
}
.team .wrapper {
  text-align: center;
}
.crop_big {
  border-radius: 50%;
  overflow: hidden;
  width: 300px;
  height: 300px;
  margin: 0 auto;
}
.team_img_big {
  object-fit: cover;
  margin: -20px;
  max-width: 340px;
}
/* EVEN MORE STYLES*/
.breadcrumb {background:transparent;}

h2 {
  margin-top: 2rem;
}
.list-group-item:first-child {
  border-top: none;
}
.footer * {
  color: #cccccc !important;
}
#nav-right {
  margin-top: 1rem;
  margin-bottom: 2rem;
}
#nav-right ul {
  margin: 0;
  padding: 0;
  list-style-type: none
}
#nav-right ul li a {
  border-bottom: 1px solid #4c4c4c;
  font-size: 1.5rem;
  font-weight: normal;
}
#nav-right ul li a:hover {
  border-bottom: 4px solid #cccccc;
  text-decoration: none;
}
.nav_active {
  border-bottom: 4px solid #cccccc !important;
}
img {
  max-width: 100%
}
td {
  vertical-align: top
}
.small_text p, .small_text td {
  font-size: 0.8rem;
  line-height: 1.3
}
table td {
  border: 0px solid red;
}
th, td {
  line-height: 1.625rem
}
.content a, .content p a {
  font-weight: 500;
  color: #b00000;
  text-decoration: none;
  background-color: transparent;
  border-bottom: 1px solid #999999;
}


a[href$=".pdf"] {
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}


a[href$=".pdf"]::before, 
.right-column a[href$=".pdf"]::before {
background-image: url(../myGfx/arrow-down.svg);
background-repeat: no-repeat;
background-position: 0 6px;  
background-size: 12px 12px;  
display: inline-block;
height: 22px;
margin-right: 3px;
padding-left:1rem;  
content: "PDF | ";
}


a[href$=".xls"]::before, 
a[href$=".xlsx"]::before, 
.right-column a[href$=".xls"]::before,
.right-column a[href$=".xlsx"]::before {
background-image: url(../myGfx/arrow-down.svg);
background-repeat: no-repeat;
background-position: 0 6px;  
background-size: 12px 12px;  
display: inline-block;
height: 22px;
margin-right: 3px;
padding-left:1rem;  
content: "XLS | ";
}

a[href$=".doc"]::before, 
a[href$=".docx"]::before, 
.right-column a[href$=".doc"]::before,
.right-column a[href$=".docx"]::before {
background-image: url(../myGfx/arrow-down.svg);
background-repeat: no-repeat;
background-position: 0 6px;  
background-size: 12px 12px;  
display: inline-block;
height: 22px;
margin-right: 3px;
padding-left:1rem;  
content: "DOC | ";
}

a[href$=".zip"]::before,
.right-column a[href$=".zip"]::before {
background-image: url(../myGfx/arrow-down.svg);
background-repeat: no-repeat;
background-position: 0 6px;  
background-size: 12px 12px;  
display: inline-block;
height: 22px;
margin-right: 3px;
padding-left:1rem;  
content: "ZIP | ";
}

.right-column a[href*=".cfm"]::before,
.right-column a[href$=".cfm"]::before,
.right-column a[href^="#"]::before 
{
  background-image: url(../myGfx/arrow-right.svg);
  background-repeat: no-repeat;
  display: inline-block;
  height: 12px;
  width: 12px;
  margin-right: 3px;
  content: "";
}

a[href^="http://"]:not([href*="mysite.com"])::before,
a[href^="https://"]:not([href*="mysite.com"])::before, 
a[href^="//"]:not([href*="mysite.com"])::before
{
background-image: url(../myGfx/arrow-external.svg);
background-repeat: no-repeat;
background-position: 0 6px;  
background-size: 12px 12px;  
display: inline-block;
height: 22px;
margin-right: 3px;
padding-left:1rem;  
content: "www | ";

}

/*
a[href$=".pdf"]::after {
  margin-right: 3px;
  content: " [PDF]";
}

a[href$=".doc"]::after {
  margin-right: 3px;
  content: " [DOC])";
}

a[href$=".xls"]::after {
  margin-right: 3px;
  content: " [XLS]";
}

.content a[href$=".cfm"]::after {
  margin-right: 3px;
  content: "";
} 
*/

/*
a[href^="http://"]:not([href*="www.schreiben.zentrumlesen.ch"])::after,
a[href^="https://"]:not([href*="www.schreiben.zentrumlesen.ch"])::after, 
a[href^="//"]:not([href*="www.schreiben.zentrumlesen.ch"])::after
{
  margin-right: 3px;
  content: " (www)";
}
*/

h1 + p a[href$=".pdf"] {
  padding-left: 0rem !important;
}
ul + a[href$=".pdf"] {
  display: inline-block;
  padding-left: 24px !important;
  list-style-image: url("/sysModules/sysGfx/icons/svg/black/pdf.svg");
  background-repeat: no-repeat;
  background-position: 0px 0px;
}


h1::after {
  display: block;
  width: 119px;
  height: 4px;
  margin-top: 19px;
  content: " ";
  background-color: #b00000;
}

h1 + p {
  font-size: 1.5rem;
}

.boxViolett {
  padding: 1rem;
  background-color: rgba(255,0,0,0.1);
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.boxViolett li {
  list-style-type: none;
  list-style-image: url(../myGfx/listBullet-B.png);
  margin-left: 25px;
}

.boxViolett li:before {content: '';}

.boxViolett .noB li{

    list-style-image: url() !important;
  margin-left: 0 !important;
}

.boxViolett .noB li:before {content: 'â??';}



.boxGrau {
  padding: 1rem;
  background-color: #deded9;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
h1 + p.boxGrau {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/*fake-table*/
.fake-table .row {
  margin: 0
}
.fake-table .row div {
  border: 1px solid lightgrey;
  padding: 5px;
}

/*beispiele: kleinere schrift*/
.font-small {
  font-size: 90%
}
p+.link-comment {
  margin-top: -0.5rem;
}
.link-comment {
  margin-top: 0.1rem;
  font-size: 90%;
  line-height: 1.2;
  margin-bottom: 0.5rem; /*ergaenzung von res, 5.9.2018*/
}

/*ergaenzung von res, 8.1.2019*/
.kachel { 
  max-width: 364px;
  min-width: 50%;
  padding-right:0.3rem;
  float: left;
}

.kachel-clear{
  clear: left;
  padding-top: 1.5rem;
    }
  

/*interner Link in linker Spalte mit Pfeil*/
/*.right-column a[href*=".cfm"]::before,
.right-column a[href$=".cfm"]::before,
.right-column a[href^="#"]::before*/
.link_intern_left
{
  background-image: url(../myGfx/arrow-right.svg);
  background-repeat: no-repeat;
  display: inline-block;
  height: 12px;
  width: 12px;
  margin-right: 3px;
  content: "";}

.link-extern-left {
}