/*
Theme Name: Hawke 2023
Template: cream-magazine
Author: TCW
Description: Based on: https://themebeez.com/themes/cream-magazine/
Tags: custom-background,custom-header,custom-logo,custom-menu,featured-images,threaded-comments,translation-ready,one-column,two-columns,blog,news,right-sidebar,theme-options,footer-widgets,left-sidebar,grid-layout,rtl-language-support
Version: 1.0.1.1694510060
Updated: 2023-09-12 10:14:20


 /* == Add your own styles below this line ==


 HAWKE LIFE : #66cc99 (RGB: 102,204,153);
--------------------------------------------*/





@font-face {
    font-family: 'GranbyEF-Light';
    src: url('/fonts/GranbyEF-Light.eot');
    src: url('/fonts/GranbyEF-Light.eot?#iefix') format('embedded-opentype'),
        url('/fonts/GranbyEF-Light.woff2') format('woff2'),
        url('/fonts/GranbyEF-Light.woff') format('woff'),
        url('/fonts/GranbyEF-Light.ttf') format('truetype'),
        url('/fonts/GranbyEF-Light.svg#GranbyEF-Light') format('svg');
    font-weight: 300;
    font-style: normal;
}


@font-face {
    font-family: 'GranbyEF-Medium';
    src: url('/fonts/GranbyEF-Medium.eot');
    src: url('/fonts/GranbyEF-Medium.eot?#iefix') format('embedded-opentype'),
        url('/fonts/GranbyEF-Medium.woff2') format('woff2'),
        url('/fonts/GranbyEF-Medium.woff') format('woff'),
        url('/fonts/GranbyEF-Medium.ttf') format('truetype'),
        url('/fonts/GranbyEF-Medium.svg#GranbyEF-Medium') format('svg');
    font-weight: 300;
    font-style: normal;
}


