/*
Theme Name: My template-child Child Theme
Theme URI: 
Version: 1.0
Description: 
Author: Rane digital
Author URI: 
Template: Divi
*/

/* New CSS */

/* ==================== */
/* Icons
/* ==================== */

.rane-icon {
	display: inline-block;
	position: relative;
}

.rane-icon::before {
	content: "";
	font-family: "ETmodules";
	color: #c659a8;
}

.rane-icon--cart::before {
	content: "\e07a" ;
}

.rane-icon--menu::before {
	content: "\61";
}


.section-main-header {
	padding: 20px 10px;	
}

.main-header {
	display: flex;	
	align-items: center;
}

.site-header-logo {	
	width: 05%;
}

.site-header-logo img {
	width: 50%;
}

.site-header-logo__h1 {
	display: inline !important;
	line-height: 1 !important;
	padding: 0 !important;
	margin: 0 !important;
}

.site-header-cart {
	padding: 0 10px;
	width: 35%;
	text-align: right;
	font-size: 24px;
}

.site-header-hamburger {
	padding: 0 10px 0 10px;
	width: 15%;
	text-align: right;
	font-size: 32px;
}

.site-header-menu,
.site-header-contact {
	display: none;
}

.header-contact {
	position: relative;	
    padding-left: 24px;
}

.header-contact::before {
	content: "\e090";
    font-family: "ETmodules";
    color: #c659a8;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.header-contact__pre {
	font-size: 10px;
	text-transform: uppercase;
	line-height: 1;
}

.header-contact__telno {
	line-height: 1;
}

.header-contact__telno a {
	color: #333 !important;
	font-size: 12px;
}

.cart-details {
    display: none;
    padding-left: 24px;
    position: relative;
    text-align: left;
    cursor: pointer;
}

.cart-details::before {
    content: "\e07a";
    font-family: "ETmodules";
    color: #c659a8;
    font-size: 16px;
    position: absolute;
    left: 0;
    top:  50%;
    transform: translateY(-50%);
}


.cart-details__item-count,
.cart-details__divider,
.cart-details__cart-cost {
    font-size: 12px;
    color: #333;
}

@media (min-width: 768px){

	.site-header-menu {
		display: block;
        padding-right: 20px;
        padding-left: 20px;
        padding-top: 2%;
	}

    .site-header-menu .dgwt-wcas-search-wrapp {
        max-width: 460px;
        margin-left: 0;
    }


	.site-header-logo,
	.site-header-menu,
	.site-header-cart,
	.site-header-hamburger {
		/*border: 1px solid black;*/
	}

	.site-header-logo {
		width: 20%;
	}

	.site-header-menu {
		width:  60%;
	}

	.site-header-cart {
		width: 20%;
	}

	.site-header-hamburger {
		width: 10%;
	}
}

@media (min-width: 1182px){

   .cart-details { 
       display: inline-block;
   }
	
    .site-header-hamburger {
		display: none;
	}

	.site-header-contact {
		display: block;
        width: 15%;
	}

    .site-header-cart {
        width: 16%;
    }

    .site-header-cart .rane-icon--cart {
        display: none;
    }

   	.site-header-menu {
		width: 100%;
		text-align: center;
	}
}

@media (min-width: 1280px){

	.site-header-logo {
		width: 20%;
	}

	.site-header-menu {
		width: 90%;
		text-align: center;
	}


	.site-header-cart {
		width: 20%;
	}

    .header-contact__pre {
        font-size: 12px;
        line-height: 1.5;
    }

    .cart-details__item-count, 
    .cart-details__divider, 
    .cart-details__cart-cost,
    .header-contact__telno a {
        font-size: 14px;
    }
}

@media (max-width:  1181px){

	.site-header-logo {	
		width: 25%!important;
		text-align: center;
	}

.site-header-menu{
	display: none;
}

	.site-header-cart {
		padding-left: 55%;
		width: 10%;
	}

	.site-header-hamburger {
		width: 10%;
	}

}

/* ==================== */
/* Slideout
/* ==================== */

.slideout-nav {
	position: fixed;
	left: -250px;
	top: 0;
	width: 250px;
	height: 100%;
	background: #666;
	z-index: 9999;
	transition: 0.2s;
	overflow: hidden;
	overflow-y: scroll;
}

body.admin-bar .slideout-nav {
	top: 46px;
}

.slideout-nav--out {
  left: 0;
}

.slideout-nav__menu,
.slideout-nav .menu {
  padding: 0 !important;
  margin: 0 !important;
  list-style-type: none !important;
}

.slideout-nav .dropdown-item-has-child {
  position: relative;
}

.slideout-nav .dropdown-item-has-child::after {
  content: "\43";
  font-family: "ETModules";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.slideout-nav .dropdown-item-has-child--open::after {
  content: "\42";
}

.slideout-nav a {
  color: white;
  display: block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  padding: 8px 8px 8px 16px;
}

.slideout-nav .dropdown-menu {
  list-style-type: none;
  padding: 0 !important;
  margin: 0 !important;
  height: 0;
  overflow: hidden;
}

.slideout-nav .dropdown-menu--toggle-on {
  height: auto;
  overflow: auto;
}

.slideout-nav .dropdown-menu a {
  background: #353d42;
}

.slideout-nav .close-slideout {
  text-align: right;
  font-size: 24px;
}

.slideout-nav .close-slideout::after {
  content: "\51";
  font-family: "ETModules";
}

.slideout-nav li.menu-item-has-children a {
  border: 2px solid red;
}

.nav-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.75);
	z-index: 999;
	transition: 0.2s;
}


