.scrollbox-paragraph {
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-height: calc(100vh - 50px);
    overflow: hidden;
    position: relative;
    width: 100%;
    z-index: 4;
}

@media (min-width:64em) {
    .scrollbox-paragraph {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        height: calc(100vh - 60px);
        min-height: auto;
    }
}

.no-touchevents .scrollbox-paragraph:hover .scrollbox:not(.scrollbox--open) .scrollbox__feature-image:after {
    opacity: 0.8;
}

.scrollbox {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-color: #000;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 150px;
    flex: 1 0 150px;
    height: 100%;
    overflow: hidden;
    position: relative;
    -webkit-transition: -webkit-box-flex 350ms ease-out 350ms;
    transition: -webkit-box-flex 350ms ease-out 350ms;
    -o-transition: flex 350ms ease-out 350ms;
    transition: flex 350ms ease-out 350ms;
    transition: flex 350ms ease-out 350ms,-webkit-box-flex 350ms ease-out 350ms,-ms-flex 350ms ease-out 350ms;
    will-change: auto;
}

@media (min-width:64em) {
    .scrollbox:first-child .scrollbox__feature-image img {
        -o-object-position: 60%;
        object-position: 60%;
        font-family: 'object-fit: cover; object-position: 60%;';
    }
}

@media (min-width:64em) {
    .scrollbox:last-child .scrollbox__feature-image img {
        -o-object-position: 75%;
        object-position: 75%;
        font-family: 'object-fit: cover; object-position: 75%;';
    }
}

.scrollbox--open {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(100vh - 50px);
    flex: 0 0 calc(100vh - 50px);
    will-change: auto;
    background:#275593;
}

@media (min-width:64em) {
    .scrollbox--open {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        background:#275593;
    }
}

.scrollbox__close-btn {
    margin-left: auto;
    opacity: 0;
    position: absolute;
    right: 15px;
    top: 10px;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: opacity 250ms ease-in-out,-webkit-transform 450ms ease-in-out;
    transition: opacity 250ms ease-in-out,-webkit-transform 450ms ease-in-out;
    -o-transition: transform 450ms ease-in-out,opacity 250ms ease-in-out;
    transition: transform 450ms ease-in-out,opacity 250ms ease-in-out;
    transition: transform 450ms ease-in-out,opacity 250ms ease-in-out,-webkit-transform 450ms ease-in-out;
    width: 40px;
    z-index: 2;
}

.scrollbox__close-btn svg {
    -webkit-transform: scale(0) rotate(80deg);
    -ms-transform: scale(0) rotate(80deg);
    transform: scale(0) rotate(80deg);
    -webkit-transition: -webkit-transform .45s ease-in-out .25s;
    transition: -webkit-transform .45s ease-in-out .25s;
    -o-transition: transform .45s ease-in-out .25s;
    transition: transform .45s ease-in-out .25s;
    transition: transform .45s ease-in-out .25s,-webkit-transform .45s ease-in-out .25s;
}

.scrollbox--open .scrollbox__close-btn svg {
    -webkit-transform: scale(1) rotate(0deg);
    -ms-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
    -webkit-transition: -webkit-transform 1s cubic-bezier(0.19,1,0.22,1) 1.15s;
    transition: -webkit-transform 1s cubic-bezier(0.19,1,0.22,1) 1.15s;
    -o-transition: transform 1s cubic-bezier(0.19,1,0.22,1) 1.15s;
    transition: transform 1s cubic-bezier(0.19,1,0.22,1) 1.15s;
    transition: transform 1s cubic-bezier(0.19,1,0.22,1) 1.15s,-webkit-transform 1s cubic-bezier(0.19,1,0.22,1) 1.15s;
}

.scrollbox--open .scrollbox__close-btn {
    opacity: 1;
    position: absolute;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: opacity 250ms ease-in-out 650ms,-webkit-transform 250ms ease-in-out 850ms;
    transition: opacity 250ms ease-in-out 650ms,-webkit-transform 250ms ease-in-out 850ms;
    -o-transition: transform 250ms ease-in-out 850ms,opacity 250ms ease-in-out 650ms;
    transition: transform 250ms ease-in-out 850ms,opacity 250ms ease-in-out 650ms;
    transition: transform 250ms ease-in-out 850ms,opacity 250ms ease-in-out 650ms,-webkit-transform 250ms ease-in-out 850ms;
}

