/****************************************************************************************
* Direct CSS Styles
****************************************************************************************/

/*************************************************
* Hero banners
*************************************************/

.direct-hero-frame {
	border-bottom: none;
	padding: 0;
}

.direct-hero-container {
    width: 100% !important;
    margin: 0;
    padding: 175px 50px;
}

.direct-hero-col {
	color: #fff; 
	padding: 0px 50px;
}

.benefits-headline-h2 h2 {
    padding-bottom: 25px; 
    text-align: center;
    font-size: 28px;
    font-weight: 600 !important;
    line-height: 1.5;
    margin-bottom: 10px;
}

/*************************************************
* Mockup images
*************************************************/

.direct-mockup-images {
    background-color: transparent;
}

.direct-secondary-headline-row {
    text-align: center; 
}

.direct-icon-col {
    text-align: center;
    margin: 2em 0em 3em 0em;
}

.isd-direct-icon {
    width: 20%;
    margin-bottom: 0;
    background: transparent;
}

/*************************************************
* ISD Product Pages Layout
*************************************************/

.direct-main-content-frame {
    background-size: cover;
}

.direct-section-row {
    padding: 40px 0px;
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.direct-content-left {
    padding: 30px 100px 0px 100px;
}

.direct-content-right {
    padding: 30px 100px 0px 100px;
} 

.direct-feature-img-col-right {
    padding: 0px 100px 0px 0px;
}

.direct-feature-img-col-left {
    padding: 0px 0px 0px 100px;
}

/*************************************************
* Benefits Section
*************************************************/

.direct-benefits-header {
    text-align: center;
}

.direct-benefits-row {
    padding-top: 25px;
    padding-bottom: 4em;   
}

.direct-feature-benefits-row {
    padding: 25px 100px 0px 100px;   
}

.direct-feature-benefits-col {
    text-align: center;
}

.featured-benefit {
    font-weight: 600; 
    text-transform: uppercase; 
    text-align: center;
    margin-top: 1em;
}

.featured-benefit-description p {
    font-size: .9em;
    padding: 10px;
}



/****************************************************************************************
* Direct AUP Styles
****************************************************************************************/

/* Gradient color overlay */
#aup-hero-container {
    background-image: linear-gradient(to right, rgba(65,139,194,1), rgba(123,201,201,0));
}

#aup-cta-frame-container {
    background-color: #418BC2;   
}

#aup-btn {
    color: #418BC2;
}

#aup-knockout {
    background: linear-gradient(90deg, rgba(65,139,194,1) 83%, rgba(0,0,0,0) 30%); 
    height: 100%; 
    text-align: center;
}

#aup-knockout-inner-col {
    padding-top: 75px; 
    margin-left: 100px;
}

#aup-knockout-img {
    box-shadow: -2rem 2rem 0 #1F445B; 
    border-radius: 5px;
}

#aup-knockout-img img {
    border-radius: 5px;
}

#direct-aup-number {
    color: #418BC2;   
}

.aup-img-right img {
    box-shadow: 2rem 2rem 0 #418BC2;
}

#aup-mockup-img {
    margin-bottom: 10px;
}



/****************************************************************************************
* Direct Permission Slip Styles
****************************************************************************************/

/* Gradient color overlay */
#permission-slip-hero-container{
    background-image: linear-gradient(to right, rgba(226,66,66,1), rgba(244,180,171,0));
}

#permissionSlip-cta-frame-container {
    background-color: #E55151;   
}

#permission-slip-btn {
    color: #E55151;
}

#permission-slip-block-feature-col {
    background-color: #E55151;
}

.permissionslip-img-left {
    box-shadow: -2rem 2rem 0 #E55151;
}

.permissionslip-img-right {
    box-shadow: 2rem 2rem 0 #E55151;
}

#permissionslip-mockup-img {
    margin-bottom: 10px;
}


/****************************************************************************************
* Direct VPC Styles
****************************************************************************************/

/* Gradient color overlay */
#vpc-hero-container {
	background-image: linear-gradient(to right, rgba(61,161,83,1), rgba(65,139,194,0));
}

#vpc-btn {
    color: #3DA153;
}

#vpc-knockout {
    background: linear-gradient(90deg, rgba(0,0,0,0) 30%, rgba(61,161,83,1) 30%);
    height: 100%; 
    text-align: center;
}

#vpc-knockout-inner-col {
    padding-top: 75px; 
    margin-right: 100px;
}

#vpc-knockout-img {
    box-shadow: 2rem 2rem 0 #2f773c; 
    border-radius: 5px;
}

#vpc-knockout-img img {
    border-radius: 5px;
}

#vpc-benefits-row {
    padding-top: 75px;
}

.vpc-img-left img {
    box-shadow: -2rem 2rem 0 #3DA153;
}

