/*
Theme Name: Kenilworth Lions
Theme URI: 
Author: Black Spiral Design
Author URI: https://www.blackspiraldesign.co.uk
Description: Wordpress Theme for Kenilworth Lions
Version: 1.0
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kenli
*/


/* colours */

:root {
  --yellow: #Ebb700;
  --blue: #00338D;
  --purple: #7a2582;
  --red: #FF5B35;
  --text: #0d2240;
  --white: #ffffff;
  --bg: #f2f2f2;
	--wrapper-padding-inline: 1rem;
  --wrapper-max-width1400: 1320px;
	--wrapper-max-width1200: 1140px;
	--wrapper-max-width992: 960px;
  --section-padding-block: 3rem;
  }

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  font-family: "Roboto", sans-serif;
  color: var(--text);
	Background-color: var(--bg);
	
}

.bg-dark {
	background-color: var(--text)!important;
}

a {
  color: var(--yellow);
  
}

a:hover {
  color: var(--red);
  
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Roboto", sans-serif;
	font-weight:600;
	
}

section h2, section h3 {
	display:inline-block;
	position:relative;
	padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

section h2:after, section h3:after {
	
	display: inline-block;
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    height: 2px;
    background: var(--yellow);
    background-clip: content-box;
    transform: translate(-50%,0);
    width: 70%
}

#find h2:after, #donate h2:after, #find h3:after, #donate h3:after, #blog h2:after, #blog h3:after {
	transform: none;
	left:0;
}
/* Move reCAPTCHA v3 badge up */ 
.grecaptcha-badge {
bottom: 9rem !important;
}

a.more-btn {
    align-self: flex-start;
	text-decoration: none;
}

a.purple-btn, .purple-btn {
    color: var(--white);
    background-color: var(--purple);
	border: 1px solid var(--purple);
    padding: .75rem 1.25rem;
    border-radius: 1rem;
    text-decoration: none;
	transition: all ease-in-out 0.4s;
}

a.purple-btn:hover, .purple-btn:hover {
    color: var(--white);
    background-color: var(--yellow);
	border-color: var(--yellow);
    
}

/* WordPress Core
-------------------------------------------------------------- */
.alignnone {
    margin: 5px 20px 20px 0;
}
 
.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}
 
.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}
 
.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}
 
a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}
 
a img.alignnone {
    margin: 5px 20px 20px 0;
}
 
a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}
 
a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
 
.wp-caption {
    background: var(--white);
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}
 
.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}
 
.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}
 
.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}
 
.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}
 
.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}
 
/* Text meant only for screen readers. */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}
 
.screen-reader-text:focus {
    background-color: #eee;
    clip: auto !important;
    clip-path: none;
    color: #444;
    display: block;
    font-size: 1em;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
    /* Above WP toolbar. */
}

.blog-post {
	overflow:hidden;
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 996;
  background: var(--yellow);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  transition: all 0.4s;
}

.back-to-top i {
  font-size: 4rem;
  color: var(--white);
  line-height: 0;
}

.back-to-top:hover {
  background: var(--purple);
  color: var(--white);
}

.back-to-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Top Bar
--------------------------------------------------------------*/
#topbar {
  background: var(--text);
  font-size: 1rem;
  padding: 0;
  color: var(--white);
  height: 50px;
	margin-bottom:0;

}

#topbar a {
	text-decoration:underline;
}

#topbar a:hover {
	filter: brightness(75%);
}

#topbar .contact-info a i {
  font-style: normal;
  color: var(--yellow);
	text-decoration:none;
}

#topbar .contact-info a,
#topbar .contact-info a span {
  padding-left: 5px;
  color: var(--white);
}

#topbar .contact-info a {
  line-height: 0;
  transition: 0.3s;
}

#topbar .contact-info a :hover {
  opacity:0.7;
	
}

#topbar .cta a {
  color: var(--white);
  background: var(--yellow);
  padding: 10px 20px;
  display: inline-block;
  transition: 0.3s;
	text-decoration:none;
}

#topbar .cta a.lightbg {
	background: var(--yellow);
}


#topbar .cta a.darkbg {
	background: var(--blue);
}

#topbar .cta a.darkerbg {
	background: var(--purple);
}


#topbar i {
    font-size: 1.2rem;
    
}

#topbar .cta i {
	position: relative;
    top: 3px;
    left: 1px;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
  height: 110px;
  transition: all 0.5s;
  z-index: 997;
  background: var(--white);
 position:relative;
}

