body {

    background: #000;

}



/* Navigation */



header {

    height: 50px;

    width: 100%;

    background: rgba(0,0,0,1);

    font-size: 70%;

    position: fixed;

    font-weight: 400;

    letter-spacing: 1px;

    text-transform: uppercase;

    top: 0;

    left:0;

    z-index: 1;

    font-family: 'Oswald', sans-serif;



    

}

header ul {

    padding: 0;

    margin: 0;

    height: 50px;

    left:450px;

    position: relative;

}



header img {

    display: block;

    position: absolute;

    left:45px;

    width: 350px;

    top:10px;

    padding: 5px;



}

header li {

    display: inline;

    float: left;

    width: 10%;

    height: 50px;

}



header li:first-child+li+li {

 

}

header a {

    color: #fff;

    display: inline-block;

    text-align: center;

    text-decoration: none;

    width: 100%;

    padding-top: 15px;

    height:70%;



}



header a:hover {

    color: #FF4000;

}



header a#pull {

    display: none;

}   



@media screen and (max-width: 1070px) {

    header {

        height: auto;

        border-bottom: 0;

        height: 50px;

    }

    header ul {

        height:50px;

        display: none;

        height: auto;

        left:450px;

        position: relative;

   

    }    

    header li {

        width: 100%;

        float: left;

        position: relative;

        border-bottom: 1px solid #111;

        background: rgba(0,0,0,.8);

      }

     header a {

        position: relative;

        text-align: left;

        height:35px;

        text-indent: 25px;          

      }    



    header a:hover {



          text-align: left;

      }

         

    header a#pull {

        display: block;

        width: 50%;

        position: relative;

        left:450px;

    }

    header a#pull:after {

        content:"";

        width: 30px;

        height: 30px;

        color: #FFF;

        display: inline-block;

        position: absolute;

        right: 15px;

        top: 10px;

        z-index: 1000;

    }

}    



@media screen and (max-width: 550px) {

    header {

        height: auto;

        border-bottom: 0;

        height: 50px;

    }



    header img {

    display: block;

    position: absolute;

    left:30px;

    width: 250px;

    top:10px;

    padding: 5px;



}

    header ul {

        height:50px;

        display: none;

        height: auto;

        left:300px;

        position: relative;

   

    }    

    header li {

        width: 100%;

        float: left;

        position: relative;

        border-bottom: 1px solid #111;

        background: rgba(0,0,0,.8);

      }

     header a {

        position: relative;

        text-align: left;

        height:35px;

        text-indent: 25px;          

      }    



    header a:hover {



          text-align: left;

      }

         

    header a#pull {

        display: block;

        width: 50%;

        position: relative;

        left:300px;

    }

    header a#pull:after {

        content:"";

        width: 30px;

        height: 30px;

        color: #FFF;

        display: inline-block;

        position: absolute;

        right: 15px;

        top: 10px;

        z-index: 1000;

    }

}    



footer{



background: rgba(0,0,0,.65);

font-family: sans-serif;

text-align: center;

font-size: 60%;

color: white;

text-transform: uppercase;

padding: 10px;

position: fixed;

bottom: 0;

left: 0;

letter-spacing: 2px;

width: 100%;



}



.main {

    position: relative;

    width: 100%;

    height: 100%;

    overflow: hidden;



}





.goback {width: 100%; height:50px; background: #000; }



.goback p{

        font-family: 'Oswald', sans-serif;

        font-size: 100%;

        letter-spacing: 2px;

        color: white;

        padding-left: 20px;

        text-transform: uppercase;

        font-weight: 400;

        text-align: left;

        cursor: pointer;

}



.category {float:left;}

.category p {

        font-family: 'Oswald', sans-serif;

        font-size: 100%;

        letter-spacing: 2px;

        color: #cccccc;

        padding-left: 20px;

        text-transform: uppercase;

        font-weight: 400;

        text-align: left;

        cursor: pointer;

}



.category p h5{

        font-family: 'Oswald', sans-serif;

        font-size: 100%;

        letter-spacing: 2px;

        color: #0066cc;

        padding-left: 20px;

        text-transform: uppercase;

        font-weight: 400;

        text-align: left;

        cursor: pointer;

}



.processtext h1{

        font-family: 'Oswald', sans-serif;

        font-size: 100%;

        letter-spacing: 2px;

        color: #ffffff;

        text-transform: uppercase;

        font-weight: 400;

        text-align: left;

        padding-left: 20px;

}



.processtext p{

    font-family:  'Open Sans', sans-serif;

    font-size: 70%;

    letter-spacing: 1px;

    text-align: left;

    line-height: 150%;

    color: #fff;

    padding: 0px 30px 10px 30px;

}







 /* ====================================================================================================================================*/

.grid {

    margin: 50px 0 0 0;

    padding: 0;

    list-style: none;

    position: relative;

    width: 100%;

    padding-bottom: 100px;

}

 

.grid li {

    position: relative;

    float: left;

    overflow: hidden;

    width: 100%; /* Fallback */

    width: -webkit-calc(100% / 2);

    width: calc(100% / 2);

}

 

.grid li a,

.grid li a img {

    display: block;

    width: 100%;

    cursor: pointer;

    border: none;

    outline: none;

}



#clear {



}



/* Flexbox is used for centering the heading */

.grid li a div {

    position: absolute;

    left: 0;

    top: 0%;

    right: 0;

    bottom: 0;

    display: -webkit-flex;

    display: -moz-flex;

    display: -ms-flex;

    display: flex;

    text-align: center;

    border-top: 0 solid #000;

    border-left: 2px solid #000;

    border-right: 2px solid #000;

    border-bottom: 4px solid #000;

    width: 100%;



}

 

.grid li a:hover div {

    background: rgba(0,0,0,.5);

}

 

.grid li a div h3 {

        font-family: 'Oswald', sans-serif;

        font-size: 300%;

        letter-spacing: 2px;

        padding: 20px;

        color: white;

        text-transform: uppercase;

        font-weight: 400;

        text-align: center;

        background: rgba(0,0,0,.5);

        width: 100%;

        height: 10%;



}



 



/* Example for media query: change number of items per row */

 

@media screen and (max-width: 1190px) {

.grid li {

        width: 50%; /* Fallback */

        width: -webkit-calc(100% / 2);

        width: calc(100% / 2);

    }



.grid li a div h3 {

        font-size: 200%;

        color: white;

        text-transform: uppercase;

}



}

 



@media screen and (max-width: 660px) {



.grid li {

        width: 100%; /* Fallback */;

    }



.grid li a div h3 {

        font-size: 150%;



}

}

 



  /* ====================================================================================================================================*/

.architecture {display: none; position: absolute; width: 100%; height: 2500px; background: #000; left:0; top:50px;}

.architecture .grid { margin: 0 0 0 0; padding: 0; list-style: none; position: relative; max-width: 100%; padding-bottom: 100px;}

.architecture .grid li { position: relative; float: left; overflow: hidden; width: 50%; /* Fallback */ width: -webkit-calc(100% / 2); width: calc(100% / 2);}

.architecture .grid li a,

.architecture .grid li a img { display: block; max-width: 100%; width: 100%; cursor: pointer; border: none; outline: none;}

/* Flexbox is used for centering the heading */

.architecture .grid li a div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.1);

    display: -webkit-flex;

    display: -moz-flex;

    display: -ms-flex;

    display: flex;

    -webkit-align-items: center;

    -moz-align-items: center;

    -ms-align-items: center;

    align-items: center;

    text-align: center;}

.architecture .grid li a:hover div { background: rgba(0,0,0,.5);}

.architecture .grid li a:hover div h3 { background: rgba(0,0,0,0);} 

.architecture .grid li a div h3 { font-family: 'Oswald', sans-serif; font-size: 300%; letter-spacing: 2px; color: #fff; background: rgba(0,0,0,.5); display: block; padding: 10px 0 10px 0; text-transform: uppercase; font-weight: 400; text-align: center;}

 

/* Example for media query: change number of items per row */

 

@media screen and (max-width: 1190px) {

.architecture .grid li { width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc(100% / 4);   }

.architecture .grid li a div h3 { font-size: 100%; color: white; text-transform: uppercase;}}

@media screen and (max-width: 900px) {

.architecture .grid li { width: 33.333333%; /* Fallback */  width: -webkit-calc(100% / 3); width: calc(100% / 3);   }

.architecture .grid li a div h3 { font-size: 150%; color: white; text-transform: uppercase;}}

@media screen and (max-width: 660px) {.architecture .grid li a div h3 {  font-size: 150%;}}

@media screen and (max-width: 480px) {.architecture .grid li a div h3 { font-size: 120%;}}





 /* ====================================================================================================================================*/

.interiors {display: none; position: absolute; width: 100%; height: 2500px; background: #000; left:0; top:50px;}

.interiors .grid { margin: 0 0 0 0; padding: 0; list-style: none; position: relative; max-width: 100%; padding-bottom: 100px;}

.interiors .grid li { position: relative; float: left; overflow: hidden; width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc(100% / 4);}

.interiors .grid li a,

.interiors .grid li a img { display: block; max-width: 100%; width: 100%; cursor: pointer; border: none; outline: none;}

/* Flexbox is used for centering the heading */

.interiors .grid li a div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.1);

    display: -webkit-flex;

    display: -moz-flex;

    display: -ms-flex;

    display: flex;

    -webkit-align-items: center;

    -moz-align-items: center;

    -ms-align-items: center;

    align-items: center;

    text-align: center;}

.interiors .grid li a:hover div { background: rgba(0,0,0,.5);}

.interiors .grid li a:hover div h3 { background: rgba(0,0,0,0);} 

