/* CSS Document FOR MAIN.html*/

#banner {
  /*position: absolute;   */
  top: 0px;
  left: 0px;
  right: 0px;
  width: 75%;
  height: auto;
  /* z-index: -1;  */
}

body{
margin 0;
background-color: none;
font-size: 12px;
font-family: "Calibri";
}

h1{
font-family: "Calibri";
font-size: 18px;
}

h2{
font-size: 20px;
color: darkblue;
font-family: "Calibri";
}

div{
font-size: 16px;
margin-left:18%;
padding 1px 16px;
height 1000px;
}

//style="margin-left:25%;padding:1px 16px;height:1000px;"

footer{
position: fixed;
}

a:visited { text-decoration: none; color:blue; }

/*
a:visited { text-decoration: none; color:red; }
a:hover { text-decoration: none; color:blue; }
a:focus { text-decoration: none; color:yellow; }
a:hover, a:active { text-decoration: none; color:black }
*/

#menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 17%;      // izmemenija 16022018 20% to auto   // maybe later would be better to change this parameter to "auto" (means autofit to text)
    background-color: red;
    height: 100%; /* Full height */
    position: fixed; /* Make it stick, even on scroll */
    overflow: auto; /* Enable scrolling if the sidenav has too much content */
    font-size: 14px !important;
    font-family: "Calibri";
}

#menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 17%;      // izmemenija 16022018 20% to auto   // maybe later would be better to change this parameter to "auto" (means autofit to text)
    background-color: red;
    height: 100%; /* Full height */
    position: fixed; /* Make it stick, even on scroll */
    overflow: auto; /* Enable scrolling if the sidenav has too much content */
    font-size: 18px !important;
    font-family: "Century Gothic";
}

#menu li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
    background-color: #e5e5e5;
}

/* Change the link color on hover */
#menu li a:hover {
    background-color: #555;
    color: white;
}

#menu .active {
    background-color: grey;
    color: white;
}
  ////// #66b3ff
#menu li a:hover:not(.active) {
    background-color: #555;
    color: white;
}



@keyframes blink {
    /**
     * At the start of the animation the dot
     * has an opacity of .2
     */
    0% {
      opacity: .2;
    }
    /**
     * At 20% the dot is fully visible and
     * then fades out slowly
     */
    20% {
      opacity: 1;
    }
    /**
     * Until it reaches an opacity of .2 and
     * the animation can start again
     */
    100% {
      opacity: .2;
    }
}

.saving span {
    /**
     * Use the blink animation, which is defined above
     */
    animation-name: blink;
    /**
     * The animation should take 1.4 seconds
     */
    animation-duration: 1.4s;
    /**
     * It will repeat itself forever
     */
    animation-iteration-count: infinite;
    /**
     * This makes sure that the starting style (opacity: .2)
     * of the animation is applied before the animation starts.
     * Otherwise we would see a short flash or would have
     * to set the default styling of the dots to the same
     * as the animation. Same applies for the ending styles.
     */
    animation-fill-mode: both;
}

.saving span:nth-child(2) {
    /**
     * Starts the animation of the third dot
     * with a delay of .2s, otherwise all dots
     * would animate at the same time
     */
    animation-delay: .2s;
}

.saving span:nth-child(3) {
    /**
     * Starts the animation of the third dot
     * with a delay of .4s, otherwise all dots
     * would animate at the same time
     */
    animation-delay: .4s;
}