/*
Theme Name: Cafe Alley
Theme URI: https://www.logicalthemes.com/products/free-cafe-wordpress-theme/
Author: LogicalThemes
Author URI: https://www.logicalthemes.com
Description: In the current and trending coffee culture that has wrapped the world in its eternal charm, coffee shop owners or cafés are required to serve more than just coffee!  It is expected of them that along with coffee and snacks they sell an ambience, an experience that people will remember and carry home. This is where our Coffee Alley WordPress Theme can come in handy! It can be used for coffee and tea shops, cafeterias, and coffee bars. The design exudes great look along with functionality that will help you run your café like a pro! Whether you’re a coffee shop start-up, food entrepreneur, a café owner that people are talking about already, or planning to start a cafeteria, Coffee Alley WordPress Theme has been crafted to serve all these purposes. No business can compete like a pro or project its professional image to its target audience without an online presence. This free & modern theme will prove to be a perfect platform to showcase and market your brand online. Whether you’re launching your first coffee bar or are giving a thought to refurbish or revamp your cafeteria to give create a fresh new presence, you should use Cafe Alley WordPress Theme. It’s easy to host your coffee shop online on this design. Building a custom website is a long drawn and expensive affair, besides the fact that it requires longer duration to build when you’re expected to communicate with various teams.  On the other hand Coffee Alley WordPress Theme can be downloaded and installed within hours. Coffee Alley WordPress Theme is an attractive, responsive, and easy to manage template that any coffee shop owner can use to display their products and services. The ambience shines through the design, giving your café an upmarket and lively vibe compelling people to visit your place, experience coffee and services, and spread a word about your cafeteria.  
Requires at least: 5.3
Tested up to: 6.8
Requires PHP: 7.2
Version: 0.2
License: GNU General Public License v3.0 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: cafe-alley
Tags: wide-blocks, flexible-header, left-sidebar, right-sidebar, one-column, two-columns, three-columns, four-columns, grid-layout, custom-colors, custom-background, custom-logo, custom-menu, custom-header, editor-style, featured-images, footer-widgets, sticky-post, full-width-template, theme-options, threaded-comments, rtl-language-support, blog, portfolio, e-commerce

Cafe Alley WordPress Theme has been created by LogicalThemes(logicalthemes.com), 2022.
Cafe Alley WordPress Theme is released under the terms of GNU GPL
*/
*, body, img, p, .bypostauthor, .wp-caption-text, .wp-caption, .sticky, .gallery-caption{
  margin:0;
  padding:0;
}
*{
  outline:none;
}
body{ 
  -ms-word-wrap:break-word;
  word-wrap:break-word;
  background-color:#fff;
  font-size: 15px;
  color: #999;
/*  font-family: 'Montserrat', sans-serif;*/
  font-family: 'Poppins',sans-serif;
  overflow-x: hidden;
}
img{ 
  border:none;
  max-width:100%;
  height:auto;
}
section img{
  max-width:100%;
}
a:hover {
  text-decoration: none !important;
}
h1,h2,h3,h4,h5,h6{ 
  margin:0;
  color: #D88E2D;
  font-weight: bold;
}
p{ 
  font-size: 15px;
  line-height: 1.8;
}
a{ 
  text-decoration:none;
  color: #D88E2D;
}
a:hover{ 
  text-decoration:none;
  color: #D88E2D;
}
a:focus, input:focus, textarea:focus, button:focus,.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus{
  outline: 2px solid #fa84da;
  border-bottom: 1px solid #fa84da;
}
.mid-header .sign-link a:focus, .mid-header span.cart_no a:focus, span.entry-date a:focus, #sidebar input[type="submit"]:focus {
  outline-color: #000;
  border-color: #000;
}
.footersec input[type="submit"]:focus, .copyright a:focus {
  outline-color: #fff;
  border-color: #fff;
}
#footer-section h1,#footer-section h2,#footer-section h3,
	#footer-section h4,#footer-section h5,#footer-section h6 {
    color: #fff;
  }

table, select, span.woocommerce-input-wrapper{
  width:100%;
}
ul,ol{ 
  margin:0 0 0 15px;
  padding:0;
}
input[type='submit']{
  background-color: #D88E2D;
  padding: 1%;
  border: 0;
  color: #000;
  margin: 2% 0;
}
.clear{ 
  clear:both;
}
input[type='submit']:hover{
  cursor: pointer;
}
input[type="text"],input[type="email"],input[type="phno"],textarea{
  border:1px solid #bcbcbc;
  width:100%;
  font-size:16px;
  padding:10px 10px;
  margin:0 0 23px 0;
  height:auto;
}
textarea{
  height:111px;
}
.clearfix{clear: both;}
.center{ 
  text-align:center;
  margin-bottom:40px;
}
.wrapper{
  margin:3% auto;
}
.wp-caption{ 
  font-size:13px;
  max-width:100%;
}
.read-moresec a {
  background: #D88E2D;
  font-size: 16px;
  color: #fff;
  border-radius: 30px;
}
/*wide block*/
.entry-content .alignwide {
  margin-left  : -80px;
  margin-right : -80px;
}
.entry-content .alignfull {
  margin-left  : calc( -100vw / 2 + 100% / 2 );
  margin-right : calc( -100vw / 2 + 100% / 2 );
  max-width    : 100vw;
}
.alignfull img {
  width: 100vw;
} 
/* 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;
  width: 1px;
  word-wrap: normal !important;
}
.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. */
}
.entry-content a,.comment p a,#sidebar .widget_text p a{
  text-decoration: underline;
}
.footersec .widget_text p a {
  color: #fff;
  text-decoration: underline;
}
.alignleft,img.alignleft {
  display: inline;
  float: left;
  margin-right: 45px;
  margin-top: 4px;
  margin-bottom: 20px;
  padding: 0;
}
.alignright,img.alignright { 
  display: inline;
  float: right;
  margin-left:45px;
  margin-top:4px;
  margin-bottom:20px;
  padding:0;
}
.aligncenter,img.aligncenter { 
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top:0;
}
.comment-list .comment-content ul { 
  list-style:none;
  margin-left:15px;
}
.comment-list .comment-content ul li{
  margin:5px;
}
.main-container ol{
  list-style-position:outside;
  margin-left:20px;
}
.main-container ol li{
  margin:5px 0;
}
h2.section-title {
  font-size:30px;
  font-weight:700;
  padding:0 0 45px 0;
  text-align:center;
  display:table;
  margin-bottom:50px;
}
.padding-0{padding: 0;}
.marrgin-0{margin: 0;} 
/*----------Sticky Header------*/
.fixed-menubox {
  position: fixed;
  top: 0px; 
  left:0;
  width: 100%;
  box-shadow: 2px 2px 10px 0px #000;
  z-index: 999999;
  background: #fff;
  padding: 10px;
}
.page-template-home-custom .fixed-menubox{
  background: #fff;
}

.menu-section.text-lg-center {
  padding: 25px 0;
}

/* ---------Inner Page Header --------- */
.header-content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}
.inner-head {
  padding: 5% 0;
  position: relative;
  background: linear-gradient(175deg, black 65%, transparent 25%);
  height: 515px;
}
.inner-head:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(174deg, #D88E2D 68%, transparent 25%);
  z-index: -1;
}
.inner-head img.head-img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 0.6;
  clip-path: polygon(0 0, 100% 0, 100% 55%, 0 85%);
}
.inner-head h1 {
  color: #fff;
  font-size: 28px;
  display: inline-block;
  padding: 15px 100px 15px 30px;
  border-radius: 40px;
  background: #D88E2D;
}
.lt-breadcrumbs {
  color: #D88E2D;
  font-size: 25px;
  font-weight: 600;
  padding: 7px 20px 10px;
  background: #fff;
  border-radius: 30px;
  display: inline-block;
  line-height: 1;
  margin-left: -80px;
  position: relative;
  top: -3px;
}
.lt-breadcrumbs a, .lt-breadcrumbs span {
  color: #D88E2D;
  font-size: 18px;
  display: inline-block;
}
.header-image {
  position: relative;
  z-index: 1;
}
.header-image {
  position: relative;
  -webkit-transform: perspective(600) rotateY(-30deg);
  transform: perspective(600) rotateY(-30deg);
}
.header-image:after {
  content: '';
  width: 100%;
  height: 101%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: 100% 100%;
  z-index: 999;
}
.header-image img {
  width: 100%;
  border-radius: 90px;
  height: 350px;
  object-fit: cover;
  position: relative;
  top: 4px;
}
#header .socialicons{text-align: right;}

#header .socialicons a {
  position: relative;
    margin: 0 0 0 12px;
}
#header .socialicons a i{
    font-size: 18px;
    color: #000;
    transition: all 0.5s ease 0s;
}
#header .socialicons a:hover i{
  color : #D88E2D ;
  transition: all 0.5s ease 0s;
}

/*header Button*/

