.overlay:before {
    animation: grain 1s steps(10) infinite;
    background-image: url(../img/grains.png);
    content: "center";
    height: 300%;
    left: -50%;
    opacity: 0.48;
    position: fixed;
    top: -110%;
    width: 300%;
}

@keyframes grain {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-5%, -10%); }
    20% { transform: translate(-15%, 5%); }
    30% { transform: translate(7%, -25%); }
    40% { transform: translate(-5%, 25%); }
    50% { transform: translate(-15%, 10%); }
    60% { transform: translate(15%, 0%); }
    70% { transform: translate(0%, 15%); }
    80% { transform: translate(3%, 35%); }
    90% { transform: translate(-10%, 10%); }
}

html, body {
     margin: 0;
     padding: 0;
     width: 100%;
     height: 100vh;
}

body {
     background: url(../img/logo.png) no-repeat 50% 50%;
     background-size:800px;
     
}

.menu-btn {
     position: fixed;
     margin: 1.5em;
     top: 200px;
     bottom: 760cm;
     left: 20%;
     transform: translateX(-48%);
     z-index: 1;
}

button {
     border: none;
     background: none;
}

button:focus {
     outline: none !important;
}

i {
     outline: none;
     padding: 1.0em;
     color: rgb(255, 255, 255);
     background: rgb(17, 74, 90);
     border-radius: 50%;
}

.row, .col-lg {
     margin: 0 !important;
     padding:60 !important;
}

.col-lg {
     height: 100vh;
}

.col-lg.overlay {
     background: #032057;
     position: absolute;
     opacity: 0;
}

.overlay h1 {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     font-size: 200px;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     font-weight: 800;
     color: #0301118a;
}

ul {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     list-style: none;
     margin: 0;
     padding: 0;
   
}


li {
     padding-top: 40px;
     font-size: 24px;
     font-weight: 300;
     text-transform: uppercase;
     text-align: center;
     color: #bebbbe;
}
li a {

     color: rgb(240, 227, 227);
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     font-weight: 300;
     font-size: 30px;
}



@media(max-width: 950px) {
     ul {
           top: 50%;
     }

     li {
           padding-top: 40px;
     }

     .overlay h1 {
           font-size: 40px;
     }
}
