@font-face {
    font-family: 'Agency FB Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Agency FB Bold'), url('fonts/AGENCYB.woff') format('woff');
}

@font-face {
    font-family: 'Agency FB Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Agency FB Regular'), url('fonts/AGENCYR.woff') format('woff');
}

@keyframes tagline{
    from{padding: 10vh 0 0; opacity: 0;}
    to{padding: 15vh 0 0; opacity: 1;}
}

body{
    margin: 0;
    background-color: white;
    user-select: none; /* supported by Chrome and Opera */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
}

#smallLogoLink{
    display: none;
    min-width: 3%;
    max-width: 45%;
    min-height: 10%;
    margin: 1% auto;
    z-index: 1;
    background-color: rgb(139, 139, 139);
}

#navBar{
    position: fixed;
    top: 0;
    float: top;
    z-index: 1;
    max-height: 8%;
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
}

#navList{
    background: rgb(139, 139, 139);
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: auto;
    transition: 0.5s ease;
}

#logo{
    display: block;
    float: left;
    margin-left: 10%;
    margin-top: 0.2%;
}

#icon{
    display: inline-block;
    max-width: 30%;
    padding: 4% 0 2%;
}

#logoText{
    position: absolute;
    display: inline-block;
    color:rgb(70, 200, 235);
    text-align: center;
    text-decoration: none;
    font-family: 'Agency FB Regular', arial;
    font-size: 3vh;
    margin-top: 0.2%;
}

#logoNB{
    color: white;
    margin: 0 20%;
    transform: scale(1.5, 1);
}

#logoChurchText{
    display: flex;
    float: left;
    margin: -6% 0 0;
    font-size: 140%;
}

#logoOF{
    display: flex;
    margin: 1.5% 0 0 3%;
}

#logoChrist{
    display: flex;
    margin-top: -50%;
    margin-left: 77.5%;
    font-size: 140%;
}

.navItemsBig {
    display: inline;
    float: right;
    color: white;
    padding: 1% 0.5%;
    text-align: center;
    text-decoration: none;
    transition: 0.2s ease;
    font-family: 'Agency FB Regular', arial;
    font-size: 2vmax;
    width: 8%;
    margin: 0;
}

.navItemsSmall{
    display: none;
    color: white;
    padding: 10px 0;
    text-align: center;
    text-decoration: none;
    transition: 0.2s ease;
    font-family: 'Agency FB Regular', arial;
    font-size: 5vh;
    width: 10%;
    margin: 0;
}

#stackMenu {
    display: none;
    transition: 0.2s ease;
}

#current{background-color: rgb(70, 200, 235);}

.navItemsBig:hover { 
    background-color: rgb(176, 196, 222);
    color: white;
}

#headerDiv{
    display: block;
    float: top;
    text-align: center;
    margin: 0 auto;
    padding: 2% auto;
    height: 35vh;
    width: 100%;
}

#tagline{
    width: 100%;
    margin: 0 auto;
    font-size: 5vw;
    color: white;
    font-family: 'Agency FB Bold', arial;
    opacity: 0;
    animation: tagline 0.5s ease-in;
    animation-fill-mode: forwards;
}

#page{
    width: 60%;
    text-align: center;
    margin: 0 auto; 
}

#pageHeader{
    margin: 1.5% auto;
    font-size: 6vh;
    color: rgb(70, 200, 235);
    font-family: 'Agency FB Bold', arial;
}

.subHeader{
    text-align: left;
    line-height: 1.5;
    margin: 2.5%  1.5%;
    font-size: 225%;
    color: rgb(70, 200, 235);
    font-family: 'Agency FB Bold', arial;
}

.text{
    text-align: left;
    line-height: 1.5;
    margin: 0 auto;
    color: rgb(139, 139, 139);
    font-family: 'Agency FB Regular', arial;
    font-size: 3vh;
}

#footer{
    bottom: 0;
    text-align: center;
    margin: 1.5% 0 0;
    padding: 0;
    background-color: rgb(139, 139, 139);
    max-height: 10%;
    width: 100%;
}

#footerContent{
    display: block;
    text-align: center;
    margin: 0 auto;
    width: 80%;
    overflow: hidden;
}

.fa-facebook-square{
    display: inline;
    float: left;
    color: white;
    font-size: 250%;
    padding: 2.5% 14%;
    transition: 0.2s ease;
}

.fa-facebook-square:hover{
    color: rgb(70, 200, 235);
}

#copyright{
    display: block;
    font-size: 120%;
    font-style: italic;
    color:white;
    font-family: 'Agency FB Regular', arial;
    margin: 3% auto;
    width: 15%;
}

.fa-copyright{
    display: inline-block;
    margin: auto 1.5%;
}

#infoDiv{
    display: inline;
    float: right;
    padding: 1.5% 0 0 1%;
    width: 35%;
    height: 25%;
}

.info{
    text-align: center;
    font-size: 2vh;
    color: white;
    font-family: 'Agency FB Regular', arial;
    margin: 2%;
}

.fas{
    margin: 0 2%;
    color: white;
}

.fa-map-marker-alt:hover{
    color: rgb(70, 200, 235);
    transition: 0.2s ease;
}

@media screen and (max-width: 1200px){
    @keyframes tagline{
        from{padding: 12vh 0 0; opacity: 0;}
        to{padding: 17vh 0 0; opacity: 1;}
    }

    #page{
        width: 100%;
        margin: 2.5% auto;
        text-align: center;
    }

    #headerDiv{
        height: 50vh;
    }

    #bigLogo{display: none;}

    .navItemsBig{display: none;}

    #smallLogoLink{
        display: block;
        text-align: center;
        width: 100%;
        margin: 1vh 30vw 0;
    }

    #smallLogo{
        max-width: 20%;
        margin: 0;
    }

    #icon{
        padding-bottom: 0;
        margin: 0;
        max-width: 100%;
    }

    #navBar{
        text-align: center;
        display: block;
        margin: 0 auto;
        padding: 0;
        background-color: rgb(139, 139, 139);
        max-height: 46%;
    }

    #navList{
        display: none;
        margin: 0;
        padding: 0;
    }

    #stackMenu{
        display: block;
        color: rgb(139, 139, 139);
        margin: 1vh auto 1vh auto;
        width: 100%;
        font-size: 3.5vh;
        z-index: 15;
    }

    .navItemsSmall{
        display: block;
        margin: 0 auto;
        width: 100%;
        z-index: 10;
    }

    #current{background-color: transparent;}
    
    #headerDiv{
        height: 30vh;
        margin: 0;
    }

    #tagline{
        font-size: 8vh;
    }

    .subHeader{margin: 2.5% 5% 1.5%;}

    .text{margin: 0 5%;}

    .fa-facebook-square{
        float: none;
        display: block;
        margin: 5% auto auto;
    }

    #copyright{width: 100%;}

    #infoDiv{
        float: none;
        display: block;
        margin: auto;
        width: 100%;
    }
    
    .info{
        text-align: center;
    }
}