/*
CSS Styling for Tadpole Lane Farm website. it's meant to be integrated with Material Design:
    https://getmdl.io/
*/


/* *************** ROOT *************** */

 :root {
    /* Color Scheme, taken from logo (Use as var(--tlf-green), for example) */
    --tlf-green: #135c2d;
    --tlf-green-transparent: #135c2d50;
    --tlf-light-green: #bbd5c5;
    --tlf-red: #874058ff;
    --tlf-light-red: #dfc0cc;
    --tlf-white: #f5f5f5;
    --tlf-off-white: #eee6e9;
    --tlf-link-standard: var(--tlf-red);
    --tlf-link-visited: #b15ac0;
    --tlf-link-hover: #6666ff;
}


/* *************** Fonts *************** */

@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');

/* *************** Body *************** */

.body {
    background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url('../img/background.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    font-family: 'Raleway';
}

.body.body-home {
    background-image: none;
}

.body-boarding {
    background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url('../img/bg_farm15.jpeg');
}

@media screen and (max-width:1024px) {
    .body.body-boarding {
        background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url('../img/bg_farm15_smallscreen.jpeg');
    }
}

.body-onsiteleasing {
    background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url('../img/bg_farm15.jpeg');
}

@media screen and (max-width:1024px) {
    .body.body-onsiteleasing {
        background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url('../img/bg_farm15.jpeg');
    }
}

.body.body-lessons {
    background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url('../img/bg_farm1.jpeg');
}

@media screen and (max-width:1024px) {
    .body.body-lessons {
        background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url('../img/bg_farm1_smallscreen.jpeg');
    }
}

.body.body-therapeutic {
    background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url('../img/bg_farm16.jpeg');
}

@media screen and (max-width:1024px) {
    .body.body-therapeutic {
        background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url('../img/bg_farm16_smallscreen.jpeg');
    }
}

.body.body-camp {
    background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url('../img/bg_camp10.jpeg');
}

@media screen and (max-width:1024px) {
    .body.body-camp {
        background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url('../img/bg_camp10_smallscreen.jpeg');
    }
}

.body.body-xcc {
    background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url('../img/bg_xcc.jpeg');
}

@media screen and (max-width:1024px) {
    .body.body-xcc {
        background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url('../img/bg_xcc_smallscreen.jpeg');
    }
}

.body-sales {
    background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url('../img/bg_farm15.jpeg');
}

@media screen and (max-width:1024px) {
    .body.body-sales {
        background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url('../img/bg_farm15_smallscreen.jpeg');
    }
}

.body.body-contact {
    background-image: none;
}


/* *************** Drawer Menu Stuff *************** */

.mdl-layout__drawer.tlf-drawer {
    background-color: var(--tlf-white);
}

.mdl-layout__drawer .mdl-layout-icon.tlf-menu-logo {
    margin-left: auto;
    margin-right: auto;
    width: 70%;
}

.mdl-layout-icon.tlf-menu-logo img {
    display: block;
    width: 100%;
}

.mdl-layout__drawer .mdl-navigation .mdl-navigation__link.tlf-nav-link {
    color: var(--tlf-red);
}

.mdl-layout__drawer .mdl-navigation .mdl-navigation__link.tlf-nav-link-sel {
    background-color: var(--tlf-off-white);
    color: var(--tlf-red);
    font-weight: bolder;
}


/* *************** Header Stuff *************** */

.tlf-header {
    background: var(--tlf-green);
    /*box-shadow: 0 0;*/
    position: static;
    /*min-height: 54px;*/
}

.tlf-header-row {
    /*height: 54px;*/
}

.tlf-header-title {
    color: var(--tlf-white);
    font-size: 14pt;
}

.tlf-header-logo {
    max-height: 85%;
}

.mdl-layout__container.has-scrolling-header .mdl-layout--fixed-header .mdl-layout__content {
    overflow-y: visible;
    overflow-x: visible;
    overflow: visible;
}


/* *************** Footer Stuff *************** */

.tlf-mdl-mini-footer {
    background: linear-gradient(to bottom, #00000000 0%, var(--tlf-green) 2%);
}

.tlf-footer-business {
    color: var(--tlf-off-white);
    font-weight: bold;
    margin-bottom: 5;
}

.tlf-footer-address {
    color: var(--tlf-off-white);
    line-height: 1.5;
    margin: 0 0;
}

.tlf-footer-right {
    text-align: center;
}

.tlf-footer-phone {
    padding-top: 20px;
}

.tlf-footer-social-icon img {
    width: 40px;
}

.tlf-footer-social-icons li img {
    width: 40px;
}


/* *************** Layout / Cards *************** */

.mdl-grid.tlf-mdl-grid {
    max-width: 1400px;
}

.mdl-cell.mdl-cell--12-col.tlf-card-spacer {
    padding: 160px 0px;
}

.mdl-cell.mdl-cell--12-col.tlf-card-spacer-small {
    padding: 40px 0px;
}

.mdl-grid.tlf-fullscreen-grid {
    /* Fullscreen card to be used outside of a grid layout; Non-array elements. */
    background: var(--tlf-white);
    margin: 0px;
    padding: 0px;
    min-height: 0px;
    width: 100%;
}

.mdl-card.tlf-fullscreen-card {
    /* Fullscreen card to be used outside of a grid layout; Non-array elements. */
    background: var(--tlf-white);
    margin: 0px;
    min-height: 0px;
    width: 100%;
    text-align: center;
}

.mdl-card__title-text.tlf-fullscreen-card-title {
    color: var(--tlf-red);
    display: block;
    text-align: center;
}

.tlf-card {
    background: var(--tlf-white);
    min-height: 0px;
}

.tlf-card.tlf-title-card {
    min-height: 0px;
}

.tlf-card-title-text {
    color: var(--tlf-red);
}

.tlf-card-title-text.tlf-card-title-text-centered {
    width: 100%;
    display: block;
    text-align: center;
}

.mdl-card__supporting-text.tlf-card-text {
    color: #333333;
    width: 96%;
}

.mdl-card__supporting-text.tlf-card-text.tlf-card-text-centered {
    width: 100%;
    text-align: center;
}

.tlf-card-text .tlf-card-text-sale-status {
    font-weight: bold;
}

img.tlf-card-image {
    width: 100%;
    height: auto;
}

.tlf-cards-header {
    /* Card region header text, e.g. "Meet the instructors". */
    margin: 0px 0px;
    padding: 8px 0px;
}

.tlf-cards-header.tlf-cards-header-light {
    color: var(--tlf-white);
}

.tlf-cards-header.tlf-cards-header-dark {
    color: var(--tlf-red);
}

.tlf-cards-header p {
    font-weight: bold;
    font-size: 42px;
}

.tlf-card-divider-ctr {
    display: flex;
    justify-content: center;
    margin: 0px 8px;
}

.tlf-card-divider {
    height: 1px;
    margin: 8px 0px;
    width: 85%;
}

.tlf-card-divider.tlf-card-divider-light {
    background-color: var(--tlf-off-white);
}

.tlf-card-divider.tlf-card-divider-dark {
    background-color: var(--tlf-light-red);
}

.tlf-card-service {
    display: block;
    text-align: center;
    margin-bottom: 16px;
}

.tlf-card-service img {
    border-radius: 100%;
    margin: 16px 0px;
    height: auto;
    max-width: 70%;
}


/* *************** Hyperlinks & Buttons *************** */

.tlf-link-light {
    color: var(--tlf-off-white);
}

.tlf-link-dark:link {
    color: var(--tlf-link-standard);
}

.tlf-link-dark:visited {
    color: var(--tlf-link-visited);
}

.tlf-link-dark:hover {
    color: var(--tlf-link-hover);
}


/* *************** Form - Email *************** */

.tlf-email-form {
    width: 100%;
}

.tlf-email-button {
    width: 100%;
}


/* *************** Form - General *************** */

.tlf-mdl-textfield {
    width: 100%;
}

.tlf-mdl-textfield--floating-label.is-focused .tlf-mdl-textfield__label,
.tlf-mdl-textfield--floating-label.is-dirty .tlf-mdl-textfield__label,
.tlf-mdl-textfield--floating-label.has-placeholder .tlf-mdl-textfield__label {
    color: var(--tlf-green);
}

.tlf-mdl-textfield__input {
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

.tlf-mdl-textfield__input:after {
    color: var(--tlf-green);
}

.tlf-mdl-textfield__label {
    color: rgba(0, 0, 0, .4);
}

.tlf-mdl-textfield__label:after {
    background-color: var(--tlf-green);
    color: var(--tlf-green);
}


/* *************** MDL Overrides *************** */

.mdl-button--accent.mdl-button--accent {
    color: var(--tlf-green);
}

.mdl-button--accent.mdl-button--accent.mdl-button--raised,
.mdl-button--accent.mdl-button--accent.mdl-button--fab {
    color: var(--tlf-white);
    background-color: var(--tlf-green);
}

@media screen and (max-width: 1024px) {
    .mdl-layout__drawer-button {
        margin: 4px;
        color: var(--tlf-white);
    }
}

.mdl-layout__container.has-scrolling-header .mdl-layout--fixed-header .mdl-layout__content {
    overflow-y: visible;
    overflow-x: visible;
    overflow: visible;
}


/* *************** Video *************** */


/*
NOTES:
Hit this to determine video aspect ratio:
    - https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v={video_id}&format=json
*/

.video-16x9 {
    position: relative;
    /* 16:9 (9/16) */
    padding-bottom: 56.25%;
    height: 0;
}

.video-16x9 iframe {
    border-radius: 2px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* *************** Slideshow Overrides *************** */

.ss-cap-container.tlf-ss-cap-container {
    background: linear-gradient(to right, var(--tlf-red) 60%, #00000000 100%);
    color: var(--tlf-off-white);
}