@import url(//fonts.googleapis.com/css?family=Lato:300,400,700|Arimo:400,400italic,700);

/* COLORS ====================
LOGO: #2d91a9 teal // #86172e red
#002242 dark navy 
#1d4b76 medium blue 
#39a4d1 bluegreen
#8ba8c2 light blue-gray (text)
#d2e9fe light blue (nav links)
#c6e4ff light blue (footer title)
#748fa8 gray (dropdown icon)
=========================== */

body {
    background-color: #052544; /*match footer-bg.png*/
    }
    
body, p, ul, ol, li {
    font-family: 'Arimo', 'Helvetica', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #445461;
    }

h1, h2, h3, h4, h5, h6, .site-title {
    font-family: 'Lato', 'Helvetica', sans-serif;
    }

h1, h2, h3, h4, h5, h6 {
    color: #002242;
    }

h1 {
    font-size: 28px; font-size: 1.75rem;
	line-height: 34px; line-height: 2.125rem;
	font-weight: 700;
	}

h2 {
    font-size: 24px; font-size: 1.5rem;
	line-height: 30px; line-height: 1.875rem;
	}

h3 {
    font-size: 22px; font-size: 1.375rem;
	line-height: 28px; line-height: 1.75rem;
    }

h4 {
    font-size: 20px; font-size: 1.25rem;
	line-height: 28px; line-height: 1.75rem;
    }

h5 {
    font-size: 18px; font-size: 1.125rem;
	line-height: 28px; line-height: 1.75rem;
    }

h2, h3, h4, h5, h6 {
    font-weight: 400;
    letter-spacing: 1px;
    }

p {
    margin: 10px 0 25px 0;
    line-height: 28px;
    }

a {
    color: #86172e;
    }

a:hover {
    color: #39a4d1;
    }

a, a:visited, a p, a:visited p, button {
    word-wrap: break-word;
    text-decoration: none;
	-ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
    }

a:hover img, a:hover + figcaption, a:hover figcaption {
    opacity: 0.7;
	-ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
	color: #86172e;
    }

strong {
    font-weight: 700;
}

button:focus, #navBtn button:focus, button.search:focus, input:focus {
    outline: -webkit-focus-ring-color auto 1px;
}

blockquote {
    background-color: transparent;
    display: flex;
    }

blockquote p {
    font-size: 16px; font-size: 1rem;
    font-style: italic;
    color: #1d4b76;
    margin-left: 10px;
    }

blockquote:before {
    color: #c6e4ff;
    background-color: #2d91a9;
    content: "\201C";
    font-family: Georgia, serif;
    font-size: 53px;
    margin-top: 7px;
    padding: 15px 14px 2px 5px;
    width: 11px;
    height: 11px;
    -webkit-border-radius: 20px; /* Safari 3-4, iOS 1-3.2, Android 1.6- */ 
    -moz-border-radius: 20px; /* Firefox 1-3.6 */
    -o-border-radius: 20px;
    border-radius: 20px;
    }

input {
    padding: 8px;
    -moz-appearance: none;
    -webkit-appearance: none; 
    -webkit-border-radius: 0px; /* Safari 3-4, iOS 1-3.2, Android 1.6- */ 
    -moz-border-radius: 0px; /* Firefox 1-3.6 */
    -o-border-radius: 0px;
    border-radius: 0px;
	border: none;
	outline: none;
    font-family: 'Arimo', 'Helvetica', sans-serif;
	}

input[type="text"] {
    background-color: #9bb2c7;
    letter-spacing: .5px;
    font-style: italic;
    }

::-webkit-input-placeholder {
    color: black;
    }

:-moz-placeholder { /* Firefox 18- */
    color: black;
    }

::-moz-placeholder {  /* Firefox 19+ */
    color: black;
    }

:-ms-input-placeholder {  
    color: black;
    }    
/* ========CKEDITOR 1.3.0-pl=========== */