#header .top-head{padding: 25px 0pX 0px 0;}
#header .bottom-head {
    padding: 0px 0em 0px 10px;
    background: #222;
    top: 22px;
    z-index: 9;
    position: relative;
}
#primary-site-navigation {
    text-align: right;
    padding: 20px 0 0 0;
}

.bottom-head a { 
  color: #000;
}
#header .phbtn{position: relative;}
#header .phbtn {
    position: relative;
    display: block;
    background: #D88E2D;
    padding: 21px 4px 25px 23px;
    border-radius: 50px 0 0 50px;
    border-left: 4px solid #fff;
    margin: 0 -1px 0 0;
}
#header .phbtn a i {
    position: relative;
    width: 30px;
    height: 30px;
    line-height: 30px;
    background: #fff;
    color: #000;
    text-align: center;
    border-radius: 50px;
    font-size: 15px;
    transform: rotate(99deg);
    margin: 0 6px 0 0;
}
#header .phbtn a{
  font-size: 20px;
  color: #fff;
  font-weight: 500;
}
/* --------- Header --------- */
.pd-0{ padding: 0 !important;}
.mr-0{margin: 0 !important;}
#header .logobx-out{
  text-align: center;
  background: #DB3923;
  clip-path: polygon(0 0, 89% 0, 100% 100%, 0% 100%);
  padding: 1em 0;
}

.home header.banner {
    position: relative;
}
.page-template-home-custom #header {
    position: absolute;
    z-index: 999; 
    width: 100%;
}

.header-box{   padding: 0px 0px;}

#menu-sidebar {  display: inline;}
.primary-navigation ul{
  list-style: none;
  margin: 0;
  padding-left: 0;  
  color:#fff;
}
.primary-navigation li{
  position: relative;
  display: inline-block;
}
.primary-navigation .current_page_item a{color:#000;}
.primary-navigation a {
    display: block;
    color: #724A03;
    font-size: 15px;
    padding: 2px 12px;
    font-weight: 400;
    text-transform: capitalize;
}
.primary-navigation ul ul{
  display: none;
  position: absolute;
  min-width: 215px;
  z-index: 9999;
/*  border:1px solid ;*/
}
.primary-navigation ul ul ul{
  left: 100%;
  top: 0;
}
.primary-navigation ul ul a{
  color: #fff;
  background: #000;
  padding: 10px 10px 10px 20px;
}
.primary-navigation ul ul a:hover{
  background: #585858;
  color: #fff;
}
.primary-navigation ul ul li{
  float: none;
  display: block;
  text-align: left;
  border-left: none;
  border-right: none !important;
  padding: 0;
  border-bottom: 1px solid #fff;
}
.primary-navigation ul ul li:last-child{
  border-bottom: 0;
}
.primary-navigation ul li:hover > ul{
  display: block;
}
.primary-navigation a:hover{
  color: #D88E2D;
  transition: all 0.5s ease 0s;
}
/*--------------- SUPERFISH MENU ---------------------------*/
.sf-arrows .sf-with-ul:after{
  content: '\f107';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  right: -4px;
  /*color: #D88E2D;*/
  top: 3px;
}
.sf-arrows ul .sf-with-ul:after{
  right: 6px;
  top: 12px;
}
.toggle-menu, a.closebtn, #sidebar ul.woocommerce-mini-cart.cart_list.product_list_widget li:before{
  display: none;
}
.top-header {
  padding: 15px 0;
}
.top-header p, .top-header a {
  color: #4c4d4e;
  font-weight: 500;
}
.top-header p i {
  color: #fa84da;
}

.primary-navigation ul li{ 
  display:inline-block;
  margin:0 6px;
  position:relative;
  text-align: left;
}

.logo h1, .logo p.site-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  top: 5px;
}
.logo h1 a, .logo p.site-title a{
  color: #000;
}
.logo p{
  color: #000;
  font-size: 13px;
}
.page-template-home-custom #header {
  border: 0;
}
#header {
  border-bottom: 1px solid #fff;
}

/*header with*/
#header .logobx_m{width: 20%;}
#header .m-mnu{width: 60%;}
#header .m-btn{width: 20%;padding-right: 5%;}
.logobx svg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}
.logobx {
    text-align: center;
}
/*header form */
#header .search_bar{ 
  position: relative;
  background-color: #724A03;
  border-radius: 50px;
  line-height: 0.9;
  margin-top: 10px;
}
#header .search_bar fieldset {margin: 0px 0px;padding-top: 0px;}
#header input.search-field {
    background: #724A03;
    border-radius: 50px;
    position: relative;
    padding:8px 10px;
}
#header input.search-field  {
    box-shadow: none;
    font-weight: 400;
    font-size: 14px;
    width: 85%;
    padding: 12px 18px 12px 34px;
    margin: 0;
    overflow: hidden;
    border-radius: 50px;
    background: #D88E2D;
    color: #fff;
    float: right;
    border-left: 4px solid #fff !important;
    border: none;
    text-align: center;
}
#header input.search-field:focus {outline: none; }
#header .s-frm input[type="submit"] {
    color: #000;
    width: 33px;
    height: 33px;
    text-align: center;
    padding: 0;
    position: absolute;
    top: 7px;
    left: 6px;
    bottom: 6px;
    background: none;
    margin: 0;
    user-select: none;
    text-indent: -999px !important;
    box-shadow: none;
    border-radius: 50px;
    border: 0px solid #ccc;
    opacity: 1;
    transition: all 0.5s;
}
#header .s-frm:hover input[type="submit"]{opacity: 1; transition: all 0.5s;}
#header .search_bar:after {
    content: "\f002";
    font-family: 'Fontawesome';
    position: absolute;
    top: 14px;
    font-size: 18px;
    left: 13px;
    text-align: center;
    color: #fff;
    background-repeat: no-repeat;
    width: 0;
    clear: both;
    border-radius: 24px;
    opacity: 1;
}
/* #header .s-frm:hover input[type="submit"]{background-color:#fff} */
#header .search_bar:hover:after{display: none;}
#header input[type="submit"]:hover,
#header input[type="submit"]:focus {
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
/*#header .search_dropdown:hover,
#header .search_dropdown.active { cursor: pointer; } 
#header .search_dropdown ul {
    display: none;
    position: absolute;
    top: 105%;
    left: -1px;
    font-size: 14px;
    width: 225px;
    background: #fff;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 7px 0;
}
    
#header .search_dropdown li {
  list-style-type: none;
  margin: 0;
  padding: 5px 18px;
  color: $highlight_color;
  line-height: 1.2em;
  position: relative;
}
      
#header .search_dropdown:hover {}
#header .search_dropdown .selected {color: #fff;}
#header .search_dropdown .huge { max-width: 860px; }
#header .search_dropdown  input[type=text] {  font-size: 20px;}*/
/* --------- SLIDER--------- */

#slider{ 
  position:relative; 
  overflow: hidden;
  height:auto; 
  background: transparent linear-gradient(180deg, #F9CDA0 0%, #F6E7D8 75%, #F6E8DA 100%) 0% 0% no-repeat padding-box;
  padding: 12em 0 1em 0;
}

#slider .sliderbg-img{position: relative;width: 60%; margin:30px 0 0 0;}
#slider .sliderbg-img img {
  position: relative;
  width: 100%;
  height: 450px;
  border-radius: 40px 40px;
  padding: 10px 0;
  z-index: 1;
}
#slider .s-oly {
    position: absolute;
    left: -6px;
    right: 13px;
    top: 28px;
    bottom: 130px;
    border: 4px solid #fff;
    border-radius: 40px 40px;
    z-index: 1;
}
#slider svg {
    position: relative;
    width: 100%;
    height: 300px;
    margin-top: -13em;
}
#slider .sm_image img {
    position: absolute;
    right: -4px;
    top: -8px;
    width: 120px;
    height: 103px;
    animation: tada 10s linear infinite;
}
@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

