@font-face {
  font-family: 'SabbathBlack-Heavy';
  font-style: normal;
  font-weight: 800;
  src: url('../../fonts/SabbathBlack/SabbathBlack-Heavy.otf')
}

@font-face {
  font-family: 'Centaur-Regular';
  font-style: normal;
  src: url('../../fonts/Centaur/Centaur-Regular.otf')
}

@font-face {
  font-family: 'Centaur-Bold';
  font-style: normal;
  src: url('../../fonts/Centaur/Centaur-Bold.otf')
}
@font-face {
  font-family: 'Centaur-DemiBold';
  font-style: normal;
  src: url('../../fonts/Centaur/Centaur-DemiBold.otf')
}
@font-face {
  font-family: 'Centaur-Light';
  font-style: normal;
  src: url('../../fonts/Centaur/Centaur-Light.otf')
}
@font-face {
  font-family: 'Centaur-Medium';
  font-style: normal;
  src: url('../../fonts/Centaur/Centaur-Medium.otf')
}


/*for leaflet------------------------------------------------------------------------------*/
#mapid { 
margin-top: 50px;}



/* The Modal (background)------------------------------------------------------------------------------*/
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 10; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

  }
  
  /* Modal Content */
  .modal-content {
    z-index: 1;
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s

  }
  