#header.header-fixed {
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
}

#header .logo h1 {
  font-size: 28px;
  margin: 0;
  line-height: 0;
  font-weight: 700;
  font-family: "Roboto", sans-serif;
}

#header .logo h1 a,
#header .logo h1 a:hover {
  color: #635551;
  text-decoration: none;
}

#header .logo img {
  padding: 0;
  margin: 0;
  max-height: 80px;
}

.scrolled-offset {
  margin-top: 140px;
}

#main {
  z-index: 3;
	min-height: 66vh;
}


/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation 
*/
.navbar {
  padding: 0;
	margin-left:1rem;
}

.navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
}

.navbar li {
  position: relative;
}

.navbar a,
.navbar a:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 5px 0;
  font-size: 1.1rem;
	font-weight:500;
  font-family: "Roboto", sans-serif;
  color: var(--text);
  white-space: nowrap;
  transition: 0.3s;
	position:relative;
	overflow:hidden;
	margin-left:30px;
	margin-bottom:10px;
	text-decoration:none;
}

.navbar a i,
.navbar a:focus i {
  font-size: 12px;
  line-height: 0;
  margin-left: 5px;
}

.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover>a {
  color: var(--yellow);	
/*	text-decoration:underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 2px;*/
	
}

@media (max-width:991px){
	
	.navbar a,
.navbar a:focus  {
	color: var(--white);
	}
	.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
		color: var(--yellow);	
	} 
	.navbar ul {
    align-items: start;
	}
	 a.dropdown-item {
        color:var(--text);
}
}

@media(min-width:992px) {

	.navbar a {
		padding-left: 0 !important;
		padding-right: calc(var(--bs-navbar-nav-link-padding-x) * 2) !important;

	}
/* Fade in */
.navbar a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 90%;
  height: 0.15em;
  background-color: var(--yellow);
  transition: opacity 300ms, transform 300ms;
  opacity: 1;
  transform: translate3d(-100%, 0, 0)
}

.navbar a:hover::after,
.navbar a:focus::after,
.navbar a.active::after
{
  transform: translate3d(0, 0, 0);
}

}


.navbar .dropdown ul {
  display: block;
  position: absolute;
  left: 14px;
  top: calc(100% + 30px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: var(--white);
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: 0.3s;
  border-radius: 4px;
}

.navbar .dropdown ul li {
  min-width: 200px;
	overflow:hidden;
}

.navbar .dropdown ul a {
  padding: 10px 0px;
}

.navbar .dropdown ul a i {
  font-size: 12px;
}

.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover>a {
  color: var(--yellow);
	background-color:var(--white);
}

.navbar .dropdown:hover>ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}

.navbar .dropdown .dropdown ul {
  top: 0;
  left: calc(100% - 30px);
  visibility: hidden;
}

.navbar .dropdown .dropdown:hover>ul {
  opacity: 1;
  top: 0;
  left: 100%;
  visibility: visible;
}

@media (max-width: 1366px) {
  .navbar .dropdown .dropdown ul {
    left: -90%;
  }

  .navbar .dropdown .dropdown:hover>ul {
    left: -100%;
  }
}

/**
* Mobile Navigation 
*/
.mobile-nav-toggle {
  color: var(--text);
  font-size: 28px;
  cursor: pointer;
  display: none;
  line-height: 0;
  transition: 0.5s;
	border: 1px solid var(--text);
    border-radius: 3px;
}

.mobile-nav-toggle.bi-x {
  color: var(--white);
}

@media (max-width: 991px) {
  .mobile-nav-toggle {
    display: block;
  }

}

@media (min-width : 992px) {
  .offcanvas {
    visibility      : visible;
    position        : relative;
    background      : none;
    border          : none;
    justify-content : end;
    color           : red;
  }
}
@media (max-width : 992px) {
  .offcanvas {
    min-width : 80% !important;
	  background: var(--text) !important;
  }
  .offcanvas-start-lg {
    top          : 0;
    left         : 0;
    border-right : 1px solid rgba(0, 0, 0, .2);
    transform    : translateX(-100%);
  }

}



@media all and (min-width: 992px) {
    ul.depth_1 {
        left: 100% !important;
        top: 0% !important
    }
    ul.depth_0>.menu-item-has-children a:after {
        display: inline-flex;
        content: "";
        border-color: transparent;
        border-style: solid;
        border-width: 5px 0 5px 5px;
        border-left-color: #cccccc;
    }
    ul.depth_1 a:after {
        border: 0 !important;
    }
}

