/* Reset 
-------------------------------------------------------------------------------*/
html,
body,
body div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
}

article,
aside,
figure,
footer,
header,
hgroup,
nav,
section {
        display: block;
}

.responsive {
        max-width: 100%;
}

.ie7 img {
        -ms-interpolation-mode: bicubic;
}


/* COLORS
-------------------------------------------------------------------------------*/
/* 
 * red      = #ed6352   rgba(237, 99, 82, 0.8);
 * green    = #62bb59   rgba(98, 187, 89, 0.8);
 * blue     = #0085c3   rgba(0, 133, 195, 0.8);
 * lt blue  = #51c5e1
 * black    = #141618
 * lt gray  = #eaeaea
*/


/* Global
====================================================================== */
html {
        height: 100%;
        overflow-y: scroll;
        -webkit-text-size-adjust: 100%;
        font-size: 16px;
}

body {
        height: 100%;
        min-width: 320px;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-font-smoothing: antialiased;
        font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        font-family: 'Poppins', sans-serif;
        font-weight: 300;
        color: #141618;
        background: #fff;
}

.wrapper {
        min-height: 100%;
        position: relative;
        margin: 0 auto;
}

.ohnohoney {
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        height: 0;
        width: 0;
        z-index: -1;
}


/* Text
====================================================================== */
p,
ul,
blockquote,
pre,
td,
th,
label {
        margin: 0;
        font-size: 1rem;
        font-weight: 300;
        line-height: 1.4rem;
        margin-bottom: 1.3rem;
        letter-spacing: 0.04rem;
}

small {
        margin: 0;
        font-size: 0.7rem;
        color: #fff;
        line-height: 0.5rem;
        margin-bottom: 0.5rem;
        letter-spacing: 0.1rem;
}

a,
a:hover,
a:active,
a:visited {
        cursor: pointer;
        text-decoration: none;
        outline: none;
}

h1 {
        font-size: 1.8rem;
        font-weight: 500;
        line-height: 1.5;
}

#work-sample h1:after {
        display: none;
}

h2 {
        margin-bottom: 0.5rem;
        font-size: 1.5rem;
        font-weight: 400;
        line-height: 1.6rem;
}

h3 {
        margin-bottom: 0.5rem;
        font-size: 1.5rem;
        font-weight: 400;
        line-height: 1.5rem;
}

h4 {
        font-family: 'Playfair Display', serif;
        font-size: 3rem;
}

h4:after {
        content: '';
        display: block;
        width: 100px;
        margin: 1rem auto 1.5rem;
        border-bottom: 2px solid #0085c3;
}

h5 {
        font-size: 1.2rem;
        line-height: 1.2rem;
        font-weight: 400;
        margin: 0.8rem auto 0.2rem;
}

nav ul {
        list-style-type: none;
        margin: 0;
}

nav li {
        display: inline-block;
        margin-left: 0.5rem;
}

nav li a.btn-text-white {
        padding: 0.5rem;
        margin: 0;
}

.text-muted {
        color: #6a727c;
}

.column-2 {
        column-count: 2;
        column-gap: 4rem;
        column-rule: 1px solid #d4d4d4;
}

@media only screen and (max-width: 640px) {
        .column-2 {
                column-count: 1;
                column-gap: 0;
                column-rule: none;
        }

        nav {
                text-align: center;
        }

        nav li a.btn-text-white {
                padding: 0.2rem;
        }
}

/* Buttons and links 
====================================================================== */
.btn-primary {
        display: block;
        min-width: 160px;
        max-width: 600px;
        margin: 0.5rem auto;
        padding: 0.75rem 1.3rem;
        color: #ffffff;
        font-family: 'Poppins', sans-serif;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.3;
        text-align: center;
        text-transform: uppercase;
        border-radius: 20rem;
        background: #0085c3;
        border: 2px solid #0085c3;
        cursor: pointer;

        -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.175), 0 2px 2px rgba(0, 0, 0, 0.3);
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.175), 0 2px 2px rgba(0, 0, 0, 0.3);

        -webkit-transition: all 0.2s ease-in-out 0s;
        transition: all 0.2s ease-in-out 0s;
}

.btn-primary:hover {
        background: #006999;
        border-color: #006999
}

