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

* {
  margin: 0;
}
 

html { width: 100%;}

body {
  font-family: Verdana, Arial, Helvetica, sans-serif, Times New Roman, Garamond;
  font-size: 100%;
  background-color: #ffffff;
  /*-moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;*/
}

code, pre, abbr, kbd {
  -moz-hyphens: none;
  -ms-hyphens: none;
  -o-hyphens: none;
  -webkit-hyphens: none;
  hyphens: none;
} 

.wrapper {
  /* width: 100%; */
  /* margin: auto; */
}

.receptek1 {
  background-image: url("../images/sutihatter.png");
  background-repeat: no-repeat;
  background-size: cover;
  height: 159px;
  text-align:center;
  margin: 20px 0;
  position: relative;
  display: table;
  width: 100%;
}

.receptek1 p {
  color:white;
  font-size: 4em;
  height: 100%;
  font-family: "Times New Roman", serif;
  font-weight: bold;
  display: table-cell;
  vertical-align: middle;
}

.receptek2 {
  margin: 0 0 20px 0;
}

.receptek2 p {
  text-align: center;
  width: 95%;
  margin: auto;
  line-height: 30px;
}

.receptek3 {
  margin: 10px;
}

.receptek3 > div:first-child {
  display:table;
  height:70px;
  width: 100%;
}

.receptek3 > div:first-child p {
  background-color: #7E633D;
  color: white;
  text-align: center;
  font-size: 38px;
  display: table-cell;
  vertical-align: middle;
  font-family: "Times New Roman", serif;
}

.reclink {
  text-align: center;
  margin: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.reclink div {
  margin: 0 0 20px 0;
}

.reclink img {
  object-fit: cover;
  height: 305px;
  width: 305px;
}

.reclink figure a div {
  display: table;
  width: 100%;
  background-color: #A1855D;
  height: 60px;
  text-align: center;
}

.reclink figure a {}

.reclink figure {
  display: inline-block;
  text-align: center;
  vertical-align: top;
  margin: 0 10px;
  width: min-content;
}

.reclink figure:nth-child(4n){
  display: block;
}

.reclink figure a div label {
  display: table-cell;
  vertical-align: middle;
  font-family: "Brush Script MT", cursive;
  cursor: pointer;
  font-size: large;
}

.reclink figure a:link,
.reclink figure a:visited,
.reclink figure a:active {
  color: white;
}

@media only screen
and (max-width : 640px) {
  #wrapper { width: 100%;}
  .receptek1 {margin: 0 0 20px 0}
  .receptek3 > div:first-child {margin: 0 0 10px 0}
  .reclink {}
  .reclink figure {margin: 0 0 10px 0;}
  .reclink figure:nth-child(4n){display: inline-block;}
  .reclink > div {margin: 0;}
  .reclink img {width: 360px; height: 360px;}
}

@media only screen
and (min-width : 768px)
and (max-width : 1023px) {
  #wrapper { width: 100%;}
  .receptek1 {margin: 0;}
  .receptek3 > div:first-child {margin: 0 0 20px 0;}
  .receptek3 > div:first-child p {font-size: 1.8em;}
  .receptek1 p {font-size: 3em;}
  .reclink {margin: 0}
  .reclink figure {margin: 10px;}
  .reclink figure:nth-child(4n){display: inline-block;}
  .reclink div {margin: 0;}
  .reclink figure a div {display: block;width: unset;}
  .reclink figure a div label {display: block;font-size: 1em;padding: 5px;top: 50%;position: relative;transform: translateY(-50%);}
  .reclink img {}
}