@charset "UTF-8";

/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.5.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2016 Daniel Eden
 */

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
}

@-webkit-keyframes bounce {
    from, 20%, 53%, 80%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    40%, 43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }

    90% {
        -webkit-transform: translate3d(0,-4px,0);
        transform: translate3d(0,-4px,0);
    }
}

@keyframes bounce {
    from, 20%, 53%, 80%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    40%, 43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }

    90% {
        -webkit-transform: translate3d(0,-4px,0);
        transform: translate3d(0,-4px,0);
    }
}

.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
}

@-webkit-keyframes flash {
    from, 50%, to {
        opacity: 1;
    }

    25%, 75% {
        opacity: 0;
    }
}

@keyframes flash {
    from, 50%, to {
        opacity: 1;
    }

    25%, 75% {
        opacity: 0;
    }
}

.flash {
    -webkit-animation-name: flash;
    animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes pulse {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes pulse {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse;
}

@-webkit-keyframes rubberBand {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        -webkit-transform: scale3d(.95, 1.05, 1);
        transform: scale3d(.95, 1.05, 1);
    }

    75% {
        -webkit-transform: scale3d(1.05, .95, 1);
        transform: scale3d(1.05, .95, 1);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes rubberBand {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        -webkit-transform: scale3d(.95, 1.05, 1);
        transform: scale3d(.95, 1.05, 1);
    }

    75% {
        -webkit-transform: scale3d(1.05, .95, 1);
        transform: scale3d(1.05, .95, 1);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.rubberBand {
    -webkit-animation-name: rubberBand;
    animation-name: rubberBand;
}

@-webkit-keyframes shake {
    from, to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }

    20%, 40%, 60%, 80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
}

@keyframes shake {
    from, to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }

    20%, 40%, 60%, 80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
}

.shake {
    -webkit-animation-name: shake;
    animation-name: shake;
}

@-webkit-keyframes headShake {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    6.5% {
        -webkit-transform: translateX(-6px) rotateY(-9deg);
        transform: translateX(-6px) rotateY(-9deg);
    }

    18.5% {
        -webkit-transform: translateX(5px) rotateY(7deg);
        transform: translateX(5px) rotateY(7deg);
    }

    31.5% {
        -webkit-transform: translateX(-3px) rotateY(-5deg);
        transform: translateX(-3px) rotateY(-5deg);
    }

    43.5% {
        -webkit-transform: translateX(2px) rotateY(3deg);
        transform: translateX(2px) rotateY(3deg);
    }

    50% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes headShake {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    6.5% {
        -webkit-transform: translateX(-6px) rotateY(-9deg);
        transform: translateX(-6px) rotateY(-9deg);
    }

    18.5% {
        -webkit-transform: translateX(5px) rotateY(7deg);
        transform: translateX(5px) rotateY(7deg);
    }

    31.5% {
        -webkit-transform: translateX(-3px) rotateY(-5deg);
        transform: translateX(-3px) rotateY(-5deg);
    }

    43.5% {
        -webkit-transform: translateX(2px) rotateY(3deg);
        transform: translateX(2px) rotateY(3deg);
    }

    50% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.headShake {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-name: headShake;
    animation-name: headShake;
}

@-webkit-keyframes swing {
    20% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg);
    }

    40% {
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg);
    }

    60% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg);
    }

    80% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg);
    }

    to {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

@keyframes swing {
    20% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg);
    }

    40% {
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg);
    }

    60% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg);
    }

    80% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg);
    }

    to {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

.swing {
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing;
}

@-webkit-keyframes tada {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    10%, 20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    }

    30%, 50%, 70%, 90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }

    40%, 60%, 80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes tada {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    10%, 20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    }

    30%, 50%, 70%, 90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }

    40%, 60%, 80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.tada {
    -webkit-animation-name: tada;
    animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes wobble {
    from {
        -webkit-transform: none;
        transform: none;
    }

    15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }

    30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }

    45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }

    60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }

    75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }

    to {
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes wobble {
    from {
        -webkit-transform: none;
        transform: none;
    }

    15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }

    30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }

    45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }

    60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }

    75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }

    to {
        -webkit-transform: none;
        transform: none;
    }
}

.wobble {
    -webkit-animation-name: wobble;
    animation-name: wobble;
}

@-webkit-keyframes jello {
    from, 11.1%, to {
        -webkit-transform: none;
        transform: none;
    }

    22.2% {
        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skewX(-12.5deg) skewY(-12.5deg);
    }

    33.3% {
        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skewX(6.25deg) skewY(6.25deg);
    }

    44.4% {
        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skewX(-3.125deg) skewY(-3.125deg);
    }

    55.5% {
        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skewX(1.5625deg) skewY(1.5625deg);
    }

    66.6% {
        -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
        transform: skewX(-0.78125deg) skewY(-0.78125deg);
    }

    77.7% {
        -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
        transform: skewX(0.390625deg) skewY(0.390625deg);
    }

    88.8% {
        -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
        transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    }
}

@keyframes jello {
    from, 11.1%, to {
        -webkit-transform: none;
        transform: none;
    }

    22.2% {
        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skewX(-12.5deg) skewY(-12.5deg);
    }

    33.3% {
        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skewX(6.25deg) skewY(6.25deg);
    }

    44.4% {
        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skewX(-3.125deg) skewY(-3.125deg);
    }

    55.5% {
        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skewX(1.5625deg) skewY(1.5625deg);
    }

    66.6% {
        -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
        transform: skewX(-0.78125deg) skewY(-0.78125deg);
    }

    77.7% {
        -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
        transform: skewX(0.390625deg) skewY(0.390625deg);
    }

    88.8% {
        -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
        transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    }
}

.jello {
    -webkit-animation-name: jello;
    animation-name: jello;
    -webkit-transform-origin: center;
    transform-origin: center;
}

@-webkit-keyframes bounceIn {
    from, 20%, 40%, 60%, 80%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97);
    }

    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes bounceIn {
    from, 20%, 40%, 60%, 80%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97);
    }

    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.bounceIn {
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

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

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0);
    }

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

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

    to {
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes bounceInDown {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

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

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0);
    }

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

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

    to {
        -webkit-transform: none;
        transform: none;
    }
}

.bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

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

    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0);
    }

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

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

    to {
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes bounceInLeft {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

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

    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0);
    }

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

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

    to {
        -webkit-transform: none;
        transform: none;
    }
}

.bounceInLeft {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    from {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0);
        transform: translate3d(3000px, 0, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0);
        transform: translate3d(-25px, 0, 0);
    }

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

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

    to {
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes bounceInRight {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    from {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0);
        transform: translate3d(3000px, 0, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0);
        transform: translate3d(-25px, 0, 0);
    }

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

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

    to {
        -webkit-transform: none;
        transform: none;
    }
}

.bounceInRight {
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }

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

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

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes bounceInUp {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }

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

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

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.bounceInUp {
    -webkit-animation-name: bounceInUp;
    animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
    20% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9);
    }

    50%, 55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }
}

@keyframes bounceOut {
    20% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9);
    }

    50%, 55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }
}

.bounceOut {
    -webkit-animation-name: bounceOut;
    animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
    20% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }

    40%, 45% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }
}

@keyframes bounceOutDown {
    20% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }

    40%, 45% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }
}

.bounceOutDown {
    -webkit-animation-name: bounceOutDown;
    animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(20px, 0, 0);
        transform: translate3d(20px, 0, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
    }
}

@keyframes bounceOutLeft {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(20px, 0, 0);
        transform: translate3d(20px, 0, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
    }
}

.bounceOutLeft {
    -webkit-animation-name: bounceOutLeft;
    animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(-20px, 0, 0);
        transform: translate3d(-20px, 0, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }
}

@keyframes bounceOutRight {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(-20px, 0, 0);
        transform: translate3d(-20px, 0, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }
}

.bounceOutRight {
    -webkit-animation-name: bounceOutRight;
    animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
    20% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }

    40%, 45% {
        opacity: 1;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }
}

@keyframes bounceOutUp {
    20% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }

    40%, 45% {
        opacity: 1;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }
}

.bounceOutUp {
    -webkit-animation-name: bounceOutUp;
    animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInDownBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInDownBig {
    -webkit-animation-name: fadeInDownBig;
    animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInLeftBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInLeftBig {
    -webkit-animation-name: fadeInLeftBig;
    animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInRightBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInRightBig {
    -webkit-animation-name: fadeInRightBig;
    animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInUpBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInUpBig {
    -webkit-animation-name: fadeInUpBig;
    animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}

@keyframes fadeOutDown {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}

.fadeOutDown {
    -webkit-animation-name: fadeOutDown;
    animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }
}

@keyframes fadeOutDownBig {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }
}

.fadeOutDownBig {
    -webkit-animation-name: fadeOutDownBig;
    animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

@keyframes fadeOutLeft {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

.fadeOutLeft {
    -webkit-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
    }
}

@keyframes fadeOutLeftBig {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
    }
}

.fadeOutLeftBig {
    -webkit-animation-name: fadeOutLeftBig;
    animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}

@keyframes fadeOutRight {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}

.fadeOutRight {
    -webkit-animation-name: fadeOutRight;
    animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }
}

@keyframes fadeOutRightBig {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }
}

.fadeOutRightBig {
    -webkit-animation-name: fadeOutRightBig;
    animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}

@keyframes fadeOutUp {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}

.fadeOutUp {
    -webkit-animation-name: fadeOutUp;
    animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }
}

@keyframes fadeOutUpBig {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }
}

.fadeOutUpBig {
    -webkit-animation-name: fadeOutUpBig;
    animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
    from {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    40% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    50% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    80% {
        -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
        transform: perspective(400px) scale3d(.95, .95, .95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
}

@keyframes flip {
    from {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    40% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    50% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    80% {
        -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
        transform: perspective(400px) scale3d(.95, .95, .95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
}

.animated.flip {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    -webkit-animation-name: flip;
    animation-name: flip;
}

@-webkit-keyframes flipInX {
    from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

@keyframes flipInX {
    from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

.flipInX {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    animation-name: flipInX;
}

@-webkit-keyframes flipInY {
    from {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

@keyframes flipInY {
    from {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

.flipInY {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInY;
    animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
    from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1;
    }

    to {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0;
    }
}

@keyframes flipOutX {
    from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1;
    }

    to {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0;
    }
}

.flipOutX {
    -webkit-animation-name: flipOutX;
    animation-name: flipOutX;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
    from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1;
    }

    to {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0;
    }
}

@keyframes flipOutY {
    from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1;
    }

    to {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0;
    }
}

.flipOutY {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipOutY;
    animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
    from {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
    }

    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
        opacity: 1;
    }

    to {
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

@keyframes lightSpeedIn {
    from {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
    }

    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
        opacity: 1;
    }

    to {
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

.lightSpeedIn {
    -webkit-animation-name: lightSpeedIn;
    animation-name: lightSpeedIn;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
    from {
        opacity: 1;
    }

    to {
        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0;
    }
}

@keyframes lightSpeedOut {
    from {
        opacity: 1;
    }

    to {
        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0;
    }
}

.lightSpeedOut {
    -webkit-animation-name: lightSpeedOut;
    animation-name: lightSpeedOut;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
    from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, -200deg);
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0;
    }

    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

@keyframes rotateIn {
    from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, -200deg);
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0;
    }

    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

.rotateIn {
    -webkit-animation-name: rotateIn;
    animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }

    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

@keyframes rotateInDownLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }

    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

.rotateInDownLeft {
    -webkit-animation-name: rotateInDownLeft;
    animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }

    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

@keyframes rotateInDownRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }

    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

.rotateInDownRight {
    -webkit-animation-name: rotateInDownRight;
    animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }

    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

@keyframes rotateInUpLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }

    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

.rotateInUpLeft {
    -webkit-animation-name: rotateInUpLeft;
    animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -90deg);
        transform: rotate3d(0, 0, 1, -90deg);
        opacity: 0;
    }

    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

@keyframes rotateInUpRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -90deg);
        transform: rotate3d(0, 0, 1, -90deg);
        opacity: 0;
    }

    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

.rotateInUpRight {
    -webkit-animation-name: rotateInUpRight;
    animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
    from {
        -webkit-transform-origin: center;
        transform-origin: center;
        opacity: 1;
    }

    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, 200deg);
        transform: rotate3d(0, 0, 1, 200deg);
        opacity: 0;
    }
}

@keyframes rotateOut {
    from {
        -webkit-transform-origin: center;
        transform-origin: center;
        opacity: 1;
    }

    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, 200deg);
        transform: rotate3d(0, 0, 1, 200deg);
        opacity: 0;
    }
}

.rotateOut {
    -webkit-animation-name: rotateOut;
    animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1;
    }

    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }
}

@keyframes rotateOutDownLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1;
    }

    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }
}

.rotateOutDownLeft {
    -webkit-animation-name: rotateOutDownLeft;
    animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1;
    }

    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }
}

@keyframes rotateOutDownRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1;
    }

    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }
}

.rotateOutDownRight {
    -webkit-animation-name: rotateOutDownRight;
    animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1;
    }

    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }
}

@keyframes rotateOutUpLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1;
    }

    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }
}

.rotateOutUpLeft {
    -webkit-animation-name: rotateOutUpLeft;
    animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1;
    }

    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 90deg);
        transform: rotate3d(0, 0, 1, 90deg);
        opacity: 0;
    }
}

@keyframes rotateOutUpRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1;
    }

    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 90deg);
        transform: rotate3d(0, 0, 1, 90deg);
        opacity: 0;
    }
}

.rotateOutUpRight {
    -webkit-animation-name: rotateOutUpRight;
    animation-name: rotateOutUpRight;
}

