/****************************************************************************************
* Sitewide styles
****************************************************************************************/

/*************************************************
* Navigation Menu
*************************************************/

.tb-megamenu-item {
    font-size: unset;
}

/*************************************************
* Typography
*************************************************/

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap');

*:not(.glyphicon):not(.fa) {
    font-family: 'Source Sans Pro', sans-serif !important;
}

p, li {
    font-size: 1.2em;
}

.headline-h1 h1 {
    /* font-size: 42px; */
    font-size: 36px;
    font-weight: 600 !important;
    margin: 5px 0px 10px;
}

.headline-h2 h2 {
    /* font-size: 36px; */
    font-size: 28px;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 10px;
}

.headline-h3 h3 {
    /* font-size: 28px; */
    font-size: 24px;
    font-weight: 600!important;
    line-height: 1.5;
    margin-bottom: 10px;
}

.direct-links {
    font-weight: bold;
    font-size: .9em;
    text-transform: uppercase;
    padding-top: 20px;
    color: #2C4960;
}

.direct-description-links p {
    font-size: 1.1em;
    color: #000;
}

.icon-benefits-header {
    font-weight: bold; 
    text-transform: uppercase; 
    margin-top: 4em;
    color: #2C4960;
}

/*************************************************
* Layout
*************************************************/

.main-hero-banner {
    padding: 200px 50px;
}
    
.main-hero-container {
    color: #fff;
    text-align: center;
}
    
.main-hero-container p {
    margin-bottom: 22px;
}

.feature-content-container {
    padding: 100px 0px;
    background-size: cover;
}

.isd-content-container {
    padding: 50px 0px;
    background-size: cover;
}

.feature-content-left {
    padding-right: 50px;
}

.feature-content-right {
    padding-left: 50px;
}

.feature-color-block {
    height: 100%;
    padding: 100px;
    color: #fff;
}

.isd-color-block-container {
    background-color: #2C4960;
}

/* About Us - ISAFE's Learning Environment section */
#isd-about-us-container {
    padding: 30px 0px 100px 0px;
}

.isd-how-it-works-col {
    padding-top: 25px;   
}

/*************************************************
* Content
*************************************************/

.feature-content-container {
    padding: 100px 0px;
}

.feature-content-left {
    padding-right: 50px;
}

.feature-content-right {
    padding-left: 50px;
}

.page-description-col {
    text-align: center;
    margin: 4em 0em 3em 0em;
}

/*************************************************
* Images
*************************************************/

.feature-img {
    background: transparent;
    border-radius: 5px;
    margin-bottom: 0;
}

.feature-img img {
    border-radius: 5px;
}

.overlay { 
    opacity: .6 !important;   
}

.isd-img-left img {
    box-shadow: -2rem 2rem 0 #2C4960;
}
 
.isd-img-right img {
    box-shadow: 2rem 2rem 0 #2C4960;
}

.isd-img-left-block {
    box-shadow: -2rem 2rem 0 #192936;
}

.isd-img-right-block {
    box-shadow: 2rem 2rem 0 #192936;
}

/*************************************************
* Buttons
*************************************************/

.hero-button {
    background: #fff !important;
    margin-top: 10px;
    font-weight: bold;
    padding: 1em 2em;
    transition: all 0.5s ease-in-out;
}

.hero-button:hover {
    transition: all 0.5s ease-in-out;
    transform: scale(1.03);
}

.isafe-cta-button {
    text-align: center; 
    font-weight: bold;
    color: #2C4960 !important;
}

a.hero-button a.isafe-cta-button:hover {
    color: #2C4960 !important;
}

/*************************************************
* Icons
*************************************************/

div.overview-direct-images {
    width: 60%;
    background: transparent;
    margin-bottom: 0;
    padding-top: 25px;
}

.benefits-feature-icon {
    width: 25%;
    background: transparent;
    margin-bottom: 0;
}

/* About Us - Our Values section */
.values-icon-col {
    padding: 25px 0px;
}
    
.values-icon-img {
    width: 25%;
    background: transparent;
    margin-bottom: 0;
    padding-top: 25px;
}
    
.values-icon-header {
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 1em;
}
    
.values-icon-text {
    font-size: .8em;
}

div.overview-direct-links {
    font-weight: bold; 
    font-size: .9em;
    text-transform: uppercase; 
    padding-top: 20px;
    color: #2C4960;
}

div.overview-direct-description-links {
    padding: 10px 0px; 
    color: #405A82;
}

div.overview-direct-description-links p {
    font-size: 1.1em; 
    color:#000;
}

