.push--right    { margin-right: 28px!important; }


#overlay {
        display: none;
    }

 #donate_now_button {
	 font: 1.125em/1.5555555556 sans-serif;
 }


 #myDialog {
	 font: 1.125em/1.5555555556 liberation serif;
 }
    #nandri_font {
        font-family: 'MuseoModerno', cursive;
    }

    #charity_text {
       /* color: #00857e;*/
    }

    #fundraising_box_2 {
        display: none;
    }

    #read_more {
        width: 60%;
        color: #222222;
        background-color: white;
        font-weight: bold;
        border: 2px solid grey;
        padding:  5px;
    }

    #read_more:hover, #read_more:focus {
        border: 2px dashed grey;
        font-weight: 600;
    }

    #donate_now_button {
        width: 100%;
        background-color: #ff3333;
        border-color:  #ff3333;
        padding:  5px;
    }

    #donate_now_button:hover, #donate_now_button:focus {
        background-color: white;
        color: #ff3333;
	border: 2px solid #ff3333;
    }

    .donation_dialog {
        border-radius: 6px;
    }

    #reminder_to_donate_form, #donate_cta_feedback_form {
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
        transition: 0.3s;
        border-radius: 6px;
        position: absolute;
        z-index: 100000;
        left: 0;
        right: 0;
        margin: auto auto;
        display: none;
    }

    @media only screen and (min-width: 1300px) {
        /*.donation_dialog {
            width: 70%;
            max-width: 800px;
        }*/
    }
    
    
    @media only screen and (max-width: 570px) {
        #donate_request > .text--right, #donate_request > .text--left {
            text-align: center !important;
        }
        #fundraising_box {
            display: none;
        }

        #fundraising_box_2 {
            display: block;
            text-align: center;
        }
        #donate_div {
            padding-left: 0px !important;
        }
        #donate_now_button{
            width: 70%;
        }
    }

    @media only screen and (max-width: 1024px) {
        #honeycomb {
            display: none !important;
        }
         div#thank_you::before {
            /*background: url("/honeycomb.png");
            background-repeat: no-repeat;
            background-size: cover !important;
            position: absolute;
            top: 7%;
            right: 0px;
            bottom: 0px;
            left: 0px;
            z-index: -1;
            content: "";
            opacity: 20%;
            height: 55%;*/


        }

        #main_box, #request_box {
            padding: 5px 25px 0px 0px;
        }

        #fundraising {
            width: 50%;
        }

        #fundraising_box {
            display: none;
        }

        #fundraising_box_2 {
            display: block;
            text-align: center;
        }

    }

    @media only screen and (min-width: 1025px) {
        #honeycomb {
            display: none !important;
        }
         div#thank_you::before {
          /*  position: absolute;
            top: 7%;
            right: 0px;
            bottom: 0px;
            z-index: -1;
            content: "";
            opacity: 70%;
            height: 55%;
            width: 60%;*/
    }

        #fundraising {
            width: 80%;
            max-width: 300px;
            height: 110px;
            padding-top: 30px;
            float: right;
        }

        #donate_div{
            padding-left: 0px !important;
        }

        #donate_now_button {
            width:  70%;
           /* float: right;*/
        }

        #read_more {
            width:  60%;
        }

    }

    @media only screen and (min-width: 1024px) and (max-width: 1100px) {
         .thank_you_text_div {
            margin-top: 5px;
            width: 50%;
        }
    }

    @media only screen and (min-width: 1100px) and (max-width: 1320px){
         .thank_you_text_div {
            margin-top: 9.5px;
            width: 40%;
        }
    }

    @media only screen and (min-width: 1320px){
         .thank_you_text_div {
            margin-top: 9.5px;
            width: 35%;
        }
    }

    @media only screen and (max-width: 570px) {
        #honeycomb {
            display: none !important;
        }
         div#thank_you::before {

        }

        .donation_dialog{
            /*width: 80% !important;*/
        }
    }

    @media only screen and (min-width: 570px) {
        .donation_dialog{
           /* width: 70% !important;
            margin-top: -20px;*/
            
        }

    }

    @media only screen and (min-width: 1024px) {
        #reminder_to_donate_form, #donate_cta_feedback_form {
            width: 30%;
            max-width: 800px;
        }
    }

    @media only screen and (max-width: 1024px) {
        #reminder_to_donate_form, #donate_cta_feedback_form {
            width: 50%;
        }
    }

    @media only screen and (max-width: 720px) and (min-width: 570px){
        #reminder_to_donate_form, #donate_cta_feedback_form {
            width: 80%;
        }
        .thank_you_text_div {
            width: 60%;
            margin-top: -3px;
        }
        /*.logo_div {
            width: 40%;
            margin-top: -5px;
        }*/

    }

    @media only screen and (min-width: 720px) and (max-width: 1024px) {
        
        .thank_you_text_div {
            width: 45%;
        }
    }

    @media only screen and (max-width: 570px) {
        #reminder_to_donate_form, #donate_cta_feedback_form {
            width: 90%;
        }
    }

    #reminder_to_donate_form:hover, #donate_cta_feedback_form:hover {
      box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    }

    #reminder_form_controller, #close_donate_cta_pop_up, #donate_cta_feedback {
        border: none;
        background-color: white;
        font-size: 14px;
        color: #505050;
    }

    #close_donate_cta_pop_up {
        color: #505050;
        cursor: pointer;
	margin-left: 28px;
    }
    #remind_me:hover, #close_donate_cta_pop_up:hover {
        border:  2px dashed;
        padding: 2px ;
    }

    #donate_cta_feedback:hover {
        font-weight: bold;
         text-decoration: underline;
         cursor: pointer;
    }

    #donate_cta_feedback {
    }

    #donate_cta_pop_up {
        display: none;
    }

    #overlay {
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0,0,0,0.5);
      z-index: 2000;
      cursor: pointer;
    }

    .donate_cta__header__nav{
        background: #333333;
        overflow: hidden;
        height: 46px;
        position: absolute;
        right: 0;
        left: 0;
        top: 0%;
        z-index: 30000;
        border-radius: 1.2%;
    }

    #top_banner_text {
        /*padding: 10px;*/
        color: #fff;
    }
    #honeycomb {
        padding-top: 37px;
    }
    #thank_you {
        padding-top: 45px;
    }

    .donate_cta_buttons {
        background-color: #007fad !important;
        border: 2px solid #007fad !important;
    }

  /* Hide scrollbar for Chrome, Safari and Opera */
  #myDialog::-webkit-scrollbar, #myDialog1::-webkit-scrollbar, #myDialog2::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar for IE, Edge and Firefox */
  #myDialog, #myDialog1, #myDialog2 {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
  #myDialog {
    background-color: #fefaf9;
    border-radius: 6px;
    z-index: 10000;
    height: 75%;
    max-height: 550px;
    autoFocus: false;
    margin:  110px auto auto auto;
    border: none;
  }

  #myDialog1, #myDialog2 {
    background-color: #edfbfb;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 6px;
    position: absolute;
    z-index: 100000;
    left: 0;
    right: 0;
    margin: 110px auto auto auto;
  }
  
  @media only screen and (min-width: 1300px) {
        #myDialog{
            width: 70%;
            max-width: 600px;
            margin-top: 110px;
            height: 65%;
            max-height: 600px;
        }

        #myDialog1, #myDialog2 {
          width: 30%;
          max-width: 600px;
        }
    }

    @media only screen and (max-width: 1024px) {
        #myDialog1, #myDialog2 {
            width: 50%;

        }
        #myDialog {
          max-height: 650px;
        }
    }

    @media only screen and (min-width: 570px) and (max-width: 720px) {
        #myDialog1, #myDialog2 {
            width: 80%;
        }
    }

    @media only screen and (max-width: 570px) {
      #myDialog{
            width: 80% !important;
            margin-top: 150px;
            max-height: 750px;
        }

        #myDialog1, #myDialog2 {
            width: 90%;
            margin-top: 150px;
        }
    }

    @media only screen and (min-width: 570px) {
      /*  #myDialog{
            width: 70% !important;
	    max-width: 700px;
            
        }*/

    }

    .text--center {
	    text-align: center !important;
    }

    @media only screen and (min-width:1200px){
	    .desk-wide-one-half {
		    width: 50%;
	    }

	    .desk-wide-three-quarters {
		    width: 75%;
	    }

	    .desk-wide-one-quarter {
		    width: 25%;
	    }

	    .desk-wide-one-whole {
		    width: 100%;
	    }
	    .desk-wide-one-third {
		    width: 33.333%;
	    }

	    .desk-wide-two-thirds {
		    width: 66.666%;
	    }
	    .desk-float--right {
		    float: right !important;
	    }
    }

    @media only screen and (min-width: 1024px) and (max-width: 1199px) {
            .desk-two-thirds {
		    width:66.666%;
	    }
	    .desk-one-third {
		    width:33.333%;
	    }
	    .desk-three-quarters {
		    width: 75%;
	    }
	    .desk-one-quarter {
		    width: 25%;
	    }
	    #app_thankyou {
		    width: 75%;
	    }

	    .desk-one-whole {
		    width: 100%;
	    }
	    .desk-one-half {
		    width: 50%;
	    }
	    .desk-float--right {
		    float: right !important;
	    }
    }

    @media only screen and (min-width: 481px) and (max-width: 1023px) {
	    .lap-one-whole {
		    width: 100%;
	    }
	    .lap-one-half {
		    width: 50%;
	    }
	    #donate_div {
		    padding-left: 0px !important;
	    }
	    #donate_now_button{
		    width:80% !important;
	    }
    }

    @media only screen and (max-width: 480px){
	    .palm-one-whole {
		    width: 100%;
	    }

	    #remind_me {
		    margin-left: 0 !important;
	    }

	    .palm-push-half--bottom {
		    padding-bottom: 14px !important;
	    }
    }


    .grid {
	    overflow: hidden;
	    margin-left: -28px;
	    list-style: none;
	    margin-bottom:0;
    }

    .grid__item {
	    display:block;
	    float: left;
	    padding-left: 28px;
	    vertical-align: top;
    }

 
    .weight--semibold {
    font-weight: 600 !important;
}

