html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  outline: 0;
  font-family: "Open Sans", sans-serif;
  color: black;
  font-family: "Poppins", sans-serif;
}

body {
  font-family: "Open Sans", sans-serif;
  color: black;
  display: block;
  place-items: center;
  background-size: contain;
  object-fit: cover;
}

header {
  font-family: "Open Sans", sans-serif;
  font-family: "Poppins", sans-serif;

  color: black;
  width: 100%;
  min-height: 12vh;
  position: fixed;
  display: flex;
  z-index: 1000;
  justify-content: space-between;
  transition: background-color 0.5s ease-in-out;
  right: auto;
  /* left: 5%;*/
}

#header-frame-index {
  width: 100%;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  overflow: hidden;
}

header.scrolled {
  background-color: #063844 !important;
  color: white !important;
}

header.scrolled #header-right a {
  color: white !important;
}

.logo_word {
  letter-spacing: 1.05px;
  font-weight: 800;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1.5rem;
  //margin-left: -1rem;
}

.rotate {
  animation: rotation 10s ease-in;
}

.linear {
  animation-timing-function: linear;
}

.infinite {
  animation-iteration-count: infinite;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

#logo {
  width: 25%;
  z-index: 2000;
  display: flex;
  background-size: cover;
  background-position: center;
  align-items: center;
  justify-content: center;
}

#logo img {
  /*align-content: space-around;
  max-width: 100%;
  height: 55px;
  object-fit: cover;
  overflow: hidden;
  z-index: 2000;*/

  max-width: 100%;
  max-height: 100%;
  width: 100% !important;
  height: auto;
  margin-top: 0.5rem;
}

#header-right {
  display: flex;
  align-items: center;
  color: #bbe0d9;
  justify-content: flex-start;
}

/*
#login {
  //width: 12.5%;
  justify-content: space-evenly;
  display: flex;
  align-items: center;

}*/

#basket {
  //width: 12.5%;
  justify-content: center;
  display: flex;
  align-items: center;
}

/*
#login a {
  background-color: #ffffff;
  border: 0.5px solid black !important;
  color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  //background: linear-gradient(241.92deg, rgb(57 178 129) 12.96%, rgb(51 129 136) 86.33%) round;
}


#login a:hover {
  color: rgb(80, 7, 80) !important;
  border: 0.5px solid rgb(240, 218, 246) !important;

}*/

#basket a {
  color: rgb(255, 255, 255);
  color: rgb(255, 255, 255);
  color: #063844;
  text-align: center;
  //padding: 0px 30px 0px 30px;
  //padding: 20px 20px 20px 50px;
  text-decoration: none;
  font-size: 16px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin: 0px 5px 0px 5px;
  //border: 1px solid #063844;
}

#header a {
  height: 100%;
  float: left;
  color: rgb(255, 255, 255);
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  line-height: 21px;
  font-weight: 500;
  //letter-spacing: 1.1px;
  border-radius: 4px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

#header-left a {
  float: left;
  color: rgb(255, 255, 255);
  text-align: center;
  padding: 0px 10px 0px 10px;
  text-decoration: none;
  border-radius: 4px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0px 15px 0px 15px;
}

#header h1 {
  float: right;
  color: rgb(255, 255, 255);
  text-align: center;
  //padding: 20px;
  //text-decoration: none;
  font-size: 25px;
  line-height: 50%;
  border-radius: 4px;
  width: 20%;
}

#header-right a {
  font-family: "Open Sans", sans-serif;
  color: black;
  font-family: "Noto Sans", sans-serif;
  font-family: "Poppins", sans-serif;

  color: #bbe0d9;
  color: rgb(255, 255, 255);
  color: rgb(71, 38, 182);
  color: #547fbd;
  color: #2a65ba;
  color: #11376b;
  color: #063844;
  color: #01161a;
  color: #40517d !important;
  text-align: center;
  text-decoration: none;
  display: flex;
  align-items: center;
  padding: 0 1.25rem 0 0;
  font-size: 0.99rem;
  font-weight: 800;
  line-height: 1.75rem;
  text-decoration: none !important;
  background-color: transparent !important;
  border: 0.5px solid transparent;
  letter-spacing: 0.5px;
}

/* #header-right a{
    width: 36%;
    height: 5%;
    color: rgb(255, 255, 255);
    color:rgb(0, 12, 12);
    text-align: center;
    padding: 20px 20px 20px 20px;
    border-radius: 30px;
    background-color: #1A2B3E;
    background-color: #ffd58e;
    //background-color: #ffd58e;
    text-decoration: none;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    transition: .3s;
  } */

