html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100%;
    width: 100%;
}

.row, .col {
    overflow: hidden;
    position: absolute;
}

.row {
    left: 0;
    right: 0;
}

.col {
    top: 0;
    bottom: 0;
}

.scroll-x {
    overflow-x: auto;
}

.scroll-y {
    overflow-y: auto;
}

.gray {
    color: #aaa;
}



/********* Top Level Layout ***********/

.header.row {
    background-color: #001539;
    height: 75px;
}

.dropdown.row {
    display: none;
    background-color: white;
    z-index: 10;
    top: 75px;
}

.content.row {
    top: 75px;
    bottom: 0;
}




/******* Heading / Crest **********/


.crest.col {
    z-index: 20;
    height: 110px;
    text-align: center;
}

.crest img {
    width: 100px;
}

.title {
    margin-top: 0;
    margin-left: 100px;
    font-size: 35px; font-size: 3.5rem;
    font-weight: 200;
    color: white;
    line-height: 38px; line-height: 3.8rem;
    border-bottom: 1px solid gray;
}

.title strong {
    font-weight: bold;
}





/******** Navigation Menus ********/

/* Secondary Nav */

.utilnav {
    right: 0;
    padding: 0;
    margin-top: 5px;
    list-style: none;
}

.utilnav li {
    display: inline;
    padding: 0 10px;
    cursor: pointer;
}

li.utilnavdesk {
    display: inline;
}

img.unavbtn {
    width: 35px;
}

/* Main Menu */

nav {
    width: 100%;
    /*height: auto;*/
    background-color: #001539;
    top: 45px;
    z-index: 10;
}

.mainnav {
    margin: 0;
    /*height: auto;
    list-style: none;*/
    padding: 0 0 0 90px;
}

.mainnav li {
    display: inline;
    padding: 0 20px;
    border-right: 1px solid #346;
}

.mainnav li a {
    color: white;
    text-decoration: none;
}

.mainnav li a:hover {
    text-decoration: underline;
}

li.mainnavmobi {
    display: none;
}

#pull {
    display: none;
}

.dropdown-page {
    display: none;
    background-color: #fafad2;
}



/******* Search bar ********/

.search-results-bar{
    padding: 20px;
    color: #565656;
    background-color: #f7f7f7;
    border-bottom: 1px solid #d7d7d7;
    text-align: center;
    cursor: pointer;
    font-size: 16px; font-size: 1.6rem;
}

#search-input{
    height: 15%;
    border-bottom: 1px solid #d9d9d9;
    text-align: center;
    padding-top: 0.5%;
}

.fancyInput {
    max-width: 80%;
    min-width: 80%;
    vertical-align: middle;
    overflow: hidden;
    text-align: left;
    border: none;
    outline: none;
    padding-left: 65px;
    font-size: 90px; font-size: 9rem;
    background: url(../images/basearch.png) no-repeat left;
}

.fancyInput.textarea {
    max-width: 50%;
    min-height: 160px;
    max-height: 40%;
    font-size: 40px; font-size: 4rem;
}


@keyframes caret{
    50%{ opacity:0.1; transform:scaleY(.8); }
}
@-webkit-keyframes caret{
    50%{ opacity:0.1; -webkit-transform:scaleY(.8); }
}

.fancyInput :-moz-placeholder{ color:rgba(255,255,255,0.2); } /* deprecated. but works for now. should use double '::'*/
.fancyInput :-webkit-placeholder{ color:rgba(255,255,255,0.2); }

.fancyInput{ display:inline-block; letter-spacing:-1px; text-shadow:0 2px 5px rgba(0,0,0,.6); white-space:nowrap; width:auto; font-family:'Fjalla One', sans-serif; position:relative; }

/*.fancyInput.textarea{ white-space:normal; overflow:auto; }*/
.fancyInput input { color:transparent; position:absolute; z-index:2; width:100%; border:0; outline:0; top:0px; left:0; background:none; padding:inherit; padding-bottom:0; font-family:'Fjalla One', sans-serif; font-size:inherit; letter-spacing:-1px;  -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }
/*.fancyInput input, textarea{ color:transparent; position:absolute; z-index:2; width:100%; border:0; outline:0; top:0px; left:0; background:none; padding:inherit; padding-bottom:0; font-family:'Fjalla One', sans-serif; font-size:inherit; letter-spacing:-1px;  -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }*/
.fancyInput input{ top:1px; left:-1px; padding-right:0; }
.fancyInput textarea{ word-break:break-all; overflow:hidden; height:100%; }
.fancyInput > div{ display:inline-block; }
.fancyInput.textarea > div{ width:99.9%; }

.fancyInput *:focus ~ .caret,
.fancyInput *:focus ~ div .caret{ opacity:.8; box-shadow:0 0 8px #FFF; -webkit-animation:0.4s 40ms caret infinite; animation:0.4s 40ms caret infinite; }
.fancyInput .caret:only-child{  }
.fancyInput .caret{ font-weight:normal; opacity:0; display:inline-block; width:3px; margin-left:-3px; background:#FFF; border-radius:4px; -moz-user-select:none; }
.fancyInput span:not(.deleted) ~ .caret{ position:absolute; margin:0; } /* only Caret which is  */

/* letters */
.fancyInput > div span{ -webkit-transition:100ms cubic-bezier(0.08, 0.6, 0.56, 1.4); transition:100ms cubic-bezier(0.08, 0.6, 0.56, 1.4); display:inline-block; position:relative; }
.fancyInput > input[type=password] + div span:empty::after{ content:'●'; display:inline; }
.fancyInput > div .deleted{ opacity:0; -webkit-transition:140ms; transition:140ms; -webkit-transform:translateX(12px); transform:translateX(12px); }

/*.fancyInput > div span:last-of-type ~ br{ display:block; white-space:pre; }*/
/*.fancyInput br:last-of-type + .caret{ position:static; display:inline-block; }*/

/* text effects */
.fancyInput > div span.state1{ -webkit-transform:translateY(-25px) rotateX(90deg); transform:translateY(-25px) rotateX(90deg); }
.fancyInput > div span.state2{ -webkit-transform:translateY(25px) rotateX(90deg); transform:translateY(25px) rotateX(90deg); }


/* DEMO text effects */
.effect2 .fancyInput > div span.state1,
.effect2 .fancyInput > div span.state2{ -webkit-transform:translateX(10px) scale(1.8); transform:translateX(10px) scale(1.8); }

.effect3 .fancyInput > div span{ -webkit-transition:200ms cubic-bezier(0.08, 0.6, 0.56, 1.4); transition:200ms cubic-bezier(0.08, 0.6, 0.56, 1.4); }
.effect3 .fancyInput > div span.state1,
.effect3 .fancyInput > div span.state2{ opacity:0; -webkit-transform:scale(0.4); transform:scale(0.4); -webkit-filter:blur(2px); }

.effect4 .fancyInput > div span{ -webkit-transition-duration:150ms; transition-duration:150ms; }
.effect4 .fancyInput > div span.state1,
.effect4 .fancyInput > div span.state2{ opacity:0; -webkit-transform:translateY(-60px); transform:translateY(-60px); }

.effect5 .fancyInput > div span{ -webkit-transition-duration:150ms; transition-duration:150ms; }
.effect5 .fancyInput > div span.state1,
.effect5 .fancyInput > div span.state2{ opacity:0; -webkit-transform:translateX(-30px); transform:translateX(-30px); opacity:0; }



/******* Contact and Accessibility ******/

.utility {
    padding: 2rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 500;
}

.utility-accent {
    font-size: 1.8rem;
}