@charset "utf-8";

*, :after, :before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

body {
    color: #fff;
    font-size: 16px;
    font-family: 'Open Sans',Arial,sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #131623;
    line-height: 1.5;
    font-weight: 400;
    overflow-x: hidden;
    margin:0px
        
}

p {
    line-height: 1.7
}

img {
    max-width: 100%;
    border: none
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    font-weight: 400;
    line-height: 1.1;
    color: inherit
}

.h1, .h2, .h3, h1, h2, h3 {
    margin-top: 20px;
    margin-bottom: 10px
}

.h4, .h5, .h6, h4, h5, h6 {
    margin-top: 10px;
    margin-bottom: 10px
}

.h1, h1 {
    font-size: 2.35714em;
    line-height: 1.16364em
}

.h2, h2 {
    font-size: 1.875em
}

.h3, h3 {
    font-size: 1.5em
}

.h4, h4 {
    font-size: 1.125em
}

.h5, h5 {
    font-size: .875em
}

.h6, h6 {
    font-size: .75em
}

p {
    margin: 0 0 10px;
    font-size: 1em
}

.marshall-container::after, .marshall-container::before, [class^=marshall-col-]::after, [class^=marshall-col-]::before {
    content: "";
    display: block;
    clear: both
}

.marshall-container {
    width: 100%
}

.bg-container {
    background-image: url(http://pien.art/images/v7/blue-beach.html);
    background-size: cover;
    background-position: center
}

.marshall-col-content {
    position: relative;
    z-index: 3
}

.marshall-col-1, .marshall-col-10, .marshall-col-11, .marshall-col-12, .marshall-col-2, .marshall-col-3, .marshall-col-4, .marshall-col-5, .marshall-col-6, .marshall-col-7, .marshall-col-8, .marshall-col-9 {
    float: left;
    min-height: 1;
    height: 100vh
}

.marshall-col-1 {
    width: 8.33333%
}

.marshall-col-2 {
    width: 16.6667%
}

.marshall-col-3 {
    width: 25%
}

.marshall-col-4 {
    width: 33.3333%
}

.marshall-col-5 {
    width: 41.6667%
}

.marshall-col-6 {
    width: 50%
}

.marshall-col-7 {
    width: 58.3333%
}

.marshall-col-8 {
    width: 66.6667%
}

.marshall-col-9 {
    width: 75%
}

.marshall-col-10 {
    width: 83.3333%
}

.marshall-col-11 {
    width: 91.6667%
}

.marshall-col-12 {
    width: 100%
}

.content_overley {
    background-color: #000;
    bottom: 0;
    left: 0;
    opacity: .7;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1
}

.marshall-col-10.marshall-middle-10.marshall-col-content {
    margin-left: 8.3%;
    text-align: center
}

.marshall-logo {
    margin-left: 15%;
    margin-top: 35px;
    position: absolute
}

    .marshall-logo img {
        display: inline-block;
        max-width: 130px
    }

.marshall-content {
    display: block;
    margin-left: 15%;
    position: absolute;
    top: 50%;
    visibility: visible;
    width: 70%
}

    .marshall-content.css-center {
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%)
    }

.marshall-main-content {
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    overflow: auto;
    width: 100%
}

@-webkit-keyframes scaleDown {
    from {
        opacity: 1;
        -webkit-transform: scale(1)
    }

    to {
        opacity: 0;
        -webkit-transform: scale(.8)
    }
}