/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
  }
  
  @keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
  }
  
  /* The Close Button */
  .close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }
  
  .modal-header {
    padding: 2px 16px;
    background-color: white;
    color: black;
    border-bottom: 5px solid black;
  }
  
  .modal-body {padding: 2px 16px;}
  
  .modal-footer {
    padding: 2px 16px;
    background-color: white;
    color: black;
  }

  body {
    font-family: 'Centaur-Regular';
    text-align: center;
    width: 100%;
    display:table;
    transition: 0.5s;
  }
  
  h1 {
    font-family: 'SabbathBlack-Heavy';
    color: rgb(0, 0, 0);
    margin-top: 0px;
    letter-spacing: -1px;
    font-size: 70px;
    padding-top: 50px;
  }
  h2 {
    font-family: 'SabbathBlack-Heavy';
    color: rgb(0, 0, 0);
    margin-top: 0px;
    letter-spacing: -1px;
    font-size: 50px;
    padding-top: 50px;
    padding-bottom: 20px;
  }
  
  h3 {
    font-family: 'SabbathBlack-Heavy';
    color: rgb(0, 0, 0);
    margin-top: 0px;
    letter-spacing: 0px;
    font-size: 25px;
  }
  
  h4 {
    font-family: 'Centaur-Medium';
    text-transform: uppercase;
  }
  
  
  a{
      color: black;
      background-color: transparent;
  
  }
  .nav-link
  {
    font-family: 'SabbathBlack-Heavy';
    color: black;
    margin-top: 0px;
    letter-spacing: -1px;
    font-size: 25px;
  
  } 
  
  .outofstock{
      color:red;
  }
  .product_img
  {
  padding: 8px;
  border:1px solid rgba(0,0,0,0.6);
  
  }
  
  .product_col
  {
    padding-right: 15px;
    padding-left: 15px;
    padding-bottom: 50px;
  }
  
  .item-excerpt
  {
    padding-top: 25px;
    text-align: center;
  
  }
  
  .navigation{
      background-color: white;
      border-left:1px solid rgba(0,0,0,0.2);
      min-height:100%;
  
  }
  .flexpanel{
      z-index: 10000000;
  }

  #sidePanel{
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    background-color:white;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
  }

  .master-wrapper{
    z-index: 10;
    position: static;
  }
  .media-body{
      text-align: left;
      padding-left: 10px;
  }
  
  .update-cart
  {
      border:0px
  }
  .txt_capacity{
  
      margin-top:-10px;
      font-weight: bold;
  }
  
  .txt_price{
      margin-top:-15px;
      font-weight: bold;
      font-size:18px;
  }
  /* Nav------------------------------------------------------------------------------*/
  
  .cart_button{
      color:black;
  }
  .a{
      color:black;
  }
  .cart-button-xs{
      color:black;
  }
  #main-navigation {
    margin-top: 10px;
    text-align: center;
    background: transparent;
  }
  
  .nav-item{
    display: inline-block;
    padding-left: 6px;
    padding-right: 6px;
  }
  
  
  .navbar-brand.logo img {
    max-height: 20px;
    top: -3px;
    position: relative;
  }
  
  
  .navbar-header{
  justify-content: space-between;
  }
          .navbar-header {
              width: 100%;
              display: block;
              height:30px;
            }
            .cart-account {
              float: right;
              
            }
            .navbar-brand {
              float: left;
            }
  
            section{ position:relative; 
                      padding-top:10px;
            }
            .sec-title{ 
                position:absolute; top:-150px;
              }
            .nonheader-wraper
            {
              padding-top:100px;
            }
            
            .contactdetails
            {
              display:inline;
              padding-top: 20px;
            }
            #main-nav-panel{
              background: rgba(255,255,255, 0.7);

            }
            .textinput, .textarea, .emailinput{
                 width: 350px;
             }
  
            @media (min-width: 800px) {
              .col-sm-2.col-md-2
              {
                  text-align: right;
              }               
             }

             @media (max-width: 991.98px){
              .col-sm-2.col-md-2
              {
                  text-align: left;
              }  
              #main-nav-panel{
                  background: rgba(255,255,255, 1);
              }
              #main-navigation {
              margin-top: 10px;
              text-align: center;
              background: rgba(255,255,255, 0.7);
              }
             }
             @media (min-width: 570px) {
              .textinput, .textarea, .emailinput, .selectinput{
                 width: 350px;
             }
             }
             @media (max-width: 570px) {
              .textinput, .textarea, .emailinput, .selectinput{
                 width: 100%;
             }
             }
            .quantity-input
            {
              width:50px;
              border:0px;
            }
            .nav-adds
            {
                width:70px;
            }
            .img-responsive{
              display: block;
              width: 100% \9;
              max-width: 100%;
              height: auto;
              }
              .tooltip {
              position: relative;
              display: inline-block;
              border-bottom: 1px dotted black;
              }
  
              .tooltip .tooltiptext {
              visibility: hidden;
              width: 120px;
              background-color: black;
              color: #fff;
              text-align: center;
              border-radius: 6px;
              padding: 5px 0;
              
              /* Position the tooltip */
              position: absolute;
              z-index: 1;
              top: 100%;
              left: 50%;
              margin-left: -60px;
              }
  
              .tooltip:hover .tooltiptext {
              visibility: visible;
              }
            /*
            .navbar{
                background: rgba(255,255,255,0.7);
            }
              */
            #footer-wrapper
            {
                margin-top: 100px;
                background-color: rgba(0,0,0,0.025);
                width:inherit;
            }
  
            .img-logo-pastille{
                width: 20%;
                vertical-align: middle;
            }
            .center-all{
              vertical-align: middle;
              display: inline-block;
            }
  
  
            .txt-section{
              max-width: 650px;
              margin-bottom: 100px;
              margin-left: 20px;
              margin-right: 20px;
            }
  #slideshow-container
  {
      position: relative;
      display: flex;
      width:100%;
      background-image: url("{{ header_imgs }}/001.jpg");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      text-align: center;
      min-height: 400px;
      max-height: 900px;
      align-items: center;
      justify-content: center;
  }
  
  #invisible-slide {
  
      width:100%;
      z-index:1;
      opacity:0;
  
  }
  .img-logo{
      width: 40%;
      min-width: 200px;
      z-index:10;
      vertical-align: middle;
      position: absolute;
  
  }
  .viewport-wrap{
      background-color: white;
  }