/*
Theme Name: Charitas Child Theme
Theme URI:
Description: Use this theme to start your Charitas Child Theme development.
Author: Victor Tihai
Author URI: http://wplook.com/
Template: charitas-wpl
Version: 1.0.0.
*/

@import url('../charitas-wpl/style.css');

/*toolbar colors*/
#toolbar .tb-list .rss a:hover {
    background: #b20838;
}
#toolbar .tb-list .contact a:hover {
    background: #005696;
}
#toolbar .tb-list .search a:hover {
    background: #e51b24;
}
#toolbar .tb-list .search-items {
    background: #e51b24;
}
#toolbar .tb-list .donate a {
    background: #e8a713;
}
#toolbar .tb-list .donate a:hover {
    background: #ffe484;
}

/*icon colors*/
.entry-meta-widget .date i {
    color: #005696;
}
.entry-meta-widget .location i {
    color: #e8a713;
}
.entry-meta-press .author-i i {
    color: #00a261;
}

.flex-control-thumbs {
    display: none;
}
#main .inner {
    padding: 30px 0 20px 0;
}
.forth-home-widget-area {
    margin-bottom: 0;
}
aside.WPlookAnounce {
    margin-bottom: 0;
}

/*footer*/
#colophon {
    padding-top: 20px;

    background-position: center -30px;
}
#colophon .widget h3 {
    margin-bottom: 30px;
}
#colophon img {
    width: auto;
    max-width: 100%;
    height: auto;
}

.designby a img {
    display: inline;
}


/*collapse-o-matic-plugin*/


.collapseomatic {
    display: block;

    margin-bottom: 10px;
    padding: 10px 0 10px 30px!important;

    cursor: pointer;

    -webkit-border-radius: 10px 10px 10px 10px;
            border-radius: 10px 10px 10px 10px;
    background-color: #eee;
    background-image: url('images/arrow-down.png');
    background-repeat: no-repeat;
    background-position: 10px 14px;
}

.collapseomatic:hover {
    color: #fff;
    background-color: #005794;
    background-image: url('/wp-content/themes/charitas-child/images/arrow-down-white.png');
}

/* ==|== Book your place = = = = = = = = = = = = = = = = = = = = = */


a.buttons.fright.radius.event {
    margin-left: 24px;
    padding: 10px 12px;

    cursor: pointer;
    text-decoration: none;
    text-transform: none;

    color: #3b3b3d;
    background: #fff;
}

a.buttons.fright.radius.event:hover {
    -webkit-animation-name: fadeIn;
       -moz-animation-name: fadeIn;
         -o-animation-name: fadeIn;
            animation-name: fadeIn;
    -webkit-animation-duration: 1s;
       -moz-animation-duration: 1s;
        -ms-animation-duration: 1s;
         -o-animation-duration: 1s;
            animation-duration: 1s;

    color: #fff;
    background: #3b3b3d;
}

a.buttons.fright.radius.event:hover i {
    color: #fff;
    background: none;
}


/**************************** DONATION FORM STYLING*************************************/




ul.tab-links {
    margin: 0;
}

.tab-links {
    float: left;
}

.tab-links li {
    display: inline-block;

    list-style-type: none;
}

.tab-links li a {
    font-family: 'Archivo Narrow', sans-serif;
    font-size: 24px;

    display: block;

    margin-left: 0;
    padding: 10px 30px;

    text-align: center;
    text-decoration: none;

    color: #fff;
    -webkit-border-radius: 10px 10px 0 0;
       -moz-border-radius: 10px 10px 0 0;
            border-radius: 10px 10px 0 0;
    background-color: #d62221;/*DARK RED*/
}

.tab-links li a:hover,
.tab-links li.active a {
    background-color: #ef2725;/*LIGHT RED*/
}

.tab-links li a:active {
    background-color: #ef2725;/*LIGHT RED*/
}

.tab-links a:checked {
    background: #08c;
}


.tab {
    float: left;
    clear: both;

    width: 100%;
    min-height: 300px;
    margin-bottom: 20px;
    padding: 25px;

    border: 1px solid #ccc;
    -webkit-border-radius: 0 10px 10px 10px;
       -moz-border-radius: 0 10px 10px 10px;
            border-radius: 0 10px 10px 10px; /* border radius */
    background: #fafafa url('images/cream_dust.png') repeat;
}

