/*
Theme Name: Thebe Child
Theme URI: http://3theme.com/tf005/
Description: Thebe - Portfolio WordPress Theme
Template: thebe
Version: 1.1.6
Author: foreverpinetree@gmail.com
Author URI: http://foreverpinetree.com/
Tags: custom-menu, featured-images, translation-ready
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain:  thebe
*/

.video-container .video-summary
{
    margin: 0 0 12px 0px;
}

.video-container .video-summary h3, .video-container .video-summary p
{
    padding-left: 50px;
}

.video-container .owl-controls .owl-pagination {
    display: none;
}

.video-container .owl-controls{
    margin-top: 10px;
    text-align: center;
}

/* Styling Next and Prev buttons */

.video-container .owl-controls .owl-buttons div{
    color: #FFF;
    display: inline-block;
    zoom: 1;
    *display: inline;/*IE7 life-saver */
    padding: 33px 10px 4px 10px;
    font-size: 12px;
    background: #000;
    filter: Alpha(Opacity=60);/*IE7 fix*/
    opacity: 0.6;
    filter: Alpha(Opacity=80);/*IE7 fix*/
    opacity: 0.8;

}
/* Clickable class fix problem with hover on touch devices */
/* Use it for non-touch hover action */
.video-container .owl-controls.clickable .owl-buttons div:hover{
    filter: Alpha(Opacity=100);/*IE7 fix*/
    opacity: 1;
    text-decoration: none;
}

/* Styling Pagination*/

.video-container .owl-controls .owl-page{
    display: inline-block;
    zoom: 1;
    *display: inline;/*IE7 life-saver */
}

.video-container .owl-controls .owl-page.active span,
.video-container .owl-controls.clickable .owl-page:hover span{
    filter: Alpha(Opacity=100);/*IE7 fix*/
    opacity: 1;
}


.video-container .owl-item > div.owl-prev, .video-container .owl-item > div.owl-next {
    text-align: center;
    padding:50px 0px;
    color: white;
    font-size:32px;
    border:1px white;
}

.video-container .wrapper-with-margin{
    margin:0px 50px;
}


.video-container .owl-controls .owl-buttons div {
    position: absolute;
}

.video-container .owl-controls .owl-buttons .owl-prev{
    left: 0px;
    background-image: url("//cdn2.hubspot.net/hubfs/467997/img/carousel/arrow-white-left.png?t=1536948317899");
}


.video-container .owl-controls .owl-buttons .owl-prev:hover{
    background-image: url("//cdn2.hubspot.net/hubfs/467997/img/carousel/arrow-pink-left.png?t=1536948317899");
}

.video-container .owl-controls .owl-buttons .owl-next{
    right: 0px;
    background-image: url("//cdn2.hubspot.net/hubfs/467997/img/carousel/arrow-white-right.png?t=1536948317899");
}

.video-container .owl-controls .owl-buttons .owl-next:hover{
    background-image: url("//cdn2.hubspot.net/hubfs/467997/img/carousel/arrow-pink-right.png?t=1536948317899");
}

.video-container .owl-controls .owl-buttons .owl-prev, .video-container .owl-controls .owl-buttons .owl-next {
    margin:0px;
    top: .6em;
    background-position: center center;
    background-repeat: no-repeat;
}

.video-container owl-wrapper-outer, .video-container .owl-controls, .video-container .owl-buttons {
    height: 100%;
}

.video-container .owl-controls .owl-buttons .owl-prev, .video-container .owl-controls .owl-buttons .owl-next {
    margin:4px;
    height: 99.5%;
    top: 0px;
}
.video-container owl-wrapper-outer, .video-container .owl-controls, .video-container .owl-buttons {
    position: absolute;
}

/* ==========================================================================
   Responsive Media Queries
   ========================================================================== */

@media only screen and (max-width: 480px) {
    .video-container .owl-controls .owl-buttons .owl-prev, .video-container .owl-controls .owl-buttons .owl-next {
        top: -44px;
    }
    .video-container .owl-controls .owl-buttons .owl-prev{
        left: -3px;
    }
    .video-container .owl-controls .owl-buttons .owl-next{
        right: -3px;
    }
    .video-container .owl-controls .owl-buttons .owl-prev, .video-container .owl-controls .owl-buttons .owl-next {
        height: 100%;
    }
	
	
	
	
}

@media only screen and (min-width: 481px) and (max-width: 1023px) {
	
    .video-container .owl-controls .owl-buttons .owl-prev, .video-container .owl-controls .owl-buttons .owl-next {
        top: -44px;
    }
    .video-container .owl-controls .owl-buttons .owl-prev{
        left: -3px;
    }
    .video-container .owl-controls .owl-buttons .owl-next{
        right: -3px;
    }
}

@media only screen and (min-width:1024px) and (max-width: 1279px) {
    .video-container .owl-controls .owl-buttons .owl-prev, .video-container .owl-controls .owl-buttons .owl-next {
        height: 99%;
    }
    .video-container .owl-controls .owl-buttons .owl-prev, .video-container .owl-controls .owl-buttons .owl-next {
        top: -43px;
    }
    .video-container .owl-controls .owl-buttons .owl-prev{
        left: -3px;
    }
    .video-container .owl-controls .owl-buttons .owl-next{
        right: -3px;
    }
}

@media (min-width: 1280px) {
    .video-container .owl-controls .owl-buttons .owl-prev, .video-container .owl-controls .owl-buttons .owl-next {
        top: -43px;
    }
    .video-container .owl-controls .owl-buttons .owl-prev{
        left: -3px;
    }
    .video-container .owl-controls .owl-buttons .owl-next{
        right: -2px;
    }
}

/* ==========================================================================


   2. PROCESS DIAGRAM


   ========================================================================== */


/* ==========================================================================
   Generic CSS
   ========================================================================== */

.process_diagram {
    display: block;

    /*     z-index: -4; */
    overflow: visible;
    /*     width: 100%; */
    color: #009ee3;
    margin-top: 0px !important;
    height: 430px;
    min-height: 430px;
}

.process_diagram img {
    width: auto\9;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
    border: 0;
    outline: none;
}

.process_diagram .proc_ico {
    float: left;
    position: relative;
    margin-top: 72px;
    z-index: 0;
}

@media (max-width:480px) {

    .process_diagram .proc_ico {
        width: 100%;
        float: left;
        margin-left: 1%;
    }

    .ico_head {
        padding-top: 16px;
    }
    .process_diagram{
        max-width: 92rem;
    }
}

@media (max-width:1023px) {

    .process_diagram .container {
        width: 100%;
        padding-left: 92px !important;
        padding-right: 32px !important;
    }
    .process_diagram{
        max-width: 90rem;
        /*margin: 0% 0% 0 0%;*/
        margin: 0 auto;
    }
}