@font-face {
    font-family: 'GranbyEF-ExtraBold';
    src: url('/fonts/GranbyEF-ExtraBold.eot');
    src: url('/fonts/GranbyEF-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('/fonts/GranbyEF-ExtraBold.woff2') format('woff2'),
        url('/fonts/GranbyEF-ExtraBold.woff') format('woff'),
        url('/fonts/GranbyEF-ExtraBold.ttf') format('truetype'),
        url('/fonts/GranbyEF-ExtraBold.svg#GranbyEF-ExtraBold') format('svg');
    font-weight: 800;
    font-style: normal;
}


@font-face {
    font-family: 'GillSans-Medium';
    src: url('/fonts/GillSansMTPro-Medium.eot?') format('eot'),
         url('/fonts/GillSansMTPro-Medium.woff') format('woff'),
         url('/fonts/GillSansMTPro-Medium.ttf') format('truetype'),
         url('/fonts/GillSansMTPro-Medium.svg#webfontKdgXnHG8') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-weight: 300; font-family: GranbyEF;
    src: url('/fonts/GillSansMTPro-Light.eot?') format('eot'),
         url('/fonts/GillSansMTPro-Light.woff') format('woff'),
         url('/fonts/GillSansMTPro-Light.ttf') format('truetype'),
         url('/fonts/GillSansMTPro-Light.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
  font-family: 'FontAwesome';
  font-style: normal;
  font-weight: 300;
  font-display: block;
  src: url("/fonts/fa-light-300.eot");
  src: url("/fonts/fa-light-300.eot?#iefix") format("embedded-opentype"), url("/fonts/fa-light-300.woff2") format("woff2"), url("/fonts/fa-light-300.woff") format("woff"), url("/fonts/fa-light-300.ttf") format("truetype"), url("/fonts/fa-light-300.svg#fontawesome") format("svg"); }

.fal {
  font-family: 'FontAwesome';
  font-weight: 300; }
@font-face {
  font-family: 'FontAwesome';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/fonts/fa-regular-400.eot");
  src: url("/fonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("/fonts/fa-regular-400.woff2") format("woff2"), url("/fonts/fa-regular-400.woff") format("woff"), url("/fonts/fa-regular-400.ttf") format("truetype"), url("/fonts/fa-regular-400.svg#fontawesome") format("svg"); }

.far {
  font-family: 'FontAwesome';
  font-weight: 400; }
@font-face {
  font-family: 'FontAwesome';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("/fonts/fa-solid-900.eot");
  src: url("/fonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("/fonts/fa-solid-900.woff2") format("woff2"), url("/fonts/fa-solid-900.woff") format("woff"), url("/fonts/fa-solid-900.ttf") format("truetype"), url("/fonts/fa-solid-900.svg#fontawesome") format("svg"); }

.fa,
.fas {
  font-family: 'FontAwesome';
  font-weight: 900; }

@font-face {
  font-family: 'FontAwesome Brands';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/fonts/fa-brands-400.eot");
  src: url("/fonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("/fonts/fa-brands-400.woff2") format("woff2"), url("/fonts/fa-brands-400.woff") format("woff"), url("/fonts/fa-brands-400.ttf") format("truetype"), url("/fonts/fa-brands-400.svg#fontawesome") format("svg"); }

  .fab {
  font-family: 'FontAwesome Brands';
  font-weight: 400; }

@font-face {
  font-family: 'FontAwesome Duotone';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("/fonts/fa-duotone-900.eot");
  src: url("/fonts/fa-duotone-900.eot?#iefix") format("embedded-opentype"), url("/fonts/fa-duotone-900.woff2") format("woff2"), url("/fonts/fa-duotone-900.woff") format("woff"), url("/fonts/fa-duotone-900.ttf") format("truetype"), url("/fonts/fa-duotone-900.svg#fontawesome") format("svg"); }

.fad {
  position: relative;
  font-family: 'FontAwesome Duotone';
  font-weight: 900; }

.fad:before {
  position: absolute;
  color: var(--fa-primary-color, inherit);
  opacity: 1;
  opacity: var(--fa-primary-opacity, 1); }

.fad:after {
  color: var(--fa-secondary-color, inherit);
  opacity: 0.4;
  opacity: var(--fa-secondary-opacity, 0.4); }

.fa-swap-opacity .fad:before,
.fad.fa-swap-opacity:before {
  opacity: 0.4;
  opacity: var(--fa-secondary-opacity, 0.4); }

.fa-swap-opacity .fad:after,
.fad.fa-swap-opacity:after {
  opacity: 1;
  opacity: var(--fa-primary-opacity, 1); }

.fad.fa-inverse {
  color: #fff; }

.fad.fa-stack-1x, .fad.fa-stack-2x {
  position: absolute; }

.fad.fa-stack-1x:before,
.fad.fa-stack-2x:before,
.fad.fa-fw:before {
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%); }


.far {
  font-family: 'FontAwesome';
  font-weight: 400; }

.fal {
  font-family: 'FontAwesome';
  font-weight: 300; }

.fa,
.fas {
  font-family: 'FontAwesome';
  font-weight: 900; }

  i.fa, i.fas, i.fal, i.fad, i.fab {font-style: normal;}

.fa-home:before {
    content: "\f015"
}

.fa-hat-chef:before {
    content: "\f86b";
}

.fa-clock:before {
    content: "\f017";
}

.fa-utensils-alt:before {
    content: "\f2e6";
}

.fa-link {
    content: "\f0c1";
}













/* =========== OVERRIDES =========== */

.cm-container {
    padding: 0 15px;
}

.banner-inner .cm-container {
    padding: 0;
}


.banner-inner .row {margin:0;}

.posted-by.meta-author,
.widget_recent_comments,
.widget_meta,
.main-navigation,
.logo-container

{display: none;}


:root {
  --button-text-color: #FFF;
  --button-color: rgba(102,204,153,1);
  --button-hover-color: rgba(102,204,153,.7);
  --HKLife-color: rgba(102,204,153,1);
}


img.custom-logo {
    height: 50px;
}

.cm-container {max-width: 100% !important;}

.top-header > .cm-container,
.top-header-social-links
{
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.logo {width: 200px;}


a, a:link, a:visited {
    color: var(--button-color);
    }
 


html,
body,
h1, h2, h3, h4, h5, h6, .site-title,
a:link,
strong,
.the_content,
.the_content li

 {font-family: GranbyEF-Light !important; font-size: 1.2em;}


.the_content {font-size: 1.2em !important; }


h1 a:link , h2 a:link , h3 a:link , h4 a:link , h5 a:link , h6 a:link ,
strong a:link ,
.the_content  a:link ,
p strong,
p a:link {font-size: 1em;}

.the_content > p  {line-height: 1.2em; padding: 10px 50px}

/*.the_content:not(p):not(a):not(b):not(ul):not(li) {line-height: 1.2em; padding: 10px 50px}*/


.post_tags {margin-bottom: 50px}
.post_tags a:link {font-size: 1.2em; border-radius: 50px;}
.wp-show-posts-meta a, .wp-show-posts-meta a:visited {color:#010101;}

.widget_tag_cloud .tagcloud a:hover {
    background-color: var(--button-color) !important;
    color: #FFF !important;
}

.widget_tag_cloud .tagcloud a {
    color: var(--button-color) !important;
    border: 0 !important;
    background-color: white !important;
    border-radius: 50px !important;
}


.entry_cats ul.post-categories li  {
    margin: 0 !important;
}
.entry_cats ul.post-categories li a {
    background-color: #66cc99 !important;
    border-radius: 50px !important;
    padding: 4px 10px 2px 10px !important;
}


a {transition: all 0.2s ease !important;}

.wp-show-posts-entry-meta {font-size: .6em;}


.img-description,
.wp-caption-text {
    background-color: #E5E5E5;
    padding: 10px 20px;
    margin-top: 10px;
}


.the_content .quote-wrap {margin: 50px}

.the_content .quote-wrap p {
    font-size: 3em;
    line-height: 1.2em;
}


button#toTop {
    border-radius: 50px;
}



body.post-template-default .content-entry,
body.post-template-post-template-default .content-entry,
body.post-template-post-template-parallax .content-entry,
body.post-template-post-template-us-video .content-entry,
body.post-template-post-no-feature-image .content-entry {
    margin: 0 auto !important;
    max-width: 1000px !important;
}

.the_content {
    max-width: 1000px;
}

.the_content .quote-wrap {
    margin: 50px;
    margin-left: 100px;
}

.post_thumb {
    max-width: 1000px;
}

.the_content .img-wrap {
    max-width: 1000px;
}


.the_content h2,
.the_content h3,
.the_content h4 {
    margin-left: 50px;
}


.post_title h2 a {color: #000;}




/* ============== MOBILE : START */
@media (max-width: 700px) {

.the_content h2,
.the_content h3,
.the_content h4 {
    margin-left: 0;
}

.the_content p {
    line-height: 1.2em;
    padding: 10px;
}

}





.nav-next a,
.nav-previous a {background-color: #CCC !important;}


button, .button, .btn-general, input[type="button"], input[type="reset"], input[type="submit"] {
    transition: all 0.7s ease;

}
button:hover, .button:hover, .btn-general:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover {
background-color: #000;}



.SportNatureWrap {position: absolute; bottom: 10px; left:10px; z-index: 7}


@media only screen and (max-width: 600px) {
.SportNatureWrap {left:0; bottom: -20px;text-align: center; width: 100%;}
}
    



/* =========== HOME BANNER : START =========== */

.banner-area {margin-bottom: 0 !important;}

.banner-area .cm-col-lg-5.cm-col-12.gutter-right {padding-right: 5px;}

@media only screen and (max-width: 990px) {
.banner-area .cm-col-lg-5.cm-col-12.gutter-right {padding-right: 15px;}
}


.post-display-grid .card_content .entry_cats {
    margin: 10px 0;
}

.card_tags {
    font-size: .8em;
    color: #CCC;
    margin: 10px 0;
}

.card_tags a {
    color: #66cc99;
    /*background-color: #FFF;
    border-radius: 50px;
    padding: 1px 8px 2px 8px;
    display: inline-block;
    font-size: 1em;*/
}
 

.owl-stage {height: 420px; overflow: hidden;}


.wp-show-posts-image.wpsp-image-center a div {
    background-size: cover !important;
    height: 100% !important;
    background-position: center !important;
}

.wp-show-posts-entry-summary p {font-size: .8em}

.wp-show-posts-inner {max-height: 420px;}
  

/*.wp-show-posts-entry-summary {
    position: absolute;
    bottom: 0px;
    background-color: rgba(255,255,255,.9);
    color: #000;
  -webkit-backdrop-filter: blur(2px);
  -moz-backdrop-filter: blur(2px);
  -o-backdrop-filter: blur(2px);
  -ms-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    padding: 10px 20px;
    font-size: 1.3em;
}*/

.wp-show-posts-entry-content {
/*.wp-show-posts-entry-summary {*/
    position: absolute;
    top: 54px;
    right: -1px;
    max-width: 33.3333333%;
    height: 100%;
    background-color: rgba(255,255,255,0);
    /*background-color: rgba(102,204,153,0.7);*/
    background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(245,245,245,0) 50%, rgba(229,229,229,0) 100%);

    color: #FFF;
  -webkit-backdrop-filter: blur(5px);
  -moz-backdrop-filter: blur(5px);
  -o-backdrop-filter: blur(5px);
  -ms-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    padding: 25px 30px 0 30px;
    font-size: 1.4em;
    line-height: 1em;
    text-align: right;
}

@media only screen and (max-width: 990px) {
.wp-show-posts-entry-content {
/*.wp-show-posts-entry-summary {*/
    position: absolute;
    top: 40px;
    max-width: 100%;
    height: auto;
    background-color: rgba(0,0,0,.5);
    background-color: rgba(102,204,153,0.7);
    color: #FFF;
  -webkit-backdrop-filter: blur(2px);
  -moz-backdrop-filter: blur(2px);
  -o-backdrop-filter: blur(2px);
  -ms-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    padding: 15px 30px;
    font-size: 1.3em;
    line-height: 1em;
}
}



.cm_banner-carousel-five .owl-nav {
    top: 0px !important;
    right: 0px !important;
}


.cm_banner-carousel-five .owl-nav button.owl-next,
.cm_banner-carousel-five .owl-nav button.owl-prev {background-color: rgba(50,50,50,.3) !important;}



.small_grid {height: 420px; margin-left: 0 !important; margin-right: 0 !important;}

.small_grid h2.wp-show-posts-entry-title {font-size: 1em;}


.small_grid .grid2x2 {
  min-height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.small_grid .grid2x2 > div {
  display: flex; 
  flex-basis: calc(50% - 10px); 
 /*flex-basis: 228px;*/
  justify-content: center;
  flex-direction: column;
  justify-content: space-between;
}
.small_grid .grid2x2 > div > div {
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.small_grid .box {margin: 10px; margin-right: 0;}

.small_grid .box.box1,
.small_grid .box.box3  {
    margin-left: 0px;
}

.small_grid .box.box1,
.small_grid .box.box2  {
    margin-top: 0px;
}

.small_grid .box.box3,
.small_grid .box.box4  {
    margin-bottom: 0px;
}

.small_grid .wpsp-image-center a div {

    position: absolute;
    z-index: -1;
    width: 100%;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center center !important;
}



.small_grid header.wp-show-posts-entry-header {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(255,255,255,.9);
    width: 100%;
    padding: 10px;
}

.small_grid .wp-show-posts-entry-header {margin: 0;}






.banner-inner .small_grid header.wp-show-posts-entry-header {
/* background-color: rgba(0,0,0,.6); */
background-color: rgba(102,204,153,0.7);
  -webkit-backdrop-filter: blur(2px);
  -moz-backdrop-filter: blur(2px);
  -o-backdrop-filter: blur(2px);
  -ms-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.banner-inner .small_grid h2.wp-show-posts-entry-title {
text-align: center;
}


.banner-inner .small_grid h2.wp-show-posts-entry-title a:link,
.banner-inner .small_grid h2.wp-show-posts-entry-title a:visited {
    color: #FFF;
    font-size: 1em;
}





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

.wp-show-posts-entry-header {padding: 20px !important;}
.small_grid .grid2x2 > div {max-height: 200px;}

.wp-show-posts-entry-content {
    bottom: 0px;
    top: initial;
    left: 0;
}

.wp-show-posts-entry-title a[href="https://life.hawkeoptics.com/welcome-to-hawke-life/"] {font-size: 52px !important;}

}







#sb_instagram.sbi_col_9 #sbi_images .sbi_item {
    padding-right: 10px !important;
}
#sb_instagram.sbi_col_9 #sbi_images .sbi_item:last-of-type {
    padding-right: 0px !important;
}


#sb_instagram .sbi_hover_top, #sb_instagram .sbi_hover_bottom {
    position: absolute;
    width: 100%;
    text-align: center;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 12px;
    color: #ddd;
    color: rgba(255,255,255,1);
}

#sb_instagram .sbi_username {
/*    background: linear-gradient(180deg, rgba(0,0,0,0.9360119047619048) 0%, rgba(0,0,0,0) 100%);*/
}


#sb_instagram .sbi_link .sbi_caption {
    line-height: 1;
    padding: 10px 20px;
    text-align: center;
}




#sb_instagram .sbi_hover_top, #sb_instagram .sbi_hover_bottom {
    text-align: left;
    }




.sb_youtube {
padding-right: 0px !important;
margin-top: 10px !important;
/*background-color: rgb(0,0,0,1);
padding-bottom: 20px;*/

}


#sb_youtube_sbyUCGmLfxtQUU6TNMkcn8Wupg3,
#sb_youtube_sbyPLf7IPtop0h6f3,
#sb_youtube_sbyPLf7IPtop0h6f2 {
    background-color: rgb(0,0,0);
    padding: 10px 10px 30px 10px !important;
    padding: 0px 0px 30px 0px !important;
    background: linear-gradient(180deg, rgba(0,0,0,0.9360119047619048) 0%, rgba(0,0,0,1) 76%, rgba(28,28,28,1) 89%, rgba(0,0,0,1) 100%);
    /*background: linear-gradient(0deg, rgba(102,204,153,1) 0%, rgba(0,0,0,1) 37%, rgba(0,0,0,1) 100%);
    background: linear-gradient(0deg, rgba(102,204,153,1) 0%, rgba(117,223,173,1) 7%, rgba(102,204,153,1) 12%, rgba(0,0,0,1) 37%, rgba(0,0,0,1) 100%);*/

}


 [id^=sb_youtube_].sb_youtube .sby_info {
    padding: 0 50px;
}

[id^=sb_youtube_].sb_youtube .sby_follow_btn a {
    background: #333 !important;
    color: #fff;
    font-weight: 900;
    font-size: 1.2em;
    border-radius: 50px;
}

[id^=sb_youtube_].sb_youtube .sby_load_btn .sby_btn_text,
[id^=sb_youtube_].sb_youtube .sby_load_btn .sby_loader {

    font-size: 1.5em;
    font-weight: 900;
    }

[id^=sb_youtube_].sb_youtube .sby_load_btn {border-radius: 50px !important;}


.sb_youtube .sby_caption {display:none}

#sby_lightbox .sby_thumbnail_hover, [id^=sb_youtube_].sb_youtube .sby_thumbnail_hover {
    /*background: rgba(255,255,255,.1);*/
background: radial-gradient(circle, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 51%, rgba(255,255,255,0.1) 100%);
/*background: radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 51%, rgba(0,0,0,0.1) 100%);*/
}


[id^=sb_youtube_].sb_youtube .sby_play_btn {
    opacity: 1 !important;
}

.sby_items_wrap {background-color: #000;}

/*[id^=sb_youtube_].sb_youtube.sby_col_3 .sby_items_wrap .sby_item {padding: 20px !important;}*/
/*[id^=sb_youtube_].sb_youtube.sby_col_3 .sby_items_wrap .sby_item:nth-child(2) {padding: 20px 10px !important;}*/

[id^=sb_youtube_].sb_youtube.sby_col_2 .sby_items_wrap {padding: 5px !important;}
[id^=sb_youtube_].sb_youtube.sby_col_3 .sby_items_wrap {padding: 5px !important;}


  

.sby_item.sby_no_margin:hover,
.sby_video_thumbnail_wrap.sby_item_video_thumbnail_wrap:hover,
.sby_video_thumbnail.sby_item_video_thumbnail:hover {background-size: 102% !important;}





@media only screen and (max-width: 990px) {
.sb_youtube {
padding-right: 0px !important;
margin-top: 10px !important;
}

.sb_youtube .sby_info {
    background-color: #000;
    margin-top: 0 !important;
    padding-top: 15px !important;
}

}


.wp-show-posts-image.wpsp-image-center a div {width: 100% !important;}


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

.wp-show-posts-inner {
    min-height: 420px !important;
}

.small_grid {height: auto;}

.small_grid .wp-show-posts-image a > div {width: 100% !important}

.top-header-left {
    order: 3;
}


.top-header .logo {flex: 1;}

.top-header-social-links {
    margin-right: 20px;
}

}



@media only screen and (max-width: 600px) {
.top-header-social-links {
    display: none !important;
}

.small_grid .grid2x2 > div {
    flex-basis: 100%;
}

.small_grid .box {margin: 5px 0 0 !important;}

.top-header .logo {flex: inherit;}


#sb_instagram.sbi_col_9 #sbi_images .sbi_item {
    padding:10px 0px !important;
}

}



/* =========== HOME BANNER : END =========== */






/* ====================================================================== */
/* TCW : DZSPARALLAXER */

.dzsparallaxer {
    margin: 50px 0;
    height: auto;
    display: contents;
}

.dzsparallaxer .divimage {width:100%; height: 600px; background-size:cover; background-repeat:no-repeat; background-color:#FFF;}

#dzsparallaxer-image1,
#dzsparallaxer-image2,
#dzsparallaxer-image3,
#dzsparallaxer-image4,
#dzsparallaxer-image5,
#dzsparallaxer-image6,
#dzsparallaxer-image7,
#dzsparallaxer-image8,
#dzsparallaxer-image9,
#dzsparallaxer-image10,
#dzsparallaxer-image11,
#dzsparallaxer-image12,
#dzsparallaxer-image13,
#dzsparallaxer-image14,
#dzsparallaxer-image15 {
    background-position: center !important;
    background-size: cover !important;
}

#dzsparallaxer-1,
#dzsparallaxer-2,
#dzsparallaxer-3,
#dzsparallaxer-4,
#dzsparallaxer-5,
#dzsparallaxer-6,
#dzsparallaxer-7,
#dzsparallaxer-8,
#dzsparallaxer-9,
#dzsparallaxer-10,
#dzsparallaxer-11,
#dzsparallaxer-12,
#dzsparallaxer-13,
#dzsparallaxer-14,
#dzsparallaxer-15 {
    height: auto !important;
}


hr {margin:50px 0 !important;} 



/* ========== MAKE VIDEOS RESPONSIVE ========= */

.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe {
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}


.video-responsive {margin-bottom:50px;}








.infographic-block-wrap {
    display: flex;
    margin: 50px 0;
}

.infographic-block {width: 100%;}



.quote-wrap {margin:0px 0; position:relative; /*padding:40px 120px 30px 150px;*/ text-align: center;}
.quote-wrap p {font-size:45px; line-height:45px; font-family: 'Playfair Display', serif; color:#000 !important;}


.quotation-mark-start, .quotation-mark-end {position:absolute; width:50px; height:50px; background-repeat:no-repeat; background-size:contain;}
.quotation-mark-start {/*top:50px; left:40px;*/ top:0; left: -70px; background-image:url(/images/quote-start.svg);}
.quotation-mark-end {/*bottom:50px; right:40px;*/ bottom:0; right: -50px; background-image:url(/images/quote-end.svg);}



/* ============== MOBILE : START */
@media (max-width: 700px) {

.the_content .quote-wrap {
    margin: 0px;
    margin-top: 60px;
}

.quotation-mark-start {
    top: -50px;
    left: 0px;
}

.quotation-mark-end {
    bottom: -20px;
    right: 0px;
}

}







/* ========================================== PRODUCT BLOCK ========================================= */


ul.product-block-wrap {
  display: flex;
  flex-wrap: wrap;
  margin:50px 0;

}
ul.product-block-wrap li {
    display: flex; 
    padding: 0.5em;
    width: 100%;
    box-sizing: border-box;
    border-right:0px;
}

ul.product-block-wrap li:last-child,
ul.product-block-wrap li:nth-child(2) {border-right:0px solid #EEE;}

ul.product-block-wrap .product-block {
    position:relative;
    background-color: #fff;
  display: flex;
  flex-direction: column;
  padding: 1em;
    width: 100%;
    text-align: center;
    border:1px solid #6C9;
}

@media all and (min-width: 40em) {
  ul.product-block-wrap li {
    width: 50%;
  }
  ul.product-block-wrap li {border-right:1px solid #EEE;}
  ul.product-block-wrap li:last-child {border-right:0px;}
  ul.product-block-wrap .product-block {border:0px;}
}
@media all and (min-width: 60em) {
 ul.product-block-wrap li {
    width: 50%;
    /* width: 33.33%; */
  }
  ul.product-block-wrap li {border-right:1px solid #EEE;}
  ul.product-block-wrap li:last-child {border-right:0px;}
  ul.product-block-wrap .product-block {border:0px;}
}


ul.product-block-wrap .product-block img {width:100%; margin-bottom:30px;}
ul.product-block-wrap a.find-out-more {margin-top:50px; width:100%; background-color:#000; color:#FFF; padding:20px 0; text-align:center; text-decoration:none; text-transform:uppercase; border-radius: 50px;}

ul.product-block-wrap a.find-out-more::before {
    font-family: FontAwesome;
    font-weight: 100;
    content: "\f08e";
    margin-right: 20px
}



ul.product-block-wrap .product-block h2 {font-size:20px; line-height: 25px; margin-left: 0;}
ul.product-block-wrap .product-block span {font-size:13px; text-transform:uppercase;}
ul.product-block-wrap .product-block p {flex: 1 0 auto; font-size:13px; line-height:15px;}






/* =========== NAVIGATION =========== */

.top-header-left {
    margin-left: auto;
}


@media all and (min-width: 720px) {


#mega-menu-wrap-menu-2 #mega-menu-menu-2 > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item ul.mega-sub-menu {
    left: -100%;
}

#mega-menu-wrap-menu-2 #mega-menu-menu-2 li.mega-menu-item-has-children li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator {
    float: left;
}

#mega-menu-wrap-menu-2 #mega-menu-menu-2 li.mega-menu-flyout li.mega-menu-item a.mega-menu-link > span.mega-indicator:after {
    content: '\f141' !important;
    margin: 0px 10px 0px 0px;
}

#mega-menu-wrap-menu-2 #mega-menu-menu-2 > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
    background-color: rgb(245, 245, 245);
;
    border-bottom: 1px solid #FFF;
}

#mega-menu-wrap-menu-2 #mega-menu-menu-2 > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item:last-child a.mega-menu-link {
    border-bottom: 0px solid #000;
}

#mega-menu-wrap-menu-2 #mega-menu-menu-2 > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover {
    background: #EEE;
}


#mega-menu-wrap-menu-2 #mega-menu-menu-2 > li.mega-menu-flyout.mega-menu-item-13382 ul.mega-sub-menu {left: -45px;}


}






@media all and (max-width: 1300px) {

#mega-menu-wrap-menu-2 #mega-menu-menu-2 > li.mega-menu-flyout.mega-menu-item-13382 ul.mega-sub-menu {left: -133px;}

}






.tcwblur {
filter: blur(8px);
-webkit-filter: blur(8px);
}

.tcwtestmodal {
background-color:rgba(0,0,0,0.8);
display:none;
height:100%;
left:0;
opacity:1;
position:fixed;
top:0;
width:100%;
z-index:98;
}

.tcwtestmodal.live {
display:block;
opacity:.6;
cursor: pointer;
}

/* Help fix white blur edges -------------- */
div.page-wrapper.MainNavWrapActive {background-color: #666;}

#mega-menu-wrap-menu-2 {display: none;}








.tcw-banner-main {
width: 66.666666%;
max-width: 66.666666%;
padding: 0 15px;

}

.tcw-banner-small {
width: 33.333333%;
max-width: 33.333333%;
margin-left: -5px;
}




@media only screen and (max-width: 600px) {
.tcw-banner-main {
width: 100%;
max-width: 100%;
display: block;
padding: 0;
}

.tcw-banner-small {
width: 100%;
max-width: 100%;
display: block;
margin-left: 0;
}
}











/* RECIPES -------------- */

.recipe-icon-wrap {
margin-left: 50px;
}

.recipe-icon-wrap div {
    display: inline-block;
    margin: 0 20px;
}

.recipe-icon-wrap div:nth-child(1) {
    margin-left: 0;
}

.recipe-icon-wrap span {
    font-weight: 900;
}

.recipe-icon-wrap i {
    margin-right: 10px;
}


.ingredients,
.method {
    padding: 0 50px;
}


.ingredients {
    padding: 20px 50px 50px;
    background-color: #F7F7f7;
}

.ingredients ul {
    margin-left: 0;
    list-style-type: none; /* Remove bullets */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margins */
}

.ingredients li {
    border-bottom: dotted 1px #CCC;
}



.method ol {
  list-style: none;
  counter-reset: steps;
  margin: 0;
}
.method ol li {
  counter-increment: steps;
  margin: 30px 0;
}
.method ol li::before {
  content: "Step " counter(steps) ":";
  margin-right: 0.5rem;
  /* color: rgb(102 204 153); */
  font-weight: 900;
}


.ingredients h2,
.ingredients h3,
.method h2,
.method h3 {
    margin-left: 0;
}



.the_content .method p {padding: 0;}



/* ============== MOBILE : START */
@media (max-width: 700px) {

.recipe-icon-wrap {
margin-left: 0px;
margin-top: 50px;
}

.recipe-icon-wrap div,
.recipe-icon-wrap div:nth-child(1) {
    display: block;
    margin: 20px;
}

.ingredients,
.method {
    padding: 0 20px;
}

}



.wp-caption-text.stock-image {
    position: absolute;
    bottom: 0px;
    right: 0;
    color: #FFF;
    background-color: rgba(0,0,0,.3);
}

.wp-caption-text.stock-image a:hover {
    color: #66cc99;
    text-decoration: none;
}






/* CONTRIBUTOR PROFILE -------------- */

.profile-wrap {
    display: flex;
}


.profile-thumbnail {
    flex-basis: 33.33%;
    order: 2;
}

.profile-text {
    flex-basis: 66.66%;
    padding: 0 40px 0 0;
    order: 1;
    font-size: 1em;
}

.profile-text h2 {
    margin: 10px 0 !important;
    font-size: 1.2em;
}

.profile-text p {
    font-size: 1em;
    margin: 0;
    padding: 0;
}





#VideoOverlay {
    height: 100%;
    width: 100%;
    z-index: 9999;
    position: absolute;
    text-align: center;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,0,0,0.1);
}



#VideoOverlay .playbutton {
    max-width: 70px;
    position: initial;
}