#vpc-cta-frame-container {
    background-color: #3DA153;
}

#vpc-mockup-img {
    margin-bottom: 15px;
}


/****************************************************************************************
* Direct MyDocs Styles
****************************************************************************************/

/* Gradient color overlay */
#myDocs-hero-container {
    background-image: linear-gradient(to right, rgba(240,132,40,.93), rgba(232,172,37,0));
}

#myDocs-cta-frame-container {
    background-color: #F08428;   
}

#myDocs-btn {
    color: #F08428;
}

#myDocs-benefits-row {
    padding: 25px 0px 10px 0px;
}

#mydocs-mockup-img {
    margin-bottom: 10px;
}

.mydocs-img-right {
    box-shadow: 2rem 2rem 0 #F08428;
}

.mydocs-img-left {
    box-shadow: -2rem 2rem 0 #F08428;
}


/****************************************************************************************
* Direct Role Guide Styles
****************************************************************************************/

/* Gradient color overlay */
#roleGuide-hero-container {
    background-image: linear-gradient(to right, rgba(85,73,142,1), rgba(200,94,181,0));
}

#roleGuide-cta-frame-container {
    background-color: #55498e;   
}

#roleGuide-btn {
    color: #55498e;
}

#roleGuide-knockout-img {
    box-shadow: -2rem 2rem 0 #786bce;
    border-radius: 5px;
}

#roleGuide-knockout-img img {
    border-radius: 5px;
}

#roleGuide-knockout-inner-col {
    padding-top: 75px; 
    margin-left: 100px;
}

#roleGuide-knockout {
    background: linear-gradient(90deg, rgba(85,73,142,1) 83%, rgba(0,0,0,0) 30%); 
    height: 100%; 
    text-align: center;
}

#roleguide-mockup-img {
    margin-bottom: 10px;
}

.role-guide-img-right {
    box-shadow: 2rem 2rem 0 #55498e;
}

.role-guide-img-left {
    box-shadow: -2rem 2rem 0 #55498e;
}


/****************************************************************************************
* Direct MyOk Styles
****************************************************************************************/

/* Gradient color overlay */
#myOk-hero-container {
    background-image: linear-gradient(to right, rgba(35,116,165,1), rgba(35,116,165,0));
}

#my-ok-cta-frame-container {
    background-color: #2374a5;   
}

#myOk-cta-button {
	color: #2374a5;
}

#my-ok-btn {
    color: #2374a5;
}

#my-ok-hero-container {
    background-image: linear-gradient(to right, rgba(25,81,116,.93), rgba(35,116,165,0.20));
}

.my-ok-img-right {
    box-shadow: 2rem 2rem 0 #2374a5;
}

.my-ok-img-left {
    box-shadow: -2rem 2rem 0 #2374a5;
}


/****************************************************************************************
* Direct DC4 Styles
****************************************************************************************/

/* Gradient color overlay */
#dc4-hero-container {
    background-image: linear-gradient(to right, rgba(232,172,37,.93), rgba(232,123,37,0.20));
}

#dc4-cta-frame-container {
    background-color: #efb118;   
}

#dc4-btn {
    color: #efb118;
}

#dc4-knockout {
    background: linear-gradient(90deg, rgba(0,0,0,0) 30%, rgba(239,177,24,1) 30%);
    height: 100%;
    text-align: center;
}

#dc4-knockout-img {
    box-shadow: 2rem 2rem 0 #af7f14;
    border-radius: 5px;
}

#dc4-knockout-inner-col {
    padding-top: 75px; 
    margin-right: 100px;
}

.dc4-row {
    padding: 75px 0px;
}

#dc4-benefits-row {
    padding-top: 100px;
}

#dc4-mockup-img {
    margin-bottom: 15px;
}

.dc4-img-right {
    box-shadow: 2rem 2rem 0 #efb118;
}

.dc4-img-left {
    box-shadow: -2rem 2rem 0 #efb118;
}

/****************************************************************************************
* Top-level ISD Page Styles
****************************************************************************************/

/* Benefits of ISD section */
.benefits-of-isd-row {
    text-align: center;
    padding-bottom: 50px;
}

#benefits-of-isd-header {
    padding: 25px 0px;
    text-align: center;
}

/* Benefits of ISD icons */
.isd-benefit-icon {
    background: transparent; 
    margin-bottom: 0; 
    padding-top: 25px;
}

.isd-benefit-header {
    font-weight: bold; 
    text-transform: uppercase; 
    margin-top: 3em;
}

#isd-benefit-eliminate-costs {
    width: 14%;
}

#isd-benefit-identity-verification,
#isd-benefit-reduce-storage-costs,
#isd-benefit-disseminate-forms {
    width: 33%;
}

#isd-benefit-interactive-content {
    width: 37%;
}

#isd-benefit-decrease-paper {
    width: 25%;
}