@charset "UTF-8";


/*
Generel colors
blue = #03a6b5
grey = #f0f0f0
darkgrey font = #4a4a4a


 =====  1 Global Rules & Definitions  ===================================== */

/* -----  1.1 Font Definitions  --------------------------------------------- */
/* Museo Slab */
@font-face {
    font-family: 'museo_slab500';
    src: url(../fonts/Museo_Slab_500_2-webfont.eot);
    src: url(../fonts/Museo_Slab_500_2-webfont.eot?#iefix) format('embedded-opentype'),
         url(../fonts/Museo_Slab_500_2-webfont.woff2) format('woff2'),
         url(../fonts/Museo_Slab_500_2-webfont.woff) format('woff'),
         url(../fonts/Museo_Slab_500_2-webfont.ttf) format('truetype'),
         url(../fonts/Museo_Slab_500_2-webfont.svg#museo_slab500) format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open_sans';
    src: url(../fonts/OpenSans-Regular-webfont.eot);
    src: url(../fonts/OpenSans-Regular-webfont.eot?#iefix) format('embedded-opentype'),
         url(../fonts/OpenSans-Regular-webfont.woff) format('woff'),
         url(../fonts/OpenSans-Regular-webfont.ttf) format('truetype'),
         url(../fonts/OpenSans-Regular-webfont.svg#open_sansregular) format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'open_sans';
    src: url(../fonts/OpenSans-Bold-webfont.eot);
    src: url(../fonts/OpenSans-Bold-webfont.eot?#iefix) format('embedded-opentype'),
         url(../fonts/OpenSans-Bold-webfont.woff) format('woff'),
         url(../fonts/OpenSans-Bold-webfont.ttf) format('truetype'),
         url(../fonts/OpenSans-Bold-webfont.svg#open_sansbold) format('svg');
    font-weight: bold;
    font-style: normal;

}



/* -----  1.2 Reset & Normalization  ---------------------------------------- */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
  list-style: none;
}

article, aside, details, figcaption, figure,
footer, header, main, menu, nav, section, summary {
  /* Add correct display for IE 9- and some newer browsers */
  display: block;
}

body{
  font-size: 18px;
  color:#3D4748;
  font-family: 'open_sans';
}





/* -----  1.3 General Typography  ------------------------------------------- */

h1{
  color: #03a6b5;
  outline: none;
  border: none;
  padding-bottom: 20px;
  font-family: 'museo_slab500';
  font-size: 36px;
}

h2{
  color: #3D4748;
  font-family: 'museo_slab500';
  font-size: 24px;
  margin-left: -20px;
}

.col-sm-offset-1 h2{
  margin-left: 0px;
}

/* -----  3.2 Menu  --------------------------------------------------------- */

.navigation {
  font-weight: 500;
  background-color: #03A6B5;
  color: #F0F0F0;
  font-family: 'museo_slab500';
  font-size: 18px;
}

ul.menu{
margin:10px 0px;
}

#kontakt .errorMessage {
    background: rgba(199,21,133,0.1);
    color: #c71585;
    margin-bottom: 20px;
}
#kontakt .error{
  border: 1px solid #c71585;
}

#kontakt .successMail {
    background: rgba(3,166,181,0.1);
    color: #03A6B5;
    padding: 10px 20px;
    margin-bottom: 20px;
    border: 1px solid #03A6B5;
    text-align: center;
}

.branding.column {
    padding: 5px 0px;
}

.menu-item {
  display: inline-block;
  margin: 5px 30px 5px 0px;
}

.menu-item a {
  border-bottom: 0;
  color: #F0F0F0;
}
.menu-item a:hover {
  color: #F0F0F0;
}

.menu-item.is-active a {
  border-bottom: 2px solid #F0F0F0;
}
/* -----  3.2 Button  --------------------------------------------------------- */
a.button{
    cursor: pointer;
    float: right;
    color: #03a6b5;
    text-transform: uppercase;
    border: 1px solid #03a6b5;
    padding: 10px;
    font-family: 'museo_slab500';
    font-size: 24px;
}
/* -----  3.2 Section  --------------------------------------------------------- */
#ausbildung{

}
#sprachen{
  background: #03a6b5;
  color: #F0F0F0;
  position: relative;
}
#sprachen .hands{
  width: 450px;
  float: right;
}
#sprachen .text_languages{
  clear: both;
  margin-bottom: 40px;
}
#sprachen h1{
  color: #F0F0F0;
}

