.one-col .card-wrapper {
    grid-template-columns: repeat(1, 1fr) ;
    display: grid ;
}

.two-col .card-wrapper {
    grid-template-columns: repeat(2, 1fr) ;
    display: grid;
}

.three-col .card-wrapper {
    grid-template-columns: repeat(3, 1fr) ;
    display: grid ;
}

.four-col .card-wrapper {
    grid-template-columns: repeat(4, 1fr) ;
    display: grid ;
}

.site-color .filter-container{
	margin-bottom: 16px;
}
.card-wrapper{
	grid-column-gap: 16px;
	grid-row-gap: 24px;
}
.card-wrapper .card,
.card-wrapper .card .card-image > img{
	-moz-border-radius: 22px 22px 0px 0px;
	-webkit-border-radius: 22px 22px 0px 0px;
	border-radius: 22px 22px 0px 0px; 
}
.card-wrapper .card.full-rounded-corner,
.card-wrapper .card.full-rounded-corner .card-image > img{
	-moz-border-radius: 22px 22px 22px 22px;
	-webkit-border-radius: 22px 22px 22px 22px;
	border-radius: 22px 22px 22px 22px;
}

.card-wrapper .card.no-rounded-corner,
.card-wrapper .card.no-rounded-corner .card-image > img{
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
}
.card-wrapper .card.full-rounded-corner .card-body{
	border-radius: 0 0 22px 22px;
}
.card-wrapper > .card{
	flex: auto;
}
.card-wrapper .card .card-image{
	position: relative;
}

.recipe-preview{
    display: none;
    z-index: 11;
    position: absolute;
    top: 100%;
	width: calc(100% + 2px);
    left: -1px;
    padding:0 20px 15px 20px;
    background-color: #fff;
    border: 1px solid #8a8484;
	-moz-border-radius: 0px 0px 22px 22px;
	-webkit-border-radius: 0px 0px 22px 22px;
	border-radius: 0px 0px 22px 22px;
	color: #333333;
}
.box-shadow .recipe-preview{
	border-radius: 0px 0px 2px 2px;
}
.recipe-preview .btnLink {
	margin-top: 24px;
}
.recipe-preview p{
	margin-bottom: 10px;
}
.recipe-preview ul,
.recipe-preview ol{
	list-style: none;
    padding: 0;
}
.recipe-preview ul li,
.recipe-preview ol li{
	margin-bottom: 10px;
}
.card-wrapper .card .text-action-arrow {
    padding: 0;
    color: #02BBE7;
} 
.card-wrapper .card .text-action-arrow span{
    color: inherit;
	margin-right: 10px;
}
.card-wrapper .card .text-action-arrow:after {
    background: none;
    content: "";
}

.recipie-catalog .card-wrapper .card{
    border: none;
}

.card-wrapper .card-body{
    position: relative;
    border: 1px solid transparent;
    transition: border-color 0.3s ease;
    border-bottom: none;
	background: #ffffff;
	border-top: none;
	padding: 10px 0 0 0;
}

.card-wrapper .card-body .desc-preview{
	margin-top: 8px;
	color: #333333;
	line-height: 1.75em;
}
.card-wrapper .card-body.no-border{
	border: 0 none;
}

.card-wrapper .card-body.box-shadow,
.card-wrapper .card-body.card-shadow{
	border: 0 none;
}
.card-wrapper .card-body.box-shadow .recipe-preview,
.card-wrapper .card-body.card-shadow .recipe-preview{
	border: 0 none;
	-webkit-box-shadow: 0px 3px 6px #00000029;
	-moz-box-shadow: 0px 3px 6px #00000029;
	box-shadow: 0px 3px 6px #00000029;
	width: 100%;
    left: 0;
	top: calc(100% - 6px);
}
.card-wrapper .card-body.box-shadow .recipe-preview{
	line-height: 1.75em;
}
.card-wrapper .card:hover .card-body{
    border-color: #8a8484;
}
.card-wrapper .card:hover .card-body.no-border{
	border: 0 none;
}
.card-wrapper .card:hover .card-body.box-shadow,
.card-wrapper .card:hover .card-body.card-shadow,
.card-wrapper .card:focus-within .card-body.card-shadow{
	border: 0 none;
	-webkit-box-shadow: 0px 3px 6px #00000029;
	-moz-box-shadow: 0px 3px 6px #00000029;
	box-shadow: 0px 3px 6px #00000029;
}
.card-wrapper .card:hover .card-body.box-shadow{
	border-radius: 0px 0px 2px 2px;
}
.card-wrapper .card:hover .card-body.card-shadow{
	top: 0;
	border-radius: 0;
}
.card-wrapper .card.full-rounded-corner:hover .card-body.box-shadow{
	top: 0;
	border-radius: 0;
}
.card-wrapper.title-shift .card:hover .card-body,
.card-wrapper.title-shift .card:focus-within .card-body{
    padding-left: 20px;
	padding-right: 20px;
}
.catalog-icons{
    display: flex;
    position: absolute;
    bottom: 15px;
    right: 0;
    justify-content: end;
    align-items: center;
    background: white;
    opacity: 0.8;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
	padding-left: 24px;
	padding-right: 0;
	height: 38px;
	min-width: 115px;
}

