/* 食譜list */
.recipe .list-content .col-3 .title{
	text-align: center;
}
.recipe .list-content a{
  position: relative;
   -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
  transition: opacity 0.5s, transform 0.5s;
}
.recipe .list-content a:hover{
  background-color: rgba(181, 5, 40, 0.9);
  max-height: 260px;
  width: 100%;

}
.recipe .list-content a:hover img{
  opacity: 0.1;
}

.recipe .list-content a:hover .title{
  background-color: #fff;
}

.icon-cook{
  position: absolute;
  top: 24%;
  left: 50%;
  opacity: 0;
  transform: translate(-50%,-50%);
   -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
  transition: opacity 0.5s, transform 0.5s;
}
.icon-cook:before{
  content: url('../images/icon_cook.png');
}

.recipe .list-content a:hover .icon-cook{
  opacity: 1;
}
.recipe .col-3 a:hover img{
  transform: scale(1) translate(0, 0);
}

.effect-marley p{
  position: absolute;
  bottom: 0;
  line-height: 1.5;
  -webkit-transform: translate3d(0,100%,0);
  transform: translate3d(0,100%,0);
  color: #fff;
  font-size: 1.6em;
  opacity: 0;
}

.effect-marley p:before {
  position: absolute;
  top: 0;
  left: -5%;
  right: 0;
  width: 100%;
  height: 1px;
  background: #fff;
  content: '';
  -webkit-transform: translate3d(0,40px,0);
  transform: translate3d(0,40px,0);

}
.effect-marley p:before,
.effect-marley p {
  opacity: 0;
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
  transition: opacity 0.5s, transform 0.5s;
}


.effect-marley:hover p {
    width: 90%;
    padding-top: 16px;
    top: 40%;
    opacity: 1;
}
.effect-marley:hover p:before,
.effect-marley:hover p {
  opacity: 1;
  -webkit-transform: translate3d(5%,0,0);
  transform: translate3d(5%,0,0);
}




/* 食譜內頁 */
.recipe.page .title{
  text-align: center;
  color: #B50528;
}


/* search bar */
.search-bar{
	position: relative;
	margin-bottom: 40px;
}
.search-bar input{
  
}
input#search-bar {
  margin: 0 auto;
  width: 200px;
  height: 48px;
  font-size: 1.8rem;
  border: 1px solid #707070;
  color: #707070;
  border-radius: 8px;
  outline: none;
  padding: 8px 16px;
  box-sizing: border-box;
}
input#search-bar:focus {
  border: 1px solid #B50528;
  transition: 0.35s ease;
  color: #B50528;
}
input#search-bar:focus::-webkit-input-placeholder {
  transition: opacity 0.45s ease;
  opacity: 0;
}
input#search-bar:focus::-moz-placeholder {
  transition: opacity 0.45s ease;
  opacity: 0;
}
input#search-bar:focus:-ms-placeholder {
  transition: opacity 0.45s ease;
  opacity: 0;
}
.search-bar i{
	position: absolute;
	right: 0;
	top: 50%;
	padding-right: 16px;
	transform: translate(0, -50%);
	font-size: 1.8rem;
  cursor: pointer;
}


/* 食譜 */
.recipe-content{
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin: 40px 0;
}

/* 食材及配料 */
.preparation-title{
  font-size: 2.4em;
  color: #B50528;
  padding-bottom: 8px;
}
.preparation-title:before{
  content: '';
  border-left: 8px solid #B50528;
  padding-right: 8px;
}
.preparation-box{
  border-radius: 16px;
  border: 1px solid #B50528;
  padding: 40px;
  margin:16px 0 16px 40px;
}

.preparation-box table{
  color: #707070;
  font-size: 2em;
  font-weight: 400;
  width: 100%;
  padding: 8px 0 40px 0;
}
.preparation-box tbody{
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.preparation-box tr{
  width: calc(100%/2 - 16px);
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dotted #707070;
  margin: 8px 0;
}

/* 料理步驟 */
.step-box{
  margin:16px 0 16px 40px;
}
.step{
  margin-bottom: 40px;
}
.step img{
  width: auto;
}

.step p{
  color: #707070;
  font-size: 2em;
  font-weight: 400;
  padding: 8px 0;
}

/* 影音食譜 */
.video-content .video{
  margin: 24px 0;
  height: 600px;
}


/* $Pad
--------------------------------------------------------------------------------------*/
@media screen and (min-width:600px) and (max-width:1024px){


}


/* $Mobile
--------------------------------------------------------------------------------------*/
@media screen and (max-width: 1025px){

.search-bar{
	width: 100%;
}
input#search-bar{
	width: 100%;
}
/* 列表頁食譜 */
.recipe .list-content a:hover{
  background-color: rgba(181, 5, 40, 0);
}
.recipe .list-content a:hover img{
  opacity: 1;
}
.recipe .list-content a:hover .icon-cook,
.effect-marley:hover p:before,
.effect-marley:hover p{
  opacity: 0;
}

/* 食譜內頁 */
.recipe-content{
  flex-wrap: wrap;
}

/* 食材及配料 */
.preparation-box{
  margin: 16px 0;
  padding: 24px 16px;
}
.preparation-box table{
  font-size: 1.8em;
}
.preparation-box tr{
  width: 100%;
}

/* 料理步驟 */
.step-box{
  margin: 16px 0;
}
.step img{
  width: 100%;
}
.step p{
  font-size: 1.8em;
}

/* 影音食譜 */
.video-content .video{
  margin: 0;
  height: 200px;
}









}