@-webkit-keyframes hinge {
    0% {
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }

    20%, 60% {
        -webkit-transform: rotate3d(0, 0, 1, 80deg);
        transform: rotate3d(0, 0, 1, 80deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }

    40%, 80% {
        -webkit-transform: rotate3d(0, 0, 1, 60deg);
        transform: rotate3d(0, 0, 1, 60deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1;
    }

    to {
        -webkit-transform: translate3d(0, 700px, 0);
        transform: translate3d(0, 700px, 0);
        opacity: 0;
    }
}

@keyframes hinge {
    0% {
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }

    20%, 60% {
        -webkit-transform: rotate3d(0, 0, 1, 80deg);
        transform: rotate3d(0, 0, 1, 80deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }

    40%, 80% {
        -webkit-transform: rotate3d(0, 0, 1, 60deg);
        transform: rotate3d(0, 0, 1, 60deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1;
    }

    to {
        -webkit-transform: translate3d(0, 700px, 0);
        transform: translate3d(0, 700px, 0);
        opacity: 0;
    }
}

.hinge {
    -webkit-animation-name: hinge;
    animation-name: hinge;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollIn {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes rollIn {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.rollIn {
    -webkit-animation-name: rollIn;
    animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
        transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    }
}

@keyframes rollOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
        transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    }
}

.rollOut {
    -webkit-animation-name: rollOut;
    animation-name: rollOut;
}

@-webkit-keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }

    50% {
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }

    50% {
        opacity: 1;
    }
}

.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
}

@-webkit-keyframes zoomInDown {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

@keyframes zoomInDown {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

.zoomInDown {
    -webkit-animation-name: zoomInDown;
    animation-name: zoomInDown;
}

@-webkit-keyframes zoomInLeft {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

@keyframes zoomInLeft {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

.zoomInLeft {
    -webkit-animation-name: zoomInLeft;
    animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

@keyframes zoomInRight {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

.zoomInRight {
    -webkit-animation-name: zoomInRight;
    animation-name: zoomInRight;
}

@-webkit-keyframes zoomInUp {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

@keyframes zoomInUp {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

.zoomInUp {
    -webkit-animation-name: zoomInUp;
    animation-name: zoomInUp;
}

@-webkit-keyframes zoomOut {
    from {
        opacity: 1;
    }

    50% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }

    to {
        opacity: 0;
    }
}

@keyframes zoomOut {
    from {
        opacity: 1;
    }

    50% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }

    to {
        opacity: 0;
    }
}

.zoomOut {
    -webkit-animation-name: zoomOut;
    animation-name: zoomOut;
}

@-webkit-keyframes zoomOutDown {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

@keyframes zoomOutDown {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

.zoomOutDown {
    -webkit-animation-name: zoomOutDown;
    animation-name: zoomOutDown;
}

@-webkit-keyframes zoomOutLeft {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
        transform: scale(.1) translate3d(-2000px, 0, 0);
        -webkit-transform-origin: left center;
        transform-origin: left center;
    }
}

@keyframes zoomOutLeft {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
        transform: scale(.1) translate3d(-2000px, 0, 0);
        -webkit-transform-origin: left center;
        transform-origin: left center;
    }
}

.zoomOutLeft {
    -webkit-animation-name: zoomOutLeft;
    animation-name: zoomOutLeft;
}

@-webkit-keyframes zoomOutRight {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
        transform: scale(.1) translate3d(2000px, 0, 0);
        -webkit-transform-origin: right center;
        transform-origin: right center;
    }
}

@keyframes zoomOutRight {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
        transform: scale(.1) translate3d(2000px, 0, 0);
        -webkit-transform-origin: right center;
        transform-origin: right center;
    }
}

.zoomOutRight {
    -webkit-animation-name: zoomOutRight;
    animation-name: zoomOutRight;
}

@-webkit-keyframes zoomOutUp {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

@keyframes zoomOutUp {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

.zoomOutUp {
    -webkit-animation-name: zoomOutUp;
    animation-name: zoomOutUp;
}

@-webkit-keyframes slideInDown {
    from {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInDown {
    from {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
    from {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInLeft {
    from {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.slideInLeft {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
    from {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInRight {
    from {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.slideInRight {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight;
}

@-webkit-keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.slideInUp {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp;
}

@-webkit-keyframes slideOutDown {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}

@keyframes slideOutDown {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}

.slideOutDown {
    -webkit-animation-name: slideOutDown;
    animation-name: slideOutDown;
}

@-webkit-keyframes slideOutLeft {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

@keyframes slideOutLeft {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

.slideOutLeft {
    -webkit-animation-name: slideOutLeft;
    animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}

@keyframes slideOutRight {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}

.slideOutRight {
    -webkit-animation-name: slideOutRight;
    animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}

@keyframes slideOutUp {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}

.slideOutUp {
    -webkit-animation-name: slideOutUp;
    animation-name: slideOutUp;
}

/***** TEXT COLORs *****/

.white-text {
    color: #FFF;
}

.cricket-green-text, .light-green {
    color: #60a630;
}

.dark-green-text, .dark-green {
    color: #036b37;
}

.gold-text {
    color: #ffcb05;
}

.light-blue-text, .light-blue {
    color: #1b75bb;
}

.dark-blue-text {
    color: #12508d;
}

.error-text {
    color: #cf292a;
}

.dark-gray-text {
    color: #404041;
}

.light-gray-text {
    color: #f4f4f4;
}

.black-text {
    color: #000;
}

.light-green-text {
    color: #BDD630;
}

/***** BACKGROUND COLORS *****/

.white-background {
    background-color: #FFFFFF;
}

.cricket-green-background {
    background-color: #60a630;
}

.dark-green-background {
    background-color: #036b37;
}

.gold-background {
    background-color: #ffcb05;
}

.light-blue-background {
    background-color: #1b75bb;
}

.dark-blue-background {
    background-color: #12508d;
}

.dark-gray-background {
    background-color: #404041;
}

.light-gray-background {
    background-color: #f6f6f6;
}

.light-green-background {
    background-color: #BDD630;
}

.black-background {
    background-color: #000000;
}

.red-background {
    background-color: #cf292a;
}
/**
Fix for CSDO-7653
************************************/
.cycle-slide {
    display:none;
}
.cycle-slideshow .cycle-slide {
    display: block;
}


/***********************************
Hero Slider Component Styles
***********************************/
.heroSlider {
    position: relative;
    overflow: hidden;
    border-bottom: 2px solid #e4e4e4;
}

.heroSlider .slide {
    height: auto;
    overflow: hidden;
    width: 100%;
}

.heroSlider .imageContainer {
    height: 430px;
    margin-top: 0;
}

.heroSlider h1, .heroSlider p.h1 {
    font-size: 36px;
    margin-top: 10px;
    padding: 0 30px;
}

.heroSlider h2, .heroSlider p.h2 {
    font-family:'Simply Cricket Book', Helvetica, Arial, sans-serif;
    font-size: 24px;
    margin-top: 10px;
}

.heroSlider p.leadIn {
    font-family:'Simply Cricket Book', Helvetica, Arial, sans-serif;
    font-size: 24px;
    margin-top: 10px;
}

.heroSlider .heroText {
    margin-top: 80px;
}

.heroSlider .heroText.lg-top-mrg {
    margin-top: 120px;
}

.heroSlider .heroText > div {
    /* Removed Margin to Content can control spacing */
    margin-top: 0;
    margin-bottom: 30px;
    font-size: 11px;
}

.heroSlider .heroText a, .heroSlider .heroText a:hover {
    color: #000000;
    text-decoration: underline;
}

.heroSlider .sliderLink {
    margin-bottom: 25px;
    /*margin-right: 16.66666667%;*/
}

/*.heroSlider .sliderLink.text-left {
    margin-right: 33.33333333%;
}*/

.heroSlider .sliderLink a {
    border-radius: 10px;
    /*float: left;*/
    font-size: 16px;
    margin: 0;
    /*padding: 10px;*/
    text-align: center;
    text-decoration: none;
    width: auto;
    display: inline-block;
    text-decoration: none;
}

.heroSlider .sliderLink a:hover {
    text-decoration: none;
}

.heroSlider a.navigation {
    position: absolute;
    margin-top: 0;
    opacity: 1;
    width: 30px;
    height: 45px;
    text-indent: -9999px;
    z-index: 999;
    top: 45%;
}

.heroSlider:hover a.navigation {
    opacity:100;
}

a.navigation:focus {
    opacity:100;
}

.heroSlider a.prev {
    background: url(/uiassets/prev-arrow.png) center  no-repeat;
    left: 15px;
    display: block;
}

.heroSlider a.next {
    background: url(/uiassets/next-arrow.png) center no-repeat;
    right: 15px;
    display: block;
}

.heroSlider .pagination {
    position: absolute;
    z-index: 100;
    text-align: center;
    padding: 0;
    width: 100%;
    cursor: pointer;
    bottom: 0;
    margin: 9px 0;
/*
    position: relative;
    z-index: 10;
    margin-bottom: 5px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding: 0;
    width:100%;
    cursor: pointer;
*/
}

.heroSlider .pagination li {
    list-style: none;
    margin: 0 5px;
    text-indent: -9999px;
    border:none !important;
}
.heroSlider .pagination button {
    background: #e4e4e4;
    border-radius: 20px;
    border: 1px solid white;
    height: 20px;
    width: 20px;    
/*
    background: #f4f4f4;
    border-radius: 20px;
    border: 2px solid white;
    display: inline-block;
    height: 17px;
    list-style: none;
    margin: 0 3px;
    text-indent: -9999px;
    width: 17px;
*/
}
.heroSlider .pagination a.slider-anchor {
    float: none;
    display: inline-block;
    padding: 0;
}
.heroSlider .pagination li.cycle-pager-active button, .heroSlider ul.mobilePagination li.cycle-pager-active button {
    background: #1b75bb;
}
.heroSlider .pagination a.slider-anchor:first-child {
    border-radius: 20px;
}
.heroSlider .pagination a.slider-anchor:last-child {
    border-radius: 20px;
}


.heroSlider .sliderLink a .buttonText{
        padding-right: 20px
}


/***********************************
    LG Styles
***********************************/
@media (min-width: 769px) {

    .heroSlider .sliderLink a {
        padding: 15px 40px;
        margin-bottom: 20px;
    }

}

/***********************************
    MD Styles
***********************************/
@media (min-width: 481px) and (max-width: 768px) {
        .heroSlider .sliderLink a {
            padding: 15px 40px;
            margin-bottom: 40px;
        }
    
}

/***********************************
SM - XS - MD  Styles
***********************************/
@media (max-width: 768px) {
    /*.heroSlider .sliderLink {
        margin-right: 8.33333333%;
    }
    
    .heroSlider .sliderLink.text-left {
        margin-right: 16.6666666667%;
    }*/
}

/***********************************
SM - XS Styles
***********************************/
@media (max-width: 480px) {
    
    .heroSlider .imageContainer {
        height: 200px;
        margin-top: 0;
        text-align: center;
    }
    
    .heroSlider h1 {
        font-size: 24px;
    }
    
    .heroSlider h2 {
        font-size: 18px;
    }
    
    .heroSlider p.leadIn {
        font-size: 14px;
    }
    
    .heroSlider .heroText {
        margin-top: 10px;
        text-align: center;
    }
    
    .heroSlider .heroText > div {
        margin-top: 15px;
        margin-bottom: 15px;
    }
    
    .heroSlider .sliderLink, .heroSlider .sliderLink.text-left {
        margin-right: 0;
    }
    
/*
    .heroSlider {
        padding-top:10px;
    }
*/

    .heroSlider .constrain-width-1024 {
        padding-bottom: 32px;
    }

    .heroSlider .slider-img-parent {
        margin-top:10px;   
    }

    .heroSlider ul.pagination li {
        width: 18px;
        height: 18px;
        border: 1px solid white;
    }

    .heroSlider ul.pagination button.cycle-pager-active {
        background: #1b75bb;
    }

/*
    .heroSlider:hover a.navigation {
        display: none;
    }
*/

    .heroSlider ul.mobilePagination {
        padding: 0;
        text-align: center;
        width: 100%;
    }

    .heroSlider a.prev {
        background: url(/uiassets/prev-arrow-mobile.png) center  no-repeat;
        left: 15px;
        display: block;
    }

    .heroSlider a.next {
        background: url(/uiassets/next-arrow-mobile.png) center no-repeat;
        right: 15px;
        display: block;
    }
    
/*
    .heroSlider ul.mobilePagination li {
        display: inline-block;
        background: #f4f4f4;
        border-radius: 20px;
        border: 2px solid #FFFFFF;
        margin: 0 5px;
        height: 16px;
        width: 16px;
    }
*/

    .heroSlider .sliderLink a {
        padding: 15px 0;
        width: 100%;
        margin-bottom: 40px;
    }
    .heroSlider a.navigation {
        top: 20%;
    }
}

/***********************************
Hero Slider Component Styles
***********************************/
.heroComponent {
    position: relative;
    overflow: hidden;
    margin-left: -15px;
    margin-right: -15px;
}

.heroComponent .imageContainer {
    height: 385px;
    margin-top: 0;
}

.heroComponent .imageContainer img {
    display: block;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

.heroComponent .hero-heading {
    font-size: 35px;
    margin-top: 10px;
    line-height: 1.1;
    font-weight: 700;
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
}

.heroComponent .hero-subheading {
    font-family:'Simply Cricket Book', Helvetica, Arial, sans-serif;
    font-size: 24px;
    margin-top: 10px;
    font-weight: 500;
    line-height: 1.1;
}

.heroComponent p.leadIn {
    font-family:'Simply Cricket Book', Helvetica, Arial, sans-serif;
    font-size: 24px;
    margin-top: 10px;
}

.heroComponent .heroText {
    margin-top: 80px;
}

.heroComponent .heroText > div {
    /* Removed Margin to Content can control spacing */
    margin-top: 0;
    margin-bottom: 30px;
    font-size: 14px;
}

.heroComponent .heroText a, .heroComponent .heroText a:hover {
    color: #000000;
    text-decoration: underline;
}

.heroComponent .sliderLink {
    margin-bottom: 25px;
    /*margin-right: 16.66666667%;*/
}

.heroComponent .sliderLink a {
    border-radius: 10px;
    /*float: left;*/
    font-size: 16px;
    margin: 0;
    /*padding: 10px;*/
    text-align: center;
    text-decoration: none;
    width: auto;
    display: inline-block;
    text-decoration: none;
}

.heroComponent .sliderLink a:hover {
    text-decoration: none;
}

.heroComponent a.navigation {
    position: absolute;
    margin-top: 0;
    opacity: 1;
    width: 30px;
    height: 45px;
    text-indent: -9999px;
    z-index: 999;
    top: 45%;
}

.heroComponent:hover a.navigation {
    opacity:100;
}

.heroComponent .slide .row {
    margin: 0 15px 20px 15px;
}

a.navigation:focus {
    opacity:100;
}

/***********************************
    LG Styles
***********************************/
@media (min-width: 769px) {

    .heroComponent .sliderLink a {
        padding: 10px 40px;
        margin-bottom: 40px;
    }
}

/***********************************
    MD Styles
***********************************/
@media (min-width: 481px) and (max-width: 768px) {

}

/***********************************
SM - XS - MD  Styles
***********************************/
@media (max-width: 768px) {
    .heroComponent p.leadIn {
        font-size: 20px;
    }

    .heroComponent .hero-heading {
        font-size: 25px;
    }
    
    .heroComponent .hero-subheading {
        font-size: 14px;
    }

    .heroComponent .heroText > div {
        margin-bottom: 12px;
    }

    .heroComponent .sliderLink a {
        padding: 10px 40px;
        margin-bottom: 40px;
    }
}

/***********************************
SM - XS Styles
***********************************/
@media (max-width: 480px) {

    .heroComponent .imageContainer {
        margin-top: 0;
        text-align: center;
        height: auto;
        min-height: 200px;
    }

    .heroComponent .hero-heading {
        font-size: 20px;
    }
    
    .heroComponent .hero-subheading {
        font-size: 14px;
    }

    .heroComponent p.leadIn {
        font-size: 14px;
    }

    .heroComponent .heroText {
        margin-top: 10px;
        padding-left: 50px;
        padding-right: 50px;
        text-align: center;
    }

    .heroComponent .heroText > div {
        margin-top: 15px;
        margin-bottom: 10px;
    }

    .heroComponent .sliderLink, .heroComponent .sliderLink.text-left {
        margin-right: 0;
    }

    .heroComponent .constrain-width-1024 {
        padding-bottom: 32px;
    }

    .heroComponent .slider-img-parent {
        margin-top:10px;
    }

    .heroComponent .sliderLink a {
        padding: 10px 0;
        width: 100%;
        margin-bottom: 40px;
    }
    .heroComponent a.navigation {
        top: 20%;
    }

    .heroComponent .slide .row {
        margin: 0 0px 20px 0px;
    }
}
#coverage-checker-form .field-wrapper{
    position: relative;
}

#coverage-checker-form .input-wrapper{
    margin-bottom: 0;
}

#coverage-checker-btn {
    display: inline-block;
    width: auto;
    color: #1B75BB;
    background: #F6F6F6;
    border: 1px solid #E1DFE1;
    border-radius: 0 4px 4px 0;
    margin: 0 0 0 -18px;
    height: 48px;
    text-align: left;
    padding: 0 3em;
}

#coverage-checker-btn:hover,
#coverage-checker-btn:focus {
    background: #1d5c99;
    color: #E1DFE1;
}

#coverage-checker-btn:disabled {
    color: #1d5c99;
}

#coverage-checker-form .input-wrapper {
    margin-bottom: 0;
}

#coverage-checker-input:focus,
#coverage-checker-input.dirty {
    border: 1px solid #1b75bb;
    padding: 19px 9px 6px;
}

#coverage-checker-input:focus~#coverage-checker-label,
#coverage-checker-input.dirty~#coverage-checker-label {
    top: 5px;
    left: 12px;
    font-size: 10px;
    color: #1b75bb;
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
}

#coverage-checker-input:focus~#coverage-checker-clear-input,
#coverage-checker-input.dirty~#coverage-checker-clear-input {
    display: block;
    width: 12px;
    font-size: 12px;
}

#coverage-checker-input {
    position: relative;
    height: 50px;
    border-radius: 4px;
    border: 1px solid #E1DFE1;
    border-right: 0;
    height: 48px;
    width: 60%;
    padding-bottom: 0;
    font-family: 'Simply Cricket Book', Helvetica, Arial, sans-serif;
}

#coverage-checker-clear-input {
    top: 25px;
    left: 187px;
    text-decoration: none;
    cursor: pointer;
    color: #bbb;
    border-radius: 100%;
    position: absolute;
    display: none;
}

#coverage-checker-clear-input:hover {
    color: #337ab7;
    transition: 300ms ease all;
}


#coverage-checker-label{
    font-size: 16px;
    font-family: 'Simply Cricket Book', Helvetica, Arial, sans-serif;
    position: absolute;
    pointer-events: none;
    left: 26px;
    top: 13px;
    -webkit-transition: 300ms ease all;
    transition: 300ms ease all;
}

.coverage-checker {
    display: flex;
    border: 1px solid #E1DFE1;
    border-radius: 10px;
    box-shadow: 0 0 5px 0 rgb(187 189 192 / 50%);
    padding: 10px;
}

.coverage-image img{
    width: 400px;
}

.coverage-header .check-text {
    font-family: 'Simply Cricket Bold', Helvetica, Arial, sans-serif ;
    color: #000000;
    font-size: 16px;
    line-height: 23px;
    width: 460px;
    padding-bottom: 15px;
}

.coverage-form {
    width: 400px;
}

.coverage-form p, .bad-area-sub-head{
    font-size: 14px;
    line-height: 17px;
    text-align: left;
    padding-bottom: 20px;
}

.bad-area {
    color: #CF292A;
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 22px;
}

.coverage-success{
    color: #60A630;
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 22px;
}

.coverage-response-disclaimer{
    font-size: 12px;
    line-height: 17px;
}

#checker-section {
    padding-bottom: 40px;
}

.caret-arrow {
    transform: rotateY(
            180deg
    );
}

@media (max-width : 767px) {
    .coverage-checker{
        flex-direction: column-reverse;
    }

    #coverage-checker-input{
        width: 51%;
    }

    .coverage-image img{
        display: flex;
        width: 323px;
        justify-content: center;
    }

    #coverage-checker-clear-input {
        left: 150px;
    }

    .coverage-form{
        width: 355px;
    }

    .coverage-form p, .bad-area-sub-head{
        width: 281px;
    }
}

@media (max-width : 320px) {
    #coverage-checker-input{
        width: 36%;
    }

    .coverage-image img{
        width: 274px;
    }

    .coverage-checker {
        padding: 0;
    }

    .coverage-header h2, #coverage-form-area{
        padding-left: 8px;
    }

    .coverage-form p, .bad-area-sub-head {
        width: 262px;
    }

    #coverage-checker-clear-input {
        left: 82px;
    }

    #response {
        padding-left: 6px;
    }
}

/***********************************
Container Styles
***********************************/
#mainWrapper {
    background: white !important;
}

