@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Titillium+Web:400,600,700');
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed);
@import url(https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap);
html,body{
    margin:0;
    padding:0;
    height:100%;
    width:100%;
    font-family:'Red Hat Display',Tahoma,Arial,sans-serif;
    font-size:12px;
    color:#000;
    letter-spacing:0.5px;
    font-weight:600;
    background-color:#FFF;
    transition:all ease-out 1s;
}
a
{
text-decoration:none;
}

#bodyPage .overlayloading{
    z-index:9999;
    position:fixed;
    top:0;
    left:0;
    -moz-opacity:.5;
    opacity:.50;
    filter:alpha(opacity=50);
    background-color:#FFF;
    width:100%;
    height:100%;
    background:#fafafa url('../images/ajax-loader.gif') no-repeat center 250px;

}

.LinkMenuOpen {
      transition: all 0.3s ease-in-out;
      font-size:11px;
}

.LinkMenuOpen:hover {
      transition: all 0.3s ease-in-out;
      padding-left:10px;
      font-size:11px;
      font-weight:bold;
}

select {
padding:8px;
border:solid 1px #333;
outline:none;
border-radius:3px;
font-size:14px;
  letter-spacing:2px;
 font-family:'Red Hat Display',Tahoma,Arial,sans-serif;
}

    select:focus {
    
    }

input {
padding:8px;
outline:none;
border-radius:3px;
font-size:14px;
 letter-spacing:2px;
 font-family:'Red Hat Display',Tahoma,Arial,sans-serif;
 border:solid 1px #333;
}

input:focus {
border:solid 1px #e28a60;


}

.Scale{
    transition:transform ease 0.3s;
    transform : scale(1.1,1.1);
    -webkit-transform : scale(1.1,1.1);
    -moz-transform: scale(1.1,1.1);
    

}

.ScaleOff{
    transition:transform ease 0.3s;
    transform : scale(1,1);
    -webkit-transform : scale(1,1);
    -moz-transform: scale(1,1);
    

}

textarea {
padding:8px;
border:solid 1px #ccc;
outline:none;
font-family: 'Red Hat Display',Tahoma,Arial,sans-serif;
letter-spacing:2px;
 
}

textarea:focus {
border:none;
border-bottom:solid 2px #cfbe68;
}

.dissolve {
            opacity:1;
            text-decoration:none;
        }

        .dissolve:hover {
            transition:opacity ease 0.3s;
            opacity:0.2;
        }

        .dissolveRevert {
            opacity:0.2;
            text-decoration:none;
             transition:opacity ease-in-out 0.3s;
        }

        .dissolveRevert:hover {
            transition:opacity ease-in-out 0.3s;
            opacity:1;
        }

.iconMini::before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
margin-right:0px;
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 900;
font-size:12px;
}

.iconMiniBrand::before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
margin-right:5px;
font-family: 'Font Awesome 5 Brands';
font-style: normal;
font-weight: 900;
font-size:12px;
}

.icon::before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
margin-right:5px;
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 900;
}


.iconHome::before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
margin-right:5px;
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 900;
font-size:20px;
}

.iconShop::before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
margin-right:5px;
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 900;
font-size:22px;
}

.iconShop::before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
margin-right:5px;
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 900;
font-size:18px;
}


.iconMax::before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
margin-right:5px;
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 900;
font-size:35px;
}

.iconMaxBrand::before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
margin-right:5px;
font-family: 'Font Awesome 5 Brands';
font-style: normal;
font-weight: 900;
font-size:35px;
}

.iconShopBrand::before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
margin-right:5px;
font-family: 'Font Awesome 5 Brands';
font-style: normal;
font-size:22px;
}

.iconShopBrand::before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
margin-right:5px;
font-family: 'Font Awesome 5 Brands';
font-style: normal;
font-size:18px;
}


.iconImage::before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
margin-right:2px;
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 900;
font-size:18px;
}

.iconImageBig::before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
margin-right:2px;
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 900;
font-size:20px;
}


.iconTitle::before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
margin-right:10px;
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 900;
font-size:18px;
margin-left:10px;     
               
}

.iconBrand::before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-family: 'Font Awesome 5 Brands';
font-style: normal;
font-weight: normal;
}

.iconLogo::before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
margin-right:10px;
font-family: 'Font Awesome 5 Brands';
font-style: normal;
font-weight: normal;
font-size:32px;
}

.shopBtnPhone {
padding:10px 22px 10px 22px;
    background-color:#000;
    border:none;
    color:#fff;
    border-radius:2px;
    text-decoration:none;
    font-size:16px;
}

.shopBtn {
    padding:10px 22px 10px 22px;
    background-color:#333;
    border:none;
    color:#fff;
    border-radius:2px;
    text-decoration:none;
    font-size:14px;
}

.shopBtn:hover {
    transition:background-color ease 0.5s; 
    background-color:#333;
    color:#fff;
}

.shopBtnDel {
    padding:10px 22px 10px 22px;
    background-color:#e28a60;
    border:none;
    color:#fff;
    border-radius:2px;
    text-decoration:none;
    font-size:14px;
}

.shopBtnDel:hover {
    transition:background-color ease 0.5s; 
    background-color:#ff0000;
    color:#fff;
}