input.search-submit.btn.get-started-btn.btn-lg {
    color: var(--white);
    background-color: var(--yellow);
    border-radius: 1rem;
    transition: all ease-in-out 0.4s;
}

input.search-submit.btn.get-started-btn.btn-lg:hover {
    color: var(--white);
    background: var(--purple);
    }

.dropdown-item.active {
    
    background-color: var(--white);
}

@media (min-width:992px) {.dropdown-toggle::after {
    display: inline-block;
    margin-left: 0;
    vertical-align: 0;
    content: "";
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
	} }
.dropdown-menu li a.dropdown-item {
    margin-left: 0px;
   
}

.dropdown-menu li {
    padding-left:30px;
    padding-right:30px;
}
/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {
  width: 100%;
  height: 80vh;
  background-size: cover !important;
  position: relative;
  z-index: 1;
  padding: 0;
  margin-bottom: 0 !important;
	background-repeat:no-repeat !important;
}

#hero:before {
  content: "";
  background: #042359;
background: linear-gradient(157deg, rgba(4, 35, 89, 1) 0%, rgba(79, 11, 85, 1) 100%);
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
	opacity:0.85;
}



#hero .container {
  z-index: 2;
	position:relative;
}

#hero h1, #pagehead h1 {
  margin: 0 0 10px 0;
  font-size: 64px;
  font-weight: 700;
  line-height: 56px;
  
	position:relative;
	display:inline-block;
	padding-bottom: 2rem;
}

#hero h1 {
	color: var(--white);
	text-shadow: 0 0 25px #333, 0 0 125px #333;
}

#hero h1:after, #pagehead h1:after {
	display: inline-block;
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--yellow);
    background-clip: content-box;
    width: 70%
}

#hero h1:after {
	 transform: translate(-50%,0);
	left:50% !important;
}

#hero h2, #pagehead h2 {
  color: var(--yellow);
	margin-top:2rem;
  margin-bottom: 2rem;
  font-size: 24px;
	text-shadow: 0 0 25px #333, 0 0 125px #333;
}

#hero h2:after, #pagehead h2:after {
	content:none;
}


#hero .btn-get-started {
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 1px;
  display: inline-block;
  transition: 0.5s;
  padding: .75rem;
  color: var(--white);
  background: none;
  position: relative;
  z-index: 4;
	border:1px solid var(--white);
	border-radius: 50vh;
	text-decoration:none;
	line-height:1;
}

#hero .btn-get-started:hover {
	color: var(--yellow);
	border-color: var(--yellow);
}

@media (min-width: 1200px) {
  #hero {
    background-attachment: fixed;
	 margin-bottom:-16px;
	  height: 90vh;
  }
}

@media (min-width:1900px) {
  #hero {
    margin-bottom: -80px;
	   height: 100vh;
    
  }
}

@media (max-width: 768px) {


  #hero h1, #pagehead h1 {
    font-size: 28px;
    line-height: 36px;
  }

  #hero h2, #pagehead h2 {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 30px;
  }
}







/*--------------------------------------------------------------
# PageHead
--------------------------------------------------------------*/

#pagehead {
	min-height:400px;
	margin-bottom:0;
}

#pagehead .subtitle {
    color: var(--purple);
    padding-top: 1.5rem;
    font-size: 1.5rem;
}

/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
   overflow: hidden;
	background-color: var(--white);
	margin-bottom:2rem;
}


/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs {
  padding: 15px 0;
  background: var(--blue);
margin-bottom:0;
	color: var(--white);
  }

.breadcrumbs a {
	color:var(--white);
}

.breadcrumbs a:hover {
	color: var(--yellow);
}

/*-------------------------------------------------------------
# Page General
--------------------------------------------------------------*/

.maincontent h2, .maincontent h3 {
	padding: 1rem 0;
	margin-bottom:1rem;
}

.maincontent h2:after, .maincontent h3:after, .maincol:after {
	content: '';
    border-bottom: 1px solid var(--yellow);
    width: 100%;
    display: block;
    padding-top: 1rem;
}

.maincol:after {
	margin-bottom:2rem;
}



/*--------------------------------------------------------------
# Sidebar
--------------------------------------------------------------*/

