@charset "UTF-8";
/* CSS Document */

.header-container-wrapper {
    background-color:#000000 !important;
    padding-top:0;
}

.hs_cos_wrapper_type_simple_menu ul li {
    display:inline-block;
    padding:7px 1%;
    float:right;
    text-align:center;
    /*margin:5px;*/
    font-size:14px;
    margin-top:18px;
}

.hs_cos_wrapper_type_simple_menu a {
    text-transform:uppercase;
    color:#fff;
}
.hs_cos_wrapper_type_simple_menu a:hover {
    color:#e67e22;
    text-decoration:none !important;
    transition: all 0.3s ease 0s;
}

.addons {
    font-weight:bold;
    font-size:18px;
}

.addons ul li {
    color: #ffffff;
    line-height:1.6em;
    font-weight:normal;
    font-size:14px;
}

.list-white {
    color:#ffffff;
    text-align:center;
}
.list-white ul li {
    color:#ffffff;
}

.row-fluid .whiteform  {
width: 80%;
margin:0 auto !important;
float:none;
max-width:700px;
}

.whiteform ul.hs-error-msgs.inputs-list li {
    color: #ffffff;
}

.whiteform .hs-form fieldset {
    color: #ffffff;
}

img{max-width: 100%; height: auto;}

.gradient-dark {
    background: #333;
    background: -webkit-linear-gradient(-90deg, #000, #333); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(-90deg, #000, #333); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(-90deg, #000, #333); /* For Firefox 3.6 to 15 */
    background: linear-gradient(-90deg, #000, #333); /* Standard syntax (must be last) */
}

.hint {
text-transform: uppercase;
font-size: 12px;
text-align: center;
font-weight: 300;
}

.benefit {
    border: 1px solid #becbd2;
    border-left: 4px solid #e67e22;
    padding:15px 15px;
    text-align:center;
    min-height:70px !important;
    height:100% !important;
    font-size:16px;
    margin-bottom:20px;
    color:#fff;
}

/*the background behind each modules**/
.body-container-wrapper {
/*    background-color:red;*/
}

/**the container for the modules**/
.container-fluid {
/*    background-color:green;*/
    max-width:none;
    padding:0;
}

/* STICKY HEADER
=============================================*/
.stickyheader {
width: 100% !important;
    background-color: #333;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
	position: relative;
	position: fixed;
	top: 0;
	overflow: hidden;
	@include transition(all .5s ease);
    z-index:1000;
    padding: 0 50px;
}


/* MENU
===========================================================================================================================*/
#menu-float {
    float: right;
}

.row-fluid .menu {
   /* margin-right: -68px;*/
    position: absolute;
    right:160px;
}

.row-fluid .menu2 {
   /* margin-right: -68px;*/
    position: absolute;
    right:160px;
}

.row-fluid .pds-menu {
position: absolute;
right: 190px;
}

.pds-menu li {
    display: inline-block;
    padding: 7px 2%;
    float: right;
    text-align: center;
    font-size: 14px;
    margin-top: 5px;
    text-transform:uppercase;
}

.pds-menu li a {
    color:#fff;
    text-decoration:none;
}

.pds-menu li a:hover {
    color:#e67e22;
    text-decoration:none;
    transition: all 0.3s ease 0s;
}

/* ORANGE CTA ON MENU
===========================================================================================================================*/
.row-fluid .menu-cta{
    min-width:170px !important;
    /*position: absolute;
    right: 0;*/
    float:right;
}

.row-fluid .menu-cta2 {
    float: right;
    margin-top: 12px;
}

.row-fluid .menu-cta3 {
    float: right;
}

.menu-cta {
    margin: 0 !important;
}
.menu-cta ul li {
    background-color:#e67e22;
    border-radius:40px !important;
    padding: 7px 30px;
    /*margin-right:-80px;*/
}

.menu-cta2 ul li {
    background-color:#e67e22;
    border-radius:40px !important;
    padding: 7px 30px;
    margin-top:5px;
}

.menu-cta3 ul li {
    background-color:#e67e22;
    border-radius:40px !important;
    padding: 7px 30px;
    margin-top:5px;
}

.menu-cta ul li:hover, .menu-cta2 ul li:hover, .menu-cta3 ul li:hover {
    background-color:#d35400;
    transition: all 0.3s ease 0s;
    cursor:pointer;
}
.menu-cta a:hover, .menu-cta2 a:hover, .menu-cta3 a:hover {
    color:#ffffff;
}

/* YOUTUBE BACKGROUND VIDEO FRAME
===========================================================================================================================*/
.embed-container { 
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; 
    overflow: hidden; 
    max-width: 100%;
    /*background-color:green;*/
    min-height:650px;/*to establish a min height for smaller devices*/
    } 
.embed-container iframe, .embed-container object, .embed-container embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    pointer-events: none; 
    opacity: 0.3;  
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
    }