figure {
    display: table;
    }

figure a, main a img, a + figcaption {
	display: block;
	transition: .5s;
	}

figure img {
    vertical-align: bottom;
    }

figcaption {
    color: #1d4b76;
    background: #d2e9fe;
    font-size: 12px;
    line-height: 18px;
	display: table-caption;
    caption-side: bottom;
	padding: 5px;
    }

.light-font-weight {
    font-weight: 300;
    }
    
.wrap {
    background-color: #d9e3ec;
}

/* ==========HEADER=========== header with opacity blue behind it */
header {
    background: #1d4b76;
    background: linear-gradient(0deg, rgba(85,123,157,1) 0%, rgba(85,123,157,1) 3%, rgba(66,107,144,1) 25%, rgba(29,75,118,1) 80%);
    }

header .logo {
    margin: 20px 0;
    }

header .site-logo-and-title {
    margin: 10px 0;
    }

header .flex {
    align-items: center;
}

.site-logo-and-title a {
    margin-left: 25px;
}
        
header h1, .site-title {
    display: inline;
    margin-left: 5px;
    margin-top: -10px;
    font-size: 36px; 
    letter-spacing: 2px;
}
    
/*header links*/
header a {
    color: white;
    }

header a:hover {
    color: #c6e4ff;
    }
/*header images aka logos*/    
header img {
    max-width: none;
    }
    
/*pennmedicine logo*/
header .logo img {
    min-width: 245px;
}    
/*cci logo*/
.site-logo-and-title img {
    vertical-align: middle;
    width: 42px;
    }

header .logo a img, .site-logo-and-title img {
    border: none; /*IE*/
    }
   
/* ==========NAVIGATION=========== */

/* mobile navigation */
#navBtn, .mobile-nav-close-btn {
    display: none;
    cursor: pointer;
    }

/* general navigation */
nav {
    font-family: 'Arimo', 'Helvetica', sans-serif;
    color: white;
	background: #002242;
    }

nav ul {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    text-align: center;
	float: left;
	}

nav li {
    position: relative;
    float: left;
    margin: 0px;
    list-style-type: none;
    font-size: 16px;
	z-index: 800; 
    }

nav a, .nav-button {
    display: block;
    padding: 10px 20px; /*take off in mobile*/
    z-index: 820;   
    font-family: 'Arimo', 'Helvetica', sans-serif;
    font-size: 16px;
    line-height: 26px;
	font-weight: 400;
    color: white;
	letter-spacing: 1.25px;
    }

nav a:hover, nav a:hover i, .nav-button:hover  {
	color: #fff; 
	}

nav a:hover, .nav-button:hover, 
nav .for.patients a:hover {
    background-color: #86172e; 
    opacity: 1;
    cursor: pointer;
    }
    
.nav-button {
    background: transparent;
    border: none;
}    
/*NAV ICONS*/
nav a[target="_blank"]:after {
	font-family: fontAwesome;
	content: "\f14c";
	margin-left: 5px;
	}

nav i.fa-play-circle {
    font-size: 13px;
    color: #8ba8c2; /*748fa8;*/
    }
    
/* reveal subnav display block */
nav ul li:hover ul, .nav-submenu-open {
	display: block; 
    }

nav ul ul {  
	display: none; /* Hide Subnav items */
 	position: absolute; /*Position absolute in order to control width */
    left: 0;
    top: 100%;
    z-index: 500;  
 	width: 225px; /* Set width */
    padding-left: 0;
	}	

nav ul ul li {
	background: rgba(0,34,66,0.9);
    display: block;
    width: 100%;
    text-align: left;
    font-size: 14px;
	line-height: 18px;
    }

nav ul ul li a {
    padding: 15px 20px;
    }

/* FOR: navigation */

nav .users {
    background-color: #000f2f;
	text-transform: capitalize;
    }

nav .users li.padding {
    padding: 10px 15px;
    color: white; /*#8ba8c2;*/
    font-size: 13px;
    }

