/*

TemplateMo 559 Zay Shop

https://templatemo.com/tm-559-zay-shop

---------------------------------------------
Table of contents
------------------------------------------------
1. Typography
2. General
3. Nav
4. Hero Carousel
5. Accordion
6. Shop
7. Product
8. Carousel Hero
9. Carousel Brand
10. Services
11. Contact map
12. Footer
13. Small devices (landscape phones, 576px and up)
14. Medium devices (tablets, 768px and up)
15. Large devices (desktops, 992px and up)
16. Extra large devices (large desktops, 1200px and up)
--------------------------------------------- */








/* page filters */




/* ORGANOGRAM */

.spheresListLeft li{
  list-style-type: none;
}

.spheresListLeft button{
position: relative;
width: 100%;
}



.spheresListLeftCustom li{
  list-style-type: none;

}

.spheresListLeftCustom button{
/* color:white; */
position: relative;
width: 100%;


}






* {
margin: 0;
padding: 0;
}


.tree ul {
display: block;
white-space: nowrap;
padding-top: 15px;
position: relative;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;

}

.tree li {
vertical-align:top;
display: inline-block;
white-space: normal;
text-align: center;
list-style-type: none;
position: relative;
padding: 15px 0px 0px 6px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}


/*We will use ::before and ::after to draw the connectors*/

.tree li::before,
.tree li::after {
content: '';
position: absolute;
top: 0;
right: 50%;
border-top: 3px solid darkgray;
width: 70%;
height: 15px;
}


.tree li::after {
right: auto;
left: 50%;
border-left: 3px solid darkgray;
}


/*Remove left-right connectors from elements without any siblings*/

.tree li:only-child::after,
.tree li:only-child::before {
display: none;
}


/*Remove space from the top of single children*/

.tree li:only-child {
padding-top: 0px;
}


/*Remove left connector from first child and right connector from last child*/

ul.first li.first::before,
ul.first li.first::after {
border: 0 none;
}

.tree li:first-child::before,
.tree li:last-child::after {
border: 0 none;
}


/*Adding back the vertical connector to the last nodes*/

.tree li:last-child::before {
border-right: 3px solid darkgray;
border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
}

.tree li:first-child::after {
border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
}


/*Time to add downward connectors from parents*/

.tree ul ul::before {
content: '';
position: absolute;
top: 0;
left: 50%;
border-left: 3px solid darkgray;
width: 0;
height: 15px;
}

.tree li .box {
border: 3px solid darkgray;
justify-content: left;
padding: 10px 18px 10px 18px;
text-decoration: none;
background-color: white;
color: darkgray;
font-weight: bold;
font-family: arial, verdana, tahoma;
/* font-size: 14px; */
display: inline-block;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
transition: all .5s;
-webkit-transition: all .5s;
-moz-transition: all .5s;
}


/*Hover effects*/

.tree li .box:hover,
.tree li .box:hover+ul li .box {
background: #ccc;
color: #000;
border: 1px solid #94a0b4;
}


/*Connector styles on hover*/

.tree li .box:hover+ul li::after,
.tree li .box:hover+ul li::before,
.tree li .box:hover+ul::before,
.tree li .box:hover+ul ul::before,
.avatar {
border-color: #94a0b4;
}



.profilebutton {
  font-family: 'Roboto', sans-serif;

  width: 100px;
   /* border: 0px solid #004B84;
   background: red;
   padding: 3px 21px;
   -webkit-border-radius: 16px;
   -moz-border-radius: 16px;
   border-radius: 16px;
   color: #ffffff; */
   /* font-size: 12px; */
   /* font-family: Questrial;
   text-decoration: none;
   vertical-align: middle;
   letter-spacing: 2px; */
}

.profilebutton:hover span {
  font-family: 'Roboto', sans-serif;
  display:none
}

.profilebutton:hover:before {
  font-family: 'Roboto', sans-serif;
  content:"Profile";
}

.profilebutton:hover {
  background-color: pink; 
} 











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