.btn-outline-primary,
.btn-outline-white,
.btn-text-primary,
.btn-text-white,
.btn-icon-white {
        display: block;
        min-width: 160px;
        max-width: 600px;
        margin: 0.5rem auto;
        padding: 0.75rem 1.3rem;
        color: #0085c3;
        font-family: 'Poppins', sans-serif;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.3;
        text-align: center;
        text-transform: uppercase;
        border-radius: 20rem;
        background: transparent;
        border: 2px solid #0085c3;
        cursor: pointer;

        -webkit-transition: all 0.2s ease-in-out 0s;
        transition: all 0.2s ease-in-out 0s;
}

.btn-outline-primary:hover {
        background: #006999;
        color: #fff;
        border-color: #006999;
}

.btn-outline-white {
        border-color: #fff;
        color: #fff;
        background: rgba(0, 133, 195, 0.3);
}

.btn-outline-white:hover {
        background: #fff;
        color: #0085c3;
        border-color: #fff;
}

.btn-text-primary {
        border: none;
        min-width: 100px;
}

.btn-text-primary {
        border: none;
        min-width: 100px;
}

.btn-text-primary:hover {
        background: rgba(0, 133, 195, 0.3);
}

.btn-text-white {
        color: #fff;
        border: none;
        min-width: 100px;
}

.btn-text-white:hover {
        background: rgba(255, 255, 255, 0.3);
}

.btn-icon-white {
        min-width: 0;
        width: 1rem;
        height: 1rem;
        margin: 0;
        padding: 1rem;
        color: #fff;
        line-height: 1rem;
        border: none;
}

.btn-icon-white:hover {
        background: rgba(255, 255, 255, 0.3);
}


/* Clear Fix 
====================================================================== */
.clearfix:before,
.clearfix:after {
        content: "";
        display: table;
        height: 0;
        overflow: hidden;
}

.clearfix:after {
        clear: both;
}

.clearfix {
        zoom: 1;
}