.float--right {
	float: right !important;
}

.button {
	    color: #fff;
    border: 2px solid #ff3333;
    border-radius: 4px;
    padding-left: 0.5em;
    padding-right: 0.5em;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}



.hard--left     { padding-left:  0!important; }
.push--left     { margin-left:  28px!important; }



.btn {
  background: #ff3333;
  border: 2px solid #ff3333;
  color: #fff;
  text-align: center;
  font-weight: normal;
  padding-left: 1.25em;
  padding-right: 1.25em;
  line-height: 2.5;
  margin-bottom:  0.5em;
  transition: 0.15s ease-in-out;
  border-radius: 4px;
  }
  .btn:focus, .btn:hover {
    color: #ff3333;
    background: #fff;
    text-decoration: none;
  }
  .btn:active {
    text-decoration: none;
    transform: translate(0, 0.222222em);
  }

#text {
	margin-top: -28px;
}

#help {
	color: #ff3333;
}



  /**
   * Small
   *
   * Just turns down the font size and lets the line-height change the verticals
   */
  .btn--small { font-size: 14px; }

  .btn{
    display:inline-block;       /* [1] */
    vertical-align:middle;      /* [2] */
    white-space:nowrap;         /* [3] */
    font-family:inherit;        /* [4] */
    font-size:100%;             /* [4] */
    cursor:pointer;             /* [5] */
    border:none;                /* [6] */
    margin:0;                   /* [6] */
    padding-top:   0;           /* [6] */
    padding-bottom:0;           /* [6] */
    line-height:3;              /* [7] */
    padding-right:1em;          /* [7] */
    padding-left: 1em;          /* [7] */
    border-radius:4px; /* [8] */
}

.btn, .btn:hover{text-decoration:none;   /* [9] */ }

.btn:active, .btn:focus{
        outline:none;
    }

 .btn--small{
    padding-right:0.5em;
    padding-left: 0.5em;
    line-height:2;
}

#remind_me {
	text-decoration: none;
	color: #505050;
	cursor: pointer;
	margin-left:80px;
}

.push-half--bottom {
	padding-bottom: 14px !important;
}