/**
 * medium break point
 */
@media screen and (max-width: 56.250em) { /** 900px **/
    .intro{
        margin-left: 20%;
        margin-right: 20%;
        width: 60%;
    }
    .tag-line{
        font-size: 20px;
    }
    .goal p{
        padding-left: 15%;
        padding-right: 15%;
        font-size: 15px;
    }
    .calander-icon{
        margin-left: 0%;
        border-bottom-width: 0px;
    }
    .diary-event {
    display: flex;
    flex-direction: column;
    padding-top: 10px;
    padding-bottom: 10px;
    align-content: flex-end;
    padding-left: 15%;
    padding-right: 15%;
    width: 70%;
    }
 
    .footer-pager-higer-left-left {
        padding-left: 80px;
    }
    .footer-page-higer-right-right{
        padding-right:60px
    }
    .footer-page-lower {
        padding-right: 80px;
    }
    .far{
        margin-bottom: 25px;
    }
}

/**
 * horizontal medium break point
 */
@media screen and (max-width: 56.250em) and (orientation:landscape) {

}

/**
 * medium-small break point
 */
@media screen and (max-width: 42em) {

}

/**
 * small break point
 */
@media screen and (max-width: 31.250em) { /** 500px **/
/* ------------------------------------------------------------------------------ */    
    .empty-space{
        width: 0%;
    }
    .logo{
        width: 75px;
        height: 100px;
    }
    .intro{
        margin-left: 10%;
        margin-right: 10%;
        width: auto;
    }
    .intro h2{
        font-size: 25px
    }
    .tag-line{
        margin-left: 25px;
        margin-right: 25px;
    }
    .tag-line h3{
        font-size: 20px;
    }
    .fab{
        font-size: 20px;
    }
    /* ------------------------------------------------------------------------------ */
    .goal p{
        padding-left: 10%;
        padding-right: 10%;
        font-size: 15px !important;
    }
    .calander-icon{
        margin-left: 10%;
    }
    .far{
        font-size: 40px;
    }
    .calander-call{
        margin-right: 0%;
        border-bottom: 0px;
    }
    .diary-date p{
        font-size: 20px;
        margin: 0px;
    }
    .call-us p{
        font-size: 15px;
    }
    /* ------------------------------------------------------------------------------ */
    .diary-event-holder{
        flex-direction: column;
    }
    .main-diary-event-left{
        padding-left: 10%;
        padding-right: 10%;
        border-right: none;
        width: 80%;
        align-items: flex-start !important;
    }
    .diary-event-holder h4{
        font-size: 15px;
    }
    .diary-event-holder p{
        font-size: 15px;
    }
    .main-diary-event-right{
        padding-left: 10%;
        padding-right: 10%;
        border-right: none;
        width: 80%;
    }    
    .diary-event-content{

    }
    .calander-number{
        justify-content: left;
    }
    .diary-event{
        align-content: flex-start;
        padding: 0px;
        width: 100%;
    }
    .thedates{
        width: auto;
    }
    .dates p{
    width: 250px;
    }
    .dates h4{
    }
    .single-event{
    align-content: flex-end;
    width: 100%;
    padding-top: 30px;
    }
    /* ------------------------------------------------------------------------------ */
    .download-donate{
        flex-direction: column;
        padding-bottom: 0%;
    }
    .download-our{
        display: flex;
        flex-direction: row-reverse;
        width: 80%;
        padding-left: 0%;
        padding-right: 0%;
        margin-left: 10%;
        margin-right: 10%;
        border: 0px;
        border-bottom: solid;
        border-bottom-width: 1px;
        border-bottom-color: white;
    }
    .download-donate p{
        font-size: 20px;
        text-align: left;
        margin-bottom: 20px;
    }
    .fas{
        padding-right: 10px;
    }
    .support-the{
        display: flex;
        flex-direction: row-reverse;
        width: 80%;
        padding-left: 0%;
        padding-right: 0%;
        padding-top: 20px;
        margin-left: 10%;
        margin-right: 10%;
        border: 0px;      
    }
    /* ------------------------------------------------------------------------------ */    
    .get-in-touch{

    }
    .get-in-text{
        width: 100%;
    }
    .get-in-text h4{
        font-size: 20px;
    }
    .get-in-text p{
        font-size: 15px;
        padding-left: 10%;
        padding-right: 10%;
    }
    .form-all-split{
        flex-direction: column;
    }
    .full-contact{
        margin-left: 10%;
        margin-right: 10%;
        width: 80%;
    }
    .business-email{
        margin-left: 10%;
        margin-right: 10%;
        width: 80%;        
    }
    /* ------------------------------------------------------------------------------ */ 
    .footer-page{

    }
    .footer-page p{
        font-size: 8px;
    }
    .footer-page h5{
        font-size: 8px;
    }
    .footer-pager-higer-left{
    width: 60%;
    display: flex;
    flex-direction: column;
    }
    .footer-pager-higer-left-left{
    width: 60%;
    padding-left: 10%;
    }
    .footer-pager-higer {
    height: 40px;
    }
    .footer-page-lower{
        padding-right:0px
    }
    .footer-page-lower-left{
        width: 0px;
    }
    .footer-page-higer-right-right{
        padding-right:0px
    }
    /* ------------------------------------------------------------------------------ */ 
    .firstname-container{
        padding-left: 15% !important;
        padding-right: 15% !important;
        padding-bottom: 15px !important;
        margin: 0 !important;
        width: 100% !important;
    }
    .lastname-container{
        padding-left: 15% !important;
        padding-right: 15% !important;
        padding-bottom: 15px !important;
        margin: 0 !important;
        width: 100% !important;
    }
    .phone-container{
        padding-left: 15% !important;
        padding-right: 15% !important;
        padding-bottom: 15px !important;
        margin: 0 !important;
        width: 100% !important;
    }
    .email-container{
        padding-left: 15% !important;
        padding-right: 15% !important;
        padding-bottom: 15px !important;
        margin: 0 !important;
        width: 100% !important;   
    }
    .nf-field-container {
        padding-left: 10% !important;
        padding-right: 10% !important;
    }
    
    
    
    
}