*{margin: 0; padding: 0; border: 0;}
        @font-face { font-family: 'Raleway-Thin';
             src: url('Raleway-Thin.ttf') format('truetype');
             src: url('Raleway-Thin.woff') format('woff');}
        @font-face { font-family: 'Raleway-Regular';
             src: url('Raleway-Regular.ttf') format('truetype');
             src: url('Raleway-Regular.woff') format('woff');}
        @font-face { font-family: 'Domdiagn';
             src: url('Domdiagn.ttf') format('truetype');
             src: url('Domdiagn.woff') format('woff');}
        
#wrapper{max-width: 1024px;margin: 0 auto;}

#navigation{width: 176px;margin-top: 52px;float: right;}
 
#above1
    {width: 58px;
     margin: 0 8px;
     padding: 2px 8px;
     font-family:'Raleway-Regular';
     font-size: 10px;
     color: #30498f;
     text-decoration: none;
     text-align: center;
     float: left;
     border-bottom: 1px solid #30498f;
     border-right: 1px solid #30498f;}
 
#above2
    {width: 58px;
     margin: 0 0 0 8px;
     padding: 2px 8px;
     font-family:'Raleway-Regular';
     font-size: 10px;
     color: #30498f;
     text-decoration: none;
     text-align: center;
     float: left;
     border-bottom: 1px solid #30498f;
     border-right: 1px solid #30498f;}
 
#above1:hover, #above2:hover{border-bottom: 1px solid #e4672f;border-right: 1px solid #e4672f;color: #e4672f;}
 
#headcontainer{height:33px;margin:0 0 13px 105px;padding-top:38px;}
       
#kopf1
    {color: rgb(48,73,143);
     font-family:'Raleway-Thin';
     font-size: 30px;
     text-align: left;
     float: left;}
        
#kopf2
    {color: rgb(228,103,47);
     font-family:'Raleway-Regular';
     font-size: 30px;
     text-align: left;
     padding-left: 4px;
     float: left;}

#picturestart,#picturepraxis, #picturehom,#picturebio,#pictureverhalten,#picturerat,#picturemich,#picturekontakt
    {width: 949px;
     height: 232px;
     margin: 0 0 18px 0;
     float: left;
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;}
        
 #picturestart{background-image:url(merlinstuhl1180auf310.jpg);}       
 #picturepraxis{background-image:url(hund1180auf310.jpg);}
 #picturehom{background-image:url(fineschnee1180auf310.jpg);}
 #picturebio{background-image:url(pferdeherde1180auf310.jpg);}
 #pictureverhalten{background-image:url(hinterteil1180auf310.jpg);}
 #picturerat{background-image:url(schafe1180auf310.jpg);}
 #picturemich{background-image:url(dreihunde1180auf310.jpg);}
 #picturekontakt{background-image:url(jagd1180auf310.jpg);}
 
 .linestart
    {color: rgb(48,73,143); font-family:'Raleway-Thin'; font-size: 25px;
     text-align: left;margin: 0 0 0 105px;clear: left;} 
 .line
    {color: rgb(48,73,143); font-family:'Raleway-Thin'; font-size: 25px;
     text-align: left;margin: 0 0 0 105px;clear: left;} 
        
#copystart
    {text-align: justify;line-height: 1.6;width: 345px;height: auto;margin: 10px 0 12px 105px;float: left;
     font-family: 'Raleway-Regular';font-size:12px;color: rgb(0,0,0);}
#copy
    {text-align: justify;line-height: 1.6;width: 345px;height: auto;margin: 10px 0 12px 105px;float: left;
     font-family: 'Raleway-Regular';font-size:12px;color: rgb(0,0,0);}
    
#verband
    {width: 190px;
     height: 120px;
     font-family: 'Raleway-Regular';
     font-size: 10px;
     text-align: right;
     line-height: 1.4;
     margin-top:340px;
     padding: 2px 0 4px 0;
     float: right;
     opacity: 1;
     border-top: 1px dotted #30498f;}

#casestart
    {width: 164px;
     height: 0px;
     margin-top: 0px;
     clear: right;
     float: right;}

#caserest
    {width: 164px;
     height: 60px;
     margin-top: 280px;
     clear: right;
     float: right;}
    
#surround
    {width: 30px;
     height: 60px;
     margin: 0 14px;
     position: relative;
     float: left;}
    
#klammerlinks
    {width: 10px;
     height: 30px;
     margin-top: 25px;
     padding-right: 42px;
     float: left;
     -webkit-transition: transform 0.3s;
     -moz-transition: transform 0.3s;
     -o-transition: transform 0.3s;
     transition: transform 0.3s;}

#klammerrechts
    {width: 10px;
     height: 30px;
     margin-top: 25px;
     padding-left: 42px;
     float: left;
     -webkit-transition: transform 0.3s;
     -moz-transition: transform 0.3s;
     -o-transition: transform 0.3s;
     transition: transform 0.3s;}
    
#klammerlinks:hover, #klammerrechts:hover{transform:scaley(1.7);}

#hund{width: 14px;height: 24px;background-image: url(hundjump.png);background-position: bottom;
      background-repeat: no-repeat;background-size:cover;float: left;margin-top: 26px;}
#katz{width: 14px;height: 24px;background-image: url(katzjump.png);background-position: bottom;
      background-repeat: no-repeat;background-size:cover;float: left;margin-top: 26px;}

#casestart:hover #hund{animation: wave 1.0s 3 ease-in-out;}
#casestart:hover #katz{animation: wave 1.0s 3 ease-in-out;animation-delay: 0.1s;}

@keyframes wave {
    0%  {transform:translateY(0);}
    25% {transform:translateY(-27px);}
    50% {transform:translateY(0);}
    100%{transform:translateY(0);}
}

.imageBox {position: relative;width: 92.187500vw; overflow: hidden;margin: 0 auto;}

.figure {position: absolute;}

.slidein{display: none;}

.callin{display: none;}
.standin {right:0;top: 340px;width: 173px; padding-left: 20px;height: 300px;border: none;}
.bein {display: block;right:0;top: 340px;width: 173px; padding-left: 20px;height: 300px;border: none;}

.navwrap {width: 74px;height: 100px;margin-left: 11px;margin-right: 1px;float: left;text-decoration: none;}
#navwrap960 {display: block;width: 74px;height: 100px;margin-left: 11px;margin-right: 1px;float: left;
             text-decoration: none;}
