/**************************************
    COOKING MATTERS FONTS
**************************************/
@font-face {
    font-family: 'Gotham-Book';
    src: url(../fonts/Gotham-Book.ttf);
}
@font-face {
    font-family: 'Gotham-Bold';
    src: url(../fonts/Gotham-Bold.otf);
}
@font-face {
    font-family: 'Gotham-Black';
    src: url(../fonts/Gotham-Black.otf);
}

/*Styles that will be removed before deployment*/
body {
    margin: 0;
    padding: 0;
}

/**************************************
    COOKING MATTERS UTILITIES
**************************************/
.cm-mxAuto {
    margin-left: auto;
    margin-right: auto;
}
.cm-textCenter {
    text-align: center;
}
.cm-textSmall {
    font-size: 12px;
}
.cm-mt3 {
    margin-top: 16px;
}
.cm-mt4 {
    margin-top: 24px;
}
.cm-mt5 {
    margin-top: 48px;
}
.cm-mb3 {
    margin-bottom: 16px;
}
.cm-mb4 {
    margin-bottom: 24px;
}
.cm-mb5 {
    margin-bottom: 48px;
}
.cm-ml3 {
    margin-left: 16px;
}
.cm-ml4 {
    margin-left: 24px;
}
.cm-ml5 {
    margin-left: 48px;
}
.cm-mr3 {
    margin-right: 16px;
}
.cm-mr4 {
    margin-right: 24px;
}
.cm-mr5 {
    margin-right: 48px;
}
.cm-p3 {
    padding: 16px;
}
.cmPrimaryColor {
    color: #3b8b13;
}
.cm-alertMessage {
    color: #f26621;
    font-family: 'Gotham-Black';
}
.cm-successMessage {
    color: #3b8b13;
    font-family: 'Gotham-Black';
}
.cmWeightBold {
    font-weight: 700;
}
.cmBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    padding: 16px;
    min-width: 230px;
    border-radius: 5px;
    font-size: 16px;
    text-decoration: none;
    font-family: 'Gotham-Black';
    color: #fff;
    background-color: #3b8b13;
    text-align: center;
    outline: none;
    border: 0;
    cursor: pointer;
}
.cmBtnOutline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 10px;
    min-width: 115px;
    font-size: 14px;
    text-decoration: none;
    font-family: 'Gotham-Black';
    color: #000;
    background-color: rgba(0, 0, 0, 0);
    text-align: center;
    outline: none;
    border: 2px solid #3b8b13;
    cursor: pointer;
}
.cmCard2-btn {
    display: inline-block;
    padding: 10px;
    min-width: 120px;
    font-size: 14px;
    text-decoration: none;
    font-family: 'Gotham-Bold';
    border-radius: 4px;
    color: #000;
    background-color: #fff;
    text-align: center;
    outline: none;
    cursor: pointer;
}
.cmBtnOutline img {
    margin-right: 10px;
}
.cm-hide {
    display: none;
}
.cmBtn:focus,
.cmBtnOutline:focus,
.cmCard2-btn:focus {
    outline: none;
}
.cmBtnOutline:hover {
    background-color: #3b8b13;
    color: #fff;
}
.cmBtnOutline:hover img {
    filter: brightness(30);
}
.cmField {
    padding: 13px;
    width: 100%;
    border: 1px solid #3b8b13;
    border-radius: 30px;
    background-color: #fff;
}
.cmField:focus {
    outline: none;
}
.cmGridRow {
    display: flex;
    flex-wrap: wrap;
    margin-left: -5px;
    margin-right: -5px;
}
.cmAlignCenter {
    align-items: center;
}
.cmGridRow .cmGridCol-4by12 {
    width: 33.33%;
    padding-left: 5px;
    padding-right: 5px;
}
.cmGridRow [class*='cmGridCol-'] {
    margin-bottom: 10px;
}

/**************************************
    COOKING MATTERS STYLES
**************************************/

/* Cooking Matters Global Styles */
.cmMain {
    font-size: 18px;
    font-family: 'Gotham-Book' !important;
    color: #484848;
}
.cmMain * {
    box-sizing: border-box;
}
.cmMain h1,
.cmMain h2,
.cmMain h3,
.cmMain h4,
.cmMain h5,
.cmMain h6 {
    font-family: 'Gotham-Black';
    margin-top: 0;
    margin-bottom: 16px;
}
.cmMain h1 {
    font-size: 52px !important;
}
.cmMain h2 {
    font-size: 46px !important;
}
.cmMain h3 {
    font-size: 36px !important;
}
.cmMain h4 {
    font-size: 30px !important;
}
.cmMain h5 {
    font-size: 24px !important;
}
.cmMain h6 {
    font-size: 20px !important;
}
.cmMain p {
    margin-top: 0;
}