a:hover #VideoOverlay .playbutton {
    /*max-width: 10px;*/
}



/* YouTube Video Plugin -------------- */
.cvwp-video-player {max-width: 100% !important;}











/* ====================================================================== */



/* ============ CSS STEP-BY-STEP 1 > 10 LIST ============= */
ol.step {
    counter-reset:li; /* Initiate a counter */
    margin-left:0; /* Remove the default left margin */
    padding-left:0; /* Remove the default left padding */
    padding-bottom: 50px;
}
ol.step > li {
    position:relative; /* Create a positioning context */
    margin:80px 0px 6px 30px; /* Give each list item a left margin to make room for the numbers */
    padding:10px 20px 10px 110px; /* Add some spacing around the content */
    list-style:none; /* Disable the normal item numbering */
    border-top:2px solid #F5F5F5;

}
ol.step > li:before {
    content:counter(li); /* Use the counter as content */
    counter-increment:li; /* Increment the counter by 1 */
    /* Position and style the number */
    position:absolute;
    top:-2px;
    left:-20px;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    width:2.5em;
    /* Some space between the number and the content in browsers that support
       generated content but not positioning it (Camino 2 is one example) */
    margin-right:8px;
    padding:10px 20px;
padding-top:15px;
    border-top:2px solid #66CC99;
    color:#fff;
    background:#66CC99;
    font-weight:bold;
    text-align:center;
font-size: 30px;




top:10px;
border-top:0px;
}

