@import url("font.css");
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
:focus {
  outline: 0;
}
ins {
  text-decoration: none;
}
del {
  text-decoration: line-through;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/*End Reset*/
/* apply a natural box layout model to all elements */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
html{
  font-family: 'Source Serif Pro', serif;
  background: #F5F5F5;
  font-size: 16px;
  line-height: 25px;
  color: #333;
}
#wrapper{
  width: 535px;
  margin: auto;
  margin-top: 120px;
}
#content{
  width: 100%;
  height: 345px;
  float: left;
  background: #FFF;
  padding: 190px 30px 30px 30px;
}
#content h1{
  width: 100%;
  font-size: 60px;
  font-weight: 400;
  color: #209ee3;
  display: block;
  margin-bottom: 30px;
}
#content p{
  line-height: 22px;
}
#ad_l{
  width: 40%;
  float: left;
}
#ad_r{
  width: 50%;
  float: left;
}
.con_toggle{
  width: 100%;
  height: 20px;
  float: left;
  background: #BCBCBC;
  color: #FFF;
  padding: 2px 0px 0px 30px;
  cursor: pointer;
}
.toggle{
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
.toggle .active{
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
#contact{
  visibility: hidden;
  height: 0px;
  opacity: 0;
    -webkit-transition: height .5s ease-in-out, opacity .5s ease-in-out;
  -moz-transition: height .5s ease-in-out, opacity .5s ease-in-out;
  transition: height .5s ease-in-out, opacity .5s ease-in-out;
}
#contact.expand{
  height: 380px;
  width: 525px;
  visibility: visible !important;
  margin-left: 5px;
  overflow: hidden;
  opacity: 1;
}
label{
  width: 50%;
  margin-top: 20px;
  float: left;
}
textarea{
  width: 100%;
  height: 150px;
  resize: none;
    font-family: 'Source Serif Pro', serif;
  font-size: 16px;
  border: none;
  -webkit-appearance: none;
}
input[type="text"]{
  height: 30px;
  font-family: 'Source Serif Pro', serif;
  font-size: 16px;
  margin-bottom: 30px;
  border: none;
  -webkit-appearance: none;
}
input[type="submit"]{
  width: 48%;
  height: 30px;
  margin-top: 20px;
  font-family: 'Source Serif Pro', serif;
  font-size: 16px;
  background: #209ee3;
  color: #FFF;
  border: none;
  cursor: pointer;
  -webkit-appearance: none;
-webkit-transition: background .5s ease-in-out;
-moz-transition: background .5s ease-in-out;
transition: background .5s ease-in-out;
}
input[type="submit"]:hover{
  background: #24b2ff;
}
#name, #nachname{
  width: 48%;
  float: left;
}
#contact{
  padding: 30px;
  float: left;
  background: #DDDDDD;
}
#nachname{
  float: right;
}
#mail{
  width: 100% !important;
}
#contact.expand::after{
  content: '';
  width: 5px;
  height: 5px;
  background: url('../img/ecke_r.png');
  display: block;
  position: absolute;
  margin: -353px 0px 0px 495px;
}
#contact.expand::before{
  content: '';
  width: 5px;
  height: 5px;
  background: url('../img/ecke_l.png');
  display: block;
  position: absolute;
  margin: -30px 0px 0px -35px;
}
@media only screen and (max-width: 600px) {
  #wrapper{
    width: 90%;
    margin: 5%;
  }
  #content{
    padding: 100px 30px 30px 30px;
    height: auto;
  }
  #ad_l{
    width: 100%;
    float: left;
  }
  #ad_r{
    width: 100%;
    float: left;
    margin-top: 30px;
  }
  #contact.expand{
    float: left;
    width: 100%;
    margin: 0px;
  }
  #contact.expand::before, #contact.expand::after{
    content: '';
    width: 0px;
    height: 0px;
    margin: 0px;
    margin-right: 0px;
    margin-left: 0px;
    background: none;
  }
  .con_toggle {
    width: 100%;
    height: 30px;
    float: left;
    background: #BCBCBC;
    color: #FFF;
    padding: 7px 0px 0px 30px;
  }
}
.success{
    -webkit-transition: background .5s ease-in-out;
  transition: background .5s ease-in-out;
  background: #7ECE00 !important;
}
.err{
    -webkit-transition: border .5s ease-in-out;
    transition: border .5s ease-in-out;
    background: #FF4136 !important;
}
#bot p{
  color: #848484;
  margin-top: 5px;
  position: absolute;
  float: left;
}