#header-right a:hover {
  background-color: #fff3cd;
  background-color: #ffd58e;
  background-color: white;
  background-color: rgb(241, 141, 141);
  background-color: #2b4766;
  color: rgb(0, 12, 12);
  color: #063844;
  color: #01161a;
  color: #2d0756;
  color: #35036b;
  color: rgb(255, 255, 255);
  color: rgb(255, 255, 255);
  color: rgb(255, 255, 255);
  color: #2b4766;

  background-color: rgb(55, 0, 82);
  background-color: #000000;
  //background-color: #2b4766 !important;
  border: 0.5px solid #417a52;
  //border-radius: 25px;
  transition: 0.3s;
}

#header-left a:hover {
  background-color: white;
  color: #063844;
  border: 1px solid blue;
  border: 1px solid #8112f9;
  border: 1px solid #bbe0d9;
  border: 1px solid #063844;
  color: #0e6ffd;
  color: rgb(255, 255, 255);
  color: #063844;
  background-color: rgb(55, 0, 82);
  background-color: #ffd58e !important;
  border: 0.5px solid black;
}

#header-frame {
  max-width: 100%;
  min-height: 15vh;
}

.header-frame {
  max-width: 100%;
  min-height: 12vh;
}

.shop-header-frame {
  max-width: 100%;
  min-height: 12vh;
}

#tab {
  width: 100%;
  justify-content: center;
  left: auto;
  right: 0%;
}

#fixed-side-menu {
  z-index: 1;
  display: flex;
  flex-direction: column;
  left: 1rem;
  right: auto;
  //position: fixed;
  //width: 100%;
}

/* BGN Utility Classes*/

.bghover {
  background-color: none;
  display: flex;
  justify-content: space-around;
  text-align: center;
  align-items: center;
}

.bghover a {
  display: flex;
  font-size: 0.9rem !important;
}

.bghover:hover {
  /*background-color: #aaabc2;
  background-color: #ECEFF0;
  background-color:#bee6f1;
  background-color: rgb(241, 141, 141);
  //background-color:#ffd58e;
  opacity: 0.8;
  color:rgb(255, 255, 255) !important;
  margin: auto;*/
}

.headerhover {
  background-color: none;
  display: flex;
  justify-content: space-around;
  text-align: center;
  align-items: center;
}

.headerhover:hover {
  background-color: rgb(241, 141, 141);
  color: rgb(255, 255, 255) !important;
}

/* END Utility Classes*/
@media only screen and (max-width: 1199px) {
  body {
    display: block;
  }

  #header {
  }

  #header-left {
    //width: 40%;
  }

  #header-left a:last-child {
    //display: none;
  }

  #logo {
    //width: 50%;
    padding: 0px;
    //margin: 5px;
    //justify-content: left;
  }

  /*
  #login {
    //display: none;
    //width: 8%;
  }*/

  #header-right {
    width: 45%;
    margin: 0px;
  }

  #header-right a {
    width: normal;
    margin: 0px;
  }

  #logo img {
    //width: 75%;
    //margin: 0px;
    object-fit: cover;
  }

  #header-left a {
    //width: 50%;
    //width: auto;
    margin: 5px;
  }

  #header-right a {
    //padding: 20px 0px 20px 0px;
    margin: 0px;
    //width: 40%;
  }
}

@media only screen and (max-width: 992px) {
}

@media only screen and (max-width: 600px) {
  body {
  }

  #header {
    margin: 0px;
    padding: 0px;
  }

  #header-left {
    width: 0%;
    display: None;
  }

  #logo {
    justify-content: left;
  }
  /*
  #login {
    width: 50%;
  }

  #login a {
    font-size: 13px;
  }
*/
  #header-right {
    width: 58%;
  }

  #logo img {
  }

  #header-right a {
    padding: 20px 0px 20px 0px;
    margin: 5px;
  }
}

@media only screen and (max-width: 1440px) {
  #logo {
    width: 20%;
  }

  #header-right {
    width: 55%;
  }

  #basket {
    width: 25%;
  }

  .shop-header-frame {
    min-height: 18vh !important;
  }

  #shop-header-frame-2 {
    margin: 1rem 0px !important;
  }

  #tab-menu-2 {
    //display: none;
    width: 0% !important;
    display: none;
  }
}

@media only screen and (max-width: 1024px) {
  header {
    display: flex;
    margin: 0px;
    padding: 0px;
    align-items: center;
    width: 100%;
  }

  #logo {
    justify-content: center;
    margin: 0px !important;
    padding: 0px !important;
    width: 30%;
  }

  #header-right {
    display: flex;
    width: 50%;
    justify-content: center;
  }

  #header-right a:nth-child(2) + a {
    display: none;
  }

  #header-right a:nth-child(3) + a {
    display: none;
  }

  #header-right a:nth-child(4) + a {
    display: none;
  }

  #header-right a {
    font-size: 12px;
  }

  #basket {
    justify-content: end !important;
    width: 25%;
    text-shadow: none;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  #basket a,
  #basket table td {
    text-shadow: none;
  }

  /* #login {
    width: 50%;
    justify-content: flex-end
  }

  #login a {
    font-size: 13px;
    color: black !important;
    text-shadow: none;
  }*/

  #logo img {
  }

  #header-right a {
    padding: 20px 0px 20px 0px;
    margin: 5px;
  }

  /* Shopping Page */
  .shop-header-frame {
    min-height: 16vh !important;
  }

  #shop-header-frame-2 {
    margin: 1rem 0px !important;
  }

  #tab {
  }

  #tab-menu-1 {
    //display: none;
    //width: 45% !important;
  }

  #tab-menu-2 {
    //display: none;
    width: 0% !important;
    display: none;
  }

  #tab-menu {
  }

  #search-tab {
    //width: 55% !important;
  }

  #search-shop {
  }

  #side-menu {
  }

  #fixed-side-menu {
  }

  #shop-card {
    //width: 60% !important
  }

  #right-shop-add {
    //display: none;
  }
}