ol.step > li {border-top:0px;}

li ol.step,
li ul {margin-top:6px;}
ol.step ol li:last-child {margin-bottom:0;}

ol.step h3 {font-size:30px; color:#66CC99; margin:0px;}



ol.step ul {
    margin: 10px 0 0 20px;
}

ol.step > li ul li {font-size: 1em;}


ol.step p {margin: 30px 0 !important;}



/* ======== MOBILE ======== */

@media (max-width: 800px) {

ol.step > li {
    position:relative; /* Create a positioning context */
    margin:100px 0px 6px 10px; /* Give each list item a left margin to make room for the numbers */
    padding:10px 0px 10px 60px; /* Add some spacing around the content */
    list-style:none; /* Disable the normal item numbering */
    border-top:0px solid #F5F5F5;

}

ol.step > li:before {
    content:counter(li); /* Use the counter as content */
    counter-increment:li; /* Increment the counter by 1 */
    /* Position and style the number */
    position:absolute;
    top:-2px;
    left:-20px;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    width:2em;
    /* Some space between the number and the content in browsers that support
       generated content but not positioning it (Camino 2 is one example) */
    margin-right:8px;
    padding:10px;
padding-top:15px;
    border-top:0px;
    color:#fff;
    background:#66CC99;
    font-weight:bold;
    text-align:center;
font-size:25px;
top:10px;
border-top:0px;

}
}


/* ====== 'Round Numbers' + 'Title' for POSTs / PAGEs ====== */

.round-numbers {background-color:#333; border-radius:50px; border:5px solid #CCC; padding:4px 10px 0px 10px; color:#FFF; display:inline-block; margin-right:20px; margin-bottom:0px;}
.round-numbers-title {display:inline-block; margin-bottom:0px;}
.round-numbers-title h2 {font-size:1.2em;}


.round-numbers2 {position:absolute; background-color:#EEE; border-radius:50px; padding:5px 8px 0px 8px; color:#333; font-size:12px;  margin-right:20px; margin-bottom:0px;}

.round-numbers3 {background-color:#EEE; border-radius:50px; padding:4px 10px 0px 10px; color:#333; display:inline-block; margin-right:20px; margin-bottom:10px;}
.round-numbers-title3 {display:inline-block; margin-bottom:0px;}
.round-numbers-title3 h2 {font-size:1.2em;}




/* ===================================================================
      X-ACT
 ===================================================================== */

.x-act-guide {text-align:center; background-color:#F5F5F5;}
.x-act-guide > h3:first-child {background-color:#000; color:#FFF; padding-top:10px; margin:100px 0 50px;}
.x-act-guide > section {padding:0px 100px 50px 100px;}
.video-wrap {width:500px !important;}

ul.x-act {padding-top:50px;}
ul.x-act li {padding:10px 0;}


@media (max-width: 530px) {
.x-act-guide > h3:first-child {padding-top:20px;}
.x-act-guide > section {padding:50px 10px 50px 10px;}
}


.hr-arrow {
    position:relative;
    background-color:#FFF;
    height:5px !important;
    width:100% !important;
    margin:50px 0 100px;
}

.hr-arrow:after {
    content:'';
    position: absolute;
    top: -1px;
    left: 50%;
    margin-left: -100px;
    width: 0;
    height: 0;
    border-top: solid 50px #F5F5F5;
    border-left: solid 100px transparent;
    border-right: solid 100px transparent;
}
.hr-arrow:before {
    content:'';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -100px;
    width: 0;
    height: 0;
    border-top: solid 50px #FFF;
    border-left: solid 100px transparent;
    border-right: solid 100px transparent;
}






/* RELATED POSTS : 25% (4/row) ================================= */

section.cm_related_post_container .cm-col-lg-6.cm-col-md-6.cm-col-12 {
    flex: 0 0 25% !important;
    max-width: 25% !important;
}


@media only screen and (max-width: 600px) {
section.cm_related_post_container .cm-col-lg-6.cm-col-md-6.cm-col-12 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}
}



.copyright:before {
  content: "";
  position: absolute;
  height:20px;
  width:20px;
  background-size: 10px 10px;
  background-position: center 4px;
  background-image: url('https://life.hawkeoptics.com/copyright-symbol.svg');
  background-repeat: no-repeat;
  margin-left: -20px;
}

.copyright {
    font-weight: 900;
    padding-left: 20px;
}








/* POST LAYOUT FLEX (ROW = IMG + TEXT) ================================= */

.flex-inline-wrap {
  width: 100%;
  border: 0px solid #c3c3c3;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px 0;
}

.flex-inline-wrap > .img {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 250px;
  text-align: center;
}

.flex-inline-wrap > .img img {
    width: 200px;
    height: 200px;
    object-fit: cover;
}

.flex-inline-wrap > .txt {
  flex-basis: 2;
  padding: 20px;
}

.flex-inline-wrap > .txt h2 {
  margin-left: 0;
}

.flex-inline-wrap.circle > .img img {
 border-radius: 250px;
}



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

.flex-inline-wrap {
    flex-wrap: wrap;
  }
  .flex-inline-wrap > .img, .flex-inline-wrap > .txt {
    flex-basis: 100%;
    padding: 0;
    text-align: center;
  }


}









/* EVENTS: List & Calendar ================================= */


.EventsFilter {
    position: relative;
    display: flex;
    width: 500px;
    height: 50px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
}

.EventsFilter .EventsCountryWrap {
    flex: 1;
}

.EventsFilter button {
    margin: 0 10px;
    color: #666;
}

.EventsFilter button.Nature:before,
.EventsFilter button.Sport:before,
.EventsFilter button.CountryUK:before,
.EventsFilter button.CountryUSA:before,
.EventsFilter button.CountryGLOBAL:before {
    font-family: 'FontAwesome';
    font-weight: 600;
    font-size: .7em;
    content: "\f111";
    margin-right: 5px;
    color: #CCC;
}

.EventsFilter button.Nature.Active:before,
.EventsFilter button.Sport.Active:before,
.EventsFilter button.CountryUK.Active:before,
.EventsFilter button.CountryUSA.Active:before,
.EventsFilter button.CountryGLOBAL.Active:before {
    content: "\f192";
    font-weight: 400;
    font-size: 1em;
    color: #66cc99;
}

.EventsFilter button.Nature.Active,
.EventsFilter button.Sport.Active,
.EventsFilter button.CountryUK.Active,
.EventsFilter button.CountryUSA.Active,
.EventsFilter button.CountryGLOBAL.Active {
    color: #66cc99;
}

.EventsFilter button:hover {
    background-color: #FFF !important;
    color:#000;
}

.EventsFilter button:hover::before {
    color: #66cc99 !important;
}



/* =================================| REVIEWS PAGE */

.pt-cv-content-item .cvp-responsive-image {
    background-position: top center;
}



/* =================================| REVIEWS PAGE */

.footer .widget-contents .tw,
.footer .widget-contents .linken,
.footer .widget-contents .pin {display: none;}

/* IE9+ FIXES : START ================================= */
@media screen and (min-width:0\0) and (min-resolution: +72dpi) {

.banner-area {display: none !important;}

}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  img[src$=".svg"] {
    width: 100%; 
  }
/* IE9+ FIXES : END ===================================== */