.scrollbox__intro {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    -webkit-transition: -webkit-transform 850ms cubic-bezier(0.4,0,0.2,1);
    transition: -webkit-transform 850ms cubic-bezier(0.4,0,0.2,1);
    -o-transition: transform 850ms cubic-bezier(0.4,0,0.2,1);
    transition: transform 850ms cubic-bezier(0.4,0,0.2,1);
    transition: transform 850ms cubic-bezier(0.4,0,0.2,1),-webkit-transform 850ms cubic-bezier(0.4,0,0.2,1);
    width: 100%;
    z-index: 1;
}

.scrollbox--open .scrollbox__intro {
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
}

.scrollbox__intro-container {
    opacity: 1;
    position: absolute;
    text-align: center;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    width: 100%;
    z-index: 4;
}

.scrollbox__title {
    color: #fff;
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 6px;
    line-height: 1.5;
    margin-bottom: 10px;
    margin-top: 10px;
    max-width: 90%;
    opacity: 1;
    text-align: center;
    text-transform: uppercase;
    -webkit-transition: -webkit-transform 1s cubic-bezier(0.25,0.46,0.45,0.94);
    transition: -webkit-transform 1s cubic-bezier(0.25,0.46,0.45,0.94);
    -o-transition: transform 1s cubic-bezier(0.25,0.46,0.45,0.94);
    transition: transform 1s cubic-bezier(0.25,0.46,0.45,0.94);
    transition: transform 1s cubic-bezier(0.25,0.46,0.45,0.94),-webkit-transform 1s cubic-bezier(0.25,0.46,0.45,0.94);
}

@media (min-width:64em) {
    .scrollbox__title {
        font-size: 22px;
    }
}

.scrollbox__subtitle {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
}

.scrollbox__subtitle > span {
    color: #fff;
    font-weight: 100;
    letter-spacing: 2px;
    line-height: 1.5;
    opacity: 0;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    -webkit-transition: opacity 150ms cubic-bezier(0.455,0.03,0.515,0.955);
    -o-transition: opacity 150ms cubic-bezier(0.455,0.03,0.515,0.955);
    transition: opacity 150ms cubic-bezier(0.455,0.03,0.515,0.955);
}

.scrollbox__subtitle > span:after {
    /*background-color: #13d4c8;*/
    background-color: #708BFE;
    bottom: -10px;
    content: '';
    display: inline-block;
    height: 2px;
    left: 0;
    opacity: 0;
    position: absolute;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: opacity 300ms cubic-bezier(0.455,0.03,0.515,0.955),-webkit-transform 500ms cubic-bezier(0.455,0.03,0.515,0.955) 150ms;
    transition: opacity 300ms cubic-bezier(0.455,0.03,0.515,0.955),-webkit-transform 500ms cubic-bezier(0.455,0.03,0.515,0.955) 150ms;
    -o-transition: opacity 300ms cubic-bezier(0.455,0.03,0.515,0.955),transform 500ms cubic-bezier(0.455,0.03,0.515,0.955) 150ms;
    transition: opacity 300ms cubic-bezier(0.455,0.03,0.515,0.955),transform 500ms cubic-bezier(0.455,0.03,0.515,0.955) 150ms;
    transition: opacity 300ms cubic-bezier(0.455,0.03,0.515,0.955),transform 500ms cubic-bezier(0.455,0.03,0.515,0.955) 150ms,-webkit-transform 500ms cubic-bezier(0.455,0.03,0.515,0.955) 150ms;
    width: 100%;
}

@media (min-width:64em) {
    .scrollbox__subtitle > span {
        font-size: 16px;
    }
}

.scrollbox-title--bigger {
    font-size: 18px;
    max-width: 100%;
    line-height: 25px;
}

@media (min-width:48em) {
    .scrollbox-title--bigger {
        font-size: 40px;
        line-height: inherit;
    }
}

.scrollbox-title--thin {
    font-weight: 100;
}

