@font-face {
    font-family: usis;
    src: url(fonts/usis1949.ttf);
}

@font-face {
    font-family: archer;
    src: url(fonts/archer-book.otf);
}

@font-face {
    font-family: archer-i;
    src: url(fonts/archer-book-italic.otf);
}

@font-face {
    font-family: archer-m;
    src: url(fonts/archer-medium.otf);
}

@font-face {
    font-family: gotham;
    src: url(fonts/gotham-light.ttf);
}

@font-face {
    font-family: gotham-b;
    src: url(fonts/gotham-bold.ttf);
}

body, html {
    margin:0vw;
	padding:0vw;
	height:100vh;
	width:100vw;
	overflow-x:visible;
    background-color: #e8e8e3;
}

header, nav, section, footer, aside, article, figure, main
    {display:block;}

.container, .container-landing {
    display: block;
	position:absolute;
	margin:0vw;
	padding:0vw;
	border:0vw;
	top:0vw;
	left:0vw;
	right:0vw;
    bottom:0vw;
	min-width:100%;
	min-height:100vh;
}

.container-landing {
    background-image: url(images/typewriter-m.jpg);
    background-size: 100vw auto;
	overflow:hidden;
}

.landing {
    position:absolute;
    top:12.5vh;
    left:14vw;
    right:14vw;
    background: none;
}

.landing h1 {
    font-size: 13em;
    line-height: .82em;
    letter-spacing: .06em;
    text-align: left;
}

.landing h2 {
    font-size: 7em;
    line-height: .8em;
    letter-spacing: .15em;
    text-align: left;
    padding-top: .25em;
}

#main-image {
    display:none;
}

h1 {
    font-family: usis, "Special Elite", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color: #ffc42e;
    font-weight: 100;
    font-size: 4.2em;
    line-height:.9em;
    letter-spacing: .3em;
    text-transform: uppercase;
    margin:0em;
    text-align:center;
}

h2 {
    font-family: archer, "BioRhyme", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color: #e8e8e3;
    font-weight: 100;
    font-size: 2.1em;
    line-height: 1.2em;
    letter-spacing: .55em;
    text-transform: uppercase;
    margin:0em;
    padding:0em;
    text-align: center;
}

h3 {
    font-family: archer-m, "BioRhyme", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color: #312e2e;
    font-weight: 100;
    font-size: 44pt;
    line-height: 1em;
    text-transform: uppercase;
    margin:0px;
    padding: 2em 4.2vw 0em 4.2vw;
    text-align: left;
}

h4 {
    font-family: archer-m, "BioRhyme", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color: #daa523;
    font-weight: 100;
    font-size: 3.18em;
    line-height: 1em;
    text-transform: uppercase;
    margin:0em;
    padding: .25em 4.2vw 0em 4.2vw;
    text-align: left;
}

p {
    font-family: gotham, "Quicksand", Helvetica, sans-serif;
    color: #312e2e;
    font-size:2.9em;
    line-height: 1.6em;
    padding-top: .5em;
    margin:0px 4.2vw;
}

a {
    font-family: gotham-b, "Quicksand", Helvetica, sans-serif;
    color: #daa523;
    text-decoration: none;
}

a:hover {
    text-decoration: underline #786e69 dashed;
}

img {
    padding:0vw;
    margin:0vw;
    border:0vw;
}

#menuicon {
    width:17vmin;
    height:13.5vmin;
    position:fixed;
    top:2vmin;
    right:2vmin;
    background-color: #ffc42e;
    border-radius: 1.4vmin;
    padding-bottom: 3.5vmin;
    z-index:50;
}

.menu-line {
    background-color: #312e2e;
    width: 60%;
    height: 2vmin;
    border-radius: 2vmin;
    border:0vmin;
    margin:2vmin auto;
}

nav {
	position:fixed;
	top:23vmin;
	right:2vmin;
	background-color:#e8e8e3;
	box-shadow: 2vmin 2vmin 12vmin 0vmin #000000;
    border-radius: 1.4vmin;
    display: none;
	z-index:40;
}

nav ul {
	margin:3.125vmax 2.8vmin 3.125vmax 5.6vmin;
	padding:0vmin;
	list-style-type: none;
}

