/**
 * If using a CSS pre-processor, tell it to overwrite this file. If not, place
 * your custom CSS modifications for asc_public here.
 */

.main-container {
    background-color: #fffff !important;
    width: 80%;
}

body {
    font-family: 'HK Grotesk';
    font-style: normal;
    font-weight: normal;
    font-size: 20px; !important;
    line-height: 1.5;
    color: #666;
    background-color: #fff;
    font-weight: 200;
    margin-top: 0px;
}
.label {
    color: #666;
}

.topnav {
    font-size: 1.25rem;
    color: #333;
    font-weight: 500;
}
.topnav a {
	color: #333;
}

.navbar-default {
    background-color: #6BD9DE;
    width: 100%;
    padding-top: 0.4em;
    padding-bottom: 0.14em;
    text-align: right;
    padding-right: 10%;
    color: #333;
}

.navbar-header {
    text-align: right;
    padding-right: 10%;
    font-size: 20px;
    color: #666;
    font-weight: 500;
}
.navbar-header {
    float: left;
}
.navbar-btn {
    margin-top: 8px;
    margin-bottom: 18px;
    margin-right: 18px;
}

.navbar-header a {
    color: #333 !important;
}

.navbar-header  a:hover {
    color: #302c84;
    text-decoration: none !important;
}
.page-header {
    padding-bottom: 9px;
    margin: 40px 0 20px;
    border-bottom: 0px solid #eeeeee;
    text-align: left;
    font-family: 'montserrat';
    font-weight: bold;
    text-transform: uppercase;
    color: #333;
    font-weight: 700;
}
.region-header {
      background-color: #ffffff;
      width: 100%;
}
.region-content {
      background-color: #ffffff;
      width: 100%;
      padding-left: 2%;
      padding-left: 2%;
      padding-right: 2%;
}
.region-navigation {
      text-decoration: none;
      color: #fff;
}
.intro_text {
    font-size: 20px !important; 
}

.contextual-region {
      padding-top: 2.9em;
      padding-left: 7%;
      color: #333;
      font-size: 20px;
      font-weight: 500;
}
.contextual-region a {
      text-decoration: none;
}
.contextual-region a:hover {
      text-decoration: none;
}
.contextual {
    position: absolute;
    z-index: 500;
    top: 6px;
    right: 0;
}
.first last {
    text-align: right;
}
.navbar.container,
.navbar.container-fluid {
  margin-top: 0px;
}
.navbar-default {
  font-size: 20px;
}
.navbar-nav > li {
    float: left;
    background-color: #fff;
    
}
.nav > li {
    padding-top: 50px;
}
.nav > li > a {
    position: relative;
    display: block;
    padding: 10px 15px;
}
.nav > li > a:hover, .nav > li > a:focus {
     color: #6bd9de;
     background-color: transparent;
}

a {
    color: #333;
    text-decoration: none;
}
a {
    background-color: transparent;
}
a:hover {
	color: #302c84;
         text-decoration: none;
         background-color: #transparent;
}
form li.token-input-token {
    background-color: #6BD9DE;
}
.btn-primary {
    color: #fff;
    background-color: #6BD9DE;
    border-color: #fff;
}
#crm-container.crm-public input[type="text"] {
   border-radius: 25px;
   border: 3px solid #6BD9DE;
   box-sizing: border-box;
   height: 3.0em;
   width: 100%;
}  
@media (min-width: 768px) { /* Adjust breakpoint as needed */
    #crm-container.crm-public input[type="text"],
    #crm-container.crm-public select,
    #crm-container.crm-public .select2-container .select2-choice {
        width: 40%; /* Set width back to 40% for larger screens */
    }
}

#crm-container textarea {
   border-radius: 25px;
   border: 3px solid #6BD9DE;
   box-sizing: border-box;
   height: 9.0em;
   width: 100%;
}
@media (min-width: 768px) { /* Adjust breakpoint as needed */
    #crm-container textarea {
        width: 60%; /* Set width back to 60% for larger screens */
    }
}

#crm-container.crm-public .price-field-amount {
  font-size: 1.125rem;
  width: 20%;
}
.crm-public-form-item crm-section intro_text-section {
   font-size: 1.125rem !important;
}

.crm-container.crm-public .select2-container .select2-choice {
   border-radius: 25px;
   border: 3px solid #6BD9DE;
   box-sizing: border-box;
   height: 3.0em;
   min-width: 100%;
   width: 100%;
}
@media (max-width: 768px) { /* Adjust breakpoint as needed */
    .crm-container.crm-public .select2-container .select2-choice {
        width: 100%; /* Set width to 100% for smaller screens */
    }
}

.crm-container a, .crm-container a:link, .crm-container a:visited {
    color: #6BD9DE;
    text-decoration: none;
}
.crm-container a:hover {
   color: #302c84;
   text-decoration: none;
}

/* DONATE NOW */
/* Rectangle 120 */

.rectangle-120 {
width: 223px;
height: 74px;
left: 489px;
top: 202px;
background: #F02C3C;
border-radius: 0px 15px; }


.rectangle-120-font {
position: absolute;
width: 132px;
height: 24px;
left: 1163px;
top: 61px;
font-family: HK Grotesk;
font-style: normal;
font-weight: bold;
font-size: 20px;
line-height: 24px;
/* identical to box height */
color: #FFFFFF; }


/* DONATE MONTHLY BUTTON */
/* Rectangle 121 */

.rectangle-121 {
width: 223px;
height: 74px;
left: 729px;
top: 202px;
background: #DDF5F5;
border-radius: 15px 0px;
margin-bottom: 45px; }

.rectangle-121-font {
position: absolute;
width: 132px;
height: 24px;
left: 1163px;
top: 61px;
font-family: HK Grotesk;
font-style: normal;
font-weight: bold;
font-size: 20px;
line-height: 24px;
/* identical to box height */
color: #FFFFFF; }

/* PAY NOW BUTTON */
.crm-container .crm-button {
    text-shadow: 0 1px 0 black;
    background: #6BD9DE !important;
    color: #000000 !important;
    font-family: 'montserrat';
    font-size: 3.25rem !important;
    font-weight: 900 !important;
    margin: 0 6px 0 0;
    padding: 22px !important;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid #6BD9DE !important;
    display: inline-block;
    line-height: 115%;
    border-radius: 25px !important;
    text-transform: uppercase !important;
    width: 100%; /* Make 75% of page width */
    margin-bottom: 20px;
    transition: background-color 0.3s, color 0.3s; /* Smooth transition */
}
@media (min-width: 768px) { /* Adjust breakpoint as needed */
    .crm-container .crm-button {
        width: 75%; /* Set width back to 75% for larger screens */
    }
}
.crm-container .crm-button:hover {
    background: #302c84 !important; /* Hover button color */
    color: #ffffff !important; /* Hover font color */
}

.crm-i.fa-check {
    display: none;
}

/* footer */
.footer {
    margin-top: 45px;
    padding-top: 35px;
    padding-bottom: 36px;
    border-top: 1px solid #E5E5E5;
    background-color: #6BD9DE;
    text-align: center;
}
.footer a {
	color: #666;
        text-decoration: none;
}
.footer a:hover {
	color: #302c84;
        text-decoration: none;
}

.thankyou-video-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
}

.thankyou-video-placeholder object {
    display: inline-flex;
    max-width: none; /* Keeps the video at its natural size */
    margin-top: 20px;
    margin-bottom: 20px;
}