*{
  margin: 0;
  padding: 0;
  font-family: Ubuntu, Verdana, 'Lucida Sans Unicode', sans-serif;
}
.header-bar{
  height: 100px;
  background: #cf394a;
  background-image: url("/img/bg.png");
  transition: 0.4s;
}
.header{
  height: 100%;
  padding: 0 20px;
  color: #fff;
  max-width: 900px;
  margin: 0px auto;
  transition: 0.4s;
}
.line{
  width: 100%;
  height: 5px;
  background-color: #9c0617;
}
.logo{
  display: flex;
  align-items: center;
  justify-content: center;
  float: left;
  height: 100%;
  color: #fff;
}
.logo img{
  height: 60px;
  width: 60px;
  margin-right: 10px;
}
.logo div{
  color: #fff;
}
.logo h2{
  margin: 0px;
  padding: 0px;
  color: #fff;
}
.menu{
  float: right;
  line-height: 100px;
}
.menu a{
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px 10px;
  border-radius: 5px;
  transition: 0.4s;
}
.menu .logo{
  height: 100px !important;
  width: 100%;
  margin-bottom: 10px;
  display: none !important;
  cursor: pointer;
}
.show-menu-btn,.hide-menu-btn{
  transition: 0.4s;
  font-size: 30px;
  cursor: pointer;
  display: none;
}
.show-menu-btn{
  float: left;
  height: 100%;
  margin-right: 20px;
  line-height: 100%;
}
.show-menu-btn img{
  height: 42px;
  margin: 9px 0;
  vertical-align: middle;
}
.menu a:hover,
.footer a:hover,
.show-menu-btn:hover,
.hide-menu-btn:hover{
  color: #9c0617;
}
.menu a:hover{
  background-color: #fff;
}

.menu .active{
  color: #9c0617;
  background-color: #fff;
}
#chk{
  position: absolute;
  visibility: hidden;
  z-index: -1111;
}

.content{
  max-width: 900px;
  margin: 10px auto;
  padding: 0 20px;
}

.footer-bar{
  height: 30px;
  background: #cf394a;
  margin-bottom: 100px;
  background-image: url("/img/bg.png");
}
.footer{
  height: 100%;
  padding: 0 20px;
  color: #fff;
  max-width: 900px;
  margin: 0px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer a{
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0 10px;
  transition: 0.4s;
}
#notification{
  position: fixed;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 80px;
  background-color: #1abc9c;
  border-bottom: 5px solid #16a085;
}
#notify_bell{
  height: 100%;
  vertical-align: middle;
}
.bell_animation{
  -webkit-animation: ring 4s .7s ease-in-out;
  -webkit-transform-origin: 50% 4px;
  -moz-animation: ring 4s .7s ease-in-out;
  -moz-transform-origin: 50% 4px;
  animation: ring 4s .7s ease-in-out;
  transform-origin: 50% 4px;
}
#notify_text{
  display: inline-block;
  vertical-align: middle;
  font-size: 20px;
  font-weight: bold;
}

@media screen and (max-width:800px) {
  .header{
    padding: 0 5px;
  }
  .header-bar{
    height: 60px;
  }
  .show-menu-btn,.hide-menu-btn{
    display: block;
  }
  .logo img{
    height: 36px;
    width: 36px;
    margin-right: 10px;
  }
  .menu .logo{
    display: flex !important;
  }
  .menu-content{
    position: fixed;
    top: 0px;
    width: 80%;
    max-width: 300px;
    height: 100vh;
    background: #cf394a;
    z-index: 31;
  }
  .menu{
    position: fixed;
    width: 100%;
    height: 100vh;
    background: rgba(51,51,51,0.7);
    left: -100%;
    top: 0;
    text-align: center;
    padding: 80px 0;
    line-height: normal;
    transition: 0.7s;
    z-index: 30
  }
  .menu a{
    display: block;
    padding: 20px;
    margin: 3px;
  }
  .hide-menu-btn{
    position: fixed;
    top: 0px;
    margin-left: 0%;
    width: 100%;
    height: 100vh;
  }
  #chk:checked ~ .menu{
    left: 0;
  }
}
@media screen and (max-width:330px) {
  .header .logo h2{
    font-size: 16px;
  }
}

