/* Navbar defines */
nav.my-navbar {
  font-size: 150%;
  width: 100%;
  height: auto;
  background-color: rgba(255, 255, 255, 1);
  position: relative;
  padding: 0;
  margin-bottom: 10vh;
}

/* Trapezium defines */
nav.my-navbar::after {
  content: '';
  position: absolute;
  bottom: -4vh;
  width: 100vw;
  border-top: solid 4vh rgba(255, 255, 255, 1);
  border-left: solid 10vw transparent;
  border-right: solid 10vw transparent;
  z-index: -1;
}

/* Navbar container defines */
section.navbar-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2vw;
}

/* Navbar header defines */
header.my-navbar-header {
  display: block;
  position: relative;
  float: left;
  width: 18vw;
  height: 10vw;
  min-width: 210px;
  min-height: 115px;
  max-width: 260px;
  max-height: 130px;
}

/* Unorder navbar list defines */
ul.my-navlist {
  margin: 0;
  padding: 3vh 0 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: auto;
}

/* Anchor defines */
a, li {
  text-decoration: none !important;
  list-style-type: none !important;
}

/* Navbar List defines */
ul.my-navlist li {
  display: flex;
  float: right;
  padding: 1.5ch;
  height: 100%;
  background-image: url("../img/buttons/old-papper/old-papper5.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: .2s ease-in-out;
}

ul.my-navlist li a {
  opacity: .7;
  color: #000;
  margin: 2ch;
  transition: .2s ease-in-out;
}

/* Anchor and list defines on hover */
ul.my-navlist li:hover, ul.my-navlist li:hover a {
  transform: scale(1.1, 1.1);
  transition: .2s ease-in-out;
  color: #900 !important;
}


/* Margin control of navbar lists */
ul.my-navlist li:not(:last-child) {
  margin-right: .2ch;
}

/* Brand site defines */
a.my-navbar-brand {
  color: #000;
  font-family: 'Barbarian', cursive;
  font-size: 2.5em;
  line-height: 1.3ch;
  padding: 0;
  height: 100%;
  margin: 0;
  display: block;
  background-image: url("../img/logo/logo.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  font-weight: 500;
  transition: .2s ease-in-out;
}

a.my-navbar-brand div{
  opacity: .7;
}

/* Brand site defines on hover */
a.my-navbar-brand:hover {
  transition: .2s ease-in-out;
  animation: flag-move 1s infinite ease-in-out;
  animation-direction: alternate;
}


/* - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - Media queryes - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - */

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

}

@keyframes flag-move {
  0%    { transform: rotateY(0deg);}
  25%   { transform: rotateY(20deg);}
  50%   { transform: rotateY(0deg);}
  75%   { transform: rotateY(-20deg);}
  100%   { transform: rotateY(0deg);}
}