nav .users .fa-user {
    background-color: transparent;
    color: #8ba8c2; /*86172e*/
    font-size: 18px;
    margin-right: 3px;
    }

nav .users li {
    font-family: 'Lato', Arial, sans-serif;
	text-transform: uppercase;
    z-index: 300;    /*transparent bg*/
    }

nav .users li a {
    font-size: 14px;
    z-index: 350;    /*transparent bg*/
    }

nav .users ul {
    width: 250px;
    }    

nav .users li li {
    font-family: 'Arimo', 'Helvetica', sans-serif;
    text-transform: capitalize;
    }

nav .users > li:nth-child(2) {
    background-color: #06719E; 
    }

nav .users > li:nth-child(2) i,
nav .users > li:nth-child(2) a {
    color: #FFF;
    }
    
nav .users > li:nth-child(3) {   
    background-color: #17436b;
    background-color: rgba(29, 75, 118, 0.8); 
    }

/*===Content===*/
main {background-color: #d9e3ec;}

main.home {
    padding: 40px 0;
    }

main.home .grid .unit {
    padding: 10px 20px;
    }

main ul,
main ol {
    margin: 15px 0px 20px 30px;
    }

main .grid .unit {
    padding: 10px 20px 30px 20px;
	}

main .unit.three-quarters {
    padding: 0 !important;
	}

main h1, main.home h2, main.home h3, 
.sidebar > h3, .featured > h3, .sidebar > h2, .featured > h2 {
    margin: 0;
    padding: 10px 20px;
    text-transform: uppercase;
    font-weight: 700;
	background: rgba(255,255,255,.8);
	}

main .whole .unit, main .unit.three-quarters .unit {
	background: #fff;
	}

main .unit > h3 {
	margin-top: 10px;
	}

main .unit.sidebar > h3 {
	margin-top: 0px;
	}

main .unit.one-quarter.sidebar {
    padding-top: 0;
	padding-right: 0;
	}

.sidebar .unit {
    padding: 10px 20px !important;
    background: #fff;
	margin-bottom: 20px;
	}

.sidebar > h3 {
	font-size: 21px; font-size: 1.3125rem;
	line-height: 28px;
	}

.sidebar blockquote:before {
	margin-left: -20px;
	}

main .featured {
	margin-top: 20px;
	}

main .featured .clear + h3, main .featured .clear + h2 {
	margin-top: 20px;
	}

main .featured .unit {
	padding-bottom: 10px;
	}

.photo-gallery.gridalicious h3, .photo-gallery.gridalicious h2 {
	margin-bottom: 35px;
	}

.item.shuffle {
	border: 4px solid #F3F3F3;
	}

.photo-gallery figure {
	width: 100%;
	}

.photo-gallery figcaption {
    display: block;
	color: #445461;
	padding: 8px 2px 5px 2px;
    background-color: #F3F3F3;
	}

/* === FLICKR === */
.nanogallery_theme_light .nanoGalleryContainer .nanoGalleryThumbnailContainer .labelImage, .nanogallery_theme_light .nanoGalleryViewer .toolbar .label, .nanoGalleryNavigationbarContainer {
	display: none !important;
	}

.flickr {
	margin-bottom: 20px;
	}
	
/* ======LAYOUT CLASSES======*/	

.flex {
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

/* === LAB PAGE === */

.research-lab-list {
    margin: 0;
    list-style-type: none;
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.research-lab-list li {
    width: 20%;
    border: 25px solid white;
    box-sizing: border-box;
    margin: 0;
    text-align: center;
    background-color: #F3F3F3;
}

/* style alumni-card like the links in current researchers list */
.research-lab-list a,
.alumni-card {
    display: block;
    max-width: 175px;
    margin: auto;
}

.research-lab-list img {
    /* block styling so line-height does not affect img */
    display: block;
    margin: auto;
    border: 4px solid #F3F3F3;
    box-sizing: border-box;
}

.alumni-info {
    padding: 5px;
}

.lab-name {
    display: block;
    font-size: 16px;
    padding: 0 0 5px 0;
}

.lab-links {
    text-align: left;
    padding: 5px;
    border-top: 1px solid #cecece;
}

.alumni-website:before {
    font-family: 'FontAwesome';
    font-weight: 400;
    content: '\f005';
    padding: 0 3px 0 0;
}

/* screen reader only styles for alumni card links */
.sr-only {
    border: 0;
    clip: rect(0,0,0,0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

@media (max-width: 960px) {
    .research-lab-list li {
        width: 25%;
    }
}

@media (max-width: 768px) {
    .research-lab-list li {
        width: 33.33333%;
    }
}

@media (max-width: 568px) {
    .research-lab-list li {
        width: 50%;
    }
    
    .research-lab-list .lab-name {
        font-size: 14px;
    }
}

/* === FOOTER === */

footer {
    background-color: #1d4b76;
    padding: 20px 0;
    text-transform: capitalize;
	}

/* making gridism allow me to do floating boxes in footer */
footer .grid .unit:first-child {
    padding-left: 0;
    }

footer .grid .unit:last-child {
    padding-right: 0;
    }

footer .grid .unit > .unit {
    padding: 0;
    }

footer .grid .unit.half:first-child {
    padding-right: 20px;
    }

footer a {
    color: white; /*#8ba8c2*/
    }

footer a:hover {
    color: #d2e9fe;
	}

footer ul, footer form {
    margin-bottom: 0;
    padding: 20px 10px;
    display: block;
    height: 65px;
    background-color: #002343; 
    }

footer li {
    display: inline-block;
    margin: 5px 22px;
    list-style-type: none;
    max-width: 110px;
    text-align: center;
    line-height: 20px;
    }

.footer-title, footer h5 {
    display: block;
    margin-bottom: 0;
    padding: 5px 20px;
    background-color: #000E2E;
    color: #d2e9fe;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    }

/* ======= FOOTER ICONS ======= */
footer li a:hover i.fa {
    color: #8ba8c2;
    }

footer li a i.fa {
    display: block;
    text-align: center;
    font-size: 24px;
    color: #66ccff; /*#2d91a9;*/
    padding-bottom: 7px;
	transition: .5s;
    }

/* ======= FOOTER SEARCHBAR ======= */
footer input[type="text"] {
    margin-left: 10px;
	font-size: 13px;
	font-style: italic;
	}

footer form i.fa {
    font-size: 18px;
    color: white;
    }

footer button.search {
    height: 28px;
    -webkit-border-radius: 40px; /* Safari 3-4, iOS 1-3.2, Android 1.6- */ 
    -moz-border-radius: 40px; /* Firefox 1-3.6 */
    -o-border-radius: 40px;
    border-radius: 40px;
    border: none;
    outline: none;
    padding: 4px 5px;
    background-color: #86172e;
    vertical-align: middle;
    }

footer button.search:hover {
    background-color: #39a4d1;
    color: #c6e4ff;
    }

/* ======= COPYRIGHT ======= */

.copyright.grid {
    margin-top: 10px;
}

.copyright {
    -webkit-text-size-adjust: none;
    }

.copyright p {
    color: #c6e4ff; 
    font-weight: 300;
    font-size: 13px;
    line-height: 20px;
    margin: 0;
    padding: 0 10px;
    letter-spacing: .5px;
    }

/* === BREADCRUMB === */

main .breadcrumb .unit {
    padding: 10px;
}

.breadcrumb a:hover i {
	background-color: #39a4d1;
	color: #c6e4ff;
    }

.breadcrumb .fa-home {
    color: white;
    background-color: #86172e;
    font-size: 14px;
    -webkit-border-radius: 25px;  /* Safari */
    -moz-border-radius: 25px;    /* Firefox\Gecko Engine */
    -o-border-radius: 25px;     /* Opera */
    border-radius: 25px;
    padding: 2px 3px;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
    }

.breadcrumb ul {
    display: inline;
    margin: 0;
    padding: 4px 0;
    }

.breadcrumb li {
    display: inline;
    font-size: 13px;
    font-weight: 600;
    margin-right: 2px;
    }

.breadcrumb li:after {
    font-family: FontAwesome;
    content: "\f144";
    color: #8ba8c2;
    margin-left: 6px;
    }

.breadcrumb li:last-child:after{
    content: '';
    }

/* thumbnail list style */

ul.thumbnail {
    margin: 0;
    }

ul.thumbnail li {
    list-style: none;
    display: inline-block;
    padding: 8px;
    background-color: #748fa8;
    margin-right: 10px;
    margin-bottom: 15px;
    vertical-align: top;
    }

ul.thumbnail li:nth-child(5) {
    margin-right: 0;
    }

ul.thumbnail li a img {
    border: none; /*IE*/
    margin: 0; /*IE*/
    }    

ul.thumbnail img {
    width: 200px;
    height: auto;
    }

ul.thumbnail figcaption {
	padding: 8px 0 0 0;
    background: #748fa8;
	color: #FFF;
    }

ul.thumbnail p {
    margin: 0;
    font-size: 12px;
    line-height: 18px;
    color: white;
    letter-spacing: .5px;
    max-width: 200px;
    }

ul.thumbnail a:hover p {
    color: #86172e;
    }

/* logo list style */

ul.logos, ul.logos-big {
    margin: 20px 0;
    }

ul.logos li, ul.logos-big li {
    list-style: none;
    float: left;
    border: 4px solid #F3F3F3;
    margin: 0 15px 15px 0;
    }

ul.logos li a img, ul.logos-big li a img {
    border: none; /*IE*/
    margin: 0; /*IE*/
    }    

ul.logos img {
    height: 110px;
    }

ul.logos-big img {
    height: 140px;
    }

/* === BACK TO TOP === */

.top .unit:first-child {
    padding-left: 10px;
    }

.top:hover {
    color: #39a4d1;
    cursor: pointer;
    }

.top p {
    font-size: 13px;
    font-weight: 600;
	margin: 0;
    }

.top i {
    font-size: 14px;
    }

/* search page */

#gsa_search h2 {
    display: none;
    }

#gsa_search form {
    margin: 20px 0;
    }

#gsa_search form p {
    display: inline;
    }
    
#gsa_search input[type="text"] {
    background-color: #d2e9fe;
}    

#gsa_search .submit {
    color: #FFF;
    background-color: #86172e;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: .5px;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
    }

#gsa_search .submit:hover {
    background-color: #39a4d1;
    }