.sb {
	margin-bottom: 2rem;
}
.sidebar h3 {
  font-weight: 500;
  font-size: 28px;
  margin-bottom: 30px;
	text-transform:uppercase;
	color:var(--white);
}

.sidebar p {
  margin-bottom: 30px;
}

.sidebar img.card-img-top {
    max-height:200px;
    object-fit:cover;
}


@media (min-width:992px) {
.sb .sidebar {
    padding: 30px;
    margin: 0 0 2rem 1rem;
}
}

.sb1 {
	background: var(--purple);
    color: var(--white);
	}

.sb2 {
	background: var(--blue);
    color: var(--white);
}

.sb3 {
	background: var(--red);
    color: var(--white);
}

.sidebar.sb1.card, .sidebar.sb2.card, .sidebar.sb3.card {
    border: none !important;
    border-radius: 0 !important;
}

.sidebar h3:after {
	transform: none;
	left:0;
	background: var(--white);
}

.sidebar .read-more a {
	color: var(--white);
	text-decoration:underline !important;
}

.sidebar .read-more a:hover {
	opacity: 0.8;
}

/*---------------------------------------------------------------
# Home Page
--------------------------------------------------------------*/

#quicklinks {
    padding-top: 0;
    margin-top: -2rem;
    position: relative;
    z-index: 99;
	margin-bottom:0;
	background:none;
	overflow:visible;
}

#quicklinks .card {
    border-radius:0 !important;
    border: none;
}

@media (min-width: 1200px) {
#quicklinks .card {
    transition: all .2s ease-in-out;
}

#quicklinks .card:hover {
    transform: scale(1.1);
    z-index: 99;
    -webkit-box-shadow: 10px 10px 41px -21px rgba(0,0,0,.75);
    -moz-box-shadow: 10px 10px 41px -21px rgba(0, 0, 0, .75);
    box-shadow: 10px 10px 41px -21px rgba(0,0,0,.75);
}
}

#quicklinks a {
  color: var(--white);
  
}

#quicklinks h3 a {
	text-decoration:none;
}

#quicklinks a:hover {
	 color: var(--white);
  filter: brightness(75%);
  
}

.full-width-split-screen img {
  max-width: 100%;
  display: block;
	position:relative;
	width:100%;
	object-fit: cover;
	max-height:250px;

}

.full-width-split-screen:before {
    content: "";
    background: #042359;
    background: linear-gradient(157deg, rgba(4, 35, 89, 1) 0%, rgba(79, 11, 85, 1) 100%);
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0.5;
    z-index: 10;
}

@media (min-width:992px){
	
	.full-width-split-screen:before {
       clip-path: polygon(0 0, 100% 0, 79% 100%, 0% 100%);
    grid-column: 1 / 3;
}


}

.full-width-split-screen .wrapper  {
  max-width: var(--wrapper-max-width);
  margin-inline: auto;
  padding-inline: var(--wrapper-padding-inline);
}

/* remove the padding so images can take up the entire height */
.full-width-split-screen {
  padding-block: 0;
	position:relative;

 }


/* match the section padding for the text blocks for
consistency */
.full-width-split-screen > :not(img){
  padding-block: var(--section-padding-block);
  padding-inline: var(--wrapper-padding-inline);
	position:relative;
	z-index:10;
}