@media (min-width: 1024px) and (max-width:1280px) {
    .process_diagram .container {
        width: 100%;
        padding-left: 4% !important;
        padding-right: 0px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .process_diagram{
        max-width: 90rem;
        /*margin: 0% 0% 0 0%;*/
        margin: 0 auto;
    }
}

@media (min-width:1281px) {
    .process_diagram .container {
        width: 1150px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .process_diagram{
        max-width: 84rem;
        /*margin: 0 15% 0 19%;*/
        margin-left: auto !important;
        margin-right: auto !important;
    }

}

.arrows {
    z-index: 0;
    top: 0px;
    position: relative;
    width: 97%;
    left: 0;
    background: url(https://marksmandev.com/marksman-videos/arrows-wide.png) 146px 188px no-repeat;
    height: 490px;
    padding-left: 30px;
}

.hotspot1, .hotspot2, .hotspot3, .hotspot4, .hotspot5, .hotspot6, .hotspot7
{
    position: absolute;
    top: 0px;
}

.hotspot1 {
    top: 0px;
    left: 0px;
    z-index: 20;
}

.hotspot2 {
    top: 143px;
    left: 160px;
    z-index: 10;
}

.hotspot3 {
    left: 320px;
    z-index: 20;
}

.hotspot4 {
    top: 143px;
    left: 480px;
    z-index: 10;
}

.hotspot5 {
    left: 640px;
    z-index: 20;
}

.hotspot6 {
    top: 143px;
    left: 800px;
    z-index: 10;
}

.hotspot7 {
    left: 960px;
    z-index: 20;
}

.hotspot1 .ico_head, .hotspot2 .ico_head, .hotspot3 .ico_head, .hotspot4 .ico_head, .hotspot5 .ico_head, .hotspot6 .ico_head, .hotspot7 .ico_head
{
    color: #fff;
    font-weight: 500;
    display: block !important;
    font-size: 18px;
    position: absolute;
    text-align: center;
    z-index: -1;
    width: 170px;
    margin-left: -10px;

}

.hotspot1 .ico_head, .hotspot3 .ico_head, .hotspot5 .ico_head, .hotspot7 .ico_head
{
    top: -60px;
}

.hotspot2 .ico_head, .hotspot4 .ico_head, .hotspot6 .ico_head
{
    top: 133px;
}



.hotspot1 .content, .hotspot2 .content, .hotspot3 .content, .hotspot4 .content, .hotspot5 .content, .hotspot6 .content, .hotspot7 .content {
    position: relative;
    overflow: hidden;
    width: 130px;
    height: 130px;
    text-align: center;
    padding: 0px 0 0 0px;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    -webkit-transition-delay: 200ms;
    -moz-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    transition-delay: 200ms;
    /* The hotspot1 point */
}

.hotspot1 .content .bubble-bg, .hotspot2 .content .bubble-bg, .hotspot3 .content .bubble-bg, .hotspot4 .content .bubble-bg, .hotspot5 .content .bubble-bg, .hotspot6 .content .bubble-bg, .hotspot7 .content .bubble-bg {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.hotspot1 .content h2, .hotspot2 .content h2, .hotspot3 .content h2, .hotspot4 .content h2, .hotspot5 .content h2, .hotspot6 .content h2, .hotspot7 .content h2 {
    font-size: 26px;
    padding-top: 0px;
    text-transform: uppercase;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    -webkit-transition-delay: 200ms;
    -moz-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    transition-delay: 200ms;
}

.content h2 img {
    margin: 0px 0 0;
}

.links {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 6px;
    margin-left: auto;
    margin-right: auto;
    -moz-opacity: 0;
    -khtml-opacity: 0;
    -webkit-opacity: 0;
    opacity: 0;
    filter: alpha(opacity = 0);
    *display: none;
    -webkit-transform: translate(0px, 50px);
    -moz-transform: translate(0px, 50px);
    -ms-transform: translate(0px, 50px);
    transform: translate(0px, 50px);
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    -webkit-transition-delay: 0ms;
    -moz-transition-delay: 0ms;
    -o-transition-delay: 0ms;
    transition-delay: 0ms;
    color: #fff;
    line-height: 20px;
    font-size: 13px;
}

.hotspot1:hover .content, .hotspot1.active .content, .hotspot2:hover .content, .hotspot2.active .content, .hotspot3:hover .content, .hotspot3.active .content, .hotspot4:hover .content, .hotspot4.active .content, .hotspot5:hover .content, .hotspot5.active .content, .hotspot6:hover .content, .hotspot6.active .content, .hotspot7:hover .content, .hotspot7.active .content {
    width: 280px;
    height: 268px;
    padding: 8px 0 0 0;
    -webkit-transition-delay: 0ms;
    -moz-transition-delay: 0ms;
    -o-transition-delay: 0ms;
    transition-delay: 0ms;
    /*margin: -50px 0 0px -60px;*/
    margin: -78px 0 0px -75px;
}

.hotspot1:hover .content .description,
.hotspot1.active .content .description,
.hotspot1:hover .content .links,
.hotspot1.active .content .links .hotspot2:hover .content .description,
.hotspot2.active .content .description,
.hotspot2:hover .content .links,
.hotspot2.active .content .links .hotspot3:hover .content .description,
.hotspot3.active .content .description,
.hotspot3:hover .content .links,
.hotspot3.active .content .links .hotspot4:hover .content .description,
.hotspot4.active .content .description,
.hotspot4:hover .content .links,
.hotspot4.active .content .links .hotspot5:hover .content .description,
.hotspot5.active .content .description,
.hotspot5:hover .content .links,
.hotspot5.active .content .links,
.hotspot6.active .content .description,
.hotspot6:hover .content .links,
.hotspot6.active .content .links,
.hotspot7.active .content .description,
.hotspot7:hover .content .links,
.hotspot7.active .content .links
{
    -moz-opacity: 1;
    -khtml-opacity: 1;
    -webkit-opacity: 1;
    opacity: 1;
    filter: alpha(opacity = 100);
    *display: block;
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    padding-top: 0px;
    margin-top: -20px;
    font-size: 14px !important;
}

/* ==========================================================================
   Responsive Media Queries
   ========================================================================== */

@media (max-width:480px) {
    .process_diagram {

        margin-left: -20px;
    }

    h3.collaborate, h3.planning
    {
        display: none;
    }
    .arrows
    {
        background: none;
    }
    .process_diagram {
        min-height: 1800px;
    }
    .hotspot1, .hotspot2, .hotspot3, .hotspot4, .hotspot5, .hotspot6, .hotspot7
    {
        left: 0%;
        position: absolute;
    }

    .hotspot1 {
        top: 0px;
    }

    .hotspot2 {
        top: 200px;
    }

    .hotspot3 {
        top: 400px;
    }

    .hotspot4 {
        top: 600px;
    }

    .hotspot5 {
        top: 800px;
    }

    .hotspot6 {
        top: 1000px;
    }

    .hotspot7 {
        top: 1200px;
    }

    .hotspot1 .ico_head, .hotspot2 .ico_head, .hotspot3 .ico_head, .hotspot4 .ico_head, .hotspot5 .ico_head, .hotspot6 .ico_head, .hotspot7 .ico_head
    {
        top: 120px;
    }
}

h3.collaborate, h3.planning
{
    font-weight: 600px;
    display: none;
}

h3.collaborate
{
    text-align: left;
    margin-left: -55px;
    margin-bottom: 50px;
}

h3.planning
{
    text-align: right;
    margin-top: 419px;
    margin-right: 235px;
}


@media (max-width:570px) {
    .process_diagram {
        min-height: 1600px;
    }
    .hotspot1, .hotspot2, .hotspot3, .hotspot4, .hotspot5, .hotspot6, .hotspot7
    {
        left: 20%;
        position: absolute;
    }
}

.owl-controls
{
    pointer-events: none;
}

.owl-prev, .owl-next
{
    pointer-events: all;
}

/* ==========================================================================


   3. HOME PAGE INSIGHTS


   ========================================================================== */


/* ==========================================================================
   Generic CSS
   ========================================================================== */

/* ==========================================================================
   Responsive Media Queries
   ========================================================================== */
@media only screen and (min-width: 481px) {
    #insights-small-panel-1
    {
        border-right-style: inset;
        border-right: 3px solid #fff;
        border-top-style: inset;
        border-top: 3px solid #fff;
    }

    #insights-small-panel-2
    {
        border-right-style: inset;
        border-right: 3px solid #fff;
        border-top-style: inset;
        border-top: 3px solid #fff;
    }

    #insights-small-panel-3
    {
        border-right-style: inset;
        border-right: 3px solid #fff;
        border-top-style: inset;
        border-top: 3px solid #fff;
    }

    .insights-medium-panel-1 > div {
        border-right-style: inset;
        border-right: 3px solid transparent;
        /*  border-bottom: 1em solid transparent;*/
    }

    .insights-medium-panel-2 > div
    {
        border-right-style: inset;
        border-right: 3px solid transparent;
        /*   border-bottom: 1em solid transparent;*/
    }

    .insights-medium-panel-1 .item-info
    {
        /*  bottom: -125px !important;*/
    }

    #hs_cos_wrapper_insights_medium_panel1
    {
        padding: 0;
        margin: 0;
    }


    .insights-medium-panel-2 .item-info
    {
        /*    bottom: -125px !important;*/
    }

    .btn--insight {
        padding: .5em .8em;
    }
}

/* ==========================================================================


   3. SITE FOOTER


   ========================================================================== */


/* ==========================================================================
   Generic CSS
   ========================================================================== */

/* ==========================================================================
   Responsive Media Queries
   ========================================================================== */

@media only screen and (max-width: 480px) {
    .site-footer
    {
        padding-top: 3em;
    }
}

div.footer-menu ul {
    padding: 0 0 0 0px !important;
}

.site-footer ul li {
    display: inline;
    padding: 0 5px !important;
}

.site-links ul li {
    border-left: 0 !important;
}

.site-footer ul li a {
    border-bottom: 0 !important;
}

.site-footer ul li a img {
    max-width: 32px !important;
}





/* ==========================================================================


   5. CTA BUTTON STYLING OVERRIDES - Hard-coded styles required prior to CSS Stylesheet Audit to prevent overriding site-wide CSS


   ========================================================================== */


/* ==========================================================================
   Generic CSS
   ========================================================================== */

/* ==========================================================================
   Responsive Media Queries
   ========================================================================== */


@media only screen and (max-width: 480px) {
    /* CTA - Home Page - See Our Services */
    #cta_button_467997_e84841a0-ab50-4b5e-aa01-979924dd385c
    {
        padding: 1em 0em;
    }

    /* CTA's - Get Started Now, Download guide and Contact us now */
    span#hs-cta-95c2cddb-36ad-476b-b725-8850dba1b023, span#hs-cta-97a6eb19-433f-466b-94ba-7ad7b0ec7e35, span#hs-cta-540c7bca-ca0c-44a9-bcde-2716393cdd80 {
        margin-left: -84px;
        padding: 4em;
    }

    .footer-nav .grid__item  lap--one-whole  desk--one-whole  text-center {
        padding: 0;
    }
    .footer-nav .grid__item.lap--one-whole.desk--one-whole.text-center ul {
        padding: 0px;
        margin-left: -4px;
    }
    .footer-nav .grid__item.lap--one-whole.desk--one-whole.text-center ul li {
        padding: 0px 1px;
    }
}


/* ==========================================================================


6. FOOTER MENU


========================================================================== */


/* ==========================================================================
   Generic CSS
   ========================================================================== */
.footer-menu > div {
    text-align: left;
}

#hs_cos_wrapper_landing_page_footer footer.wrapper .site-footer .wrapper__inner.social-icons {
    padding-top:4em;
    padding-bottom:3em;
}

.footer-menu > div > a, .footer-menu > div > a:visited, .footer-menu > div > a:hover  {
    color: #ffffff;
}


/* ==========================================================================


   7. LOGO PANEL


   ========================================================================== */


/* ==========================================================================
   Generic CSS
   ========================================================================== */

.logo-panel {
    overflow:hidden;
    text-align:center;
    padding-bottom: 2em !important;
    max-width: 92rem !important;
}
.logo-panel div {
    display:inline-block;
}

.no-padding {
    padding: 0;
}

#hs_cos_wrapper_services_strategy a, #hs_cos_wrapper_services_production a, #hs_cos_wrapper_services_marketing a {
    position: relative;
}

/* ==========================================================================
   Responsive Media Queries
   ========================================================================== */

/* ==========================================================================


   8. TEASER PANEL


   ========================================================================== */


/* ==========================================================================
   Generic CSS
   ========================================================================== */
.teaser-panel:after {
    content: '';
    display: block;
    clear: both;
}

.teaser-panel-item {
    box-shadow: 5px 5px 5px #DDDDDD;
    min-height: 890px;
    width:33.3333333%;
    border-left: 1px solid #EEEEEE;
    border-bottom: 1px solid #EEEEEE;
    float:left;
}

.teaser-panel-item p:first-of-type {
    min-height: 120px;
}
.teaser-panel-item h2 {
    text-align: left;
    margin: 0.2em 0.5em;
}

.teaser-panel-item p {
    text-align: left;
    padding: 0 1.7em;
}

.teaser-panel-item ul {
    margin: 0.75em 0 0 2em;
    padding: 0 1em;
    list-style: none;
    min-height: 190px;
}

.teaser-panel-item li:before {
    content: "";
    border-color: transparent rgb(251,0,137);
    border-style: solid;
    border-width: 0.35em 0 0.35em 0.45em;
    display: block;
    height: 0;
    width: 0;
    left: -1em;
    top: 0.9em;
    position: relative;
}

/* ==========================================================================
   Responsive Media Queries
   ========================================================================== */
@media (max-width:480px){
    .teaser-panel-item {
        min-height:400px;
        width: 100%;
    }
}

/* ==========================================================================


   9. CTA GRID


   ========================================================================== */


/* ==========================================================================
   Generic CSS
   ========================================================================== */

.cta-btn a span {
    font-size:18px !important;
}

/* ==========================================================================
   Responsive Media Queries
   ========================================================================== */
@media(max-width: 480px) {
    .cta-btn {
        margin: 0 0 .5em 0;
    }

    .cta-grid
    {
        width: 90%;
        clear:both;
    }

    .cta-wrapper {
        width:90%;
        margin: 0 auto;
    }

    .cta-btn {
        width:90%;
        float: left;
        margin: 0 0 .5em 0;
    }
    .cta-btn a {
        width:100%;
        margin-left:-6px;
    }
}

@media(min-width: 480px) and (max-width:1024px){
    .cta-grid
    {
        width: 74%;
        clear:both;
    }

    .cta-wrapper {
        width:90%;
        margin: 0 auto;
    }

    .cta-wrapper .text-padding.text-padding--less {
        padding:0;
    }

    .cta-wrapper .grid__item {
        /*width:33%;*/
        display: inline-block;
        padding: 0;
    }
    .cta-wrapper .grid__item div, .cta-wrapper .grid__item div span
    {
        width: 100%;
    }

    .cta-wrapper .grid {
        margin: auto;
    }

    .cta-wrapper .grid__item div{
        margin: 0 auto;
    }

    .cta-btn {
        width:33.333333%;
        float: left;
        margin: 0 0 .1em 0;
    }
    .cta-btn a {
        width:70%;
    }

}

@media(min-width: 1025px) {
    .cta-grid
    {
        width: 70%;
        clear:both;
        min-height: 6em;
        margin-top: 3em !important;
    }

    .cta-wrapper {
        width:60%;
        margin: 0 auto;
    }

    .cta-wrapper .text-padding.text-padding--less {
        padding:0;
    }

    .cta-wrapper .grid__item {
        /*width:33%;*/
        display: inline-block;
        padding: 0;
    }
    .cta-wrapper .grid__item div, .cta-wrapper .grid__item div span
    {
        width: 100%;
    }

    .cta-wrapper .grid {
        margin: auto;
    }

    .cta-wrapper .grid__item div{
        margin: 0 auto;
    }

    .cta-btn {
        width:33.333333%;
        float: left;
        margin: 0 0 .5em 0;
    }
    .cta-btn a {
        width:84%;
    }
}

/* ==========================================================================


   10. EMAIL SUBSCRIPTION TEMPLATES


   ========================================================================== */


/* ==========================================================================
   Generic CSS
   ========================================================================== */
body.subscription-template, .widget-type-email_subscriptions p, .widget-type-email_subscriptions_confirmation p, .widget-type-email_simple_subscription p, body.subscription-template .email-prefs .checkbox-row span.fakelabel span, body.subscription-template .subscribe-options label span {
    font-family: "source-sans-pro",sans-serif !important;
    font-weight: 300 !important;
    font-size: 17px;
}

body.subscription-template .widget-type-logo
{
    margin: 3em 0 1em 0;
    text-align: center;
}

body.subscription-template h1
{
    font-family: "source-sans-pro",sans-serif !important;
    text-align: center;
    text-transform: uppercase;
    color: #E5007D !important;
}

body.subscription-template h2, body.subscription-template h3
{
    font-family: "source-sans-pro",sans-serif !important;
}


body.subscription-template .custom-nav-container
{
    display: block;
    width: 100%;
    height: 4px !important;
    background: #00aeef !important;
    background: -webkit-gradient(linear,left top,right top,color-stop(0%,#00aeef),color-stop(33%,#e4087d),color-stop(67%,#00aeef),color-stop(100%,#60b69e)) !important;
    background: -webkit-linear-gradient(left,#00aeef 0,#e4087d 33%,#00aeef 67%,#60b69e 100%) !important;
    background: linear-gradient(to right,#00aeef 0,#e4087d 33%,#00aeef 67%,#60b69e 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00aeef',endColorstr='#60b69e',GradientType=1) !important;
    margin-top: -7.4em;
}

body.subscription-template .email-prefs {
    border-top: 1px solid #ccc;
    padding-top: 2.5em;
}

body.subscription-template .email-prefs .item .item-inner,  body.subscription-template .email-prefs .item .item-inner hovered, body.subscription-template .email-prefs .item .item-inner.selected, body.subscription-template .email-prefs .item .item-inner.hovered
{
    border: 0;
    background: none;
    padding: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}


body.subscription-template .email-prefs, body.subscription-template .email-prefs .item .item-inner *
{
    color: #009ee3;
}

body.subscription-template input[type="checkbox"], body.subscription-template .subscribe-options input[type="checkbox"]
{
    margin-top: 2px;
}

body.subscription-template input[type="submit"], body.subscription-template input[type="submit"]:hover
{
    color: #ffffff;
    background-color: #e5007d;
    border-color: #e5007d;
    background-image: none;
    text-transform: uppercase;
    font-family: "source-sans-pro",sans-serif;
    font-weight: bold;
    font-size: 14px;
    padding: 6px 12px;
    line-height: 1.42857143;
    display: block;
    margin: 0 auto;
}

body.subscription-template .email-prefs .checkbox-row span.fakelabel span, body.subscription-template .subscribe-options label span
{
    font-weight: bold !important;
}

body.subscription-template .email-prefs .checkbox-row span.fakelabel span, body.subscription-template .subscribe-options label span
{
    font-weight: bold !important;
}
/* ==========================================================================
   Responsive Media Queries
   ========================================================================== */

/* ==========================================================================


   11. BLOG TEMPLATE


   ========================================================================== */


/* ==========================================================================
   Generic CSS
   ========================================================================== */
.subscribe-panel {
    padding: 0 1em 2em 1em;
    background-color: #ececec;
    width: 100%;
    z-index: 999;
    text-align: left;
    margin-top: 50px;
}

.subscribe-panel h2 {
    padding-top: 1em;
    color: #009EE3;
    font-weight: 500;
}

.subscribe-panel input[type="email"] {
    height: 1.5em;
}

.subscribe-panel .hs-form-field {
    margin-bottom: -15px !important;
}

.subscribe-panel input[type="submit"] {
    background-color: rgb(229, 0, 125);
    color: rgb(255, 255, 255) !important;
    text-shadow: none;
    border: none;
}

.subscribe-panel hs_email field hs-form-field {
    margin-bottom: 0;
}

/* ==========================================================================
   Responsive Media Queries
   ========================================================================== */
@media only screen and (min-width: 1024px) {
    .subscribe-panel {
        margin-top: 0em;
    }
}

/* ==========================================================================


   12. Website Forms


   ========================================================================== */

.site-form {
    margin-top: 1em;
}

.site-form .hs_cos_wrapper_widget h3.form-title {
    color: #009ee3 !important;
    font-weight: 200;
    font-size: 2em !important;
}

.site-form label {
    display: block;
    float: left;
    font-weight: normal;
}

.site-form input {
    display: inline-block;
    float: left;
}

.site-form span {
    text-align: left;
}

.site-form input[type="checkbox" i] {
    display: inline-block;
    visibility: visible;
    width: 13px;
    -webkit-appearance: checkbox;
    margin: 4px 3px 3px 4px;
}

/* ==========================================================================
   Generic CSS
   ========================================================================== */


/* ==========================================================================
   Responsive Media Queries
   ========================================================================== */


/* ==========================================================================


   13. Header Ribbon


   ========================================================================== */


/* ==========================================================================
   Generic CSS
   ========================================================================== */

.header-ribbon {
    background-color: #009ee3;
    color: white;
    margin: 0;
    font-size: 2.2em !important;
    padding: .1em 0 .1em 0;
}

/* ==========================================================================
   Responsive Media Queries
   ========================================================================== */

/* ==========================================================================


   14. Custom Video Header


   ========================================================================== */

/* ==========================================================================
   Generic CSS
   ========================================================================== */

.custom_video_header #video_container {
    width: 100%;
    height: 80vh;
    overflow: hidden;
    position: relative;
    z-index: 1;
    opacity: 1;
    min-height: 600px;
}

.custom_video_header #video_container #text {
    z-index: 8;
    text-align: center;
    opacity: 0;
    position: relative;
}

.custom_video_header #video_container #text #actions {
    height: 95px;
}

.custom_video_header #video_container #text #playbutton {
    z-index: 3;
    margin: 0 auto;
    margin-top: 60px;
    height: 95px;
    display: block;
}

.custom_video_header #video_container #text #playbutton .rectangle {
    background-color: #009EE3;
    width: 149px;
    height: 95px;
    opacity: 0.8;
    margin: 0 auto;
}

