@font-face {
    font-family: "Titilium";
    src: url("../fonts/TitilliumWeb-Regular.ttf");
}
@font-face {
    font-family: "Titilium";
    src: url("../fonts/TitilliumWeb-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "Titilium";
    src: url("../fonts/TitilliumWeb-Italic.ttf");
    font-style: italic;
}
@font-face {
    font-family: "Titilium";
    src: url("../fonts/TitilliumWeb-BoldItalic.ttf");
    font-weight: bold;
    font-style: italic;
}

* {
	margin: 0;
	padding: 0;
}
p,h1,h2,h4,#article-img {
	margin-top: 2%;
}
html, body {
    overflow-x: hidden;
    width: 100%;
    min-height: 100%;
    background-color: #099;
}
body {
    font-family: "Titilium", sans-serif;
    font-size: 16px;
    color: #fff;
}
img {
    display: block;
}
a {
    color: #fff;
    margin: 0 8px 0 0;
    font-weight: bold;
    text-decoration: underline;
}
a:hover, a:active, a:focus, .active {
    color: #0cc;
}
h1 {
    margin: 24px 0 0 16px;
}
h3 {
	margin-top: 8%;
}
h4 {
	margin: 48px 0 -16px 0;
	background-color: #00c2d4;
	text-align: center;
	border-top: 1px solid white;
	border-left: 1px solid white;
	border-right: 1px solid white;
}
h4+p {
	padding: 0 8px 5px 8px;
	border-left: 1px solid white;
	border-right: 1px solid white;
	border-bottom: 1px solid white;
}
.small {
	font-size: 75%;
}
h3.small {
	font-size: 80%;
}
#wrapper {
    position: relative;
    width: 100%;
    min-height: 100%;
}
#center {
    position: relative;
    width: 800px;
    margin: 0 auto;
}
#left, #right {
    position: fixed;
    top: 0;
    width: calc(50% - 400px);
    height: 100%;
}
#left {
    left: 0;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #0cc), color-stop(0%, #033));
    background: -webkit-linear-gradient(left, #0cc, #033); /* For Chrome and Safari */
    background: -moz-linear-gradient(right, #0cc, #033); /* For old Fx (3.6 to 15) */
    background: -ms-linear-gradient(right, #0cc, #033); /* For pre-releases of IE 10*/
    background: -o-linear-gradient(right, #0cc, #033); /* For old Opera (11.1 to 12.0) */
    background: linear-gradient(to right, #0cc, #033); /* Standard syntax; must be last */
}
#right {
    right: 0;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #033), color-stop(0%, #0cc));
    background: -webkit-linear-gradient(left, #033, #0cc); /* For Chrome and Safari */
    background: -moz-linear-gradient(right, #033, #0cc); /* For old Fx (3.6 to 15) */
    background: -ms-linear-gradient(right, #033, #0cc); /* For pre-releases of IE 10*/
    background: -o-linear-gradient(right, #033, #0cc); /* For old Opera (11.1 to 12.0) */
    background: linear-gradient(to right, #033, #0cc); /* Standard syntax; must be last */
}
#content {
    width: 752px;
    padding: 0 24px 48px 24px;
    margin: 0 auto;
    background-color: #099;
}
#header {
    position: fixed;
    top: 0;
    left: 50%;
    margin-left: -400px;
    width: 800px;
    height: 192px;
    z-index: 1;
    border-bottom: 16px solid #099;
    background-color: #000;
}
#header-image {
    position: absolute;
    height: 84%;
    top: 8%;
    left: 6px;
}
#nav-divider {
    position: absolute;
    width: 752px;
    left: 24px;
    background-color: #fff;
    height: 1px;
    bottom: -16px;
}
#main-nav {
    position: absolute;
    bottom: 0px;
    right: 24px;
    padding-top: 16px;
}
#main-nav a {
    color: #0cc;
    text-decoration: none;
}
#main-nav a:hover, #main-nav .active a {
    color: #fff;
}
#main-nav li {
    display: inline;
    float: left;
}
#content ul {
    position: relative;
    list-style-type: circle;
    padding-left: 18px;
}
#article-img {
    outline: 1px solid;
    outline-offset: -1px;
}
.article-content {
    position: absolute;
    top: 0;
    left: 0;
}
p.cite {
    background-color: #fff;
    color: #099;
    padding: 16px;
    border-radius: 16px;
}
.hidden {
    color: rgba(0,0,0,0);
}
.unhidden {
    color: #fff;
}
.left {
    float: left
}
.right {
    float: right
}
.space {
    height: 48px;
}
#mobile_menu_btn {
    display: none;
}
#header-placeholder {
    display: block;
    min-height: 192px;
}
@media screen and (max-width: 924px) {
    html, body {
        font-size: 3vw;
    }
	/*p,h1,h2,h3,h4,#article-img  {
		margin-top: 3vw;
	}*/
    a {
        margin: 1vw;
    }
    h1 {
    	margin-left: 0;
    }
    h4 {
		margin: 8% 0 -2% 0;
	}
    /*h4 {
		margin-bottom: -3vw;
		border-radius: 3vw 3vw 0 0;
	}*/
    #left, #right {
        width: 8%;
    }
    #center {
        width: 84%;
    }
    #header-placeholder {
        display: none;
    }
    #header {
        position: relative;
        width: 100%;
        height: auto;
        left: 0;
        margin-left: 0;
        border: none;
    }
    #header-image {
        position: relative;
        width: 32vw;
        padding: 1vw 0;
    }
    #main-nav {
        position: absolute;
        right: 1vw;
        bottom: 6vw;
        height: 6vw;
        width: 46vw;
        text-align: right;
    }
    #main-nav li {
        float: none;
    }
    #nav-divider {
        display: none;
    }
    #content {
        width: 92%;
        padding: 0 4% 8% 4%;
    }
    #content>img {
        width: 100%;
    }
    #inner-nav {
        text-indent: -8%;
        left: 4%;
        width: 36%;
    }
    p.cite {
	    padding: 3vw;
	    border-radius: 3vw;
	}

}