@media only screen and (max-width: 768px) {
  header {
    display: flex;
    margin: 0px;
    padding: 0px;
    background-color: #009396 !important;
    align-items: center;
  }

  #logo {
    justify-content: center;
    margin: 0px !important;
    padding: 0px !important;
    // width: 30%;
  }

  #header-right {
    display: none;
  }

  #basket {
    justify-content: end !important;
    width: 70%;
    text-shadow: none;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  #basket a,
  #basket table td {
    text-shadow: none;
  }
  /*
  #login {
    width: 50%;
    justify-content: flex-end
  }

  #login a {
    font-size: 13px;
    color: white !important;
    text-shadow: none;
    background-color: #2b4766 !important;
    border: none !important;
  }
*/
  #logo img {
  }

  #header-right a {
    padding: 20px 0px 20px 0px;
    margin: 5px;
  }

  /* Shopping Page 

  #tab-menu-1 {
    //display: none;
    width: 45%;
  }

  #tab-menu-2 {
    //display: none;
    width: 0% !important;
    display: none;
  }

  #tab-menu {
  }

  #search-tab {
    width: 55%;
  }

  #search-shop {
  }

  #side-menu {
    display: none;
    //width: 40% !important
  }

  #shop-card {
    width: 100%;
  }

  #left-shop-add {
    justify-content: center;
  }

  #right-shop-add {
    //display: none;
  }*/
}

@media only screen and (max-width: 490px) {
  header {
    display: flex;
    margin: 0px;
    padding: 0px;
    //background-color: #009396 !important;
    align-items: center;
  }

  #logo {
    justify-content: center;
    margin: 0px !important;
    padding: 0px !important;
    width: 40%;
  }

  #header-right {
    display: none;
  }

  #basket {
    justify-content: end !important;
    width: 60%;
    text-shadow: none;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  #basket a,
  #basket table td {
    text-shadow: none;
  }

  /*
  #login {
    width: 50%;
    justify-content: flex-end
  }

  #login a {
    font-size: 13px;
    color: white !important;
    text-shadow: none;
  }
*/
  #logo img {
  }

  #header-right a {
    padding: 20px 0px 20px 0px;
    margin: 5px;
  }

  /* Shopping Page */

  #tab {
    width: 100%;
    justify-content: center;
  }

  #tab-menu-1,
  #tab-menu-2 {
    display: none;
  }

  #tab-menu {
    //margin-top:20%;
    justify-content: center;
  }

  #search-tab {
    width: 100%;
  }

  #search-shop {
    justify-content: center !important;
  }

  #side-menu {
    display: none;
  }

  #shop-card {
    margin-top: 5px;
    padding: 0px !important;
  }

  #right-shop-add {
    display: block;
  }
}

@media only screen and (max-width: 450px) {
  body {
  }

  header {
    //display: block;
    margin: 0px;
    padding: 0px;
    //background-color: #009396 !important;
  }

  #logo {
    justify-content: center;
    margin: 0px !important;
    padding: 0px !important;
    width: 40%;
  }

  #header-right {
    display: none;
  }

  #basket {
    justify-content: start;
    width: 60%;
    //background-color: #009396 !important;
    color: white !important;
    text-shadow: none;
    padding-top: 5px;
    padding-bottom: 5px;
    overflow: hidden;
    margin: 0px;
  }

  #basket a,
  #basket table td,
  #basket table th,
  #basket table tr {
    color: #11376b !important;
    text-shadow: none;
    font-size: 10px !important;
  }

  /* #login {
    width: 50%;
  }

  #login a {
    font-size: 10px;
    color: white !important;
    text-shadow: none;
  }
*/
  #logo img {
  }

  #header-right a {
    padding: 20px 0px 20px 0px;
    margin: 5px;
  }

  /* Shopping Page */

  #tab-menu-1,
  #tab-menu-2 {
    display: none;
  }

  #tab-menu {
    margin-top: 5px;
  }

  #side-menu {
    display: none;
  }

  #shop-card {
    margin-top: 5px;
    padding: 0px !important;
  }

  #right-shop-add {
    display: none;
  }
}