@-webkit-keyframes ring {
  0% { -webkit-transform: rotateZ(0); }
  1% { -webkit-transform: rotateZ(30deg); }
  3% { -webkit-transform: rotateZ(-28deg); }
  5% { -webkit-transform: rotateZ(34deg); }
  7% { -webkit-transform: rotateZ(-32deg); }
  9% { -webkit-transform: rotateZ(30deg); }
  11% { -webkit-transform: rotateZ(-28deg); }
  13% { -webkit-transform: rotateZ(26deg); }
  15% { -webkit-transform: rotateZ(-24deg); }
  17% { -webkit-transform: rotateZ(22deg); }
  19% { -webkit-transform: rotateZ(-20deg); }
  21% { -webkit-transform: rotateZ(18deg); }
  23% { -webkit-transform: rotateZ(-16deg); }
  25% { -webkit-transform: rotateZ(14deg); }
  27% { -webkit-transform: rotateZ(-12deg); }
  29% { -webkit-transform: rotateZ(10deg); }
  31% { -webkit-transform: rotateZ(-8deg); }
  33% { -webkit-transform: rotateZ(6deg); }
  35% { -webkit-transform: rotateZ(-4deg); }
  37% { -webkit-transform: rotateZ(2deg); }
  39% { -webkit-transform: rotateZ(-1deg); }
  41% { -webkit-transform: rotateZ(1deg); }

  43% { -webkit-transform: rotateZ(0); }
  100% { -webkit-transform: rotateZ(0); }
}

@-moz-keyframes ring {
  0% { -moz-transform: rotate(0); }
  1% { -moz-transform: rotate(30deg); }
  3% { -moz-transform: rotate(-28deg); }
  5% { -moz-transform: rotate(34deg); }
  7% { -moz-transform: rotate(-32deg); }
  9% { -moz-transform: rotate(30deg); }
  11% { -moz-transform: rotate(-28deg); }
  13% { -moz-transform: rotate(26deg); }
  15% { -moz-transform: rotate(-24deg); }
  17% { -moz-transform: rotate(22deg); }
  19% { -moz-transform: rotate(-20deg); }
  21% { -moz-transform: rotate(18deg); }
  23% { -moz-transform: rotate(-16deg); }
  25% { -moz-transform: rotate(14deg); }
  27% { -moz-transform: rotate(-12deg); }
  29% { -moz-transform: rotate(10deg); }
  31% { -moz-transform: rotate(-8deg); }
  33% { -moz-transform: rotate(6deg); }
  35% { -moz-transform: rotate(-4deg); }
  37% { -moz-transform: rotate(2deg); }
  39% { -moz-transform: rotate(-1deg); }
  41% { -moz-transform: rotate(1deg); }

  43% { -moz-transform: rotate(0); }
  100% { -moz-transform: rotate(0); }
}

@keyframes ring {
  0% { transform: rotate(0); }
  1% { transform: rotate(30deg); }
  3% { transform: rotate(-28deg); }
  5% { transform: rotate(34deg); }
  7% { transform: rotate(-32deg); }
  9% { transform: rotate(30deg); }
  11% { transform: rotate(-28deg); }
  13% { transform: rotate(26deg); }
  15% { transform: rotate(-24deg); }
  17% { transform: rotate(22deg); }
  19% { transform: rotate(-20deg); }
  21% { transform: rotate(18deg); }
  23% { transform: rotate(-16deg); }
  25% { transform: rotate(14deg); }
  27% { transform: rotate(-12deg); }
  29% { transform: rotate(10deg); }
  31% { transform: rotate(-8deg); }
  33% { transform: rotate(6deg); }
  35% { transform: rotate(-4deg); }
  37% { transform: rotate(2deg); }
  39% { transform: rotate(-1deg); }
  41% { transform: rotate(1deg); }

  43% { transform: rotate(0); }
  100% { transform: rotate(0); }
}