.interiors .grid li a div h3 { font-family: 'Oswald', sans-serif; font-size: 150%; letter-spacing: 2px; color: #fff; background: rgba(0,0,0,.5); display: block; padding: 10px 0 10px 0; text-transform: uppercase; font-weight: 400; text-align: center;}

 

/* Example for media query: change number of items per row */

 

@media screen and (max-width: 1190px) {

.interiors .grid li { width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc(100% / 4);   }

.interiors .grid li a div h3 { font-size: 100%; color: white; text-transform: uppercase;}}

@media screen and (max-width: 900px) {

.interiors .grid li { width: 33.333333%; /* Fallback */  width: -webkit-calc(100% / 3); width: calc(100% / 3);   }

.interiors .grid li a div h3 { font-size: 150%; color: white; text-transform: uppercase;}}

@media screen and (max-width: 660px) {.interiors .grid li a div h3 {  font-size: 150%;}}

@media screen and (max-width: 480px) {.interiors .grid li a div h3 { font-size: 120%;}}





                 /* ====================================================================================================================================*/

                .interiored { display: none; position: absolute;  width: 100%; height: 2500px; background: #000; left:0; top:50px;}

                .interiored .grid { margin: 0 0 0 0; padding: 0; list-style: none; position: relative; max-width: 100%; padding-bottom: 100px;}

                .interiored .grid li { position: relative; float: left; overflow: hidden; width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc(100% / 4);}

                .interiored .grid li a,

                .interiored .grid li a img { display: block; max-width: 100%; width: 100%; cursor: pointer; border: none; outline: none;}



                /* Flexbox is used for centering the heading */

                .interiored .grid li a div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.1);

                     display: -webkit-flex;

                    display: -moz-flex;

                    display: -ms-flex;

                    display: flex;

                    -webkit-align-items: center;

                    -moz-align-items: center;

                    -ms-align-items: center;

                    align-items: center;

                    text-align: center;}

                .interiored .grid li a:hover div { background: rgba(0,0,0,.5);}

                .interiored .grid li a:hover div h3 { background: rgba(0,0,0,0);}

                .interiored .grid li a div h3 { font-family: 'Oswald', sans-serif; font-size: 150%; letter-spacing: 2px; color: #fff; background: rgba(0,0,0,.5); display: block; padding: 10px 0 10px 0; text-transform: uppercase; font-weight: 400; text-align: center;}

                 

                /* Example for media query: change number of items per row */

                 

                @media screen and (max-width: 900px) {

                .interiored .grid li { width: 25%; /* Fallback */ width: -webkit-calc(100% / 2); width: calc(100% / 2);}

                .interiored .grid li a div h3 { font-size: 150%; color: white; text-transform: uppercase;}}

                @media screen and (max-width: 660px) {.interiored .grid li a div h3 { font-size: 150%;}}

                @media screen and (max-width: 480px) {.interiored .grid li a div h3 { font-size: 120%;}}



                 /* ====================================================================================================================================*/

                .interiorlib { display: none; position: absolute;  width: 100%; height: 2500px; background: #000; left:0; top:50px;}

                .interiorlib .grid { margin: 0 0 0 0; padding: 0; list-style: none; position: relative; max-width: 100%; padding-bottom: 100px;}

                .interiorlib .grid li { position: relative; float: left; overflow: hidden; width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc(100% / 4);}

                .interiorlib .grid li a,

                .interiorlib .grid li a img { display: block; max-width: 100%; width: 100%; cursor: pointer; border: none; outline: none;}



                /* Flexbox is used for centering the heading */

                .interiorlib .grid li a div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.1);

                     display: -webkit-flex;

                    display: -moz-flex;

                    display: -ms-flex;

                    display: flex;

                    -webkit-align-items: center;

                    -moz-align-items: center;

                    -ms-align-items: center;

                    align-items: center;

                    text-align: center;}

                .interiorlib .grid li a:hover div { background: rgba(0,0,0,.5);}

                .interiorlib .grid li a:hover div h3 { background: rgba(0,0,0,0);}

                .interiorlib .grid li a div h3 { font-family: 'Oswald', sans-serif; font-size: 150%; letter-spacing: 2px; color: #fff; background: rgba(0,0,0,.5); display: block; padding: 10px 0 10px 0; text-transform: uppercase; font-weight: 400; text-align: center;}

                 

                /* Example for media query: change number of items per row */

                 

                @media screen and (max-width: 900px) {

                .interiorlib .grid li { width: 25%; /* Fallback */ width: -webkit-calc(100% / 2); width: calc(100% / 2);}

                .interiorlib .grid li a div h3 { font-size: 150%; color: white; text-transform: uppercase;}}

                @media screen and (max-width: 660px) {.interiorlib .grid li a div h3 { font-size: 150%;}}

                @media screen and (max-width: 480px) {.interiorlib .grid li a div h3 { font-size: 120%;}}





                /* ====================================================================================================================================*/

                .interiorcorp { display: none; position: absolute;  width: 100%; height: 2500px; background: #000; left:0; top:50px;}

                .interiorcorp .grid { margin: 0 0 0 0; padding: 0; list-style: none; position: relative; max-width: 100%; padding-bottom: 100px;}

                .interiorcorp .grid li { position: relative; float: left; overflow: hidden; width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc(100% / 4);}

                .interiorcorp .grid li a,

                .interiorcorp .grid li a img { display: block; max-width: 100%; width: 100%; cursor: pointer; border: none; outline: none;}



                /* Flexbox is used for centering the heading */

                .interiorcorp .grid li a div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.1);

                     display: -webkit-flex;

                    display: -moz-flex;

                    display: -ms-flex;

                    display: flex;

                    -webkit-align-items: center;

                    -moz-align-items: center;

                    -ms-align-items: center;

                    align-items: center;

                    text-align: center;}

                .interiorcorp .grid li a:hover div { background: rgba(0,0,0,.5);}

                .interiorcorp .grid li a:hover div h3 { background: rgba(0,0,0,0);}

                .interiorcorp .grid li a div h3 { font-family: 'Oswald', sans-serif; font-size: 150%; letter-spacing: 2px; color: #fff; background: rgba(0,0,0,.5); display: block; padding: 10px 0 10px 0; text-transform: uppercase; font-weight: 400; text-align: center;}

                 

                /* Example for media query: change number of items per row */

                 

                @media screen and (max-width: 900px) {

                .interiorcorp .grid li { width: 25%; /* Fallback */ width: -webkit-calc(100% / 2); width: calc(100% / 2);}

                .interiorcorp .grid li a div h3 { font-size: 150%; color: white; text-transform: uppercase;}}

                @media screen and (max-width: 660px) {.interiorcorp .grid li a div h3 { font-size: 150%;}}

                @media screen and (max-width: 480px) {.interiorcorp .grid li a div h3 { font-size: 120%;}}





                /* ====================================================================================================================================*/

                .interiorworship { display: none; position: absolute;  width: 100%; height: 2500px; background: #000; left:0; top:50px;}

                .interiorworship .grid { margin: 0 0 0 0; padding: 0; list-style: none; position: relative; max-width: 100%; padding-bottom: 100px;}

                .interiorworship .grid li { position: relative; float: left; overflow: hidden; width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc(100% / 4);}

                .interiorworship .grid li a,

                .interiorworship .grid li a img { display: block; max-width: 100%; width: 100%; cursor: pointer; border: none; outline: none;}



                /* Flexbox is used for centering the heading */

                .interiorworship .grid li a div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.1);

                     display: -webkit-flex;

                    display: -moz-flex;

                    display: -ms-flex;

                    display: flex;

                    -webkit-align-items: center;

                    -moz-align-items: center;

                    -ms-align-items: center;

                    align-items: center;

                    text-align: center;}

                .interiorworship .grid li a:hover div { background: rgba(0,0,0,.5);}

                .interiorworship .grid li a:hover div h3 { background: rgba(0,0,0,0);}

                .interiorworship .grid li a div h3 { font-family: 'Oswald', sans-serif; font-size: 150%; letter-spacing: 2px; color: #fff; background: rgba(0,0,0,.5); display: block; padding: 10px 0 10px 0; text-transform: uppercase; font-weight: 400; text-align: center;}

                 

                /* Example for media query: change number of items per row */

                 

                @media screen and (max-width: 900px) {

                .interiorworship .grid li { width: 25%; /* Fallback */ width: -webkit-calc(100% / 2); width: calc(100% / 2);}

                .interiorworship .grid li a div h3 { font-size: 150%; color: white; text-transform: uppercase;}}

                @media screen and (max-width: 660px) {.interiorworship .grid li a div h3 { font-size: 150%;}}

                @media screen and (max-width: 480px) {.interiorworship .grid li a div h3 { font-size: 120%;}}



                /* ====================================================================================================================================*/

                .interiorhistoric { display: none; position: absolute;  width: 100%; height: 2500px; background: #000; left:0; top:50px;}

                .interiorhistoric .grid { margin: 0 0 0 0; padding: 0; list-style: none; position: relative; max-width: 100%; padding-bottom: 100px;}

                .interiorhistoric .grid li { position: relative; float: left; overflow: hidden; width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc(100% / 4);}

                .interiorhistoric .grid li a,

                .interiorhistoric .grid li a img { display: block; max-width: 100%; width: 100%; cursor: pointer; border: none; outline: none;}



                /* Flexbox is used for centering the heading */

                .interiorhistoric .grid li a div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.1);

                     display: -webkit-flex;

                    display: -moz-flex;

                    display: -ms-flex;

                    display: flex;

                    -webkit-align-items: center;

                    -moz-align-items: center;

                    -ms-align-items: center;

                    align-items: center;

                    text-align: center;}

                .interiorhistoric .grid li a:hover div { background: rgba(0,0,0,.5);}

                .interiorhistoric .grid li a:hover div h3 { background: rgba(0,0,0,0);}

                .interiorhistoric .grid li a div h3 { font-family: 'Oswald', sans-serif; font-size: 150%; letter-spacing: 2px; color: #fff; background: rgba(0,0,0,.5); display: block; padding: 10px 0 10px 0; text-transform: uppercase; font-weight: 400; text-align: center;}

                 

                /* Example for media query: change number of items per row */

                 

                @media screen and (max-width: 900px) {

                .interiorhistoric .grid li { width: 25%; /* Fallback */ width: -webkit-calc(100% / 2); width: calc(100% / 2);}

                .interiorhistoric .grid li a div h3 { font-size: 150%; color: white; text-transform: uppercase;}}

                @media screen and (max-width: 660px) {.interiorhistoric .grid li a div h3 { font-size: 150%;}}

                @media screen and (max-width: 480px) {.interiorhistoric .grid li a div h3 { font-size: 120%;}}



                /* ====================================================================================================================================*/

                .interiorprivate { display: none; position: absolute;  width: 100%; height: 2500px; background: #000; left:0; top:50px;}

                .interiorprivate .grid { margin: 0 0 0 0; padding: 0; list-style: none; position: relative; max-width: 100%; padding-bottom: 100px;}

                .interiorprivate .grid li { position: relative; float: left; overflow: hidden; width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc(100% / 4);}

                .interiorprivate .grid li a,

                .interiorprivate .grid li a img { display: block; max-width: 100%; width: 100%; cursor: pointer; border: none; outline: none;}



                /* Flexbox is used for centering the heading */

                .interiorprivate .grid li a div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.1);

                     display: -webkit-flex;

                    display: -moz-flex;

                    display: -ms-flex;

                    display: flex;

                    -webkit-align-items: center;

                    -moz-align-items: center;

                    -ms-align-items: center;

                    align-items: center;

                    text-align: center;}

                .interiorprivate .grid li a:hover div { background: rgba(0,0,0,.5);}

                .interiorprivate .grid li a:hover div h3 { background: rgba(0,0,0,0);}

                .interiorprivate .grid li a div h3 { font-family: 'Oswald', sans-serif; font-size: 150%; letter-spacing: 2px; color: #fff; background: rgba(0,0,0,.5); display: block; padding: 10px 0 10px 0; text-transform: uppercase; font-weight: 400; text-align: center;}

                 

                /* Example for media query: change number of items per row */

                 

                @media screen and (max-width: 900px) {

                .interiorprivate .grid li { width: 25%; /* Fallback */ width: -webkit-calc(100% / 2); width: calc(100% / 2);}

                .interiorprivate .grid li a div h3 { font-size: 150%; color: white; text-transform: uppercase;}}

                @media screen and (max-width: 660px) {.interiorprivate .grid li a div h3 { font-size: 150%;}}

                @media screen and (max-width: 480px) {.interiorprivate .grid li a div h3 { font-size: 120%;}}



                /* ====================================================================================================================================*/

                .interiorclinical { display: none; position: absolute;  width: 100%; height: 2500px; background: #000; left:0; top:50px;}

                .interiorclinical .grid { margin: 0 0 0 0; padding: 0; list-style: none; position: relative; max-width: 100%; padding-bottom: 100px;}

                .interiorclinical .grid li { position: relative; float: left; overflow: hidden; width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc(100% / 4);}

                .interiorclinical .grid li a,

                .interiorclinical .grid li a img { display: block; max-width: 100%; width: 100%; cursor: pointer; border: none; outline: none;}



                /* Flexbox is used for centering the heading */

                .interiorclinical .grid li a div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.1);

                     display: -webkit-flex;

                    display: -moz-flex;

                    display: -ms-flex;

                    display: flex;

                    -webkit-align-items: center;

                    -moz-align-items: center;

                    -ms-align-items: center;

                    align-items: center;

                    text-align: center;}

                .interiorclinical .grid li a:hover div { background: rgba(0,0,0,.5);}

                .interiorclinical .grid li a:hover div h3 { background: rgba(0,0,0,0);}

                .interiorclinical .grid li a div h3 { font-family: 'Oswald', sans-serif; font-size: 150%; letter-spacing: 2px; color: #fff; background: rgba(0,0,0,.5); display: block; padding: 10px 0 10px 0; text-transform: uppercase; font-weight: 400; text-align: center;}

                 

                /* Example for media query: change number of items per row */

                 

                @media screen and (max-width: 900px) {

                .interiorclinical .grid li { width: 25%; /* Fallback */ width: -webkit-calc(100% / 2); width: calc(100% / 2);}

                .interiorclinical .grid li a div h3 { font-size: 150%; color: white; text-transform: uppercase;}}

                @media screen and (max-width: 660px) {.interiorclinical .grid li a div h3 { font-size: 150%;}}

                @media screen and (max-width: 480px) {.interiorclinical .grid li a div h3 { font-size: 120%;}}



                /* ====================================================================================================================================*/

                .interiorreuse { display: none; position: absolute;  width: 100%; height: 2500px; background: #000; left:0; top:50px;}

                .interiorreuse .grid { margin: 0 0 0 0; padding: 0; list-style: none; position: relative; max-width: 100%; padding-bottom: 100px;}

                .interiorreuse .grid li { position: relative; float: left; overflow: hidden; width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc(100% / 4);}

                .interiorreusel .grid li a,

                .interiorreuse .grid li a img { display: block; max-width: 100%; width: 100%; cursor: pointer; border: none; outline: none;}



                /* Flexbox is used for centering the heading */

                .interiorreuse .grid li a div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.1);

                     display: -webkit-flex;

                    display: -moz-flex;

                    display: -ms-flex;

                    display: flex;

                    -webkit-align-items: center;

                    -moz-align-items: center;

                    -ms-align-items: center;

                    align-items: center;

                    text-align: center;}

                .interiorreuse .grid li a:hover div { background: rgba(0,0,0,.5);}

                .interiorreuse .grid li a:hover div h3 { background: rgba(0,0,0,0);}

                .interiorreuse .grid li a div h3 { font-family: 'Oswald', sans-serif; font-size: 150%; letter-spacing: 2px; color: #fff; background: rgba(0,0,0,.5); display: block; padding: 10px 0 10px 0; text-transform: uppercase; font-weight: 400; text-align: center;}

                 

                /* Example for media query: change number of items per row */

                 

                @media screen and (max-width: 900px) {

                .interiorreuse .grid li { width: 25%; /* Fallback */ width: -webkit-calc(100% / 2); width: calc(100% / 2);}

                .interiorreuse .grid li a div h3 { font-size: 150%; color: white; text-transform: uppercase;}}

                @media screen and (max-width: 660px) {.interiorreuse .grid li a div h3 { font-size: 150%;}}

                @media screen and (max-width: 480px) {.interiorreuse .grid li a div h3 { font-size: 120%;}}



 



 /* ====================================================================================================================================*/

.planning {display: none; position: absolute; width: 100%; height: 2500px; background: #000; left:0; top:50px;}

.planning .grid { margin: 0 0 0 0; padding: 0; list-style: none; position: relative; max-width: 100%; padding-bottom: 100px;}

.planning .grid li { position: relative; float: left; overflow: hidden; width: 50%; /* Fallback */ width: -webkit-calc(100% / 2); width: calc(100% / 2);}

.planning .grid li a,

.planning .grid li a img { display: block; max-width: 100%; width: 100%; cursor: pointer; border: none; outline: none;}

/* Flexbox is used for centering the heading */

.planning .grid li a div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.1);

    display: -webkit-flex;

    display: -moz-flex;

    display: -ms-flex;

    display: flex;

    -webkit-align-items: center;

    -moz-align-items: center;

    -ms-align-items: center;

    align-items: center;

    text-align: center;}