.scrollbox__feature-image {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    height: 100%;
    -webkit-transition: -webkit-transform 850ms cubic-bezier(0.4,0,0.2,1);
    transition: -webkit-transform 850ms cubic-bezier(0.4,0,0.2,1);
    -o-transition: transform 850ms cubic-bezier(0.4,0,0.2,1);
    transition: transform 850ms cubic-bezier(0.4,0,0.2,1);
    transition: transform 850ms cubic-bezier(0.4,0,0.2,1),-webkit-transform 850ms cubic-bezier(0.4,0,0.2,1);
    width: 100%;
    will-change: transform;
    z-index: 1;
}

.scrollbox__feature-image:after {
    background-color: #000;
    content: '';
    height: 100%;
    left: 0;
    opacity: 0.4;
    position: absolute;
    top: 0;
    -webkit-transition: opacity 1s cubic-bezier(0.4,0,0.2,1);
    -o-transition: opacity 1s cubic-bezier(0.4,0,0.2,1);
    transition: opacity 1s cubic-bezier(0.4,0,0.2,1);
    width: 100%;
}

.scrollbox--has-open .scrollbox--closed .scrollbox__feature-image:after {
    opacity: 0.8;
}

.ie .scrollbox__feature-image .ofi-wrapper,.scrollbox__feature-image img {
    max-width: none;
    -webkit-transition: -webkit-transform 1.5s cubic-bezier(0.445,0.05,0.55,0.95);
    transition: -webkit-transform 1.5s cubic-bezier(0.445,0.05,0.55,0.95);
    -o-transition: transform 1.5s cubic-bezier(0.445,0.05,0.55,0.95);
    transition: transform 1.5s cubic-bezier(0.445,0.05,0.55,0.95);
    transition: transform 1.5s cubic-bezier(0.445,0.05,0.55,0.95),-webkit-transform 1.5s cubic-bezier(0.445,0.05,0.55,0.95);
}

.scrollbox__feature-image img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    font-family: 'object-fit: cover;';
    width: 100%;
}

.scrollbox__content {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 50%;
    -webkit-transition: opacity .25s ease-out .25s;
    -o-transition: opacity .25s ease-out .25s;
    transition: opacity .25s ease-out .25s;
    width: 100%;
    will-change: transform;
}

.scrollbox--open .scrollbox__content {
    opacity: 1;
    -webkit-transition: opacity .25s ease-in .65s;
    -o-transition: opacity .25s ease-in .65s;
    transition: opacity .25s ease-in .65s;
}

.scrollbox__content .text-left,.scrollbox__content .text-center {
    font-size: 16px;
    margin: 0 auto;
    text-align: left;
    font-weight: 100;
    width: 100%;
    /*padding: 20px 20px 30px 20px;*/
    line-height: 24px;
    padding:170px 40px;
}

@media (min-width:48em) {
    .scrollbox__content .text-left,.scrollbox__content .text-center {
        font-size: 18px;
        line-height: 30px;
        /*padding: 40px;*/
        width: 80%;
        text-align: center;
        padding:170px 40px;

    }
}

@media (min-width:48em) {
    .scrollbox__content .text-left {
        text-align: left;
    }
}

.scrollbox--closed {
    cursor: pointer;
}

.no-touchevents .scrollbox--closed:hover .scrollbox__title {
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: -webkit-transform 1.5s cubic-bezier(0.165,0.84,0.44,1);
    transition: -webkit-transform 1.5s cubic-bezier(0.165,0.84,0.44,1);
    -o-transition: transform 1.5s cubic-bezier(0.165,0.84,0.44,1);
    transition: transform 1.5s cubic-bezier(0.165,0.84,0.44,1);
    transition: transform 1.5s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.5s cubic-bezier(0.165,0.84,0.44,1);
}

.no-touchevents .scrollbox--closed:hover .scrollbox__intro-container .scrollbox__subtitle span {
    opacity: 1;
    -webkit-transition: opacity 300ms cubic-bezier(0.455,0.03,0.515,0.955) 150ms;
    -o-transition: opacity 300ms cubic-bezier(0.455,0.03,0.515,0.955) 150ms;
    transition: opacity 300ms cubic-bezier(0.455,0.03,0.515,0.955) 150ms;
}