@media (min-width: 992px) {
  .full-width-split-screen {
    /* outermost columns emulate the spacing from the .wrapper
     while the two inner columns divide the rest of the space
     into two equal parts */
    display: grid;
    grid-template-columns:
      minmax(var(--wrapper-padding-inline), 1fr)
      minmax(0, calc(var(--wrapper-max-width992) / 2))
      minmax(0, calc(var(--wrapper-max-width992) / 2))
      minmax(var(--wrapper-padding-inline), 1fr);

    /* for positioning the pseudo-elements
       to fill in the rest of the background*/
    position: relative;
  }
  /* ensure the image fill up the entire space available */
  .full-width-split-screen > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
	  max-height:400px;
  }

  /* if the image is on the left, it covers the entire left half */
  .full-width-split-screen > img:first-child {
    grid-column: 1 / 3;
	  clip-path: polygon(0 0, 100% 0, 79% 100%, 0% 100%);
  }

  /* if the image is on the right, it covers the entire right half */
  .full-width-split-screen > img:last-child {
    grid-column: 3 / -1;
	  clip-path: polygon(21% 0, 100% 0, 100% 100%, 0% 100%);
  }

  /* make sure text doesn't touch the edge of the viewport 
   and the content is vertically centered */
  .full-width-split-screen > :not(img) {
    display: grid;
    align-content: center;
    justify-items: start;
	  position:static;
  }

  /* if the non-image is first, place it in the second column
     (first column is empty to emulate the .wrapper) */
  .full-width-split-screen > :not(img):first-child {
    padding-left: 0;
    grid-column: 2 / 3;
	  clip-path: polygon(0 0, 100% 0, 79% 100%, 0% 100%);
  }

  /* if the non-image is last, place it in the third column
     (fourth column is empty to emulate the .wrapper) */
  .full-width-split-screen > :not(img):last-child {
    padding-right: 0;
    grid-column: 3 / 4;
  }

  /* at large screens, ensure the background color
     goes to the edge of the page */
  .full-width-split-screen > :not(img)::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
  }

  /* ensures the background color fills the entire left side */
  .full-width-split-screen > :not(img):first-child::before {
    grid-column: 1 / 2;
  }

  /* ensures the background color fills the entire right side */
  .full-width-split-screen > :not(img):last-child::before {
    grid-column: 4 / 5;
  }
}
@media (min-width: 1200px) {
  .full-width-split-screen {
    /* outermost columns emulate the spacing from the .wrapper
     while the two inner columns divide the rest of the space
     into two equal parts */
    display: grid;
    grid-template-columns:
      minmax(var(--wrapper-padding-inline), 1fr)
      minmax(0, calc(var(--wrapper-max-width1200) / 1.5))
      minmax(0, calc(var(--wrapper-max-width1200) / 2))
      minmax(var(--wrapper-padding-inline), 1fr);

    /* for positioning the pseudo-elements
       to fill in the rest of the background*/
    position: relative;
  }
}

@media (min-width: 1400px) {
  .full-width-split-screen {
    /* outermost columns emulate the spacing from the .wrapper
     while the two inner columns divide the rest of the space
     into two equal parts */
    display: grid;
    grid-template-columns:
      minmax(var(--wrapper-padding-inline), 1fr)
      minmax(0, calc(var(--wrapper-max-width1400) / 1.5))
      minmax(0, calc(var(--wrapper-max-width1400) / 2))
      minmax(var(--wrapper-padding-inline), 1fr);

    /* for positioning the pseudo-elements
       to fill in the rest of the background*/
    position: relative;
  }
}

#products .product {
    border: 1px solid #f2f2f2;
}
#products .product_name {
    position: absolute;
    bottom: 0;
    color: #fff;
    background-color: var(--yellow);
    padding: .5rem 1rem;
}

#products .swiper-pagination-bullet {
	height:1rem;
		width:1rem;
}
#products span.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: var(--blue);
}

#products span.woocommerce-Price-amount.amount {
	padding: 1rem;
	font-size: 1rem;
	font-weight: 500;
}

#products a {
	text-decoration:none;
}
/*--------------------------------------------------------------
# Blog
--------------------------------------------------------------*/

#blog .entry-title a {
	color: var(--yellow);
}

#blog .entry-title a:hover {
	opacity:0.5;
}



.blog .entry {
  padding: 30px;
  margin-bottom: 60px;
  
}

.blog .entry .entry-img {
  max-height: 440px;
  margin: -30px -30px 20px -30px;
  overflow: hidden;
}

.blog .entry .entry-title {
  font-size: 28px;
  font-weight: bold;
  padding: 0;
  margin: 0 0 20px 0;
}

.blog .entry .entry-title a {
   transition: 0.3s;
	text-decoration:none !important;
}


.blog .entry .entry-meta {
  margin-bottom: 15px;
  color: var(--yellow);
}

.blog .entry .entry-meta ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
  padding: 0;
  margin: 0;
}

.blog .entry .entry-meta ul li+li {
  padding-left: 20px;
}

.blog .entry .entry-meta i {
  font-size: 16px;
  margin-right: 8px;
  line-height: 0;
}

.blog .entry .entry-meta a {
  color: var(--yellow);
  font-size: 14px;
  display: inline-block;
  line-height: 1;
}

.blog .entry .entry-content p {
  line-height: 24px;
}

.blog .entry .entry-content .read-more {
  -moz-text-align-last: right;
  text-align-last: right;
}



.blog .entry .entry-content h3 {
  font-size: 22px;
  margin-top: 30px;
  font-weight: bold;
}