.custom_video_header #video_container #text #playbutton .rectangle:hover {
    background-color: #E5007D;
    cursor: pointer;
}

.custom_video_header #video_container #text #playbutton .triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 22px 0 22px 32px;
    border-color: transparent transparent transparent white;
    margin: 0 auto;
    position: relative;
    bottom: 70px;
    pointer-events: none;
}

.custom_video_header #cover_all {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    height: 100%;
    width: 100%;
}

.custom_video_header #main-image {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    min-height: 600px;
    width: 100%;
}

.custom_video_header .overlayVideo {
    position: absolute;
    left: -3000px;
    top: 0px !important;
    z-index: 6;
    visibility: hidden;
}

.custom_video_header .backgroundVideo {
    z-index: 4;
    visibility: hidden;
    top: 0px !important;
}

.custom_video_header .video-background h1, .custom_video_header .video-background p {
    color: #ffffff;
    margin: 0;
}

.custom_video_header .video-background h1 {
    font-weight: 600;
    font-size: 3em;
    line-height: 56px;
    /*text-transform: uppercase;*/
}

.custom_video_header .video-background p {
    font-weight: 300;
    font-size: 1.65em;
    line-height: 34px;
    margin-top: 20px;
}

.lt-ie9 .custom_video_header #video_container #text {
    position: absolute;
    z-index: 6;
    text-align: center;
    width: 100%;
    top: 100px;
}

.lt-ie9 .custom_video_header #video_container {
    height: 600px;
}

.lt-ie9 .custom_video_header #cover_all {
    display: none;
}

.lt-ie9 .custom_video_header #main-image {
    position: relative;
    top: 0;
    left: 0;
    z-index: 3;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    height: 600px;
}

/* ==========================================================================
   Responsive Media Queries
   ========================================================================== */

@media (min-width: 481px) {
    .custom_video_header .video-background h1 {
        font-size: 6em;
        font-weight: 200;
        line-height: 92px;
        text-transform: none;
    }

    .custom_video_header .video-background p {
        font-size: 2em;
    }
}

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
    .custom_video_header #video_container #text {
        top: 100px !important;
    }
}


/* ==========================================================================


   15. CTA Video Header Video


   ========================================================================== */

/* ==========================================================================
   Generic CSS
   ========================================================================== */

.custom_cta_video_header #video_container {
    width: 100%;
    height: 80vh;
    overflow: hidden;
    position: relative;
    z-index: 1;
    opacity: 1;
    min-height: 600px;
}

.custom_cta_video_header #video_container #text {
    z-index: 8;
    text-align: center;
    opacity: 0;
    position: relative;
    /* top: 70px !important;*/
}

.custom_cta_video_header #video_container #text #cta-container {
    z-index: 8;
    opacity: 1;
    position: relative;
    width: 100%;
    margin-top: 3em;
}

.custom_cta_video_header #video_container a {
    background: rgba(251,0,137, 0.8);
    color: rgb(255,255,255);
    border-radius: 0;
    margin: 1em 1em;
    padding: 1em 2em;
    border: 1px solid white;
    font-size: 24px;
}

.custom_cta_video_header #video_container a:hover {
    background: rgba(251,0,137, 1);
}

.custom_cta_video_header #video_container #text #cta-container div {
    float: left;
    margin-right: 2em;
    margin-top: 1em;
}

.custom_cta_video_header #cover_all {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    height: 100%;
    width: 100%;
}

.custom_cta_video_header #main-image {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    min-height: 600px;
    width: 100%;
}

.custom_cta_video_header .overlayVideo {
    position: absolute;
    left: -3000px;
    top: 0px !important;
    z-index: 6;
    visibility: hidden;
}

.custom_cta_video_header .backgroundVideo {
    z-index: 4;
    visibility: hidden;
    top: 0px !important;
}

.custom_cta_video_header .video-background h1, .custom_cta_video_header .video-background p {
    color: #ffffff;
    margin: 0;
}

.custom_cta_video_header .video-background h1 {
    font-weight: 600 !important;
    font-size: 7em !important;
    line-height: 70px;
    /*text-transform: uppercase;*/
}