/*********/
#slider .slider-content {
  position: relative;
  width: 40%;
  align-content: center;
  padding: 0 22px 0 10px;
}
#slider .slider-content h2 {
    position: relative;
    z-index: 1;
    margin: 0px 0 0.3em;
    font-size: 80px;
    font-weight: 600;
    line-height: 1;
    color: #724A03;
    word-break: break-word;
    white-space: normal;
    padding: 0;
}
#slider .slider-content p {
    position: relative;
    z-index: 1;
    color: #090909;
    margin: 0px 0 22px 0;
    padding: 0 0 0 2px;
    font-size: 20px;
}
#slider .slider-content .read-btn a{
    position: relative;
    overflow: hidden;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    word-break: break-all;
    padding: 10px 31px;
    text-align: center;
    background: #D88E2D;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    z-index: 1;
    transition: all 0.4s ease 0.5s;
    border: none;
    border-radius: 0px;
    text-decoration: none;
    transition: all .3s ease-out;
    margin: 0.4em 0 0;
    box-shadow: -4px 1px 4px 4px #724A03;
    left: 3px;
}
#slider .slider-content .read-btn a:hover{color: #000;transition: all .3s ease-out;}
/*right*/
#slider .rightimg img{
  position: absolute;
    right: -6%;
    top: 20%;
    width: 40px;
    height: 48px;
    z-index: unset;
}
#slider .righttop img {
    position: absolute;
    left: 20px;
    top: -28px;
    width: 28px;
    height: 50px;
    z-index: 9;
    transform: rotate(-61deg);
}
/*left*/
#slider .lefttop img{
  position: absolute;
  right: 16%;
  top: 22px;
  width: 38px;
  height: 60px;
  z-index: unset;
}
#slider .lefttleft img {
    position: relative;
    left: 2%;
    width: 30px;
    height: 44px;
    z-index: unset;
    transform: rotate(200deg);
}
#slider .left_lt img {
    position: absolute;
    left: -3%;
    width: 20px;
    height: 28px;
    z-index: unset;
    transform: rotate(149deg);
    bottom: 39%;
}

#slider .left_bm img {
    position: absolute;
    left: 25%;
    width: 43px;
    height: 42px;
    z-index: unset;
    bottom: 9%;
}
/**/
#slider .carousel-item-next,
#slider .carousel-item-prev,
#slider .carousel-item.active { display: block !important;}

#slider .carousel-control-next-icon i,
#slider .carousel-control-prev-icon i{
  width: 70px;
  height: 70px;
  line-height: 70px;
  background-image: none;
  font-size: 44px;
  color: #DB3923;
  border-radius: 50px;
  text-align: center;
  backdrop-filter: blur(22px);
  background: #654a4a;
}
#slider .carousel-control-next,
 #slider .carousel-control-prev{

  opacity: 0;
  width: 7%;
}
.carousel-control-next-icon, .carousel-control-prev-icon{
  width: auto;
  height: auto;
  background:transparent;
}

/* SWIPER */

.swiper {
  width: 250px;
  height: 450px;
  padding: 50px 0;
}

.swiper-slide {
  position: relative;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

.swiper-slide span {
  position: absolute;
  top: 0;
  right: 0;
  color: #fff;
  padding: 7px 18px;
  margin: 10px;
  border-radius: 20px;
  letter-spacing: 2px;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: inherit;
  background: rgba(255, 255, 255, 0.095);
  box-shadow: inset 2px -2px 20px rgba(214, 214, 214, 0.2), inset -3px 3px 3px rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(74px);
}

.swiper-slide h2 {
  position: absolute;
  bottom: 0;
  left: 0;
  color: #fff;
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.4;
  margin: 0 0 20px 20px;
}

.swiper-slide:nth-child(1n) {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400), url(https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/2929f534-3bc3-4cbd-b84c-80df863d5a38)
      no-repeat 50% 50% / cover;
}

.swiper-slide:nth-child(2n) {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400), url("https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/b6f5eb64-887c-43b1-aaba-d52a4c59a379")
      no-repeat 50% 50% / cover;
}

.swiper-slide:nth-child(3n) {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400), url("https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/e906353b-fde0-4518-9a03-16545c1161bd")
      no-repeat 50% 0% / cover;
}

.swiper-slide:nth-child(4n) {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400), url("https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/fc21e481-e28a-41a8-9db3-3b62c1ddc17e")
      no-repeat 50% 50% / cover;
}

.swiper-slide:nth-child(5n) {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400), url("https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/6b6ad966-79e1-4d3c-8f92-566d0fee8082")
      no-repeat 50% 50% / cover;
}

.swiper-slide:nth-child(6n) {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400), url("https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/2ad44f5d-2215-4416-9c9b-2bae3be51a67")
      no-repeat 50% 50% / cover;
}

.swiper-slide:nth-child(7n) {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400), url("https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/aa8fe914-741f-4bf4-ad4a-24f19d1f4178")
      no-repeat 50% 50% / cover;
}

.swiper-slide:nth-child(8n) {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400), url("https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/d5f10b4f-7d34-45bd-bb5f-5f1530c2ac1c")
      no-repeat 50% 0% / cover;
}

.swiper-slide:nth-child(9n) {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400), url("https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/7cbac263-7c55-4428-908e-31018dc1bce3")
      no-repeat 50% 50% / cover;
}

/*About Us Section*/
/*================*/
#aboutus-section{
  position: relative;
  overflow: hidden;
  padding: 5em 0 5em 0;
  background: url(assets/images/about-bg.jpg);
  background-repeat:no-repeat ;
  background-size:cover ;
}
#aboutus-section .about-area-bx{
  position: relative;
    z-index: 9;
    padding: 0 58px 0 40px; 
    height: auto;
}
#aboutus-section .service-head {
    margin-bottom: 3em;
    width: 60%;
}
#aboutus-section .abt-rbx {
    position: relative;
    padding: 43px 33px 40px 40px;
    z-index: 1;
}
#aboutus-section .service-head h4 {
    font-size: 34px;
    font-weight: 700;
    margin-top: 0.1em;
    line-height: 34px;
    color: #543602;
    border-bottom: 1px solid #000;
    display: inline-block;
}

#aboutus-section .description {
  position: relative;
  color: #707070;
  font-size: 18px;
  font-weight: 400;
  margin: 1.2em 0 2em 0;
  line-height: 34px;
  z-index: 1;
}
#aboutus-section .lists p {
    position: relative;
    color: #332102;
    font-size: 20px;
    margin: 14px 0 ;
    font-weight: 500;
    line-height: 25px;
}

#aboutus-section .about-btn{
  margin-top: 2em;
}
#aboutus-section .about-btn a {
    display: inline-block;
    position: relative;
    overflow: hidden;
    padding: 8px 27px;
    border-radius: 50px;
    text-align: center;
    background: #D88E2D;
    color: #332102;
    font-size: 20px;
    font-weight: 600;
    z-index: 1;
    transition: all 0.2s ease 0.4s;
    border: none;
    text-decoration: none;
    transition: 0.5s;
}
#aboutus-section .about-btn a:hover{ transition: all 0.2s ease 0.4s;color:#fff; }
#aboutus-section .imgbx {
    width: 40%;
    position: relative;
}
#aboutus-section .imgbx .image img {
    position: relative;
    border-radius: 8px 8px 230px 230px;
    width: 506px;
    height: 472px;
    transition: all .4s linear;
    /*margin-bottom: 160px;*/
    z-index: 1;
}
#aboutus-section .imgbx .ima2 {
    float: right;
    right: -70px;
    position: relative;
    top: -9px;
}
#aboutus-section .imgbx .ima2 img{
   position: relative;
   z-index: 1;
}
#aboutus-section .svg {
    position: absolute;
    width: 0;
    /* display: none; */
    height: 0;
}
#aboutus-section .clipped {
    width: 100%;
    height: 100%;
    background: #f3dcc1;
    background-size: cover;
    -webkit-clip-path: url(#my-clip-path);
    clip-path: url(#my-clip-path);
    position: absolute;
    top: 0;
    left: 0;
}


/*Service Section*/
/*================*/

#service-section {
  position: relative;
  overflow: hidden;
  padding: 4em 0 1em 0;
  background: #f6e8da;
}
#service-section .heading-brd1{ position: relative;}
#service-section .heading-brd1::before {
    content: "";
    position: absolute;
    top: 26px;
    left: 0px;
    right: 0px;
    display: block;
    border-top: 1px dashed rgb(0, 0, 0);
    z-index: 0;
}
#service-section .service-head { margin: 0 0 6em 0em; position: relative;text-align:center; }
#service-section .service-head h4 {
    position: relative;
    word-break: break-word;
    font-weight: 700;
    font-size: 40px;
    margin-bottom: 0px;
    display: inline-block;
    z-index: 1;
    word-spacing: 2px;
    padding: 0 8px;
    color: #543602;
    background: #F6E8DA;
    text-align: center;
}
#service-section .serbx{padding:0 1em;margin-bottom: 3em;}
#service-section .service-box {
  margin: 0 ;
  padding: 0;
  position: relative;
  /*overflow: hidden;*/
  border-radius: 0px;
  transition: all 0.5s ease 0s;
}
#service-section .service-box:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  border: 1px dashed #543602;
  border-radius: 0 0 10px 10px;
}
#service-section .service-img {
    position: relative;
}
#service-section .service-img img{
    position: relative;
    width: 100%;
    height: 366px;
    border-radius: 0 0 190px 190px;
}
#service-section .service-content {
    padding: 40px 30px 20px;
    position: relative;
    text-align: center;
}
#service-section .service-content .title {
  font-size: 30px;
  font-weight: 700;
  margin: 0px 0 17px 0;
  color: #332102;
  position: relative;
}
#service-section .service-content p {
    color: #707070;
    padding: 0;
    font-size: 19px;
    margin: 5px 0 25px 0;
    line-height: 32px;
}
#service-section .bttn {
    position: absolute;
    bottom: -2em;
    width: 100%;
    left: 0;
    right: auto;
}
#service-section .bttn a {
    display: inline-block;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    bottom: 0;
    padding: 8px 26px 7px;
    text-align: center;
    color: #332102;
    background: #D88E2D;
    font-size: 20px;
    font-weight: 600;
    z-index: 1;
    transition: all 0.4s ease 0.5s;
    border-radius: 50px;
    text-decoration: none;
    border: 1px dashed #543602;
    transition: 0.2s;
}