caption {
    visibility: collapse;
}

#plansTableContainer {
    display: none;
}

.responsive #container.container-fluid {
    max-width: inherit;
}

/***********************************
General Styles
***********************************/
html,
body {
    overflow-x: hidden;
}

html,
body,
#mainWrapper {
    background: white !important;
}

.picker-show {
    display: none;
}

h1 {
    font-size: 30px;
}

h1 p,
h1 small {
    font-size: 18px;
    margin-top: 5px;
    color: black;
    font-family: 'Simply Cricket Book', Helvetica, Arial, sans-serif;
}

h1 p {
    margin-bottom: 0.625em;
}

h1 small {
    display: block;
    padding-left: 0;
    margin-bottom: 30px;
}

h2.sectionHeader {
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    font-size: 30px;
    line-height: 30px;
    font-weight: 700;
}

.loggedOutText {
    font-size: 18px;
    line-height: 22px;
    margin-top: 7px;
}

.loggedOutText a {
    font-family: 'Simply Cricket Book', Helvetica, Arial, sans-serif;
}

a.demi {
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
}

.topspace {
    font-family: 'Simply Cricket Book', Helvetica, Arial, sans-serif;
    font-weight: 100;
}

.subheadAlignment {
    margin-left: -17px;

}

h2 {
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
}

.sub-title {
    font-family: 'Simply Cricket Book', Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 22px;
    margin-bottom: 9px;
}

#headLine .sub-title.alignCenter {
    margin: .75em 0;
}

.unlimited-link {
    float: left;
    font-size: 18px;
    margin-bottom: 20px;
}

.unlimited2-offer {
    padding-bottom: 20px;
}

.unlimited2-offer img {
    padding-left: 80%;
}

.unlimited2-offer .text {
    padding-top: 3px;
}

#rateplanInfoRow sup {
    font-size: 60%;
    top: -.9em;
}

/*plan buttons positioning*/
.shop_plans .rateplan-info .plan-info-top-outer-box .plan-info-box form a.shop {
    margin: 0.625em 0 -0.625em 0;
}

.button:hover {
    background: #12508d;
}

a.remove,
a.remove:hover {
    background-color: #cf292a;
}

.modal-footer a.remove,
.modal-footer a.remove:hover {
    background-color: #12508d;
}

.red-text {
    color: #3170b7;
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
}

.pad-10 {
    padding-top: 10px;
}

.warning {
    background: red !important;
}

.promo-ribbon {
    float: right;
    margin-right: -66px;
    margin-bottom: 15px;
    display: none;
}

.group-legend {
    margin-top: 30px;
    margin-bottom: 20px;
    width: 300px;
}

.group-legend>p {
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    margin: 0;
    width: 300px;
    font-size: 14px;
    padding: 12px;
    position: relative;
    display: inline-block;
    border: 1px solid #bbbdc0;
}

.plan-wrapper {
    padding-left: 0;
    padding-right: 0;
    margin-top: 12px;
    position: relative;
    text-decoration: none;
}


.plan-wrapper .plan-added-text {
    display: none;
    color: #000000;
    font-size: 12px;
    margin: -10px 0 0;
}

.plan-added-text.hidden-xs {
    float: right;
}

.plan-wrapper.plan-added .plan-added-text {
    display: block;
}

.plan-wrapper.plan-added .plan-added-text.show-in-mobile {
    display: none;
}

.plan-added .plans {
    border: 1px solid #60a630;
    background: url(/uiassets/down-arrow-white.png) no-repeat right 30px center #60a630;
}

.plans {
    background: url(/uiassets/down-arrow.png) no-repeat right 30px center #FFFFFF;
    border: 1px solid #bbbdc0;
    cursor: pointer;
    position: relative;
    float: left;
    font-size: 20px;
    padding: 7px 0;
    outline: none;
    width: 100%;
}

.plans.data-only {
    padding: 10px 0;
}

.plans.cricketPromo {
    border: 2px solid #60a630;
}

.planDisclaimer {
    font-size: 11px;
    font-family: 'Simply Cricket Book', Helvetica, Arial, sans-serif;
}

.planNote {
    font-size: 16px;
}

.plans.has-focus {
    /* This to make the blue outline appear all around the accordion header when it is open*/
    z-index: 2;
}

.plans.active {
    background: url(/uiassets/up-arrow.png) no-repeat right 30px center #f6f6f6;
}

.plan-added .plans.active {
    background: url(/uiassets/up-arrow-white.png) no-repeat right 30px center #60a630;
}

.group-legend>p>.group-save-icon,
.plans>.group-save-icon {
    top: 0;
    left: 3px;
    font-size: 20px;
    color: #000000;
    position: absolute;
    background-color: transparent;
}

.group-legend>p>.group-save-icon {
    top: 2px;
}

.group-legend>p>.group-save-icon-bg,
.plans>.group-save-icon-bg {
    top: -1px;
    left: -1px;
    position: absolute;
    border: 20px solid #ffcb05;
    background-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
}

.btn-plans-page {
    width: 226px;
    border-color: #3F6FB2;
    color: #3F6FB2;
    margin-bottom: 10px;
}

.btn-plans-page:hover,
.btn-plans-page:focus {
    background-color: #3F6FB2;
    color: #ffffff;
}

.plans .name {
    color: #036b37;
    font-size: 26px;
    font-weight: bold;
    margin: 10px 0;
    line-height: 26px;
}

.plans-options {
    background-color: #FFFFFF;
    border-left: 1px solid #bbbdc0;
    border-bottom: 1px solid #bbbdc0;
    border-right: 1px solid #bbbdc0;
    display: none;
    padding: 20px 0 40px;
    font-size: 16px;
    position: relative;
    overflow: hidden;
    width: 100%;
}

.clear-padding {
    padding: 0;
}

.newShopFlowPlanLinks {
    max-width: 500px;
    margin: 20px auto;
}

.plans .name,
.plan-added-text,
.details .auto-pay-price p,
.data-usage .usage-heading {
    font-family: 'Simply Cricket Bold', Helvetica, Arial, sans-serif;
}

.details .auto-pay-price .plan-price-dollar,
.details .auto-pay-price .plan-price,
.details .auto-pay-price .plan-price-slash,
.details .auto-pay-price .plan-price-time,
.data-usage .usage-limit,
.newShopFlowPlanLinks p.light-green {
    font-family: 'Simply Cricket Bold', Helvetica, Arial, sans-serif;
}

.details .auto-pay-price p .note,
.plan-price-subhead {
    /* Applies the body font to the sub-head due to inheriting from a tag. */
    font-family: 'Simply Cricket Bold', Helvetica, Arial, sans-serif;
}

.details .auto-pay-price .plan-price-dollar,
.details .auto-pay-price .plan-price,
.details .auto-pay-price .plan-price-slash,
.details .auto-pay-price .plan-price-time {
    color: #036b37;
    left: 0;
    margin-left: 0;
}

.details .price {
    font-size: 24px;
}

.details .data-usage p {
    font-size: 16px;
    line-height: 16px;
}

.details h4 {
    font-size: 18px;
    line-height: 24px;
}

.details ul {
    padding-left: 20px;
}

.details .auto-pay-price p .note,
.details ul li {
    font-size: 14px;
    line-height: 18px;
}

.details .unlimited-disclaimer {
    font-size: 11px;
    line-height: 14px;
}

.usage .data-usage {
    border: 1px solid #bbbdc0;
    margin-bottom: 30px;
}

.data-usage-header {
    background-color: #60a630;
    border-bottom: 1px solid #bbbdc0;
    padding: 14px 16px;
}

.data-usage-header h4 {
    font-size: 13px;
    line-height: 13px;
    margin: 0;
    text-transform: uppercase;
}

.data-usage .usage-heading {
    font-size: 14px;
    line-height: 14px;
    margin: 0;
    text-transform: uppercase;
}

.data-usage .usage-subhead {
    font-size: 11px;
    line-height: 14px;
}

.data-usage-content {
    padding: 30px 20px 0;
}

.data-usage-content table {
    width: 100%;
}

.data-usage-content table td {
    vertical-align: top;
}

.data-usage-content p {
    margin-bottom: 20px;
}

.data-usage .usage-limit {
    color: #046A38;
    font-size: 12px;
    line-height: 15px;
    text-align: right;
    text-transform: uppercase;
}

.usage .add-to-cart.shop.button {
    display: block;
    margin: 0 auto;
    width: 124px;
}

.usage .add-to-cart.shop.button.remove,
.usage .add-to-cart.shop.button.remove:active,
.usage .add-to-cart.shop.button.remove.active {
    background: #cf292a;
}

.fine-print {
    font-size: 10px;
    line-height: 10px;
    margin-bottom: 30px;
}

.fine-print p {
    margin: 0;
}

.data-usage-content .activity-container {
    background-repeat: no-repeat;
    margin-bottom: 30px;
    min-height: 26px;
    padding-left: 40px;
}

.data-usage-content .download {
    background-image: url('/uiassets/download.png');
}

.data-usage-content .email {
    background-image: url('/uiassets/email.png');
}

.data-usage-content .music {
    background-image: url('/uiassets/music.png');
}

.data-usage-content .social {
    background-image: url('/uiassets/social.png');
}

.data-usage-content .video {
    background-image: url('/uiassets/video.png');
}

.data-usage-content .web {
    background-image: url('/uiassets/web.png');
}

.planCreditPromo a {
    border-style: dotted;
    border-width: thin;
    padding: 5px;
    margin-left: -5px;
}

#dataOnlyPlans span.per-line{
    display: none;
}

@media (max-width: 768px) {
    .shop_plans h1 {
        font-size: 24px;
        line-height: 30px;
    }

    .sub-title {
        font-size: 16px;
        line-height: 20px;
    }

    h2.sectionHeader {
        font-size: 18px;
        line-height: 24px;
    }

    .loggedOutText {
        font-size: 14px;
        line-height: 16px;
    }

    /* Added for horizontal padding on mobile devices. */
    .plans-options {
        padding-left: 20px;
        padding-right: 20px;
    }

    .details {
        margin-bottom: 20px;
    }

    .usage .data-usage {
        margin: 0 -21px 30px;
        box-shadow: 0 0 4px 0 #888;
    }

    #ratePlanGraphicWrapper {
        margin: 0 auto 30px;
    }

    #multiline_discount_wrapper {
        margin-bottom: 22px;
    }

    .unlimited2-offer img {
        padding-left: 50%;
    }

    .subheadAlignment {
        margin-left: 0;
    }
    #headLine .sub-title.alignCenter {
        margin: .75em auto;
        width: 250px;
    }
}

.price-wrapper {
    color: #000000;
    margin: 7px 0 -5px -5px;
}

.plan-added .price-wrapper,
.plan-added .plans.active .price-wrapper {
    color: #000;
}

h3.price-wrapper.plan-mobile-title.show-in-mobile {
    color: #036b37;
}



.plan-price-subhead {
    font-size: 12px;
    color: #000000;
}

.plans.active .name {
    color: #036b37;
}

.plan-added .name,
.plan-added .plans.active .name {
    color: #fff;
}

.plans.active .plan-price-subhead {
    color: #000000;
}

.plan-added {
    border: 2px solid #60a630;
    box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.4);
}

.plan-added>.plans-options {
    border: none;
}

.plans.active .price-wrapper {
    /* color: #036b37; */
}

.header-padding {
    margin-top: 9px;
    font-size: 30px;
}

.sub-header-padding {
    margin-top: -11px;
    font-size: 14px;
}

.plan-mobile-title {
    font-family: 'Simply Cricket Bold', Helvetica, Arial, sans-serif;
    font-size: 26px;
}

@media (max-width: 768px) {
    .plan-mobile-title {
        font-size: 24px;
    }
}

table td {
    position: relative;
}

.table-edge-top-left {
    position: absolute;
    top: -2px;
    left: -2px;
}

.table-edge-top-right {
    position: absolute;
    bottom: -2px;
    right: -2px;
}

h1 .tooltip-icon {
    font-size: 1.429em;
    /*Error: Defect #6629 "Not supposed to be there.*/
    display: none;
}

.richtext-with-class {
    padding: 0 15px;
    background: none !important;
}