/* ISAFE Direct - button icon images */
div.overview-direct-images {
    width: 60%;
    background: transparent;
    margin-bottom: 0;
    padding-top: 25px;
}

.overview-direct-link-buttons {
    transition: all 0.4s ease-in-out;
    padding: 2em;
    text-align: left;
    background: rgba(0,0,0,0);
}

.overview-direct-link-buttons .btn {
    text-align: center;   
}

.overview-direct-link-buttons:hover {
    transition: all 0.4s ease-in-out;
    transform: scale(1.05);
    /* -webkit-box-shadow: 5px 5px 10px 4px rgba(145,145,145,0.21); 
    box-shadow: 5px 5px 10px 4px rgba(145,145,145,0.21);
    border-radius: 10px; */
    background: rgba(0,0,0,0);
}

.myok-icon img {
    width: 70%;
}

.learn-more-icon img {
    width: 70%;   
}

/*************************************************
* Call to Action Bottom Container
*************************************************/

.isafe-call-to-action-col {
    text-align: center;
    padding: 50px;
    color: #fff;
}

.isafe-call-to-action-col p {
    margin-bottom: 22px
}

.isd-cta-container {
    background-color: #2C4960;
}

/*************************************************
* Footer
*************************************************/

.isafe-footer {
    background-color: #474747 !important;
}

.isafe-footer a {
    color: #D0CDCD;
    text-decoration: none;
}

.isafe-footer-title {
    text-transform: uppercase;
    color: #9A9A9A;
    font-size: 1.2em;
    margin-bottom: .5em;
}