/****************************************/

@keyframes pulsejg1 {
  0% {
      transform: scale(.3);
      opacity: 0;
  }
  50% {
      transform: scale(.5);
      opacity: 0.8;
  }
  60% {
      transform: scale(.7);
      opacity: 1;
  }
  70% {
      transform: scale(.9);
      opacity: 0.8;
  }
  80% {
      transform: scale(1.01);
      opacity: 1;
  }
  100% {
      transform: scale(1.02);
      opacity: 0;
  }
}
@keyframes pulsejg2 {
  0% {
      transform: scale(0.7);
      opacity: 0;
  }
  40% {
      transform: scale(.08);
      opacity: 0;
  }
  50% {
      transform: scale(0.9);
      opacity: 1;
  }
  60% {
      transform: scale(1);
      opacity: .9;
  }
  80% {
      transform: scale(1.1);
      opacity: 1;
  }
  100% {
      transform: scale(1.2);
      opacity: 0;
  }
}

/* Woocommerce */
.woocommerce .woocommerce-breadcrumb, .woocommerce .woocommerce-breadcrumb a {
  color:#000;
}
a.showcoupon,.woocommerce-message::before{
  color: #D88E2D;
}
.woocommerce-message {
  border-top-color: #D88E2D;
}
.woocommerce #customer_login .col-1, .woocommerce #customer_login .col-2 {
  max-width: 100%;
}
.woocommerce span.onsale{
  background: #D88E2D;
  padding: 0;
  border-radius: 0;
  color: #fff;
  font-weight: 500;
}
.products li {
  padding: 0 0 10px !important;
  text-align: center;
}
h2.woocommerce-loop-product__title,.woocommerce div.product .product_title {
  color: #000;
  font-size: 20px !important;
}
.woocommerce img, .woocommerce-page img{
  margin: 0 !important;
  border: solid 1px #dcdcdc;
}
.woocommerce button.button:disabled, .woocommerce button.button:disabled[disabled]{
  color: #fff;
}
.woocommerce ul.products li.product .price,.woocommerce div.product p.price, .woocommerce div.product span.price {
  color: #000;
}
.woocommerce div.product .product_title,.woocommerce div.product p.price, .woocommerce div.product span.price{
  margin-bottom: 5px;
}
.woocommerce div.product .product_title {
  background: none;
  text-align: left;
  text-transform: capitalize;
}
.woocommerce-product-gallery__image {
  padding: 5px;
}
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button,.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, a.added_to_cart.wc-forward{
  background: #D88E2D;
  color: #fff;
  border-radius: 30px;
  font-weight: 500;
}
a.button.yith-wcqv-button, a.added_to_cart.wc-forward {
  margin-left: 5px;
  padding: 8px !important;
  font-size: 14px;
  line-height: 1;
  border-radius: 30px;
}
a.added_to_cart.wc-forward {
  margin-top: 10px;
}
.woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,.woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, a.added_to_cart.wc-forward:hover  {
  background: #fa84da;
  color: #fff;
}
.woocommerce .quantity .qty {
  width: 5em;
  padding: 5px;
  border-radius: 30px;
  border: solid 1px #353535;
  color: #353535;
}
.woocommerce div.product form.cart {
  margin: 15px 0;
}
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span{
  padding: 15px;
}
.woocommerce nav.woocommerce-pagination ul li a:focus, .woocommerce nav.woocommerce-pagination ul li a:hover, .woocommerce nav.woocommerce-pagination ul li span.current {
  background: #D88E2D;
  color: #000;
  border: none;
}
.col-1,.col-2 {
  max-width: 100%;
}
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
}
.woocommerce-MyAccount-navigation ul li {
  background: #D88E2D !important;
  padding: 12px;
  margin-bottom: 10px;
}
.woocommerce-MyAccount-navigation ul li a{
  color: #fff ;
}
.posted_in {
  display: block;
}
.woocommerce-products-header {
  margin-top: 20px;
}
select.orderby{
  padding: 10px;
  margin-top:10px;
}
.woocommerce-info a, tr.woocommerce-cart-form__cart-item.cart_item a, form.woocommerce-shipping-calculator a, nav.woocommerce-MyAccount-navigation a, a.shipping-calculator-button, table.shop_table.shop_table_responsive.cart.woocommerce-cart-form__contents .product-name a, nav.woocommerce-MyAccount-navigation a, .woocommerce-MyAccount-content li a, a.woocommerce-privacy-policy-link, a.showcoupon {
  text-decoration: none;
}
li.woocommerce-notice.woocommerce-notice--info.woocommerce-info {
  list-style: none;
  padding: 16px 32px 16px 56px;
}
.woocommerce .woocommerce-ordering select{
  padding: 10px;
}
#sidebar p.woocommerce-mini-cart__buttons.buttons a{
  text-decoration: none;
  color: #fff;
}
#sidebar p.woocommerce-mini-cart__buttons.buttons a:hover, .footersec p.woocommerce-mini-cart__buttons.buttons a:hover{
  background: #D88E2D;
}
#sidebar form.woocommerce-product-search input[type="search"], .footersec form.woocommerce-product-search input[type="search"]{
  width: 100%;
  padding: 7px 10px;
}
#sidebar form.woocommerce-product-search button, .footersec form.woocommerce-product-search button{
  background: #D88E2D;
  border: none;
  color: #fff;
  padding: 8px 0;
  width: 100%;
  font-size: 16px;
  margin: 0;
  letter-spacing: 1px;
  font-weight: 600;
}
#sidebar .widget_price_filter .ui-slider-horizontal .ui-slider-range, #sidebar .widget_price_filter .ui-slider .ui-slider-handle, .footersec .widget_price_filter .ui-slider-horizontal .ui-slider-range, .footersec .widget_price_filter .ui-slider .ui-slider-handle, .woocommerce .widget_price_filter .price_slider_amount .button:hover{
  background: #D88E2D;
}
.widget_shopping_cart_content p.woocommerce-mini-cart__total.total{
  padding: 5px 0;
  color: #fff;
}
.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content{
  background: #fff;
}
.select2-container--default .select2-selection--single{
  height: 40px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  padding: 10px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
  top: 3px;
}
#sidebar ul.woocommerce-mini-cart.cart_list.product_list_widget li{
  background: none;
}
.woocommerce .woocommerce-ordering select{
  padding: 10px;
}
.woocommerce-product-gallery__image{
  padding: 2px;
}
.woocommerce ul.products li.product .price{
  font-size: 15px;
}
.woocommerce form .form-row .required{
  color: #df0000;
}
.woocommerce ul.products li.product .price, .woocommerce ul.products li.product .price, .woocommerce div.product span.price, .woocommerce div.product p.price {
  color: #000;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce form.woocommerce-shipping-calculator a{
  color: #000 !important;
}
.woocommerce .woocommerce-breadcrumb{
  margin-top: 10px;
}
#sidebar .price_label, .footersec .price_label, .woocommerce button.button:disabled, .woocommerce button.button:disabled[disabled]{
  color: #fff;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-weight: 500;
  color: #000;
  font-size: 20px !important;
  font-family: 'Poppins', sans-serif;
  text-align: center;
}
.woocommerce ul.products li.product .button{
  margin-top: 0;
}
.woocommerce-info::before {
  color: #1a8129;
}
.woocommerce-privacy-policy-text p a,.woocommerce button.button:disabled:hover, .woocommerce button.button:disabled[disabled]:hover{
  color: #000;
}
.woocommerce #comments p {
  float: left;
  width: 100%;
}
.woocommerce #reviews #comments ol.commentlist li .comment-text p.meta {
  font-size: 16px;
}
.woocommerce .product-title{
  font-size: 17px;
}
.woocommerce .select2-container .select2-selection--single{
  height: 40px;
  padding: 0;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height: 20px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b{
  top:70%;
}
.select2-container--default .select2-selection--single, input#billing_phone {
  padding: 10px 0px;
  border-radius: 0px;
  border: 1px solid #bcbcbc;
}
.woocommerce #payment #place_order, .woocommerce-page #payment #place_order{
  width: auto;
}
.woocommerce-Address{
  max-width: 100%;
}
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product{
  text-align: center;
}
#sidebar .star-rating, .footersec .star-rating{
  margin: 0 !important;
}
#sidebar .product_list_widget .star-rating, .footersec .product_list_widget .star-rating{
  margin: 5px 0 10px 0 !important;
}
#sidebar .widget_price_filter .price_slider_wrapper .ui-widget-content{
  background-color: #000;
}
.footersec .widget_price_filter .price_slider_wrapper .ui-widget-content{
  background-color: #fff;
}
.footersec .price_label, #sidebar .price_label, .news-item.layout-two .news-text-wrap{
  font-size: 14px;
}
.woocommerce .star-rating {
    float: left;
}
.related.products ul.products li.product, .related.products .woocommerce-page ul.products li.product{
  float:none;
  display: inline-table;
  width: 30%;
  text-align: center;
  margin-right: 15px;
}
.woocommerce .woocommerce-product-rating .star-rating {
  margin: 0.5em 20px 0 0;
  color: #ff7e00;
}
.woocommerce form.login .form-row,.woocommerce .woocommerce-form-login .woocommerce-form-login__submit{
  display: block;
  float: none;
}
.woocommerce-Reviews .comment-text p.meta {
  width: 100%;
  float: left;
  padding-top: 10px;
}
#sidebar a.remove.remove_from_cart_button , .footersec a.remove.remove_from_cart_button{
  font-size: 22px !important;
}
.woocommerce #reviews #comments h2{
  font-size: 25px;
}
.related.products h2 {
  text-align: left;
  margin-bottom: 20px;
}
.comment-form-rating label {
  padding: 10px 0;
}
.woocommerce-cart table.cart td.actions .coupon .input-text{
  font-size: 11px;
  padding: 7px;
}
.footersec .woocommerce.widget_shopping_cart .cart_list li{
  padding: 0 0 0 2em;
}
#sidebar .widget_shopping_cart_content li:hover{
  padding-left: 2em;
}
.woocommerce-Reviews .comment-form-rating label{
  padding: 10px 0;
}
.woocommerce input#password {
  padding: 10px;
}
#sidebar .woocommerce ul.product_list_widget li img, .footersec .woocommerce ul.product_list_widget li img {
  width: 50px;
}
.footersec .woocommerce.widget_shopping_cart .cart_list li{
  padding: 0 0 10px 2em;
}
.woocommerce ul.products li.product .star-rating{
  margin: 10px auto;
}
#sidebar li.woocommerce-mini-cart-item.mini_cart_item{
  position: relative;
  padding: 0 0 10px 30px;
  margin: 0;
}
#sidebar .woocommerce ul.product_list_widget li a{
  padding: 0
}
#sidebar .woocommerce ul.product_list_widget li:before{
  position: absolute;
  left: 0;
  top: 12px;
}
.woocommerce ul.products.columns-3 li.product, .woocommerce-page ul.products.columns-3 li.product{
  text-align: center;
}
#sidebar ul.woocommerce-mini-cart.cart_list.product_list_widget li a.remove{
  position: absolute;
}
#sidebar ul.woocommerce-mini-cart.cart_list.product_list_widget li{
  padding-left: 2em;
}