.custom_cta_video_header .video-background p {
    font-weight: 300;
    font-size: 1.65em;
    line-height: 34px;
    margin-top: 30px;
}

.lt-ie9 .custom_cta_video_header #video_container #text {
    position: absolute;
    z-index: 6;
    text-align: center;
    width: 100%;
    top: 100px;
}

.lt-ie9 .custom_cta_video_header #video_container {
    height: 600px;
}

.lt-ie9 .custom_cta_video_header #cover_all {
    display: none;
}

.lt-ie9 .custom_cta_video_header #main-image {
    position: relative;
    top: 0;
    left: 0;
    z-index: 3;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    height: 600px;
}

/* ==========================================================================
   Responsive Media Queries
   ========================================================================== */
@media (max-width: 480px) {
    .custom_cta_video_header #video_container #text #cta-container {
        margin-top: 1em;
    }

    .custom_cta_video_header .video-background h1 {
        font-weight: 600 !important;
        font-size: 4em !important;
    }
}
@media (min-width: 481px) {
    .custom_cta_video_header .video-background h1 {
        font-size: 5em;
        font-weight: 200;
        line-height: 92px;
        text-transform: none;
    }

    .custom_cta_video_header .video-background p {
        font-size: 2em;
    }
}

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
    .custom_cta_video_header #video_container #text {
        top: 100px !important;
    }
}

/* ==========================================================================


   16. Custom CTA Module


   ========================================================================== */

/* ==========================================================================
   Generic CSS
   ========================================================================== */
.custom_cta_module {
    background-color: #E5007D;
    /* padding: 1em 0;*/
    padding-bottom: 1em;
}

.custom_cta_module a {
    background: rgba(251,0,137, 0.5);
    color: rgb(255,255,255);
    border-radius: 0 !important;
    border: 2px solid #FFFFFF !important;
    margin-bottom: 2em;
}

.custom_cta_module a:hover {
    background: rgba(251,0,137, 1);
}

.custom_cta_module h3 {
    padding-top: 1em;
    padding-bottom: 0.7em;
    color: rgb(255,255,255);
    font-size: 2.2em;
    font-weight: 500;
}

/* ==========================================================================
Responsive Media Queries
========================================================================== */

/* ==========================================================================

17. INSIGHTS- BLOG HOMEPAGE

========================================================================== */

/* ==========================================================================
Generic CSS
========================================================================== */
.item-info h4.insight {
    text-transform: none !important;
}

/* ==========================================================================

  18. INSIGHTS- BLOG SIDEBAR

  ========================================================================== */
#blog-sidebar {
    margin-top:3em;
    visibility: visible;
    display: table;
    width: 100%;
    border: 1px solid #e6e6e6;
    border-top: 10px solid #009ce6;
    padding: 2em;
}

#blog-sidebar h2 {
    margin-left: 0.9em;
    font-weight: normal;
    font-size: 26px;
    margin: 0;
    color: #009ce6;
}

#blog-sidebar h2 b {
    font-weight: bold;
}

#blog-sidebar dl {
    counter-reset: blog-item-counter;
    border: 0;
    padding: 0;
}

#blog-sidebar dt {
    position: relative;
    font-size: 1.1em;
    font-weight: 500;
    padding: 0.9em 0 0 3.5em;
    width: auto;
    text-align: left;
}

#blog-sidebar dt:before {
    content: counter(blog-item-counter);
    counter-increment: blog-item-counter;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 3em;
    font-weight: normal;
    color: #009ce6;
}

#blog-sidebar dt:after {
    content: '';
}

#blog-sidebar dd {
    margin: 0 0 1em 0;
    font-weight: 800;
    padding: 0 0 0 3.9em;
    font-size: 1em;
    float: left;
}

#blog-sidebar a:link, #blog-sidebar a:visited, #blog-sidebar a:hover, #blog-sidebar a:active {
    color: #009ce6;
    font-size: 0.9em;
}

/* ==========================================================================

  19. SOCIAL MEDIA SCROLLING SIDEBAR

  ========================================================================== */

/* ==========================================================================
Generic CSS
========================================================================== */
#social-sidebar {
    visibility: visible;
    position: absolute;
    top: 40%;
    float: left;
    z-index: 1;
    position: fixed;
}

body.insights #social-sidebar {
    /*visibility: visible; */
}

#skeletonSocialShare {
    position: relative;
}

#skeletonSocialShare *, #skeletonSocialShare :after, #skeletonSocialShare :before {
    -webkit-box-sizing: content-box !important;
    -moz-box-sizing: content-box !important;
    box-sizing: content-box !important;
}

#skeletonSocialShare a {
    position: relative;
    width: 50px;
    height: 43px;
    line-height: 20px;
    padding: 16px 0;
    display: list-item;
    list-style-type: none;
    text-align: center;
    color: #fff;
    margin-bottom: 3px;
}

#skeletonSocialShare a:focus, #skeletonSocialShare a:hover {
    color: #fff;
    width: 57px;
    opacity: .8;
    transition-duration: .3s;
    transition-property: right;
    transition-timing-function: ease-out;
}

#skeletonSocialShare a, #skeletonSocialShare a:active, #skeletonSocialShare a:focus, #skeletonSocialShare a:hover, #skeletonSocialShare a:visited {
    outline: 0 !important;
}

#skeletonSocialShare span#socialCount {
    color: #009ee3;
    padding-bottom: 10px !important;
    display: table;
    font-size: 0.9em;
    white-space: pre-wrap;
    margin-left: 4px;
    font-weight: 600;
    width: 10px;
    text-align: center;
    line-height: 1.2em;
}


#skeletonSocialShare i {
    line-height: inherit;
    font-size: 27px;
    text-align: center;
}

#skeletonSocialShare .content-left, #skeletonSocialShare .content-right, #skeletonSocialShare .top-left, #skeletonSocialShare .top-right {
    position: fixed;
    top: 25%;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

#skeletonSocialShare .top-left {
    left: 0;
}

#skeletonSocialShare .top-right {
    right: 0;
    direction: rtl;
}

#skeletonSocialShare .content-left, #skeletonSocialShare .content-right {
    margin: 0;
}

#skeletonSocialShare .envelope {
    background-color: #726C6C;
}


#skeletonSocialShare .facebook,
#skeletonSocialShare .twitter,
#skeletonSocialShare .linkedin,
#skeletonSocialShare .google-plus {
    transform: skewY(-20deg);
}

#skeletonSocialShare .facebook i, #skeletonSocialShare .facebook span,
#skeletonSocialShare .twitter i, #skeletonSocialShare .twitter span,
#skeletonSocialShare .linkedin i, #skeletonSocialShare .linkedin span,
#skeletonSocialShare .google-plus i, #skeletonSocialShare .google-plus span {
    transform: skewY(20deg);
    margin-bottom: 10px;
}

/* Button Gradient Fills */
#skeletonSocialShare .facebook {
    background: #e3027a; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#e3027a, #c7148a); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#e3027a, #c7148a); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#e3027a, #c7148a); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#e3027a, #c7148a); /* Standard syntax */
}

#skeletonSocialShare .twitter {
    background: #d50785; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#d50785, #9d30a5); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#d50785, #9d30a5); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#d50785, #9d30a5); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#d50785, #9d30a5); /* Standard syntax */
}

#skeletonSocialShare .linkedin {
    background: #ab2797; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#ab2797, #5e56bb); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#ab2797, #5e56bb); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#ab2797, #5e56bb); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#ab2797, #5e56bb); /* Standard syntax */
}

#skeletonSocialShare .google-plus {
    background: #7344a4; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#7344a4, #2f81cb); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#7344a4, #2f81cb); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#7344a4, #2f81cb); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#7344a4, #2f81cb); /* Standard syntax */
}

#skeletonSocialShare .shareCount {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    color: #fff;
    font-size: 14px;
}

#skeletonSocialShare .margin-top-5 {
    margin-top: 5px;
}