.boxlabel {
    margin-bottom: 20px;
}

.donation-tabs .tab {
    position: relative;
}

.donation-tabs .tab form {
    padding-bottom: 50px; /* Make room for the submit-btn */
}

.donation-tabs .submit-btn {
    position: absolute;
    bottom: 25px;
    left: 25px;
}

.submit-btn {
    font-size: 12px !important;

    display: block;

    margin: 0;
    padding: 7px 10px !important;

    cursor: pointer;
    text-decoration: none;
    text-transform: uppercase;

    color: #fff !important;
    border: 1px solid #ef2723;
    background: #ef2723;
}

.submit-btn:hover {
    color: #fff;
    border: 1px solid #ec5057;
    background: #ec5057;
}

.form-grid {
    margin-left: 0;
    padding-left: 0;
}

.form-grid li {
    list-style: none;
}


/*FIXES FOR RESPONSIVE*/

.video-container {
    position: relative;

    overflow: hidden;

    height: 0;
    padding-top: 30px;
    padding-bottom: 56.25%;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
}


/*ADDITIONAL QA FIXES*/


#main > div > div.grid_12.first-home-widget-area > aside > div.latestnews-body.flexslider-news > ul.slides > li.flex-active-slide > div.content.fleft > p.category > a {
    display: none!important;
}

#main > div > div.grid_12.first-home-widget-area > aside > div.latestnews-body.flexslider-news > ul.slides > li.flex-active-slide > a > div > img {
    width: auto;
    max-width: 100%!important;
}


.document-info a[href$='.pdf'] {
    line-height: 18px;

    display: inline-block;

    padding-left: 20px;

    background: transparent url('images/pdf.png') center left no-repeat;
}


.icon-tint:before {
    content: '\f040'!important;
}




img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img,
.widget-area img {
    width: inherit;  /* Make images fill their parent's space. Solves IE8. */
    max-width: 100%; /* Add !important if needed. */
    height: auto;    /* Add !important if needed. */
}



@media screen and (max-width: 1024px) {
    html body #main .inner {
        padding: 30px 0 20px 0;
    }
}



@media screen and (max-width: 480px) {
    .flex-content h1 {
        font-size: 15px!important;
    }

    .flex-content .flex-button a {
        margin: 0!important;
        padding: 0 5px!important;
    }

    #main > div > div.grid_12.first-home-widget-area > aside > div.latestnews-body.flexslider-news > ul.slides > li.flex-active-slide > a > div > img {
        width: 100%;
    }

    .suffix_1 {
        margin: 0!important;
    }

    html body #main .inner {
        padding: 10px 0 20px 0;
    }
}

.designby {
    float: right;

    width: 255px;
}

.em-search-submit {
    min-height: 20px;
}



/* EMAIL SIGNUP FORM */




.fsForm .fsLabelHorizontal > label,
.fsForm .fsLabelHorizontal > legend,
.fsForm .fsLabelHorizontal > span.fsLabel,
legend.fsLabelHorizontal {
    width: 50px!important;
}
#fsCell26686069 {
    padding: 0!important;
}


#label26686069 {
    margin-top: 5px;

    color: #fff;
}
#field26686069 {
    border: none!important;
    background-image: none!important;
}

.fsRequiredMarker {
    color: #fff!important;
}
body .fsBody .fsForm {
    margin: 0!important;

    border: none!important;
    background-color: #e51b24!important;
}
#field26686069 {
    width: 200px!important;
}

.fsForm .fsSubmit {
    float: right;

    margin-right: 7px;
    padding: 0!important;

    background-color: none!important;
}

.fsSubmit input.fsSubmitButton {
    font-size: 12px;

    color: #fff!important;
    border: 1px solid #fff;
    background-color: #e51b24!important;
}

body .fsFieldFocused {
    background: none!important;
    background-color: none!important;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none!important;
    background-color: none!important;
}


.widget ul li:before {
    content: '';

    padding-right: 0;
}

.entry-content .featured {
    float: none;
    max-height: 225px;
    overflow: hidden;
    text-align: center;
}

.entry-content .featured img {
    width: auto;
    max-height: 225px;
    display: inline;
    vertical-align: middle;
}

.school-logo-list img {
  border: none !important;
  padding: 2rem;
}