.planning .grid li a:hover div { background: rgba(0,0,0,.5);}

.planning .grid li a:hover div h3 { background: rgba(0,0,0,0);} 

.planning .grid li a div h3 { font-family: 'Oswald', sans-serif; font-size: 300%; letter-spacing: 2px; color: #fff; background: rgba(0,0,0,.5); display: block; padding: 10px 0 10px 0; text-transform: uppercase; font-weight: 400; text-align: center;}

 

/* Example for media query: change number of items per row */

 

@media screen and (max-width: 1190px) {

.planning .grid li { width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc(100% / 4);   }

.planning .grid li a div h3 { font-size: 100%; color: white; text-transform: uppercase;}}

@media screen and (max-width: 900px) {

.planning .grid li { width: 33.333333%; /* Fallback */  width: -webkit-calc(100% / 3); width: calc(100% / 3);   }

.planning .grid li a div h3 { font-size: 150%; color: white; text-transform: uppercase;}}

@media screen and (max-width: 660px) {.planning .grid li a div h3 {  font-size: 150%;}}

@media screen and (max-width: 480px) {.planning .grid li a div h3 { font-size: 120%;}}





                     /* ====================================================================================================================================*/

                        .campusplanning {display: none; position: absolute; width: 100%; height: 2500px; background: #000; left:0; top:50px;}

                        .campusplanning .grid { margin: 0 0 0 0; padding: 0; list-style: none; position: relative; max-width: 100%; padding-bottom: 100px;}

                        .campusplanning .grid li { position: relative; float: left; overflow: hidden; width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc(100% / 4);}

                        .campusplanning .grid li a,

                        .campusplanning .grid li a img { display: block; max-width: 100%; width: 100%; cursor: pointer; border: none; outline: none;}

                        /* Flexbox is used for centering the heading */

                        .campusplanning .grid li a div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.1);

                            display: -webkit-flex;

                            display: -moz-flex;

                            display: -ms-flex;

                            display: flex;

                            -webkit-align-items: center;

                            -moz-align-items: center;

                            -ms-align-items: center;

                            align-items: center;

                            text-align: center;}

                        .campusplanning .grid li a:hover div { background: rgba(0,0,0,.5);}

                        .campusplanning .grid li a:hover div h3 { background: rgba(0,0,0,0);} 

                        .campusplanning .grid li a div h3 { font-family: 'Oswald', sans-serif; font-size: 150%; letter-spacing: 2px; color: #fff; background: rgba(0,0,0,.5); display: block; padding: 10px 0 10px 0; text-transform: uppercase; font-weight: 400; text-align: center;}

                         

                        /* Example for media query: change number of items per row */

                         

                        @media screen and (max-width: 1190px) {

                        .campusplanning .grid li { width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc(100% / 4);   }

                        .campusplanning .grid li a div h3 { font-size: 100%; color: white; text-transform: uppercase;}}

                        @media screen and (max-width: 900px) {

                        .campusplanning .grid li { width: 33.333333%; /* Fallback */  width: -webkit-calc(100% / 3); width: calc(100% / 3);   }

                        .campusplanning .grid li a div h3 { font-size: 150%; color: white; text-transform: uppercase;}}

                        @media screen and (max-width: 660px) {.campusplanning .grid li a div h3 {  font-size: 150%;}}

                        @media screen and (max-width: 480px) {.campusplanning .grid li a div h3 { font-size: 120%;}}







                         /* ====================================================================================================================================*/

                        .urbanplanning {display: none; position: absolute; width: 100%; height: 2500px; background: #000; left:0; top:50px;}

                        .urbanplanning .grid { margin: 0 0 0 0; padding: 0; list-style: none; position: relative; max-width: 100%; padding-bottom: 100px;}

                        .urbanplanning .grid li { position: relative; float: left; overflow: hidden; width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc(100% / 4);}

                        .urbanplanning .grid li a,

                        .urbanplanning .grid li a img { display: block; max-width: 100%; width: 100%; cursor: pointer; border: none; outline: none;}

                        /* Flexbox is used for centering the heading */

                        .urbanplanning .grid li a div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.1);

                            display: -webkit-flex;

                            display: -moz-flex;

                            display: -ms-flex;

                            display: flex;

                            -webkit-align-items: center;

                            -moz-align-items: center;

                            -ms-align-items: center;

                            align-items: center;

                            text-align: center;}

                        .urbanplanning .grid li a:hover div { background: rgba(0,0,0,.5);}

                        .urbanplanning .grid li a:hover div h3 { background: rgba(0,0,0,0);} 

                        .urbanplanning .grid li a div h3 { font-family: 'Oswald', sans-serif; font-size: 150%; letter-spacing: 2px; color: #fff; background: rgba(0,0,0,.5); display: block; padding: 10px 0 10px 0; text-transform: uppercase; font-weight: 400; text-align: center;}

                         

                        /* Example for media query: change number of items per row */

                         

                        @media screen and (max-width: 1190px) {

                        .urbanplanning .grid li { width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc(100% / 4);   }

                        .urbanplanning .grid li a div h3 { font-size: 100%; color: white; text-transform: uppercase;}}

                        @media screen and (max-width: 900px) {

                        .urbanplanning .grid li { width: 33.333333%; /* Fallback */  width: -webkit-calc(100% / 3); width: calc(100% / 3);   }

                        .urbanplanning .grid li a div h3 { font-size: 150%; color: white; text-transform: uppercase;}}

                        @media screen and (max-width: 660px) {.urbanplanning .grid li a div h3 {  font-size: 150%;}}

                        @media screen and (max-width: 480px) {.urbanplanning .grid li a div h3 { font-size: 120%;}}





 /* ====================================================================================================================================*/

.buildings {display: none; position: absolute; width: 100%; height: 2500px; background: #000; left:0; top:50px;}

.buildings .grid { margin: 0 0 0 0; padding: 0; list-style: none; position: relative; max-width: 100%; padding-bottom: 100px;}

.buildings .grid li { position: relative; float: left; overflow: hidden; width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc(100% / 4);}

.buildings .grid li a,

.buildings .grid li a img { display: block; max-width: 100%; width: 100%; cursor: pointer; border: none; outline: none;}

/* Flexbox is used for centering the heading */

.buildings .grid li a div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.1);

    display: -webkit-flex;

    display: -moz-flex;

    display: -ms-flex;

    display: flex;

    -webkit-align-items: center;

    -moz-align-items: center;

    -ms-align-items: center;

    align-items: center;

    text-align: center;}