.plan-info-richtext {
    background: #f4f4f4;
    width: 100%;
    max-width: 1000px;
    margin: 0.625em auto 50px;
    padding: 30px;
    border-radius: 0.625em;
}

.richtext-with-class p {
    font-size: 0.750em;
    font-family: 'Simply Cricket Book', Helvetica, Arial, sans-serif;
}

#basicphone .modal-dialog .modal-content {
    height: 500px;
}

#basicphone .modal-dialog .modal-content .modal-body {
    height: auto;
}

.br-on-mobile {
    display: none;
}

/***********************************
Line Details  Styles
***********************************/
.lineNo.lineDetailsNoPicker .lineDetailsText {
    margin: 0;
}

/***********************************
Promo/Intro Styles
***********************************/
body.shop_plans div.intro {
    background: url(/uiassets/city_scape_shop_section_winterV2.jpg) repeat-x bottom;
    max-height: 388px;
}

div.intro .col-lg-12 {
    padding: 0;
}

div.main #container div.intro {
    margin: 0;
    width: 100%;
}

/*set height between header graphic & content*/
body.responsive,
html {
    overflow-x: hidden;
    min-width: inherit;
}

div.intro header {
    padding: 0 15px;
    max-width: 1024px;
    margin: 0 auto;
    display: none;
}

div.intro .img-responsive {
    margin: 0 auto;
}

body.shop_plans .seopar {
    background-color: #FFFFFF;
}

body.basic-phone-only div.intro {
    height: auto;
}

div.main #container section.intro p {
    font-size: 22px;
    margin-left: 240px;
    margin-right: 67px;
    display: none;
}

div.main article section.content a.hidden_links {
    overflow: hidden;
}

.promoBackground{
    background-color: #F6F6F6;
    padding: 4px;
}

.promoHeader {
    color: #036b37;
    font-family: 'Simply Cricket Bold', Helvetica, Arial, sans-serif;
    font-size: 19px;
}

.promoSubHead {
    margin-top:-9px;
}

.promoDisclaimer{
    margin-top: -12px;
    font-family: 'Simply Cricket Bold', Helvetica, Arial, sans-serif;
    font-size: 12px;
}
.promoContent {
    padding-right: 10px;
}

/***********************************
Tabs Styles
***********************************/
div.tabs {
    margin: 20px -15px 0;
    border-bottom: 2px solid #CDCDCD;
    padding: 0 15px;
}

div.tabs a {
    background-color: #3170b7;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    box-shadow: -1px 0 1px 0 #000;
    color: #FFFFFF;
    float: left;
    margin-top: 6px;
    padding: 10px 50px;
    text-align: center;
}

div.tabs .active {
    border-top: 2px solid #CDCDCD;
    border-left: 2px solid #CDCDCD;
    border-right: 2px solid #CDCDCD;
    border-bottom: 2px solid #FFFFFF;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: #3170b7;
    display: inline;
    float: left;
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    font-size: 14px;
    margin-bottom: -2px;
    padding: 14px 50px 10px;
}

div.tabs .data-only-plans.active {
    margin-left: 0;
}

.tabsCentered{
    display: flex;
    width: 100%;
    justify-content: center;
}

@media (max-width: 480px) {
    div.tabs {
        padding: 0px 21px;
    }

    div.tabs .active {
        padding: 14px 10px 10px;
    }

    div.tabs a.data-only-tabs {
        padding: 10px 10px;
    }

    .heroSlider .heroText.lg-top-mrg {
        margin-top: 15px;
    }

    .heroSlider h1.data-only,
    .heroSlider p.h1.data-only {
        font-size: 32px;
    }

    .heroSlider p.data-only-sub {
        font-size: 16px !important;
    }

    .heroSlider .blackLink {
        color: black;
    }

    .data-only.plan-price-subhead {
        font-family: 'Simply Cricket Book', Helvetica, Arial, sans-serif;
    }

}

/***********************************
Social Styles
***********************************/
#socialRow {
    vertical-align: middle;
    min-height: 50px;
    height: 50px;
    display: table;
}

#termsWrapper,
#socialIconsWrapper {
    height: 100%;
    vertical-align: middle;
    display: table-cell;
    padding: 10px 0;
    line-height: 1em;
    color: #fff;
}

a#newterms,
a#newterms:hover {
    font-size: 12px;
    color: #fff;
    text-decoration: underline;
}

.basic-phone-only #newterms {
    display: none;
}

#socialIconsWrapper {
    text-align: right;
}

#socialIconsWrapper p {
    display: inline-block;
    font-size: 12px;
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    margin: 0;
}

#socialIconsWrapper .hidden_links {
    margin-left: 10px;
}

#socialIconsWrapper a {
    display: inline-block;
}

/***********************************
Messaging Styles
***********************************/
#messaging {
    font-size: 18px;
}

#add_line,
#upgrade {
    display: none;
}

.orangeText {
    color: #cf292a;
    font-weight: bold;
}

.multilinenote {
    font-size: 12px;
}

@media (max-width: 480px) {
    #messaging {
        text-align: center;
    }
}

/***********************************
Steps Styles
***********************************/
.nonShopFlow hr {
    margin: 2px 177px;
    border-top: solid 1px #BBBDC0;
}

.pager {
    padding-bottom: 15px;
}

.stepsTitle {
    font-size: 20px;
    padding: 17px 0 7px 0;
}

.stepsTitle span {
    color: #036b37;
    font-family:'Simply Cricket Bold', Helvetica, Arial, sans-serif;
}

.stepsListItem {
    font-size: 16px;
    font-family:'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    padding-right: 35px;
}

.pager li>a,
.pager li>span {
    padding: 0 4px;
}

@media (max-width: 768px) {
    .stepsTitle {
        font-size: 18px;
    }

    .stepsTitle span {
        display: inherit;
    }

    .nonShopFlow hr {
        margin: 10px;
    }

    .pager li {
        display: block;
    }

    .stepsListItem {
        padding-right: 0;

    }

    div.tabs{
        padding: 0 15px;
    }

    div.tabs a{
        padding: 10px 10px;
    }

}

/***********************************
Modal Styles
***********************************/
#plan-phone-modal h5 {
    margin-bottom: 5px;
}

#modal-countrieslist ul {
    width: 99%;
}

#modal-countrieslist ul li {
    float: left;
    width: 33%;
    list-style-type: none;
    font-size: 13px;
    text-indent: 0em;
}

#basicphone .modal-dialog {
    max-width: 380px;
}

#basicphone .scrollable {
    padding-right: 0;
}

#basicphone p {
    margin-bottom: 0;
    margin-right: 0;
    text-align: center;
}

#basicphone ul {
    padding-left: 15px;
}

#basicphone a.shop {
    max-width: 140px;
}

#basicphone a.remove {
    background-color: #cf292a;
}

#basicphone div.number {
    color: #60A630;
    font-size: 32px;
    margin-bottom: 15px;
    text-align: center;
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    font-weight: normal;
}

#basicphone div.number sup {
    font-size: 18px;
    top: -0.6em;
}

#basicphone div.number span {
    font-size: 24px;
}

/***********************************
Rate Plan Styles
***********************************/

.rateplan-info,
#rateplanInfoRow {
    display: block !important;
}

#ratePlanTabLinkWrapper {
    border-bottom: 1px solid #404041;
    margin-top: 40px;
}

#ratePlanTabLinkWrapper .nav-tabs {
    border-bottom: 0;
    margin-bottom: 1px;
}

#ratePlanGrid {
    border-collapse: separate;
    border-spacing: 0;
    position: relative;
    display: table;
    width: 100%;
    padding: 0 15px;
    margin-bottom: 12px;
}

.plan-info-box {
    text-align: center;
}

.clear-grid-cell {
    border: none;
}

#bestvalueheader>.bestValueCell {
    border-left: 8px solid #ff6c08;
    border-right: 8px solid #ff6c08;
    border-top: 8px solid #ff6c08;
    background: #ff6c08;
    color: #fff;
    -webkit-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
    padding: 6px 0 14px 0;
}

.bestValueTop {
    width: 100%;
    margin-top: -59px;
    background-color: #ff6c08;
    float: left;
    padding: 10px 0;
    margin-left: -18px;
    border-radius: 10px 10px 0 0;
    border-left: 18px solid #ff6c08;
    border-right: 18px solid #ff6c08;
    box-sizing: content-box;
}

.bestValueCell h3 {
    margin: 0;
    font-size: 1.286em
}

.bestValueCell .rightBlueBorder {
    width: 2px;
    background-color: #000;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.bestValueCell .leftBlueBorder {
    width: 2px;
    background-color: #000;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
}

.bestValueCell .bottomBlueBorder {
    width: 100%;
    height: 4px;
    background-color: #60a630;
    position: absolute;
    bottom: -2px;
    left: 0;
}

#gridThead .bestValueCell::before,
#bestvalueheader .bestValueCell::before {
    display: none;
}

.bestValueModal {
    color: #fff;
}

.plan-info-box h3 {
    margin-top: -50px;
    padding-bottom: 36px;
}

.bestValueModal div {
    display: inline-block;
    margin-top: 0;
}

.bestValueModal img {
    margin-top: -2px;
}

.bestValueModal:hover {
    color: #fff;
}

.grid-row.last .grid-cell.bestValueCell::before {
    border-bottom: 8px solid #ff6c08;
    top: -3px;
    height: 110%;
}


.data-time-estimates .grid-cell.grid-data-plan {
    background-color: #60a630;
    color: #fff;
    padding: 8px 10px;
    position: relative;
}

.data-time-estimates .grid-cell.grid-data-plan .data-link,
.data-time-estimates .grid-cell.no-grid-data-plan .data-link {
    text-align: center;
    position: absolute;
    z-index: 1;
    width: 200%;
    left: -100%;
}

.data-time-estimates .grid-cell.grid-data-plan:not(.show-on-full) .data-link,
.data-time-estimates .grid-cell.no-grid-data-plan .data-link {
    display: none;
}

.data-time-estimates .grid-cell.grid-title {
    background-color: #404041;
}

.data-time-estimates .grid-title a {
    color: #fff;
    text-decoration: underline;
}

.data-time-estimates .grid-data-plan a,
.data-time-estimates .no-grid-data-plan a {
    color: #fff;
}

.data-time-estimates .grid-data-plan a:hover,
.data-time-estimates .no-grid-data-plan a:hover {
    text-decoration: underline;
}

.data-time-estimates .grid-cell {
    vertical-align: top;
    padding: 2px 24px;
}

.post-data-time-estimates .bestValueCell .leftBlueBorder,
.post-data-time-estimates .bestValueCell .rightBlueBorder {
    height: 100%;
    top: 0;
}

.grid-cell>ul {
    margin-left: 0.625em;
    margin-bottom: 0;
    padding-left: 1.429em;
}

.grid-cell>ul li {
    padding: 0;
    text-align: left;
    line-height: 1.2em;
    margin-bottom: 4px;
}

.grid-cell h5,
.grid-cell .data-link {
    margin-top: 0;
    margin-left: 0;
    margin-bottom: 0;
    font-weight: bold;
    text-align: left;
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
}

.grid-blank {
    border: 0;
}

.grid-title {
    height: 100px;
    text-align: left;
    vertical-align: middle;
    width: 20%;
}

.grid-title h5 {
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: normal;
    margin: 0;
    line-height: 1.286em;
}

.gridModalLink {
    font-size: 12px;
    font-weight: 100;
}

.highSpeedText {
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: normal;
}

.cricket-green-background {
    background: #60a630;
}

.cricket-yellow-background {
    background: #c4d600;
}

.black-bg+.grid-row>.grid-cell {
    border-top: none;
}

.black-bg .grid-cell span {
    color: white !important;
}

.yellow-bg .grid-cell {
    background-color: #fffae6;
}

.left-top-border-radius {
    -webkit-border-radius: 0.625em 0 0 0;
    border-radius: 0.625em 0 0 0;
}

.right-top-border-radius {
    -webkit-border-radius: 0 0.625em 0 0;
    border-radius: 0 0.625em 0 0;
}

.left-bottom-border-radius {
    -webkit-border-radius: 0 0 0 0.625em;
    border-radius: 0 0 0 0.625em;
}

.right-bottom-border-radius {
    -webkit-border-radius: 0 0 0.625em 0;
    border-radius: 0 0 0.625em 0;
}

.check-mark {
    background-image: url('/uiassets/check_mark.png');
    background-position: center;
    background-repeat: no-repeat;
}

.uncheck-mark {
    background-image: url('/uiassets/uncheck_mark.png');
    background-position: center;
    background-repeat: no-repeat;
}

#ratePlanGrid h2,
.unlimited-container h2 {
    font-size: 1.429em;
    font-weight: 300;
    margin-top: 0;
}

.plan-price-dollar {
    font-family: 'Simply Cricket Bold', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    position: relative;
    top: -7px;
    left: 5px;
}

.plan-info-top-outer-box .plan-price-dollar,
.plan-info-box-wrap .plan-price-dollar {
    font-family: 'Simply Cricket Bold', Helvetica, Arial, sans-serif;
    font-size: 1.6em
}

@-moz-document url-prefix() {
    .plan-price-dollar {
        color: #036b37;
        font-size: 16px;
        font-weight: 200;
        position: relative;
        top: -13px;
        left: 1px;
    }
}

.plan-price {
    font-family: 'Simply Cricket Bold', Helvetica, Arial, sans-serif;
    font-size: 26px;
    font-weight: bold;
    padding-right: 2px;
}

.plan-info-top-outer-box .plan-price,
.plan-info-box-wrap .plan-price,
.unlimited-container .plan-price {
    font-family: 'Simply Cricket Bold', Helvetica, Arial, sans-serif;
    font-size: 3em
}

.plan-price-slash {
    font-family: 'Simply Cricket Bold', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    margin-left: -5px;
    padding-right: 2px;
}

.plan-info-top-outer-box .plan-price-slash,
.plan-info-box-wrap .plan-price-slash {
    font-size: 3em
}

.plan-price-cents {
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    font-size: 1.571em;
    font-weight: 200;
    position: relative;
    top: -0.750em;
    left: -5px;
}

.plan-price-time {
    margin-top: 5px;
    font-family: 'Simply Cricket Bold', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    margin-left: -6px;
    margin-bottom: 21px;
    webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -ms-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    font-smoothing: antialiased;
}

.plan-info-top-outer-box .plan-price-time,
.plan-info-box-wrap .plan-price-time,
.unlimited-container .plan-price-time {
    font-family: 'Simply Cricket Bold', Helvetica, Arial, sans-serif;
    font-size: 1.6em
}

a.shop.button {
    font-weight: 200;
    margin: 0 auto;
    display: none;
}

#moreInformation {
    cursor: pointer;
    text-align: center;
    padding: 0 15px;
    margin-bottom: 5px;
}

.ext-webkit #moreInformation {
    margin-left: 1px;
    margin-right: 1px;
}

#moreInformation a {
    color: white !important;
}

#moreInformation .nub {
    display: inline-block;
    background: url('/uiassets/more_info_arrow.png') no-repeat center;
    width: 17px;
    height: 9px;
}

#moreInformation.expanded .nub {
    background: url('/uiassets/more_info_arrow_expand.png') no-repeat center;
}

#moreInformation .col-md-12 {
    border-left: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    background: #3170b7;
    color: white;
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    padding-top: 0.625em;
    padding-bottom: 0.625em;
}

.basicphoneoffer {
    text-align: Center;
    font-size: 18px;
    margin-bottom: 30px;
    margin-top: 30px;
}

.displayText {
    font-size: 34px;
    text-align: center;
}

.displayText strong {
    font-size: 45px;
}

.displayText sup {
    top: -10px;
    left: 4px;
}

#dataRateLink {
    text-align: left;
}