/* --------- Homepage --------- */
.box-image img {
  width: 100%;
}
.post-wrap h2{
  font-size: 25px;
  font-weight: 600;
  display: block;
}
.post-wrap h2 a{
  color: #000;
}
.post-wrap .section-title a:hover{
  text-decoration:none;
}
.post-wrap {
  box-shadow: 0 0 15px #ddd;
  border-radius: 10px 10px 0 0;
}
.post-wrap img {
  border-radius: 10px;
}
.singlebox h1{
  color: #D88E2D;
  font-size: 30px;
}
.adminbox {
  background: #D88E2D;
  padding: 30px 20px 15px;
  clip-path: polygon(0 30%, 100% 0%, 100% 100%, 0% 100%);
}
.adminbox span {
  font-size: 16px;
  color: #000;
}
.adminbox span a{
  color: #000;
}
.post-wrap p {
  font-size: 15px;
  color: #828282;
}
.continue-read a {
  font-size: 15px;
  font-weight: 500;
  color: #000;
  padding: 10px 25px;
  background: #D88E2D;
  border-radius: 30px;
  display: inline-block;
}
.continue-read a:hover {
  color: #fff;
}
.metabox span {
  color: #0d0d0e;
  font-size: 16px;
  margin-right: 20px;
}
/* Breadcrumbs */
.bradcrumbs{
  padding:30px 0;
}
.bradcrumbs a{
  background: #f1f1f1;
  color: #000;
  padding: 4px 15px;
  margin-right: 5px;
  display: inline-block;
  margin-bottom: 5px;
}
.bradcrumbs a:hover{
  background:#f58220;
}
.bradcrumbs span{
  background:#dddddd;
  color:#000;
  padding:5px 15px;
}
/* blog post */
.nav-previous {
  float: left;
  width: 50%;
  margin: 15px 0;
}
.nav-next{
  float: left;
  width: 50%;
  text-align: right;
  margin: 15px 0;
}
span.meta-nav {
  clear: both;
  font-size: 16px;
  color: #000;
  font-weight: 600;
}
.nav-next span.meta-nav:after{
  content: "\f30b";
  font-family: 'Font Awesome 5 Free';
  font-weight: 600;
  margin-left: 8px;
  position: relative;
  top: 5px;
}
.nav-previous span.meta-nav:before{
  content: "\f30a";
  font-family: 'Font Awesome 5 Free';
  font-weight: 600;
  margin-right: 8px;
  position: relative;
  top: 5px;
}
.post-tags a {
  background: #D88E2D;
  color: #fff;
  padding: 4px 10px;
  margin: 3px;
  border-radius: 4px;
  display: inline-block;
}
/* Comments BOX */
#comments h2.comments-title{
  font-size:20px;
  font-weight:bold;
  border-top:2px dotted #7e7e7e;
}
#comments h3.comment-reply-title{
  font-size:20px;
  font-weight:bold;
  clear:both;
}
#comments input[type="text"],#comments input[type="email"],#comments textarea {
  padding:12px 10px;
  font-size:18px;
  margin:20px 0 0 0;
}
#comments input[type="submit"].submit{
  background: #D88E2D;
  padding:10px 60px;
  text-transform:uppercase;
  font-weight:bold;
  margin-top:20px;
  color: #fff;
  border-radius: 30px;
}
#comments a.comment-reply-link{
  color:#fff;
  background: #D88E2D;
  padding:5px 15px;
  font-weight: 500;
  border-radius: 30px;
}
#comments a.comment-reply-link:hover,#comments input[type="submit"].submit:hover{
  background: #fa84da;
  color: #fff;
}
#comments a time{
  color:#000;
  font-weight:bold;
  font-size:12px;
}
.main-content #comments ol li{
  width:100%;
  background:none;
  list-style:none;
  margin: 0 0 20px;
  display:inline-block;
  border:none;
}
#comments .comment-body p{
  background: #f5f5f5;
  padding: 15px;
}
.main-content #comments ul{
  margin:0 0 0 40px;
}
#comments .reply{
  text-align:right;
}
.comment-respond{
  clear:both;
}
.comment-meta.commentmetadata {
  margin: 10px 0;
}
#comments .comment-body p a{
  text-decoration: underline;
}
/* Sidebar */
#sidebar h3 {
  color: #fff;
  background: #D88E2D;
  padding: 20px 15px;
  font-size: 25px !important;
  clip-path: polygon(0 0, 100% 0%, 100% 75%, 0% 100%);
}
#sidebar ul, #sidebar .textwidget, #sidebar .gallery, #sidebar div#calendar_wrap, #sidebar .tagcloud {
  padding: 15px 15px 40px;
  color: #707070;
  font-size: 16px;
}
div#sidebar p,#sidebar td#prev a {
  color: #696969;
}
#sidebar caption {
  font-weight: bold;
  color: #696969;
  font-size: 20px;
  text-align: center;
}
#sidebar table,#sidebar th,#sidebar td {
  border: 1px solid #d1d1d1;
  text-align: center;
}
#sidebar td {
  padding: 5px;
  color: #696969;
}
#sidebar th {
  text-align: center;
  padding: 5px;
  color: #696969;
}
#sidebar select {
  padding: 10px;
  border: none;
  background: #fff;
  color: #000;
  font-size: 17px;
  margin: 15px 15px 40px;
  width: -webkit-fill-available;
}
#sidebar form.search-form{
  display: table;
  width: 100%;
  padding: 15px 15px 40px;
}
#sidebar input[type="search"] {
  background:#fff;
  padding: 10px;
  border:none;
  font-size:15px;
  color:#696969;
  width:100%;
}
#sidebar input[type="search"]::placeholder {
  color: #000;
}
#sidebar form.search-form label{
  width:70%;
  float:left;
  margin-bottom: 0;
}
#sidebar input[type="submit"]{
  background: #D88E2D;
  border: none;
  color: #fff;
  padding: 9px 0;
  width: 30%;
  font-size: 16px;
  font-weight: 500;
  margin:0;
}
.singlebox {
  padding: 15px;
  border: 1px solid #eee;
  overflow: hidden;
}
.singlebox .adminbox {
  clip-path: none;
  padding: 15px;
}
#sidebar aside{
  position: relative;
  background: #f2f2f2;
}
#sidebar aside:after {
  content: '';
  height: 3px;
  background: #D88E2D;
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 20px;
}
#sidebar ul {
  list-style:none;
  margin:0;
}
#sidebar ul li a {
  color: #707070;
  font-size: 15px;
}
#sidebar ul li a:hover {
  color: #D88E2D;
}
#sidebar li:last-child {
  border-bottom: none;
}
#sidebar li {
  border-bottom: solid 1px #ddd;
  margin-top: 0;
  padding: 9px 0;
}
#sidebar li:before {
  content: '\f0ad';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  display: inline-block;
  margin-right: 10px;
  color: #D88E2D;
}
#sidebar .tagcloud a{
  background: transparent;
  color: #707070;
  font-size:15px !important;
  padding:5px 18px;
  margin:0 0 5px;
  display:inline-block;
}
#sidebar .tagcloud a:hover{
  background: #D88E2D;
  color: #fff;
}
.widget figure.gallery-item {
  display: inline-block;
  width: 31%;
  margin-right: 12px;
}
.widget figure.gallery-item:nth-child(3n) {
  margin-right: 0;
}

