@font-face{
    font-family: Regular;
    src: url("../fonts/Oregano-Regular.ttf");
}

@-webkit-keyframes fadein { 
    from {
        opacity:0;
    }
    to {
        opacity:0,9;
    }
}

 body  {
  overflow-x: hidden !important;
  font-family: 'Regular';
  font-size: 120%; 
  animation: fadein 2s;
  -webkit-animation: fadein 2s;
}

 h2  { 
  text-align: left;
  font-family: 'Regular';
  font-size: 120%;
}

 a:link  { 
  text-decoration: none;
  transition: all 1s;
}

 b  { 
  font-family: 'Regular';
  font-size: 110%;
  font-weight: normal;
}

 #wrapper { 
  position: absolute;
  width: 900px; 
  margin-top: 0px; 
  margin-left: 45px;
}

 #item {
  width: 900px;
  padding: 0px;
  background-color: #999999;
  border-bottom: 2px dashed #ffffff;
}

 #text {
  padding: 20px;
}

 img {
  border: 1px solid black;
  vertical-align: top;
  transition: all 1s;
}

 #big1 {
  width: 206 px;
  height: 206px;
} 


@media screen and (max-width: 768px) {
 #wrapper { 
  width: 735px; 
  margin-top: 0px; 
  margin-left: 0px;
}

 #item {
  width: 730px;
}

 #text {
  padding: 5px;
}

 #big1 {
  width: 206 px;
  height: 206px;
}
} 


@media screen and (max-width: 320px) {
 #wrapper { 
  width: 310px; 
  margin-top: 0px; 
  margin-left: 0px;
  float: none;
}

 #item {
  width: 298px;
}

 #text {
  padding: 5px;
}

 #big1 {
  width: 284 px;
  height: 284px;
}

 #big2 {
  width: 139 px;
  height: 139px;
}

 #big3 {
  width: 186 px;
  height: 186px;
}

 #big5 {
  width: 138 px;
  height: 138px;
}

 #big7 {
  width: 110 px;
  height: 110px;
}

 #small3-6 {
  width: 90 px;
  height: 90px;
}

 #small4-5 {
  width: 66 px;
  height: 66px;
}

 #small7 {
  width: 52 px;
  height: 52px;
}
}