.blog .entry .entry-content blockquote {
  overflow: hidden;
  background-color: var(--bg);
  padding: 60px;
  position: relative;
  text-align: center;
  margin: 20px 0;
}

.blog .entry .entry-content blockquote p {
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 0;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
}

.blog .entry .entry-content blockquote::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--text);
  margin-top: 20px;
  margin-bottom: 20px;
}

.blog .entry .entry-footer {
  padding-top: 10px;
  border-top: 1px solid var(--bg);
}

.blog .entry .entry-footer i {
  color: var(--text);
  display: inline;
}

.blog .entry .entry-footer a {
  color: var(--yellow);
  transition: 0.3s;
}

.blog .entry .entry-footer a:hover {
  color: var(--purple);
}

.blog .entry .entry-footer .cats {
  list-style: none;
  display: inline;
  padding: 0 20px 0 0;
  font-size: 14px;
}

.blog .entry .entry-footer .cats li {
  display: inline-block;
}

.blog .entry .entry-footer .tags {
  list-style: none;
  display: inline;
  padding: 0;
  font-size: 14px;
}

.blog .entry .entry-footer .tags li {
  display: inline-block;
}

.blog .entry .entry-footer .tags li+li::before {
  padding-right: 6px;
  color: var(--text);
  content: ",";
}

.blog .entry .entry-footer .share {
  font-size: 16px;
}

.blog .entry .entry-footer .share i {
  padding-left: 5px;
}

.blog .entry-single {
  margin-bottom: 30px;
background-color: transparent;
    padding: 0;
}

.blog .blog-pagination {
  color: var(--text);
}

.blog .blog-pagination ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
}

.blog .blog-pagination li {
  margin: 0 5px;
  transition: 0.3s;
}

.blog .blog-pagination li a {
  color: var(--yellow);
  padding: 7px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog .blog-pagination li.active,
.blog .blog-pagination li:hover {
  background: var(--white);
}

.blog .blog-pagination li.active a,
.blog .blog-pagination li:hover a {
  color: var(--white);
}

.blog .sidebar {
  padding: 30px;
  margin: 0 0 60px 20px;
}

#blog-side {
  background-color:var(--yellow);
}

#blog-side .sidebar-title {
  font-size: 20px;
  font-weight: 700;
  padding: 0 0 0 0;
  margin: 0 0 15px 0;
  color: var(--text);
  position: relative;
}

.blog .sidebar .sidebar-item {
  margin-bottom: 30px;
}

.blog .sidebar .search-form form {
  border: 1px solid var(--text);
  position: relative;
}

.blog .sidebar .search-form form input {
  border: 0;
  padding: 10px;
  width: 100%;
}

.blog .sidebar .search-form form button {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
  font-size: 16px;
  padding: 0 15px;
  background: var(--purple);
  color: var(--white);
  transition: 0.3s;
  line-height: 0;
}

.blog .sidebar .search-form form button i {
  line-height: 0;
}

.blog .sidebar .search-form form button:hover {
  background: var(--yellow);
	color:var(--white);
}

.blog .sidebar .categories ul {
  list-style: none;
  padding: 0;
}

.blog .sidebar .categories ul li+li {
  padding-top: 10px;
}

.blog .sidebar .categories ul a {
  color: var(--purple);
  transition: 0.3s;
}

.blog .sidebar .categories ul a:hover {
  color: var(--blue);
}

.blog .sidebar .categories ul a span {
  padding-left: 5px;
  color: var(--purple);
  font-size: 14px;
}

.blog .sidebar .recent-posts .post-item+.post-item {
  margin-top: 15px;
}

.blog .sidebar .recent-posts img {
  width: 80px;
  float: left;
}

.blog .sidebar .recent-posts h4 {
  font-size: 15px;
  margin-left: 95px;
  font-weight: bold;
}

.blog .sidebar .recent-posts h4 a {
  color: var(--purple);
  transition: 0.3s;
}

.blog .sidebar .recent-posts h4 a:hover {
  color: var(--blue);
}

.blog .sidebar .recent-posts time {
  display: block;
  margin-left: 95px;
  font-style: italic;
  font-size: 14px;
  color: var(--text);
}

.blog .sidebar .tags {
  margin-bottom: -10px;
}

.blog .sidebar .tags ul {
  list-style: none;
  padding: 0;
}

.blog .sidebar .tags ul li {
  display: inline-block;
}

