* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}

/* RECIPES BANNER */
.recipes-banner {
	position: relative;
	text-align: center;
	height: auto;
    overflow: hidden;
}
.recipes-banner img {
	display: block;
	width: 100%;
}
.border-top {
	position: absolute;
	left: 0;
    top: 0;
    width: 120%;
	height: 3vw;
    overflow: hidden;
    z-index: 1001; 
}
.border-top img {
	display: block;
	width: 100%;
}
.border-right {
	position: absolute;
	right: 0;
    top: 0;
	text-align: center;
    width: 2vw;
	height: auto;
    overflow: hidden;
    z-index: 1001;
}
.border-right img {
	display: block;
	width: 100%;
    transform: rotate(-180deg);
}
.border-bottom {
	position: absolute;
	right: 0;
    bottom: 0;
    width: 120%;
	height: 1.9vw;
    overflow: hidden;
    z-index: 1001;
}
.border-bottom img {
	display: block;
	width: 100%;
    vertical-align: bottom;
}
.border-left {
	position: absolute;
	left: 0;
    top: -1vw;
    width: 2vw;
	height: auto;
    overflow: hidden;
    z-index: 1001;
}
.border-left img {
	display: block;
	width: 100%;
    transform: rotate(0);
}
.recipe-logo{
	position: absolute;
	left: 6vw;
    top: 6vw;
    width: 17vw;
	height: auto; 
}
.recipe-logo img {
	display: block;
	width: 100%;

}
.recipe-plate {
	position: absolute;
	right: 0;
    top: 0;
    width: 17vw;
	height: auto; 
}
.recipe-plate img {
	display: block;
	width: 100%;

}
.header-outer {
    position: absolute;
    width: 100%;
    top: 3vw;
    text-align: center;
    vertical-align: top;
}
.header-1 {
    position: relative;
    display: inline-block;
    font-family: 'baste';
	font-size: 8vw;
    text-align: center;
    color: #009f4e;   
}

.header-2 {
    position: relative;
    display: inline-block;
    font-family: 'sament';
	font-size: 8.1vw;
    text-align: center;
    margin-top: -1.25vw;
    color: #da372d;
 }   
 .sub-text {
    position: absolute;
    display:block;
     width: 100%;
     top: 15vw;
    font-family: "Montserrat", sans-serif;
	font-size: 1.5vw;
     line-height: 2vw;
    text-align: center;
    color: black;  
     padding: 0 26vw;
     font-weight: 500;
     
 /* RECIPE ITEM*/
}    
.recipes-item-banner {
	position: relative;
	height: 40vw;
    overflow: hidden;
}
.recipes-item-banner img {
	display: block;
	width: 100%;
 }
.recipes-item-outer {
	position: absolute;
	top: 0;
    left: 0;
    width: 100%;
	height: 40vw;
    overflow: hidden;
 }
.recipes-item-left {
	position: relative;
    display: inline-block;
    width: 60%;
	height: auto;
    overflow: hidden;
    float: left;
}
.recipes-item-left img {
	display: block;
	width: 100%;
 }
