/* ================================================================ 
This copyright notice must be kept untouched in the stylesheet at 
all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/pro_drop4.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
.preload1 {
  background: url(../img/prodrop4/pro_drop4_2a.gif);
}
.preload1 {
  background: url(../img/prodrop4/pro_drop4_2b.gif);
}

.prodrop4 {
  padding: 0 0px 0px 0px;
  margin: 0;
  list-style: none;
  height: 36px;
  background: transparent url(../img/prodrop4/pro_drop4_back.gif);
  position: relative;
  z-index: 500;
  font-family: arial;
}
.prodrop4 li.top {
  display: block;
  float: right;
  min-width: 85px;
  padding: 0;
  text-align: center;
}
.prodrop4 li a.top_link {
  display: block;
  float: left;
  height: 36px;
  line-height: 27px;
  color: #666;
  text-decoration: none;
  font-size: 11px;
  font-weight: bold;
  padding: 0 0 0 10px;
  cursor: pointer;
  background: url(../img/prodrop4/pro_drop4_0a.gif) no-repeat;
  width: 100%;
}
.prodrop4 li a.top_link span {
  float: left;
  display: block;
  padding: 0 20px 0 10px;
  height: 36px;
  background: url(../img/prodrop4/pro_drop4_0b.gif);
  background-size: 101% 98%;
  width: 100%;
}
.prodrop4 li a.top_link:hover {
  color: #000;
  background: url(../img/prodrop4/pro_drop4_2a.gif);
  line-height: 25px;
}
.prodrop4 li a.top_link:hover span {
  background: url(../img/prodrop4/pro_drop4_2b.gif);
}

.prodrop4 li:hover > a.top_link {
  color: #000;
  background: url(../img/prodrop4/pro_drop4_2a.gif);
  line-height: 25px;
}
.prodrop4 li:hover > a.top_link span {
  background: url(../img/prodrop4/pro_drop4_2b.gif);
  background-size: 101% 98%;
}

.prodrop4 table {
  border-collapse: collapse;
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
}

/* Style the list OR link hover. Depending on browser used */

.prodrop4 a:hover {
  visibility: visible;
  position: relative;
  z-index: 200;
}
.prodrop4 li:hover {
  position: relative;
  z-index: 200;
}

/* keep the 'next' level invisible by placing it off screen. */
.prodrop4 ul {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.prodrop4 ul.sub1 {
  width: 250px;
  text-align: left;
}
.prodrop4 ul.sub2 {
  width: 200px;
  text-align: left;
}
.prodrop4 ul.sub3 {
  width: 200px;
  text-align: left;
}
.prodrop4 ul.sub4 {
  width: 210px;
  text-align: left;
}
.prodrop4 ul.sub5 {
  width: 150px;
  text-align: left;
}

.prodrop4 :hover ul {
  left: 0;
  top: 35px;
  background: #b9d3fb;
  padding: 3px;
  border: 1px solid #3a93d2;
  border-width: 0 1px 1px;
  white-space: nowrap;
  height: auto;
  z-index: 300;
}
.prodrop4 :hover ul li {
  display: block;
  height: 20px;
  position: relative;
  font-weight: normal;
  width: auto;
}
.prodrop4 :hover ul li a {
  display: block;
  font-size: 11px;
  height: 20px;
  line-height: 20px;
  width: auto;
  padding: 0 10px;
  color: #000;
  text-decoration: none;
}
.prodrop4 :hover ul li a:hover {
  background: #3a93d2;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .otherscreen {
    display: none !important;
  }
  /* .mobilescreen {
    display: block !important;
  } */
}

@media screen and (min-width: 768px) {
  .otherscreen {
    display: block !important;
  }
  .mobilescreen {
    display: none !important;
  }
}

@media screen and (max-width: 768px) {
  .navbarcontainer {
    display: flex !important;
  }
}

@media screen and (min-width: 768px) {
  .navbarcontainer {
    display: none !important;
  }
}