#additionalFeesLink {
    margin-bottom: 20px;
    text-decoration: underline;
}

#dataRateLink.marginbottom {
    margin-bottom: 35px;
}

#dataRateLink a {
    font-size: 12px;
    text-decoration: underline;
}

#dataRateLink span {
    float: right;
    font-size: 12px;
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    text-indent: -14px;
    width: 37%
}

.disclaimer {
    font-size: 12px;
    margin-bottom: 10px;
}

.disclaimer-title,
.disclaimer.h6,
.disclaimer>.h6 {
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    font-weight: normal;
}

.disclaimer.marginbottom {
    margin-bottom: 35px;
}

.grid-cell small {
    font-size: 75%;
}

.data-speed {
    color: #036b37;
    font-size: 1.715em;
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
}

.was-speed {
    color: #6E6E6E;
    font-size: 1.35em;
}

.strikethrough {
    position: relative;
}

.strikethrough:before {
    position: absolute;
    content: "";
    left: -5%;
    top: 50%;
    right: 0;
    border-top: 2px solid;
    border-color: #CF2D3F;
    width: 110%;

    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    transform: rotate(-10deg);
}

.multiline_discount {
    margin-bottom: 35px;
    padding: 0 15px;
}

#ratePlanGraphicWrapper {
    max-width: 700px;
    margin: 0 auto 16px;
    text-align: right;
}

.ie #ratePlanGraphicWrapper {
    width: 700px;
}

#ratePlanGraphicWrapper img {
    margin: 5px auto;
}

#multiline_discount_wrapper {
    margin-bottom: 50px;
}

.multiline_discount h1 {
    margin-top: 0;
}

.multiline_discount p {
    font-size: 18px;
    margin-top: 7px;
}

#multiLine-info-modal {
    font-size: 12px;
    margin: 0 auto;
    text-decoration: underline;
}

.noteLink {
    font-size: 60%;
    top: -0.6em;
    left: 5px;
}

.pro-cell .noteLink {
    font-size: 50%;
    top: -1em;
}

.pad-10-top-bottom{
    padding-top: 10px;
    padding-bottom: 10px;
}

/***********************************
SEOPAR Styles
***********************************/
.seopar,
.seopar .richtext-with-class {
    max-width: 1054px;
    width: 100%;
    padding-bottom: 0;
}

.plan-info-richtext {
    background-color: #fff;
    padding: 0;
    max-width: 1054px;
    margin: 0.625em auto 58px;
}

/***********************************
LG Styles
***********************************/
@media (min-width: 769px) {
    #mobile-plan-nav {
        display: none;
    }

    #ratePlanGrid p {
        display: block;
    }

    .bestValueCell {
        position: relative;
    }

    div.bestValueCell+div.grid-cell {
        border-left: none;
    }

    td.pro-cell.grid-cell.grid-data-plan,
    td.smart-cell.grid-cell.grid-data-plan,
    td.basic-cell.grid-cell.grid-data-plan {
        border-left: none;
    }

    th.starter-cell.grid-cell {
        border-right: 2px solid #000;
    }

    th.basic-cell.grid-cell {
        border-left: none;
    }

    .data-time-estimates .grid-cell.grid-data-plan {
        border-left: 2px solid #000;
    }

    tr.black-bg td.starter-cell.grid-cell {
        border-left: 2px solid #fff;
    }


    .promoImage {
        padding: 10px 13px 0 10px;
    }

}

/***********************************
Mobile Plan Nav Styles
***********************************/
.plans-list {
    padding: 0 15px;
    margin-bottom: 30px;
}

.row.plans-list {
    margin-top: 12px;
}

#mobile-plan-nav {
    margin: 20px 0 0 0;
}

#mobile-plan-nav .plan-info-box-wrap {
    float: left;
    width: 25%;
}

#mobile-plan-nav .plan-info-box-wrap.first-cell {
    width: 25%;
}

#mobile-plan-nav .plan-info-box {
    border: 2px solid #3170b7;
    cursor: pointer;
    padding-bottom: 12px;
    margin: 0 0 0 5px;
}

.ext-webkit #mobile-plan-nav .end-cell .plan-info-box {
    margin: 0 1px 0 5px;
}

.ext-safari #mobile-plan-nav .end-cell {
    float: right;
}

#mobile-plan-nav .first-cell .plan-info-box {
    margin: 0;
}

.ext-webkit #mobile-plan-nav .first-cell .plan-info-box {
    margin: 0 0 0 1px;
}

#mobile-plan-nav .active .plan-info-box {
    border-left-color: black;
    border-right-color: black;
    border-top-color: black;
    border-bottom: 2px solid white;
    padding-bottom: 20px;
    background: white;
    position: relative;
}

#mobile-plan-nav .active.end-cell .plan-info-box:after {
    content: '';
    width: 2px;
    height: 2px;
    background: black;
    display: block;
    position: absolute;
    right: -2px;
    bottom: -2px;
}

#mobile-plan-nav .active.first-cell .plan-info-box:before {
    content: '';
    width: 2px;
    height: 2px;
    background: black;
    display: block;
    position: absolute;
    left: -2px;
    bottom: -2px;
}

#mobile-plan-nav .bestValueCell h3 {
    font-size: 1.286em;
    text-align: center;
    background-color: #ff6c08;
    color: #fff;
    border-radius: 0.625em 0.625em 0 0;
    margin: 0 0 0 5px;
    padding: 10px 4px 4px 4px;
}

#mobile-plan-nav .bestValueCell .plan-info-box {
    background-color: #fff;
}

#mobile-plan-nav .price-wrapper .plan-name {
    height: 31px;
    margin: 0.7em auto;
    display: table;
    text-align: center;
    width: 90%;
}

#mobile-plan-nav .price-wrapper .plan-name h2 {
    color: #036b37;
    display: table-cell;
    vertical-align: middle;
    margin: 0;
}

#mobile-plan-nav .active .price-wrapper .plan-name h2 {
    color: #000000;
}

#mobile-plan-nav .plan-price span {
    font-size: 0.750em;
}

#addPlanWrap {
    padding: 16px;
    margin-top: -2px;
    border-top: 2px solid black;
    border-left: 2px solid black;
    border-right: 2px solid black;
    border-radius: 0;
}

.ext-webkit #addPlanWrap {
    margin-left: 1px;
    margin-right: 1px;
}

#addPlan>a {
    width: 100%;
}

@media (min-width: 769px) {
    .data-time-estimates .grid-cell.no-grid-data-plan {
        background: url("/uiassets/patt_disabled-button.png") repeat scroll 0 0 #CCC;
        background-size: 100% 100%;
    }
}

@media (min-width: 651px) and (max-width: 768px) {
    #mobile-plan-nav .bestValueCell h3 {
        font-size: 1.200em;
    }

    #mobile-plan-nav .price-wrapper .plan-name h2 {
        font-size: 1.500em;
    }

    #moreInformation .col-md-12 {
        margin-bottom: 30px;
    }
}

@media (min-width: 481px) and (max-width: 650px) {

    /*
            #mobile-plan-nav .bestValueCell{
                margin-top: -27px;
            }
    */
    #mobile-plan-nav .bestValueCell h3 {
        font-size: 0.850em;
    }

    #mobile-plan-nav .price-wrapper .plan-name h2 {
        font-size: 1.200em;
    }

    #mobile-plan-nav .bestValueModal img {
        height: 14px;
        width: 14px;
    }

    #moreInformation .col-md-12 {
        margin-bottom: 30px;
    }
}

@media (max-width: 480px) {
    #mobile-plan-nav .price-wrapper span {
        position: relative;
        margin: 0;
        left: -2px;
    }

    #mobile-plan-nav .price-wrapper .plan-price-dollar {
        font-family: 'Simply Cricket Bold', Helvetica, Arial, sans-serif;
        font-size: 1.5em;
        top: -10px;
        left: 2px;
    }

    #mobile-plan-nav .plan-price {
        font-size: 2.285em;
        font-family: 'Simply Cricket Bold', Helvetica, Arial, sans-serif;
    }

    #mobile-plan-nav .bestValueModal {
        display: block;
        margin: 0 auto;
        text-align: center;
    }

    #mobile-plan-nav .bestValueModal img {
        height: 12px;
        width: 12px;
    }

    #mobile-plan-nav .smartPhone .bestValueModal {
        width: 80%;
    }

    /*
            #mobile-plan-nav .bestValueCell{
                margin-top: -26px;
            }
    */
    #mobile-plan-nav .bestValueCell h3 {
        font-size: 0.750em;
    }

    .asterisk {
        text-align: center;
    }

    .asterisk a {
        text-align: center;
    }

    #moreInformation {
        margin-bottom: 30px;
    }

    .unlimited2-offer img {
        padding-left: 0;
    }
}

@media (max-width: 362px) {
    #mobile-plan-nav .bestValueModal {
        font-size: 0.8em;
        min-height: 12px;
        max-height: 26px;
        background-size: 7px 7px;
    }

    #mobile-plan-nav .active .plan-info-box {
        padding-bottom: 19px;
    }
}

@media (max-width: 321px) {
    #mobile-plan-nav .smartPhone .bestValueModal {
        width: 80%;
    }

}

.hide-in-mobile {
    display: block;
}

.hide-in-mobile img {
    padding-bottom: 6px;
}

.show-in-mobile {
    display: none;
}

@media (max-width: 480px) {

    .group-legend>p,
    .group-legend {
        width: 100%;
    }

    .row.plans-list {
        margin-top: 0px;
    }
}

/***********************************
XS - SM - MD Styles
***********************************/
@media (max-width: 768px) {

    .autoCreditNote {
        padding-bottom: 5px;
    }

    #bestvalueheader,
    .bestValueCell .rightBlueBorder,
    .bestValueCell .leftBlueBorder,
    .bestValueCell .bottomBlueBorder,
    #gridThead {
        display: none;
    }

    .bestValueModal {
        background-size: 20px 20px;
    }

    .grid-cell.last {
        border-left: 2px solid #000000;
    }

    .black-bg .grid-cell.last {
        border-left: 2px solid #FFFFFF;
    }

    .left-top-border-radius,
    .left-bottom-border-radius,
    .right-bottom-border-radius {
        border-radius: 0;
    }

    .grid-cell {
        display: none;
    }

    .grid-title,
    .grid-cell.active {
        display: table-cell;
        width: 50%;
    }

    .grid-cell.active {
        border-right: 2px solid black;
    }

    .plan-price-time {
        font-size: 16px;
    }

    .grid-cell>ul li {
        font-size: 0.850em;
    }

    .grid-title .title-desc-para {
        display: none;
    }

    .disp-desc-para .grid-title .title-desc-para {
        display: block;
    }

    .data-time-estimates .grid-cell.grid-title {
        background-color: #60a630;
    }

    .data-time-estimates .grid-cell.grid-data-plan.active,
    .data-time-estimates .grid-cell.no-grid-data-plan.active {
        border-left: none;
    }

    .data-time-estimates .grid-cell.grid-data-plan.active .data-link,
    .data-time-estimates .grid-cell.no-grid-data-plan.active .data-link {
        display: block;
        left: -100%;
        width: 200%;
    }

    .data-time-estimates .grid-cell.no-grid-data-plan {
        background-color: #60a630;
        color: #fff;
        padding: 20px 10px;
    }

    #socialIconsWrapper {
        width: 155px;
    }

    .grid-title p {
        font-size: 0.75em;
    }

    .displayTextM {
        text-align: center;
        font-size: 1.6em;
        margin-top: 20px;
    }

    .br-on-mobile {
        display: inherit;
    }

    .displayText strong {
        font-size: 1.5em;
    }

    #mobile-plan-nav .starter-cell.active .plan-price,
    #mobile-plan-nav .starter-cell.active .plan-price-dollar {
        color: #000;
    }

    .pro-cell.grid-cell {
        padding: 20px 0;
    }

    .pro-cell .noteLink {
        left: 0;
    }

    .hide-in-mobile {
        display: none;
    }

    .show-in-mobile {
        display: block;
    }

    .plans {
        background-position-x: calc(100% - 20px);
        padding: 10px 45px 20px 0;
    }

    .plans.active {
        background-color: #F6F6F6;

    }

    .plans .name {
        width: 60px;
        height: 60px;
        padding: 12px 8px;
        line-height: 20px;
        margin: 10px 0;
        font-size: 22px;
        font-weight: bold;
        text-align: center;
        border-radius: 100%;
        vertical-align: middle;
        border: 2px solid #036b37;
        background-color: #FFFFFF;
    }

    .plans .name .show-in-mobile {
        color: #000000;
    }

    .plan-added {
        border: none;
        box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.2);
    }

    .plan-added .plans {
        border: 1px solid #bbbdc0;
    }

    .plan-added .plans .name {
        background-color: #036b37;
    }

    .plans .name .sub-text {
        display: block;
        font-size: 10px;
    }

    .plans .price-wrapper {
        margin: 13px -34px 5px 70px;
    }

    .plans .price-wrapper-special {
        margin: 13px 10px 5px 70px;
    }

    .plans .plan-price-subhead {
        display: block;
        line-height: 18px;
        padding-left: 70px;
        min-width: 256px;
    }

    .plans .plan-price-subhead.hide-in-mobile {
        display: none;
    }

    .plan-added .plans {
        background: url(/uiassets/down-arrow.png) no-repeat right 30px center #FFFFFF;
    }

    .plan-added .plans.active {
        background: url(/uiassets/up-arrow.png) no-repeat right 30px center #f6f6f6;
    }

    .plan-added .plans .price-wrapper,
    .plan-added .plans.active .price-wrapper {
        color: #036b37;
    }

    .plans>.group-save-icon {
        top: 0;
    }

    .plans.active .name {
        color: #000000;
    }

    a.plans {
        text-decoration: none;
    }

    .name h2 {
        margin-top: 12px;
    }

    .clear-padding {
        padding: 0 15px;
    }

    .plan-wrapper .plan-added-text {
        margin: -4px 0 0 0;
        position: absolute;
        text-align: center;
        width: 60px;
    }

    .plan-wrapper.plan-added .plan-added-text.show-in-mobile {
        display: block;
    }

    .plan-wrapper.plan-added .plan-added-text.hidden-xs {
        display: none;
    }

    .promoImage {
        padding: 9px 10px 64px 10px;
    }

    .promoHeader {
        font-size: 16px;
    }

    .promoSubHead {
        margin-top: -10px;
    }
    .promoContent {
        padding: 8px 10px 1px 0;
    }
}

/***********************************
XS - SM Styles
***********************************/
@media (max-width: 480px) {

    h1,
    h2 {
        font-size: 1.000em;
    }
    
    .group-legend {
        margin-top: 10px;
    }

    .grid-cell p.green {
        font-size: 0.9em;
    }

    #basicphone div.number {
        margin-top: 10px;
    }

    .usage .add-to-cart.shop.button {
        width: 100%;
    }

    .topspace {
        font-size: 24px;
    }

}

/***********************************
MEDIA QUERIES FOR IPHONE 5
***********************************/
@media (max-width: 359px) {
    .plans .name {
        margin: auto 28px;
        padding: 13px 10px;
    }

    .plan-wrapper .plan-added-text {
        margin: 6px 0 0 28px;
    }

    .plans .price-wrapper {
        margin: 9px -34px 5px 93px;
    }

    .plans .plan-price-subhead {
        min-width: 220px;
        padding-left: 95px;
    }

    .subhead-unlimited {
        min-width: 250px !important;
    }

    .clear-padding {
        padding: 0;
    }
}

/* Banner Styles */

#plans-page-banner .smallText {
    font-size: 11px;
    margin-top: 3%;
}

#plans-page-banner .heroText {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: unset;
}

#plans-page-banner .heroText .h1 {
    font-size: 36px;
}