.et-menu{
	width: 100%;
}

.et-menu .menu-item{
	font-size:  14px;
	padding-top: 10%;
	padding-right: 5%;
}

.et-menu .menu-item a{
	color: #666;
}

.et-menu .menu-item :hover{
	font-size:  14px;
	padding-top: 10%;
	padding-bottom: 20px;
	border-bottom: 2px solid #f9e62a;
	color: #333;
}

.et-menu li{
	display: inline;
}

.os_home__category{
	padding: 10% 10%;
	background-color: rgba(249, 230, 42, 0.8);	
	text-align: center;
}

.os_home__category a{
	color: #666;
}

.os_home__banner{
	padding: 5%;
	background-color: rgba(255, 255, 255, 0.8);	
	text-align: left;
	float: left;
}

.os_home__banner a{
	color: #666;
}

/* ==================== */
/* homepage steps
/* ==================== */


.home_steps li {
  width: 92px;
  height: 92px;
  text-align: center;
  line-height: 2.2em;
  border-radius: 50%;
  background: #F9E62A;
  margin: 0 4.5em;
  display: inline-block;
  color: black;
  position: relative;
  border: 1px solid black;
  font-size: 40px;
}

.home_steps li::before{
  content: '';
  position: absolute;
  top: 1em;
  left: -10em;
  width: 10em;
  height: .2em;
  background: #F9E62A;
  z-index: -1;
}

.home_steps li:first-child::before {
  display: none;
}

.home_steps_wrapper{
	text-align:  center;
}

@media (min-width: 1470px) and (max-width:  1769px){

	.home_steps li {
	  width: 72px;
	  height: 72px;
	  text-align: center;
	  line-height: 2.8em;
	  border-radius: 50%;
	  background: #F9E62A;
	  margin: 0 13%;
	  display: inline-block;
	  color: black;
	  position: relative;
	  border: 1px solid black;
	  font-size: 24px;
	}

	.home_steps li::before{
	  content: '';
	  position: absolute;
	  top: 1.4em;
	  left: -540%;
	  width: 540%;
	  height: .2em;
	  background: #F9E62A;
	  z-index: -1;
	}

	.home_steps li:first-child::before {
	  display: none;
	}

	.home_steps_wrapper{
		text-align:  center;
	}

}

@media (min-width: 1170px) and (max-width:  1469px){

	.home_steps li {
	  width: 62px;
	  height: 62px;
	  text-align: center;
	  line-height: 2.5em;
	  border-radius: 50%;
	  background: #F9E62A;
	  margin: 0 13%;
	  display: inline-block;
	  color: black;
	  position: relative;
	  border: 1px solid black;
	  font-size: 24px;
	}

	.home_steps li::before{
	  content: '';
	  position: absolute;
	  top: 1.2em;
	  left: -510%;
	  width: 510%;
	  height: .2em;
	  background: #F9E62A;
	  z-index: -1;
	}

	.home_steps li:first-child::before {
	  display: none;
	}

	.home_steps_wrapper{
		text-align:  center;
	}

}

@media (min-width: 981px) and (max-width:  1169px){

	.home_steps li {
	  width: 62px;
	  height: 62px;
	  text-align: center;
	  line-height: 2.5em;
	  border-radius: 50%;
	  background: #F9E62A;
	  margin: 0 12%;
	  display: inline-block;
	  color: black;
	  position: relative;
	  border: 1px solid black;
	  font-size: 24px;
	}

	.home_steps li::before{
	  content: '';
	  position: absolute;
	  top: 1.2em;
	  left: -380%;
	  width: 380%;
	  height: .2em;
	  background: #F9E62A;
	  z-index: -1;
	}

	.home_steps li:first-child::before {
	  display: none;
	}

	.home_steps_wrapper{
		text-align:  center;
	}

}

.os_home__banner_btn{
	padding:  15px 50px;
	background-color: #F9E62A;
	color:  #333;
	border: none;
	border-radius: 50px;
}


.footer__menu{

	list-style-type: none !important;
}

.footer__menu a{
	color:  #333;
}

.et-l--footer ul{
	padding-left: 0!important;
}


/* ==================== */
/* Woo installation fee
/* ==================== */

.prd-installation-fee {	
	padding-top: 16px;
	margin-bottom: 32px;
	border-top: 1px solid #f2f2f2;
}

.prd-installation-fee__title {
	font-size: 16px !important;
	font-weight: bold !important;
}

.woocommerce-info{
	background: #c659a8 !important;
}

.woocommerce button.button.alt, .woocommerce-page button.button.alt, .woocommerce button.button, .woocommerce-page button.button, .woocommerce a.button.alt, .woocommerce-page a.button.alt, .woocommerce a.button.alt, .woocommerce-page a.button.alt, .woocommerce a.button, .woocommerce-page a.button {
    font-size: 20px;
    font-weight: 500;
    padding: 10px 40px;
    line-height: 1.7em !important;
    background: #F9E62A !important;
    position: relative;
    border-width: 0px!important;
    border-radius: 50px;
    color: #000000 !important;
}

.woocommerce a.button.alt, .woocommerce-page a.button.alt {
    border-color: #2EA3F2;
}

.woocommerce .woocommerce-message {
    background: #666666;
}