/* Cooking Matters Banner */
.cmBanner {
    padding: 30px 40px 60px;
    background-repeat: no-repeat;
    background-position: 190px 0;
    background-size: cover;
    background-color: #fffaf0;
}
.cmBanner .cmBanner-contentBox {
    max-width: 580px;
    padding: 40px;
    border-radius: 25px;
    background-color: #3b8b13;
    color: #fff;
    min-height: 425px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}
.cmBanner .cmBanner-contentBox > * {
    width: 100%;
}
.cmBanner .cmBanner-contentBox .cmBanner-contentBox-title {
    font-size: 46px !important;
}
.cmBanner .cmBanner-contentBox .cmBanner-contentBox-description {
    font-size: 18px;
    line-height: 1.5;
}
.cmBanner .cmBanner-contentBox .cmBanner-contentBox-description p {
    color: #fff;
    font-size: 24px;
}
.cmBanner .cmBanner-contentBox .cmBanner-contentBox-description > p:last-child {
    margin-bottom: 0;
}

.cmRecipeFinder {
    padding: 50px 0;
}
.cmRecipeFinder .cmRecipeFinder-container {
    max-width: 1200px;
    padding-left: 16px;
    padding-right: 16px;
    margin-left: auto;
    margin-right: auto;
}
/*   */
.cm-accordionGroup-collapseBtn {
    padding: 10px 24px;
    background-color: #3b8b13;
    border-radius: 4px;
    color: #fff;
    justify-content: space-between;
    font-weight: bold;
    align-items: center;
    font-size: 16px;
    cursor: pointer;
    display: none;
}
.cmRecipeDetail {
    background-color: #f5ffff;
}
.cmRecipeDetail .cmRecipeFinder-container {
    max-width: 820px;
}

/*Cooking Matters Section Title Area*/
.cmSection-titleArea {
    text-align: center;
}
.cmSection-titleArea h2 {
    color: #3b8b13;
    text-align: center;
}

/*Cooking Matters Section Title Area*/
.cm-tagsInputBox {
    max-width: 890px;
}
.cm-tagsInputBox .cm-tagsInputWrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: transparent;
    padding: 7px 10px 7px 55px;
    border: 1px solid #707070;
    background-image: url(../images/icon-feather-search.png);
    background-position: 10px;
    background-repeat: no-repeat;
    min-height: 55px;
}
.cm-tagsInputBox .cm-emailInputWrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: transparent;
    padding: 13px 10px 7px 55px;
    border: 1px solid #707070;
    min-height: 55px;
}
.cm-tagsInputBox .cm-emailInputWrapper > * {
    width: 100%;
}
.cm-tagsInputBox .cm-emailInputWrapper {
    padding: 0px;
    border: none;
    justify-content: center;
}
.cm-tagsInputBox label {
    margin: 8px 0;
    display: block;
    font-weight: bold;
}
.cm-tagsInputBox label.error {
    color: red;
    font-size: 12px;
}
.cm-tagsInputBox .cm-emailInputWrapper input {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: transparent;
    padding: 13px 10px 7px 55px;
    border: 1px solid #707070 !important;
    min-height: 38px;
}
#send-recipe .cm-emailInputWrapper > div {
    margin-bottom: 8px;
}
#send-recipe .cm-emailInputWrapper button {
    width: 100%;
}
.cm-tagsInputBox .cm-tagsInputWrapper input {
    border: none;
    background: transparent;
    outline: none;
    width: 190px;
    margin-left: 8px;
}
.cm-tagsInputBox .cm-emailInputWrapper input {
    width: 100%;
    padding: 8px;
}
.cmTag {
    display: inline-flex;
    align-items: center;
    background-color: #359ca2;
    color: white;
    border-radius: 40px;
    padding: 6px 10px 6px 10px;
    margin-right: 5px;
    margin-bottom: 5px;
    font-size: 13px;
    font-family: 'Gotham-Bold';
}
.cmTag a {
    margin: 0 7px 0;
    display: inline-block;
    cursor: pointer;
    font-size: 21px;
    line-height: 13px;
}
.noresultsTag {
    background-color: #c4c4c4 !important;
}