@keyframes scaleDown {
    from {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    to {
        opacity: 0;
        -webkit-transform: scale(.8);
        transform: scale(.8)
    }
}

@-webkit-keyframes moveToRight {
    from {
        -webkit-transform: translateX(100%)
    }

    to {
        -webkit-transform: translateX(0)
    }
}

@keyframes moveToRight {
    from {
        -webkit-transform: translateX(100%);
        transform: translateX(100%)
    }

    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes fullWidth {
    to {
        width: 100%
    }
}

@-webkit-keyframes fullWidth {
    to {
        width: 100%
    }
}

@-webkit-keyframes flash {
    0%,100%,50% {
        opacity: 1
    }

    25%,75% {
        opacity: 0
    }
}

@keyframes flash {
    0%,100%,50% {
        opacity: 1
    }

    25%,75% {
        opacity: 0
    }
}

@-webkit-keyframes spinnerRotate {
    from {
        -webkit-transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(360deg)
    }
}

@-moz-keyframes spinnerRotate {
    from {
        -moz-transform: rotate(0)
    }

    to {
        -moz-transform: rotate(360deg)
    }
}

@-ms-keyframes spinnerRotate {
    from {
        -ms-transform: rotate(0)
    }

    to {
        -ms-transform: rotate(360deg)
    }
}

@keyframes spinnerRotate {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes mformBounceInDown {
    60%,75%,90%,from,to {
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        transform: translate3d(0,-50px,0)
    }

    60% {
        opacity: 1;
        transform: translate3d(0,15px,0)
    }

    75% {
        transform: translate3d(0,-10px,0)
    }

    90% {
        transform: translate3d(0,5px,0)
    }

    to {
        transform: none
    }
}

@keyframes mrs_pulse {
    from {
        transform: scale3d(1,1,1);
        background-color: #fff;
        color: #000
    }

    50% {
        transform: scale3d(1.05,1.05,1.05);
        background-color: #f61067;
        color: #fff
    }

    to {
        transform: scale3d(1,1,1);
        background-color: #fff;
        color: #000
    }
}

.marshall-col-7 .marshall-content {
    width: 73%
}

.marshall-col-6.marshall-middle-6.marshall-col-content {
    margin-left: 25%;
    text-align: center
}

.marshall-middle-6 .marshall-logo {
    left: 50%;
    margin-left: 0;
    position: absolute;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.bg-container {
    background-image: url(http://pien.art/images/v12/building.html)
}

@keyframes jet {
    0% {
        transform: translateY(5px)
    }

    100% {
        transform: translateY(20px)
    }
}

@-webkit-keyframes jet {
    0% {
        -webkit-transform: translateY(5px);
        transform: translateY(5px)
    }

    100% {
        -webkit-transform: translateY(20px);
        transform: translateY(20px)
    }
}

@keyframes lf {
    0% {
        left: 200%
    }

    100% {
        left: -200%;
        opacity: 0
    }
}

@keyframes lf2 {
    0% {
        left: 200%
    }

    100% {
        left: -200%;
        opacity: 0
    }
}

@keyframes lf3 {
    0% {
        left: 200%
    }

    100% {
        left: -100%;
        opacity: 0
    }
}

@keyframes lf4 {
    0% {
        left: 200%
    }

    100% {
        left: -100%;
        opacity: 0
    }
}

.Background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

    .Background::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg,rgba(0,0,0,.5),transparent 50%,rgba(0,0,0,.5))
    }

@media screen and (max-width:600px) {
    .Background::after {
        background: linear-gradient(to bottom,rgba(0,0,0,.9),transparent 80%,rgba(0,0,0,.5))
    }
}

.mrs-hero-overley {
    background-color: rgba(255,255,255,.6);
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    min-height: 640px
}

.clouds_one {
    background: url(http://pien.art/images/cloud_one.png);
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 300%;
    -webkit-animation: cloud_one 50s linear infinite;
    -moz-animation: cloud_one 50s linear infinite;
    -o-animation: cloud_one 50s linear infinite;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    min-height: 640px
}

.clouds_two {
    background: url(http://pien.art/images/cloud_two.png);
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 300%;
    -webkit-animation: cloud_two 75s linear infinite;
    -moz-animation: cloud_two 75s linear infinite;
    -o-animation: cloud_two 75s linear infinite;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    min-height: 640px
}

.clouds_three {
    background: url(http://pien.art/images/cloud_three.png);
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 300%;
    -webkit-animation: cloud_three 100s linear infinite;
    -moz-animation: cloud_three 100s linear infinite;
    -o-animation: cloud_three 100s linear infinite;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    min-height: 640px
}

@-webkit-keyframes cloud_one {
    0% {
        left: 0
    }

    100% {
        left: -200%
    }
}

@-webkit-keyframes cloud_two {
    0% {
        left: 0
    }

    100% {
        left: -200%
    }
}

@-webkit-keyframes cloud_three {
    0% {
        left: 0
    }

    100% {
        left: -200%
    }
}

@keyframes cloud_one {
    0% {
        left: 0
    }

    100% {
        left: -200%
    }
}

@keyframes cloud_two {
    0% {
        left: 0
    }

    100% {
        left: -200%
    }
}

@keyframes cloud_three {
    0% {
        left: 0
    }

    100% {
        left: -200%
    }
}

.pienart h1 {
    color: #333;
    font-size: 3.5em
}

body.pienart .marshall-content {
    display: block;
    left: 50%;
    margin-left: 0;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translateX(-50%);
    visibility: visible;
    width: 90%
}

.Background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

    .Background::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.2) linear-gradient(135deg,rgba(0,0,0,.5),transparent 50%,rgba(0,0,0,.5)) repeat scroll 0 0
    }

@media screen and (max-width:600px) {
    .Background::after {
        background: linear-gradient(to bottom,rgba(0,0,0,.9),transparent 80%,rgba(0,0,0,.5))
    }
}

.marshall-bg-overley {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0) url(http://pien.art/images/v24/confetti.html) repeat scroll center center
}

.bg-content {
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

    .bg-content::after {
        background-color: rgba(51,51,51,.5);
        content: "";
        display: block;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: -1
    }

@keyframes slide {
    from {
        background-position: 100vw
    }

    to {
        background-position: 9932px
    }
}

@-webkit-keyframes slide {
    from {
        background-position: 100vw
    }

    to {
        background-position: 9932px
    }
}

.marshall-col-content {
    transition: all .4s ease 0s
}

.overley-background {
    bottom: 0;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%
}

body.mrs-color {
    background: #facf07;
    background: -moz-linear-gradient(top,#facf07 0,#facf07 36%,#e8a501 100%);
    background: -webkit-linear-gradient(top,#facf07 0,#facf07 36%,#e8a501 100%);
    background: linear-gradient(to bottom,#facf07 0,#facf07 36%,#e8a501 100%)
}

@keyframes flameIt {
    0% {
        transform: rotate(-1deg)
    }

    20% {
        transform: rotate(1deg)
    }

    40% {
        transform: rotate(-1deg)
    }

    60% {
        transform: rotate(1deg) scaleY(1.04)
    }

    80% {
        transform: rotate(-2deg) scaleY(.92)
    }

    100% {
        transform: rotate(1deg)
    }
}

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

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

@-moz-keyframes animStar {
    from {
        -moz-transform: translateY(0)
    }

    to {
        -moz-transform: translateY(-2000px)
    }
}

@-ms-keyframes animStar {
    from {
        -ms-transform: translateY(0)
    }

    to {
        -ms-transform: translateY(-2000px)
    }
}

@keyframes animStar {
    from {
        transform: translateY(0)
    }

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

#logo {
    width: 200px
}

@media screen and (max-width:769px) {
    #logo {
        width: 150px
    }
}