/* ==========================================================================
Responsive Media Queries
========================================================================== */
@media only screen and (min-device-width:0px) and (max-width:480px) {
    #social-sidebar {
        text-align: center;
        position: fixed;
        width: 100%;
        display:none;
    }

    #skeletonSocialShare {
        margin-top: 50px;
    }

    #skeletonSocialShare .content-left, #skeletonSocialShare .content-right, #skeletonSocialShare .top-left, #skeletonSocialShare .top-right {
        top: auto;
        bottom: 0;
        margin: 0;
        right: 0;
        left: 0;
        width: 100%;
        z-index: 999;
    }

    #skeletonSocialShare a {
        position: relative;
        float: left;
        display: list-item;
        list-style-type: none;
        height: 32px;
        padding: 10px 0;
        width: 25%;
    }

    #skeletonSocialShare a:focus, #skeletonSocialShare a:hover {
        -moz-transition-property: none;
        -webkit-transition-property: none;
        -o-transition-property: none;
        transition-property: none;
        width: 25%;
    }


    #skeletonSocialShare .facebook,
    #skeletonSocialShare .twitter,
    #skeletonSocialShare .linkedin,
    #skeletonSocialShare .google-plus {
        transform: skewY(0deg);
    }

    #skeletonSocialShare .facebook i, #skeletonSocialShare .facebook span,
    #skeletonSocialShare .twitter i, #skeletonSocialShare .twitter span,
    #skeletonSocialShare .linkedin i, #skeletonSocialShare .linkedin span,
    #skeletonSocialShare .google-plus i, #skeletonSocialShare .google-plus span {
        transform: skewY(0deg);
        margin-bottom: 0px;
    }

    #skeletonSocialShare .shareCount {
        font-size: 10px;
    }

    /* Button Gradient Fills */
    #skeletonSocialShare .facebook {
        background: #e3027a; /* For browsers that do not support gradients */
        background: -webkit-linear-gradient(left, #e3027a, #c7148a); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(right, #e3027a, #c7148a); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(right, #e3027a, #c7148a); /* For Firefox 3.6 to 15 */
        background: linear-gradient(to right, #e3027a, #c7148a); /* Standard syntax */
    }

    #skeletonSocialShare .twitter {
        background: #c7148a; /* For browsers that do not support gradients */
        background: -webkit-linear-gradient(left, #c7148a, #9d30a5); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(right, #c7148a, #9d30a5); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(right,#c7148a, #9d30a5); /* For Firefox 3.6 to 15 */
        background: linear-gradient(to right, #c7148a, #9d30a5); /* Standard syntax */
    }

    #skeletonSocialShare .linkedin {
        background: #ab2797; /* For browsers that do not support gradients */
        background: -webkit-linear-gradient(left, #9d30a5, #5e56bb); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(right, #9d30a5, #5e56bb); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(right, #9d30a5, #5e56bb); /* For Firefox 3.6 to 15 */
        background: linear-gradient(to right, #9d30a5, #5e56bb); /* Standard syntax */
    }

    #skeletonSocialShare .google-plus {
        background: #7344a4; /* For browsers that do not support gradients */
        background: -webkit-linear-gradient(left, #5e56bb, #2f81cb); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(right, #5e56bb, #2f81cb); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(right, #5e56bb, #2f81cb); /* For Firefox 3.6 to 15 */
        background: linear-gradient(to right, #5e56bb, #2f81cb); /* Standard syntax */
    }

    #skeletonSocialShare span#socialCount {
        display: none;
    }
}

/* ==========================================================================

   20. FUNNEL

   ========================================================================== */

/* ==========================================================================
   Generic CSS
   ========================================================================== */

.funnel-container {
    color: #fff;
    width: 100%;
    margin: 3em auto 0 auto;
    background: #6cb88c; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, #6cb88c, #e3e237); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right,#6cb88c, #e3e237); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #6cb88c, #e3e237); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #6cb88c, #e3e237); /* Standard syntax */
    overflow: hidden;
    padding-bottom: 1.5em;
    /*        padding-left: 15%;*/
    margin-bottom: -3em;

    display: flex;
    justify-content: center;
    align-items: center;
}

.funnel-container .funnel-content {
    /*        width:60%;*/
}
.funnel-container .funnel-header h2 {
    text-align: center;
    margin: 15px 0 0 0;
    padding: 0;
    color: #fff;
    font-size: 2.5em;
}

.funnel-container .funnel-header p {
    padding: 0 110px;
    text-align: left;
    font-size: 1.1em;
}

.funnel-container .funnel-footer {
    display: none;
}

.funnel-container .funnel-footer h3 {
    clear: both;
    color: #fff;
    font-size: 2em;
    text-align: left;
    margin-left: 1em;
}

.funnel-container .funnel-footer p {
    text-align: left;
    padding: 0 1em 0 1.8em;
}


.funnel-container .funnel-spacer {
    height: 15px;
}

.funnel-container .funnel-spacer.top {
    background-image: url(https://cdn2.hubspot.net/hubfs/467997/img/funnel/line-top.png?t=1536948317899);
    background-position: left 190px center;
    background-repeat: no-repeat;
}

.funnel-container .funnel-spacer.bottom {
    background-image: url(https://cdn2.hubspot.net/hubfs/467997/img/funnel/line-bottom.png?t=1536948317899);
    background-position: left 270px center;
    background-repeat: no-repeat;
}

/* ALL FUNNELS */
.funnel-container .funnel-top, .funnel-container .funnel-middle, .funnel-container .funnel-bottom {
    position: relative;
    width: 800px;
    height: 130px;
}

.funnel-container .funnel-top #stay-in-place,
.funnel-container .funnel-middle #stay-in-place,
.funnel-container .funnel-bottom #stay-in-place {
    z-index: 2;
    position: absolute;
    width: 100%;
    height: 130px;
    background-position: left 100px center;
    background-repeat: no-repeat;
    text-align: center;
    color: white;
}

.funnel-container .funnel-top #stay-in-place:hover,
.funnel-container .funnel-middle #stay-in-place:hover,
.funnel-container .funnel-bottom #stay-in-place:hover {
    color: #4daea2;
}

.funnel-container .funnel-top #stay-in-place p,
.funnel-container .funnel-middle #stay-in-place p,
.funnel-container .funnel-bottom #stay-in-place p {
    padding: 0;
    margin: 0;
    display: block;
    width: 450px;
    line-height: normal;
    margin-top: 50px;
    font-size: 24px;
}

.funnel-container .funnel-top #slide-out,
.funnel-container .funnel-middle #slide-out,
.funnel-container .funnel-bottom #slide-out {
    z-index: 1;
    position: absolute;
    height: 130px;
    -webkit-transition: all 1s, -webkit-transform 1s;
    transition: all 1s, transform 1s;
    background-image: url(https://cdn2.hubspot.net/hubfs/467997/img/funnel/slideout1.png?t=1536948317899);
    background-repeat: no-repeat;
}

.funnel-container .funnel-top #slide-out p,
.funnel-container .funnel-middle #slide-out p,
.funnel-container .funnel-bottom #slide-out p {
    font-size: 1em;
    margin: 1.1em 0 0 0;
    height: 110px;
    padding: 0;
    display: block;
    width: 290px;
    line-height: normal;
    color: #111111;
    overflow: hidden;
    text-align: left;
}

.funnel-container .funnel-top:hover #slide-out,
.funnel-container .funnel-middle:hover #slide-out,
.funnel-container .funnel-bottom:hover #slide-out {
    z-index: 0;
}


/* TOP FUNNEL */
.funnel-container .funnel-top {
}

.funnel-container .funnel-top #stay-in-place {
    left: 0;
    background-image: url(https://cdn2.hubspot.net/hubfs/467997/img/funnel/inactive-top.png?t=1536948317899);
}

.funnel-container .funnel-top #stay-in-place:hover {
    background-image: url(https://cdn2.hubspot.net/hubfs/467997/img/funnel/active-top.png?t=1536948317899);
}

.funnel-container .funnel-top #stay-in-place p {
    margin-left: 165px;
}

.funnel-container .funnel-top #slide-out {
    width: 50%;
    left: 170px;
}

.funnel-container .funnel-top #slide-out p {
    margin-left: 75px;
}

.funnel-container .funnel-top:hover #slide-out {
    left: 617px;
    -webkit-transition: all 0.5s, -webkit-transform 0.5s;
    transition: all 0.5s, transform 0.5s;
}

/* MIDDLE FUNNEL */
.funnel-container .funnel-middle #stay-in-place {
    left: 80px;
    background-image: url(https://cdn2.hubspot.net/hubfs/467997/img/funnel/inactive-middle.png?t=1536948317899);
}

.funnel-container .funnel-middle #stay-in-place:hover {
    background-image: url(https://cdn2.hubspot.net/hubfs/467997/img/funnel/active-middle.png?t=1536948317899);
}

.funnel-container .funnel-middle #stay-in-place p {
    margin-left: 85px;
}

.funnel-container .funnel-middle #slide-out {
    width: 20%;
    left: 270px;
}

.funnel-container .funnel-middle #slide-out p {
    margin-left: -30px;
    -webkit-transition: all 1s, -webkit-transform 1s;
    transition: all 1s, transform 1s;
}

.funnel-container .funnel-middle:hover #slide-out {
    left: 530px;
    width: 50%;
    -webkit-transition: all 0.5s, -webkit-transform 0.5s;
    transition: all 0.5s, transform 0.5s;
}

.funnel-container .funnel-middle:hover #slide-out p {
    width: 290px;
    margin-left: 75px;
    -webkit-transition: all 1s, -webkit-transform 1s;
    transition: all 0.5s, transform 0.5s;
}

/* BOTTOM FUNNEL */
.funnel-container .funnel-bottom #stay-in-place {
    left: 160px;
    background-image: url(https://cdn2.hubspot.net/hubfs/467997/img/funnel/inactive-bottom.png?t=1536948317899);
}

.funnel-container .funnel-bottom #stay-in-place:hover {
    background-image: url(https://cdn2.hubspot.net/hubfs/467997/img/funnel/active-bottom.png?t=1536948317899);
}

.funnel-container .funnel-bottom #stay-in-place p {
    margin-left: 0px;
}

.funnel-container .funnel-bottom #slide-out {
    width: 180px;
    left: 300px;
    background-image: url(https://cdn2.hubspot.net/hubfs/467997/img/funnel/slideout1-bottom.png?t=1536948317899);
}

.funnel-container .funnel-bottom #slide-out p {
    margin-left: 0px;
    width: 180px;
    -webkit-transition: all 1.25s, -webkit-transform 1.25s;
    transition: all 1.25s, transform 1.25s;
}

.funnel-container .funnel-bottom:hover #slide-out {
    left: 452px;
    width: 50%;
    -webkit-transition: all 0.5s, -webkit-transform 0.5s;
    transition: all 0.5s, transform 0.5s;
}

.funnel-container .funnel-bottom:hover #slide-out p {
    width: 290px;
    margin-left: 83px;
    -webkit-transition: all 0.25s, -webkit-transform 0.25s;
    transition: all 0.25s, transform 0.25s;
}
/* ==========================================================================
   Responsive Media Queries
   ========================================================================== */

@media only screen and (min-width : 768px) {
    .funnel-container .funnel-header {
        width: 700px;
        margin-left: 50px;
    }
    .funnel-container .funnel-header h2 {
        text-align: center;
        margin: 15px 0 0 0px;
        padding: 0;
        color: #fff;
        font-size: 3em;
    }

    .funnel-container .funnel-header p {
        padding: 0;
        text-align: center;
        font-size: 1.1em;
    }
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    .funnel-container .funnel-header h2 {
        font-size: 3em;
    }

    .funnel-container .funnel-top #slide-out,
    .funnel-container .funnel-middle #slide-out,
    .funnel-container .funnel-bottom #slide-out {
        display: none;
    }

    .funnel-container .funnel-footer {
        display: initial;
    }
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    .funnel-container .funnel-top, .funnel-container .funnel-middle, .funnel-container .funnel-bottom, .funnel-container .funnel-spacer {
        display: none;
    }

    .funnel-container .funnel-footer h3 {
        padding: 0 0.8em;
        text-align: left;
        margin: 0;
    }

    .funnel-container .funnel-header p, .funnel-container .funnel-footer p {
        padding: 0 1.4em;
    }

    .funnel-container .funnel-footer {
        display: initial;
    }
}

/* ==========================================================================

   21. BODY FORM CONTAINER

   ========================================================================== */
.body-container .form-container {
    display: table;
    background: #eaeaea;
    width: 100%;
    padding: 2em 0 3em 0;
}

.body-container .form-container form {
    width: 40%;
    margin: 0 auto;
}

.body-container .form-container h3 {
    width: 40%;
    margin: 0 auto;
    padding: 0.5em 0 0.7em 0;
    font-size: 2.5em;
    text-align: center;
}

.body-container .form-container input[type=submit] {
    color: #fff !important;
    padding: 0 1.5em;
    font-weight: 600;
    background-color: #e5007d;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    height: 3.5em;
    font-size: 1em;
}

.body-container .form-container input[type=email] {
    height: 3em;
}

.body-container .form-container input[type=submit]:hover {
    color: #fff !important;
    background-color: rgb(251,0,137);
    -webkit-border-radius: 0px;
    border-radius: 0px;
    border: 0px;
}

/* ==========================================================================

   22. BLOG PAGE

   ========================================================================== */
.blog-page .hero-banner--general {
    height: 4em;
    padding: 1em 0;
}
.blog-page ul.hs-breadcrumb-menu {
    font-size: 1.4em;
    line-height: 1.6em;
}
.blog-page span h1 {
    font-size: 1em;
}
.blog-page .hero-banner--general .first-crumb a{
    color: #d5d7ee !important;
}

.blog-page .page-title {
    color: #009EE3;
    font-size: 3.5em;
    line-height: 1.1em;
    font-weight: 300;
}

.blog-page .page-title {
    color: #009EE3;
    margin-bottom: 0;
}

.blog-page span.blog-author-date {
    font-size: 1em;
    margin-bottom: 2em;
}
.blog-page .blog-body{
    margin-top: 2.5em;
}