/* About Me 
====================================================================== */
.about-me,
.sub-header {
        text-align: center;
        color: #ffffff;
        background: rgb(222, 234, 175);
        background: -moz-linear-gradient(45deg, rgba(222, 234, 175, 1) 0%, rgba(109, 198, 174, 1) 13%, rgba(8, 134, 196, 1) 50%, rgba(9, 115, 167, 1) 100%);
        background: -webkit-linear-gradient(45deg, rgba(222, 234, 175, 1) 0%, rgba(109, 198, 174, 1) 13%, rgba(8, 134, 196, 1) 50%, rgba(9, 115, 167, 1) 100%);
        background: linear-gradient(45deg, rgba(222, 234, 175, 1) 0%, rgba(109, 198, 174, 1) 13%, rgba(8, 134, 196, 1) 50%, rgba(9, 115, 167, 1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#deeaaf", endColorstr="#0973a7", GradientType=1);
}

.about-me header {
        text-align: right;
        padding: 1rem;
}

.bio {
        padding: 2rem 4rem 4rem;
}

.image-gallery {
        display: flex;
}

.summary {
        max-width: 900px;
        margin: 0 auto 1.5rem
}

header nav a {
        color: #ffffff;
}

.tagline {
        font-style: italic;
}

span.tagline:after {
        content: '';
        display: block;
        width: 100px;
        margin: 1.5rem auto;
        border-bottom: 2px solid #fff;
}

/* ================ Logo flipper ================ */
/* entire container, keeps perspective */
.flip-container {
        perspective: 1000px;
        width: 100%;
        margin: 0 auto 1.5rem;
}

/* flip the pane when hovered */
.flip-container:hover .flipper,
.flip-container.hover .flipper {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
}

.flip-container,
.front,
.back {
        width: 200px;
        height: 200px;
}

/* flip speed goes here */
.flipper {
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        position: relative;
        transition: 0.6s;
}

/* hide back of pane during swap */
.front,
.back {
        -moz-backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
}

.front {
        z-index: 2;
        -moz-transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
}

.back {
        -moz-transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
}

.about-me i {
        margin: 0 10px
}

.about-me .btn-outline-white span:after {
        content: 'Who am I anyway?';
        display: inline-block;
        min-width: 170px;
        font-family: 'Poppins', sans-serif;
        font-weight: 400;
}

.about-me .btn-outline-white:hover span:after {
        content: 'Am I my resume?';
}

@media only screen and (max-width: 640px) {
        .flip-container {
                margin: 10px auto;
        }

        .about-me i {
                margin: 0;
        }
}



/* Skills 
====================================================================== */
.skills {
        display: table;
        /* IE < 10, Opera *Presto* Desktop (Now dead) */
        display: -webkit-box;
        /* Safari 3.1 - 6, Chrome < 21 (2009 Spec), UCBrowser Android */
        display: -moz-box;
        /* Firefox 2 - 27 (2009 Spec), UCMini Android */
        display: -ms-flexbox;
        /* IE10 (2012 Syntax) */
        display: -webkit-flex;
        /* Safari 6.1 - 8, Android < 4.4, BB < 10, Chrome 21 - 28 */
        display: flex;
        /* Edge 12+, Firefox 28+, Blink, Safari 9+, Opera Mini 8+ */
        display: -webkit-flex;
        /* Safari */
        align-content: center;
        justify-content: center;
        padding: 4rem;
}

.certifications {
        margin-right: 3rem;
}

.areas-of-expertise {
        display: table;
        /* IE < 10, Opera *Presto* Desktop (Now dead) */
        display: -webkit-box;
        /* Safari 3.1 - 6, Chrome < 21 (2009 Spec), UCBrowser Android */
        display: -moz-box;
        /* Firefox 2 - 27 (2009 Spec), UCMini Android */
        display: -ms-flexbox;
        /* IE10 (2012 Syntax) */
        display: -webkit-flex;
        /* Safari 6.1 - 8, Android < 4.4, BB < 10, Chrome 21 - 28 */
        display: flex;
        /* Edge 12+, Firefox 28+, Blink, Safari 9+, Opera Mini 8+ */
        display: -webkit-flex;
        /* Safari */
        flex-direction: column;
}

.expert-area {
        display: table;
        /* IE < 10, Opera *Presto* Desktop (Now dead) */
        display: -webkit-box;
        /* Safari 3.1 - 6, Chrome < 21 (2009 Spec), UCBrowser Android */
        display: -moz-box;
        /* Firefox 2 - 27 (2009 Spec), UCMini Android */
        display: -ms-flexbox;
        /* IE10 (2012 Syntax) */
        display: -webkit-flex;
        /* Safari 6.1 - 8, Android < 4.4, BB < 10, Chrome 21 - 28 */
        display: flex;
        /* Edge 12+, Firefox 28+, Blink, Safari 9+, Opera Mini 8+ */
        display: -webkit-flex;
        /* Safari */
        margin-bottom: 2rem;
}

.expert-area:last-child {
        margin-bottom: 0;
}

.icon {
        font-size: 1rem;
        line-height: 1rem;
        margin-right: 1rem;
}

.icon-in-circle {
        display: block;
        flex: 0 0 2.5rem;
        background: #eaeaea;
        width: 2.5rem;
        height: 2.5rem;
        color: #0085c3;
        line-height: 2.5;
        text-align: center;
        border-radius: 50%;
}

.icon-in-circle i {
        line-height: 2.5rem;
}

.expert-area-description p {
        margin: 0;
}

@media only screen and (max-width: 900px) {
        .skills {
                display: block;
        }

        .certifications {
                width: 100%;
        }

        .certifications iframe {
                width: 100% !important;
                margin-bottom: 2rem;
        }

        .areas-of-expertise {
                display: block;
        }
}


/* Portfolio 
====================================================================== */
.portfolio {
        display: table;
        /* IE < 10, Opera *Presto* Desktop (Now dead) */
        display: -webkit-box;
        /* Safari 3.1 - 6, Chrome < 21 (2009 Spec), UCBrowser Android */
        display: -moz-box;
        /* Firefox 2 - 27 (2009 Spec), UCMini Android */
        display: -ms-flexbox;
        /* IE10 (2012 Syntax) */
        display: -webkit-flex;
        /* Safari 6.1 - 8, Android < 4.4, BB < 10, Chrome 21 - 28 */
        display: flex;
        /* Edge 12+, Firefox 28+, Blink, Safari 9+, Opera Mini 8+ */
        display: -webkit-flex;
        /* Safari */
        -webkit-flex-wrap: wrap;
        /* Safari 6.1+ */
        flex-wrap: wrap;
        justify-content: space-evenly;
        padding: 2rem;
        background: #efefef;
}

@media only screen and (max-width: 640px) {
        .portfolio {
                padding: 0.5rem 0.25rem;
        }
}


/* Cards 
====================================================================== */
.c-card--link,
.c-card--link:hover,
.c-card--link:active {
        display: block;
        position: relative;
        z-index: 1;
        width: calc(33% - 4rem);
        max-width: 640px;
        margin: 2rem;
        color: inherit;
}

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

        .c-card--link,
        .c-card--link:hover,
        .c-card--link:active {
                width: calc(25% - 4rem);
        }
}

@media only screen and (max-width: 1200px) {

        .c-card--link,
        .c-card--link:hover,
        .c-card--link:active {
                width: calc(50% - 4rem);
        }
}

@media only screen and (max-width: 992px) {

        .c-card--link,
        .c-card--link:hover,
        .c-card--link:active {
                width: 100%;
                margin: 1rem;
        }
}

.c-card {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-radius: 4px;
        background-color: #fff;

        -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.175), 0 2px 2px rgba(0, 0, 0, 0.3);
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.175), 0 2px 2px rgba(0, 0, 0, 0.3);

        -webkit-transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
        transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

