/* Front Page
---------------------------------------------------------------------------------------------------- */

/* Page Header Rotator
--------------------------------------------- */

.front-page .page-header .wrap {
	max-width: 40rem;
}

.front-page .page-header .rotate-text {
    position: relative;
    min-height: 150px;
    height: 20vw;
}

.front-page .page-header .rotate-text li {
    position: absolute;
    display: block;
    width: 100%;
    top: 50%;
    left: 50%;
    margin-top: 40px;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
    -webkit-transition: opacity 0.4s, visibility .4s, all .6s ease-in-out;
         -o-transition: opacity 0.4s, visibility .4s, all .6s ease-in-out;
            transition: opacity 0.4s, visibility .4s, all .6s ease-in-out;
}

.front-page .page-header .rotate-text li.active {
    opacity: 1;
    visibility: visible;
    margin-top: 0;
    
}

.front-page .page-header .rotate-text li h1 {
    font-size: 2.4rem;
	margin-bottom: 0;
}

.front-page .content-section .first {
    margin-bottom: 4rem;
}

@media only screen and (min-width: 600px) {

    .front-page .page-header .rotate-text {
        min-height: 300px;
    }

    .front-page .page-header .rotate-text li h1 {
        font-size: 3.6rem;
    }

}

@media only screen and (min-width: 1024px) {


    .front-page .content-section .first {
        font-size: 2.1rem;
        padding-right: 20%;
    }

    .front-page .content-section .inner.center {
        text-align: left;
    }

}