html, body {
  padding: 0;
  margin-left: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  height: 100%;
  width: 100%;
  font-family: 'Helvetica', 'Verdana', sans-serif;
  font-weight: 400;
  font-display: optional;
  color: #000000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #FF8C00;
}

header {
	background: url("background.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
	transition: 0.2s
}

h1 {
	-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
        -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;	
}

h2#sub {
	margin-top: 0px;
	margin-bottom: 0px;
	text-align: center;
     	-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
        -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#bar {
	background-color: #FFA500;
}
img#logo {
	text-align: center;
	transition: 0.2s;
	height: 30%;
	width: 30%;
}

img#smlogo {
	height: 3%;
	width: 3%;
	margin-top: 1%;
	margin-bottom: 1%;
	margin-left: 3%;
	margin-right: 3%
}
img#icon {
	height: 6%;
	width: 6%;
	margin-top: 5%;
	-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
        -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
        -o-animation: fadein 2s; /* Opera < 12.1 */
         animation: fadein 2s;
}

nav {
	background-color: #FFD700;
	font-size: 150%;
	text-align: center;
	color: #1C2321;
	line-width: 3;
}

aside {
	float: left;
   	margin: 5%;
	margin-left: 5%;
	margin-right: 1%;
    width: 45%;
	background-color: #FFA500;
}

h3#subtitle {
	font-size: 200%;
	margin-left: 6%;
	margin-bottom: 3%;
     	-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
        -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}
p#subtitle {
	font-size: 120%;
	margin-left: 6%;
	margin-right: 6%;
	margin-top: 0px;
     	-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
        -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

p#workSub {
	font-size: 240%;
	margin: 0px;
     	-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
        -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

p#workSubcn {
	font-size: 340%;
	margin: 0px;
     	-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
        -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

p#desc {
	font-size: 140%;
	margin-left: 6%;
	margin-right: 6%;
	margin: 4%;
	margin-top: 0px;
}

p#desccn {
	font-size: 180%;
	margin-left: 6%;
	margin-right: 6%;
	margin: 4%;
	margin-top: 0px;
}

iframe {
	text-align: center;
	margin-bottom: 10%;
}

section#vid {
	float: right;
	margin-left: 1%;
	margin-right: 4%;
}

section#work {
	margin: 5%;
	background-color: #FFA500;
	bottom: 0;
	clear: both;
}

h4 {
	margin-top: 0px;
	margin-bottom: 0px;
	font-size: 400%;
	text-align: center;
     	-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
        -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

img#workIcon {
	margin: 5%;
	margin-top: 10%;
	width: 30%;
	height: 30%;
	float: left;
}

img#desc {
	height: 16%;
	width: 16%;
	margin-top: 0px;
	margin: 0px;
}
.content {
  padding: 16px;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
.sticky + .content {
  padding-top: 60px;
}