.c-card--link:hover .c-card {
        z-index: 100;

        -webkit-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);

        -webkit-transition: box-shadow 0.25s ease-in-out 0s;
        transition: box-shadow 0.25s ease-in-out 0s;
}

.c-card__header {
        padding: 1rem;
}

.c-card__title {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 500;
        letter-spacing: .0125em;
}

.c-card__subtitle {
        margin: 0;
        font-size: .875rem;
        line-height: 1.375rem;
        font-weight: 500;
        letter-spacing: .0071428571em;
}

.c-card__primary-action {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        position: relative;
        outline: none;
        color: inherit;
        text-decoration: none;
        cursor: pointer;
        overflow: hidden;
}

.c-card__media {
        position: relative;

        -webkit-box-sizing: border-box;
        box-sizing: border-box;

        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
}

.c-card__media:before {
        display: block;
        content: "";
        margin-top: 56.25%;
}

.c-card__media:first-child {
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;
}

.c-card__media:last-child {
        border-bottom-left-radius: inherit;
        border-bottom-right-radius: inherit;
}

.c-card__description {
        height: inherit;
        padding: 1rem 1rem 8px;
        font-size: 1rem;
        letter-spacing: .01rem;
        line-height: 1.4;
        text-decoration: inherit;
        text-transform: inherit;
}

.c-card__actions {
        padding: 0.5rem 1rem 1rem;
}

.c-card__action-button {
        display: -ms-inline-flexbox;
        display: inline-flex;
        position: relative;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 0;

        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        font-size: 0.9rem;
        line-height: 1.3rem;
        font-weight: 700;
        letter-spacing: 0.04rem;
        text-decoration: none;
        text-transform: uppercase;
        text-align: center;
        color: #0085c3;

        background: none;

        border: none;
        border-radius: 4px;
        outline: none;
        /* @alternate */
        line-height: inherit;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-appearance: none;
        overflow: visible;
        vertical-align: middle;
        cursor: pointer;

        -webkit-transition: all 0.2s ease-in-out 0s;
        transition: all 0.2s ease-in-out 0s;
}


.c-card__action-button:hover {
        color: #006999;
}

.demo-community {
        background-image: url('../images/thumbnails/Community.png');
}

.demo-product-dashboard {
        background-image: url('../images/thumbnails/ProductHome.png');
}

.demo-product-transaction {
        background-image: url('../images/thumbnails/ProductTransaction.png');
}

.demo-mascots {
        background-image: url('../images/thumbnails/ezExplorers.png');
}

.demo-product-sidebar {
        background-image: url('../images/thumbnails/SidebarEditor.png');
}

.demo-product-complete-screen {
        background-image: url('../images/thumbnails/formComplete.png');
}

.demo-prospectus {
        background-image: url('../images/thumbnails/SponsorProspectus.png');
}

.demo-infographic {
        background-image: url('../images/thumbnails/PaymentInfo.png');
}

.demo-client-spotlight {
        background-image: url('../images/thumbnails/NLOL.png');
}

.demo-emails {
        background-image: url('../images/thumbnails/DigestEmails.png');
}

.demo-data-transfer {
        background-image: url('../images/thumbnails/DataTransfer.png');
}

.demo-crowdfunding {
        background-image: url('../images/thumbnails/Crowdfunding.png');
}

.demo-illustration {
        background-image: url('../images/thumbnails/illustrations.png');
}