/* overlaying container 1024px
===========================================================================================================================*/
.center-1024  {
position: absolute;
padding: 10px 0;
top: 0px;
left: 10%;
width: 80% !important;
}

.overVideo-quote {
text-align:center;
margin-top:110px;
}

.overVideo-quote p {
color:#ffffff;
}

.client-logos  {
position: relative;
z-index: 1000;
top: -75px;
height:75px;
opacity: 0.3;
background-color:#000000;
padding: 0 40px;
text-align:center;
}

/* MODAL for YouTube NEW!!!
===========================================================================================================================*/
.playicon {
    background-image: url("//marcom.causeway.com/hubfs/campaigns/bundles/ico_play.png");
    background-repeat: none;
    width:57px;
    height:53px;
    background-color: transparent;
    border: none;
    display: inline-block;
    cursor: pointer;
}

.watchvideo {
    color: #3872dc;
    text-decoration: none;
    font-size: 14px;
    font-family: Open Sans, "Helvetica Neue", Arial, sans-serif;
    font-weight: 400;
    padding:0;
    background-color: transparent;
    border: none;
    display: inline-block;
    cursor: pointer;
}

.watchvideo:hover {
    color: #e67e22;
}

.cato-bundle-vidbtn {
    background-image: url("//marcom.causeway.com/hubfs/Causeway-Wide-Campaigns/bundles/video-CATO-bundle-8.png");
    background-repeat: none;
    max-width:418px;
    width:100%;
    height:225px;
    background-color: transparent;
    border: none;
    display: inline-block;
    cursor: pointer;
    box-shadow: 0px 5px 15px #000000;
    border:1px solid #333;
}

.estimating-bundle-vidbtn {
    background-image: url("//marcom.causeway.com/hubfs/Causeway-Wide-Campaigns/bundles/video-bundle-Estimating.png");
    background-repeat: none;
    max-width:418px;
    width:100%;
    height:225px;
    background-color: transparent;
    border: none;
    display: inline-block;
    cursor: pointer;
    box-shadow: 0px 5px 15px #000000;
    border:1px solid #333;
}

.cato-bundle-vidbtn:hover, .estimating-bundle-vidbtn:hover {
    border:1px solid #e67e22;
 
}

.cta-btn-outlineBUTTON {
font-size: 16px;
font-family: Open Sans, "Helvetica Neue", Arial, sans-serif;
font-weight:600;
border: 2px solid #e67e22;
cursor: pointer;
text-transform: uppercase;
padding: 6px 30px;
border-radius: 100px;
color: #e67e22 !important;
background-color: transparent;
transition: all 0.3s ease 0s;
text-align:center;
display:inline-block;
margin:5px 0;
min-width:240px;
display: inline-block;
cursor: pointer;
}

.cta-btn-outlineBUTTON:hover {
text-decoration:none;
background-color: #d35400;
color: #ffffff !important;
border: 2px solid #d35400;
}

.cta-btnBUTTON {
font-size: 16px;
font-family: Open Sans, "Helvetica Neue", Arial, sans-serif;
font-weight:600;
border: 2px solid #e67e22;
cursor: pointer;
text-transform: uppercase;
padding: 6px 30px;
border-radius: 100px;
color: #ffffff !important;
background-color: #e67e22;
transition: all 0.3s ease 0s;
text-align:center;
display:inline-block;
margin:5px 0;
min-width:240px;
display: inline-block;
cursor: pointer;
}

.cta-btnBUTTON:hover {
text-decoration:none;
background-color: #d35400;
color: #ffffff !important;
border: 2px solid #d35400;
}

.modal-content-new {
background-color: #000000;
margin: auto;
padding: 10px 10px 30px 10px;
width: 100%;
max-width: 853px;
}

/* MODAL for YouTube
===========================================================================================================================*/
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal2, .modal3, .modal4, .modal5, .modal6, .modal7, .modal8, .modal9, .modal10 {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}


/* Modal Content */
.modal-content {
    background-color: #000000;
    margin: auto;
    padding:10px 10px 30px 10px;
    width: 100%;
    max-width: 893px;
}

