/*
 * Legal Disclaimer
 *
  * These web fonts are licensed exclusively for use on the following:
 * Web domains belonging to this customer.
 * U.S. Bank
 * It is strictly forbidden to download or use these fonts on any other website domain or media.
    
 *
 * While the @font-face statements below may be modified by the client, this
 * disclaimer may not be removed.
 *
 * Lineto.com, 2023
 */

/*********************************************************************************/
/* Merchant.html page styles - hero and merchant paragraph and form components   */
/*********************************************************************************/
#PageOrderableContainerMerchantPage
  .pageOrderableContainer_container
  > *:first-child {
  flex: 1 1 100%;
  max-width: 100%;
}

#PageOrderableContainerMerchantPage
  .pageOrderableContainer_container
  > *:nth-child(2),
#PageOrderableContainerMerchantPage
  .pageOrderableContainer_container
  > *:nth-child(3) {
  display: inline-block;
  vertical-align: top;
  width: 48%;
}

#PageOrderableContainerMerchantPage
  .pageOrderableContainer_container
  > *:nth-child(2) {
  padding-right: 4%;
  padding-top: 0;
  padding-bottom: 10%;
}

@media (max-width: 990px) {
  #PageOrderableContainerMerchantPage .pageOrderableContainer_container {
    display: flex;
    flex-direction: column;
  }

  #PageOrderableContainerMerchantPage
    .pageOrderableContainer_container
    > *:nth-child(2) {
    display: block;
    width: 100%;
    order: 2;
    padding-top: 2%;
    padding-bottom: 10%;
    padding-right: 0;
  }

  #PageOrderableContainerMerchantPage
    .pageOrderableContainer_container
    > *:nth-child(3) {
    display: block;
    width: 100%;
    order: 1;
    padding-bottom: 0;
  }
}

/*********************************************************************************/
/* Partner.html page styles - hero and partner paragraph and form components    */
/********************************************************************************/
#PageOrderableContainerPartnerPage
  .pageOrderableContainer_container
  > *:first-child {
  flex: 1 1 100%;
  max-width: 100%;
}

#PageOrderableContainerPartnerPage
  .pageOrderableContainer_container
  > *:nth-child(2),
#PageOrderableContainerPartnerPage
  .pageOrderableContainer_container
  > *:nth-child(3) {
  display: inline-block;
  vertical-align: top;
  width: 48%;
}

#PageOrderableContainerPartnerPage
  .pageOrderableContainer_container
  > *:nth-child(2) {
  padding-right: 4%;
  padding-top: 0;
  padding-bottom: 10%;
}

@media (max-width: 990px) {
  #PageOrderableContainerPartnerPage .pageOrderableContainer_container {
    display: flex;
    flex-direction: column;
  }

  #PageOrderableContainerPartnerPage
    .pageOrderableContainer_container
    > *:nth-child(2) {
    display: block;
    width: 100%;
    order: 2;
    padding-top: 2%;
    padding-bottom: 10%;
    padding-right: 0;
  }

  #PageOrderableContainerPartnerPage
    .pageOrderableContainer_container
    > *:nth-child(3) {
    display: block;
    width: 100%;
    order: 1;
    padding-bottom: 0;
  }
}

/*********************************************************************************/
/* there is a legal disclaimer in the FooterMenu.jsx, it is under the social media
/* icons so it takes the width of that column, the client wants it extended to the 
/* edge of the screen, but the FooterMenu is an atom and doesn't have styles at the
/* same level, because only one element needs to be styled and the width of the text
/* needs to change to be responsive, here are the widths for the different screen 
/* styles, a note will be made in the component itself
/********************************************************************************/
.legal-disclaimer {
  width: 21vw;
}

@media (max-width: 1330px) {
  .legal-disclaimer {
    width: 20vw;
  }
}

@media (max-width: 1199px) {
  .legal-disclaimer {
    width: 60vw;
  }
}

@media (max-width: 720px) {
  .legal-disclaimer {
    width: 50vw;
  }
}

@media (max-width: 479px) {
  .legal-disclaimer {
    width: 80vw;
  }
}

/*********************************************************************************/
/* The clickable text and icon for the privacy modal is located in the
/* footersitemap atom, since there is not a styles folder for the footersitemap 
/* atom the styles are added below
/********************************************************************************/
#privacy-policy-optout {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}

#privacy-policy-optout:hover {
  text-decoration: underline;
}