.recipe-item-logo{
	position: absolute;
	left: 3vw;
    top: 3vw;
    width: 10vw;
    height: 10vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
.recipe-item-logo img {
	display: block;
	width: 100%;
}
.recipes-item-right {
	position: relative;
    display: inline-block;
	text-align: center;
	height: 40vw;
    width: 40%;
    padding-bottom: 2vw;
    overflow: hidden;
    float: left;
    z-index: 1000;
    background-image: url("../images/recipes-item-banner.jpg");
}
.item-header-outer {
    position: relative;
    width: 100%;
    padding-top:1vw;
    text-align: center;
    height: auto;
    vertical-align: top;
}
.recipe-item-logo2 {
    position: relative;
    display: inline-block;
    width: 60%;
    padding-top:3vw;
    text-align: center;
    height: auto;
    vertical-align: top;
}
.recipe-item-logo2 img {
	display: block;
	width: 100%;
 }   
.item-title {
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    font-family: 'baste';
	font-size: 3vw;
    line-height: 3vw;
    text-align: center;
    width: 100%;
    padding: 2vw 15% 0 15%;
    height: auto;
    color: #da372d;
    text-transform: uppercase;
 }   
.item-sub-title {
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    font-family: 'baste';
	font-size: 2vw;
    line-height: 2vw;
    text-align: center;
    width: 100%;
    padding: .5vw 15% 0 15%;
    height: auto;
    color: #009f4e;    
}
 .item-description {
    box-sizing: border-box;
    position: relative;
    display:block;
     width: 100%;
     padding: 2vw 12% 0 12%;
    font-family: "Montserrat", sans-serif;
	font-size: .9vw;
    text-align: center;
    color: black;  
     font-weight: 500;
}
.item-description p{
     padding-top: 0;    
}
.item-serves {
    position: relative;
    display: inline-block;
    font-family: 'sament';
	font-size: 1.5vw;
    text-align: center;
    color: #009f4e;
    padding-top: 2vw;
}
.item-cooking-outer {
    position: relative;
    height: auto;
    width: 100%;
    padding-top: 1vw;
 }
.item-cooking-prep {
    position: relative;
    display: inline-block;
    font-family: 'sament';
	font-size: 1.5vw;
    text-align: center;
    color: #da372d;
    padding-right: .5vw;
}
.item-cooking-time {
    position: relative;
    display: inline-block;
    font-family: 'sament';
	font-size: 1.5vw;
    text-align: center;
    color: #da372d;
}
.item-detail-left {
	position: relative;
    display: inline-block;
    width: 25%;
	height: auto;
    padding: 2vw;
    float: left;
}

.item-detail-outer h2 {
	position: relative;
    display: inline-block;
    margin: 0;
    width: 100%;
	height: auto;
    padding-bottom: 2vw;
    font-family: 'baste';
	font-size: 2vw;
    line-height: 2vw;
    float: left;
    border-right: 1.5vw;
    color: #da372d;
    text-transform: uppercase;   
}
.item-detail-text {
	position: relative;
    display: inline-block;
    width: 100%;
	height: auto;
    padding-bottom:  2vw;
     font-family: "Montserrat", sans-serif;
	font-size: .9vw;
    line-height: 1.5vw;
}
.item-detail-middle {
	position: relative;
    display: inline-block;
    width: 50%;
	height: auto;
    padding: 2vw;
   font-family: "Montserrat", sans-serif;
	font-size: .9vw;
    line-height: 1.5vw;
    float: left;
}

.item-detail-outer h3 {
	position: relative;
    margin: 0;
    display: inline-block;
    width: 100%;
	height: auto;
    padding-bottom: .5vw;
    font-family: 'baste';
	font-size: 1.5vw;
    line-height: 1.5vw;
    float: left;
    color: #009f4e;
    text-transform: uppercase;
}
 .item-detail-middle p {
	position: relative;
    display: inline-block;
    width: 100%;
	height: auto;
    padding-bottom:  1vw;
     font-family: "Montserrat", sans-serif;
	font-size: .9vw;
    line-height: 1.3vw;   
}
.item-detail-right {
	position: relative;
    display: inline-block;
    width: 25%;
	height: auto;
    padding: 2vw 0 2vw 0;
    font-family: "Montserrat", sans-serif;
	font-size: .9vw;
    line-height: 1.5vw;
    float: left;
    
/* RECIPE DETAIL */   
    
}
.item-detail-right-share {
	position: relative;
    display: inline-block;
    width: 100%;
	height: auto;
    padding-top: 4vw;
    font-family: 'baste';
	font-size: 2vw;
    line-height: 1.5vw;
    border-right: 1.5vw;
    color: #da372d;
    text-transform: uppercase;  
}
.recipe-item-share-logo{
	position: relative;
    display: inline-block;
    width: 23%;
	height: auto;
    padding: 1.5vw .3vw 0 .0
}
.recipe-item-share-logo img {
	display: block;
	width: 100%;
}
.item-detail-outer {
    box-sizing: border-box;
    position: relative;
    height: auto;
    width: 100%;
    padding: 1vw 10% 0 10%;
}

#ratingt {
  margin:15px 0;
  font-family: "Montserrat", sans-serif;
  font-size: .9vw;
  line-height: 1.5vw;
}
#rating {
}
.ratestar {
	display:inline-block;
	width:30px;
}
.ratestar img {
	width:100%;
}