/* My Likes 
====================================================================== */
.my-likes {
        position: relative;
        z-index: 10;
        line-height: 0;
        padding: 20px 0;
        text-align: center;
        background: #141618;
}

.my-likes img {
        margin: 0 5%;
}


/* Contact
====================================================================== */
.contact-me {
        margin: 0 auto;
        padding: 3rem 3rem 6rem;
        background: #efefef;
        text-align: center;
}

.contact-me form {
        max-width: 1024px;
        margin: 0 auto;
}

.contact-me form input,
.contact-me form textarea {
        min-width: calc(50% - 45px);
        margin: 5px;
        padding: 0.8rem;
        font-family: 'Poppins', sans-serif;
        font-size: 1rem;
        border: 2px solid #eaeaea;
        border-radius: 5px;
        box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.025);
}

.contact-me form textarea {
        min-width: calc(100% - 50px);
}

::placeholder {
        color: #141618;
        opacity: .5;
        font-style: oblique;
}

::-webkit-input-placeholder {
        color: #141618;
        opacity: .5;
        font-style: oblique;
}

::-moz-placeholder {
        color: #141618;
        opacity: .5;
        font-style: oblique;
}

:-ms-input-placeholder {
        color: #141618;
        opacity: .5;
        font-style: oblique;
}

:-moz-placeholder {
        color: #141618;
        opacity: .5;
        font-style: oblique;
}


/* General sample page layout 
====================================================================== */
.sample-layout {
        margin: 0 auto;
        padding: 2rem;
}

.l-flex {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
}

.l-flex--sm,
.l-flex--md,
.l-flex--lg {
        margin: 2rem;
}

.l-flex--sm {
        flex: 1 1 calc(20% - 1rem);
        width: 20%;
}

.l-flex--md {
        flex: 1 1 calc(40% - 1rem);
        width: 40%;
}

.l-flex--lg {
        flex: 1 1 calc(100% - 1rem);
        width: 100%;
}

.align-left {
        margin-left: 0;
}

.align-center {
        margin: 1rem auto 0;
        width: 100%;
}

.padding-md {
        padding: 1rem;
}

.max-height-md {
        max-height: 700px;
        overflow: hidden;
}

.background-light {
        background: #eaeaea;
}

.border-round--top {
        border-radius: 4px 4px 0 0;
}

.border-round--bottom {
        border-radius: 0 0 4px 4px 0 0;
}

@media only screen and (max-width: 992px) {
        .l-flex {
                display: block;
        }

        .l-flex--sm,
        .l-flex--md,
        .l-flex--lg {
                width: 100%;
                margin: 4rem auto;
        }

        .align-left {
                margin-left: auto;
        }
}


/* Sample Header 
====================================================================== */
.sample-header {
        position: fixed;
        z-index: 99999;
        display: flex;
        justify-content: center;
        align-items: center;
        width: calc(100% - 4rem);
        height: 40px;
        line-height: 40px;
        padding: 1rem 2rem;
        text-align: center;
        background: rgba(0, 0, 0, 0.5);
}

.sample-header .btn-icon-white {
        position: absolute;
        left: 1rem;
}

.sample-header .logo * {
        display: inline-block;
        vertical-align: middle;
        margin-right: 0.2rem;
        color: #fff;
}

.sample-header h1 {
        margin: 0;
        font-size: 1.3rem;
        font-weight: 400;
}

@media only screen and (max-width: 640px) {
        .sample-header {
                bottom: 0;
                background: rgba(0, 0, 0, 0.75);
        }
}