.hero-banner h1 {
    font-size: 3.2em !important;
    font-weight: 400 !important;
}

/* ==========================================================================


   21. RIGHT HAND SIDEBAR SCROLLER


   ========================================================================== */

/* ==========================================================================
   Generic CSS
   ========================================================================== */
#scroller img {
    width: 100%;
}


/* ==========================================================================


   22. LIST ITEM ARROW


   ========================================================================== */
.hs_cos_wrapper_type_rich_text ul li:before {
    /*
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f058";
    margin-right: 8px;
    color: #34495e;
    font-size: 18px
    */
    content: "";
    border-color: transparent #fb0089;
    border-style: solid;
    border-width: .35em 0 .35em .45em;
    display: block;
    height: 0;
    width: 0;
    left: -1em;
    top: 1em;
    position: relative
}

.insights .hs_cos_wrapper_type_rich_text ul li:before {
    top: 1.15em;
}

.sticky-nav .hs_cos_wrapper_type_rich_text ul li:before {
    content: "" !important;
    border-color: transparent #ffffff;
    border-style: solid;
    border-width: .35em 0 .35em .45em;
    display: block;
    height: 0;
    width: 0;
    left: -1em;
    top: 0.9em;
    position: relative
}

.landing-page-skeleton-theme .hs_cos_wrapper_type_rich_text ul li:before {
    content: "" !important;
    border-color: transparent ##E5007D;
    border-style: solid;
    border-width: .35em 0 .35em .45em;
    display: block;
    height: 0;
    width: 0;
    left: -0.9em;
    top: 1.1em;
    position: relative
}

/* ==========================================================================


   23. TESTIMONIAL / QUOTE


   ========================================================================== */
.testimonial>.quote {
    width: 80%;
}
/* ==========================================================================


   24. VIDEO CONTENT MARKETING


   ========================================================================== */

.narrow-content {
    max-width: 960px !important;
    float: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* ==========================================================================


   25. TEAM PHOTO


   ========================================================================== */

/* ==========================================================================
Generic CSS
========================================================================== */
.team-photo-container {
    width: 100%;
    display: inline;
}

.team-photo-container .team-photo-frame {
    width: 100%;
    display: inline-block;
    float:left;
}

.team-photo-container .team-photo {
    background-size: 100% 100%; /* width and height, can be %, px or whatever. */
    position: relative;
    border: 2px solid white;
}

.team-photo-container .team-photo .fun-photo {
    opacity: 1;

}

.team-photo-container .team-photo:hover .fun-photo {
    opacity: 1;
}

.team-photo-container .team-photo .fun-photo img {
    width:100%;
    height:100%;
    position: relative;
}

.team-photo-container .team-photo .fun-photo h1 {
    position: relative;
    font-weight: 700;
    color: #fff;
    margin:-3em 0 0 0.5em;
    text-align:left;
    font-size: 1.2em;

}

.team-photo-container .team-photo .fun-photo  h2 {
    position: relative;
    color: #fff;
    margin: -1.4em 0 0 0.5em;
    text-align:left;
    font-size: 1.2em;
}

.team-photo-container .team-photo .fun-photo .team-member-details {
    position: absolute;
    bottom: 0em;
    margin-left: 0.1em;
    margin-bottom: 0.1em;
    z-index: 1;
    height: 4em;
    padding: 0 0 0 0.2em;
    border-color: #e5007d transparent transparent transparent;
    border-width: 60px 30px 0 0px;
    border-style: solid;
    height: 0;
    width: 75%;
    box-sizing: border-box;
    font-size: 1em;
}

/* ==========================================================================
Responsive Media Queries
========================================================================== */
@media (max-width:1024px) {
    .team-photo-container .team-photo-frame {
    }
    .team-photo-container .team-photo .fun-photo .team-member-details {
    }
    .team-photo-container .team-photo .fun-photo h1 , .team-photo-container .team-photo .fun-photo  h2 {
        font-size:1.1em;
    }
}
@media (min-width: 481px) and (max-width:1023px) {
    .team-photo-container .team-photo-frame {
        width: 50%;
    }
}

@media(min-width:1023px) {
    .team-photo-container .team-photo-frame {
        width: 25%;
    }

}

@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : landscape) {
    .team-photo-container .team-photo-frame {
        width: 50%;
    }
}

@media only screen
and (max-width : 767px)
and (orientation : landscape)
{
    .team-photo-container .team-photo-frame {
        width: 50%;
    }
    .team-photo-container .team-photo .fun-photo .team-member-details {
        width: 95%;
    }
    .team-photo-container .team-photo .fun-photo h1 , .team-photo-container .team-photo .fun-photo  h2 {
        font-size:1em;
    }
}

/* ==========================================================================


   26. LANDING PAGE WITH FORM v2


   ========================================================================== */

/* ==========================================================================
   Generic CSS
   ========================================================================== */

.landing-page-2 h1 {
    color: #e5007d;
    margin-bottom: 0;
    font-size: 2.3em;
}


.landing-page-2 ul {
    margin:0;
}

.landing-page-2 p, .landing-page-2 ul li {
    font-size: 1.125em;
    line-height: 1.3em;
}

.landing-page-2 p {
    font-size: 1.125em;
    line-height: 1.3em;
}

.landing-page-2 .hs-error-msgs label {
    width: 100%;
    text-align:left;
}
.landing-page-2 p.secondary-header {
    font-size: 1.3em;
    color: #009ee3;
    margin-bottom: 1em;
}
.landing-page-2 .widget-type-form {
    background-color: #D2EEFA;
    padding: 1.5em 3.5em 2em 3.5em;
    margin-top: 1em;
}

.landing-page-2 .widget-type-form label {
    display: block;
    float: left;
    font-weight: 400;
}

.landing-page-2 .widget-type-form h3 {
    display: none;
}

.landing-page-2 .hs-form-field .input {
    padding: 0 !important;
}

.landing-page-2 .widget-type-form input, .landing-page-2 .widget-type-form textarea {
    border: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -o-border-radius: 0px;
    -ms-border-radius: 0px;
}

.landing-page-2 .widget-type-form input[type="text"], .landing-page-2 .widget-type-form input[type="email"], .landing-page-2 .widget-type-form input[type="tel"]  {
    height: 2.7em;
}

.landing-page-2 .widget-type-form input[type="submit"] {
    clear: both;
    float: left;
    font-size: 1em;
    padding: 0.5em 2.2em;
}

.landing-page-2 .widget-type-form input[type="checkbox" i] {
    display: inline-block;
    visibility: visible;
    width: 13px;
    -webkit-appearance: checkbox;
    margin: 4px 3px 3px 4px;
}

.landing-page-2 .widget-type-form input#firstname {
    width: 50%;
}

/* ==========================================================================
   Responsive Media Queries
   ========================================================================== */
@media (max-width: 768px) {
    .landing-page-2 .widget-type-form {
        padding-bottom: 5em;
    }
}


/* ==========================================================================


   27. MEGA NAV


   ========================================================================== */


/* ==========================================================================
   Responsive Media Queries
   ========================================================================== */

@media (min-width: 950px){

    .custom-menu-primary ul:first-child>li>ul.hs-menu-children-wrapper {
        width: 775px !important;
    }

    .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts>ul li.hs-item-has-children ul.hs-menu-children-wrapper {
        left: -350px;
    }


    .custom-menu-primary .hs-menu-wrapper > ul ul li.hs-menu-depth-2 {
        float: middle !important;
        width: 100% !important;
        padding: 20px !important;
        background: transparent !important;
    }

    .custom-menu-primary .hs-menu-wrapper > ul ul li.hs-menu-depth-2 > a {
        text-align: center;
        display: none !important;
    }

    .custom-menu-primary .hs-menu-wrapper > ul ul li.hs-menu-depth-2 > a:after {
        width: 60% !important;
        display: block !important;
        margin: 20px 20% 0 20% !important;
    }


    .custom-menu-primary .hs-menu-wrapper > ul ul li.hs-menu-depth-3 {
        float: left;
        width: 33%;
        padding: 20px;
        background: transparent;
    }
}



/* ==========================================================================


   28. INSIGHTS - PAGE NAVIGATION


   ========================================================================== */

/* ==========================================================================
   Generic CSS
   ========================================================================== */
.insights-filter {
    margin-top: -3em;
    padding: 0.5em 0 0 0;
    background: #F0F0F0;
    width:100%;
    float:left;
}

.insights-filter .filter-link-count {
    display: none;
}

.insights-filter h3 {
    display: none;
}

.insights-filter ul {
    margin-bottom: -0.3em !important;
    margin-left: 0;
}
.insights-filter li {
    display:inline;
    margin:0em 0em 1em 0em;
}

.insights-filter a:link,
.insights-filter a:visited {
    padding: 1em 2em 2em 2em;
    color: #474747;
    border: 0px;
    width:auto;
    text-decoration:none;
    text-transform: uppercase;
    margin-left: -1em;
    margin-top: -1.1em;

}

.insights-filter ul a:hover {
    /*        border: 1px solid rgba(229, 0, 125, 0.5);*/
    border: 1px solid rgba(229, 0, 125, 1);
}
/*

	.insights-filter li:nth-child(3) a {
	    background: #fff;

	}
*/
.insights-filter a.active {
    background: #fff;
}


#home #nav-home a,
#about #nav-about a,
#archive #nav-archive a,
#lab #nav-lab a,
#reviews #nav-reviews a,
#contact #nav-contact a {
    background:#e35a00;
    color:#fff;
}

#nav a:active {
    background:#e35a00;
    color:#fff;
}


/* ==========================================================================
   Responsive Media Queries
   ========================================================================== */


@media (max-width: 480px)
{
    .insights-filter ul {
        position: relative;
        z-index: 1;
    }

    .insights-filter li {
        width: 100% !important;
    }

    .insights-filter li a {
        padding: 1em 2em 1em 2em !important;
        width: 100% !important;
    }

    .insights-filter a.active {
        width: 100%;
    }
}


/* ==========================================================================


   29. HEADER WITH NO NAV


   ========================================================================== */

/* ==========================================================================
   Generic CSS
   ========================================================================== */
.no-nav .logo_area {
    display: inline-block;
    float: none;
}

.no-nav #hs_menu_wrapper_header_navigation_2017 {
    display: none;
}

.no-nav .logo-symbol {
    content:url("https://cdn2.hubspot.net/hubfs/467997/prod/img/skeleton-logo.png?t=1536948317899");
    width: 100%;
    margin-top: 5px;
}

.logo_area .logo img {
    width: 100%;
}

.no-nav .hs-cta-node {
    display: none;
}


/* ==========================================================================


   30. RESPONSIVE VIDEO HEADER


   ========================================================================== */

/* ==========================================================================
   Generic CSS
   ========================================================================== */

.responsive-video-panel { position:relative; }

.responsive-video-panel video {
    position:relative;
    z-index:0;
}

.responsive-video-panel .overlay {
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    width: 100%;
    margin: 0 auto;
}

.responsive-video-panel h1
{
    font-weight: 600;
    font-size: 5.2em;
    color: #ffffff;
    margin-top: 1.6em;
    margin-bottom: 0;
}