.modal-content2, .modal-content3, .modal-content4, .modal-content5, .modal-content6, .modal-content7, .modal-content8, .modal-content9, .modal-content10 {
    background-color: #000000;
    margin: auto;
    padding:10px 10px 30px 10px;
    width: 100%;
    max-width: 893px;
}

/* The Close Button */
.close  {
    color: #ebf1f4;
    float: right;
    font-size: 14px;
    font-weight: bold;
    text-transform:uppercase;
    padding:5px;
    background-color: transparent;
    border: none;
    display: inline-block;
    cursor: pointer;
}

.close:hover, .close:focus {
    color: #e67e22;
    text-decoration: none;
    cursor: pointer;
}

.close2, .close3, .close4, .close5, .close6, .close7, .close8, .close9, .close10 {
    color: #ebf1f4;
    float: right;
    font-size: 14px;
    font-weight: bold;
    text-transform:uppercase;
    padding:5px;
}

.close2:hover, .close2:focus, .close3:hover, .close3:focus, .close4:hover, .close4:focus, .close5:hover, .close5:focus, .close6:hover, .close6:focus, .close7:hover, .close7:focus, .close8:hover, .close8:focus, .close9:hover, .close9:focus, .close10:hover, .close10:focus {
    color: #e67e22;
    text-decoration: none;
    cursor: pointer;
}

#myBtn {
    cursor: pointer;
}

#myBtn2, #myBtn3, #myBtn4, #myBtn5, #myBtn6, #myBtn7, #myBtn8, #myBtn9, #myBtn10 {
    cursor: pointer;
}

#myBtn2 img, #myBtn3 img, #myBtn4 img {
    border:4px solid #ffffff;
    -webkit-filter: saturate(40%); /* Safari 6.0 - 9.0 */
    filter: saturate(40%);
}

#myBtn2 img:hover, #myBtn3 img:hover, #myBtn4 img:hover {
    border:4px solid #333333;
    -webkit-filter: saturate(100%); /* Safari 6.0 - 9.0 */
    filter: saturate(100%);
}

