/* Loader #1 by Sam Lillicrap
   https://www.samueljwebdesign.co.uk
   https://codepen.io/samueljweb/pen/LbGxi
*/
:root {
    --text_color: white;
    --stick_color: white;
    --stick_length: 30px;
    --stick_distance: -8px;
}

h1 {
 font-family: 'Galmuri14';
 color: var(--text_color);
 text-transform: uppercase;
 font-size:1em;
 letter-spacing:1.5px;
 text-align:center;
 margin-top:20px;
 -webkit-animation: fade 2s infinite;
 -moz-animation: fade 2s infinite;

}
#blackArea{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    overflow: hidden;
    background: rgba(0,0,0,0.7);
}
#loading {
    display : none;
    position: absolute;
    top: 20%;
    left: 46%;
    text-align:center;
    width: var(--stick_length) * 6;
    padding-top:180px;
    margin:auto;
    vertical-align: middle;

}

.stick {
    width: var(--stick_length);
    height:3px;
    background: var(--stick_color);
    display:inline-block;
    margin-left: var(--stick_distance);
}

.stick:nth-child(n) {
    transform:rotate(30deg);
    -ms-transform:rotate(30deg); /* IE 9 */
    -webkit-transform:rotate(30deg); /* Safari and Chrome */
    -moz-transform:rotate(30deg);
    -webkit-animation: fall 2s infinite;
    -moz-animation: fall 2s infinite;

}
.stick:nth-child(2n) {
    transform:rotate(-30deg);
    -ms-transform:rotate(-30deg); /* IE 9 */
    -webkit-transform:rotate(-30deg); /* Safari and Chrome */
    -moz-transform:rotate(-30deg);
    -webkit-animation: rise 2s infinite;
    -moz-animation: rise 2s infinite;

}

@-webkit-keyframes rise {
    50% { transform:rotate(30deg);
    -ms-transform:rotate(30deg); /* IE 9 */
    -webkit-transform:rotate(30deg);
    -moz-transform:rotate(30deg);
    ;}
}
@-moz-keyframes rise {
    50% { transform:rotate(30deg);
    -ms-transform:rotate(30deg); /* IE 9 */
    -webkit-transform:rotate(30deg);
    -moz-transform:rotate(30deg);
}
}
@-o-keyframes rise {
    50% { transform:rotate(30deg);
    -ms-transform:rotate(30deg); /* IE 9 */
    -webkit-transform:rotate(30deg);
    -moz-transform:rotate(30deg);
    }
}
@keyframes rise {
    50% { transform:rotate(30deg);
    -ms-transform:rotate(30deg); /* IE 9 */
    -webkit-transform:rotate(30deg);
    -moz-transform:rotate(30deg);
    }
}

@-webkit-keyframes fall {
    50% { transform:rotate(-30deg);
    -ms-transform:rotate(-30deg); /* IE 9 */
    -webkit-transform:rotate(-30deg);
    -moz-transform:rotate(30deg);
}
}
@-moz-keyframes fall {
    50% { transform:rotate(-30deg);
    -ms-transform:rotate(-30deg); /* IE 9 */
    -webkit-transform:rotate(-30deg);
    -moz-transform:rotate(-30deg);

 }
}
@-o-keyframes fall {
    50% { transform:rotate(-30deg);
    -ms-transform:rotate(-30deg); /* IE 9 */
    -webkit-transform:rotate(-30deg);
    -moz-transform:rotate(30deg);
    }
  }
@keyframes fall {
    50% { transform:rotate(-30deg);
    -ms-transform:rotate(-30deg); /* IE 9 */
    -webkit-transform:rotate(-30deg);
    -moz-transform:rotate(30deg);
  }
}

@-webkit-keyframes fade {
    50%{opacity:0.5}
    100%{opacity:1}
}
@-moz-keyframes fade {
    50%{opacity:0.5}
    100%{opacity:1}
}
@-o-keyframes fade {
    50%{opacity:0.5}
    100%{opacity:1}
}
@keyframes fade {
    50%{opacity:0.5}
    100%{opacity:1}
}
@media screen and (max-width: 1024px) {
    :root {
        --stick_distance: -16px;
        --stick_length: 50px;
    }
    #loading{
        top: 38%;
        left: 38%;
        font-size: 24px;
    }
}