.responsive-video-panel p
{
    width:100%;
    font-size: 2em;
    color: #FFFFFF;
    margin: 0em 0 2.3em 0;
}

.responsive-video-panel a {
    background: rgba(251,0,137, 0.8);
    color: rgb(255,255,255);
    border-radius: 0;
    padding: 0.8em 1.6em;
    border: 1px solid white;
    font-size: 1.4em;
}

.responsive-video-panel a:hover {
    background: rgba(251,0,137, 1);
}

.responsive-video-panel .video-button.video-button--small:after {
    content: "Watch Our Showreel";
}

/* ==========================================================================
   Responsive Media Queries
   ========================================================================== */

@media (min-width: 481px) and (max-width: 767px) {
    .responsive-video-panel h1 {
        font-size: 3.5em;
        margin-top: 0.6em;
        margin-bottom: 0.5em;
    }

    .responsive-video-panel p {
        font-size: 2em;
        margin: 0em 0 2em 0;
        padding: 0 1em;
        line-height: 1.2em;
    }

    .responsive-video-panel a {
        margin: 2em 1em;
        padding: 1em 2em;
        font-size: 1.2em;
    }
}

@media only screen and (min-width : 320px) and (max-width : 667px) {
    .responsive-video-panel h1
    {
        font-weight: 600;
        font-size: 1em;
        margin-top: 1%;
        margin-bottom: 0em;
    }

    .responsive-video-panel p
    {
        font-size: 0.8em;
        line-height: 1em;
        margin: 1% 0 3% 0;
    }

    .responsive-video-panel a {
        padding: 0.8em 1.6em;
        font-size: 0.5em;
    }
}
@media (min-width : 768px) and (max-width : 1024px) {
    .responsive-video-panel h1 {
        font-size: 3.5em;
        margin-top: 1.4em;
        margin-bottom: 0;
    }

    .responsive-video-panel p {
        font-size: 1.8em;
        margin: 0.4em 0 1.8em 0;
    }

    .responsive-video-panel a {
        padding: 0.6em 1.5em;
        font-size: 1.4em;
    }
}

@media (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) {
    .responsive-video-panel h1 {
        font-size: 2.2em;
        margin-top: 0.4em;
        margin-bottom: 0;
    }

    .responsive-video-panel p {
        font-size: 1.6em;
        margin: 0.4em 0 1.2em 0;
        padding: 0 1em 0 1em;
    }

    .responsive-video-panel a {
        padding: 0.6em 1.5em;
        font-size: 1.2em;
    }
}

/* ==========================================================================


   31. CALL TO ACTION CUSTOM MODULE


   ========================================================================== */

/* ==========================================================================
   Generic CSS
   ========================================================================== */
body.landing-page-skeleton-theme .cta-box {
    border: 1px solid #4daea2 !important;
    margin-top: 2em;
}

body.landing-page-skeleton-theme .cta-box h3 {
    font-size: 2em;
    font-weight: 500 !important;
    color: #4daea2 !important;
    text-align:center;
    margin-top: 0.8em;
}

body.landing-page-skeleton-theme .cta-box p {
    color: #808080;
    font-size: 1em;
    font-weight: 500;
    padding: 0 1.5em 1em 1.5em;
}

body.landing-page-skeleton-theme .cta-box a {
    background-color: #D4D4D4;
    width: 100%;
    display: block;
    text-align: center;
    padding: 1.5em 0 1.5em 0;
}

body.landing-page-skeleton-theme  .wistia-postroll {
    background-color: #FFFFFF !important;
    border: 2px solid red;
}

/* ==========================================================================


   32. SCROLLING SLIDESHOW


   ========================================================================== */

/* ==========================================================================
   Generic CSS
   ========================================================================== */
#scrolling-slideshow-container {
    width: 100%;
    overflow: hidden;
    margin: 0px auto;
}

.photobanner {
    height: 250px;
    width: 7250px; /* 250 * <no. of images - including keyframe images> (so 20 + 9) */
    padding: 0;

    -webkit-animation: bannermove 40s linear infinite;
    -moz-animation: bannermove 40s linear infinite;
    -ms-animation: bannermove 40s linear infinite;
    animation: bannermove 40s linear infinite;
}

.photobanner img {
    width: 250px;
    margin-top: 0px;
    /*  height: 233px;*/
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.photobanner img:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    cursor: pointer;
    -webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
    box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}

.photobanner:hover {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

/*keyframe animations*/
@keyframes

"bannermove" {
    0% {
        margin-left: 0px;
    }

    100% {
        margin-left: -5000px;
    }
}

@-moz-keyframes bannermove {
    0% {
        margin-left: 0px;
    }

    100% {
        margin-left: -5000px;
    }
}

@-webkit-keyframes "bannermove" {
    0% {
        margin-left: 0px;
    }

    100% {
        margin-left: -5000px;
    }
}

@-ms-keyframes "bannermove" {
    0% {
        margin-left: 0px;
    }

    100% {
        margin-left: -5000px;
    }
}

@-o-keyframes "bannermove" {
    0% {
        margin-left: 0px;
    }

    100% {
        margin-left: -5000px;
    }
}


/* ==========================================================================


   33. BLOG RESPONSIVE VIDEO HEADER


   ========================================================================== */

/* ==========================================================================
   Generic CSS
   ========================================================================== */

/* ==========================================================================
   Responsive Media Queries
   ========================================================================== */

@media (max-width: 768px)
{
    .blog-responsive-video {
        padding-top: 5em !important;
    }
}

@media (min-width: 769px)
{
    .blog-responsive-video {
        padding-top: 2em !important;
    }
}

/* ==========================================================================


   34. FOOTER FORM


   ========================================================================== */

/* ==========================================================================
   Generic CSS
   ========================================================================== */
.footer-form .actions {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.footer-form .hs_email.field.hs-form-field label
{
    display: none;
}

.footer-form .hs_email.field.hs-form-field input
{
    height: 2em;
    margin: 0 auto;
    max-width:none;
}

.footer-form input[type=submit]
{
    border: 0;
    text-shadow: none;
    padding-left: 0;
    border-radius: 0 !important;
    font-weight: 200 !important;
    box-shadow: none;
}

/* ==========================================================================
   Responsive Media Queries
   ========================================================================== */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
{
    .body-container .form-container .footer-form form {
        width: 100%;
    }

}


========================================================================== */


/* ==========================================================================


   35. BLOG COMMENTS


   ========================================================================== */

/* ==========================================================================
   Generic CSS
   ========================================================================== */


#comment-form > form > div:nth-of-type(2),
#comment-form > form > div:nth-of-type(4)
{
    padding-right: 0.5em;
}

#comment-form > form > div:nth-of-type(3),
#comment-form > form > div:nth-of-type(5)
{
    padding-left: 0.5em;
}


#comment-form > form > div:nth-of-type(2),
#comment-form > form > div:nth-of-type(3),
#comment-form > form > div:nth-of-type(4),
#comment-form > form > div:nth-of-type(5)
{
    display: inline-block;
    width: 50%;
}

.blog-comments {
    margin-top: 5em;
    border: 1px solid #e6e6e6;
    padding: 1em;
}


.blog-comments h3 {
    margin: 0;
    padding-bottom: 0.5em;
}


#comment-form > form > div:nth-of-type(2) > ul {
    display: none !important;
}

#comment-form > form > div > div > textarea {
    font-family: 'source-sans-pro',sans-serif;
    font-size: 16px;
    width: 100%;
}

.blog-comments input[type="submit"] {
    background-color: #e5007d;
    padding: 10px 15px;
    font-weight: 500;
    color: #fff;
    border: 0;
    border-radius: 0;
}

.blog-comments input[type="submit"]:hover {
    background: rgba(251,0,137, 1);
    border: 0;
}


.comment-from > h4, .comment-from > h4 a {
    color: #009ee3;
    padding-right: 1em;
}

.blog-comments > span > div > div > div > .comment-reply-to {
    color: #e5007d;
    background: url(https://cdn2.hubspot.net/hubfs/467997/img/icons/pictos-set1-21-pink.png?t=1536948317899) no-repeat 5px;
}

.blog-comments > span > div > div > div > .comment-reply-to:hover {
    color: #e5007d;
    background: url(https://cdn2.hubspot.net/hubfs/467997/img/icons/pictos-set1-21-white.png?t=1536948317899) no-repeat 5px;
    background-color: #e5007d;
    border-radius: 0;
}


.blog-comments form ::-moz-placeholder
{
    color: #888;
}


/* ==========================================================================


   36. SHARE PANEL


   ========================================================================== */

/* ==========================================================================
   Generic CSS
   ========================================================================== */
.share-panel {
    text-align: left !important;
    margin-top: -1em !important;
    font-size: 16px;
    line-height: 1em;
}

.share-panel input[type=checkbox] {
    display: none;
    visibility: hidden;
}

.share-panel input[type=text] {
    width: 65% !important;
    height: 33px !important;
    padding-bottom: 6px !important;
    display: inline-block !important;
}

.share-panel a {
    margin-right: 0.3em;
    float: left !important;
}
.share-panel img {
    vertical-align: top !important;
    width: 32px !important;
    height: 32px !important;
}

.share-panel label {
    display: inline-block;
    color: #E5007D;
    padding: 0.5em 1em 0.5em 1.8em;
}

.share-panel label:hover {
    display: inline-block;
    background: #E5007D;
    color: #FFF !important;
    padding: 0.5em 1em 0.5em 1.8em;
}


.share-panel label#share {
    background: #FFF url('https://cdn2.hubspot.net/hubfs/467997/img/icons/pictos-set1-21-pink-inverse.png?t=1536948317899') no-repeat 5px 9px;
}

.share-panel label#share:hover {
    background: #E5007D url('https://cdn2.hubspot.net/hubfs/467997/img/icons/pictos-set1-21-white-inverse.png?t=1536948317899') no-repeat 5px 9px;
}

.share-panel label#copyToClipboard {
    background: #FFF url('https://cdn2.hubspot.net/hubfs/467997/img/icons/clipboard.png?t=1536948317899') no-repeat 8px 4px;
    margin-left: 0.5em;
    height: 33px !important;
    vertical-align: top !important;
}

.share-panel label#copyToClipboard:hover {
    background: #E5007D url('https://cdn2.hubspot.net/hubfs/467997/img/icons/clipboard-white.png?t=1536948317899') no-repeat 8px 4px;
    height: 33px !important;
}


.share-panel #expand {
    height: 0px;
    overflow: hidden;
    transition: height 0.5s;
}

.share-panel #toggle:checked ~ #expand {
    height: 40px !important;
}

.reduced-spacing h3 {
    margin: 0.5em 0 0 0;
}

.reduced-spacing > a.cta_button {
    margin: 0 auto !important;
}

/* ==========================================================================
   Responsive Media Queries
   ========================================================================== */
@media (max-width:480px) {
    .share-panel #toggle:checked ~ #expand {
        height: 80px !important;
    }
}



/* ==========================================================================


   37. DYNAMIC TABS


   ========================================================================== */

/* ==========================================================================
   Generic CSS
   ========================================================================== */

