/*
Theme Name: Pferdeklinik
Author: Pferdeklinik Thurland
Description: 
Version: 1.0
Text Domain: pferd
Tags: Pferdeklinik, theme
*/
html, body {
  height: 100%;
}
*  {
  margin: 0px;
  padding:0px;
  box-sizing: border-box;
}
p, li {
    line-height: 1.7;
	font-size:1.2em;
}

#wrap {
  min-height: 100%;
  margin-left: 0px;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  
  /* the bottom margin is the negative value of the footer's height */
}
#main {overflow:auto;
  padding-bottom: 10px;}  /* must be same height as the footer */

#footer {position: relative;
  margin-top: 125px; /* negative value of footer height */
  height: 125px;
  clear:both;
  background: #0f428d url('images/footer_bg.jpg') repeat-x top center;} 

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
#top_horses{
  height:120px;
  background: url('images/horses_top.png') no-repeat top center;
}
#top_horses h1{padding-top:20px;margin-left:55px;}
#top_horses h1 a{
display: block;
width: 310px;
height: 57px;
overflow: hidden;
text-indent: -999em;
white-space: nowrap;
background: url('images/logo.png') 0 0 no-repeat;
}
#bottom_horses{
  display:block;
  height:120px;
  width:754px;
  background: url('images/horses_bottom.png') no-repeat top center;
  position:absolute;
  left:0;
  top:-110px;
}
.rights{padding-top:65px;color:#80A1DC;margin:0 auto;width:400px;text-align:center;}
#header{ 
  height:135px;
  background: url('images/header_bg.jpg') repeat-x top center;
}
.rights a {color:#FFF; 
text-decoration:none}

#header .wrap{
  padding-top:22px;
}
#header .wrap a {
    color: #fff;
    font-size: 15px;
    text-decoration: none;
    font-family: monospace;
}


body,td,th {
  font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
  font-size: 13px;
  color:#666666;
}
.wrap{width:755px;position:relative;margin:0 auto;position:relative;}
.content-area{
    width:755px;
    position:relative;
    margin: 10px auto;
}
.content-area h1{
color:#0f428d;
text-transform:uppercase;
font-size:19px; /* old value 21px */
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
/*text-shadow: 1px 1px 1px #c2c2c2;*/
margin-bottom: 15px;
padding-bottom:13px;
background: url('images/heading.png') left 24px no-repeat;
}
.content-area h2{
  font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
  font-size:15px;
  color:#333333;
  text-transform:uppercase;
  padding:10px 0 5px 0;
}
.content-area h3{
  font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
  font-size:14px;
  color:#333333;
  text-transform:uppercase;
  padding-bottom:5px;
}
.content-area td,.content-area th{padding:5px;}
.content-area p {margin:0 0 1.5em;}
.content-area ul, .content-area ol {margin:0 1.5em 1.5em 0;padding-left:1.5em;}
.small_text{color:#676767;font-size:11px;}
#right{width:155px;float:right;margin-right:55px;}
#right * {font-size:12px;color:#676767;font-family: Trebuchet MS, Arial, Helvetica, sans-serif;}
#right h1{
  font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
  font-size:14px;
  color:#0f428d;
  text-transform:uppercase;
  padding-bottom:10px;
}

#right td,#right th{padding:5px;}
#right p {margin:0 0 1.5em;}
#right ul, #right ol {margin:0 1.5em 1.5em 0;padding-left:1.5em;}

#nav{ 
    padding:15px 0 25px 0;
}
#nav ul{
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: top;
}
#nav ul li{
  display: list-item;
  text-align: -webkit-match-parent;
  list-style: none;
  margin: 0;
  padding: 0;
  float: left;
}
#nav ul li a{
  font-size:15px;
  font-weight:bold;
  font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
  text-decoration:none;
  color:#666666;
  padding-left:18px;
  background: url('images/bullet.png') 2px 2px no-repeat;
  height:18px;
  line-height:18px;
  margin-right:14px;
}
.content-area a,#right a{color:#16428d;text-decoration:none;}
#nav ul li a:hover,#nav ul li a.selected{color:#16428d;}
.clear{clear:both}  
a img{border:0}
a span#lupe { 
  background-image:url('images/lupe.png'); 
  background-repeat:no-repeat; 
  width:20px; 
  height:20px; 
  display:none;
  position:absolute; left:8px; top:8px;
}
a.totop{
  background-image:url('images/totop.png'); 
  background-repeat:no-repeat; 
  width:24px; 
  height:24px; 
  position:absolute;
  display:block;
  right:55px;
  top:60px;
}
#top_horses .home img {
    margin-top: 23px;
    max-width: 270px;
}
#menu-btn {
    display: none;
    background: transparent;
    height: 50px;
    width: 100%;
    cursor: pointer;
    border: none;
    transition: all .8s;
}
.menu-icon {
    background-image:url('images/menu1.png');
    width: 39px;
    height: 40px;
    display: block;
    background-size: 100% 100%;
    margin: auto;
}
.menu:after{
    content: "";
    display: block;
    clear: both;
}
#nav.active #menu-btn {
    border-bottom: 1px solid #CCC;
    background: #27579f;
}

.contect-form label {
    display: flex;
}
.contect-form .label-field {
    width: 110px;
    display: inline-block;
}
p.submit-btn {
    text-align: center;
}
.contect-form input[type=text], .contect-form textarea {
    width: 100%;
}








@media (min-width: 768px) {
    .wrap-conent, .content-area #main {
        margin-left: 55px;
        margin-right: 55px;
    }
    .fullwidth .wrap-conent, .fullwidth .content-area #main {
        margin-left: 0;
        margin-right: 0;   
    }
}

@media (max-width: 810px) {
    .wrap {
      width: 100%;
      box-sizing: border-box;
    }
    .wrap-conent, .content-area #main {
        padding: 0 20px;
    }
    #top_horses {
      width: 100%;
    }
    #bottom_horses {
      width: 100%;
    }
}

@media (max-width: 768px) {
    #bottom_horses, .wrap, .content-area {
        width: 100%;
    }
    #top_horses .home img {
        width: 200px;
    }
    #menu-btn {
        display: block;
    }
    #menu-btn:hover {
        background: #27579f;
    }

    #nav ul li {
        display: block;
        float: none;
    }

    #nav ul li a {
        font-size: 16px;
        background: none;
        padding-left: 5px;
        color: #fff;
        display: block;
        padding: 15px;
        margin: 0;
    }

    .menu {
        background: #27579f;
        padding: 10px;
    }

    #nav ul li a:hover {
        color: #e2b21f;
        /* background: #e2b21f; */
    }
    .menu {
        display: none;
    }
    .contect-form .label-field {
      width: 100%;
      display: block;
    }

    ul#menu-primary {
      padding: 0px 0 20px 0;
    }
}

@media (max-width: 500px) {
    .fullwidth #top_horses .home img {
        width: 200px;
    }
    #header .wrap a {
        font-size: 14px;
    }
}

@media (max-width: 450px) {
    #bottom_horses {
        background-size: 100% 60%;
        background-position: bottom;
    }
}