.LinkMenu {
    color:#333;
    font-size:14px;
}

.LinkMenu:hover {
   
}

.dot {
  height: 4px;
  width: 4px;
  background-color: #000;
  border-radius: 50%;
  display: inline-block;
  margin-top:-3px;
}

/* width */
::-webkit-scrollbar {
width: 6px;
margin-right:2px;
}

/* Track */
::-webkit-scrollbar-track {
background: #fff; 
opacity:0.3;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
background: #7e7e7e; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #333; 
}

.item {
    color:#000;
    font-size:14px;
    font-weight:normal;
    text-align:left;
    font-family:'Red Hat Display';
    position:relative;
}

.titleItem{
    margin-top:15px;
    color:#000;
    font-size:16px;
    font-weight:normal;
    padding-left:15px;
}

.PriceItem{
   margin-bottom:15px;
   color:#56ab84;
   font-size:16px;
   font-weight:normal;
   padding-left:15px;
}

   .MenuClass {
            background-color:transparent;
            color:#fff; 
            transition:all ease-in-out 0.25s;     
        }

        .MenuClassShift {
            background-color:#fff;
            color:#333; 
            transition:all ease-in-out 0.25s;       
        }
           /* -----
        SVG Icons - svgicons.sparkk.fr
        ----- */

                .svg-icon {
                    width: 2em;
                    height: 2em;
                }

                    .svg-icon path,
                    .svg-icon polygon,
                    .svg-icon rect {
                        fill: #000;
                    }

                    .svg-icon circle {
                        stroke: #000;
                        stroke-width: 1;
                    }

                .svg-icon2 {
                    width: 2em;
                    height: 2em;
                }

                    .svg-icon2 path,
                    .svg-icon2 polygon,
                    .svg-icon2 rect {
                        fill: #e09e1d;
                    }

                    .svg-icon2 circle {
                        stroke: #e09e1d;
                        stroke-width: 1;
                    }

                .svg-icon3 {
                    width: 0.9em;
                    height: 0.9em;
                }

                    .svg-icon3 path,
                    .svg-icon3 polygon,
                    .svg-icon3 rect {
                        fill: #e09e1d;
                    }

                    .svg-icon3 circle {
                        stroke: #e09e1d;
                        stroke-width: 1;
                    }

                    /* Dropdown Button */
.dropbtn {
 cursor:pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
   transition:all ease-in-out 0.1s;     
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: fixed;
  left:0px;
  background-color: #fff;
  width: 100%;
  z-index: 1;
  min-height:300px;
   transition:all ease-in-out 0.1s;  
   text-align:left;  
  border-bottom:solid 1px #ccc;
}

/* Links inside the dropdown */
.dropdown-content a {
  text-decoration: none;
  display: block;
   transition:all ease-in-out 0.1s;     
}



/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block; transition:all ease-in-out 0.1s;     }

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {font-weight:bold;     }



/*Side Cart*/

.sidenav {
  background-color: #fff;
  bottom: 0;
  /* display: none; */
  opacity: 0;
  position: fixed;
  left: calc(100% - 320px);
  top: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition: all 0.3s ease-in-out;
  width: 320px;
  z-index: -1;

}
.sidenav .sidenav--header {
  background-color: #f3f3f3;
  overflow: hidden;
  padding: 20px 0px;
  margin-top:0px;
  text-align:center;
}

.sidenav .sidenav--checkOut {
  background-color: #fff;
  overflow: hidden;
  padding: 20px 0px;
  margin-top:0px;
  text-align:center;
  bottom:0;
  position:absolute;
  width:100%;
}
.sidenav .sidenav--header h3 {
  margin: 0;
}

.sidenav cart {
  
}

.sidenav .close-sidenav {
  background-color: #d8d8d8;
  border-right: 1px solid #fff;
  color: #aaa;
  cursor: pointer;
  display: inline-block;
  margin-right: 0.5em;
  padding: 10px;
  transition: all 0.2s ease-in-out;
}
.sidenav .close-sidenav:hover {
  color: #444;
}
.sidenav .cart-item {
  padding: 10px;
}
.sidenav .cart-item--thumb {
  margin-right: 10px;
}
.sidenav .cart-item--description {
  display: inline-block;
  font-size: 16px;
  vertical-align: top;
}
.sidenav .cart-item--description h4 {
  font-size: 14px;
}
.sidenav .cart-item--description p {
  font-size: 12px;
}
.sidenav.active {
  /* display: block; */
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
  z-index: 10;
  box-shadow: -5px 0 30px 0 rgba(100, 100, 100, 0.2);
  padding: 0px 0px;
}
.sidenav.active .cart-item {
  font-size: 0;
  overflow: auto;
}
.sidenav.active .cart-item .cart-item--thumb {
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
}

.overlayLeft {
  background-color: transparent;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  visibility: hidden;
}
.overlayLeft.active {
  background-color: rgba(50, 50, 50, 0.5);
  bottom: 0;
  display: block;
  height: 100%;
  left: 0;
  opacity: 1;
  position: fixed;
  right: 0;
  top: 0;
  visibility: visible;
  z-index: 5;
}