.fancybox-overlay-fixed {
    /*display: table !important;*/
}

/* DYNAMIC TABS START */
.dynamic-tabs #tabs {
    /*margin: 1em;*/
}
.fancybox-overlay {
    z-index: 9998 !important;
}
.dynamic-tabs ul {
    margin: 0 !important;
    padding: 0 !important;
    display: table;
}

.dynamic-tabs ul li {
    display: inline-block;
    background: #fff;
    color: #eb509b;
    cursor: pointer;
    margin: .1em;
    float: left;
}

.dynamic-tabs ul li a {
    font-size: 13px;
    font-weight: 600;
    padding: 0.4em 1em;
    background: #FFF;
    color:  #eb509b;
    border: 2px solid #eb509b;
    display: block;
}


.dynamic-tabs ul li a:hover,.dynamic-tabs ul li a.active, .dynamic-tabs ul li.ui-state-active a {
    background: #EB509B;
    color: #FFF;
}

#tab-content {
    padding-top: 0.7em;
}

/* DYNAMIC TABS END */


/* VIDEO PANEL ITEM START */

#tab-content .video-panel-item a {
    float: left;
    padding: 0.1em;
    width: 100%;
}

#tab-content .video-panel-item img {
    width: 100% !important;
}

#tab-content .video-panel-item img:hover {
    max-width: 100%;
    height: auto;
    width: 100%;
}

#tab-content .video-panel-item img:hover
{
    opacity: .8;
}

#tab-content .video-panel-item {
    -webkit-animation: sZoom 0.4s;
    animation: sZoom 0.4s;

    -webkit-transform: scale(0,0);
    transform: scale(0,0);

    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes sZoom {
    100% {
        -webkit-transform: scale(1,1);
    }
}

@keyframes sZoom {
    100% {
        transform: scale(1,1);
    }
}


/* VIDEO PANEL ITEM END */
@media all and (max-width: 480px){
    .dynamic-tabs ul li a {
        /*line-height: 3em;*/
    }
}



@media all and (min-width: 480px){
    #tab-content .video-panel-item a {
        width: 49% !important;
    }
}

@media all and (min-width: 950px){
    /* DYNAMIC TABS START */
    .dynamic-tabs {
        max-width: 92rem;
        margin: 0 auto;
    }

    #tab-content .video-panel-item a {
        width: 33.3% !important;
    }
}


/* ==========================================================================
   Page Section Filtering
   ========================================================================== */

.page-section-filter img:hover
{
    opacity: .8;
}
.page-section-filter .filter-menu
{
    margin: 0 0 2em 0;
    padding-left: 0.3em;
}

.page-section-filter #play_button_background
{
    width: 14%;
    height: 17%;
    left: 43%;
    top: 33%;
    position: absolute;
    z-index: 1;
    background-color: rgba(229, 0, 125, 0.8);
}

.page-section-filter #play_button_playicon
{
    width: 100%;
    height: 100%;
    cursor: pointer;
    display: inline-block;
    outline: none;
    z-index: 1;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAH8AAABRCAYAAAD7G3lVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAATFJREFUeNrs22FtwkAYx+F2QcAkMAfgYBKQwBxMQh1MwiRQB+CgEoaDzkG5S1a+E5IF+n+e5D4ve3+7N0s4mgYAAAAAAAAAAAAA7jFN06cp5MavjuWsTSMzfjWWszORzPizQzmvJpMZ3xYIj28LiG8LpMeffdsCufGrn3LeTS0z/uzLFsiNbwuEx7cFxL9ugY1pZsafdSaaG78abIHc+LaA+MvbAi/+XG5Sww9L2QLtEm/+P/2oUzkfbduexc+LX51L/DdrP09fzvaZf4GVhjf7/Vv3vVFk/bfvMUhg/PoAZG+6efE9Aw+MP/oCSGZ8tz0wvtseGn9w2zPjdyaXF99n9aHx3fbA+G57aHy3PTC+N/mh8b3DD4zvtofGd9tD47vtAAAAAAAAAAAAADymiwADAOSj1JBfF8xMAAAAAElFTkSuQmCC");
    background-size: 100%;
    /*background-position: 25% 25%;*/
}

.page-section-filter img {
    max-width: 100%;
    height: auto;
    width: 100%;
}

*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.page-section-filter .controls{
    padding: 2%;
    background: #fff;
    color: #eee;
}

.page-section-filter label{
    font-weight: 300;
    margin: 0 .4em 0 0;
    color: #000;
}

.page-section-filter button{
    display: inline-block;
    padding: .5em 1em;
    background: #fff;
    border: 2px solid #EB509B;
    color: #EB509B;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    margin: .08em .3em;
    float: left;
}

.page-section-filter button.active,
.page-section-filter button:hover
    /*,.page-section-filter .hs_cos_wrapper_widget:first-of-type button:first-of-type*/
{
    background: #EB509B;
    color: #FFF;
}

.page-section-filter button:focus{
    outline: 0 none;
}

.page-section-filter button + label{
    margin-left: 1em;
}

.page-section-filter .container{
    margin: 1em 0 0 0;
    padding: 2% 0% 0;
    text-align: justify;
    -webkit-backface-visibility: hidden;
}

.page-section-filter .container:after{
    content: '';
    display: inline-block;
    width: 100%;
}

.page-section-filter .container .mix,
.page-section-filter .container .gap{
    display: inline-block;
    width: 49%;
    float: left;
}

.page-section-filter .container .mix{
    text-align: left;
    background: #03899c;
    margin-bottom: 3px;
    margin-right: 2px;
    margin-left: 1px;
    display: none;
}

.page-section-filter .container .mix:after{
    /*content: attr(data-myorder);*/
    color: white;
    font-size: 16px;
    display: inline-block;
    vertical-align: top;
    /* padding: 4% 6%;*/
    font-weight: 700;
}

.page-section-filter .container .mix:before{
    content: '';
    /*PH display: inline-block;*/
    padding-top: 60%;
}
/*



*/

.page-section-filter .container .mix,
.page-section-filter .container .gap{
    width: 99%;
}

.page-section-filter {
    padding: 0% 1% 0% 1%;
}

.page-section-filter .container {
    padding: 0;
}

/* ==========================================================================
   Responsive Media Queries
   ========================================================================== */


@media all and (min-width: 480px){
    .page-section-filter .container .mix,
    .page-section-filter .container .gap{
        width: 49%;
    }

    .page-section-filter
    {
        padding: 0% 1% 0% 5%;
    }
}

@media all and (min-width: 950px){

    .page-section-filter .container .mix,
    .page-section-filter .container .gap{
        width: 30%;
    }

    .page-section-filter
    {
        padding: 0% 1% 0% 10%;
    }
}


/* ==========================================================================


   38. HOMEPAGE VIDEO CTA


   ========================================================================== */

/* ==========================================================================
   Generic CSS
   ========================================================================== */
.playbutton-homepage:hover > .cta-message {
    color: #009ee3 !important;
}

.playbutton-homepage > .rectangle {
    border: 1px solid white;
    background-color: rgba(251,0,137,0.8) !important;
    opacity: 1 !important;
    font-size: 24px;
    color: white;
    width: 340px !important;
    line-height: 4em;
}



.playbutton-homepage > .rectangle:hover {
    background-color: rgba(251,0,137,1) !important;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

.playbutton-homepage > .triangle {
    display: none;
    border-width: 22px 0 22px 40px !important;
    left: 6px;
}
/* ==========================================================================


   39. RESPONSIVE VIDEO HEADER v2


   ========================================================================== */

/* ==========================================================================
   Generic CSS
   ========================================================================== */

.responsive-video-panel-2 { position:relative; }

.responsive-video-panel-2 video {
    position:relative;
    z-index:0;
}

.responsive-video-panel-2 .overlay {
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    width: 100%;
    margin: 0 auto;
}

.responsive-video-panel-2 h1
{
    font-weight: 600;
    font-size: 5.2em;
    color: #ffffff;
    margin-top: 1.6em;
    margin-bottom: 0;
}

.responsive-video-panel-2 p
{
    width:100%;
    font-size: 2em;
    color: #FFFFFF;
    margin: 0em 0 1.5em 0;
}


.responsive-video-panel-2 .video-button.video-button--small:after {
    content: "Watch Our Showreel";
    width:190px;
}

.responsive-video-panel-2 .video-button {
    top: 40%;
    position: relative;
    z-index: 300;
    background-image: url("//cdn2.hubspot.net/hubfs/467997/prod/img/play-button.png?t=1536948317899");
    background-repeat: no-repeat;
    background-position: left;
    width: 290px;
    height: 60px;
    padding-left:95px;
    margin: 0 auto;
    display: block;
    -webkit-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    line-height:2em;
}

.responsive-video-panel-2 .video-button:hover {
    background-image: url("//cdn2.hubspot.net/hubfs/467997/prod/img/play-button--hover.png?t=1536948317899")
}

/* ==========================================================================
   Responsive Media Queries
   ========================================================================== */




@media all and (max-width: 950px){

    .responsive-video-panel-2 h1
    {
        font-size: 2.2em;
        margin-top: 0.4em;
        margin-bottom: 0;
    }

    .responsive-video-panel-2 p
    {
        width:100%;
        font-size: 1.6em;
        margin: 0.4em 0em 1.2em 0;
        padding: 0 1em 0 1em;
    }

}

@media all and (max-width: 480px){
    .responsive-video-panel-2 h1
    {
        font-size: 1em;
        margin-top: 1%;
        margin-bottom: 0em;
    }

    .responsive-video-panel-2 p
    {
        width:100%;
        font-size: 0.8em;
        line-height: 1em;
        margin: 1% 0 3% 0;
    }

}


.slider-size{
	height:150px !important;
}


.clientbg{
	background:#fff !important
}


.clientbg .inner-wrap:hover{
	-webkit-transform: scale(1.3);
        -ms-transform: scale(1.3);
        transform: scale(1.3);
}

.single-footer{
	display:none !important
}


/*  WORK SECTION*/
.grid-list:not(.wide) .item{
    padding: 0px!important;
}

.grid-list .item{
    padding: 36% !important;
}

.footer-widgets>.wrap, .sc-mixbox, .sc-gallery, .sc-text-carousel, .grid-list, .title-group:not(.wide) .text, .sc-banner .inner-wrap, .blog-list:not(.wide), body.woocommerce.pc-mode #primary, .ajax-fullscreen .single-extend .text, .ajax-fullscreen .single-footer, .ajax-fullscreen .single-extend .item.boxed .img, .ajax-fullscreen .single-main-intro, .ajax-fullscreen .single-main-content, .ajax-fullscreen .page-links {
    max-width: 100% !important;
    width: 100% !important;
}


.filter{
	display:none !important
}
.grid-list.caption-01 .list-category a{
	display:none !important
}

.pc-mode .footer-widgets.has-copyright .wrap {
	padding-left:50px !important
}

.pc-mode .footer-widgets.has-copyright .copyright{
	left: 5.2vw !important
}


#filter_gallery_929 .pfg_img_929{
	padding: none !important
}