.blog .sidebar .tags ul a {
  color: var(--purple);
  font-size: 14px;
  padding: 6px 14px;
  margin: 0 6px 8px 0;
  border: 1px solid #f4f2f2;
  display: inline-block;
  transition: 0.3s;
}

.blog .sidebar .tags ul a:hover {
  color: var(--blue);
  border: 1px solid #407269;
  background: #407269;
}

.blog .sidebar .tags ul a span {
  padding-left: 5px;
  color: var(--purple);
  font-size: 14px;
}

.blog-pagination span.page-link.current {
    color: var(--white);
    padding: 7px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    }

.blog .sidebar .recent-posts a.link2 {
  display: block;
  margin-left: 95px;
  
}

#blog-side h3:after{
	background: var(--purple);
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
  color: var(--white);
  background: var(--text);
}

#footer .footer-top {
  padding: 60px 0 30px 0;
  background: var(--yellow);
	color: var(--text);
}

#footer .footer-top .footer-contact {
  margin-bottom: 30px;
}

#footer .footer-top .footer-contact h3 {
    color: var(--text);
  }

#footer .footer-top .footer-contact h4 {
  font-size: 22px;
  margin: 0 0 30px 0;
  padding: 2px 0 2px 0;
  line-height: 1;
  font-weight: 700;
}

#footer .footer-top .footer-contact p {
  line-height: 24px;
  margin-bottom: 0;
  
}

#footer .footer-top h4 {
  font-size: 16px;
  font-weight: bold;
   position: relative;
  padding-bottom: 12px;
}

#footer .footer-top .footer-links {
  margin-bottom: 30px;
}

#footer .footer-top .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#footer .footer-top .footer-links ul i {
  padding-right: 2px;
  color: #ffa587;
  font-size: 18px;
  line-height: 1;
}

#footer .footer-top .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}


@media (min-width:742px) {
	#footer .footer-top .footer-links ul li:first-child {
  padding-top: 0;
}
}

#footer .footer-top .footer-links ul a {
  color: var(--blue);
  transition: 0.3s;
  display: inline-block;
  line-height: 1;
	text-decoration: underline;
	padding: 0.5rem;
}

#footer .footer-top .footer-links ul a:hover {
  text-decoration: none;
  color:var(--purple);
}



#footer .footer-bottom {
	background:var(--text); 
	padding: 4rem 0 6rem 0;
}

#footer .credits {
  padding-top: 5px;
  color: var(--white);
}

#footer .credits a {
	color: var(--yellow);
}

#footer .credits a:hover {
	opacity:0.7;
	text-decoration: underline;
}

#footer .social-links a {
  font-size: 18px;
  display: inline-block;
  background: var(--purple);
  color: var(--white);
  line-height: 1;
  padding: 8px 0;
  margin-right: 4px;
  border-radius: 50%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}

#footer .social-links a:hover {
  background: var(--yellow);
  color: var(--white);
  text-decoration: none;
}



/* Pagination style */

.page-item:first-child .page-link, .page-item:last-child .page-link{
    border-radius:0
}

.active>.page-link, .page-link.active  {
    background-color: var(--yellow);
    border-color: var(--yellow);
}

.page-link {
    border-color: var(--yellow);
    color: var(--yellow);
}

.page-link:hover {
    background-color: var(--blue);
    border-color:  var(--yellow);
    color: var(--white);
}

/* Change Woocommerce */
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button {
	background-color: var(--purple);
	 color:#fff;
	border: 1px solid var(--purple);
    padding: .75rem 1.25rem;
    border-radius: 1rem;
    text-decoration: none;
    transition: all ease-in-out 0.4s;
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt:hover  {
	background-color: var(--yellow);
	 	border: 1px solid var(--yellow);
	color:#fff;
    
}

#product h2.entry-title {
    font-size: 3rem;
    margin-bottom: 2rem;
}