#plans-page-banner .heroText .h2 {
    font-size: 24px;
}

#plans-page-banner .heroText .disclaimer {
    font-size: 11px;
}

#plans-page-banner .imageContainer {
    height: unset;
}

#plans-page-banner .imageContainer img {
    position: static;
    margin: 0 auto;
}


#plans-page-banner .hero-banner-content-wrap {
    display: -ms-flexbox;
    display: flex;
    height: auto;
    overflow: hidden;
    max-height: 300px;
}

.banner-body {
    max-height: 300px;
    padding: 2.75em 0;
}

.banner-body .disclaimer a {
    color: #000000;
}

@media (min-width: 769px) {
    #plans-page-banner .banner-body {
        height: 300px;
    }
}

@media (max-width: 768px) {
    #plans-page-banner .hero-banner-content-wrap {
        -ms-flex-direction: column;
        flex-direction: column;
        padding: 20px 1% 0;
    }

    #plans-page-banner .imageContainer {
        padding: 0;
        margin: 10px auto;
    }

    #plans-page-banner .imageContainer img {
        max-width: 300px;
    }

    #plans-page-banner .hero-text {
        margin: 5% auto 0;
        max-width: calc(100vw + 5%);
    }

    #plans-page-banner .hero-heading {
        font-size: 24px;
    }

    #plans-page-banner .hero-subheading {
        font-size: 18px;
    }
}

@media (max-width: 481px) {
    #plans-page-banner .heroText .h1 {
        font-size: 24px;
    }

    #plans-page-banner .heroText .h2 {
        font-family: 'Simply Cricket book', Helvetica, Arial, sans-serif;
        font-size: 18px;
        margin-top: 0;
        padding: 0 1em;
    }

    #plans-page-banner .imageContainer img.data-only-img {
        max-width: 225px;
    }

    #plans-page-banner .imageContainer img {
        max-width: 310px;
    }

    .banner-body {
        max-height: 425px;
        padding: .75em;
    }

}

/* Plans header desktop */

#plans-header h1 {
    text-align: center;
    font-size: 32px;
}

#plans-header h2 {
    text-align: center;
    font-family: 'Simply Cricket Book', Helvetica, Arial, sans-serif;
    font-size: 16px;
    margin: 0 0 20px;
}

#plans-header .steps {
    text-align: center;
    max-width: 650px;
    margin: auto;
    position: relative;
}

#plans-header .step-icon {
    background-color: #FFFFFF;
    border: 1px solid #036B37;
    border-radius: 100%;
    width: 42px;
    height: 42px;
    margin: 0 auto;
    padding: 8.5px;
    position: relative;
}

#plans-header .steps::before {
    content: '';
    display: block;
    position: absolute;
    text-align: center;
    width: 75%;
    left: 10%;
    top: 22px;
    border-top: 1px solid #006d3c;
}

#plans-header .step-title {
    font-size: 10px;
    height: 60px;
    color: #6E6F72;
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 50px;
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
}

#plans-header .steps div:first-child .step-icon::after {
    content: '';
    position: absolute;
    top: 30px;
    background: url(/uiassets/icon-success-dark-green-12.png) right no-repeat;
    width: 12px;
    height: 12px;
}

#plans-header .steps div:nth-child(2) .step-title {
    display: block;
    margin-top: 15px;
}

/* Rate plan cards desktop */

.plan-cards {
    display: flex;
    flex-wrap: wrap;
    max-width: calc(3*(350px));
    justify-content: left;
}

.plan-card {
    border: solid #E1DFE1 1px;
    border-radius: 5px;
    box-shadow: 0 8px 6px -5px #cdcdcd;
    padding: 10px;
    margin: 10px;
    width: 320px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.plan-card-header {
    position: relative;
}

.plan-card-header p {
    font-size: 18px;
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    color: #000000;
    font-weight: 600;
    margin-top: 5px;
}

.plan-card .value-callout {
    background-color: #036b37;
    min-width: 35%;
    height: 25px;
    left: 72%;
    bottom: 105%;
    position: absolute;
    padding: 3px 0;
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    text-align: center;
}

.plan-card-body {
    margin: 20px 0;
}

.data-bullets {
    margin-left: -27px;
}

.plan-card-description {
    font-size: 16px;
    font-weight: 400;
}

.plan-card-disclaimer {
    font-size: 8px;
    margin-bottom: 0;
    font-weight: 400;
}

.talk-and-data-content {
    width: 64%;
    display: flex;
    flex-direction: row;
}

.talk-image {
    align-self: flex-end;
}

.legal-modal-link {
    font-size: 8px;
}

.plan-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.plan-card-footer .plans-card-total {
    font-size: 20px;
    color: #60A630;
    font-family: 'Simply Cricket Bold', Helvetica, Arial, sans-serif;
    font-weight: 700;
}

.view-plans-toggle {
    text-align: center;
    font-size: 16px;
}

.switch-simply-data-plans {
    text-align: center;
    font-size: 16px;
    margin-bottom: 10px;
}
/* Talk and Data section */

.talk-and-data-card {
    border: solid #E5E5E5 1px;
    border-radius: 5px;
    margin: 20px 0;
    background-color: #F8F8F8;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.talk-and-data-header {
    font-size: 18px;
    font-weight: 600;
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
}

.talk-and-data-feature {
    font-size: 16px;
    font-weight: 600;
}

.talk-and-data-disclaimer {
    font-size: 8px;
    font-weight: 400;
    margin-top: 20px;
    margin-bottom: 0;
}

/* Plan column desktop */

.plans-wrapper {
    -webkit-overflow-scrolling: touch;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 953px;
    margin: 0 auto;
    justify-content: center;
}

.compare-plans-header {
    font-size: 26px;
    text-align: center;
    margin-bottom: 20px;
}

.compare-plans-chart {
    z-index: 0;
    min-width: 800px;
    display: flex;
}

.compare-plans-chart .plan-column {
    border: 1px solid #E1DFE1;
    width: 170px;
}

.compare-plans-chart .categories-wrapper {
    position: sticky;
    left: 0;
    background: #ffffff;
    z-index: 1;
}

.compare-plans-chart .features-wrapper .plan-column {
    border: 1px solid #E1DFE1;
    border-left: 0;
    overflow: hidden;
}

.compare-plans-chart .features-wrapper:nth-child(2) .plan-column {
    border-left: 1px solid #E1DFE1;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.compare-plans-chart .features-wrapper:last-child .plan-column {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.compare-plans-chart .plan-categories {
	border: none;
    margin-left: 10px;
    position: sticky;
    left: 0;
    background: #ffffff;
}

.compare-plans-chart .plan-column-header {
    height: 150px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding: 10px;
}

.compare-plans-chart .blank-cell {
	background: none;
    height: 151px;
}

.compare-plans-chart .plan-column-header .plan-total {
    font-size: 18px;
    font-weight: 600;
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
}

.compare-plans-chart .plan-column-header .plan-total .plan-total-price {  
    font-size: 24px;
    color: #60A630;
    font-family: 'Simply Cricket Bold', Helvetica, Arial, sans-serif;
    font-weight: 700;
}

.compare-plans-chart .plan-column .plan-column-cell {
	display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 90px;
    position: relative;
    border-top: 1px solid #E1DFE1;
}

.compare-plans-chart .plan-categories .plan-column-cell {
    border-right: 0.5px solid #E1DFE1;
}

.compare-plans-chart .plan-column .plan-column-cell:nth-child(2) {
	border-top: none;
}

.compare-plans-chart .add-to-cart-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
}

.compare-plans-chart .plan-categories img {
    margin-right: 10px;
    margin-top: 5px;
}

.compare-plans-chart .features-wrapper:last-child .plan-column .plan-column-cell {
    margin-right: 0;
}

.compare-plans-chart .plan-features .plan-column-cell:nth-child(even), .talk-and-data-content {
	background-color: #f6f6f6;
}

.compare-plans-chart .plan-column .plan-column-cell .plan-feature {
    padding: 10px;
}

.compare-plans-chart .plan-column:last-child .plan-column-cell .plan-feature {
    padding: 10px;
}

.compare-plans-chart .plan-name {
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
}

.compare-plans-chart .plan-categories .plan-category {
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
    padding: 0 10px;
    display: flex;
    align-items: baseline;
}

.compare-plans-chart .auto-pay {
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    font-weight: 600;
    padding-left: 10px;
    padding-right: 20px;
}

#plans {
    margin-top: 15px;
}

.multiline::before {
    content: '';
    position: absolute;
    width: 80px;
    border-top: solid 1px;
    left: 30%;
    color: #E1DFE1;
}

.multiline::before {
    bottom: 215px;
}

.multiline-pricing {
    margin-bottom: 20px;
}

.multiline p {
    text-align: center;
}

.multiline {
    list-style-type: none;
    text-align: center;
}

.plan-add-to-cart .plan-atc-button button {
    width: 120px;
    z-index: 0;
}

/* Plans CTA and Feature Cards */
#plans-cta {
    padding-top: 30px;
}

.btn-wrapper_cta {
    margin: auto;
}

.btn-wrapper_cta .callToActionLink {
    width: 236px;
    max-width: 236px;
    margin: 10px;
    font-size: 14px;
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    color: #1B75BB;
    background-color: #FFFFFF;
    border-color: #3170b7;
}

.btn-wrapper_cta .callToActionLink:hover {
    border: solid 1px #23527C;
    background-color: #ffffff;
    color: #23527C;
}

.btn-wrapper_cta .callToActionLink.primary {
    color: #fff;
    background-color: #3170b7;
    border-color: #3170b7;
}

.btn-wrapper_cta .callToActionLink.primary:hover {
    background-color: #12508d;
    border-color: #12508d;
}

.getStartedHeader {
    font-family: "Simply Cricket Bold", Helvetica, Arial, sans-serif;
    font-size: 18px;
}

.flex-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
}

.imageAlignment:nth-child(2) {
    margin-top: -8px;
    padding-top: 40px;
}

.featureCardHeader {
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    font-size: 18px;
}

.featureCardContent {
    padding-top: 53px;
    margin-left: 9px;
    font-family: "Simply Cricket Black", Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #6E6F72;
    max-width: 322px;
}

#feature-cards {
    margin-bottom: 50px;
}

.cardContent {
    padding-bottom: 20px;
    color: #000000;
}

.secondFeatureImg {
    padding-top: 53px;
    margin-left: -12px;
}

img.sliderButtonImg {
    position: absolute;
    z-index: 5;
    left: 72%;
    bottom: 50%;
}

/* Promo section styles */
.plans-promo .row {
    background: #60A630;
    text-align: center;
}

.plans-promo h2 {
    font-family: 'Simply Cricket Bold', Helvetica, Arial, sans-serif;
    color: #FFF;
    font-size: 36px;
    margin-top: 40px;
}

.plans-promo p {
    font-size: 18px;
    color: #000000;
}

.plans-promo .disclaimer {
    font-size: 10px;
}

.plans-promo a {
    color: #000;
}

/* Value proposition section styles */
.val-prop-insert {
    position: relative;
    margin: 0 -15px 60px;
    border-top: 1px solid #E1DFE1;
    border-bottom: 1px solid #E1DFE1;
    padding: 25px 0 20px;
}

.flex-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -ms-flex;
    -ms-flex-line-pack: stretch;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-item-align: center;
}

.val-prop-insert p {
    color: #404041;
    font-family: 'Simply Cricket Book', Helvetica, Arial, sans-serif;
    font-size: 12px;
    text-align: left;
}

.val-prop-offer p,
.val-prop-offer a {
    color: #fff;
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
}

.val-prop {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -ms-flex;
    margin-right: 15px;
}

.val-prop:last-child {
    margin-right: 0;
}

.val-prop p {
    color: #404041;
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    font-size: 12px;
    text-align: left;
    max-width: 90px;
}

.img-wrap {
    display: inline-block;
}

.img-wrap img {
    margin-top: 0;
    max-width: 36px;
}

.img-wrap .credit-check {
    margin-top: 3px;
    max-width: 40px;
}

.val-prop .img-wrap {
    margin: 0 12px 0 8px;
}

/* Storytelling section */

#storytelling-animation {
    text-align: center;
    padding: 20px 0 30px;
}

#storytelling-animation h2 {
    font-size: 18px;
    color: #6E6F72;
    margin-bottom: 5px;
}

#storytelling-animation .sub-header {
    margin-bottom: 20px;
    padding: 0 20px;
}

.callout p {
    font-size: 12px;
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    color: #6E6F72;
    margin-top: 15px;
}

.animated.callout:nth-child(2) {
    -webkit-animation-delay: 1s;
    animation-delay: .5s;
}

.animated.callout:nth-child(3) {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

/* Multiline section */

#multiline {
    text-align: center;
}

#multiline h2 {
    margin-top: 15px;
    font-size: 19px;
    font-family: 'Simply Cricket Bold', Helvetica, Arial, sans-serif;
    color: #60A630;
    font-weight: bold;
}

.multiline-btn {
    width: 60px;
    height: 30px;
    padding: 0;
    background-color: #fff;
    border-radius: 15px;
    color: #1B75BB;
    -webkit-box-shadow: 0 8px 6px -6px #cdcdcd;
    box-shadow: 0 8px 6px -6px #cdcdcd;
    margin-right: 10px;
    position: relative;
}

.multiline-btn.active:after {
    content: '';
    position: absolute;
    background: url(/uiassets/icon-success-green-16.png) no-repeat;
    background-position: center;
    width: 18px;
    height: 18px;
    left: 4px;
    top: 4.5px;
}

.multiline-btn:hover,
.multiline-btn:focus,
.multiline-btn:active {
    background-color: #fff;
    color: #125c99;
    border: 1px solid #bbbdc0;
}

.multiline-btn.active, .multiline-btn.active[disabled]:hover {
    border: 1px solid #1B75BB;
    background: #fff;
    color: #125c99;
}

.multiline-btn:last-child {
    margin-right: 0;
}

.multiline-selector {
    margin-bottom: 5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
span.per-line {
    font-size: 16px;
}

/*Tablet */
@media (max-width: 1052px) {
    .plan-cards {
        justify-content: center;
    }

   .talk-image{
        display: none;
    }
}
/* Mobile */
@media (max-width: 800px) {
    .plans-wrapper {
        justify-content: start;
    }
}

@media (max-width: 768px) {
    .secondFeatureImg {
        padding-top: 0;
        margin-left: 0;
    }

    .imageAlignment {
        text-align: center;
    }

    .imageAlignment:first-child {
        padding-top: 10px;
    }

    .imageAlignment:nth-child(2) {
        margin-top: 0;
    }

    .btn-wrapper_cta .callToActionLink {
        max-width: 100%;
        width: 100%;
        white-space: nowrap;
        margin: 10px 0;
    }

    .btn-wrapper_cta {
        margin-bottom: 20px;
    }

    .getStartedHeader {
        font-size: 18px;
        margin-bottom: 0;
    }

    .flex-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .featureCardContent {
        padding-top: 18px;
        padding-bottom: 26px;
        text-align: left;
    }

    .secondFeatureImg {
        padding-top: 0;
        margin-left: 0;
    }

    /* Plan columns mobile */

    .plans-promo .row {
        padding-bottom: 20px;
    }

    .talk-and-data-content {
        width: 48vw;
    }

    #dataOnlyPlans .switch-simply-data-plans{
        padding-top: 10px;
    }


}

