#banner {
    text-align: center;
    position: relative;
    overflow: hidden;
    border-radius: .25em
}

#strap {
    display: inline-block;
    border: 0;
    border-radius: .25em;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 2px;
    background: #778798;
    /*background: #556271;*/

    letter-spacing: .1em;
    font-family: dosis;
    text-transform: uppercase;
    z-index: 3;
    color: #F9F4ED;
    font-weight: 500
}

#strap:after {
    content: "ABC University Aerospace Engineering ";
    display: inline-block;
    padding: .75em
}

#silhouettes {
    position: relative;
    display: inline-block;
    width: 60%;
    max-width: 350px;
    margin: 0 auto .5em;
    background: url("../img/shadow.png") no-repeat center bottom;
    background-size: 100%
}

#silhouettes img {
    max-width: 350px;
    width: 100%;
    position: relative;
    z-index: 2;
    opacity: 0
}

#alex-id-1, #alex-id-2 {
    width: 100%;
    height: 100%;
    max-width: 350px;
    display: block;
    background-size: 100%;
    position: absolute;
    top: 0;
    z-index: 1
}

#alex-id-1 {
    background-image: url("../img/left.png");
    right: 48%
}

#alex-id-2 {
    background-image: url("../img/right.png");
    left: 48%
}

#alex-id-1, #alex-id-2, #silhouettes img, #strap, #topbar {
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@-o-keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@-webkit-keyframes slideDown {
    0% {
        -webkit-transform: translateY(-100%)
    }
    100% {
        -webkit-transform: translateX(0)
    }
}

@-moz-keyframes slideDown {
    0% {
        -moz-transform: translateY(-100%)
    }
    100% {
        -moz-transform: translateX(0)
    }
}

@-o-keyframes slideDown {
    0% {
        -o-transform: translateY(-100%)
    }
    100% {
        -o-transform: translateX(0)
    }
}

@keyframes slideDown {
    0% {
        transform: translateY(-100%)
    }
    100% {
        transform: translateX(0)
    }
}

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-50%)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0)
    }
}

@-moz-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -moz-transform: translateX(-50%)
    }
    100% {
        opacity: 1;
        -moz-transform: translateX(0)
    }
}

@-o-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -o-transform: translateX(-50%)
    }
    100% {
        opacity: 1;
        -o-transform: translateX(0)
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-50%)
    }
    100% {
        opacity: 1;
        transform: translateX(0)
    }
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(50%)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0)
    }
}

@-moz-keyframes fadeInRight {
    0% {
        opacity: 0;
        -moz-transform: translateX(50%)
    }
    100% {
        opacity: 1;
        -moz-transform: translateX(0)
    }
}

@-o-keyframes fadeInRight {
    0% {
        opacity: 0;
        -o-transform: translateX(50%)
    }
    100% {
        opacity: 1;
        -o-transform: translateX(0)
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(50%)
    }
    100% {
        opacity: 1;
        transform: translateX(0)
    }
}

@-webkit-keyframes expand {
    0% {
        bottom: -2em
    }
    100% {
        bottom: 0
    }
}

@-moz-keyframes expand {
    0% {
        bottom: -2em
    }
    100% {
        bottom: 0
    }
}

@-o-keyframes expand {
    0% {
        bottom: -2em
    }
    100% {
        bottom: 0
    }
}

@keyframes expand {
    0% {
        bottom: -2em
    }
    100% {
        bottom: 0
    }
}

#silhouettes img {
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-delay: 1s;
    animation-delay: 1s
}

#alex-id-1, #alex-id-2 {
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
    -o-animation-delay: 1.5s;
    animation-delay: 1.5s
}

#strap, #topbar {
    -webkit-animation-delay: 2.5s;
    -moz-animation-delay: 2.5s;
    -o-animation-delay: 2.5s;
    animation-delay: 2.5s;
    -webkit-animation-duration: .5s;
    -moz-animation-duration: .5s;
    -ms-animation-duration: .5s;
    -o-animation-duration: .5s;
    animation-duration: .5s
}

#alex-id-1, #alex-id-2, #silhouettes img {
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s
}

#topbar {
    -webkit-animation-name: slideDown;
    -moz-animation-name: slideDown;
    -o-animation-name: slideDown;
    animation-name: slideDown
}

#silhouettes img {
    -webkit-animation-name: fadeIn;
    -moz-animation-name: fadeIn;
    -o-animation-name: fadeIn;
    animation-name: fadeIn
}

#alex-id-1 {
    -webkit-animation-name: fadeInRight;
    -moz-animation-name: fadeInRight;
    -o-animation-name: fadeInRight;
    animation-name: fadeInRight
}

#alex-id-2 {
    -webkit-animation-name: fadeInLeft;
    -moz-animation-name: fadeInLeft;
    -o-animation-name: fadeInLeft;
    animation-name: fadeInLeft
}

#strap {
    -webkit-animation-name: expand;
    -moz-animation-name: expand;
    -o-animation-name: expand;
    animation-name: expand
}

@media only screen and (max-width: 46em) {
    #banner {
        overflow: hidden;
        padding-top: 1em
    }

    #strap {
        border-radius: 0
    }
}

img.icon-alex {
    width: 65px;
    height: auto;
}

@media only screen and (max-width: 919px) {
    img.icon-alex {
        width: 50px;
        height: auto;
    }
}
@media only screen and (max-width: 800px) {
    img.icon-alex {
        width: 40px;
        height: auto;
    }
}
@media only screen and (max-width: 561px) {
    img.icon-alex {
        width: 30px;
        height: auto;
    }
}
h2.page-title {
    3.1em;
}
h4.contact-me {
     text-align: center;
     font-size: 2.6em;
     color: #3c5067;
 }
h5.contact-me {
    text-align: center;
    font-size: 2.2em;
    color: #3c5067;
}
.mail-me-text {
    font-size: 1.2em;
    font-family: Roboto;

}

div.margins {
    display: block;
    text-align: center;
}