span.woocommerce-Price-amount.amount {
	background():;background-color: var(--blue);color: #fff;padding: 1rem 1.5rem;font-size: 1.5rem;font-weight: 500;}

p.price {
    margin-bottom: 2rem;
    margin-top: 1rem;
}

.woocommerce ul.products li.product .price {
    margin-top:1rem;
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
	background: var(--purple);
	border-radius: 0;	
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger::before{
	border-color: #fff;
	
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger::after {
	background:#fff;
}


.navbar a.wpmenucart-contents::after {
    content: none;
}

.navbar a.wpmenucart-contents:hover {
    color:var(--red);
}

@media (min-width:992px){
li#wpmenucartli {
    border-left: 1px solid #dad9d9;
}

}

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product
{border: 1px solid #f2f2f2;}


.woocommerce ul.products li.product .woocommerce-loop-category__title, .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h3
{
position:absolute;
    bottom:0;
    color: #fff;
    background-color: var(--yellow);
    padding: .5rem 1rem;
   
}
 .woocommerce ul.products li.product .price {
     position:absolute;
     top:0;
     
 }

 .woocommerce ul.products li.product .price  span.woocommerce-Price-amount.amount {
    padding: 1rem;
    font-size: 1rem;
 }

.woocommerce ul.products li.product .button {
    display:none;
}

mark.count
 {
    background-color: transparent;
    color: #fff;
}

.woocommerce ul.products li.product a img {
   margin: 0; 
       }

.wc-block-components-button__text {
    color: var(--white);
    background-color: var(--purple);
    border: 1px solid var(--purple);
    padding: .75rem 1.25rem;
    border-radius: 1rem;
    text-decoration: none;
    transition: all ease-in-out 0.4s;
}

.wc-block-components-button__text:hover {
    color: var(--white);
    background-color: var(--yellow);
    border: 1px solid var(--yellow);
    
}

a.wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained {
    text-decoration: none;
}

button.wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.contained {
    border: 0;
    background: transparent;
}
.filters-side {
    border-right: 1px solid var(--bg);
    padding-right:1rem;
}

button.wp-block-search__button.has-icon.wp-element-button {
color: var(--white);
    background-color: var(--purple);
    border: 1px solid var(--purple);
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all ease-in-out 0.4s;
    }

button.wp-block-search__button.has-icon.wp-element-button:hover {
color: var(--white);
    background-color: var(--yellow);
    border: 1px solid var(--yellow);
    }

.wp-block-search__input {
    border-color: #a2a0a0 !important;
    border-radius:0.5rem;
}

.filters-side h2, .wpfFilterWrapper .wfpTitle {
    font-size: 1.25rem !important;
    color: #666 !important;
    padding-top:2rem;
    border-bottom: 1px solid var(--yellow);
}

.filters-side h2 .first {
	padding-top: 0 !important;
}
.wpfFilterWrapper .wfpTitle {
	padding-bottom: 1rem !important;
    margin-bottom: 1.5rem !important;
	height:initial !important;
	font-weight:600 !important;
}


.filters-side h2:after{
    content:none;
}

.filters-side ul.wc-block-product-categories-list.wc-block-product-categories-list--depth-0, .filters-side .woocommerce-tags ul {
    padding-left:0;
}
.filters-side ul li {
    list-style:none;   
}
.woocommerce-tags mark.count {
    color: var(--text);
}

.woocommerce ul.products li.product .price ins {
   text-decoration:none;
}

span.onsale {
    background-color: var(--yellow) !important;
    padding: 0 !important;
}

button.wpfFilterButton.wpfButton {
    background-color: var(--yellow);
    color: var(--white);
    border: 1px solid var(--yellow);
    padding: .75rem 1.25rem;
    border-radius: 1rem;
    text-decoration: none;
    transition: all ease-in-out 0.4s;
    text-transform:none;
    font-weight: normal;
}

button.wpfFilterButton.wpfButton:hover {
    background-color: var(--purple);
    color: var(--white);
    border: 1px solid var(--purple);
    
}

#mob-wctop #wpfBlock_1, #mob-wctop #wpfBlock_2, #mob-wctop #wpfBlock_3, #mob-wctop #wpfBlock_4, #mob-wctop #wpfBlock_5  {
    margin:0;
}

#mob-wctop .wfpTitle.wfpClickable {
    font-size: 1rem !important;
    border-bottom:0;
    margin-bottom: 0 !important;
}

#mob-wctop .position-absolute {
    top: 0;
    right:0;
}

#mobsearch h2 {
    display: none;
}

#mobsearch form {
    padding-top: 1rem;
}

h1.woocommerce-products-header__title.page-title {
    font-size: 1.5rem;
    padding-bottom: 0.75rem;
    color: #666;
    margin-bottom: 2rem;
    position: relative;
    display: inline-block;
}

h1.woocommerce-products-header__title.page-title:after {
    display: inline-block;
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--yellow);
    background-clip: content-box;
    width: 100%;
}

.search-btm h2.wp-block-heading.pt-0 {
    display: none;
}