@import url('https://fonts.googleapis.com/css?family=Felipa|Tangerine|UnifrakturCook:700');
                * {
                    margin: 0;
                    padding: 0;
                    
                }


                body{
                    background: url(../Images/xv.png) repeat fixed;
                    font-family: Georgia, 'Times New Roman', Times, serif;
                }

               /*-----------------------------

                        Top Navigation

                -------------------------------*/
                  /* Add a black background color to the top navigation */
                .topnav {
                    background-color: #000;
                    overflow: hidden;
                    font-family: 'Felipa', cursive;
                    /*font-size: 2em;*/
                    
                }

                /* Style the links inside the navigation bar */
                .topnav a {
                    float: left;
                    display: block;
                    color: #f2f2f2;
                    text-align: center;
                    padding: 14px 16px;
                    text-decoration: none;
                    font-size: 1.5em;
                    margin: auto 0;

                }

                /* Change the color of links on hover */
                    .topnav a:hover {
                        background-color: rgba(66,33,99,0.75);
                        color: #f2f2f2;
                    }

                /* Add an active class to highlight the current page */
                .active {
                    background-color: #4CAF50;
                    color: white;
                }

                /* Hide the link that should open and close the topnav on small screens */
                .topnav .icon {
                    display: none;
                }

                a.icon{
                    margin:0;
                    max-height: 46px;
                    padding: 1px;
                    margin: 0 10px;
                }

                /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
                    @media screen and (max-width: 600px) {
                      .topnav a:not(:last-child){display: none;}
                      .topnav a.icon {
                        float: right;
                        display: block;
                      }
                    }

                    /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
                    @media screen and (max-width: 600px) {
                      .topnav.responsive {position: relative;}
                      .topnav.responsive a.icon {
                        position: absolute;
                        right: 0;
                        top: 0;
                      }
                      .topnav.responsive a {
                        float: none;
                        display: block;
                        text-align: left;
                      }
                    }

                    .hide{
                        display:none;
                        transition: 2s;
                    }

                /*-----------------------------

                        Hamburger Icon

                -------------------------------*/
                .hamburger {
                    display: inline-block;
                    cursor: pointer;
                }

                .bar1, .bar2, .bar3 {
                    width: 35px;
                    height: 5px;
                    background-color: #f2f2f2;
                    margin: 6px 0;
                    transition: 0.4s;
                }

                .hamburger:hover {

                    background-color: #333;
                    transition: 0.4s;
                }

                /* Rotate first bar */
                .change .bar1 {
                    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
                    transform: rotate(-45deg) translate(-9px, 6px) ;
                }

                /* Fade out the second bar */
                .change .bar2 {
                    opacity: 0;
                }

                /* Rotate last bar */
                .change .bar3 {
                    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
                    transform: rotate(45deg) translate(-8px, -8px) ;
                }

                /*---------------------------------------------------

                                SIDE NAVIGATION

                --------------------------------------------------*/

                /* The side navigation menu */
                .sideNav {
                    height: 100%; /* 100% Full-height */
                    width: 0; /* 0 width - change this with JavaScript */
                    position: fixed; /* Stay in place */
                    z-index: 1; /* Stay on top */
                    top: 0;
                    left: 0;
                    background-color: rgba(0,0,0,0.9); /* Black*/
                    overflow-x: hidden; /* Disable horizontal scroll */
                    padding-top: 60px; /* Place content 60px from the top */
                    transition: 0.5s; /* 0.5 second transition effect to slide in the sideNav */
                    font-family: 'Felipa', cursive;
                    overflow-y:hidden;  /*Fix for IE*/
                }

                /* The navigation menu links */
                .sideNav a {
                    padding: 8px 8px 8px 32px;
                    text-decoration: none;
                    font-size: 25px;
                    color: #f2f2f2;
                    display: block;
                    transition: 0.3s;
                }

                /* When you mouse over the navigation links, change their color */
                .sideNav a:hover{
                    background-color: rgba(66,33,99,0.75);

                }

                /* Position and style the close button (top right corner) */
                .sideNav .closebtn {
                    position: absolute;
                    top: 0;
                    right: 25px;
                    font-size: 36px;
                    margin-left: 50px;
                }

                /* Style page content - use this if you want to push the page content to the right when you open the side navigation */
                #main {
                    transition: margin-left .5s;
                }

                /* On smaller screens, where height is less than 450px, change the style of the sideNav (less padding and a smaller font size) */
                @media screen and (max-height: 450px) {
                    .sideNav {padding-top: 15px;}
                    .sideNav a {font-size: 18px;}
                }

                /*-------------------------------------

                            CENTRAL TITLE

                -------------------------------------*/
                @font-face{
                    font-family:AngelicWar;
                    src:url('/fonts/ANGELICWAR.TTF');
                }

                @font-face{
                    font-family: KingThings;
                    src:url('/fonts/KINGTHINGS_SPIKE.TTF');
                }

                #title{
                    
                    background: url(../Images/outside.jpg) no-repeat center center fixed;
                    -webkit-background-size: cover;
                    -moz-background-size: cover;
                    -o-background-size: cover;
                    background-size: cover;
                    padding: 15% 0 20% 0;
                }
                
                .title{
                    font-family: KingThings,'UnifrakturCook', cursive;
                    color: rgba(255,255,255,0.9);
                    text-align: center;
                    border: 5px double;
                    border-color: rgba(255,255,255,0.9);
                    padding: 45px;
                    margin: 0 auto;
                    width: 50%;
                    font-weight: 200;
                    background-color: rgba(66,33,99,0.75);
                    font-size: 4em;
                }
                
                @media screen and (max-width: 600px){
                    #title{
                        padding: 15% 0 60% 0;
                    }

                    .title{
                        font-size: 2em;
                    }
                }
                /*---------------------------------------

                                NEWS ITEMS

                ----------------------------------------*/
                


                /*
                    Use the following CSS rules to specify these families:

                    font-family: 'Tangerine', cursive;
                    font-family: 'Felipa', cursive;
                    font-family: 'UnifrakturCook', cursive;
                */
                #news{
                    margin: 0 auto;
                    padding: 5%;
                    width: 90%
                    
                }

                .news_subject{
                    margin-top: 50px;
                }

                .news_item, #news p{
                    font-size: 1.25em;
                    margin: 10px 0;
                }

                .posted{
                    font-style: italic;
                    margin-top: 5px;
                }



        .subtitle {
            text-align: center;
            font-weight: 300;
            font-family: KingThings,'UnifrakturCook', cursive;
            color: #639;
            text-shadow: 4px 4px 4px #aaa;
            font-size: 4em;
            

            @media screen and (max-width: 600px){
                .subtitle{
                    font-size: 3em;
                }
            }
        }