/* Cooking Matters Accordion Group */
.cm-accordionGroup {
    display: flex;
    flex-wrap: wrap;
    position: relative;
}
.cm-accordionGroup .cm-singleAccordion {
    flex: 1;
}
.cm-accordionGroup .cm-singleAccordion-header {
    background-color: #d9f4f4;
    color: #3b8b13;
    font-size: 20px;
    font-family: 'Gotham-Bold';
    padding: 10px;
}
.cm-accordionGroup .cm-singleAccordion-headerContent {
    width: fit-content;
    max-width: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.cm-accordionGroup
    .cm-singleAccordion-headerContent
    .cm-singleAccordion-headerTitle {
    margin-right: 24px;
    font-family: 'Gotham-Bold';
}
.cm-singleAccordion.cm-accordionOpened .cm-singleAccordion-arrow {
    transform: rotate(180deg);
}
.cm-accordionGroup .cm-singleAccordion-body {
    padding: 0 10px;
}
.cm-accordionGroup .cm-singleAccordion-body .cm-formGroup{

    position: relative;
}
.cm-accordionGroup .cm-singleAccordion-body .cm-formGroup:after {
    content: '';
    width: calc(100% - 22px);
    height: 1px;
    background-color: #707070;
    bottom: 0px;
    left: 15px;
    position: absolute;
    display: none;
}

/* Cooking Matters Checkbox */
.cm-formGroup {
    display: block;
    margin-top: 5px;
    padding: 10px 10px 8px;
    position: relative;
}
.cm-formGroup input {
    padding: 0;
    height: initial;
    width: initial;
    margin-bottom: 0;
    display: none;
    cursor: pointer;
}
.cm-formGroup label {
    position: relative;
    cursor: pointer;
    font-size: 18px;
}
.cm-formGroup label:before {
    content: '';
    -webkit-appearance: none;
    background-color: transparent;
    border: 1px solid #3b8b13;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
        inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
    padding: 10px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    margin-right: 10px;
    margin-top: -4px;
}
.cm-formGroup input + span {
    background: rgba(0, 0, 0, 0);
}
.cm-formGroup input:checked + span {
    width: 100%;
    height: 100%;
    background: #499d1e;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 5px;
}
.cm-formGroup input:checked ~ label {
    color: #fff;
}
.cm-formGroup input:checked ~ label:before {
    border: 1px solid #fff;
}
.cm-formGroup input:checked ~ label:after {
    content: '';
    display: block;
    position: absolute;
    top: -1px;
    left: 8px;
    width: 4px;
    height: 12px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
/*---------*/

.cm-recipesResults-container {
    max-width: 800px;
    margin: 48px auto;
}

/* Cooking Matters Card */
.cmCard {
    border: 1px solid #707070;
    height: 100%;
}
.cmCard .cmCardBanner {
    height: 160px;
    position: relative;
}
.cmCard .cmCardBanner .cmCardBadge {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 50px;
    height: 50px;
    padding: 10px;
    background-image: url(../images/badge-bg.png);
    background-size: 100%;
    background-repeat: no-repeat;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}
.cmCard .cmCardBanner .cmCardBadge .cmCardBadge-count,
.cmCard .cmCardBanner .cmCardBadge .cmCardBadge-unit {
    width: 100%;
    color: #3b8b13;
    font-family: 'Gotham-Bold';
    display: block;
    text-align: center;
}
.cmCard .cmCardBanner .cmCardBadge .cmCardBadge-count {
    font-size: 23px;
}
.cmCard .cmCardBanner .cmCardBadge .cmCardBadge-unit {
    font-size: 10px;
}
.cmCard .cmCardBanner .cmCardBanner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cmCard .cmCardBody {
    padding: 24px 16px;
}
.cmCard .cmCardBody .cmCardTitle a {
    color: #484848;
    font-size: 16px !important;
    line-height: 22px;
    min-height: 45px;
    display: inline-block;
    font-family: 'Gotham-Bold';
}
.cmCard .cmCardBody .cmCardTitle a:hover {
    color: #3b8b13;
}
.cmCard .cmCardBody .cmCardDescription {
    font-size: 14px;
    line-height: 20px;
}
.cmCard .cmCardBody .cmCardTags {
    min-height: 125px;
}

/* card2 */
.cmCard2 {
    max-width: 300px;
    text-align: center;
}
.cmCard2 .cmCard2-img {
    width: 100%;
    margin-bottom: 24px;
}
.cmCard2 .cmCard2-title {
    font-size: 14px !important;
    margin-bottom: 24px;
}
/*    */

.cm-backToTop {
    color: #3b8b13;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    display: block;
}
.cm-backToTop img {
    margin-left: 10px;
}
.cm-recipeDetail-container {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

/* recipe detail slider */
.cm-recipeDetail-slider
    .cm-recipeDetail-sliderItem
    .cm-recipeDetain-sliderItemInner {
    position: relative;
}
.cmRecipeDetail-grid,
.cmRecipeDetail-grid p {
    font-size: 14px;
}
.cm-recipeDetail-slider
    .cm-recipeDetail-sliderItem
    .cm-recipeDetain-sliderItemInner
    .cmSlideBadge {
    position: absolute;
    bottom: 30px;
    left: 30px;
    width: 90px;
    height: 90px;
    padding: 10px;
    background-image: url(../images/badge-bg.png);
    background-size: 100%;
    background-repeat: no-repeat;
}
.cm-recipeDetain-sliderItemInner .cmSlideBadge .cmSlideBadge-count,
.cm-recipeDetain-sliderItemInner .cmSlideBadge .cmSlideBadge-unit {
    width: 100%;
    color: #3b8b13;
    font-family: 'Gotham-Bold';
    display: block;
    text-align: center;
}
.cm-recipeDetain-sliderItemInner .cmSlideBadge .cmSlideBadge-count {
    font-size: 45px;
}
.cm-recipeDetain-sliderItemInner .cmSlideBadge .cmSlideBadge-unit {
    font-size: 19px;
}
.cm-recipeDetail-slider ul.slick-dots {
    bottom: -30px;
}
.cm-recipeDetail-slider ul.slick-dots li button {
    background: #b9b0b0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.cm-recipeDetail-slider ul.slick-dots li.slick-active button {
    background: #499d1e;
}
.cm-recipeDetail-slider ul.slick-dots li button::before {
    opacity: 0;
}
.cm-recipeDetail-slider .cm-recipeDetain-sliderItemImg {
    width: 100%;
}
/*  */

.cm-pageChanger {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.cm-pageChanger .cmBtn.cm-pageChanger-mobileBtn {
    display: none;
}
.backPageBtn {
    font-size: 16px;
    font-weight: bold;
    color: #3b8b13;
}
.cmRecipeFinder.cmRecipeDetail {
    padding-bottom: 0;
}
.cmContainer820 {
    padding-left: 16px;
    padding-right: 16px;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}
.cmRecipeDetail-grid {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
    line-height: 1.5;
    font-size: 14px;
}
.cmRecipeDetail-gridInner1,
.cmRecipeDetail-gridInner2 {
    padding-left: 16px;
    padding-right: 16px;
}
.cmRecipeDetail-gridInner1 {
    width: calc(100% - 270px);
}
.cmRecipeDetail-gridInner2 {
    width: 270px;
}
section.cmRecipeDetails {
    padding-top: 40px;
    padding-bottom: 40px;
}

/* Cooking Matters Counter */
.cm-counterContainer {
    display: flex;
    flex-wrap: wrap;
}
.cm-counterContainer .cm-singleCounter {
    padding: 16px 0;
    text-align: center;
    margin-right: 40px;
}
.cm-counterContainer .cm-singleCounter .cm-singleCounter-title {
    margin-bottom: 0;
    font-family: 'Gotham-Bold';
}
.cmRecipeDetails .cm-counterContainer {
    margin-top: 40px;
}
.cm-unStyledList {
    padding: 0;
    margin: 0;
    list-style-type: none;
}
.cmRecipeDetails-extras .cmRecipeDetails-extrasTitle {
    width: fit-content;
    font-size: 14px !important;
    font-family: 'Gotham-Bold';
}
.cmUnderlined {
    border-bottom: 2px solid;
}
.cmRecipeDetails-extras {
    margin-top: 40px;
}
.cmRecipeDetails-extras .meterialsBox {
    display: flex;
    flex-wrap: wrap;
    margin-left: -5px;
    margin-right: -5px;
}
.cmRecipeDetails-extras .meterialsBox .meterialsBox-inner1,
.cmRecipeDetails-extras .meterialsBox .meterialsBox-inner2 {
    width: 50%;
    padding-left: 5px;
    padding-right: 5px;
}
.cmOderedList,
.cmUnOderedList {
    padding-left: 0;
    margin-left: 15px;
}
.cmOderedList li,
.cmUnOderedList li {
    padding-left: 16px;
}
.cmMenuImage {
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
}
.cmRecipeDetail-gridInner2-actionBtns {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.cmRecipeDetail-gridInner2 .cmRecipeDetail-gridInner2-actionBtns {
    margin-top: 100px;
}
.cm-socialIconsBox .cm-socialIcon {
    border: 2px solid #484848;
    width: 33px;
    height: 33px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #fff;
}
.cmRecipeDetail-gridInner2 .cm-socialIconsBox {
    text-align: right;
}
.nutritionImgBox {
    margin-top: 50px;
}
.nutritionImgBox img {
    max-width: 100%;
}
.cm-moreRecipesSection {
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: #359ca2;
}
.cm-moreRecipesSection .cm-moreRecipesSection-title {
    color: #fff;
    margin-bottom: 40px;
}
.cm-moreRecipesSection-grid {
    margin-left: -15px;
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
}
.cm-moreRecipesSection-grid .cm-moreRecipesSection-gridInner1,
.cm-moreRecipesSection-grid .cm-moreRecipesSection-gridInner2,
.cm-moreRecipesSection-grid .cm-moreRecipesSection-gridInner3 {
    width: 33.33%;
    padding-left: 16px;
    padding-right: 16px;
}
.cm-moreRecipesSection .cmCard2-title {
    color: #fff;
}
.cmVideo-textarea video {
    width: 100%;
    max-height: 600px;
}
.cmpl-loader,
.cmpl-loader-for {
    border: 10px solid #f3f3f3;
    border-radius: 50%;
    border-top: 10px solid #499d1e;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    -webkit-animation: spin 1s linear infinite; /* Safari */
    animation: spin 1s linear infinite;
    display: none;
}
/*Loader*/
.ajax-loader {
    display: none;
    background-color: #23282d;
    opacity: 0.75;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 100%;
    padding: 0;
    margin: -4px -8px 0px 8px;
    position: relative;
    vertical-align: middle;
}
.ajax-loader::before {
    content: '';
    position: absolute;
    background-color: #fbfbfc;
    top: 4px;
    left: 4px;
    width: 6px;
    height: 6px;
    border: none;
    border-radius: 100%;
    transform-origin: 8px 8px;
    animation-name: spin;
    animation-duration: 1000ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.player-container {
    margin: auto;
}
.player {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    box-shadow: 0px 10px 0px -3px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    background: #000000;
}
.player:fullscreen {
    padding-bottom: 100vh;
}
.player:-webkit-full-screen {
    padding-bottom: 100vh;
}
.player:-moz-full-screen {
    padding-bottom: 100vh;
}
.player:-ms-fullscreen {
    padding-bottom: 100vh;
}
.player video {
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.controls {
    padding: 0;
    position: absolute;
    bottom: -80px;
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    background: linear-gradient(
        180deg,
        rgba(37, 37, 37, 0) 10%,
        rgba(37, 37, 37, 0.6) 80%
    );
    transition: all 0.2s ease-in 5s;
}
.player:hover .controls {
    bottom: 0;
    transition: all 0.2s ease-out;
}
.time {
    position: absolute;
    right: 30px;
    bottom: 100%;
    padding-bottom: 14px;
}
.progress {
    height: 8px;
    width: calc(100% - 40px);
    background: rgba(60, 60, 60, 0.6);
    margin: auto;
    border-radius: 6px;
    position: absolute;
    left: 20px;
    bottom: 100%;
    transition: height 0.1s ease-in-out;
}
.progress:hover {
    height: 10px;
}
.progress-filled {
    background: white;
    width: 0%;
    height: 100%;
    border-radius: 6px;
    transition: all 0.1s;
}
.controls-main {
    width: calc(100% - 40px);
    margin: auto;
    height: 100%;
    display: flex;
    justify-content: space-between;
}
.controls-left,
.controls-right {
    flex: 1;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.controls-left {
    margin-left: 10px;
}
.controls-right {
    margin-right: 10px;
    justify-content: flex-end;
}
.volume {
    display: flex;
    align-items: center;
}
.volume-btn {
    margin-right: 10px;
}
.volume-btn #volume-off,
.volume-btn #volume-high {
    opacity: 0;
}
.volume-btn.loud #volume-high {
    opacity: 1;
}
.volume-btn.muted #volume-off {
    opacity: 1;
}
.volume-btn.muted #volume-high,
.volume-btn.muted #volume-low {
    opacity: 0;
}
.volume-slider {
    height: 8px;
    width: 80px;
    background: rgba(60, 60, 60, 0.6);
    border-radius: 6px;
    position: relative;
}
.volume-filled {
    background: white;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    transition: width 0.2s ease-in-out;
}
.volume-filled:hover,
.play-btn:hover.play-btn:before,
.play-btn:hover.play-btn:after {
    background: var(--accent);
}
button {
}
.play-btn {
    width: 30px;
    height: 30px;
    position: relative;
    margin: auto;
    transform: rotate(-90deg) scale(0.8);
    transition: -webkit-clip-path 0.3s ease-in 0.1s,
        shape-inside 0.3s ease-in 0.1s,
        transform 0.8s cubic-bezier(0.85, -0.25, 0.25, 1.425);
}
.play-btn.paused {
    transform: rotate(0deg);
}
.play-btn:before,
.play-btn:after {
    content: '';
    position: absolute;
    background: white;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: inherit;
}
.play-btn:before {
    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 40%, 0 40%);
    shape-inside: polygon(0 10%, 100% 10%, 100% 40%, 0 40%);
}
.play-btn:after {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 90%, 0 90%);
    shape-inside: polygon(0 60%, 100% 60%, 100% 90%, 0 90%);
}
.play-btn.paused:before {
    -webkit-clip-path: polygon(10% 0, 90% 51%, 90% 51%, 10% 51%);
    shape-inside: polygon(0 0, 100% 51%, 100% 51%, 0 51%);
}
.play-btn.paused:after {
    -webkit-clip-path: polygon(10% 49.5%, 80% 49.5%, 90% 49.5%, 10% 100%);
    shape-inside: polygon(10% 49.5%, 80% 49.5%, 90% 49.5%, 10% 100%);
}
button:focus {
    outline: none;
}
.speed-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    margin-right: 20px;
    text-align: center;
}
.speed-list li {
    color: var(--main);
    padding: 5px;
    cursor: default;
    color: white;
}
.speed-list li:hover,
.speed-list li.active {
    color: var(--accent);
    font-weight: bold;
}
.fullscreen {
    display: flex;
    justify-content: center;
}

/**************************************
    COOKING MATTERS RESPONSIVENESS
**************************************/
@media only screen and (max-width: 1280px) {
    .cmBanner {
        background-position: top right;
        background-size: unset;
    }
}

@media only screen and (max-width: 1024px) {
    .cmBanner .cmBanner-contentBox {
        max-width: 480px;
        padding: 24px;
        min-height: 350px;
    }
    .cmBanner .cmBanner-contentBox .cmBanner-contentBox-title {
        font-size: 40px !important;
    }
    .cmMain h2 {
        font-size: 40px !important;
    }
    .cmBanner .cmBanner-contentBox .cmBanner-contentBox-description {
        font-size: 16px;
    }
    .cm-accordionGroup .cm-singleAccordion-header {
        font-size: 14px;
    }
    .cm-singleAccordion.cm-accordionOpened .cm-singleAccordion-arrow {
        width: 10px;
    }
    .cm-accordionGroup
        .cm-singleAccordion-headerContent
        .cm-singleAccordion-headerTitle {
        margin-right: 10px;
    }
    .cmBtn {
        min-height: 55px;
    }
    img.cm-singleAccordion-arrow {
        width: 10px;
    }
}

@media only screen and (max-width: 767px) {
    .cm-accordionGroup {
        padding-left: 0px;
        padding-right: 0px;
    }
    .cm-accordionGroup .cm-singleAccordion {
        width: 100%;
        flex: unset;
        margin-bottom: 16px;
    }
    .cm-accordionGroup .cm-singleAccordion-body .cm-formGroup {
        max-width: 100%;
    }
    .cm-accordionGroup .cm-singleAccordion-body {
        padding: 0;
    }
    .cm-accordionGroup .cm-singleAccordion-header {
        background-color: rgba(0, 0, 0, 0);
    }
    .cmMain h2 {
        font-size: 36px !important;
    }
    .cm-accordionGroup
        .cm-singleAccordion-headerContent
        .cm-singleAccordion-headerTitle {
        margin-right: 0px;
        margin-left: 10px;
        order: 2;
    }
    .cm-formGroup {
        margin-top: 0;
    }
    .cm-accordionGroup .cm-singleAccordion-body .cm-formGroup:after {
        display: block;
    }
    .cm-singleAccordion .cm-singleAccordion-arrow {
        transform: rotate(180deg) !important;
    }
    .cm-singleAccordion.cm-accordionOpened .cm-singleAccordion-arrow {
        transform: rotate(0deg) !important;
    }
    .cm-accordionGroup-collapseBtn {
        display: flex;
    }
    .cmGridRow .cmGridCol-4by12 {
        width: 50%;
    }
    .cm-recipeDetail-slider {
        margin-top: 50px;
        margin-left: -15px;
        margin-right: -15px;
        margin-bottom: 0 !important;
    }
    .cm-recipeDetail-slider
        .cm-recipeDetail-sliderItem
        .cm-recipeDetain-sliderItemInner
        .cmSlideBadge {
        left: unset;
        right: 30px;
    }
    .cm-recipeDetail-slider ul.slick-dots {
        bottom: 20px;
    }
    .cm-recipeDetail-slider ul.slick-dots li button {
        background-color: #fff;
    }
    .cm-pageChanger {
        margin-top: 16px;
    }
}

@media only screen and (max-width: 576px) {
    .cmBanner {
        display: none;
    }
    .cmGridRow .cmGridCol-4by12 {
        width: 100%;
    }
    .cm-sortBy {
        display: none;
    }
    .cm-accordionGroup {
        display: none;
    }
    .cmRecipeFinder-container.cmRecipeFinder-container-forMobile {
        padding-bottom: 32px;
        padding-top: 50px;
        background-color: #f5ffff;
    }
    .cmRecipeFinder {
        padding-top: 0;
    }
    .cmBtn {
        width: 100%;
    }
    .cmCard .cmCardBody .cmCardTags {
        min-height: 100px;
    }
    .cm-pageChanger .cmBtn:not(.cm-pageChanger-mobileBtn) {
        display: none;
    }
    .cm-pageChanger .cmBtn.cm-pageChanger-mobileBtn {
        display: inline-block;
        width: fit-content;
        font-size: 12px;
        min-height: unset;
        min-width: 118px;
    }
    .cmRecipeDetail-gridInner1,
    .cmRecipeDetail-gridInner2 {
        width: 100%;
    }
    .cmRecipeDetail-gridInner2 .cmRecipeDetail-gridInner2-actionBtns {
        margin-top: 50px;
        margin-left: -16px;
        margin-right: -16px;
    }
    .cmRecipeDetail-gridInner2-actionBtns .cmBtnOutline:first-child {
        border-left: 0;
        border-right-width: 1px;
    }
    .cmRecipeDetail-gridInner2-actionBtns .cmBtnOutline:last-child {
        border-right: 0;
        border-left-width: 1px;
    }
    .cmRecipeDetail-gridInner2-actionBtns .cmBtnOutline {
        width: 50%;
    }
    .cmRecipeDetail-gridInner2 .cm-socialIconsBox {
        text-align: center;
        margin-left: -16px;
        margin-right: -16px;
        background-color: #f5ffff;
        margin-top: 0;
        padding: 24px 16px;
    }
    .cmRecipeDetail-gridInner2 .cm-socialIconsBox > span {
        width: 100%;
        margin-right: 0;
        display: block;
        margin-bottom: 16px;
    }
    .nutritionImgBox img {
        width: 100%;
    }
    .cm-moreRecipesSection .cm-moreRecipesSection-title {
        text-align: center;
    }
}
/**************************************
    COOKING MATTERS RESPONSIVENESS
**************************************/
@media only screen and (max-width: 1280px) {
    .cmBanner {
        background-position: top right;
        background-size: unset;
    }
}

@media only screen and (max-width: 1024px) {
    .cmBanner .cmBanner-contentBox {
        max-width: 480px;
        padding: 24px;
        min-height: 350px;
    }
    .cmBanner .cmBanner-contentBox .cmBanner-contentBox-title {
        font-size: 40px !important;
    }
    .cmMain h2 {
        font-size: 40px !important;
    }
    .cmBanner .cmBanner-contentBox .cmBanner-contentBox-description {
        font-size: 16px;
    }
    .cm-accordionGroup .cm-singleAccordion-header {
        font-size: 14px;
    }
    .cm-singleAccordion.cm-accordionOpened .cm-singleAccordion-arrow {
        width: 10px;
    }
    .cm-accordionGroup
        .cm-singleAccordion-headerContent
        .cm-singleAccordion-headerTitle {
        margin-right: 10px;
    }
    .cmBtn {
        min-height: 55px;
    }
    img.cm-singleAccordion-arrow {
        width: 10px;
    }
}

@media only screen and (max-width: 767px) {
    .cm-accordionGroup {
        padding-left: 0px;
        padding-right: 0px;
    }
    .cm-accordionGroup .cm-singleAccordion {
        width: 100%;
        flex: unset;
        margin-bottom: 16px;
    }
    .cm-accordionGroup .cm-singleAccordion-body .cm-formGroup {
        max-width: 100%;
    }
    .cm-accordionGroup .cm-singleAccordion-body {
        padding: 0;
    }
    .cm-accordionGroup .cm-singleAccordion-header {
        background-color: rgba(0, 0, 0, 0);
    }
    .cmMain h2 {
        font-size: 36px !important;
    }
    .cm-accordionGroup
        .cm-singleAccordion-headerContent
        .cm-singleAccordion-headerTitle {
        margin-right: 0px;
        margin-left: 10px;
        order: 2;
    }
    .cm-formGroup {
        margin-top: 0;
    }
    .cm-accordionGroup .cm-singleAccordion-body .cm-formGroup:after {
        display: block;
    }
    .cm-singleAccordion .cm-singleAccordion-arrow {
        transform: rotate(180deg) !important;
    }
    .cm-singleAccordion.cm-accordionOpened .cm-singleAccordion-arrow {
        transform: rotate(0deg) !important;
    }
    .cm-accordionGroup-collapseBtn {
        display: flex;
    }
    .cmGridRow .cmGridCol-4by12 {
        width: 50%;
    }
    .cm-recipeDetail-slider {
        margin-top: 50px;
        margin-left: -15px;
        margin-right: -15px;
        margin-bottom: 0 !important;
    }
    .cm-recipeDetail-slider
        .cm-recipeDetail-sliderItem
        .cm-recipeDetain-sliderItemInner
        .cmSlideBadge {
        left: unset;
        right: 30px;
    }
    .cm-recipeDetail-slider ul.slick-dots {
        bottom: 20px;
    }
    .cm-recipeDetail-slider ul.slick-dots li button {
        background-color: #fff;
    }
    .cm-pageChanger {
        margin-top: 16px;
    }
}

@media only screen and (max-width: 576px) {
    .cmBanner {
        display: none;
    }
    .cmGridRow .cmGridCol-4by12 {
        width: 100%;
    }
    .cm-sortBy {
        display: none;
    }
    .cm-accordionGroup {
        display: none;
    }
    .cmRecipeFinder-container.cmRecipeFinder-container-forMobile {
        padding-bottom: 32px;
        padding-top: 50px;
        background-color: #f5ffff;
    }
    .cmRecipeFinder {
        padding-top: 0;
    }
    .cmBtn {
        width: 100%;
    }
    .cmCard .cmCardBody .cmCardTags {
        min-height: 100px;
    }
    .cm-pageChanger .cmBtn:not(.cm-pageChanger-mobileBtn) {
        display: none;
    }
    .cm-pageChanger .cmBtn.cm-pageChanger-mobileBtn {
        display: inline-block;
        width: fit-content;
        font-size: 12px;
        min-height: unset;
        min-width: 118px;
    }
    .cmRecipeDetail-gridInner1,
    .cmRecipeDetail-gridInner2 {
        width: 100%;
    }
    .cmRecipeDetail-gridInner2 .cmRecipeDetail-gridInner2-actionBtns {
        margin-top: 50px;
        margin-left: -16px;
        margin-right: -16px;
    }
    .cmRecipeDetail-gridInner2-actionBtns .cmBtnOutline:first-child {
        border-left: 0;
        border-right-width: 1px;
    }
    .cmRecipeDetail-gridInner2-actionBtns .cmBtnOutline:last-child {
        border-right: 0;
        border-left-width: 1px;
    }
    .cmRecipeDetail-gridInner2-actionBtns .cmBtnOutline {
        width: 50%;
    }
    .cmRecipeDetail-gridInner2 .cm-socialIconsBox {
        text-align: center;
        margin-left: -16px;
        margin-right: -16px;
        background-color: #f5ffff;
        margin-top: 0;
        padding: 24px 16px;
    }
    .cmRecipeDetail-gridInner2 .cm-socialIconsBox > span {
        width: 100%;
        margin-right: 0;
        display: block;
        margin-bottom: 16px;
    }
    .nutritionImgBox img {
        width: 100%;
    }
    .cm-moreRecipesSection .cm-moreRecipesSection-title {
        text-align: center;
    }
}

/****************************************
  NEW BANNER
****************************************/
.cmBanner-home {
    justify-content: center;
    padding-left: 0;
    overflow: hidden;
    position: relative;
    flex-direction: column;
}
@media screen and (min-width: 767px) {
    .cmBanner-home {
        padding: 30px 40px 60px;
        background-repeat: no-repeat;
        background-position: 190px 0;
        background-size: cover;
        padding: 31px 0;
        max-width: 1602px;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: stretch;
        align-items: center;
        padding-left: 30px;
    }
}
.cmBanner-home .cmBanner-img-home {
    position: relative;
    right: 0;
    z-index: 1;
    max-height: inherit;
}
@media screen and (min-width: 767px) {
    .cmBanner-home .cmBanner-img-home {
        position: absolute;
        right: 0;
        z-index: 1;
        max-height: 516px;
    }
}
.cmBanner-home .cmBanner-img-home img {
    width: 100%;
    min-height: 515px;
}
@media screen and (min-width: 767px) {
    .cmBanner-home .cmBanner-img-home img {
        width: 1085px;
        height: 515px;
    }
}
@media screen and (max-width: 768px) {
    .cmBanner-home .cmBanner-img-home img {
        width: 100%;
        height: 400px;
        object-fit: cover;
        object-position: 86% 0;
    }
}
@media screen and (max-width: 768px) {
    .cmBanner-home .cmBanner-img-home img {
        object-position: 73% 0;
    }
}
.cmBanner-home .cmBanner-contentBox-home {
    padding: 58px 60px 52px 39px;
    border-radius: 0px;
    background-color: #3b8b13;
    color: #fff;
    min-height: inherit;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    z-index: 2;
    margin: 0 auto;
    max-width: 100%;
}
@media screen and (min-width: 767px) {
    .cmBanner-home .cmBanner-contentBox-home {
        border-radius: 25px;
        min-height: 320px;
        max-width: 481px;
        box-sizing: content-box;
        margin: initial;
    }
}
@media only screen and (max-width: 766px) {
    .cmBanner-home .cmBanner-contentBox-home {
        border-radius: 25px 25px 0 0;
        padding: 40px 24px;
        margin-top: -30px;
    }
}
.cmBanner-home .cmBanner-contentBox-home .cmBanner-contentBox-title-home {
    margin-bottom: 26px;
}
@media only screen and (max-width: 767px) {
    .cmBanner-home
        .cmBanner-contentBox-home
        .cmBanner-contentBox-title-home
        h1 {
        font-size: 34px;
    }
    .cmBanner-home
        .cmBanner-contentBox-home
        .cmBanner-contentBox-description-home
        p[data-v-48d1af89] {
        font-size: 24px;
        margin-bottom: 0;
        line-height: 30px;
    }
}
.cmBanner-home
    .cmBanner-contentBox-home
    .cmBanner-contentBox-description-home
    p {
    margin-bottom: 26px;
    color: white;
    line-height: 26px;
}
@media only screen and (max-width: 767px) {
    .cmBanner-home
        .cmBanner-contentBox-home
        .cmBanner-contentBox-description-home
        p {
        font-size: 24px;
        margin-bottom: 0;
        line-height: 30px;
    }
}
.desktop {
    display: none;
}
@media screen and (min-width: 767px) {
    .desktop {
        display: flex;
    }
}
.mobile {
    display: block;
}
@media screen and (min-width: 767px) {
    .mobile {
        display: none;
    }
}
.cmMB0 {
    margin-bottom: 0 !important;
}

ul {
    list-style: disc !important;
}

ol {
    list-style: decimal !important;
}