@-webkit-keyframes animStar {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    to {
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px)
    }
}

@keyframes animStar {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    to {
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px)
    }
}

body {
    font-family: 'Assistant',sans-serif
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

header {
    height: 100vh;
    background: radial-gradient(160% 65% at 50% 100%,#0c9ad5 40%,#112b35 90%);
    overflow: hidden
}

.navbar {
    background-color: #112c35;
	padding:0
}

.nav-link {
    color: #b9b8b8;
    -webkit-transition: color 500ms;
    -o-transition: color 500ms;
    transition: color 500ms;
    font-size: 1.25rem;
	padding: 1rem 2rem;
}

.nav-link.active,.nav-link:hover,footer,footer a:hover,header {
    color: #fff;
}

#projects-nav-link.nav-link.active  {
    background-color: #0c9ad5;
}
#experience-nav-link.nav-link.active  {
    background-color: #f4fcff;
	color:#169bd0
}
#portfolio-nav-link.nav-link.active  {
    background-color: #045f87;
}
#header-top {
    position: relative;
    top: 0;
    background-image: -o-radial-gradient(50% 100%,100% 30%,rgba(17,44,53,0) 50%,rgba(17,44,53,.1) 60%,#112c35 125%);
    background-image: radial-gradient(100% 30% at 50% 100%,rgba(17,44,53,0) 50%,rgba(17,44,53,.1) 60%,#112c35 125%);
    z-index: 2;
    padding-bottom: 3rem
}

#header-bottom {
    position: absolute;
    bottom: 1rem;
    z-index: 1;
    text-align: center;
    width: 100%
}

#cv-link {
    color: #fff;
    font-weight: 300;
    font-size: 2rem
}

#circles1,#circles1a {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: 0 0;
    -webkit-animation: animStar 75s linear infinite;
    animation: animStar 75s linear infinite
}

#circles1a,#circles2a,#circles3a {
    position: relative;
    top: 2000px
}

#circles2,#circles2a,#circles3,#circles3a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: 0 0;
    -webkit-animation: animStar 100s linear infinite;
    animation: animStar 100s linear infinite
}

#circles3,#circles3a {
    width: 50px;
    height: 50px;
    -webkit-animation: animStar 150s linear infinite;
    animation: animStar 150s linear infinite
}

.section-header {
    text-align: center;
    color: #fff;
    font-size: 5rem;
    font-family: 'Assistant',sans-serif
}

#profile {
    background: -webkit-gradient(linear,left top,left bottom,from(#0c9ad5),to(#f4fcff));
    background: -o-linear-gradient(#0c9ad5,#f4fcff);
    background: linear-gradient(#0c9ad5,#f4fcff)
}

#experience {
    background: #f4fcff
}

#experience .section-header {
    color: #169bd0;
    padding-top: 15rem
}

#me {
    border-radius: 50%;
    border: 7px solid #fff;
    max-width: 200px
}

#profile-statement {
    text-align: center;
    font-style: italic;
    color: #545454;
    font-size: 1.5rem;
    padding: 2rem 0;
    max-width: 600px
}

#education-header,#experience h3,#experience h4 {
    color: #169bd0;
    font-weight: 700
}

#experience {
    background: -webkit-gradient(linear,left top,left bottom,from(#0c9ad5),color-stop(15rem,#f4fcff));
    background: -o-linear-gradient(#0c9ad5,#f4fcff 15rem);
    background: linear-gradient(#0c9ad5,#f4fcff 15rem)
}

#experience h3 {
    font-size: 1.5rem
}

#experience h4 {
    font-size: 1.3rem
}

#experience h5 {
    font-size: 1.2rem
}

#education-header {
    text-align: center;
    font-size: 3rem
}

#experience .row {
    margin-top: 2rem
}

#experience a,#gallery a,footer a {
    color: #169bd0;
    text-decoration: underline
}

#gallery a,footer a {
    color: #fff
}

#projects {
    background: #0c9ad5
}

#projects .section-header {
    color: #f4fcff
}

.project {
    overflow: hidden
}

.gallery img,.personal-projects img,.project img {
    -webkit-transition: -webkit-transform .4s ease;
    -o-transition: transform .4s ease;
    transition: transform .4s ease;
    transition: transform .4s ease,-webkit-transform .4s ease
}

.gallery>div:hover,.personal-projects>div:hover,.project:hover img {
    -webkit-transform: scale(1.15);
    -ms-transform: scale(1.15);
    transform: scale(1.15)
}

#gallery {
    background: -webkit-gradient(linear,left top,left bottom,from(#f4fcff),color-stop(15rem,#045f87));
    background: -o-linear-gradient(#f4fcff,#045f87 15rem);
    background: linear-gradient(#f4fcff,#045f87 15rem);
    color: #fff;
    font-weight: 700
}

#gallery .section-header {
    padding-top: 15rem
}

#gallery h3 {
    font-size: 3rem;
    color: #fff
}

.gallery {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    width: 100%
}

.gallery>div {
    padding-right: .75rem;
}

.gallery > div:only-child {
	max-width:33%
}

.gallery img,.personal-projects img {
    overflow: hidden
}

.video,.video img {
    -webkit-transition: .4s all;
    -o-transition: .4s all;
    transition: .4s all;
    filter: brightness(100%);
    -webkit-filter: brightness(100%)
}

.video:hover img {
    -webkit-filter: brightness(75%);
    filter: brightness(75%)
}

.play {
    height: 72px;
    width: 72px;
    left: 50%;
    top: 50%;
    margin-left: -36px;
    margin-top: -36px;
    position: absolute;
    background: url(../img/play.webp) no-repeat
}

.gallery-16-9 {
    -webkit-box-flex: calc(16/9);
    -ms-flex: calc(16/9);
    flex: calc(16/9)
}

.no-video {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.slide-link {
    text-align: center;
    margin-top: -1rem;
    margin-bottom: 1rem
}

#default-metadata {
    -webkit-box-flex: calc(800/433);
    -ms-flex: calc(800/433);
    flex: calc(800/433)
}

#book-viewer {
    -webkit-box-flex: calc(1000/608);
    -ms-flex: calc(1000/608);
    flex: calc(1000/608)
}

#k-sharp {
    -webkit-box-flex: calc(960/603);
    -ms-flex: calc(960/603);
    flex: calc(960/603)
}

#dpla {
    -webkit-box-flex: calc(1000/790);
    -ms-flex: calc(1000/790);
    flex: calc(1000/790)
}

.gallery-note {
    font-size: 1.35rem;
    font-weight: 400;
    font-style: italic;
    margin-bottom: 1rem
}

footer {
    background-color: #112c35;
    padding: 2rem 0
}

#inspiration {
    list-style-type: none;
    -webkit-padding-start: 0;
    padding-inline-start: 0
}

#inspiration li {
    font-size: 14px
}

#cc-notice {
    text-align: center
}

@media (max-width:768px) {
    #site-title {
        font-size: 5rem
    }
	.top-buffer-sm {
		margin-top: 1.5rem;
	}
}

@media (max-width:576px) {
    .nav-link {
        font-size: 1rem
    }

    .navbar {
        -webkit-box-pack: center!important;
        -ms-flex-pack: center!important;
        justify-content: center!important
    }

    #site-title {
        font-size: 3rem;
        margin-top: 47px
    }

    header h3 {
        font-size: 1.5rem
    }
}
@media (max-width:370px) {
	.section-header {
		font-size: 4rem;
	}
}