/* Main Content Css */
.main-content h1{
  font-size:32px;
  color: #000;
  font-weight: bold;
}
/* Pagination */
.pagination {
  clear:both;
  position:relative;
  font-size:14px;  
  line-height:13px;
  float:right;  
  font-weight:bold;
  width:100%;
} 
.pagination span, .pagination a {
  display:block;
  float:left;
  margin: 2px 5px 10px 0;
  padding:10px 15px;
  text-decoration:none;
  width:auto;
  color:#000;
  background: #ccc;
  -webkit-transition: background .15s ease-in-out;
  -moz-transition: background .15s ease-in-out;
  -ms-transition: background .15s ease-in-out;
  -o-transition: background .15s ease-in-out;
  transition: background .15s ease-in-out;
} 
.pagination a:hover,.pagination .current{
  background: #D88E2D;
  color: #fff;
}
.main-content .pagination ul{
  margin:0;
  clear:both;
}
.main-content .pagination ul li{
  margin:0;
}
/*copyright css*/
.footersec aside.widget {
  margin-bottom: 30px;
}
.footersec form.search-form label {
  width: 100%;
  margin-bottom: 10px;
}
.footersec form.search-form input[type="search"] {
  padding: 8px;
}
.footersec input[type="submit"] {
  margin-top: 0;
  padding: 8px 10px;
  background: #D88E2D;
  color: #fff;
  width: 100%;
}
.tagcloud a:hover {
  background: #D88E2D;
  color: #fff;
}
.tagcloud a {
  color: #fff;
  border: solid 1px;
  font-size: 15px !important;
  padding: 5px 18px;
  margin: 0 0px 5px;
  display: inline-block;
}
.footersec td#prev a {
  color: #fff;
}
.footersec caption {
  font-weight: bold;
  color: #fff;
  font-size: 20px;
}
.footersec table,.footersec th,.footersec td {
  border: 1px solid #d1d1d1;
  text-align: center;
}
.footersec td {
  padding: 10px;
  color: #fff;
}
.footersec th {
  text-align: center;
  padding: 10px;
  color: #fff;
}
.footersec select {
  padding: 8px 5px;
}
.widget li a,aside#categories-5 li a {
  color: #868686;
  font-size: 18px;
}
.footersec .widget li {
  list-style: none !important;
  margin-top: 14px;
  color: #724A03;
}

.footersec .widget li::before {
  content: "\f0f4"; /* Unicode for the FontAwesome icon */
  font-family: "Font Awesome 5 Free"; /* Specify the Font Awesome font family */
  font-weight: 900; /* Adjust font weight as needed */
  margin-right: 16px; /* Adjust spacing between icon and text */
  color: #D88E2D;
}

/*.widget_text p {
  color: #fff;
}*/

/*footer*/
/*==========*/
#footer-section {
  position: relative;
  background: #F6E8DA;
  padding: 40px 0 20px 0;
}
#footer-section .textwidget{color: #724A03;}
#footer-section .footersec {
    position: relative;
    margin-top: 0em;
}
#footer-section a, #footer-section .logo a, #footer-section .logo p {
  color: #724A03;
}
#footer-section .textwidget p{font-size: 18px ; color: #845503;}
#footer-section .logo {
  padding: 30px !important;
  border-bottom: 1px solid #fff;
  margin-bottom: 20px;
}
#footer-section .current-menu-item:before{color: #D88E2D;}
#footer-section .current-menu-item a{color: #D88E2D;}
#footer-section .menu-item a:hover{color: #D88E2D;}

.footersec, #footer-section .logo, .copyright {
  position: relative;
  z-index: 99;
}
#footer-section .copyright p {
  font-size: 18px;
    color: #543602;
}
/*#footer-section li:before {
  content: '\f0c8';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  display: inline-block;
  margin-right: 8px;
  color: #fff;
  font-size: 12px;
  top: -2px;
  position: relative;
  transform: rotate(45deg);
  margin-right:14px;
}*/
h3.widget-title {
  color: #000;
  font-size: 25px ;
  font-weight: 600;
  margin-bottom: 20px;
}
#footer-section h3.widget-title {
  margin-bottom: 36px;
  color: #543602;
  font-size: 24px;
}
.footersec ul {
  margin: 0;
}
.copyright {
    color: #543602;
    font-size: 18px;
    font-weight: normal;
    margin: auto;
    text-align: center;
    background: #F6E8DA;
    padding: 30px 0 0 0;
    margin-top: 30px;
    border-top: 1px solid #543602;
}
.copyright span{
  color: #543602;
}
.copyright a, .copyright a:hover{
  color: #543602;
}
/* Pagination */
.pagination{
  display:table;
  clear:both;
}
.pagination ul{
  list-style:none;
  margin:20px 0;
}
.pagination ul li{
  display:inline;
  float:left;
  margin-right:5px;
}
.pagination ul li span,.pagination ul li a{
  background:#222222;
  color:#fff;
  padding:5px 10px;
  display:inline-block;
}
.pagination ul li .current,.pagination ul li a:hover{
  background:#ff8a00;
}
h1.entry-title,h1.page-title{
  font-size: 30px;
  font-weight: 500;
  margin-bottom: 15px;
}
p.sorry-text {
  font-size: 17px;
  color: #333;
}
.sticky .post-wrap {
  margin-bottom: 4%;
  border: solid 10px #ddd;
  background: #eee;
}
article img{
  height:auto;
}
article p{
  margin:10px 0;
}
form.search-form{
  margin-bottom:0px;
}
#header .fas {
  transform: scaleX(-1);
}
i.fa.fa-search {
  float: right;
  margin-top: -8.5%;
  margin-right: 12%;
  font-size: 20px;
  color: #fff;
}
input.search-field, .post-password-form input[type=password]{
  border:1px #eee solid;
  padding:4px;
  width: 100%;
}
input.search-submit, .post-password-form input[type=submit]{
  border:none;
  color:#ffffff;
  padding:4px 10px;
  cursor:pointer;
}
aside.widget{
  margin-bottom:30px;
}
nav.post-navigation{
  padding:10px 0 20px;
  clear: both;
  font-weight: bold;
}
.webicon{
  font-size:20px;
}
.comment-list, ol.comment-list{
  list-style:none;
  margin-left:0;
  margin-top:20px;
  margin-bottom:20px;
}
.comment-list ul, ol.comment-list ol{
  list-style:none;
}
.comment-list li.comment{
  margin-top:20px;
}
.comment-list .comment-content h1,.comment-list .comment-content h2,.comment-list .comment-content h3,.comment-list .comment-content h4,.comment-list .comment-content h5,.comment-list .comment-content h6{
  margin-top:15px;
}
.blog-post-repeat{ 
  border-bottom:1px solid #cccccc;
  margin-bottom:40px;
}
/*video*/
.entry-video iframe {
  width: 100%;
}

/* Responsive Media */
/*===================*/
@media screen and (max-width: 1500px) {
  #header .m-btn {padding-right: 1%;}
}

@media screen and (max-width: 1299px){
  #header .logobx_m {width: 20%;}
  #header .m-mnu { width: 55%;}
  #header .m-btn{width: 25%;}
  #slider .slider-content h2 { padding-left: 2px; margin: 0 0 10px 0; font-size: 60px;}
  #service-section .service-img img {height: 400px;}
}

