/* normal */
@font-face {
  font-family:'Open Sans';
  font-style:  normal;
  font-weight: 400;
  src: url('OpenSans-Regular-webfont.eot');
}
@font-face {
  font-family:'Open Sans';
  font-style:  normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'),
       url('OpenSans-Regular-webfont.eot')  format('eot'),
       url('OpenSans-Regular-webfont.ttf')  format('truetype'),  
       url('OpenSans-Regular-webfont.woff') format('woff');
}
/* bold */
@font-face {
  font-family:'Open Sans';
  font-style:  normal;
  font-weight: 700;
  src: url('OpenSans-Bold-webfont.eot');
}
@font-face {
  font-family:'Open Sans';
  font-style:  normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'),
       url('OpenSans-Bold-webfont.eot')  format('eot'),
       url('OpenSans-Bold-webfont.ttf')  format('truetype'),  
       url('OpenSans-Bold-webfont.woff') format('woff');
}
/* normal italic */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('OpenSans-Italic-webfont.eot');
}
@font-face {
  font-family:'Open Sans';
  font-style:  italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'),
       url('OpenSans-Italic-webfont.eot')  format('eot'),
       url('OpenSans-Italic-webfont.ttf')  format('truetype'),  
       url('OpenSans-Italic-webfont.woff') format('woff');
}
/* bold italic */
@font-face {
  font-family:'Open Sans';
  font-style:  italic;
  font-weight: 700;
  src: url('OpenSans-BoldItalic-webfont.eot');
}
@font-face {
  font-family:'Open Sans';
  font-style:  italic;
  font-weight: 700;
  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), 
       url('OpenSans-BoldItalic-webfont.eot')  format('eot'),
       url('OpenSans-BoldItalic-webfont.ttf')  format('truetype'),  
       url('OpenSans-BoldItalic-webfont.woff') format('woff');
}

div.imageHold {
  padding: 20px 20px; /* damit der container die höhe des großen bildes annimmt */
}

div.imageHold div {
  width: 342px;
  height: 409px;
  /* ab hier kann man die abstände
  und sonstiges der bilder eintragen */
}

div.imageHold img {
  width: 342px;  /* wir skalieren das große bild auf die kleine größe */
  height: 409px; /* um verpixelung beim vergößern zu verhindern       */
}

div.imageHold img:hover {
  margin-left: -10px; /* die hälfte des größenunterschiedes der bilder */
  margin-top: -10px;  /* hier genau so */
  width: 362px;       /* die weite beim vergrößern */
  height: 429px;      /* die höhe beim vergrößern */
}

div.image2Hold {
  padding: 20px 20px; /* damit der container die höhe des großen bildes annimmt */
}

div.image2Hold div {
  width: 402px;
  height: 380px;
  /* ab hier kann man die abstände
  und sonstiges der bilder eintragen */
}

div.image2Hold img {
  width: 402px;  /* wir skalieren das große bild auf die kleine größe */
  height: 380px; /* um verpixelung beim vergößern zu verhindern       */
}

div.image2Hold img:hover {
  margin-left: -10px; /* die hälfte des größenunterschiedes der bilder */
  margin-top: -10px;  /* hier genau so */
  width: 422px;       /* die weite beim vergrößern */
  height: 400px;      /* die höhe beim vergrößern */
}

div.image3Hold {
  padding: 20px 20px; /* damit der container die höhe des großen bildes annimmt */
}

div.image3Hold div {
  width: 402px;
  height: 380px;
  /* ab hier kann man die abstände
  und sonstiges der bilder eintragen */
}

div.image3Hold img {
  width: 350px;  /* wir skalieren das große bild auf die kleine größe */
  height: 156px; /* um verpixelung beim vergößern zu verhindern       */
}

div.image3Hold img:hover {
  margin-left: -10px; /* die hälfte des größenunterschiedes der bilder */
  margin-top: -10px;  /* hier genau so */
  width: 370px;       /* die weite beim vergrößern */
  height: 176px;      /* die höhe beim vergrößern */
}

a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:active { text-decoration: none; }
a:hover { text-decoration: none; }