.morecontent span,
.moreellipses {
  display: none;
}
.morecontent span.there {
  display: inline;
}
.morelink {
  display: block;
  text-align: center;
  color: white;
}
.morelink:hover,
.morelink:focus,
.morelink:active {
  color: white;
}
.morelink::after { 
    content: url(../pfeil.svg);
    display: block;
}

.morelink.less::after { 
  content:'';
  display: none;
}

.morelink.less::before { 
    content: url(../pfeil.svg);
    /* Safari */
    -webkit-transform: rotate(-180deg);

    /* Firefox */
    -moz-transform: rotate(-180deg);

    /* IE */
    -ms-transform: rotate(-180deg);

    /* Opera */
    -o-transform: rotate(-180deg);

    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=6);

    display: block;
}
.moreellipses.there{
  display: inline-block;
}

#bernadette .figur img{
  margin-top: -160px;
  height: 465px;
  float: right;
  
}
#bernadette .kontaktbutton{
    padding: 10px 48px;
    border: none;
    position: relative;
    margin-top: 20px;
}
#bernadette h1{
  margin-top: 80px;
}
#bernadette .kontaktbutton::before { 
    content: url(../1_bernadette/Kontakt.svg);
    position: absolute;
    top: 0px;
    left: 0px;
}
#felder{
  background: #f0f0f0;
}
#felder h1{
  text-align: right;
}
#felder li::before,
#ausbildung li::before{
    content: url(../3_felder/Markierungskreis.svg);
    position: absolute;
    display: inline-block;
    top: 2px;
    left: 0px;
}
#felder li,
#ausbildung li{
    line-height: 26px;
    position: relative;
    padding-left: 34px;
    margin:18px 0px;
}

#ausbildung .container{
  background: url(../4_ausbildung/ausbildung.svg) no-repeat right bottom;
  background-size: 250px;
}

#kontakt{
  background: #f0f0f0;
}

.footer{
  text-align: center;
  padding: 18px 0px;
  font-weight: 500;
  color: #03A6B5;
  font-family: 'museo_slab500';
  font-size: 18px;
  border-top: 1px solid #3D4748;
}

.container.default {
    margin-bottom: 40px;
    margin-top: 40px;
}

a{
  color: #03A6B5;
}
a:hover{
  color: #03A6B5;
}



section{
  padding: 20px 0px;
}



/* -----  3.2 Form  --------------------------------------------------------- */

.uniform__potty {
    position: absolute;
    left: -9999px;
}
label, input, textarea {
    display: block;
    width: 100%;
}
.uniform__potty {
    position: absolute;
    left: -9999px;
}
.error {
    border: 1px solid red;
}

#kontakt h1{
    text-align: center;
}
#kontakt input[type=submit] {
  margin: 18px 0px;
  line-height: 50px;
  text-align: center;
  font-weight: 500;
  background-color: #03A6B5;
  color: #F0F0F0;
  font-family: 'museo_slab500';
  font-size: 18px;
  border:2px solid #03A6B5;
}
#kontakt input[type=submit]:hover {
  background-color: #F0F0F0;
  color: #03A6B5;
}
#kontakt input,
#kontakt textarea{
    background: #d8d8d8;
    line-height: 46px;
    margin-bottom: 18px;
    padding: 0px 10px;
    outline: none;
}
#kontakt .write_mail a,
#kontakt .write_mail a:hover{
  color:#3D4748;
  text-decoration: underline;
}

#kontakt .write_mail a:hover{
  opacity: 0.5;
}
#kontakt textarea{
    height: 190px;
}

#kontakt .write_mail{
  text-align: right;
}

#kontakt form,
#kontakt form label{
  font-size: 18px;
  color: #3D4748;
  font-family: 'open_sans';
  font-weight: normal;
}

#kontakt input#checkbox {
    display: inline;
    /* float: left; */
    width: auto;
}

#kontakt .clap.no-check{
  display: none;
}
#kontakt .clap{
  display: block;
}


@media (max-width: 768px){
  #bernadette .figur img{
    display: none;
  }
  #bernadette h1 {
    margin-top: 20px;
  }
  h2{
    margin-left: 0px;
  }
  .row {
    margin-right: 0px;
    margin-left: 0px;
  }
}

@media (max-width: 450px){
  #ausbildung .container{
    background-size: 150px;
  }
  h1,
  #felder h1{
    text-align: center;
  }
  #sprachen .hands{
    width: 200px;
    display: block;
    margin: auto;
    float: none;
  }
}