.buildings .grid li a:hover div { background: rgba(0,0,0,.5);}

.buildings .grid li a:hover div h3 { background: rgba(0,0,0,0);} 

.buildings .grid li a div h3 { font-family: 'Oswald', sans-serif; font-size: 150%; letter-spacing: 2px; color: #fff; background: rgba(0,0,0,.5); display: block; padding: 10px 0 10px 0; text-transform: uppercase; font-weight: 400; text-align: center;}

 

/* Example for media query: change number of items per row */

 

@media screen and (max-width: 1190px) {

.buildings .grid li { width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc(100% / 4);   }

.buildings .grid li a div h3 { font-size: 100%; color: white; text-transform: uppercase;}}

@media screen and (max-width: 900px) {

.buildings .grid li { width: 33.333333%; /* Fallback */  width: -webkit-calc(100% / 3); width: calc(100% / 3);   }

.buildings .grid li a div h3 { font-size: 150%; color: white; text-transform: uppercase;}}

@media screen and (max-width: 660px) {.buildings .grid li a div h3 {  font-size: 150%;}}

@media screen and (max-width: 480px) {.buildings .grid li a div h3 { font-size: 120%;}}







             /* ====================================================================================================================================*/

            .current { display: none; position: absolute;  width: 100%; height: 2500px; background: #000; left:0; top:50px;}

            .current .grid { margin: 0 0 0 0; padding: 0; list-style: none; position: relative; max-width: 100%; padding-bottom: 100px;}

            .current .grid li { position: relative; float: left; overflow: hidden; width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc(100% / 4);}

            .current .grid li a,

            .current .grid li a img { display: block; max-width: 100%; width: 100%; cursor: pointer; border: none; outline: none;}



            /* Flexbox is used for centering the heading */

            .current .grid li a div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.1);

                 display: -webkit-flex;

                display: -moz-flex;

                display: -ms-flex;

                display: flex;

                -webkit-align-items: center;

                -moz-align-items: center;

                -ms-align-items: center;

                align-items: center;

                text-align: center;}

            .current .grid li a:hover div { background: rgba(0,0,0,.5);}

            .current .grid li a:hover div h3 { background: rgba(0,0,0,0);}

            .current .grid li a div h3 { font-family: 'Oswald', sans-serif; font-size: 150%; letter-spacing: 2px; color: #fff; background: rgba(0,0,0,.5); display: block; padding: 10px 0 10px 0; text-transform: uppercase; font-weight: 400; text-align: center;}

             

            /* Example for media query: change number of items per row */

             

            @media screen and (max-width: 900px) {

            .current .grid li { width: 25%; /* Fallback */ width: -webkit-calc(100% / 2); width: calc(100% / 2);}

            .current .grid li a div h3 { font-size: 150%; color: white; text-transform: uppercase;}}

            @media screen and (max-width: 660px) {.current .grid li a div h3 { font-size: 150%;}}

            @media screen and (max-width: 480px) {.current .grid li a div h3 { font-size: 120%;}}



             /* ====================================================================================================================================*/

            .k_12 { display: none; position: absolute;  width: 100%; height: 2500px; background: #000; left:0; top:50px;}

            .k_12 .grid { margin: 0 0 0 0; padding: 0; list-style: none; position: relative; max-width: 100%; padding-bottom: 100px;}

            .k_12 .grid li { position: relative; float: left; overflow: hidden; width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc(100% / 4);}

            .k_12 .grid li a,

            .k_12 .grid li a img { display: block; max-width: 100%; width: 100%; cursor: pointer; border: none; outline: none;}



            /* Flexbox is used for centering the heading */

            .k_12 .grid li a div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.1);

                 display: -webkit-flex;

                display: -moz-flex;

                display: -ms-flex;

                display: flex;

                -webkit-align-items: center;

                -moz-align-items: center;

                -ms-align-items: center;

                align-items: center;

                text-align: center;}

            .k_12 .grid li a:hover div { background: rgba(0,0,0,.5);}

            .k_12 .grid li a:hover div h3 { background: rgba(0,0,0,0);}

            .k_12 .grid li a div h3 { font-family: 'Oswald', sans-serif; font-size: 150%; letter-spacing: 2px; color: #fff; background: rgba(0,0,0,.5); display: block; padding: 10px 0 10px 0; text-transform: uppercase; font-weight: 400; text-align: center;}

             

            /* Example for media query: change number of items per row */

             

            @media screen and (max-width: 900px) {

            .k_12 .grid li { width: 25%; /* Fallback */ width: -webkit-calc(100% / 2); width: calc(100% / 2);}

            .k_12 .grid li a div h3 { font-size: 150%; color: white; text-transform: uppercase;}}

            @media screen and (max-width: 660px) {.k_12 .grid li a div h3 { font-size: 150%;}}

            @media screen and (max-width: 480px) {.k_12 .grid li a div h3 { font-size: 120%;}}



             /* ====================================================================================================================================*/

            .performing { display: none; position: absolute;  width: 100%; height: 2500px; background: #000; left:0; top:50px;}

            .performing .grid { margin: 0 0 0 0; padding: 0; list-style: none; position: relative; max-width: 100%; padding-bottom: 100px;}

            .performing .grid li { position: relative; float: left; overflow: hidden; width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc(100% / 4);}

            .performing .grid li a,

            .performing .grid li a img { display: block; max-width: 100%; width: 100%; cursor: pointer; border: none; outline: none;}



            /* Flexbox is used for centering the heading */

            .performing .grid li a div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.1);

                 display: -webkit-flex;

                display: -moz-flex;

                display: -ms-flex;

                display: flex;

                -webkit-align-items: center;

                -moz-align-items: center;

                -ms-align-items: center;

                align-items: center;

                text-align: center;}

            .performing .grid li a:hover div { background: rgba(0,0,0,.5);}

            .performing .grid li a:hover div h3 { background: rgba(0,0,0,0);}

            .performing .grid li a div h3 { font-family: 'Oswald', sans-serif; font-size: 150%; letter-spacing: 2px; color: #fff; background: rgba(0,0,0,.5); display: block; padding: 10px 0 10px 0; text-transform: uppercase; font-weight: 400; text-align: center;}

             

            /* Example for media query: change number of items per row */

             

            @media screen and (max-width: 900px) {

            .performing .grid li { width: 25%; /* Fallback */ width: -webkit-calc(100% / 2); width: calc(100% / 2);}

            .performing .grid li a div h3 { font-size: 150%; color: white; text-transform: uppercase;}}

            @media screen and (max-width: 660px) {.performing .grid li a div h3 { font-size: 150%;}}

            @media screen and (max-width: 480px) {.performing .grid li a div h3 { font-size: 120%;}}



             /* ====================================================================================================================================*/

            .private { display: none; position: absolute;  width: 100%; height: 2500px; background: #000; left:0; top:50px;}

            .private .grid { margin: 0 0 0 0; padding: 0; list-style: none; position: relative; max-width: 100%; padding-bottom: 100px;}

            .private .grid li { position: relative; float: left; overflow: hidden; width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc(100% / 4);}

            .private .grid li a,

            .private .grid li a img { display: block; max-width: 100%; width: 100%; cursor: pointer; border: none; outline: none;}



            /* Flexbox is used for centering the heading */

            .private .grid li a div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.1);

                 display: -webkit-flex;

                display: -moz-flex;

                display: -ms-flex;

                display: flex;

                -webkit-align-items: center;

                -moz-align-items: center;

                -ms-align-items: center;

                align-items: center;

                text-align: center;}

            .private .grid li a:hover div { background: rgba(0,0,0,.5);}

            .private .grid li a:hover div h3 { background: rgba(0,0,0,0);}

            .private .grid li a div h3 { font-family: 'Oswald', sans-serif; font-size: 150%; letter-spacing: 2px; color: #fff; background: rgba(0,0,0,.5); display: block; padding: 10px 0 10px 0; text-transform: uppercase; font-weight: 400; text-align: center;}

             

            /* Example for media query: change number of items per row */

             

            @media screen and (max-width: 900px) {

            .private .grid li { width: 25%; /* Fallback */ width: -webkit-calc(100% / 2); width: calc(100% / 2);}

            .private .grid li a div h3 { font-size: 150%; color: white; text-transform: uppercase;}}

            @media screen and (max-width: 660px) {.private .grid li a div h3 { font-size: 150%;}}

            @media screen and (max-width: 480px) {.private .grid li a div h3 { font-size: 120%;}}



             /* ====================================================================================================================================*/

            .libraries { display: none; position: absolute;  width: 100%; height: 2500px; background: #000; left:0; top:50px;}

            .libraries .grid { margin: 0 0 0 0; padding: 0; list-style: none; position: relative; max-width: 100%; padding-bottom: 100px;}

            .libraries .grid li { position: relative; float: left; overflow: hidden; width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc(100% / 4);}

            .libraries .grid li a,

            .libraries .grid li a img { display: block; max-width: 100%; width: 100%; cursor: pointer; border: none; outline: none;}



            /* Flexbox is used for centering the heading */

            .libraries .grid li a div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.1);

                 display: -webkit-flex;

                display: -moz-flex;

                display: -ms-flex;

                display: flex;

                -webkit-align-items: center;

                -moz-align-items: center;

                -ms-align-items: center;

                align-items: center;

                text-align: center;}

            .libraries .grid li a:hover div { background: rgba(0,0,0,.5);}

            .libraries .grid li a:hover div h3 { background: rgba(0,0,0,0);}

            .libraries .grid li a div h3 { font-family: 'Oswald', sans-serif; font-size: 150%; letter-spacing: 2px; color: #fff; background: rgba(0,0,0,.5); display: block; padding: 10px 0 10px 0; text-transform: uppercase; font-weight: 400; text-align: center;}

             

            /* Example for media query: change number of items per row */

             

            @media screen and (max-width: 900px) {

            .libraries .grid li { width: 25%; /* Fallback */ width: -webkit-calc(100% / 2); width: calc(100% / 2);}

            .libraries .grid li a div h3 { font-size: 150%; color: white; text-transform: uppercase;}}

            @media screen and (max-width: 660px) {.libraries .grid li a div h3 { font-size: 150%;}}

            @media screen and (max-width: 480px) {.libraries .grid li a div h3 { font-size: 120%;}}



             /* ====================================================================================================================================*/

            .housing { display: none; position: absolute;  width: 100%; height: 2500px; background: #000; left:0; top:50px;}

            .housing .grid { margin: 0 0 0 0; padding: 0; list-style: none; position: relative; max-width: 100%; padding-bottom: 100px;}

            .housing .grid li { position: relative; float: left; overflow: hidden; width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc(100% / 4);}

            .housing .grid li a,

            .housing .grid li a img { display: block; max-width: 100%; width: 100%; cursor: pointer; border: none; outline: none;}



            /* Flexbox is used for centering the heading */

            .housing .grid li a div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.1);

                 display: -webkit-flex;

                display: -moz-flex;

                display: -ms-flex;

                display: flex;

                -webkit-align-items: center;

                -moz-align-items: center;

                -ms-align-items: center;

                align-items: center;

                text-align: center;}

            .housing .grid li a:hover div { background: rgba(0,0,0,.5);}

            .housing .grid li a:hover div h3 { background: rgba(0,0,0,0);}

            .housing .grid li a div h3 { font-family: 'Oswald', sans-serif; font-size: 150%; letter-spacing: 2px; color: #fff; background: rgba(0,0,0,.5); display: block; padding: 10px 0 10px 0; text-transform: uppercase; font-weight: 400; text-align: center;}

             

            /* Example for media query: change number of items per row */

             

            @media screen and (max-width: 900px) {

            .housing .grid li { width: 25%; /* Fallback */ width: -webkit-calc(100% / 2); width: calc(100% / 2);}

            .housing .grid li a div h3 { font-size: 150%; color: white; text-transform: uppercase;}}

            @media screen and (max-width: 660px) {.housing .grid li a div h3 { font-size: 150%;}}

            @media screen and (max-width: 480px) {.housing .grid li a div h3 { font-size: 120%;}}



             /* ====================================================================================================================================*/

            .worship { display: none; position: absolute;  width: 100%; height: 2500px; background: #000; left:0; top:50px;}

            .worship .grid { margin: 0 0 0 0; padding: 0; list-style: none; position: relative; max-width: 100%; padding-bottom: 100px;}

            .worship .grid li { position: relative; float: left; overflow: hidden; width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc(100% / 4);}

            .worship .grid li a,

            .worship .grid li a img { display: block; max-width: 100%; width: 100%; cursor: pointer; border: none; outline: none;}



            /* Flexbox is used for centering the heading */

            .worship .grid li a div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.1);

                 display: -webkit-flex;

                display: -moz-flex;

                display: -ms-flex;

                display: flex;

                -webkit-align-items: center;

                -moz-align-items: center;

                -ms-align-items: center;

                align-items: center;

                text-align: center;}

            .worship .grid li a:hover div { background: rgba(0,0,0,.5);}

            .worship .grid li a:hover div h3 { background: rgba(0,0,0,0);}

            .worship .grid li a div h3 { font-family: 'Oswald', sans-serif; font-size: 150%; letter-spacing: 2px; color: #fff; background: rgba(0,0,0,.5); display: block; padding: 10px 0 10px 0; text-transform: uppercase; font-weight: 400; text-align: center;}

             

            /* Example for media query: change number of items per row */

             

            @media screen and (max-width: 900px) {

            .worship .grid li { width: 25%; /* Fallback */ width: -webkit-calc(100% / 2); width: calc(100% / 2);}

            .worship .grid li a div h3 { font-size: 150%; color: white; text-transform: uppercase;}}

            @media screen and (max-width: 660px) {.worship .grid li a div h3 { font-size: 150%;}}

            @media screen and (max-width: 480px) {.worship .grid li a div h3 { font-size: 120%;}}



             /* ====================================================================================================================================*/

            .mixed_use { display: none; position: absolute;  width: 100%; height: 2500px; background: #000; left:0; top:50px;}

            .mixed_use .grid { margin: 0 0 0 0; padding: 0; list-style: none; position: relative; max-width: 100%; padding-bottom: 100px;}

            .mixed_use .grid li { position: relative; float: left; overflow: hidden; width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc(100% / 4);}

            .mixed_use .grid li a,

            .mixed_use .grid li a img { display: block; max-width: 100%; width: 100%; cursor: pointer; border: none; outline: none;}



            /* Flexbox is used for centering the heading */

            .mixed_use .grid li a div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.1);

                 display: -webkit-flex;

                display: -moz-flex;

                display: -ms-flex;

                display: flex;

                -webkit-align-items: center;

                -moz-align-items: center;

                -ms-align-items: center;

                align-items: center;

                text-align: center;}

            .mixed_use .grid li a:hover div { background: rgba(0,0,0,.5);}

            .mixed_use .grid li a:hover div h3 { background: rgba(0,0,0,0);}

            .mixed_use .grid li a div h3 { font-family: 'Oswald', sans-serif; font-size: 150%; letter-spacing: 2px; color: #fff; background: rgba(0,0,0,.5); display: block; padding: 10px 0 10px 0; text-transform: uppercase; font-weight: 400; text-align: center;}

             

            /* Example for media query: change number of items per row */

             

            @media screen and (max-width: 900px) {

            .mixed_use .grid li { width: 25%; /* Fallback */ width: -webkit-calc(100% / 2); width: calc(100% / 2);}

            .mixed_use .grid li a div h3 { font-size: 150%; color: white; text-transform: uppercase;}}

            @media screen and (max-width: 660px) {.mixed_use .grid li a div h3 { font-size: 150%;}}

            @media screen and (max-width: 480px) {.mixed_use .grid li a div h3 { font-size: 120%;}}



             /* ====================================================================================================================================*/

            .parking { display: none; position: absolute;  width: 100%; height: 2500px; background: #000; left:0; top:50px;}

            .parking .grid { margin: 0 0 0 0; padding: 0; list-style: none; position: relative; max-width: 100%; padding-bottom: 100px;}

            .parking .grid li { position: relative; float: left; overflow: hidden; width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc(100% / 4);}

            .parking .grid li a,

            .parking .grid li a img { display: block; max-width: 100%; width: 100%; cursor: pointer; border: none; outline: none;}



            /* Flexbox is used for centering the heading */

            .parking .grid li a div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.1);

                 display: -webkit-flex;

                display: -moz-flex;

                display: -ms-flex;

                display: flex;

                -webkit-align-items: center;

                -moz-align-items: center;

                -ms-align-items: center;

                align-items: center;

                text-align: center;}

            .parking .grid li a:hover div { background: rgba(0,0,0,.5);}

            .parking .grid li a:hover div h3 { background: rgba(0,0,0,0);}

            .parking .grid li a div h3 { font-family: 'Oswald', sans-serif; font-size: 150%; letter-spacing: 2px; color: #fff; background: rgba(0,0,0,.5); display: block; padding: 10px 0 10px 0; text-transform: uppercase; font-weight: 400; text-align: center;}

             

            /* Example for media query: change number of items per row */

             

            @media screen and (max-width: 900px) {

            .parking .grid li { width: 25%; /* Fallback */ width: -webkit-calc(100% / 2); width: calc(100% / 2);}

            .parking .grid li a div h3 { font-size: 150%; color: white; text-transform: uppercase;}}

            @media screen and (max-width: 660px) {.parking .grid li a div h3 { font-size: 150%;}}

            @media screen and (max-width: 480px) {.parking .grid li a div h3 { font-size: 120%;}}



             /* ====================================================================================================================================*/

            .clinical { display: none; position: absolute;  width: 100%; height: 2500px; background: #000; left:0; top:50px;}

            .clinical .grid { margin: 0 0 0 0; padding: 0; list-style: none; position: relative; max-width: 100%; padding-bottom: 100px;}

            .clinical .grid li { position: relative; float: left; overflow: hidden; width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc(100% / 4);}

            .clinical .grid li a,

            .clinical .grid li a img { display: block; max-width: 100%; width: 100%; cursor: pointer; border: none; outline: none;}



            /* Flexbox is used for centering the heading */

            .clinical .grid li a div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.1);

                 display: -webkit-flex;

                display: -moz-flex;

                display: -ms-flex;

                display: flex;

                -webkit-align-items: center;

                -moz-align-items: center;

                -ms-align-items: center;

                align-items: center;

                text-align: center;}

            .clinical .grid li a:hover div { background: rgba(0,0,0,.5);}

            .clinical .grid li a:hover div h3 { background: rgba(0,0,0,0);}

            .clinical .grid li a div h3 { font-family: 'Oswald', sans-serif; font-size: 150%; letter-spacing: 2px; color: #fff; background: rgba(0,0,0,.5); display: block; padding: 10px 0 10px 0; text-transform: uppercase; font-weight: 400; text-align: center;}

             

            /* Example for media query: change number of items per row */

             

            @media screen and (max-width: 900px) {

            .clinical .grid li { width: 25%; /* Fallback */ width: -webkit-calc(100% / 2); width: calc(100% / 2);}

            .clinical .grid li a div h3 { font-size: 150%; color: white; text-transform: uppercase;}}

            @media screen and (max-width: 660px) {.clinical .grid li a div h3 { font-size: 150%;}}

            @media screen and (max-width: 480px) {.clinical .grid li a div h3 { font-size: 120%;}}



             /* ====================================================================================================================================*/

            .civic { display: none; position: absolute;  width: 100%; height: 2500px; background: #000; left:0; top:50px;}

            .civic .grid { margin: 0 0 0 0; padding: 0; list-style: none; position: relative; max-width: 100%; padding-bottom: 100px;}

            .civic .grid li { position: relative; float: left; overflow: hidden; width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc(100% / 4);}

            .civic .grid li a,

            .civic .grid li a img { display: block; max-width: 100%; width: 100%; cursor: pointer; border: none; outline: none;}



            /* Flexbox is used for centering the heading */

            .civic .grid li a div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.1);

                 display: -webkit-flex;

                display: -moz-flex;

                display: -ms-flex;

                display: flex;

                -webkit-align-items: center;

                -moz-align-items: center;

                -ms-align-items: center;

                align-items: center;

                text-align: center;}

            .civic .grid li a:hover div { background: rgba(0,0,0,.5);}

            .civic .grid li a:hover div h3 { background: rgba(0,0,0,0);}

            .civic .grid li a div h3 { font-family: 'Oswald', sans-serif; font-size: 150%; letter-spacing: 2px; color: #fff; background: rgba(0,0,0,.5); display: block; padding: 10px 0 10px 0; text-transform: uppercase; font-weight: 400; text-align: center;}

             

            /* Example for media query: change number of items per row */

             

            @media screen and (max-width: 900px) {

            .civic .grid li { width: 25%; /* Fallback */ width: -webkit-calc(100% / 2); width: calc(100% / 2);}

            .civic .grid li a div h3 { font-size: 150%; color: white; text-transform: uppercase;}}

            @media screen and (max-width: 660px) {.civic .grid li a div h3 { font-size: 150%;}}

            @media screen and (max-width: 480px) {.civic .grid li a div h3 { font-size: 120%;}}



             /* ====================================================================================================================================*/

            .historic { display: none; position: absolute;  width: 100%; height: 2500px; background: #000; left:0; top:50px;}

            .historic .grid { margin: 0 0 0 0; padding: 0; list-style: none; position: relative; max-width: 100%; padding-bottom: 100px;}

            .historic .grid li { position: relative; float: left; overflow: hidden; width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc(100% / 4);}

            .historic .grid li a,

            .historic .grid li a img { display: block; max-width: 100%; width: 100%; cursor: pointer; border: none; outline: none;}



            /* Flexbox is used for centering the heading */

            .historic .grid li a div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.1);

                 display: -webkit-flex;

                display: -moz-flex;

                display: -ms-flex;

                display: flex;

                -webkit-align-items: center;

                -moz-align-items: center;

                -ms-align-items: center;

                align-items: center;

                text-align: center;}

            .historic .grid li a:hover div { background: rgba(0,0,0,.5);}

            .historic .grid li a:hover div h3 { background: rgba(0,0,0,0);}

            .historic .grid li a div h3 { font-family: 'Oswald', sans-serif; font-size: 150%; letter-spacing: 2px; color: #fff; background: rgba(0,0,0,.5); display: block; padding: 10px 0 10px 0; text-transform: uppercase; font-weight: 400; text-align: center;}

             

            /* Example for media query: change number of items per row */

             

            @media screen and (max-width: 900px) {

            .historic .grid li { width: 25%; /* Fallback */ width: -webkit-calc(100% / 2); width: calc(100% / 2);}

            .historic .grid li a div h3 { font-size: 150%; color: white; text-transform: uppercase;}}

            @media screen and (max-width: 660px) {.historic .grid li a div h3 { font-size: 150%;}}

            @media screen and (max-width: 480px) {.historic .grid li a div h3 { font-size: 120%;}}



             /* ====================================================================================================================================*/

            .design_build { display: none; position: absolute;  width: 100%; height: 2500px; background: #000; left:0; top:50px;}

            .design_build .grid { margin: 0 0 0 0; padding: 0; list-style: none; position: relative; max-width: 100%; padding-bottom: 100px;}

            .design_build .grid li { position: relative; float: left; overflow: hidden; width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc(100% / 4);}

            .design_build .grid li a,

            .design_build .grid li a img { display: block; max-width: 100%; width: 100%; cursor: pointer; border: none; outline: none;}



            /* Flexbox is used for centering the heading */

            .design_build .grid li a div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.1);

                 display: -webkit-flex;

                display: -moz-flex;

                display: -ms-flex;

                display: flex;

                -webkit-align-items: center;

                -moz-align-items: center;

                -ms-align-items: center;

                align-items: center;

                text-align: center;}

            .design_build .grid li a:hover div { background: rgba(0,0,0,.5);}

            .design_build .grid li a:hover div h3 { background: rgba(0,0,0,0);}

            .design_build .grid li a div h3 { font-family: 'Oswald', sans-serif; font-size: 150%; letter-spacing: 2px; color: #fff; background: rgba(0,0,0,.5); display: block; padding: 10px 0 10px 0; text-transform: uppercase; font-weight: 400; text-align: center;}

             

            /* Example for media query: change number of items per row */

             

            @media screen and (max-width: 900px) {

            .design_build .grid li { width: 25%; /* Fallback */ width: -webkit-calc(100% / 2); width: calc(100% / 2);}

            .design_build .grid li a div h3 { font-size: 150%; color: white; text-transform: uppercase;}}

            @media screen and (max-width: 660px) {.design_build .grid li a div h3 { font-size: 150%;}}

            @media screen and (max-width: 480px) {.design_build .grid li a div h3 { font-size: 120%;}}



             /* ====================================================================================================================================*/

            .corporate { display: none; position: absolute;  width: 100%; height: 2500px; background: #000; left:0; top:50px;}

            .corporate .grid { margin: 0 0 0 0; padding: 0; list-style: none; position: relative; max-width: 100%; padding-bottom: 100px;}

            .corporate .grid li { position: relative; float: left; overflow: hidden; width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc(100% / 4);}

            .corporate .grid li a,

            .corporate .grid li a img { display: block; max-width: 100%; width: 100%; cursor: pointer; border: none; outline: none;}



            /* Flexbox is used for centering the heading */

            .corporate .grid li a div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.1);

                 display: -webkit-flex;

                display: -moz-flex;

                display: -ms-flex;

                display: flex;

                -webkit-align-items: center;

                -moz-align-items: center;

                -ms-align-items: center;

                align-items: center;

                text-align: center;}

            .corporate .grid li a:hover div { background: rgba(0,0,0,.5);}

            .corporate .grid li a:hover div h3 { background: rgba(0,0,0,0);}

            .corporate .grid li a div h3 { font-family: 'Oswald', sans-serif; font-size: 150%; letter-spacing: 2px; color: #fff; background: rgba(0,0,0,.5); display: block; padding: 10px 0 10px 0; text-transform: uppercase; font-weight: 400; text-align: center;}

             

            /* Example for media query: change number of items per row */

             

            @media screen and (max-width: 900px) {

            .corporate .grid li { width: 25%; /* Fallback */ width: -webkit-calc(100% / 2); width: calc(100% / 2);}

            .corporate .grid li a div h3 { font-size: 150%; color: white; text-transform: uppercase;}}

            @media screen and (max-width: 660px) {.corporate .grid li a div h3 { font-size: 150%;}}

            @media screen and (max-width: 480px) {.corporate .grid li a div h3 { font-size: 120%;}}



            /* ====================================================================================================================================*/

            .building_archive { display: none; position: absolute;  width: 100%; height: 1500px; background: #000; left:0; top:50px;}

            .building_archive .grid { margin: 0 0 0 0; padding: 0; list-style: none; position: relative; max-width: 100%; padding-bottom: 100px;}

            .building_archive .grid li { position: relative; float: left; overflow: hidden; width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc(100% / 4);}

            .building_archive .grid li a,

            .building_archive .grid li a img { display: block; max-width: 100%; width: 100%; cursor: pointer; border: none; outline: none;}



            /* Flexbox is used for centering the heading */

            .building_archive .grid li a div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.1);

                 display: -webkit-flex;

                display: -moz-flex;

                display: -ms-flex;

                display: flex;

                -webkit-align-items: center;

                -moz-align-items: center;

                -ms-align-items: center;

                align-items: center;

                text-align: center;}

            .building_archive .grid li a:hover div { background: rgba(0,0,0,.5);}

            .building_archive .grid li a:hover div h3 { background: rgba(0,0,0,0);}

            .building_archive .grid li a div h3 { font-family: 'Oswald', sans-serif; font-size: 150%; letter-spacing: 2px; color: #fff; background: rgba(0,0,0,.5); display: block; padding: 10px 0 10px 0; text-transform: uppercase; font-weight: 400; text-align: center;}

             

            /* Example for media query: change number of items per row */

             

            @media screen and (max-width: 900px) {

            .building_archive .grid li { width: 25%; /* Fallback */ width: -webkit-calc(100% / 2); width: calc(100% / 2);}

            .building_archive .grid li a div h3 { font-size: 150%; color: white; text-transform: uppercase;}}

            @media screen and (max-width: 660px) {.building_archive .grid li a div h3 { font-size: 150%;}}

            @media screen and (max-width: 480px) {.building_archive .grid li a div h3 { font-size: 120%;}}





             /* ====================================================================================================================================*/

            .highered { display: none; position: absolute;  width: 100%; height: 2500px; background: #000; left:0; top:50px;}

            .highered .grid { margin: 0 0 0 0; padding: 0; list-style: none; position: relative; max-width: 100%; padding-bottom: 100px;}

            .highered .grid li { position: relative; float: left; overflow: hidden; width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc(100% / 4);}

            .highered .grid li a,

            .highered .grid li a img { display: block; max-width: 100%; width: 100%; cursor: pointer; border: none; outline: none;}



            /* Flexbox is used for centering the heading */

            .highered .grid li a div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.1);

                 display: -webkit-flex;

                display: -moz-flex;

                display: -ms-flex;

                display: flex;

                -webkit-align-items: center;

                -moz-align-items: center;

                -ms-align-items: center;

                align-items: center;

                text-align: center;}

            .highered .grid li a:hover div { background: rgba(0,0,0,.5);}

            .highered .grid li a:hover div h3 { background: rgba(0,0,0,0);}

            .highered .grid li a div h3 { font-family: 'Oswald', sans-serif; font-size: 150%; letter-spacing: 2px; color: #fff; background: rgba(0,0,0,.5); display: block; padding: 10px 0 10px 0; text-transform: uppercase; font-weight: 400; text-align: center;}

             

            /* Example for media query: change number of items per row */

             

            @media screen and (max-width: 900px) {

            .highered .grid li { width: 25%; /* Fallback */ width: -webkit-calc(100% / 2); width: calc(100% / 2);}

            .highered .grid li a div h3 { font-size: 150%; color: white; text-transform: uppercase;}}

            @media screen and (max-width: 660px) {.highered .grid li a div h3 { font-size: 150%;}}

            @media screen and (max-width: 480px) {.highered .grid li a div h3 { font-size: 120%;}}





                                             /* ====================================================================================================================================*/

                                            .athletic { display: none; position: absolute; width: 100%; height: 2500px; background: #000; left:0; top:50px;}

                                            .athletic .grid { margin: 0 0 0 0; padding: 0; list-style: none; position: relative; max-width: 100%; padding-bottom: 100px;}

                                            .athletic .grid li { position: relative; float: left; overflow: hidden; width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc(100% / 4);}

                                            .athletic .grid li a,

                                            .athletic .grid li a img { display: block; max-width: 100%; width: 100%; cursor: pointer; border: none; outline: none;}



                                            /* Flexbox is used for centering the heading */

                                            .athletic .grid li a div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.1);

                                                display: -webkit-flex;

                                                display: -moz-flex;

                                                display: -ms-flex;

                                                display: flex;

                                                -webkit-align-items: center;

                                                -moz-align-items: center;

                                                -ms-align-items: center;

                                                align-items: center;

                                                text-align: center;}

                                            .athletic .grid li a:hover div { background: rgba(0,0,0,.5);}

                                            .athletic .grid li a:hover div h3 { background: rgba(0,0,0,0);}

                                            .athletic .grid li a div h3 {  font-family: 'Oswald', sans-serif; font-size: 150%; letter-spacing: 2px; color: #fff; background: rgba(0,0,0,.5); display: block; padding: 10px 0 10px 0; text-transform: uppercase; font-weight: 400; text-align: center;}

                                             

                                            /* Example for media query: change number of items per row */

                                             

                                            @media screen and (max-width: 900px) {

                                            .athletic .grid li { width: 25%; /* Fallback */  width: -webkit-calc(100% / 2);  width: calc(100% / 2);}

                                            .athletic .grid li a div h3 { font-size: 150%; color: white; text-transform: uppercase;}}

                                            @media screen and (max-width: 660px) {.athletic .grid li a div h3 { font-size: 150%;}}

                                            @media screen and (max-width: 480px) {.athletic .grid li a div h3 { font-size: 120%;}}











                                            /* ====================================================================================================================================*/

                                            .newres { display: none; position: absolute;  width: 100%;  height: 2500px;  background: #000;  left:0;  top:50px;}

                                            .newres .grid { margin: 0 0 0 0; padding: 0; list-style: none; position: relative; max-width: 100%; padding-bottom: 100px;}

                                            .newres .grid li { position: relative; float: left; overflow: hidden; width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc(100% / 4);}

                                            .newres .grid li a,

                                            .newres .grid li a img { display: block; max-width: 100%; width: 100%; cursor: pointer; border: none; outline: none;}



                                            /* Flexbox is used for centering the heading */

                                            .newres .grid li a div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.1);

                                                display: -webkit-flex;

                                                display: -moz-flex;

                                                display: -ms-flex;

                                                display: flex;

                                                -webkit-align-items: center;

                                                -moz-align-items: center;

                                                -ms-align-items: center;

                                                align-items: center;

                                                text-align: center;}

                                            .newres .grid li a:hover div { background: rgba(0,0,0,.5);}

                                            .newres .grid li a:hover div h3 { background: rgba(0,0,0,0);}

                                            .newres .grid li a div h3 { font-family: 'Oswald', sans-serif; font-size: 150%; letter-spacing: 2px; color: #fff; background: rgba(0,0,0,.5); display: block; padding: 10px 0 10px 0; text-transform: uppercase; font-weight: 400; text-align: center;}



                                            /* Example for media query: change number of items per row */

                                            @media screen and (max-width: 900px) {

                                            .newres .grid li { width: 25%; /* Fallback */ width: -webkit-calc(100% / 2);  width: calc(100% / 2);  }

                                            .newres .grid li a div h3 { font-size: 150%; color: white; text-transform: uppercase;}}

                                            @media screen and (max-width: 660px) {.newres .grid li a div h3 { font-size: 150%;}}

                                            @media screen and (max-width: 480px) {.newres .grid li a div h3 { font-size: 120%;}}











                                            /* ====================================================================================================================================*/

                                            .oldres { display: none; position: absolute;  width: 100%;  height: 2500px;  background: #000;  left:0;  top:50px;}

                                            .oldres .grid { margin: 0 0 0 0; padding: 0; list-style: none; position: relative; max-width: 100%; padding-bottom: 100px;}

                                            .oldres .grid li { position: relative; float: left; overflow: hidden; width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc(100% / 4);}

                                            .oldres .grid li a,

                                            .oldres .grid li a img { display: block; max-width: 100%; width: 100%; cursor: pointer; border: none; outline: none;}



                                            /* Flexbox is used for centering the heading */

                                            .oldres .grid li a div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.1);

                                                display: -webkit-flex;

                                                display: -moz-flex;

                                                display: -ms-flex;

                                                display: flex;

                                                -webkit-align-items: center;

                                                -moz-align-items: center;

                                                -ms-align-items: center;

                                                align-items: center;

                                                text-align: center;}

                                            .oldres .grid li a:hover div { background: rgba(0,0,0,.5);}

                                            .oldres .grid li a:hover div h3 { background: rgba(0,0,0,0);}

                                            .oldres .grid li a div h3 { font-family: 'Oswald', sans-serif; font-size: 150%; letter-spacing: 2px; color: #fff; background: rgba(0,0,0,.5); display: block; padding: 10px 0 10px 0; text-transform: uppercase; font-weight: 400; text-align: center;}



                                            /* Example for media query: change number of items per row */

                                            @media screen and (max-width: 900px) {

                                            .oldres .grid li { width: 25%; /* Fallback */ width: -webkit-calc(100% / 2);  width: calc(100% / 2);  }

                                            .oldres .grid li a div h3 { font-size: 150%; color: white; text-transform: uppercase;}}

                                            @media screen and (max-width: 660px) {.oldres .grid li a div h3 { font-size: 150%;}}

                                            @media screen and (max-width: 480px) {.oldres .grid li a div h3 { font-size: 120%;}}







                                            /* ====================================================================================================================================*/

                                            .classrooms { display: none; position: absolute;  width: 100%;  height: 2500px;  background: #000;  left:0;  top:50px;}

                                            .classrooms .grid { margin: 0 0 0 0; padding: 0; list-style: none; position: relative; max-width: 100%; padding-bottom: 100px;}

                                            .classrooms .grid li { position: relative; float: left; overflow: hidden; width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc(100% / 4);}

                                            .classrooms .grid li a,

                                            .classrooms .grid li a img { display: block; max-width: 100%; width: 100%; cursor: pointer; border: none; outline: none;}



                                            /* Flexbox is used for centering the heading */

                                            .classrooms .grid li a div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.1);

                                                display: -webkit-flex;

                                                display: -moz-flex;

                                                display: -ms-flex;

                                                display: flex;

                                                -webkit-align-items: center;

                                                -moz-align-items: center;

                                                -ms-align-items: center;

                                                align-items: center;

                                                text-align: center;}

                                            .classrooms .grid li a:hover div { background: rgba(0,0,0,.5);}

                                            .classrooms .grid li a:hover div h3 { background: rgba(0,0,0,0);}

                                            .classrooms .grid li a div h3 { font-family: 'Oswald', sans-serif; font-size: 150%; letter-spacing: 2px; color: #fff; background: rgba(0,0,0,.5); display: block; padding: 10px 0 10px 0; text-transform: uppercase; font-weight: 400; text-align: center;}



                                            /* Example for media query: change number of items per row */

                                            @media screen and (max-width: 900px) {

                                            .classrooms .grid li { width: 25%; /* Fallback */ width: -webkit-calc(100% / 2);  width: calc(100% / 2);  }

                                            .classrooms .grid li a div h3 { font-size: 150%; color: white; text-transform: uppercase;}}

                                            @media screen and (max-width: 660px) {.classrooms .grid li a div h3 { font-size: 150%;}}

                                            @media screen and (max-width: 480px) {.classrooms .grid li a div h3 { font-size: 120%;}}









                                            /* ====================================================================================================================================*/

                                            .highed_libraries { display: none; position: absolute;  width: 100%;  height: 2500px;  background: #000;  left:0;  top:50px;}

                                            .highed_libraries .grid { margin: 0 0 0 0; padding: 0; list-style: none; position: relative; max-width: 100%; padding-bottom: 100px;}

                                            .highed_libraries .grid li { position: relative; float: left; overflow: hidden; width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc(100% / 4);}

                                            .highed_libraries.grid li a,

                                            .highed_libraries .grid li a img { display: block; max-width: 100%; width: 100%; cursor: pointer; border: none; outline: none;}



                                            /* Flexbox is used for centering the heading */

                                            .highed_libraries .grid li a div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.1);

                                                display: -webkit-flex;

                                                display: -moz-flex;

                                                display: -ms-flex;

                                                display: flex;

                                                -webkit-align-items: center;

                                                -moz-align-items: center;

                                                -ms-align-items: center;

                                                align-items: center;

                                                text-align: center;}

                                            .highed_libraries .grid li a:hover div { background: rgba(0,0,0,.5);}

                                            .highed_libraries .grid li a:hover div h3 { background: rgba(0,0,0,0);}

                                            .highed_libraries .grid li a div h3 { font-family: 'Oswald', sans-serif; font-size: 150%; letter-spacing: 2px; color: #fff; background: rgba(0,0,0,.5); display: block; padding: 10px 0 10px 0; text-transform: uppercase; font-weight: 400; text-align: center;}



                                            /* Example for media query: change number of items per row */

                                            @media screen and (max-width: 900px) {

                                            .highed_libraries .grid li { width: 25%; /* Fallback */ width: -webkit-calc(100% / 2);  width: calc(100% / 2);  }

                                            .highed_libraries .grid li a div h3 { font-size: 150%; color: white; text-transform: uppercase;}}

                                            @media screen and (max-width: 660px) {.highed_libraries .grid li a div h3 { font-size: 150%;}}

                                            @media screen and (max-width: 480px) {.highed_libraries .grid li a div h3 { font-size: 120%;}}











                                            /* ====================================================================================================================================*/

                                            .dining { display: none; position: absolute;  width: 100%;  height: 2500px;  background: #000;  left:0;  top:50px;}

                                            .dining .grid { margin: 0 0 0 0; padding: 0; list-style: none; position: relative; max-width: 100%; padding-bottom: 100px;}

                                            .dining .grid li { position: relative; float: left; overflow: hidden; width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc(100% / 4);}

                                            .dining.grid li a,

                                            .dining .grid li a img { display: block; max-width: 100%; width: 100%; cursor: pointer; border: none; outline: none;}



                                            /* Flexbox is used for centering the heading */

                                            .dining .grid li a div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.1);

                                                display: -webkit-flex;

                                                display: -moz-flex;

                                                display: -ms-flex;

                                                display: flex;

                                                -webkit-align-items: center;

                                                -moz-align-items: center;

                                                -ms-align-items: center;

                                                align-items: center;

                                                text-align: center;}

                                            .dining .grid li a:hover div { background: rgba(0,0,0,.5);}

                                            .dining .grid li a:hover div h3 { background: rgba(0,0,0,0);}

                                            .dining .grid li a div h3 { font-family: 'Oswald', sans-serif; font-size: 150%; letter-spacing: 2px; color: #fff; background: rgba(0,0,0,.5); display: block; padding: 10px 0 10px 0; text-transform: uppercase; font-weight: 400; text-align: center;}



                                            /* Example for media query: change number of items per row */

                                            @media screen and (max-width: 900px) {

                                            .dining .grid li { width: 25%; /* Fallback */ width: -webkit-calc(100% / 2);  width: calc(100% / 2);  }

                                            .dining .grid li a div h3 { font-size: 150%; color: white; text-transform: uppercase;}}

                                            @media screen and (max-width: 660px) {.dining .grid li a div h3 { font-size: 150%;}}

                                            @media screen and (max-width: 480px) {.dining .grid li a div h3 { font-size: 120%;}}











                                            /* ====================================================================================================================================*/

                                            .highed_worship { display: none; position: absolute;  width: 100%;  height: 2500px;  background: #000;  left:0;  top:50px;}

                                            .highed_worship .grid { margin: 0 0 0 0; padding: 0; list-style: none; position: relative; max-width: 100%; padding-bottom: 100px;}

                                            .highed_worship .grid li { position: relative; float: left; overflow: hidden; width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc(100% / 4);}

                                            .highed_worship.grid li a,

                                            .highed_worship .grid li a img { display: block; max-width: 100%; width: 100%; cursor: pointer; border: none; outline: none;}



                                            /* Flexbox is used for centering the heading */

                                            .highed_worship .grid li a div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.1);

                                                display: -webkit-flex;

                                                display: -moz-flex;

                                                display: -ms-flex;

                                                display: flex;

                                                -webkit-align-items: center;

                                                -moz-align-items: center;

                                                -ms-align-items: center;

                                                align-items: center;

                                                text-align: center;}

                                            .highed_worship .grid li a:hover div { background: rgba(0,0,0,.5);}

                                            .highed_worship .grid li a:hover div h3 { background: rgba(0,0,0,0);}

                                            .highed_worship .grid li a div h3 { font-family: 'Oswald', sans-serif; font-size: 150%; letter-spacing: 2px; color: #fff; background: rgba(0,0,0,.5); display: block; padding: 10px 0 10px 0; text-transform: uppercase; font-weight: 400; text-align: center;}



                                            /* Example for media query: change number of items per row */

                                            @media screen and (max-width: 900px) {

                                            .highed_worship .grid li { width: 25%; /* Fallback */ width: -webkit-calc(100% / 2);  width: calc(100% / 2);  }

                                            .highed_worship .grid li a div h3 { font-size: 150%; color: white; text-transform: uppercase;}}

                                            @media screen and (max-width: 660px) {.highed_worship .grid li a div h3 { font-size: 150%;}}

                                            @media screen and (max-width: 480px) {.highed_worship .grid li a div h3 { font-size: 120%;}}



                                            /* ====================================================================================================================================*/

                                            .highed_planning { display: none; position: absolute;  width: 100%;  height: 2500px;  background: #000;  left:0;  top:50px;}

                                            .highed_planning .grid { margin: 0 0 0 0; padding: 0; list-style: none; position: relative; max-width: 100%; padding-bottom: 100px;}

                                            .highed_planning .grid li { position: relative; float: left; overflow: hidden; width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc(100% / 4);}

                                            .highed_planning .grid li a,

                                            .highed_planning .grid li a img { display: block; max-width: 100%; width: 100%; cursor: pointer; border: none; outline: none;}



                                            /* Flexbox is used for centering the heading */

                                            .highed_planning .grid li a div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.1);

                                                display: -webkit-flex;

                                                display: -moz-flex;

                                                display: -ms-flex;

                                                display: flex;

                                                -webkit-align-items: center;

                                                -moz-align-items: center;

                                                -ms-align-items: center;

                                                align-items: center;

                                                text-align: center;}

                                            .highed_planning .grid li a:hover div { background: rgba(0,0,0,.5);}

                                            .highed_planning .grid li a:hover div h3 { background: rgba(0,0,0,0);}

                                            .highed_planning .grid li a div h3 { font-family: 'Oswald', sans-serif; font-size: 150%; letter-spacing: 2px; color: #fff; background: rgba(0,0,0,.5); display: block; padding: 10px 0 10px 0; text-transform: uppercase; font-weight: 400; text-align: center;}



                                            /* Example for media query: change number of items per row */

                                            @media screen and (max-width: 900px) {

                                            .highed_planning .grid li { width: 25%; /* Fallback */ width: -webkit-calc(100% / 2);  width: calc(100% / 2);  }

                                            .highed_planning .grid li a div h3 { font-size: 150%; color: white; text-transform: uppercase;}}

                                            @media screen and (max-width: 660px) {.highed_planning .grid li a div h3 { font-size: 150%;}}

                                            @media screen and (max-width: 480px) {.highed_planning .grid li a div h3 { font-size: 120%;}}







                                            /* ====================================================================================================================================*/

                                            .highed_archive { display: none; position: absolute;  width: 100%;  height: 2500px;  background: #000;  left:0;  top:50px;}

                                            .highed_archive .grid { margin: 0 0 0 0; padding: 0; list-style: none; position: relative; max-width: 100%; padding-bottom: 100px;}

                                            .highed_archive .grid li { position: relative; float: left; overflow: hidden; width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc(100% / 4);}

                                            .highed_archive .grid li a,

                                            .highed_archive .grid li a img { display: block; max-width: 100%; width: 100%; cursor: pointer; border: none; outline: none;}



                                            /* Flexbox is used for centering the heading */

                                            .highed_archive .grid li a div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.1);

                                                display: -webkit-flex;

                                                display: -moz-flex;

                                                display: -ms-flex;

                                                display: flex;

                                                -webkit-align-items: center;

                                                -moz-align-items: center;

                                                -ms-align-items: center;

                                                align-items: center;

                                                text-align: center;}

                                            .highed_archive .grid li a:hover div { background: rgba(0,0,0,.5);}

                                            .highed_archive .grid li a:hover div h3 { background: rgba(0,0,0,0);}

                                            .highed_archive .grid li a div h3 { font-family: 'Oswald', sans-serif; font-size: 150%; letter-spacing: 2px; color: #fff; background: rgba(0,0,0,.5); display: block; padding: 10px 0 10px 0; text-transform: uppercase; font-weight: 400; text-align: center;}



                                            /* Example for media query: change number of items per row */

                                            @media screen and (max-width: 900px) {

                                            .highed_archive .grid li { width: 25%; /* Fallback */ width: -webkit-calc(100% / 2);  width: calc(100% / 2);  }

                                            .highed_archive .grid li a div h3 { font-size: 150%; color: white; text-transform: uppercase;}}

                                            @media screen and (max-width: 660px) {.highed_archive .grid li a div h3 { font-size: 150%;}}

                                            @media screen and (max-width: 480px) {.highed_archive .grid li a div h3 { font-size: 120%;}}











/* ========================================================================================================================================== RESPONSIVE GRIDS */



/*  SECTIONS  ============================================================================= */



.section {

    clear: both;

    margin: 0px;

}



/*  GROUPING  ============================================================================= */





.group:before,

.group:after {

    content:"";

    display:table;

}

.group:after {

    clear:both;

}

.group {

    zoom:1; /* For IE 6/7 (trigger hasLayout) */

}



/*  GRID COLUMN SETUP   ==================================================================== */



.col {

    display: block;

    float:left;

    margin: 1% 0 1% 1.6%;

}



.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */







/*  GRID OF THREE   ============================================================================= */



    

.span_4_of_4 {

    width: 100%; 

    padding: 1%;

}



.span_2_of_4 {

    width: 45%; 

    padding: 1%;

}



.span_1_of_4 {

    width: 21%; 

    padding: 1%;

}





@media screen and (max-width: 945px) {



    .span_1_of_4 {

    width: 100%; 

    padding: 1%;

}



.span_2_of_4 {

    width:100%;

    padding:1%;

}



.content {

    position: relative;

    padding: 20px 5% 20px 5%;

    max-width: 100%;

    top: 40px;

}

}