.em-booking-submit {
    background-color: #E81617;
    padding: 1em 2.2em;
    font-size: 1.4em;
    color: white;
    text-transform: uppercase;
    cursor: pointer;
    font-family: 'Archivo Narrow', sans-serif;
    border: 1px solid #E81617;
    margin: 1rem 0 2rem;

}


.documents-list {


    list-style: none;

}

.documents-list img {
    display: inline-block;
    width: 50px;
    height: 50px;
    vertical-align: middle;
}

.documents-list a {
    font-weight: bold;
    font-size: 16px;
    line-height: 1;
}

.portal-link {

    display: block;
    color: white !important;
    font-weight: bold;
    padding: 10px 15px;
    width: 200px;
    text-decoration: none;
    line-height: 1;
    border: 2px solid white;
    margin-bottom: 1rem;
    text-align: center;
}
#colophon .portal-link img {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
}
.tfcs-login p {
    display: block;
}

.tfcs-login p input {
    display: block;
    margin: .25rem 0 0;
    border: 2px solid #cd1921;
    border-radius: 0;
    height: auto;
    line-height: 1;
    padding: .5rem .25rem;
}

.tfcs-login p .button {
    display: block;
    width: 200px;
    background: white;
    color: #e51b25;
    border: 2px solid #e51b25;
}


/**************************** DONORS PAGE STYLING*************************************/


.page-id-92 #primary {
    width: min(80vw, 900px);
    padding-right: 0;
    margin-inline: auto;
    float: none;
    display: block;
}

.donors-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    list-style-type: none;
    margin: 1.25rem 0 .25rem;
}

.donors-list li {
    width: fit-content;
    margin-right: 1.25rem;
    margin-bottom: 2rem;
}

.donors-list li a  img, .donors-list li img{
    
    width: auto !important;
    max-width: 175px !important;
    max-height: 75px !important;
}

.donors-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 2rem;
}

.donors-row .col {
    width: 50%;
}


@media (max-width: 768px) {
    .donors-row {
        flex-direction: column;
    }
    
    .donors-row .col {
        width: 100%;
    }
}

/**************************** OTHER WAYS STYLING*************************************/

/* .page-id-5363 .site-main, .page-id-5363 #primary, */
.page-id-5386 .site-main, .page-id-5386 #primary {
    width: 100%;
    max-width: 100vw;
    padding: 0;
    margin-inline: 0;
}

.ways-post-header {

    max-width: min(60vw, 800px);
    margin-inline: auto;
    font-size: 28px;
    padding: 2rem 0;
}
.ways-post-header p {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}

.ways-section {
    width: 100%;
    background-color: #161756;
}

.ways-section > div {
    max-width: min(80vw, 1000px);
    margin-inline: auto;
    /* color: #fff; */
}
.ways-section > div > div {
    
    margin-inline: 0 auto;
    width: 60%;
    color: #fff;
    padding: 1rem 0 6rem;
}
.ways-section > div > div h2 {
    color: #fff;
    font-size: 42px;
}


.ways-grid {
    max-width: min(80vw, 1000px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    grid-column-gap: 3rem;
    grid-row-gap: 2rem;
    /* color: #fff !important; */
    background-color: #fff;
    margin-top: -60px;
    padding: 2rem;
    box-shadow: 0 0 16px -4px rgba(0,0,0,.24);
    margin-bottom: 3rem;
    
}

.ways-grid h3 {
    /* color: #fff !important; */
    font-size: 32px;
}

.ways-form-title {
    padding: 1rem 2rem;
    
    max-width: min(80vw, 1000px);
    margin-inline: auto;
    margin-top: 6rem;
    font-size: 42px;
    background-color: #161756;
    color: #fff;
}


.page-id-5386 #foundationscps-donation-form
/* .page-id-5363 #foundationscps-donation-form  */
{
    /* margin-top: 1.5rem; */
    max-width: min(80vw, 1000px);
    margin-inline: auto;
    
}


@media (max-width: 768px) {
    .ways-post-header {

        max-width: min(60vw, 800px);
        margin-inline: auto;
        font-size: 28px;
        padding: 2rem 0;
    }
    .ways-grid {
        max-width: min(80vw, 1000px);
        margin-inline: auto;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: auto;

        grid-row-gap: 2rem;
        /* color: #fff !important; */
        background-color: #fff;
        margin-top: -60px;
        padding: 2rem;

        
    }
    .ways-section > div > div {
        width: 100%;
    }

}