@media (max-width: 480px) {

    /* PLANS HEADER MOBILE */

    #plans-header .row {
        margin-left: -15px;
        margin-right: -15px;
    }

    #plans-header .step {
        padding: 2px;
    }

    #plans-header .steps div:nth-child(2) .step-title {
        width: 85px;
        display: block;
        margin-top: 10px;
    }

    #plans-header h2 {
        margin: 0 0 30px;
        line-height: 23px;
    }

    #plans-header .step-title {
        height: 60px;
    }

    .plan-card {
        width: 100%;
    }

    .plan-card-header p {
        font-size: 14px;
    }

    .plan-card-description {
        font-size: 14px;
    }

    .view-plans-toggle {
        font-size: 14px;
    }

    .talk-and-data-content {
        width: 100%;
    }

    .talk-and-data-header {
        font-size: 14px;
    }
    
    .talk-and-data-feature {
        font-size: 14px;
    }

    .compare-plans-chart .plan-categories {
        width: 140px;
    }

    .compare-plans-chart .plan-column-header {
        height: 110px;
    }

    .compare-plans-chart .blank-cell {
        height: 111px;
    }

    .compare-plans-chart .plan-column-header .plan-total,
    .compare-plans-chart .plan-column-header .plan-name,
    .compare-plans-chart .plan-categories .plan-category {
        font-size: 14px;
    }
    
    .compare-plans-chart .plan-column-header .plan-total .plan-total-price {  
        font-size: 20px;
    }

    .compare-plans-header {
        font-size: 16px;
    }

    .plans-promo h2 {
        margin-top: 0;
    }

    .val-prop p {
        text-align: center;
        margin-top: 10px;
    }

    .val-prop-insert .val-prop {
        text-align: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        max-width: 70px;
        margin: 0 10px;
    }

    .val-prop .img-wrap {
        margin: 0;
        height: 35px;
    }

    .val-prop:last-child {
        margin-right: 10px;
    }

    .callout {
        margin-bottom: 20px;
    }

    #storytelling-animation {
        padding: 20px 0 10px;
    }
}

@media (max-width: 320px) {
    .multiline-btn {
        margin-right: unset;
    }

    .multiline-btn.active:after {
        left: 2px;
    }
}

/***********************************
General Styles
***********************************/

.red-text {
    color: #a23d6d;
}

.show {
    display: block !important;
}

.hidden {
    overflow: hidden !important;
}

.visible {
    overflow: visible !important;
}

.cursorPointer {
    cursor: pointer !important;
}

.cursorDefault {
    cursor: default !important;
}

.alignCenter {
    text-align: center;
}

.alignRight {
    text-align: right;
}

.floatRight {
    float: right;
}

.noMargin {
    margin: 0 !important;
}

.margin-bottom-15 {
    margin-bottom: 15px !important;
}

.relative_position {
    position: relative;
}

.error_container {
    margin-top: 25px;
    margin-bottom: -10px;
    /* <-- I only wanted fix this locally - not mess with global positioning*/
}

.flash.error {
    /*.shop #cartSummary #alert .flash {*/
    margin: 0 0 0 0 !important;
    /* <-- overwrites global. I wanted to keep global errors intact.*/
}

/***********************************
Global Shop Styles
***********************************/

.shop .subnavlinks .subnav.shop ul {
    width: 745px !important;
}

/*Shopping ZIPCode*/
.zipcode_switcher {
    background: #3170b7;
    width: 214px;
    padding: 7px 10px;
    position: absolute;
    margin-top: 22px;
}

.zipcode_switcher:after {
    display: block;
    content: " ";
    width: 35px;
    height: 32px;
    top: -2px;
    background-color: #FFF;
    position: absolute;
    right: -20px;
    transform: skewX(-45deg);
    -ms-transform: skewX(-45deg);
    -webkit-transform: skewX(-45deg);
}

.zipcode_switcher p {
    color: #fff;
    font-size: 14px !important;
    font-family: "Simply Cricket Book", Helvetica, Arial, sans-serif;
    line-height: 1;
    margin: 0 0 7px 0;
    padding: 0;
    text-align: center;
}

.zipcode_switcher p a {
    color: #fff;
    font-family: "Simply Cricket Bold", Helvetica, Arial, sans-serif;
    font-weight: bold;
}

/***********************************
Global Modal Styles
***********************************/

.sideButtons .primary {
    margin-left: 10px;
}

.modal-buttons a {
    float: none !Important;
}

.modal-buttons .primary {
    margin: 0 0 0 5px !important;
}

.modal-buttons .secondary {
    margin: 0 !important;
}

/***********************************
Color Styles
***********************************/

.color-details ul.color-option {
    margin: 0 0 5px !important;
}

.color-option li {
    display: block !important;
    float: left;
    margin-bottom: 5px;
}

li.color-option.selected, li.color-option:hover, li.color-option:focus, .stockTextHolder:hover, .stockTextHolder:focus {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

li.color-option {
    padding: 0 !important;
    border: 0 !important;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    margin-right: 5px !important;
    background: none !important;
    -moz-border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    border-radius: 0 !important;
}

li.color-option span {
    display: block;
    width: 17px;
    height: 17px;
    margin: 1px !important;
    -webkit-border-radius: .3em;
    border-radius: 0.3em;
}

li.color-option:hover {
    -moz-box-shadow: 0 0 0 1px rgba(99, 177, 188, 1) !important;
    -webkit-box-shadow: 0 0 0 1px rgba(99, 177, 188, 1) !important;
    box-shadow: 0 0 0 1px rgba(99, 177, 188, 1) !important;
}

.responsive li.color-option:hover {
    -moz-box-shadow: 0 0 0 1px rgba(31, 159, 214, 1) !important;
    -webkit-box-shadow: 0 0 0 1px rgba(31, 159, 214, 1) !important;
    box-shadow: 0 0 0 1px rgba(31, 159, 214, 1) !important;
}

ul.color-option li.clear {
    display: block !Important;
    float: none !Important;
    border: 0 !important;
    height: 0 !important;
    padding: 0 !important;
}

li.color-option.selected {
    -moz-box-shadow: 0 0 0 1px rgba(166, 166, 166, 1) !important;
    -webkit-box-shadow: 0 0 0 1px rgba(166, 166, 166, 1) !important;
    box-shadow: 0 0 0 1px rgba(166, 166, 166, 1) !important;
}

.responsive li.color-option {
    border-radius: 5px !Important;
}

li.color-option.outOfStock span, li.color-option.outOfStock.selected span {
    -moz-box-shadow: inset 0 0 0 1px rgba(166, 166, 166, 1) !important;
    -webkit-box-shadow: inset 0 0 0 1px rgba(166, 166, 166, 1) !important;
    box-shadow: inset 0 0 0 1px rgba(166, 166, 166, 1) !important;
    width: 20px;
    height: 20px;
    margin-top: 0 !important;
}

.responsive li.color-option.outOfStock span, .responsive li.color-option.outOfStock.selected span {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.responsive li.color-option.outOfStock {
    margin-top: 1px;
}

.responsive li.color-option.outOfStock.selected {
    box-shadow: 0 0 0 1px rgba(166, 166, 166, 1) !important;
    margin-top: 0;
}

.responsive li.color-option.outOfStock.selected span {
    margin-top: 1px !important;
}

li.color-option.outOfStock span:after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    /*14px*/
    height: 18px;
    /*16px*/
    background: url('/uiassets/outOfStockLine.png') center no-repeat;
}

.responsive li.color-option.outOfStock span {
    background-image: url(/uiassets/color-option-out-stock.png) !important;
    background-position: center;
}

.responsive li.color-option.outOfStock span:after {
    display: none;
}

li.color-option.outOfStock:hover:after, li.color-option.outOfStock.selected:after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 19px;
    height: 19px;
}

li.color-option.outOfStock:hover {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

li.color-option.outOfStock.selected {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.stockTextHolder {
    padding: 0 !important;
    border: 0 !important;
    margin-top: 3px !important;
    margin-left: 5px !important;
    text-indent: 0 !Important;
    font-size: 12px !important;
}

.stockTextHolder:hover, .stockTextHolder:focus {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

/***********************************
Shopping Styles
***********************************/

/* Plan Styles
***********************************/

#adding_new_line h2, #upgrade_device h2 {
    color: #222;
    margin: 0;
    display: inline-block;
    font-weight: 400;
    margin-right: 15px;
}

#adding_new_line a {
    margin-left: 20px;
}

#upgrade_compatible p {
    margin: 15px 0;
}

.shop_cart #your_discount_price p {
    line-height: 19px;
    margin-bottom: 15px;
}

#your_discount_price .red-text {
    font-family: 'Simply Cricket Bold', Helvetica, Arial, sans-serif;
    font-weight: bold;
    color: #cf292a;
}

.discountLetter {
    text-transform: lowercase;
}

#discount_plan .product_listing_name {
    text-transform:none;
}


/***********************************
Read More Styles
***********************************/
#detailDescription {
    position: relative;
    padding-bottom: 15px;
}

#detailDescription.read-more {
    height: 130px;
    overflow: hidden;
}

#detailDescription.read-less {
    /*    height: auto;*/
    /*    overflow: visible !important;*/
}

#toggleRead {
    text-transform: uppercase;
    color: #3170B7;
    font-size: 12px;
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    width: 100%;
    border-bottom: 1px solid #dad8db;
    position: absolute;
    bottom: 0;
}

#toggleRead:hover #readText, #readText:focus {
    color: #23527C;
}

#readText:focus {
    outline: 0;
}

#readText {
    cursor: pointer;
    background: white;
    padding: 6px 18px 1px 7px;
}

#detailDescription .icon {
    cursor: pointer;
    width: 16px;
    height: 16px;
    display: inline-block;
}

#detailDescription.read-more #readText {
    background: white url('/uiassets/read-more-icon.png') right 9px no-repeat;
}

#detailDescription.read-less #readText {
    background: white url('/uiassets/read-less-icon.png') right 9px no-repeat;
}

#detailDescription.read-more #toggleRead:hover #readText, #detailDescription.read-more #readText:focus {
    background: white url('/uiassets/read-more-icon-hover.png') right 9px no-repeat;
}

#detailDescription.read-less #toggleRead:hover #readText, #detailDescription.read-less #readText:focus {
    background: white url('/uiassets/read-less-icon-hover.png') right 9px no-repeat;
}

#overviewContent {
    padding-bottom: 15px;
}

.caProp65 {
    margin-top: -4px;
    font-size: 9px;
}

.caProp65 p {
    font-size: 9px;
}

/***********************************
 Cart Styles
***********************************/

.sidebar {
    padding-left: 0;
    position: relative;
    width: 100%;
    float: left;
    padding-right: 0;
}

.sidebar .cart {
    background: none repeat scroll 0 0 #f4f4f4;
    border-radius: 1em;
    border: solid 1px #cdcdcd;
    font-size: 85%;
    margin-bottom: 1em;
    padding: 1em 2.2em;
    position: relative;
}

.sidebar .cartsummary {
    width: 100%;
}

.sidebar .cartsummary .flash.error {
    padding-top: 0;
}

.sidebar .cart h3 {
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    border-bottom: 1px solid black;
    color: black;
    font-size: 16px;
    padding-bottom: 10px;
}

.sidebar .cart h4 {
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    font-size: 14px;
    padding: 0;
    margin-bottom: 5px;
    clear: both;
}

.sidebar .cart h5 {
    color: #000000;
    font-family: 'Simply Cricket Book', Helvetica, Arial, sans-serif;
    font-size: 12px;
    margin: 0;
    clear: both;
}

.sidebar .cart .product_listing {
    position: relative;
    width: 94%;
}

.sidebar .cart .product_listing:last-child {
    clear: both;
}

.sidebar .cart .product_listing_name {
    float: left;
    width: 200px;
}

.sidebar .cart #imeiCartHeadline.product_listing .product_listing_name {
    width: 100px;
}

.sidebar .cart .product_listing_leader {
    text-align: right;
}

.sidebar .cart .product_listing_leader_dots {
    display: none;
}

.sidebar .cart .product_listing_price {
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    position: relative;
    top: -3px;
}

.sidebar .cart .device-color .product_listing_price {
    font-family: 'Simply Cricket Bold', Helvetica, Arial, sans-serif;
}

.sidebar .cart .total {
    border-top: 1px solid black;
    clear: both;
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    font-size: 16px;
    margin: 10px 0 0;
    padding: 10px 0 0;
    text-align: right;
}

.sidebar .cart .payment-total {
    clear: both;
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    font-size: 16px;
    margin: 10px 0 0;
    padding: 10px 0 0;
    text-align: right;
}

.sidebar .cart .total span,
.sidebar .cart .payment-total span {
    color: #60a630;
}

.product_listing .product_listing_heading a.remove, .product_listing .product_listing_heading a .cancel {
    background: url("/uiassets/icon-remove.png") 0 0 no-repeat;
    display: block;
    font-size: 0;
    height: 16px;
    position: absolute;
    right: -19px;
    top: -3px;
    width: 16px;
}

.main > div#container .sidebar .cart .product_listing .product_listing_heading a.cancel:hover, .main > div#container .sidebar .cart .product_listing .product_listing_heading .remove:hover {
    background: url("/uiassets/icon-remove.png") 0 -16px no-repeat;
}

.product_listing .product_listing_heading a.remove:hover, .product_listing .product_listing_heading a .cancel:hover {
    background: url("/uiassets/icon-remove.png") 0 -16px no-repeat;
}

.sidebar .cart #primary_id {
    float: none !important;
}

/* Cart Tweaks for Checkout
***********************************/

#reviewOrder .sidebar .cart .product_listing, #receipt .sidebar .cart .product_listing {
    width: 100%;
}

#reviewOrder .sidebar .cart .total, #receipt .sidebar .cart .total {
    margin: 10px 0 0 0;
    padding-right: 26px !important;
    position: relative;
}

#receipt .sidebar .cart .total {
    margin-bottom: 22px;
    position: relative;
}

#reviewOrder .sidebar .cart #modal-tax-tooltip {
    position: absolute;
    right: 0;
    top: 10px;
}

#reviewOrder .sidebar .cart #modal-tax-tooltip .tooltip-icon {
    color: #FFFFFF;
    height: 18px;
    width: 18px;
    line-height: 18px;
}

#receipt .sidebar .cart #modal-tax-tooltip .tooltip-icon {
    color: #FFFFFF;
    height: 18px;
    width: 18px;
    line-height: 18px;
}

#receipt .sidebar .cart #modal-tax-tooltip {
    position: absolute;
    right: 0;
    top: 10px;
}

#reviewOrder .sidebar .cart .completeOrder {
    margin: 18px 0;
}

#receipt .orderDetails {
    margin-bottom: 35px;
}

#receipt .regular {
    display: none;
}

#simswaptoactivityselectmodal .modal-buttons {
    height: 50px;
}

#simswaptoactivityselectmodal .modal-buttons .secondary {
    float: left !important;
}

#simswaptoactivityselectmodal .modal-buttons .primary {
    float: right !important;
}

/*overwrites for Compare iPhones*/

body.opt_out div.main {
    background: #fff;
    width: 820px;
    margin: 0 auto;
    padding-top: 20px;
}

body.opt_out header.main {
    width: 100%;
}

body.opt_out .main #container i {
    display: none;
}

/*Fix spacing with lists of accessories*/

.product_listing_heading {
    margin-bottom: 10px;
}

/*prevent parent div collapse*/

.product_listing_heading:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
}

/*close device color spacing*/

.device .product_listing .product_listing_heading {
    margin-bottom: 0;
}

.color-option {
    display: inline-block;
    padding-left: 0 !important;
    margin: 0 6px;
    position: relative;
}

.color-option.selected {
    -moz-box-shadow: 0 0 0 1px rgba(125, 125, 125, 1) !important;
    -webkit-box-shadow: 0 0 0 1px rgba(125, 125, 125, 1) !important;
    box-shadow: 0 0 0 1px rgba(125, 125, 125, 1) !important;
}