.catalog-icons img{
	margin-right: 5px;
	width: 22px;
	height: 22px;
}
.catalog-icons p{
    margin-bottom: 0;
	font-size: 14px;
    padding: 8px 5px 8px 0;
	display: flex;
    align-items: center;
	line-height: normal;
	color: #333333;
}
.catalog-text{
    display: flex;
    position: absolute;
    bottom: 0;
    right: 0;
	z-index: 10;
    justify-content: end;
    align-items: center;
    background: transparent;
    opacity: 1;
	padding: 0 15px;
	width: 100%;
}
.catalog-text p{
	color: #ffffff;
	font-size: 16px;
	line-height: 1.75em;
	width: 100%;
	margin-bottom: 8px;
}

.card-wrapper .card > div:nth-child(1){
    position: relative;
}

.load-more{
    display: flex;
    justify-content: center;
    padding: 16px 0;
    flex-direction: column;
    align-items: center;
}
.load-more button{
    background: none;
    border: none;
}
 .arrow {
    display: block;
    margin: 0 auto;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat !important;
    background-image: url(../images/gray-down.svg);
}

.zoom-effect .grid-card-container .card-wrapper .card{
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}
.zoom-effect .grid-card-container .card-wrapper .card:hover, .zoom-effect .grid-card-container .card-wrapper .card:focus-within {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
	z-index: 10;
}