/* Sample Overview 
====================================================================== */
.sample-overview {
        overflow-x: hidden;
        padding: 0 2rem 0;
        padding-top: calc(40px + 2rem);

        background: rgb(222, 234, 175);
        background: -moz-linear-gradient(45deg, rgba(222, 234, 175, 1) 0%, rgba(109, 198, 174, 1) 13%, rgba(8, 134, 196, 1) 50%, rgba(9, 115, 167, 1) 100%);
        background: -webkit-linear-gradient(45deg, rgba(222, 234, 175, 1) 0%, rgba(109, 198, 174, 1) 13%, rgba(8, 134, 196, 1) 50%, rgba(9, 115, 167, 1) 100%);
        background: linear-gradient(45deg, rgba(222, 234, 175, 1) 0%, rgba(109, 198, 174, 1) 13%, rgba(8, 134, 196, 1) 50%, rgba(9, 115, 167, 1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#deeaaf", endColorstr="#0973a7", GradientType=1);
}

.sample-overview .l-flex {
        align-items: center;
}

.sample-overview .hero-image {
        margin: 0 1rem 0 0;

        -webkit-transform: rotate(-15deg) scale(0.75) skew(30deg);
        -moz-transform: rotate(-15deg) scale(0.75) skew(30deg);
        -ms-transform: rotate(-15deg) scale(0.75) skew(30deg);
        -o-transform: rotate(-15deg) scale(0.75) skew(30deg);
        transform: rotate(-15deg) scale(0.75) skew(30deg);


        -webkit-box-shadow: -25px 50px 28px rgba(0, 0, 0, 0.25);
        box-shadow: -25px 50px 28px rgba(0, 0, 0, 0.25);
}

.sample-summary {
        position: relative;
        z-index: 2;
        margin: 0;
        color: #fff;
}

.sample-cta {
        display: flex;
        align-items: center;
}

.sample-cta > * {
        margin-right: 1rem;
        margin-left: 0;
}

.sample-cta > *:last-child {
        margin-right: 0;
}


@media only screen and (max-width: 768px) {
        .sample-overview .hero-image {
                width: 100%;
                margin: 0;
        }
}


@media only screen and (max-width: 640px) {
        .sample-overview {
                padding-top: 0;
        }

        .sample-overview .hero-image {
                margin: 0 0 1rem 0;
                -webkit-transform: none;
                -moz-transform: none;
                -ms-transform: none;
                -o-transform: none;
                transform: none;

                -webkit-box-shadow: none;
                box-shadow: none;
        }

        .sample-summary * {
                text-align: center;
        }

        .sample-cta {
                display: block;
        }
}


/* Sample footer
====================================================================== */
.sample-footer {
        flex-direction: row-reverse;
        justify-content: center;
        padding: 2rem 2rem 0;
        border-top: 1px solid #efefef;
}

.sample-footer > * {
        margin-left: 1rem;
        margin-right: 0;
}

.sample-footer > *:last-child {
        margin-left: 0;
}

@media only screen and (max-width: 640px) {
        .sample-footer > * {
                display: block;
                margin: 1rem auto;
        }
}


/* Sample art 
====================================================================== */
.sample-art {
        padding-bottom: 2rem;
}

.sample-image {
        border-radius: 4px;
        -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.175), 0 2px 2px rgba(0, 0, 0, 0.3);
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.175), 0 2px 2px rgba(0, 0, 0, 0.3);
}

.sample-image:first-of-type {
        margin-top: 1rem;
}

.silhouette-mobile {
        max-width: 360px;
        margin: 0 auto;
        border-radius: 20px;
        -webkit-box-shadow: 0 3px 40px rgba(0, 0, 0, 0.3);
        box-shadow: 0 3px 40px rgba(0, 0, 0, 0.3);
}

@media only screen and (max-width: 640px) {
        .silhouette-mobile {
                max-width: 100%;
                margin: 1rem auto;
        }
}

/* Subpage Video Container 
====================================================================== */
.video-container {
        position: relative;
        height: 0;
        margin: 0 auto 5px;
        padding-bottom: 56.25%;
        overflow: hidden;
}

.video-container iframe {
        margin: 0 auto;
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
}

/* Success Page 
====================================================================== */
.success-message {
        margin: 0 auto;
        padding: 2rem;
        text-align: center;
}

.success-header {
        position: relative;
        background: rgb(222, 234, 175);
        background: -moz-linear-gradient(45deg, rgba(222, 234, 175, 1) 0%, rgba(109, 198, 174, 1) 13%, rgba(8, 134, 196, 1) 50%, rgba(9, 115, 167, 1) 100%);
        background: -webkit-linear-gradient(45deg, rgba(222, 234, 175, 1) 0%, rgba(109, 198, 174, 1) 13%, rgba(8, 134, 196, 1) 50%, rgba(9, 115, 167, 1) 100%);
        background: linear-gradient(45deg, rgba(222, 234, 175, 1) 0%, rgba(109, 198, 174, 1) 13%, rgba(8, 134, 196, 1) 50%, rgba(9, 115, 167, 1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#deeaaf", endColorstr="#0973a7", GradientType=1);
}