.color-option:hover, .color-option:focus {
    -moz-box-shadow: 0 0 0 1px rgba(31, 159, 214, 1) !important;
    -webkit-box-shadow: 0 0 0 1px rgba(31, 159, 214, 1) !important;
    box-shadow: 0 0 0 1px rgba(31, 159, 214, 1) !important;
}

.color-option span, .color-option.outOfStock span, .color-option.outOfStock.selected span {
    display: block;
    margin: 1px;
    width: 35px;
    height: 35px;
    border: 1px solid #cdcdcd;
}

.product-listing .device-color-details {
    margin-top: 13px;
    padding-right: 10px;
}

.product-listing .device-list-color-option {
    display: inline-block;
    bottom: 15px;
    width: 36px;
    height: 36px;
    border: 1px solid #6E6F72;
    border-radius: 20px;
}

.product-listing .device-list-color-option span {
    display: inline-block;
    margin: 2px;
    width: 30px;
    height: 30px;
    border-radius: 20px;
}

.product-listing .device-list-wrapper {
    display: block;
    transition: all 0.3s ease-in-out;
    box-shadow: 0px 0px 2px 0px grey;
    /* border: 1px solid #bbbdc0; */
    height: auto;
    margin-bottom: 30px;
}

.product-listing .device-list-wrapper:hover, .product-listing .device-list-wrapper:focus {
    box-shadow: 0px 2px 15px 3px grey;
}

.product-listing .device-list-wrapper:hover * {
    box-shadow: 0px 0px;
}

.color-options-wrapper {
    height: 30px;
    position: absolute;
    width: 100%;
    bottom: 15px;
    overflow: hidden;
}

.optmz-color-options-wrapper {
    height: 30px;
    position: absolute;
    width: 100%;
    bottom: 15px;
    overflow: visible;
}

.optmz-swatches a,
.optmz-swatches span {
    border-radius: 50%;
}

.compare-grid .color-options-wrapper {
    bottom: -35px;
}


#colorOptionWrapper > .swatches {
    opacity: 1;
    margin-top: 0px;
    display: block;
}

#colorOptionWrapper .view{
    padding-bottom: 10px;
    font-family: "Simply Cricket Demi";
    color: #6E6F72;
}

.accessory-added-text {
    font-size: 16px;
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    text-align: center;
}

.accessory-added-text span {
    color: #046A38;
}

h1.title {
    font-size: 32px;
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    margin-top: 15px;
}

.low-indicator-text {
    color: #CF292A;
    font-size: 15px;
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    margin-top: 15px;
}

/***********************************
Tabs Styles
***********************************/
#detailTabContent .tab-pane {
    padding: 25px;
}

.detail-tabs {
    border-bottom: 1px solid #bbbdc0;
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    font-size: 0;
    overflow: auto;
    padding: 0;
    position: relative;
    white-space: nowrap;
}

.detail-tabs li {
    display: inline-block;
    font-size: 16px;
    list-style: none;
}

.detail-tabs li a {
    align-items: center;
    display: flex;
    height: 62px;
    justify-content: center;
    text-decoration: none;
    width: 200px;
    -webkit-overflow-scrolling: touch;
}

.detail-tabs li.active a {
    color: black;
}

.detail-tabs hr {
    background: #3170b7;
    border: none;
    display: block;
    height: 0.4rem;
    margin: 0;
    transition: .3s ease-in-out;
    width: 200px;
}

#prodInfoDetails {
    display: none;
}

#featureContent.river #specContent {
    margin: -25px auto 0;
}

#reviewContent.river {
    margin-left: 50px;
}

/***********************************
Styles for zoom img on hover
***********************************/
.phoneImg {
    height: 400px;
    overflow: hidden;
}

.photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
    transition: transform .5s ease-out;
}

/**
Features Styles
***********************************/
.feature-box {
    border-bottom: 1px solid #bbbdc0;
    padding-bottom: 20px;
    margin: 0 25px;
}

.feature-box h3 {
    color: #60A630;
    font-family: 'Simply Cricket Book', Helvetica, Arial, sans-serif;
    font-size: 28px;
}

/**
Specs Styles
***********************************/
#specContent {
    margin-bottom: 50px;
    float: left;
}

#specContent h2 {
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    font-size: 16px;
    margin-top: 15px;
}

#specContent ul {
    padding-left: 18px;
}

#specContent li {
    font-size: 16px;
}

#specContent img {
    max-width: 100%;
}

#specContent .spec-details img {
    height: 280px;
}

/* Spec Details */
.spec-details {
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: auto auto auto;
    -ms-grid-columns: 100%;
    grid-template: [row1-start] "spec-dimensions" [row1-end] [row2-start] "spec-list-1" [row2-end] [row2-start] "spec-list-2" [row2-end]
    / 100%;
}

.spec-list-1 {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    grid-area: spec-list-1;
}

.spec-list-2 {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    grid-area: spec-list-2;
}

/* Spec Dimensions */
.spec-dimensions {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    clear: both;
    display: -ms-grid;
    display: grid;
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    grid-area: spec-dimensions;
    -ms-grid-rows: 34px 288px;
    -ms-grid-columns: 150px 54px 50px;
    grid-template: [row1-start] "width . depth" 34px [row1-end] [row2-start] "front_image height side_image" 288px [row2-end]
    / 150px 54px 50px;
    margin-top: 15px;
}

.spec-depth,
.spec-front-image,
.spec-height,
.spec-side-image,
.spec-width {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.spec-depth,
.spec-width {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.spec-depth:after,
.spec-width:after {
    border: 1px black solid;
    border-bottom: none;
    clear: both;
    content: '';
    display: block;
    height: 6px;
    margin: 4px auto;
}

.spec-depth {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
    grid-area: depth;
}

.spec-depth:after {
    width: 24px;
}

.spec-front-image {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    grid-area: front_image;
}

.spec-height {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: height;
}

.spec-height:before {
    border: 1px black solid;
    border-left: none;
    clear: both;
    content: '';
    display: inline-block;
    height: 280px;
    margin: auto 8px auto 4px;
    width: 6px;
}

.spec-side-image {
    -ms-grid-row: 2;
    -ms-grid-column: 3;
    grid-area: side_image;
    overflow: hidden;
}

.no-object-fit .spec-side-image img,
.spec-side-image .device-side-img {
    display: none;
}

.no-object-fit .spec-side-image .device-side-img {
    display: block;
}

.spec-side-image img {
    -o-object-fit: cover;
    object-fit: cover;
}

.spec-side-image .device-side-img {
    background-size: cover;
    background-position: center;
    height: 280px;
}

.spec-width {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-area: width;
}

.spec-width:after {
    width: 140px;
}

/** Carousel **/
#productSlider .carousel-control {
    opacity: 1;
}

#desktopHeader h1 {
    color: #6E6F72;
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 12px;
    width: 139px;
    text-align: left;
    margin-top: 35px;
}

#mobileDetailsHeader h1 {
    color: #000000;
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 20px;
    width: 100vw;
    text-align: left;
}

#mobileDetailsHeader p {
    padding-top: 37px;
    font-family: 'Simply Cricket Bold', Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: rgb(110, 111, 114);
}

#desktopHeader .title, #mobileDetailsHeader.title {
    color: #000000;
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 19.1px;
    width: 300px;
    text-align: left;
    padding-bottom: 10px;
}

#rating_summary {
    padding-top: 20px;
    padding-left: 67px;
    height: 100px;
}

#ratings-summary {
    background: none;
}

.colorOptionWrapper > .swatches {
    opacity: 1;
    margin-top: -51px;
    display: block;
    margin-left: -6px;
}

.colorOptionWrapper .view {
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #6E6F72;
    padding-left: 13px;
}

.color-name {
    color: #000000;
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 17px;
}

@media ( min-width: 480px ) {
    h1.title {
        margin-top: 30px;
        margin: 30px 0 10px 0;
    }

    .rating {
        margin-left: 0;
    }

    #productSlider .carousel-inner {
        width: 263px;
    }

    #overviewContent {
        padding: 25px 75px 30px;
    }

    .low-indicator-text {
        margin-top: 15px;
    }

}

@media (min-width: 600px) {
    /* Spec Details */
    .spec-details {
        display: -ms-grid;
        display: grid;
        -ms-grid-rows: auto auto;
        -ms-grid-columns: 300px auto;
        grid-template: [row1-start] "spec-dimensions spec-list-1" [row1-end] [row2-start] "spec-dimensions spec-list-2" [row2-end]
    / 300px auto;
    }

}

@media (min-width: 850px) {
    /* Spec Details */
    .spec-details {
        display: -ms-grid;
        display: grid;
        -ms-grid-rows: auto;
        -ms-grid-columns: 1fr 1fr 1fr;
        grid-template: [row1-start] "spec-dimensions spec-list-1 spec-list-2" [row1-end]
    / 1fr 1fr 1fr;
    }
}

@media ( max-width: 480px ) {
    /**
    Slider Styles
    ***********************************/
    .low-indicator-text {
        margin: 5px auto 0;
        width: 220px;
    }

    .feature-box {
        padding-bottom: 10px;
        margin: 0;
    }

    #rating_summary{
        padding-left: 0;
    }
}

@media ( min-width: 769px ) {
    #overviewContent {
        padding: 25px 100px 30px;
    }
}
/***********************************
Three Column Component Styles
***********************************/

#deviceSlider {
    padding-top: 30px;
    padding-bottom: 43px;
}

#deviceSlider h1 {
    font-weight: 500;
    font-size: 36px;
}

#deviceSlider h1,
#deviceSlider h3,
#deviceSlider h4 {
    font-family: 'Simply Cricket Book', Helvetica, Arial, sans-serif;
}

#deviceSlider h1,
#deviceSlider h3 {
    text-align: center;
}

a.device-details-link {
    float: left;
}

/***********************************
List Item Styles
***********************************/

#injectThreeColSlider {
    height: 420px;
}

#injectThreeColSlider .colors {
    position: relative;
}

#injectThreeColSlider .carousel-control {
    top: 25%;
    bottom: 54%;
}

div#product-listings-container {
    margin-top: 30px;
    min-height: 380px;
    padding-top: 30px;
}

.product-listing {
    border-bottom: none;
    height:380px;
}

.product-listing>div.row:first-child {
    min-height: 240px;
}

.product-listing h2 {
    padding-bottom: 0;
    margin-bottom: 0;
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    font-size: 18px;
    margin-top: 0;
    line-height: 1.3;
    font-weight: normal;
}

.product-listing h2 a {
    color: #000000;
}

a.device-details-link {
    float: left;
}

.product-listing h2 span {
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    font-size: 1.0em;/*18px*/
    display: block;
}

.product-listing .actions {
    position: relative;
    padding: 0;
    margin-top: 7px;
    text-align: center;
}

.product-listing .actions button {
    width: 100%;
}

.product-listing .actions button.remove {
    background-color: #cf292a;
}

.product-listing .actions .compare-button {
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    color: #3170b7;
    padding: 10px 0;
}

.product-listing .actions .compare-button[disabled] {
    color: #FFFFFF;
}

.product-listing .actions .compare-button[disabled]:hover {
    color: #FFFFFF;
    border: 1px solid #CCCCCC;
    padding: 10px 0;
}

.product-listing .actions .compare-button.selected:hover {
    color: #FFFFFF;
    background-color: #60a630;
    border: 1px solid #60a630;
    padding: 10px 0;
}

.product-listing .actions .compare-button.selected {
    color: #FFFFFF;
    background-color: #60a630;
    border: 1px solid #60a630;
}

.product-listing .actions .compare-button:hover {
    color: #60a630;
    border: 2px solid #60a630;
    background-color: #FFFFFF;
    padding: 9px 0;
}

.pic-and-price-wrapper{
    height: 280px;
}

.view-details {
    font-size: 14px;
}

.content .filter_wrapper .single_element_form_row .dropdown_menu {
    display:none;
}


/***********************************
Pricing Styles
***********************************/

.price.was-price {
    line-height: 1.25;
    padding: 0;
    position: relative;
}

.price.green {
    color: #60a630;
}

.price.current-price {
    padding: 0;
}

.price.final-price {
    border-top: 2px solid #000000;
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    color: #60a630;
    font-size: 24px;
    margin-bottom: 15px;
}

table.phone-price {
    padding-top: 10px;
    display: block;
}

table.phone-price td {
    width: 50%;
    padding-bottom: 10px !important;
}

table.phone-price p {
    margin: 0 0 0 0;
}

table.phone-price .price p {
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 22px;
    margin: 0;
    display: inline;
    position: relative;
}

table.phone-price .price small {
    color: #000000;
    font-size: 14px;
}

table.phone-price .price p sup {
    font-size: 14px;
}

table.phone-price .price-label p {
    margin-left: 10px;
    line-height: 1.1;
}

table.phone-price .rebate-link a {
    display: block;
    font-size: 12px;
    margin-left: 10px;
    line-height: 1.1;
    margin-top: 5px;
    margin-bottom: 5px;
}

table.phone-price .price-label p {
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 12px;
}

table .portin-row {
    padding-top: 5px;
}
table .portin-teaser-image {
    float: left;
    margin-left: -34px;
}
table .portin-teaser-content {
    float: left;
    width: 80%;
    margin-left: 25px;
    font-size: 12px;
    padding-left: 10px;
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    line-height: 1.2;
}
table .portin-teaser-content strong {
    display: block;
    font-size: 18px;
    text-transform: uppercase;
}
table .portin-teaser-content strong sup {
    top: -0.2em;
}

/***********************************
Pricing Styles
***********************************/

.device-slider .phone-details .price p {
    color: #6F6F6F;
    font-family: 'Simply Cricket Bold', Helvetica, Arial, sans-serif;
    font-size: 30px;
    line-height: 1;
    margin-bottom: 0;
}

.device-slider .phone-details .price.current-price {
    border-top: 2px solid #DFDFDF;
    padding-top: 10px;
}

.device-slider .phone-details .price.was-price p {
    color: #046A38;
    font-size: 30px;
}

.device-slider .phone-details sup {
    font-size: 50%;
    top: -0.75em;
}

.device-slider .phone-details p a {
    color: #3170b7;
}

.device-slider .price-label {
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    font-size: 12px;
    margin-bottom: 10px;
}

.device-slider .portin-row {
    padding-top: 5px;
}

.device-slider .portin-teaser-image {
    float: left;
}

.device-slider .portin-teaser-content {
    float: left;
    width: 100%;
    padding-left: 0;
    margin-bottom: 10px;
    font-size: 14px;
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    line-height: 1;
}

.device-slider .portin-teaser-content strong {
    display: block;
    font-size: 18px;
}

.device-slider .portin-teaser-content strong.promo-text {
    display: inline;
    font-size: 16px;
}

.device-slider .portin-teaser-content strong sup {
    top: -0.2em;
}

.device-slider .portin-row .portin-teaser-content {
    padding-left: 30px;
    width: 95%;
    margin-left: 0;
}

.device-slider .portin-row img {
    margin-left: -30px;
    padding-right: 6px;
}

@media (max-width: 780px) {
    #deviceSlider h1 {
        font-weight: 500;
        font-size: 24px;
    }
    #deviceSlider h3 {
        font-size: 16px;
        line-height:22px;
    }
}

@media (max-width: 480px) {
    #deviceSlider table .portin-row {
        padding-top: 0;
    }
}

.plan-atc-react-button {
    background: #3170b7;
    color: #ffffff;
    text-transform: unset;
    font-size: 14px;
    font-family: 'Simply Cricket Demi', Helvetica, Arial, sans-serif;
    height: 48px;
    border-radius: 4px;
}

.plan-atc-react-button:hover {
    background: #12508d;
    border-color: #12508d;
}

/*# sourceMappingURL=plans.951cdad7bbf2f05da57d.css.map*/