/* Typography */
body, ul, li, p, a, label, input, div {
  font-family: 'Roboto', sans-serif;
  font-size: 18px !important;
  font-weight: 300 !important;
}
.h1 {
  font-family: 'Roboto', sans-serif;
  font-size: 48px !important;
  font-weight: 200 !important;
}
.h2 {
  font-family: 'Roboto', sans-serif;
  font-size: 30px !important;
  font-weight: 300;
}
.h3 {
  font-family: 'Roboto', sans-serif;
  font-size: 22px !important;
}
/* General */
.logo { font-weight: 500 !important;}
.text-warning {  color: #ede861 !important;}
.text-muted { color: #bcbcbc !important;}
.text-success { color: #00564a !important ;}
.text-light { color: #cfd6e1 !important;}
.bg-dark { background-color: #212934 !important;}
.bg-light { background-color: #F2F7F7 !important;}
.bg-black { background-color: #1d242d !important;}
.bg-success { background-color: #00564a  !important;} /* #59ab6e  */
.btn-success {
  background-color: #00564a  !important;
  border-color: #00564a  !important;
}
.pagination .page-link:hover {color: #000;}
.pagination .page-link:hover, .pagination .page-link.active {
  background-color: #00564a;
  color: #fff;
}
/* Nav */
#templatemo_nav_top { min-height: 40px;}
#templatemo_nav_top * { font-size: .9em !important;}
#templatemo_main_nav a { color: #212934;}
#templatemo_main_nav a:hover { color: #00564a;}
#templatemo_main_nav .navbar .nav-icon { margin-right: 20px;}

/* Hero Carousel */
/* #template-mo-zay-hero-carousel {
  background-image: url('/static/assets/img/ranger-march-scaled.jpg') !important;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center ;


} */

/* {% static 'assets/img/SAWC-class.jpg' } */
/* Accordion */
.templatemo-accordion a { color: #000;}
.templatemo-accordion a:hover { color: #333d4a;}
/* Shop */
.shop-top-menu a:hover { color: #00564a !important;}
/* Product */
.product-wap { box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.10);}
.product-wap .product-color-dot.color-dot-red { background:#f71515;}
.product-wap .product-color-dot.color-dot-blue { background:#6db4fe;}
.product-wap .product-color-dot.color-dot-black { background:#000000;}
.product-wap .product-color-dot.color-dot-light { background:#e0e0e0;}
.product-wap .product-color-dot.color-dot-green { background:#00564a;}
.card.product-wap .card .product-overlay {
  background: rgba(0,0,0,.2);
  visibility: hidden;
  opacity: 0;
  transition: .3s;
}
.card.product-wap:hover .card .product-overlay {
  visibility: visible;
  opacity: 1;
}
.card.product-wap a { color: #000;}
#carousel-related-product .slick-slide:focus { outline: none !important;}
#carousel-related-product .slick-dots li button:before {
  font-size: 15px;
  margin-top: 20px;
}
/* Brand */
.brand-img {
  filter: grayscale(100%);
  opacity: 0.5;
  transition: .5s;
}
.brand-img:hover {
  filter: grayscale(0%);
  opacity: 1;
}
/* Carousel Hero */
#template-mo-zay-hero-carousel .carousel-indicators li {
  margin-top: -50px;
  background-color: #00564a;
}
#template-mo-zay-hero-carousel .carousel-control-next i,
#template-mo-zay-hero-carousel .carousel-control-prev i {
  color: white !important;
  font-size: 2.8em !important;
}

.caro{
  background: #00564a;
  opacity: 0.85;
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 50px;
  padding-bottom: 50px;

}
.caro a {
  color: darkgray
}
.caro a:hover{
  color: black
}


#template-mo-zay-hero-carousel .h1,
#template-mo-zay-hero-carousel .h2,
#template-mo-zay-hero-carousel .h3,
#template-mo-zay-hero-carousel .h4,
#template-mo-zay-hero-carousel .h6 {
  color: white !important;
  opacity: 1;
}




/* Carousel Brand */
.tempaltemo-carousel .h1 {
  font-size: .5em !important;
  color: #000 !important;
}
/* page bar */
.page-icon-wap {
  transition: .3s;
  background-color: #fff;
  }

.page-icon-wap:hover, .page-icon-wap:hover i {color:#fff ;}
.page-icon-wap:hover {background: #00564a ;}



/* Services */
.services-icon-wap {transition: .3s;}
.services-icon-wap:hover, .services-icon-wap:hover i {color: #fff;}
.services-icon-wap:hover {background: #00564a;}
/* Contact map */
.leaflet-control a, .leaflet-control { font-size: 10px !important;}
.form-control { border: 1px solid #e8e8e8;}
/* Footer */
#tempaltemo_footer a { color: #dcdde1;}
#tempaltemo_footer a:hover { color: #00564a;}
#tempaltemo_footer ul.footer-link-list li { padding-top: 10px;}
#tempaltemo_footer ul.footer-icons li {
  width: 2.6em;
  height: 2.6em;
  line-height: 2.6em;
}
#tempaltemo_footer ul.footer-icons li:hover {
  background-color: #cfd6e1;
  transition: .5s;
}
#tempaltemo_footer ul.footer-icons li:hover i {
  color: #212934;
  transition: .5s;
}
#tempaltemo_footer .border-light { border-color: #2d343f !important;}
/*
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
*/
/* Small devices (landscape phones, 576px and up)*/
.product-wap .h3, .product-wap li, .product-wap i, .product-wap p {
  font-size: 12px !important;
}
.product-wap .product-color-dot {
  width: 6px;
  height: 6px;
}

@media (min-width: 576px) {
  .tempaltemo-carousel .h1 { font-size: 1em !important;}
}

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  #templatemo_main_nav .navbar-nav {max-width: 450px;}
 }

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  #templatemo_main_nav .navbar-nav {max-width: 550px;}
  #template-mo-zay-hero-carousel .carousel-item {min-height: 30rem !important;}
  .product-wap .h3, .product-wap li, .product-wap i, .product-wap p {font-size: 18px !important;}
  .product-wap .product-color-dot {
    width: 12px;
    height: 12px;
  }
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {}