/*! bielefeld.css v1.0.1

/*
 * deteringdesign GmbH
 * Bolbrinkersweg 5
 * 33617 Bielefeld
 *
 * Telefon 0521.94612-18
 * philipp@deteringdesign.de
 * www.deteringdesign.de
 */

/* ==========================================================================
   Farben
   ========================================================================== */
/*

ggf. als Variable in CSS oder LESS deklarieren

BI_01a rgb(227,0,20) #e30014
BI_01b rgb(196,13,14) #c30c0e
BI_01c rgb(174,15,10) #ae0f09

BI_02a rgb(241,135,0) #f18700
BI_02b rgb(234,123,0) #ea7a00
BI_02c rgb(223,108,2) #df6b02

BI_03a rgb(235,189,0) #ebbd00
BI_03b rgb(224,174,0) #dfae00
BI_03c rgb(215,157,0) #d79c00

BI_04a rgb(162,198,23) #a2c516
BI_04b rgb(148,187,27) #93ba1b
BI_04c rgb(130,173,31) #82ad1e

BI_05a rgb(110,171,39) #6eaa27
BI_05b rgb(97,162,40) #61a128
BI_05c rgb(90,154,39) #5a9a27

BI_06a rgb(0,131,50) #008231
BI_06b rgb(0,124,47) #007b2f
BI_06c rgb(0,110,43) #006d2b

BI_07a rgb(0,87,43) #00562b
BI_07b rgb(0,79,37) #004e25
BI_07c rgb(0,69,30) #00441d

BI_08a rgb(109,190,151) #6cbd97
BI_08b rgb(86,178,144) #55b28f
BI_08c rgb(61,160,122) #3ca07a

BI_09a rgb(30,188,239) #1dbbee
BI_09b rgb(0,175,234) #00aeea
BI_09c rgb(0,160,216) #009fd7

BI_10a rgb(0,145,214) #0091d5
BI_10b rgb(0,141,209) #008dd0
BI_10c rgb(0,129,191) #0081bf

BI_11a rgb(0,59,121) #003b78
BI_11b rgb(0,53,112) #003570
BI_11c rgb(15,38,92) #0f265c

BI_12a rgb(106,19,98) #691361
BI_12b rgb(95,18,93) #5f125d
BI_12c rgb(71,15,81) #470f50

BI_13a rgb(206,0,127) #cd007e
BI_13b rgb(192,2,123) #bf017a
BI_13c rgb(167,6,111) #a6066e

BI_14a rgb(129,163,195) #81a3c2
BI_14b rgb(110,147,178) #6d92b2
BI_14c rgb(99,136,169) #6287a9

BI_15a rgb(188,170,129) #bca981
BI_15b rgb(171,153,113) #ab9871
BI_15c rgb(150,132,92) #95835c

BI_16a rgb(96,129,146) #5f8092
BI_16b rgb(77,112,129) #4d7081
BI_16c rgb(67,98,114) #426171

BI_17a rgb(119,150,134) #769686
BI_17b rgb(103,131,117) #668274
BI_17c rgb(86,111,99) #566e62

BI_18a rgb(144,40,52) #902833
BI_18b rgb(132,40,41) #832728
BI_18c rgb(99,31,30) #631e1d

BI_19a rgb(109,47,13) #6d2e0d
BI_19b rgb(102,41,7) #662906
BI_19c rgb(77,29,0) #4c1d00

BI_20a rgb(101,80,59) #654f3b
BI_20b rgb(82,65,47) #52402e
BI_20c rgb(65,50,34) #403121

BI_21a rgb(170,178,135) #a9b286
BI_21b rgb(152,160,121) #97a079
BI_21c rgb(139,146,111) #8a926e
*/

/* ==========================================================================
   Typografie Cera Bielefeld
   ========================================================================== */

@font-face {
  font-family: 'CeraBielefeld-Web';
  src: url('../webfont/CeraBielefeldWeb-Regular.eot'); /* IE9 Compat Modes */
  src: url('../webfont/CeraBielefeldWeb-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../webfont/CeraBielefeldWeb-Regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../webfont/CeraBielefeldWeb-Regular.woff') format('woff'); /* Pretty Modern Browsers */
}