/************* AFTER INTRO VIDEO STYLING ***************/
.intro-bg {
    background-color:#ffffff;
    background: -webkit-linear-gradient(-45deg, #fff, #f8f8f8); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(-45deg, #fff, #f8f8f8); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(-45deg, #fff, #f8f8f8); /* For Firefox 3.6 to 15 */
    background: linear-gradient(-45deg, #fff, #f8f8f8); /* Standard syntax (must be last) */
    padding:10px 0 0 0!important;
    text-align:center;
    margin-top: -75px;
}

.intro-bg3 {
    background-color:#ffffff;
    background: -webkit-linear-gradient(-45deg, #fff, #f8f8f8); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(-45deg, #fff, #f8f8f8); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(-45deg, #fff, #f8f8f8); /* For Firefox 3.6 to 15 */
    background: linear-gradient(-45deg, #fff, #f8f8f8); /* Standard syntax (must be last) */
    padding:10px 0 0 0!important;
    text-align:center;
}

/* TABS
===========================================================================================================================*/
.tabs-bg {
    background-color:#ffffff;
    text-align:center;
    color: #333333;
}

/* DOWNLOAD FORM
===========================================================================================================================*/
.formBlock {
    background: #ebf1f4;
    padding: 10px 0 10px 40px;
    border-radius: 20px;
    color:#333333;
}

.formBlock h3 {
    color:#333333;
}


/* MISC
===========================================================================================================================*/
.grey {
    color:#333333;
}

.thirty-eight {
    color: #e67e22;
    font-size:38px;
    margin-top:35px;
    margin-bottom:0;
}

.thirty-eight-w {
    color: #ffffff;
    font-size:38px;
    margin-top:35px;
    margin-bottom:0;
}

.twenty-eight {
    font-size:28px;
    color:#e67e22;
    line-height:1.2em;
    margin-bottom:5px !important;
    padding:30px 0;
}

.eighteen {
    font-size:18px;
    line-height:1.3em;
}

.eighteen-w {
    font-size:18px;
    color:#ffffff;
    line-height:1.3em;
}

.eighteen-b {
    font-size:18px;
    color:#333333;
    font-weight:bold;
    line-height:1.3em;
    padding-bottom:10px !important;
}

.eighteen-i {
    font-size:18px;
    color:#333333;
    font-style:italic;
    line-height:1.3em;
    }

.bg1 {
    background-image: url(//marcom.causeway.com/hubfs/Causeway-Wide-Campaigns/bundles/img-london-view.jpg); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; background-color: #333333;
    color:#ffffff;
}

.center {
    margin:0 auto !important;
    padding:0 40px 40px 40px;
    max-width:1104px;
    float: none !important;
}

.centerHEADnoshad p {
    font-size: 42px;
    color: #ffffff;
    text-align:center;
}

.row-fluid .center-div  {
width: 80%;
margin:0 auto !important;
float:none;
max-width:1280px;
}

.row-fluid .center-div50  {
width: 50%;
margin:0 auto !important;
float:none;
}

#features {
    background-color:#ebf1f4; 
    padding:0 40px 40px 40px;
}

.row-fluid .iso-features {
padding: 20px;
max-width: 1700px;
width: 100%;
margin: 0 auto !important;
float: none !important;
}

/* SMALLER SCREENS
===========================================================================================================================*/
@media only screen and (max-width: 1243px) {
    .embed-container { 
     background-color:#000000;
     min-height: 750px;
    }
    .overVideo-quote {
    margin-top:70px;
    } 
        .row-fluid .center-div50  {
width: 100% !important;
}
}

/**** ipad landscape is at 1024****/
@media only screen and (max-width: 1101px) {
    .embed-container { 
      background-color:#000000;
    }
    .quo1 {
    font-size:24px !important;
    }
        .row-fluid .center-div50  {
width: 100% !important;
}
.marginR {
    margin-right:90px;
}
        .row-fluid .center-div50  {
width: 100% !important;
}
}

/**** iPads (portrait) ****/
@media only screen and (max-width: 768px) {
    .embed-container { 
     background-color:#000000;
    }
    #menu-float {
    width:100%;
    height:50px;
    border-top:1px solid #ebf1f4;
    border-bottom:1px solid #ebf1f4;
    }
    .row-fluid .menu {
        width:100%;
    top:60px;
    right:325px;
    }
        .row-fluid .menu2 {
        width:100%;
   top: 55px;
right: 280px;
    }
    .row-fluid .menu-cta {
        margin-top: -11px !important;
        right: 80px;
}
    .row-fluid .menu-cta2 {
        margin-top: -14px !important;
        right: 80px;
}
    .row-fluid .center-div50  {
width: 100% !important;
text-align:left !important;
}
.marginR {
    margin-right:0;
}

}

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

    .row-fluid .menu {
top: 75px;
right: 305px;
    }
    
    .row-fluid .menu2 {
top: 70px;
right: 255px;
    }
    
.centerHEADnoshad {
    margin-top:60px;
}

.row-fluid .pds-menu {
    width: 100%;
    left: -370px;
    top: 50px;
}

.row-fluid .menu-cta3 {
    margin-top: -20px;
    margin-bottom: 20px;
}

}

@media only screen and (max-width: 696px) {
        .embed-container { 
        background-color:#000000;
        margin-bottom:50px;/** after removing client logos**/
        min-height:700px;
    }
    #muteYouTubeVideoPlayer {
        display:none;
    }
        .hs_cos_wrapper_type_simple_menu ul li {
    display:none;
    }
        #menu-float {
            display:none;
        }
    .overVideo-quote {
    margin-top:40px;
    }    
        .client-logos {
        display:none !important;
    }
        .row-fluid .center-div50  {
width: 100% !important;
text-align:left !important;
}
.show {
    width:100% !important;
}
.centerHEADnoshad p {
    font-size:200%;
}

}

@media only screen and (max-width: 667px) { 
.row-fluid .pds-menu {
left: -20px;
top: 35px;
}

.row-fluid .menu-cta3 {
    display:none;
}
}

@media only screen and (max-width: 414px) { 
.row-fluid .pds-menu {
left: -80px;
top: 35px;
}
.headline h1 {
    font-size:200% !important;
}
h1 {
    font-size:170% !important;
}
}

@media only screen and (max-width: 378px) {  
    .embed-container { 
        min-height:800px !important;
    }
}

/**** smartphones ****/
@media only screen and (max-width: 360px) {  
    .embed-container { 
        background-color:#000000;
        margin-bottom:50px;/** after removing client logos**/
    }
    
    .hs_cos_wrapper_type_simple_menu ul li {
    display:none;
    }
            #menu-float {
            display:none;
        }
    .overVideo-quote {
    margin-top:40px;
    } 
    .client-logos {
        display:none !important;
    }
    .row-fluid .center-div50  {
width: 100% !important;
}
.row-fluid .pds-menu {
left: -35px;
}
}

@media only screen and (max-width: 320px) { 
.row-fluid .nav {
display:none;
}
.row-fluid .logo {
margin-left:20px !important;
}
}