.activeLink {
   pointer-events: auto;
   cursor: pointer;
}
.inactiveLink {
   pointer-events: none;
   cursor: default;
}
.activeLink,
.inactiveLink{
	color: inherit;
	text-decoration: none;
}
.activeLink:hover,
.inactiveLink:hover{
	color: inherit;
}
.gradient-bg{
	position:absolute;
	bottom: 0;
	height: 60%;
	width: 100%;
	left: 0;
	opacity: 0.5;
	background-image: linear-gradient(to top,#000000, transparent);
}

.title-description h2{
	font-size: 28px;
	line-height: 1.714em;
	color: #333333;
	margin-bottom: 14px;
	font-weight: bold;
}
.title-description p{
	font-size: 18px;
	color: #333333;
	line-height: 1.778em;
	margin-bottom: 30px;
}
.title-desc-bg .title-description{
	background: #F5F5F5;
	padding: 24px 0 108px 0;
}
.title-desc-bg .recipie-catalog{
	position: relative;
	top: -80px;
}
.title-desc-bg .title-description p{
	margin-bottom: 0;
}

.grid-card-container .card-wrapper.hide-title-desc .card .card-body{
	display: none;
}
.grid-card-container .card-wrapper.hide-title-desc .card:hover .card-body{
	display: block;
}
.grid-card-container .card-wrapper.hide-title-desc .card:hover .card-body .recipe-preview{
	top: calc(100% - 1px);
}

.grid-card-container .card-wrapper .card .card-body.no-border .recipe-preview{
	border: 0;
}
.grid-card-container .card-wrapper .card .card-body{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.grid-card-container .card-wrapper .card .card-body > p{
	font-size: 18px;
	line-height: 1.7778em;
	color: #333333;
}
/*fix for aspect ratio for video*/
.card-wrapper .card .video-js {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
}

.grid-card-container.select-profession .recipie-catalog .copyright{
	padding-top: 24px;
	font-size: 15px;
}
.grid-card-container.select-profession .recipie-catalog .copyright p{
	margin-bottom: 26px;
	font-size: inherit;
	color: #333333;
	line-height: 2em;
}
.grid-card-container.select-profession .recipie-catalog .card-wrapper .card,
.grid-card-container.select-profession .recipie-catalog .card-wrapper .card-body{
	background: transparent;
}
.grid-card-container.select-profession .recipie-catalog .card-wrapper .card-body{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 10px 0 0 0;
}
.grid-card-container.select-profession .recipie-catalog .card-wrapper .card-body p{
	font-size: 18px;
	text-align: center;
	line-height: 1.556em;
}
.grid-card-container.select-profession .recipie-catalog .card-wrapper .card:hover .card-body{
	border-color: transparent;
}

.grid-card-container.select-profession .title-description h2{
	line-height: 1.714em;
	margin-bottom: 24px;
}
.grid-card-container.select-profession .title-description .logo-wrap{
	padding-bottom: 14px;
	padding-top: 12px;
}
.grid-card-container.select-profession .title-description .logo-wrap img{
	max-width: 206px;
	height: auto;
	max-height: 55px;
}

.grid-card-container.title-desc-bg.content-centered .btnLink{
	margin-top: 24px;
}
.mt-20 {
    margin-top: 20px !important;
}


@media screen and (min-width: 576px) {
  .grid-card-container .recipie-catalog,
  .grid-card-container .title-description .title-desc-content{
    max-width: 540px;
    margin-right: auto;
    margin-left: auto;
  }
  .grid-card-container.content-centered .recipie-catalog,
  .grid-card-container.content-centered .title-description .title-desc-content{
	max-width: 540px;
	margin-right: auto;
    margin-left: auto;
  }
}

@media (min-width: 768px) and (max-width: 991.98px){
	.title-description h2{
		font-size: 20px;
		line-height: 28px;
	}
	.title-description p{
		font-size: 16px;
		line-height: 28px;
	}
	.title-desc-bg .title-description{
		padding: 24px 0 78px 0;
	}
	.title-desc-bg .recipie-catalog{
		top: -56px;
	}
	.catalog-text p{
		font-size: 12px;
		line-height: 20px;
	}
	.grid-card-container.select-profession .recipie-catalog .card-wrapper .card-body p{
		font-size: 14px;
	}
	.grid-card-container.select-profession .recipie-catalog .copyright{
		font-size: 14px;
	}
	.grid-card-container.select-profession .title-description .logo-wrap{
		padding-bottom: 14px;
	}
	.grid-card-container.select-profession .recipie-catalog .copyright{
		padding-top: 14px;
	}
	.grid-card-container.select-profession .recipie-catalog .card-wrapper .card-body a.primary-btn,
	.grid-card-container.select-profession .recipie-catalog .card-wrapper .card-body a.secondary-btn,
	.grid-card-container.select-profession .recipie-catalog .card-wrapper .card-body a.text-action-arrow{
		margin-bottom: 0;
	}
	.grid-card-container.content-centered .recipie-catalog,
	.grid-card-container.content-centered .title-description .title-desc-content{
		max-width: 720px;
		margin-right: auto;
        margin-left: auto;
	}
	
	/* Styles for Grid cards in Modal Popup---------------------*/
	/*fall back to 1 col */
	.modal-content.col-md-6 .two-col .card-wrapper{
		grid-template-columns: repeat(1, 1fr);
	} 
	.modal-content.col-md-6 .three-col .card-wrapper{
		grid-template-columns: repeat(1, 1fr);
	} 
	.modal-content.col-md-6 .four-col .card-wrapper {
		grid-template-columns: repeat(1, 1fr);
	} 
	/*fall back to 2 col */
	.modal-content.col-md-8 .three-col .card-wrapper{
		grid-template-columns: repeat(2, 1fr);
	} 
	.modal-content.col-md-8 .four-col .card-wrapper {
		grid-template-columns: repeat(2, 1fr);
	} 
	/*fall back to 3 col */
	.modal-content.col-md-10 .four-col .card-wrapper {
		grid-template-columns: repeat(3, 1fr);
	} 
}

@media (min-width: 768px){
	
	.grid-card-container .recipie-catalog,
	.grid-card-container .title-description .title-desc-content{
		max-width: 720px;
	}
  
	.title-desc-bg .title-description{
		padding: 36px 0 80px 0;
	}
	
	.col-md-3 .grid-card-container.content-centered .recipie-catalog, 
	.col-md-3 .grid-card-container.content-centered .title-description .title-desc-content,
	.col-md-4 .grid-card-container.content-centered .recipie-catalog, 
	.col-md-4 .grid-card-container.content-centered .title-description .title-desc-content,
	.col-md-6 .grid-card-container.content-centered .recipie-catalog, 
	.col-md-6 .grid-card-container.content-centered .title-description .title-desc-content{
		padding-left: 21px;
		padding-right: 21px;
	}
	
	.title-desc-bg .recipie-catalog{
		top: -56px;
	}
	.card-wrapper .card:hover .recipe-preview,
	.card-wrapper .card:focus-within .recipe-preview{
		display: block;
		border-top-color: black;
		border-top: none;
		margin: 0 !important;
	}
	.recipie-catalog .card-wrapper .card-body > p{
		margin-bottom: 0;
	}
	.grid-card-container.select-profession .recipie-catalog .card-wrapper .card-body > p{
		margin-bottom: 16px;
	}

	.grid-card-container .card-wrapper.hide-title-desc .card:hover .card-body{
		position: absolute;
		top: 100%;
		width: 100%;
		z-index: 11;
	}
	.card-wrapper .card .recipe-preview{
		padding-top: 16px;
	}
	
	/* Styles for Grid cards in Modal Popup---------------------*/
	
	/*fall back to 1 col */
	.modal-content.col-md-4 .two-col .card-wrapper{
		grid-template-columns: repeat(1, 1fr);
	} 
	.modal-content.col-md-4 .three-col .card-wrapper{
		grid-template-columns: repeat(1, 1fr);
	} 
	.modal-content.col-md-4 .four-col .card-wrapper{
		grid-template-columns: repeat(1, 1fr);
	} 
	/*fall back to 2 col */
	.modal-content.col-md-6 .three-col .card-wrapper{
		grid-template-columns: repeat(2, 1fr);
	} 
	.modal-content.col-md-6 .four-col .card-wrapper {
		grid-template-columns: repeat(2, 1fr);
	} 
	/*fall back to 3 col */
	.modal-content.col-md-8 .four-col .card-wrapper{
		grid-template-columns: repeat(3, 1fr);
	} 
	
	/*fix for spacing in popup for new grid card variants*/
	.modal-content.col-md-4 .grid-card-container.title-desc-bg .title-description,
	.modal-content.col-md-4 .grid-card-container.title-desc-bg .recipie-catalog,
	.modal-content.col-md-4 .grid-card-container.content-centered.title-desc-bg .title-description,
	.modal-content.col-md-4 .grid-card-container.content-centered.title-desc-bg .recipie-catalog,
	.modal-content.col-md-6 .grid-card-container.title-desc-bg .title-description,
	.modal-content.col-md-6 .grid-card-container.title-desc-bg .recipie-catalog,
	.modal-content.col-md-6 .grid-card-container.content-centered.title-desc-bg .title-description,
	.modal-content.col-md-6 .grid-card-container.content-centered.title-desc-bg .recipie-catalog,
	.modal-content.col-md-8 .grid-card-container.title-desc-bg .title-description,
	.modal-content.col-md-8 .grid-card-container.title-desc-bg .recipie-catalog,
	.modal-content.col-md-8 .grid-card-container.content-centered.title-desc-bg .title-description,
	.modal-content.col-md-8 .grid-card-container.content-centered.title-desc-bg .recipie-catalog,
	.modal-content.col-md-10 .grid-card-container.title-desc-bg .title-description,
	.modal-content.col-md-10 .grid-card-container.title-desc-bg .recipie-catalog{
		padding-left: 21px;
		padding-right: 21px;
	}
	
	.modal-content.col-md-10 .grid-card-container.content-centered.title-desc-bg .title-description,
	.modal-content.col-md-10 .grid-card-container.content-centered.title-desc-bg .recipie-catalog{
		padding-left: 0;
		padding-right: 0;
	}

}

@media screen and (min-width: 992px) {

	.grid-card-container .recipie-catalog,
	.grid-card-container .title-description .title-desc-content{
		max-width: 960px;
	}
    .grid-card-container.content-centered .recipie-catalog,
	.grid-card-container.content-centered .title-description .title-desc-content{
		max-width: 768px;
		margin-right: auto;
		margin-left: auto;
	}
}


@media screen and (min-width: 1200px) {
  
  .grid-card-container .recipie-catalog,
  .grid-card-container .title-description .title-desc-content{
    max-width: 1160px;
  }
}

@media (max-width: 767px){
	
	.grid-card-container.content-centered .recipie-catalog,
	.grid-card-container.content-centered .title-description .title-desc-content{
		padding: 0;
	}
		
	.card-wrapper .card:focus .recipe-preview,
	.card-wrapper .card:hover .recipe-preview{
		display: block;
		border-top-color: black;
		border-top: none;
		margin: 0 !important;
	}
	
	.card-wrapper .card:focus .card-body.box-shadow .recipe-preview,
	.card-wrapper .card:hover .card-body.box-shadow .recipe-preview,
	.card-wrapper .card:focus .card-body.card-shadow .recipe-preview,
	.card-wrapper .card:hover .card-body.card-shadow .recipe-preview{
		padding: 0;
	}
	
	.card-wrapper .card-body.box-shadow .recipe-preview,
	.card-wrapper .card-body.card-shadow .recipe-preview{
		box-shadow: none;
	}
	.card-wrapper .card:focus .card-body.box-shadow,
	.card-wrapper .card:hover .card-body.box-shadow,
	.card-wrapper .card:focus .card-body.card-shadow,
	.card-wrapper .card:hover .card-body.card-shadow{
		border-radius: 22px;
	}
	
    .recipe-preview{
        display: none;
        position: static;
        border: none;
		padding: 0;
    }
	.card-wrapper,
	.one-col .card-wrapper,
	.two-col .card-wrapper,
	.three-col .card-wrapper,
	.four-col .card-wrapper{
		display: block;
	}
	.card-wrapper .card-body{
		border: none ;
	}
	.card-wrapper .card:hover .card-body,
	.card-wrapper .card:focus .card-body{
		border: 1px solid #8a8484;
		border-top: none;
		border-radius: 0px 0px 22px 22px;
	}
	
	.card-wrapper .card .text-action-arrow {
		padding: 0;
		margin-bottom: 10px;
	} 
	.grid-card-container .card-wrapper .card:focus ,
	.grid-card-container .card-wrapper .card:hover{
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
		z-index: 10;
		margin-bottom: 16px;
	}
	.grid-card-container .card-wrapper .card.no-card-body{
		margin-bottom: 20px;
	}
	.grid-card-container.title-desc-bg .card-wrapper .card.no-card-body{
		margin-bottom: 0;
	}
	.grid-card-container.title-desc-bg.content-centered .card-wrapper .card.no-card-body{
		margin-bottom: 20px;
	}
	.title-description h2{
		font-size: 20px;
		line-height: 28px;
	}
	.title-description p{
		font-size: 14px;
		line-height: 24px;
		margin-bottom: 24px;
	}
	.catalog-text p{
		font-size: 12px;
		line-height: 18px;
	}
	.title-desc-bg .title-description{
		margin-left: -21px;
		margin-right: -21px;
		padding-left: 21px;
		padding-right: 21px;
	}
	.grid-card-container .card-wrapper.hide-title-desc .card{
		margin-bottom: 16px;
	}
	.four-col .grid-card-container.select-profession .card-wrapper{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
	.grid-card-container.select-profession .card-wrapper .card.no-card-body{
		margin-bottom: 0;
	}
	.grid-card-container.select-profession .recipie-catalog .card-wrapper .card-body p{
		font-size: 14px;
	}
	.grid-card-container.select-profession .recipie-catalog .copyright{
		font-size: 14px;
	}
	.grid-card-container.select-profession .title-description .logo-wrap{
		padding-bottom: 14px;
	}
	.grid-card-container.select-profession .recipie-catalog .copyright{
		padding-top: 14px;
	}
	.grid-card-container.select-profession .recipie-catalog .card-wrapper .card-body a.primary-btn,
	.grid-card-container.select-profession .recipie-catalog .card-wrapper .card-body a.secondary-btn,
	.grid-card-container.select-profession .recipie-catalog .card-wrapper .card-body a.text-action-arrow{
		margin-bottom: 0;
	}
	.four-col .grid-card-container.title-desc-bg .card-wrapper,
	.two-col .grid-card-container.title-desc-bg.content-centered .card-wrapper{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
	.grid-card-container.title-desc-bg.content-centered .btnLink{
		margin-top: 0;
	}
}



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

  .grid-card-container .recipie-catalog,
  .grid-card-container .title-description .title-desc-content{
    width: 100%;
    margin-right: auto;
    margin-left: auto;
  }
  
}