.no-touchevents .scrollbox--closed:hover .scrollbox__intro-container .scrollbox__subtitle span:after {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.no-touchevents .scrollbox--closed:hover .scrollbox__feature-image {
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
}

.no-touchevents .scrollbox--closed:hover .scrollbox__feature-image:after {
    opacity: 0.4 !important;
}

@media (min-width:64em) {
    .no-touchevents .scrollbox--closed:hover .scrollbox__feature-image img {
        -webkit-transition: -webkit-transform 4s cubic-bezier(0.445,0.05,0.55,0.95);
        transition: -webkit-transform 4s cubic-bezier(0.445,0.05,0.55,0.95);
        -o-transition: transform 4s cubic-bezier(0.445,0.05,0.55,0.95);
        transition: transform 4s cubic-bezier(0.445,0.05,0.55,0.95);
        transition: transform 4s cubic-bezier(0.445,0.05,0.55,0.95),-webkit-transform 4s cubic-bezier(0.445,0.05,0.55,0.95);
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }
}

.close-button {
    background-color: transparent;
    border: 0;
    border-radius: 0 50% 50% 0;
    cursor: pointer;
    height: 40px;
    margin: 0;
    opacity: 1;
    outline-color: none;
    overflow: visible;
    padding: 10px;
    -webkit-transition: visibility 1s,opacity 1s;
    -o-transition: visibility 1s,opacity 1s;
    transition: visibility 1s,opacity 1s;
    width: 40px;
}

.close-button:after {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-color: #fff;
    content: '';
    height: 40px;
    position: absolute;
    top: 0;
    width: 20px;
    will-change: transform;
}

.close-button:after {
    border-radius: 0 20px 20px 0;
    left: 50%;
    top: 0;
}

.no-touchevents .close-button:hover:before {
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.86,0,0.07,1);
    transition: -webkit-transform 0.5s cubic-bezier(0.86,0,0.07,1);
    -o-transition: transform 0.5s cubic-bezier(0.86,0,0.07,1);
    transition: transform 0.5s cubic-bezier(0.86,0,0.07,1);
    transition: transform 0.5s cubic-bezier(0.86,0,0.07,1),-webkit-transform 0.5s cubic-bezier(0.86,0,0.07,1);
    -webkit-transform: translate3d(-65px,0,0.01px);
    transform: translate3d(-65px,0,0.01px);
}

.no-touchevents .close-button:hover .close-button__message {
    -webkit-transition: width 0.5s cubic-bezier(0.86,0,0.07,1);
    -o-transition: width 0.5s cubic-bezier(0.86,0,0.07,1);
    transition: width 0.5s cubic-bezier(0.86,0,0.07,1);
    width: 76px;
}

.no-touchevents .close-button:hover .close-button__message span ,.no-touchevents .close-button:hover .close-button__message b {
    opacity: 1;
    -webkit-transition: opacity .25s ease-out .5s;
    -o-transition: opacity .25s ease-out .5s;
    transition: opacity .25s ease-out .5s;
}

.close-button__message {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-color: #fff;
    height: 100%;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    position: absolute;
    right: 50%;
    text-transform: uppercase;
    top: 0;
    -webkit-transition: width 0.5s cubic-bezier(0.86,0,0.07,1) 0.25s;
    -o-transition: width 0.5s cubic-bezier(0.86,0,0.07,1) 0.25s;
    transition: width 0.5s cubic-bezier(0.86,0,0.07,1) 0.25s;
    width: 0;
    will-change: transform;
}

.close-button__message:before {
    background-color: #fff;
    border-radius: 20px 0 0 20px;
    content: '';
    height: 40px;
    left: -20px;
    position: absolute;
    top: 0;
    width: 21px;
}

.close-button__message span ,.close-button__message b {
    display: inline-block;
    opacity: 0;
    padding: 10px 6px 0 0;
    -webkit-transition: opacity .25s ease-in;
    -o-transition: opacity .25s ease-in;
    transition: opacity .25s ease-in;
    float:left;
    font-size:14px;
}

.close-button__message b{
	float:left;
    font-size:20px;
    padding:5px 0 0 0;
}

.user-password-form,.user-login-form,.user-register-form,body[class*="pageid-user-"].user-logged-in header,.text--white {
    color: #fff;
}
.close-button svg {
    height: 100%;
    position: relative;
    width: 100%;
    z-index: 1;
}
.close-button svg path {
    fill: #000;
}