/*************************************************
* Responsive Styles
*************************************************/

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

    /*
    .webform-column {
        padding: 25px 50px 50px 50px !important;
    }
    */
    .webform-title {
        padding-bottom: 50px;
    }
    
    .direct-section-row {
        padding-top: 0;
    }
    
    .direct-content-left,
    .direct-content-right {
        width: 100%;
        padding-top: 0;
        padding-bottom: 0 !important;
    }

    .direct-content-right .row:after {
        display: none;
    }

    .direct-feature-img-col-right,
    .direct-feature-img-col-left {
        width: 100%;
        text-align: center;
        margin: 30px 0 30px 0;
        width: 100%;
        padding-left: 100px;
        padding-right: 100px;
    }
    .direct-feature-img-col-right img,
    .direct-feature-img-col-left img {
        width: 100%;
    }
    .feature-img {
        width: 100%;
    }
    .feature-img img {
        box-shadow: none;
        /* padding: 30px 0px 0px 100px; */
        border-radius: 5px;
    }
    
    /*
    .knockout-img {
        width: 100%;
        background: none; 
        display: none;
    }

    .isd-img-right-block,
    .permissionslip-img-right,
    .permissionslip-img-left,
    .mydocs-img-right,
    .mydocs-img-left,
    .role-guide-img-right,
    .role-guide-img-left,
    .my-ok-img-right,
    .my-ok-img-left,
    .dc4-img-right,
    .dc4-img-left {
        box-shadow: none;
    }
    .humanitarian-feature-img-left-block,
    .humanitarian-feature-img-right-block,
    .feature-img.humanitarian-feature-img-right img {
        box-shadow: none;
    }
    */

    /* .feature-img img {
    margin: 0px 100px;
    } */



    #aup-knockout,
    #vpc-knockout,
    #roleGuide-knockout {
      background: none;
    }

    .knockout-img {
      width: 100%;
      margin: 0 100px;
      padding: 0;
    }

    #aup-knockout {
      margin-left: 0;
      margin-right: 0;
      padding-left: 100px;
      padding-right: 100px;
      width: 100%;
    }

    #aup-knockout-inner-col {
      padding: 0;
      width: 100%;
      margin-left: 0;
    }

    #aup-knockout-img {
      box-shadow: none;
      width: 100%;
    }

    #aup-knockout-img img {
      width: 100%;
    }

    #vpc-knockout {
      margin: 0 0 30px 0;
      width: 100%;
      padding-left: 100px;
      padding-right: 100px;
    }

    #vpc-knockout-inner-col {
      width: 100%;
      margin-left: 0;
    }

    #vpc-knockout-img {
      box-shadow: none;
      width: 100%;
    }

    #vpc-knockout-img img {
      width: 100%;
    }

    #roleGuide-knockout {
      margin: 0 0 30px 0;
      width: 100%;
      padding-left: 100px;
      padding-right: 100px;
    }

    #roleGuide-knockout-inner-col {
      width: 100%;
      margin-left: 0;
      padding: 0;
    }

    #roleGuide-knockout-img {
      box-shadow: none;
      width: 100%;
      margin-bottom: 0;
    }

    #roleGuide-knockout-img img {
      width: 100%;
    }

    #dc4-knockout {
      margin: 30px 0 30px 0;
      width: 100%;
      padding-left: 100px;
      padding-right: 100px;
      background: none;
    }

    #dc4-knockout-inner-col {
      width: 100%;
      margin-left: 0;
      padding: 0;
    }

    #dc4-knockout-img {
      box-shadow: none;
      width: 100%;
      margin-bottom: 0;
    }

    #dc4-knockout-img img {
      width: 100%;
    }

    .isd-img-right-block,
    .permissionslip-img-right,
    .permissionslip-img-left,
    .mydocs-img-right,
    .mydocs-img-left,
    .role-guide-img-right,
    .role-guide-img-left,
    .my-ok-img-right,
    .my-ok-img-left,
    .dc4-img-right,
    .dc4-img-left {
        box-shadow: none;
    }
    .humanitarian-feature-img-left-block,
    .humanitarian-feature-img-right-block,
    .feature-img.humanitarian-feature-img-right img {
        box-shadow: none;
    }

    
}

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

    .div.webform-bg-gradient-container.container {
      padding: 0px 50px 25px 50px;
    }

    .webform-title {
      padding-top: 0;
    }

    .webform-title p {
      padding: 0px 50px 25px 50px;
    }

    .webform-title .headline-h1 {
      padding: 0px 50px 0px 50px;
    }

    .webform-column {
      margin: 0px 50px 25px 50px;
      padding: 25px !important;
    }

    .resellers-request-form {
        padding: 25px 50px 50px 50px;
    }

    .webform-column {
        padding: 25px 50px 50px 50px;
    }

    .direct-hero-container {
        /*padding: 175px 50px 175px 50px !important;*/
    }

    .direct-section-row {
        padding: 0px 50px 25px 50px;
    }

    .direct-icon-col {
      padding: 0px 50px 20px 50px !important;
      margin-bottom: 0;
    }

    .direct-content-left {
        padding-top: 0;
    }

    .direct-feature-img-col-right,
    .direct-feature-img-col-left {
        margin-top: 30px;
    }

    .direct-benefits-row {
        padding-top: 0;
    }

    .direct-feature-benefits-col {
        margin-bottom: 50px;
    }

    .direct-feature-benefits-col:last-of-type {
        margin-bottom: 0;
    }

    #aup-knockout,
    #vpc-knockout,
    #roleGuide-knockout
    #dc4-knockout {
      margin-left: 0;
      padding: 0;
    }

    #dc4-knockout {
      padding: 0;
    }

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

    .aup-img-right img,
    .aup-img-left img {
      box-shadow: none;
    }
    
    /*
    .knockout-img {
        display: none;
    }
    */

    .main-hero-container {
        text-align: left;
    }

    .feature-img {
        width: 100%;
    }

    .feature-img img {
        padding: 0px;
        border-radius: 10px;
        width: 100%;
        margin-bottom: 30px;
    }
    
    .isd-img-left img,
    .isd-img-right img,
    .isd-img-left-block img,
    .isd-img-right-block img {
        box-shadow: none;
    }
    
    .isd-img-right img {
        margin-top: 30px;   
    }

    .isd-img-right-block {
        box-shadow: none;
        margin-top: 30px;
    }

    .feature-img.humanitarian-feature-img-right img {
        box-shadow: none;
        margin-top: 30px;
    }

    /*
    .isd-img-right { 
        display: none;
    }
    */

    .feature-content-left,
    .feature-content-right {
        padding: 0;
    }

    .feature-color-block {
        padding: 50px 50px 30px 50px;
    }

    
    .feature-content-container {
        padding: 50px 50px 30px 50px;
    }

    /*
    .isd-content-container,
    .isd-cta-container {
        padding: 50px 50px 30px 50px !important;
    }
    */
    /*
    #isd-about-us-container {
        padding: 0px 50px 50px 50px;
    }
    */
    
    /*
    #humanitarian-container {
        padding: 50px 50px 30px 50px;
    }
    */
    footer.nd-region.footer-top.isafe-footer {
        padding: 50px 50px 30px 50px;
    }
    .footer-content-column {
        margin: 25px 0px;
    }

    .col-md-1
    .col-md-2,
    .col-md-3,
    .col-md-4, 
    .col-md-5, 
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9
    .col-md-10,
    .col-md-11,
    .col-md-12 {
        padding-left: 0;
        padding-right: 0;
    } 

    .values-icon-col {
        text-align: center;
    }

    #overview-isd-platform {
        text-align: left;
    }
    .overview-direct-link-buttons {
        text-align: center;
    }

    .isd-benefit-col {
        margin: 30px 0px;
    }

    .humanitarian-feature-img {
        margin-top: 30px;
    }
    .humanitarian-feature-img img {
        border-radius: 10px;
    }

    .humanitarian-feature-img-left-block {
        margin-bottom: 30px;
    }
    .humanitarian-feature-img-right-block {
        margin-top: 30px;
    }
    
    .humanitarian-feature-img-left-block,
    .humanitarian-feature-img-right-block {
        border-radius: 10px;
        box-shadow: none;
    }
    
    #walk-with-12-tabs-container ul.nav.nav-tabs {
        all: unset;
    }
    #walk-with-12-tabs-container .nav-tabs >li .active > a {
        border-bottom: none;
        font-weight: bold;
    }
    .walk-with-12-tab-img img {
        margin-top: 30px;
        border-radius: 10px;
        box-shadow: none;
    }

    #humanitarian-solution-container {
        text-align: left;
    }
    #humanitarian-img-tiffanys-life {
        margin-bottom: 0;
    }
    .page-description-col h2 {
        padding: 0px 50px 25px 50px;
    }
    .isd-how-it-works-col {
        padding-left: 10px;   
    }
    .isd-img-left-block {
        box-shadow: none;   
    }
  }