@font-face {
  font-family: 'CeraBielefeld-Web-Italic';
  src: url('../webfont/CeraBielefeldWeb-RegularItalic.eot'); /* IE9 Compat Modes */
  src: url('../webfont/CeraBielefeldWeb-RegularItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../webfont/CeraBielefeldWeb-RegularItalic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../webfont/CeraBielefeldWeb-RegularItalic.woff') format('woff'); /* Pretty Modern Browsers */
}

@font-face {
  font-family: 'CeraBielefeld-Web-Light';
  src: url('../webfont/CeraBielefeldWeb-Light.eot'); /* IE9 Compat Modes */
  src: url('../webfont/CeraBielefeldWeb-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../webfont/CeraBielefeldWeb-Light.woff2') format('woff2'), /* Super Modern Browsers */
       url('../webfont/CeraBielefeldWeb-Light.woff') format('woff'); /* Pretty Modern Browsers */
}

@font-face {
  font-family: 'CeraBielefeld-Web-Bold';
  src: url('../webfont/CeraBielefeldWeb-Bold.eot'); /* IE9 Compat Modes */
  src: url('../webfont/CeraBielefeldWeb-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../webfont/CeraBielefeldWeb-Bold.woff2') format('woff2'), /* Super Modern Browsers */
       url('../webfont/CeraBielefeldWeb-Bold.woff') format('woff'); /* Pretty Modern Browsers */
}

/* Wichtig: font-weight Reset */
h1, h2 ,h3, h4, h5, h6, strong, b, i {
    font-weight: normal;
    font-style: normal;
}

body, p {
  font-family: 'CeraBielefeld-Web', Arial, sans-serif;
}

strong, b {
  font-family: 'CeraBielefeld-Web-Bold', Arial, sans-serif;
}

i {
  font-family: 'CeraBielefeld-Web-Italic', Arial, sans-serif;
}

/*––––––––––––––––––––––––––––––––––––––––––––––*/

.h1wrap {
  line-height: 1.3;
  border-left: 20px solid #e30014;
}
.h1wrap h1 {
  font-family: 'CeraBielefeld-Web-Bold', Arial, sans-serif;
  font-size: 80px;
  color: white;
  background-color: #e30014;
  padding: 4px 0;
  color: #fff;
  display: inline;
  margin: 0;
}
.h1wrap h1 span {
  position: relative;
  left: -10px;
}

/*––––––––––––––––––––––––––––––––––––––––––––––*/

h2 {
  font-family: 'CeraBielefeld-Web-Light', Arial, sans-serif;
  font-size: 40px;
}

hr.bielefeld-hr {
 border-top: 5px solid #e30014;
}

/* ==========================================================================
   Schrifttest Medium/Bold wegen Windows
   ========================================================================== */

@font-face {
  font-family: 'CeraBielefeld-Web-MediumBold';
  src: url('../testfont/CeraBielefeldWeb-Mediumfetter.eot'); /* IE9 Compat Modes */
  src: url('../testfont/CeraBielefeldWeb-Mediumfetter.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../testfont/CeraBielefeldWeb-Mediumfetter.woff2') format('woff2'), /* Super Modern Browsers */
       url('../testfont/CeraBielefeldWeb-Mediumfetter.woff') format('woff'); /* Pretty Modern Browsers */
}

@font-face {
  font-family: 'CeraBielefeld-Web-Medium';
  src: url('../testfont/CeraBielefeldWeb-Medium.eot'); /* IE9 Compat Modes */
  src: url('../testfont/CeraBielefeldWeb-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../testfont/CeraBielefeldWeb-Medium.woff2') format('woff2'), /* Super Modern Browsers */
       url('../testfont/CeraBielefeldWeb-Medium.woff') format('woff'); /* Pretty Modern Browsers */
}

.bold {
  font-size: 14px;
  font-family: 'CeraBielefeld-Web-Bold', Arial, sans-serif;
}
.mediumbold {
  font-size: 14px;
  font-family: 'CeraBielefeld-Web-MediumBold', Arial, sans-serif;
}
.medium {
  font-size: 14px;
  font-family: 'CeraBielefeld-Web-Medium', Arial, sans-serif;
}
.regular {
  font-size: 14px;
  ont-family: 'CeraBielefeld-Web', Arial, sans-serif;
}