#gsa_search .result_item {
    margin: 25px 0;
    }
/* just the title link */
#gsa_search .result_item_text > a {
    color: #1d4b76;
    text-transform: uppercase;
    font-weight: 600;
    }

#gsa_search .result_item_text > a:hover {
    color: #2d91a9;
    }

#gsa_search .pagination_link {
    font-weight: 600;
    }

#gsa_search .pagination_link a {
    background-color: #D9E1EC;
    padding: 3px 10px;
    }

#gsa_search .pagination_link a + a {
    margin: 0 5px;
    }

/* LAB SUBPAGE STYLES */

#lab-header {
	background: rgba(255,255,255,.7);
	padding: 14px 20px;
	}

#lab-header h1, #lab-header h2 {
	background: transparent;
	padding: 0;
	display: inline;
	}

.lab-nav {
    display: inline;
}

.lab-nav ul {
	float: right;
	margin: 0;
	}

.lab-nav li {
	display: inline;
	text-transform: uppercase;	
	font-weight: 600;
	margin: 2px 45px 0 0;
	list-style: none;
	text-align: center;
	float: left;
	}

.lab-nav li:last-child {
	margin-right: 0;
	}

.lab-nav li a {
    display: block;
	color: #002242;
	font-size: 12px; font-size: 0.75rem;	
	cursor: pointer;
	}