@media only screen and (max-width: 768px) {
  .webform-column {
    padding: 25px 50px 50px 50px;
  }

  p, li {
    font-size: 1em;
  }

  .headline-h1 h1 {
    font-size: 28px;
  }

  .headline-h2 h2 {
    font-size: 1.3em;
  }

  /*
  .container {
    padding-left: 0;
    padding-right: 0;
  }
  */

  .hero-button {
    margin-top: 0;
    margin-bottom: 1em;
  }

  .main-hero-banner {
    padding: 25px 50px 25px 50px;
  }

  .main-hero-container {
    padding: 0;
  }

  .isd-content-container {
    padding: 25px 50px 25px 50px;
  }

  .isd-cta-container {
    padding: 20px;
  }

  /*
  .container {
    padding: 0 !important;
  }
  */

  .col-md-10, .col-lg-10 {
    padding: 0 !important;
  }

  .humanitarian-frame-container {
    padding: 0;
  }

  .overview-direct-link-buttons {
    padding: 0;
  }

  .overview-direct-images {
    padding-top: 0;
  }

  /* ---------------------------------------------------------
  * ISAFE DIRECT RESPONSIVE STYLES
  --------------------------------------------------------- */
  /* Global ISAFE Direct Pages */
  .direct-hero-container {
    padding: 0;
  }

  .direct-hero-col {
    padding: 25px 50px 25px 50px;
  }

  .direct-icon-col {
    padding: 0px 50px 15px 50px;
    margin-top: .5em;
  }

  .direct-section-row {
    padding: 0px 50px 10px 50px;
  }

  .direct-content-left {
    padding-top: 0;
  }

  .direct-feature-img-col-right,
  .direct-feature-img-col-left {
    margin-top: 30px;
  }

  .direct-benefits-row {
    padding-top: 0;
  }

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

  .direct-feature-benefits-col {
    margin-bottom: 50px;
  }

  .direct-feature-benefits-col:last-of-type {
    margin-bottom: 0;
  }

  .direct-mockup-images {
    margin-bottom: 0;
  }

  .isd-direct-icon {
    width: 50%;
    padding-bottom: .5em;
  }

  .benefits-headline-h2 {
    padding: 0px 50px 0px 50px;
  }

  .benefits-headline-h2 h2 {
    padding-bottom: 1em;
    font-size: 24px;
  }

  .isafe-call-to-action-col {
    padding: 0px;
  }

  .isafe-call-to-action-col .headline-h2 {
    padding: 0px 10px;
  }
  
  /*
  .isafe-call-to-action-col h2 {
    padding: 0px 50px;
  }
  */

  .isafe-call-to-action-col .hero-button {
    margin-bottom: 1em;
  }

  .feature-img {
    box-shadow: none;
  }

  .content>ul, ul.list {
    padding-left: 20px;
  }

  .content>ul, ul.list li {
    margin: .5em 0em;
  }

  /* AUP */
  #aup-hero-container {
    linear-gradient(to right, rgba(65, 139, 194, 1), rgba(123, 201, 201, 0));
  }

  #aup-btn {
    margin-top: 0;
    margin-bottom: 1em;
  }

  #aup-knockout {
    background: none;
    margin-top: 0px;
    margin-bottom: 30px;
  }

  #aup-knockout-img {
    box-shadow: none;
    margin-bottom: 0;
  }

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

  #aup-knockout-inner-col {
    padding: 0;
    margin-right: 0;
    margin-left: 0;
  }

  /* Permission Slip */
  #permission-slip-btn {
    margin-top: 0;
    margin-bottom: 1em;
  }

  /* VPC */
  #vpc-hero-container {
    background-image: linear-gradient(to right, rgba(61, 161, 83, 1), rgba(61, 161, 83, .5));
  }

  #vpc-knockout {
    background: none;
    margin-top: 30px;
  }

  #vpc-knockout-img {
    box-shadow: none;
    margin-bottom: 0;
  }

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

  #vpc-knockout-inner-col {
    padding: 0;
    margin-right: 0;
  }

  #vpc-btn {
    margin-top: 0;
    margin-bottom: 1em;
  }

  /* MyDocs */
  #myDocs-btn {
    margin-top: 0;
    margin-bottom: 1em;
  }

  /* Role Guide */
  #roleGuide-btn {
    margin-top: 0;
    margin-bottom: 1em;
  }

  #roleGuide-knockout {
    background: none;
    margin-top: 0px;
    margin-bottom: 30px;
  }

  #roleGuide-knockout-img {
    box-shadow: none;
    margin-bottom: 0;
  }

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

  #roleGuide-knockout-inner-col {
    padding: 0;
    margin-right: 0;
    margin-left: 0;
  }

  /* DC4 */
  #dc4-hero-container {
    linear-gradient(to right, rgba(232, 172, 37, 1), rgba(232, 172, 37, 0.20));
  }

  #dc4-btn {
    margin-top: 0;
    margin-bottom: 1em;
  }

  #dc4-knockout {
    background: none;
    margin-top: 30px;
  }

  #dc4-knockout-img {
    box-shadow: none;
    margin-bottom: 0;
  }

  #dc4-knockout-img img {
    border-radius: 10px;
  }

  #dc4-knockout-inner-col {
    padding: 0;
    margin-right: 0;
  }

  /* MyOk */
  #my-ok-btn {
    margin-top: 0;
    margin-bottom: 1em;
  }

  /* ---------------------------------------------------------
  * HUMANITARIAN RESPONSIVE STYLES
  --------------------------------------------------------- */
  #walk-with-12-tabs-container .tab-pane {
    padding: 4em;
  }

  #walk-with-12-tabs-container .accordion-tab {
    background-color: #631A1A;
  }

  #walk-with-12-tabs-container .accordion-tab>li>a>.open-sub:before {
    background-color: #fff;
  }

  #walk-with-12-tabs-container .accordion-tab>li>a>.open-sub:after {
    background-color: #fff;
  }

  #walk-with-12-tabs-container .accordion-tab>li>a {
    background-color: rgba(0, 0, 0, 0);
    margin: 0;
    border-top: 1px solid #fff;
  }

  #walk-with-12-tabs-container .accordion-tab>li>a:hover {
    background-color: rgba(0, 0, 0, 0);
    border-top: 1px solid #fff;
    border-bottom: none;
  }
  #humanitarian-contact-us-btn {
    margin-left: 0;   
  }
  #humanitarian-documentary-container .feature-content-left {
    margin-top: 30px;
  }
  #humanitarian-documentary-container {
    padding: 0;   
  }
  .humanitarian-header {
    text-align: left;   
  }
  .humanitarian-header h3 {
    font-size: 1.3em;   
  }
  .humanitarian-goals-container {
    padding-bottom: 0;   
  }
  
/* ---------------------------------------------------------
* RESELLER RESPONSIVE STYLES
--------------------------------------------------------- */
  .page-description-col h2 {
    padding: 0;
  }
  .page-description-col {
    margin-top: 0;
    margin-bottom: 30px;
  }
  .reseller-benefits-section {
    margin-top: 30px;
    text-align: left;   
  }
  .reseller-benefits-section {
    margin-top: 30px;
    text-align: left;   
  }
  .reseller-icon-col {
    padding: 0 !important;
  }
  .webform-title {
     padding: 0;
  }
  .webform-title .headline-h1 {
    padding: 25px 50px 0px 50px;   
  }
  .webform-title p {
    padding: 0px 50px 25px 50px;   
  }
  .webform-column {
    margin: 0px 50px 25px 50px; 
    padding: 25px;
  }
  .resellers-request-form {
    padding: 0;   
  }
}