@media screen and (max-width: 1199px){
  #header .contactusbtn a { padding: 8px 6px; font-size: 16px;}
  #header .phbtn a i { margin: 0 4px 0 0; }
  #header .phbtn a { font-size: 16px;}
  #slider .slider-content { width: 45%;}
  #slider .sliderbg-img { width: 55%; }  
}

@media screen and (min-width: 1000px) {
  .footersec td,.footersec th{
    padding: 5px;
  }
}

@media screen and (max-width: 1000px){
  .page-template-home-custom #header{position: relative;}
  .logobx svg{display: none;}
  #header .logobx_m { width: 26%; }
  #header .m-mnu {width: 38%;}
  #header .m-btn { width: 35%;}
  #header .bottom-head {background: none; top:0;}
  #header .top-head { padding: 10px 0pX ; }
  #header .m-mnu { order: 2;}
  .menubar .primary-navigation ul li a:focus,a.closebtn.responsive-menu:focus{
    outline: 1px solid #D88E2D;
    border-bottom: 1px solid #D88E2D;
  }
  .toggle-menu {
    display: none;
    cursor: pointer;
    text-align: right;
  }
  .toggle-menu i {
    font-size: 25px;
    color: #D88E2D;
    background: #000;
    padding: 8px 10px;
    border-radius: 3px;
  }
  .toggle-menu button {
    background: transparent;
    border: none;
    margin: 0px 0;
  }
  .sidebar {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 9999999;
    top: 2em;
    right: 0;
    background-color: #101010;
    overflow-x: hidden;
    visibility: hidden;
    padding-top: 60px;
    box-shadow: -3px 0px 10px 0px #000;
  }
  body.mobilemenu-open .sidebar{
    visibility: visible;
    width: 250px;
    transition: 0.5s;
  }
  .sidebar .closebtn {
    position: absolute;
    top: 10px;
    right: 0px;
    font-size: 30px;
    display: block;
    color: #ffffff;
    border:none;
    background: transparent;
  }
  .sidebar #primary-site-navigation {   width: 100%;}
  .lt-breadcrumbs {
    margin-left: 0;
  }

  .home header.banner {top: 0em;}
  .header-box:before{display: none;}
  #header {position: relative; text-align: center;}
  #header .menu-section {  padding-top: 0;}
  .header-box{background: none;}
  
.toggle-menu {
    display: block;
    position: relative;
}
  .primary-navigation ul ul li,.primary-navigation li, .primary-navigation ul li ul,.primary-navigation ul li ul ul{
    display: block !important;
  }
  .primary-navigation ul ul {
    display: block !important;
    height: auto !important;
    opacity: 1 !important;
  }
  .menubar .primary-navigation ul li{
    border-top:1px #303030 solid; 
    display:block;
  }
  .sf-arrows .sf-with-ul:after, .sf-arrows ul .sf-with-ul:after {
    top: 10px;
    right: 12px;
  }
  .primary-navigation .current_page_item a {
    color: #fff;
  }
  .primary-navigation ul li a{
    padding: 10px;
    display:block;
    color:#ffffff;
    border:none;
  }
  .sf-arrows .sf-with-ul:after {
    color:#ffffff;
  }
  .primary-navigation ul li ul li a:before{
    content:"\00BB \00a0";
  }
  .primary-navigation ul li ul li a{
    padding-left:20px !important;
  }
  .primary-navigation ul li ul li ul li a{
    padding-left:30px !important;
  }  
  .primary-navigation ul li ul, .primary-navigation ul li ul ul {
    display: block !important;
    opacity: 1 !important;
  }
  .primary-navigation ul ul{
    position: static;
    width: 100%;
    border:none;
  }
  .primary-navigation li{
    padding: 0;
  }
  #menu-sidebar {
    display: inline;
  }
  .primary-navigation ul ul a{
    color:#fff;
    background: none;
  }
  .primary-navigation ul ul a:hover{
    background: none;
    color: #D88E2D;
  }
#slider{padding: 0;}
  /*#slider .sliderbg-img img {height: 460px;}
  #slider .slider-content { position: absolute; top: 20%;}*/
}

@media screen and (max-width: 1024px) and (min-width: 1000px){
  .entry-content .alignwide {
    margin-left: -20px;
    margin-right: -20px;
  }
  .woocommerce a.button.yith-wcqv-button, a.added_to_cart.wc-forward {
    margin-top: 8px !important;
    margin-bottom: 0;
  }

  .inner-head {
    padding: 16% 0 5%;
  }
}

@media screen and (max-width:991px){
  #header .logo {margin: 0 0 1em 0em;}
  #header .top-head { padding: 10px 0pX 4px;}
  #slider{padding: 1em 0;}
  #slider .slider-content {width: 45%; padding: 0 12px; }
  #slider .sliderbg-img { width: 55%;margin: 1px 0 0 0;}
  #slider .sliderbg-img img{height: auto;border-radius: 30px;}
  #slider svg,#slider .s-oly,#slider .left_bm img,
  #slider .lefttleft img,#slider .sm_image img,#slider .righttop img,#slider .lefttop img,
  #slider .left_lt img,#slider .rightimg img{display: none;}
  #slider .slider-content h2 { font-size: 40px;}
  #slider .slider-content p{line-height: 1.4;font-size: 16px;margin: 0px 0 12px 0}
  #slider .slider-content .read-btn a {padding: 8px 16px; font-size: 16px;}
  #slider .carousel-control-next, 
  #slider .carousel-control-prev{display: none;}
  #aboutus-section { padding: 1em 0 2em 0;}
  #aboutus-section .service-head{width: 100%;}
  #aboutus-section .service-head { margin-bottom: 1em;}
  #aboutus-section .imgbx{width: 100%;}
  #aboutus-section .imgbx .image img {  margin-bottom: 10px;}
  #aboutus-section .imgbx .ima2{display: none;}
  #aboutus-section .about-area-bx { padding: 1px 8px 0 20px;}
  #aboutus-section .abt-rbx {padding: 30px 16px 12px 20px;}
  #aboutus-section .about-btn a {font-size: 16px;}
  #service-section { padding: 1em 0 ; }
  #service-section .service-head { margin: 0 0 2em 0em;}
  #service-section .bttn a { font-size: 16px; }
}

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

  #header .phbtn {
    padding: 0px 3px 1px 5px;
  }

}
@media screen and (max-width: 768px) and (min-width: 720px){
  .entry-content .alignwide {
    margin-left: -15px;
    margin-right: -15px;
  }
  .woocommerce ul.products[class*=columns-] li.product,.woocommerce-page ul.products[class*=columns-] li.product{
    width: 48% !important;
  }
  .woocommerce ul.products.columns-4 {
    display: block;
  }
  .footersec td,.footersec th, #sidebar td,#sidebar th, span.meta-nav{
    padding: 0px;
  }
  #sidebar form.search-form label{
    float: none;
  }
  #sidebar input[type="submit"], #sidebar form.search-form label{
    width: 100%!important;
  }
 
  .widget figure.gallery-item {
    width: 46%;
  }
  .widget figure.gallery-item:nth-child(3n) {
    margin-right: 12px;
  }
  .widget figure.gallery-item:nth-child(2n) {
    margin-right: 0;
  }

  .menu-section {
    position: static;
    margin: 0;
  }
}

@media screen and (max-width:720px) {
  .entry-content .alignwide {
    margin-left: 5px;
    margin-right: 5px;
  }
  ol.children {
    margin: 0 !important;
  }
  ol.children img {
    width: 30px;
    border: solid 1px;
  }
  .main-content #comments ol li {
    padding: 10% 0 0 2% !important;
  }
  #sidebar td{
    padding: 6px;
  }
  span.meta-nav{
    padding: 0px;
  }
  .singlebox{
    margin: 0 10px;
  }
  .pagination{
    float:none;
  }
  .home .inner-service{
    margin: 20px 0 0 0;
    min-height: auto;
  }
  .woocommerce ul.products[class*=columns-] li.product,.woocommerce-page ul.products[class*=columns-] li.product{
    width: 100% !important;
    float: none !important;
  }
  .page-template-home-custom #header:after, 
  .single #header:after, .page-template-default #header:after {
    display: none;
  }
  .menu-section {
    position: static;
    margin: 0;
  }
}