.lab-nav li a:hover, .lab-nav li a:hover i {
	-ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
	}
	
.lab-nav li a:hover {
    color: #315F8A;/*8% lght #1d4b76*/
	}
	
.lab-nav li a:hover i {
	color: #39a4d1;
}

.lab-nav i {
	font-size: 18px; font-size: 1.125rem;
	color: #86172e;
	text-align: center;
	display: block;
	}

li.cf {
    list-style-type: none;
	}

/* News in Media Archives page */
a.title {
	font-size: 16px;
	}

ul.news a[target="_blank"]:after {
	font-family: fontAwesome;
	content: "\f14c";
	margin-left: 5px;
	}

ul.news p {
	margin-top: 0;
	}

.lab table p[style="text-align:center"] {
	margin: 0;
	line-height: initial;
	}	

/*======================= MEDIA QUERIES =======================*/

    /* =================CUSTOM DESKTOP======================= */

    @media only screen and (min-device-width : 921px) and (max-width: 1179px) { 

        
        header h1, .site-title {
			font-size: 32px;
			line-height: 37px;
			letter-spacing: 1.5px;
		}
        
        .site-logo-and-title img {
            width: 35px;
        }
               
        .site-logo-and-title a {
            margin-left: 40px;
        }
        
        nav a, nav ul ul a, .nav-button {
            padding: 10px 14px;
        }

        .footer-title {
  		    font-size: 16px;
  		    letter-spacing: .5px;
  		}  	
  		
        footer input[type="text"] {
            width: 120px;
        }

	}

	@media only screen and (min-width: 768px) and (max-width: 920px) { 
			
		header h1, .site-title {
			font-size: 25px;
			line-height: 36px;
			letter-spacing: 1.25px;
			margin-top: 0;
			}

        .site-logo-and-title a {
            margin-left: 60px;
        }	
        
        /*pennmedicine logo*/
        header .logo img {
            min-width: 225px;
        }      
        
        nav a, nav ul ul a, .nav-button {
            padding: 10px;
        }
        
        nav .users li.padding {
            padding: 10px 5px;
            font-size: 12px;
        }
        
        nav .users i.fa.fa-user {
            font-size: 14px;
        }
        
        nav .users li a {
            font-size: 12px;
        }
        
        nav ul.main li a, .nav-button  {
            font-size: 13px;
        }
        
        footer .grid .unit:first-child {
            padding-left: 10px;
            padding-right: 0;
        }
        
        footer .grid .unit.three-quarters:last-child {
            padding-right: 10px;
        }
        
        footer input[type="text"] {
            width: 90px;
        }
        
        .footer-title {
            font-size: 16px;
            line-height: 22px;
            letter-spacing: 0;
            padding: 5px 7px;
        }
            
        footer li {
            margin: 5px 12px;
        }   
        
        .copyright.grid {
            margin-right: 10px;
            margin-left: 10px;
        }
        
    
	}
	

    /*======================= IPAD =======================*/

    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

        header h1, .site-title {
			margin: 0;
			display: inline-block;
            }
        
        /*pennmedicine logo*/
        header .logo img {
            min-width: 225px;
        }        

        .site-logo-and-title img {
            width: 38px;
        }

    }