nav li {
	display:block;
	vertical-align:center;
	padding: .2em .15em;
    font-family: archer, "BioRhyme", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color: #786e69;
    text-decoration: none;
    font-size: 2.4em;
}

nav li:before {
    content: "// ";
}

nav a {
    font-family: archer, "BioRhyme", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color: #786e69;
    font-size: 1.4em;
}

header {
    background-color: #312e2e;
    position: fixed;
    left:0vw;
    top:0vmin;
    height: 21vmin;
    width:100vw;
    z-index:40;
}

strong {
    font-family: archer, "BioRhyme", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

.middling, .middling-head {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.middling {
    margin:auto;
}

.middling-head {
    margin:auto 21vmin auto auto;
}

main {
    position: absolute;
    top: 21vw;
    left:0vw;
    right:0vw;
    padding-bottom:10vh;
}

.author {
    font-family: archer, "BioRhyme", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    text-transform:uppercase;
    color: #daa523;
    font-size:2.7em;
	padding-top:0em;
}

.title-org, .award {
    font-family: archer-i, "BioRhyme", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color: #786e69;
    font-size:3.3em;
    line-height:1em;
}

.title-org {
    margin-bottom:3em;
}

.award {
    margin-bottom:0em;
}

main img {
	width: 100vw;
	height:auto;
	margin: 11vw 0vw;
}

.splash, #yellow, .spacer, .dot, .active, .mySlides, .dots, .splashquotes, #contact {
    display:none;
}

@media only screen and (orientation:landscape) and (min-resolution:100dpi) {
	body, html {
        background-color:#fff;
        width:100%;
		overflow:hidden;
    }
    .container, .container-landing {
        background-image: none;
		background-color: #e8e8e3;
		overflow:auto;
    }
	
    .landing {
        margin:auto;
        background: #fff;
        height:auto;
        width:60%;
        padding:1.05vw;
        background-color: #fff;
        z-index:40;
		top:30vh;
    }

    .landing h1 {
        font-size: 4em;
        letter-spacing: .3em;
    }

    .landing h2 {
        font-size: 2em;
        letter-spacing: .4em;
        padding-top: .25em;
        color: #786e69;
    }
    
    .splash {
        position:absolute;
        top:0vw;
        left:0vw;
        bottom:0vw;
        width:50vw;
		overflow:auto;
        display:block;
        background-image: url(images/typewriter-d.jpg);
        background-size:cover;
        background-position:center;
    }
	
	p {
		font-size: 1.5em;
	}
	
	nav li {
		font-size: 1.5em;
	}
	
	nav {
		top:2vmin;
		right:23vmin;
	}
	
	h3 {
		padding: .5em 4.2vw 0em 4.2vw;
	}
}


@media only screen and (min-width: 768px) and (max-resolution:100dpi) {
	body, html {
        background-color:#fff;
        width:100%;
		overflow:hidden;
    }

	::-webkit-scrollbar {
		width: 10px;
	}

	::-webkit-scrollbar-track {
		background: #e8e8e3;
		border-radius:5px;
	}

	::-webkit-scrollbar-thumb {
		background: #BBBBA7; 
		border-radius: 5px;
	}

	::-webkit-scrollbar-thumb:hover {
		background: #aba28c; 
	}
    
    .container, .container-landing {
        background-image: none;
        background-color: #312e2e;
        min-width:97.8vw;
		margin: 1.05vw;
		min-height: auto;
    }
	
	a {
		font-size: 1.05em;
	}
	    
    #main-image {
        display:block;
        position:absolute;
        top:8vw;
        left:8vw;
        bottom:8vw;
        width:25.21vw;
        background-image: url(images/typewriter-d.jpg);
        background-size:cover;
        background-position:center;
    }
    
    #menuicon {
        display:none;
    }
    
    .landing {
        position:absolute;
        left: 25%;
        right: 25%;
        bottom:42vh;
        top:auto;
        margin:auto;
        background: #fff;
        height:auto;
        width:50%;
        padding:1.05vw;
    }

    .landing h1 {
        font-size: 3.4em;
        letter-spacing: .3em;
    }

    .landing h2 {
        font-size: 1.8em;
        letter-spacing: .4em;
        padding-top: .25em;
        color: #786e69;
    }
    
    nav {
        position:relative;
        top:0vh;
        left:0vw;
        background:none;
        box-shadow: none;
        border-radius: 0em;
        display: inline-flex;
        z-index:40;
		justify-content:center;
		align-items: center;
		width:100%;
    }
	
	.nav-splash {
		justify-content:left;
		position: absolute;
		top:auto;
        bottom:38vh;
        height:max-content;
        width:max-content;
        left:34vw;
        max-width:40vw;
	}

    nav ul {
        margin:0em;
        padding:0vmin;
        list-style-type: none;
    }

    nav li {
        display:block;
        vertical-align:center;
        padding: 0em .15em;
        color: #786e69;
        text-decoration: none;
        float:left;
        font-size:.8em
    }
    
    nav a {
		font-size: 1em;
	}
    
    main {
        position:absolute;
        top:8vw;
        left:32.21vw;
        bottom:8vw;
        width:53.79vw;
        background-color:#e8e8e3;
		padding:2vw;
		overflow:auto;
	}
	
	article {
		width: 100%;
		padding-bottom: 2vw;
    }

	.col1 p {
		width:48%;
	}
	
	.col1 img {
		float:right;
		margin:0em;
		width:48%;
	}
	
	.col2 {
		-webkit-column-count:2;
		-moz-column-count:2;
		column-count:2;
		-webkit-column-gap: 2vw;
		-moz-column-gap: 2vw;
		column-gap:2vw;
	}
	
    .splash {
        display:block;
    }
    
    #yellow {
        display:block;
        position:absolute;
        top:8vw;
        left:90vw;
        bottom:8vw;
        width:1vw;
        background-color: #ffc42e;
    }
    
    #contact {
        position:absolute;
        display: block;
        bottom:6vw;
        width:83vw;
        height:2vw;
        left:8vw;
        right:8vw;
        z-index:10;
    }
    #contact p {
        font-size:.7em;
        letter-spacing:.05em;
        color: #ffc42e;
        text-align:right;
        font-family: archer, "BioRhyme", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    }
    
    #contact a {
        font-family: archer, "BioRhyme", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
		color: #ffc42e;
    }
    
    .fade {
        -webkit-animation-name: fade;
        -webkit-animation-duration: 1.5s;
        animation-name: fade;
        animation-duration: 1.5s;
    }

    @-webkit-keyframes fade {
        from {opacity: .4} 
        to {opacity: 1}
    }

    @keyframes fade {
        from {opacity: .4} 
        to {opacity: 1}
    }
	
	.title-org {
		margin-bottom:0em;
	}
    
    header {
        background-color: #fff;
        position: relative;
        left:auto;
        top:auto;
        height: auto;
        width:100%;
        z-index:40;
		column-span:all;
        margin-bottom:2em;
    }

    .middling, .middling-head {
        position: relative;
        top: 0em;
        -webkit-transform: translateY(0%);
        -ms-transform: translateY(0%);
        transform: translateY(0%);
        margin:1em;
    }
    
    .middling-head {
        margin:auto;
    }
    
    h1 {
        font-size: 2em;
        padding-top:.2em;
    }

    h2 {
        color: #786e69;
        font-size: 1em;
        padding-bottom:.2em;
    }
	
	h3 {
		font-size:1.2em;
		padding: 2em 0em .5em 0em;
		column-span:all;
	}
	
	h4 {
		font-size:1em;
		padding: 1em 0em 0em 0em;
		column-span:all;
	}
	
	p {
		font-size: 0.75em;
		text-align:justify;
		margin: 0em;
	}

	.author {
		font-size:0.8em;
		padding-top: 0.3em;
		text-align:left;
	}
	
	.award {
		font-size:0.8em;
		column-span: all;
		text-align:left;
	}
	
	.title-org {
		font-size:0.8em;
		padding-bottom:1.5em;
		padding-top:0em;
		line-height: 1.3em;
		text-align:left;
	}
	
	main img {
		width:100%;
		margin: 2em 0em;
	}
}

@media only screen and (min-width: 800px) {
    .splashquotes {
        z-index:10;
        position:absolute;
        display:block;
        left:2vw;
        top:auto;
		bottom:2vh;
        width:40vw;
		height:auto;
		vertical-align: bottom;
    }
    
    .splashquotes p {
        font-size:.8em;
    }
}