#navwrapright{display: none;}

.picstart
    {width: 74px;
     height: 74px;
     opacity: 0;
     -webkit-transition: opacity 0.5s ease-in 0.5s, border-radius 0.2s linear;
     -moz-transition: opacity 0.5s ease-in 0.5s, border-radius 0.2s linear;
     -o-transition: opacity 0.5s ease-in 0.5s, border-radius 0.2s linear;
     transition: opacity 0.5s ease-in 0.5s, border-radius 0.2s linear;}

.picrest {width: 74px;height: 74px;
         -webkit-transition: border-radius 0.2s linear;
         -moz-transition: border-radius 0.2s linear;
         -o-transition: border-radius 0.2s linear;
         transition: border-radius 0.2s linear;}

.picactual {width: 74px;height: 74px;opacity: 0.3;border-radius: 50%;}

.text
    {width: 74px;
    text-decoration: none;
    font-family: 'Raleway-Regular';
    font-size: 12px;
    text-align: center;
    color: #30498f;
    opacity: 1;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;}

.textactual
    {width: 74px;
    text-decoration: none;
    font-family: 'Raleway-Regular';
    font-size: 12px;
    text-align: center;
    color: #30498f;
    opacity: 0.5;}

#casestart:hover .slidein {right: 0;}
#casestart:hover .picstart {opacity: 1;}

.navwrap:hover .picstart, #navwrapright:hover .picstart, .navwrap:hover .picrest, #navwrapright:hover .picrest,
#navwrap960:hover .picstart, #navwrap960:hover .picrest  {border-radius: 50%;}
.navwrap:hover .text, #navwrapright:hover .text, #navwrap960:hover .text{opacity: 1;}

.link{font-family: 'Raleway-Regular';font-size:13px;color: rgb(0,0,0); text-decoration: none;}
.link:hover{color:rgb(228,103,47);}

#copywrap
    {width: 345px;
     height: 500px;
     margin: 10px 0 12px 105px;
     float: left;
     text-align: justify;
     line-height: 1.6;
     font-family: 'Raleway-Regular';
     font-size:12px;
     color: rgb(0,0,0);}
    
#postit{width: 345px;height: 195px;margin-top: 15px;}

#heft1 {background-color: #FF3;}
#heft2 {background-color: #FF3;}
#heft3 {background-color: #FF3;}

.drop-shadow
    {position:relative;
    font-family: 'Domdiagn';
    width: 270px;
    height: 48px;
    font-size: 15px;
    text-align: center;
    text-decoration: none;
    color: rgb(48,73,143);
    margin: 10px 0 10px 10px;
    padding: 10px;
    float: right;
    -webkit-transition: color 0.5s;
    -moz-transition: color 0.5s;
    -o-transition: color 0.5s;
    transition: color 0.5s;}
    
.drop-shadow:before
    {content: "";
    position: absolute;
    z-index: -1;
    bottom: 15px;
    left: 10px;
    width: 50%;
    height: 20%;
    -webkit-box-shadow: 0 15px 10px hsla(0, 0%, 0%, 0.7);
    -moz-box-shadow: 0 15px 10px hsla(0, 0%, 0%, 0.7);
    box-shadow: 0 15px 10px hsla(0, 0%, 0%, 0.7);
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);}
    
.info
    {width: 225px;
    text-decoration: none;
    font-family: 'Raleway-Regular';
    font-size: 10px;
    text-align: center;
    margin: 0 30px 0 30px;
    color: #000000;
    opacity: 0;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;}

.drop-shadow:hover .info{opacity: 1;}
.drop-shadow:hover {color: rgb(228,103,47);}

a{text-decoration: none;}

span{color: rgb(48,73,143);cursor: pointer;text-decoration: none;}
span:hover{color: rgb(228,103,47);}