/* ==================== #MOBILE ======================== */

    @media only screen and (max-width: 767px) { 
    
        .wrap.wider {
            background-position: 0;
            background-size: inherit;
            }
        
        header .unit {
            margin: 0 auto;
            text-align: center;
        }
        
        header .flex {
            flex-direction: column;
            }
        
        header .logo a {
            margin-top: 20px;
        }

        .site-logo-and-title .flex {
            display: inline-block;
            }
        
        .site-logo-and-title a {
            margin-left: 0;
        }
            
        .site-logo-and-title img {
            width: 35px;
            display: inline-block;
            vertical-align: initial;
        }
    
        header .three-quarters.unit {
            margin: 0 auto;
            }
        
		header h1, .site-title {
            display: inline-block;
            width: 270px;
            text-align: left;
			font-size: 28px;
            line-height: 30px;
            margin-top: 0;
			}

        header h1 a, .site-title a {
            word-wrap: inherit;
        }

        /* MOBILE NAVIGATION */      
        nav.js {
            display: none;
            }

        #navBtn, .mobile-nav-close-btn {
            display: block;
            background-color: #002242;
            }   

        #navBtn i {
            color: #fff;
            padding: 10px;
            font-size: 24px;
            }
            
        #navBtn button, nav button {
            background: none;
            outline: none;
            border: none;
            color: white;
        }    

        .mobile-nav-close-btn {
            display: block;
            font-family: 'Arimo', 'Helvetica', sans-serif;
            font-size: 16px;
            line-height: 26px;
        	font-weight: 400;
            color: white;
            padding: 10px;
        }
        
        .mobile-nav .submenu {
            position: relative;
            display: block;
            width: 100%;
        }
        
        nav ul, nav ul ul {
            width: 100%;
            }
        
        nav li, .nav-button {
            text-align: left;
            display: block;
            margin: 0px;
            width: 100%;
            }
        
        nav a, .nav-button {
            padding: 10px;
            }

        nav .users li.padding {
            padding: 0px;
            }        
        
        nav .users i.fa.fa-user {
            padding: 10px 0 10px 10px;
            }

        nav ul li:hover ul, nav ul li:focus-within ul {
            width: 100%;
            position: relative;
        }

        nav ul ul {
            position: relative;
        }
                
        nav ul ul li {
            background-color: #000f2f;
        }

        nav ul ul li a {
            padding: 10px 20px;
            font-size: 14px;
        }
        
        /*content*/
        
        main.home {
            padding: 30px 0;
            }
        
        main .grid .unit, main.home .grid .unit {
            padding: 10px;
            }
        
        main .grid .unit:last-child {
            margin-bottom: 0px;
            }

        main h2, main.home h3 {
            margin: 0;
            padding: 6px 10px;
            }
        
        main ul {
            margin: 15px 0px 20px 30px;
            }
        	
	    /* lab styles */
		#lab-header ul li {
			margin: 2px 15px 0 0;
			}
			
			
        /* footer */
        footer .grid {
            display: block;
        }
        
        /* footer search section box*/
        footer .grid .unit.one-quarter, footer .grid .unit.three-quarters {
            width: 100%;
            padding: 10px 20px;
        }
        
        footer input[type="text"] {
            width: 60%;
        }
                
        footer li {
            margin: 5px 14px;
        }  
        
        .footer-title {
            padding: 5px 15px;
        }
        
        .copyright.grid {
            margin-top: 10px;
            margin-left: 20px;
            margin-right: 20px;
        }
        
        /* GSA Search */
        #form1 p:first-child {
            display: block;
            }
        

    }

	/* ==================== #MOBILE ======================== */

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

		footer .grid .unit.half:first-child {
            padding-right: 0;
            margin-bottom: 20px;
        }
        
        footer ul, footer form {
            height: auto;
        }
        
        .footer-title {
            font-size: 20px;
        }
        
        .grid .unit.sidebar {
			padding-left: 0;
		}

        #lab-header h1, .lab-nav {
			display: block;
		}
			
		.lab-nav li {
		    display: inline-block;
		    float: none;
		}	
			
		#lab-header ul {
			margin: 25px 0 0 0;
			float: none;
		}

		#lab-header li a {
			display: block;
		}

		#lab-header li i {
    		font-size: 22px;
    		color: #86172e;
    		text-align: center;
		}

	}