/* GRID SET */
    
.image-item {
  display: block;
    position: relative; 
    padding: 0 5px 10px 5px;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.overlay {
  position: absolute;
  box-sizing: border-box;
  width: calc(100% - 10px);
  height: auto;
  background: #da372d;
  transform: scale(0);
  transition: all 0.3s 0.3s ease-in-out;
  color: #ffd000;
  padding: 1vw;
  left: 5px;
    
}
.overlay-detail-outer {
    position: relative;
    height: auto;
    width: 100%;  
}
.overlay-text {
    position: relative;
     font-family: 'baste';
    font-size: 1.5vw;
    line-height: 1.7vw;
    text-transform: uppercase;
    width: auto;
    padding: 0 2vw;
    text-align: center;
}
/* hover */

.image-item:hover .overlay {
  transform: scale(1);
}

@media only screen and (max-width: 1600px) {
    
    }

@media only screen and (max-width: 1200px) {
    
    }

@media only screen and (max-width: 834px) {

.overlay {
  transform:none;
}
    }

@media only screen and (max-width: 600px) {
/* RECIPES BANNER */
.recipes-banner {
	position: relative;
	text-align: center;
	height: 100vw;
    overflow: hidden;
}
.recipes-banner img {
	display: block;
	width: 400%;
}
.border-top {
	position: absolute;
	left: 0;
    top: 0;
    width: 240%;
	height: 5vw;
    overflow: hidden;   
}
.border-top img {
	display: block;
	width: 100%;
}
.border-right {
	position: absolute;
	right: 0;
    top: 0;
	text-align: center;
    width: 4vw;
	height: auto;
    overflow: hidden;
}
.border-right img {
	display: block;
	width: 100%;
    transform: rotate(-180deg);
}
.border-bottom {
	position: absolute;
	right: 0;
    bottom: 0;
    width: 240%;
	height: 4vw;
    overflow: hidden;   
}
.border-bottom img {
	display: block;
	width: 100%;
    vertical-align: bottom;
}
.border-left {
	position: absolute;
	left: 0;
    top: -1vw;
    width: 4vw;
	height: auto;
    overflow: hidden;
}
.border-left img {
	display: block;
	width: 100%;
    transform: rotate(0);
}
.recipe-logo{
	position: absolute;
	left: 6vw;
    top: 6vw;
    width: 60vw;
	height: auto; 
}
.recipe-logo img {
	display: block;
	width: 100%;

}
.recipe-plate {
	position: absolute;
	right: 0;
    top: 0;
    width: 32vw;
	height: auto; 
}
.recipe-plate img {
	display: block;
	width: 100%;

}
.header-outer {
    position: absolute;
    width: 100%;
    top: 25vw;
    text-align: center;
    vertical-align: top;
}
.header-1 {
    position: relative;
    display: inline-block;
    font-family: 'baste';
	font-size: 21vw;
    text-align: center;
    color: #009f4e;   
}

.header-2 {
    position: relative;
    display: inline-block;
    font-family: 'sament';
	font-size: 18vw;
    text-align: center;
    margin-top: -10.25vw;
    color: #da372d;
 }   
 .sub-text {
    position: absolute;
    display:block;
     width: 100%;
     top: 70vw;
    font-family: "Montserrat", sans-serif;
	font-size: 4vw;
     line-height: 5vw;
    text-align: center;
    color: black;  
     padding: 0 10%;
     font-weight: 500;

}
/* GRID SET */
   
.image-item {
  display: block;
    position: relative;
    padding: 0 5px 20px 5px;
    cursor: pointer;
    overflow: hidden;
     display: flex;
    align-items: center;
    justify-content: center;
}
.overlay {
  position: absolute;
  box-sizing: border-box;
  width: calc(100% - 10px);
  height: auto;
  background: #da372d;
  transition: all 0.3s 0.3s ease-in-out;
  color: #ffd000;
  padding: 6vw;
  left: 5px;
  transform:none;

}
.overlay-text {
    position: relative;
    font-family: 'baste';
    font-size: 7vw;
    line-height: 8vw;
    text-transform: uppercase;
    width: auto;
    padding: 0 2vw;
    text-align: center;
    
 /* RECIPE ITEM*/
}    
.recipes-item-banner {
    position: relative;
    height: auto;
}
.recipes-item-outer {
    position: relative;
    height: auto;
 }
.recipes-item-left {
    width: 100%;
	height: 60vw;
 }
.recipe-item-logo{
	left: 8vw;
    top: 8vw;
    width: 15vw;
    height: 15vw;
}
.recipes-item-right {
 width: 100%;
    height: auto;
    padding-bottom: 8vw;
}
.item-header-outer {
    padding-top: 1vw;
}
.recipe-item-logo2 {
    width: 60%;
    padding-top:3vw;
}  
.item-title {
	font-size: 9vw;
    line-height: 10vw;
    width: 100%;
    padding: 2vw 10% 0 10%;
 }   
.item-sub-title {
	font-size: 6vw;
    line-height: 6vw;
    width: 100%;
    padding: .5vw 10% 0 10%;  
}
 .item-description {
     width: 100%;
     padding: 7vw 8% 0 8%;
	font-size: 4.2vw;
     
}.item-serves {
	font-size: 4.5vw;
    padding-top: 5vw;
    }
.item-cooking-outer {
    position: relative;
    height: auto;
    width: 100%;
    padding-top: 1vw;
 }
.item-cooking-prep {
	font-size: 4.5vw;
    padding-right: 2vw;
}
.item-cooking-time {
	font-size: 4.5vw;

}
.item-detail-left {
    width: 100%;
    padding: 10vw 0 5vw 0;
}

.item-detail-outer h2 {
    width: 100%;
    padding-bottom: 4vw;
	font-size: 8vw;
    line-height: 10vw; 
}
.item-detail-text {
    padding-bottom: 6vw;
	font-size: 4.5vw;
    line-height: 5.2vw;
}
.item-detail-middle {
    width: 100%;
    padding: 0 0 5vw 0;
	font-size: 4.5vw;
    line-height: 6vw;
}
.item-detail-outer h3 {
    padding-bottom: .5vw;
	font-size: 6vw;
    line-height: 7vw;
}
 .item-detail-middle p {
    width: 100%;
    padding-bottom:  1vw;
	font-size: 4.5vw;
    line-height: 6vw;  
}
.item-detail-right {
	width: 100%;
    padding: 0 0 4vw 0;
	font-size: 8vw;
    line-height: 10vw; 
}
.item-detail-right-share {
	width: 100%;
    padding-bottom: 4vw;
	font-size: 8vw;
    line-height: 10vw;   
}
  #ratingt {
  margin:15px 0;
  font-family: "Montserrat", sans-serif;
  font-size: 5vw;
  line-height: 6vw;
}
}
#photos {
  /* Prevent vertical gaps */
  position: relative;
  line-height: 0;
    padding: 2.5vw 10vw .5vw 10vw;
  -webkit-column-count: 4;
  -webkit-column-gap:   0px;
  -moz-column-count:    4;
  -moz-column-gap:      0px;
  column-count:         4;
  column-gap:           0px;  
}
#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}
@media (max-width: 1200px) {
  #photos {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
}
@media (max-width: 1000px) {
  #photos {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 800px) {
  #photos {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 600px) {
  #photos {
        padding: 5vw 3vw 8vw 3vw;
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}