@media screen and (max-width: 767px) {
  #header .logobx_m { width: 30%; }
  #header .m-btn {  width: 45%;}
  #header .m-mnu {width: 25%;}
  .toggle-menu {right: 1em;}
  #header .phbox {text-align: center;}
  #header .top-head { padding: 5px 5px 5px 5px; margin-left: -12px; }
  #slider .sliderbg-img { width: 100%; margin: 1px 0 0 0;order:1; }
  #slider .slider-content { width: 100%; padding: 0 10px; order: 2;}
  /*#aboutus-section .yearofex {display: block;}*/
  #service-section .service-head p{width: 100%; font-size: 16px;}
  #service-section .service-head p:after{display: none;}
  #service-section .service-img img { height: 300px;}
  #service-section .service-content { padding: 12px 8px 12px 8px;}
  #service-section .service-content .title { font-size: 20px;}
  #service-section .count { top: 16px;left: 16px; font-size: 28px;}
}
@media screen and (max-width: 600px) {
 
}
@media screen and (max-width: 575px){
#header .logobx_m {width: 32%;}
#header .m-mnu { width: 18%; }
#header .m-btn { width: 50%;}
#header .socialicons {margin: 0 0 6px 0; text-align: center;}
#slider .slider-content h2 { font-size: 30px;}
#slider .slider-content p { margin: 0px 0 6px 0; }
#slider .slider-content .read-btn a { padding: 4px 10px;}

#aboutus-section .service-head h4 {  font-size: 26px;}
#aboutus-section .imgbx .image img {  width: 100%;height:100%;}
#aboutus-section .about-area-bx { padding: 1px 8px 0 2px; }
#aboutus-section .abt-rbx { padding: 16px 8px 6px 8px; }
#aboutus-section .description {font-size: 16px; line-height: 28px;}
#aboutus-section .lists p { font-size: 16px; margin: 10px 0;}
#service-section .heading-brd1::before {display: none;}
#service-section .service-head h4 {font-size: 26px;}
#service-section .service-content p {font-size: 16px;line-height: 1.5;}
}

@media screen and (max-width: 475px){
/*#aboutus-section .yearofex{width: 100%;margin: 0 0 10px 0 ;}*/
}

@media screen and (max-width: 424px){
  #header .logobx_m {  width: 100%;}
  #header .m-mnu { width: 25%; }
  #header .m-btn { width: 75%;}
}
@media screen and (max-width: 375px) {
/*#slider .slider-content h2 {  font-size: 22px;}*/
/*#aboutus-section .box .textbx { padding: 0 5px 10px 20px;}*/
}


@import "bourbon";
@import "neat";

// variables
$facebook: #3b5998;
$google: #dd4b39;
$light-blue: #58C1EF;
$medium-blue: #28adfd;
$dark-blue: #0277BD;
$sm-screen-max: 767px;
$md-screen: 768px;
$md-screen-max: 1199px;
$lg-screen: 1200px;
$max-page-width: 1200px;
$max-screen: new-breakpoint(min-width $max-page-width);
$med-screen-up: new-breakpoint(min-width $md-screen);
$lg-screen-up: new-breakpoint(min-width $lg-screen);

html,
body {
	font-family: 'Open Sans', sans-serif;
	background-color: #f3f3f3;
}

* { box-sizing: border-box; }

h1 {
	@include margin(20px null null null);
	text-align: center;
}

.ba-card {
	@include outer-container(90%);
	@include padding(10px);
	@include margin(20px null null null);
	/*-webkit-box-shadow: 0px 7px 43px -6px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 7px 43px -6px rgba(0,0,0,0.75);
	box-shadow: 0px 7px 43px -6px rgba(0,0,0,0.75);*/
  border: 1px solid #ddd;
  border-radius: 11px;
  padding: 10px;

	img {
		width: 100%;
		height: auto;
	}
	
	@include media($med-screen-up) {
		@include outer-container(800px);
	}
}

.advertising {
	@include outer-container(70%);
	@include margin(30px null);
	font-weight: 300;
	line-height: 1.5;
	font-size: 14px;
	text-align: center;
	color: #999;
	
	@include media($lg-screen-up) {
		@include outer-container(50%);
	}
	
	a {
		text-decoration: none;
		
		&:link,
		&:visited {
			color: #666;
		}
		
		&:hover,
		&:focus {
			border-bottom: 1px solid #666;
		}
	}
}


/* // ************************
// TWENTY TWENTY PLUGIN
// ************************ */
.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after, .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
  content: " ";
  display: block;
  background: white;
  position: absolute;
  z-index: 30;
  -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
  -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
  box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); }

.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after {
  width: 6px;
  height: 9999px;
  left: 50%;
  margin-left: -1.5px; }

.twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
  width: 9999px;
  height: 3px;
  top: 50%;
  margin-top: -1.5px; }

.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%; }

.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  transition-duration: 0.5s; }

.twentytwenty-before-label, .twentytwenty-after-label {
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  transition-property: opacity; }

.twentytwenty-before-label:before, .twentytwenty-after-label:before {
  color: white;
  font-size: 13px;
  letter-spacing: 0.1em; }

.twentytwenty-before-label:before, .twentytwenty-after-label:before {
  position: absolute;
  background: rgba(255, 255, 255, 0.2);
  line-height: 32px;
  padding: 0px 24px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 50px; }

.twentytwenty-horizontal .twentytwenty-before-label:before, .twentytwenty-horizontal .twentytwenty-after-label:before {
  top: 50%;
  margin-top: -19px; }

.twentytwenty-vertical .twentytwenty-before-label:before, .twentytwenty-vertical .twentytwenty-after-label:before {
  left: 50%;
  margin-left: -45px;
  text-align: center;
  width: 90px; }

.twentytwenty-left-arrow, .twentytwenty-right-arrow, .twentytwenty-up-arrow, .twentytwenty-down-arrow {
  width: 0;
  height: 0;
  border: 6px inset transparent;
  position: absolute; }

.twentytwenty-left-arrow, .twentytwenty-right-arrow {
  top: 50%;
  margin-top: -6px; }

.twentytwenty-up-arrow, .twentytwenty-down-arrow {
  left: 50%;
  margin-left: -6px; }

.twentytwenty-container {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  z-index: 0;
  overflow: hidden;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none; }
  .twentytwenty-container img {
    max-width: 100%;
    position: absolute;
    top: 0;
    display: block; }
  .twentytwenty-container.active .twentytwenty-overlay, .twentytwenty-container.active :hover.twentytwenty-overlay {
    background: rgba(0, 0, 0, 0); }
    .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label,
    .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label, .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-before-label,
    .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-after-label {
      opacity: 0; }
  .twentytwenty-container * {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box; }

.twentytwenty-before-label {
  opacity: 1; 
}
  .twentytwenty-before-label:before {
    content: "Before";
    background-color: #000;
    opacity: 0.7;
    border-radius: 50px;
  }

.twentytwenty-after-label {
  opacity: 1; }
  .twentytwenty-after-label:before {
    content: "After";
    background-color: #000;
    opacity: 0.7;
    border-radius: 50px;
 }

.twentytwenty-horizontal .twentytwenty-before-label:before {
  left: 10px; }

.twentytwenty-horizontal .twentytwenty-after-label:before {
  right: 10px; }

.twentytwenty-vertical .twentytwenty-before-label:before {
  top: 10px; }

.twentytwenty-vertical .twentytwenty-after-label:before {
  bottom: 10px; }

.twentytwenty-overlay {
  -webkit-transition-property: background;
  -moz-transition-property: background;
  transition-property: background;
  background: rgba(0, 0, 0, 0);
  z-index: 25; }
  /* .twentytwenty-overlay:hover {
    background: rgba(0, 0, 0, 0.5); } */
    .twentytwenty-overlay:hover .twentytwenty-after-label {
      opacity: 1; }
    .twentytwenty-overlay:hover .twentytwenty-before-label {
      opacity: 1; }

.twentytwenty-before {
  z-index: 20; }

.twentytwenty-after {
  z-index: 10; }

.twentytwenty-handle {
  height: 38px;
  width: 38px;
	background-color: $medium-blue;
  position: absolute;
  left: 50%;
  background: #fff;
  top: 50%;
  margin-left: -22px;
  margin-top: -22px;
  border: 3px solid white;
  -webkit-border-radius: 1000px;
  -moz-border-radius: 1000px;
  border-radius: 1000px;
  -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
  -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
  box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
  z-index: 40;
  cursor: pointer; }

.twentytwenty-horizontal .twentytwenty-handle:before {
  bottom: 50%;
  margin-bottom: 22px;
  -webkit-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  -moz-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
.twentytwenty-horizontal .twentytwenty-handle:after {
  top: 50%;
  margin-top: 22px;
  -webkit-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  -moz-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }

.twentytwenty-vertical .twentytwenty-handle:before {
  left: 50%;
  margin-left: 22px;
  -webkit-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  -moz-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
.twentytwenty-vertical .twentytwenty-handle:after {
  right: 50%;
  margin-right: 22px;
  -webkit-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  -moz-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }

.twentytwenty-left-arrow {
  border-right: 6px solid #b7b3b3;
  left: 50%;
  margin-left: -17px; }

.twentytwenty-right-arrow {
  border-left: 6px solid #b7b3b3;
  right: 50%;
  margin-right: -17px; }

.twentytwenty-up-arrow {
  border-bottom: 6px solid white;
  top: 50%;
  margin-top: -17px; }

.twentytwenty-down-arrow {
  border-top: 6px solid white;
  bottom: 50%;
  margin-bottom: -17px; }