﻿@font-face {
    font-family: Antic;
    src: url(/assets/fonts/Antic-Regular.ttf);
}
@font-face {
    font-family: Handlee;
    src: url(/assets/fonts/Handlee-Regular.ttf);
}



/*MDL Customizations*/
.getmdl-select .mdl-menu__item {
    font-size: 0.9em !important;
}

.mdl-textfield__label:after {
    bottom: 15px !important;
}

.mdl-layout__drawer-button i {
    color: #000000;
}
.mdl-layout__header {
    background: none !important;
}
.mdl-checkbox__label {
    font-size: 1em !important;
}
/*END - MDL Customizations*/


.header-spacer-desktop {
    padding-top: 80px;
}
.header-mobile {
    text-align: center;
}
.header-mobile .logo {
    height: 60px;
    z-index: 999;
}
header {
    background-color: #fff;
    position: fixed;
    top: 0;
    width: 100%;
    height: 80px;
}
header #menu-desktop {
    text-align: center;
    height: 80px;
}
header #menu-desktop .logo {
    max-height: 80px;
}
.container {
    max-width: 1200px !important;
    left: 50%;
    margin: auto;
}




nav a {
    color: #000000 !important;
    text-decoration: none;
}
nav a:hover {
    color: #8bb70a !important;
}

/*top level menu*/
nav > ul {
    list-style: none;
    padding-left: 0px;
    position: relative;
    margin-top: 30px;
}

nav > ul > li {
    float: right;
}

/*second level sub-menu*/
nav > ul > li > a {
    padding: 15px;
}
nav > ul > li > ul {
    list-style: none;
    padding-left: 0px;
    position: absolute;
    display: inline-block;
    right: 0px;
    width: 200px;
    visibility: hidden;
    background-color: #eee;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
nav > ul > li:hover > ul,
nav > ul > li:focus > ul {
    visibility: visible;
}
nav > ul > li > ul > li {
                
}
nav > ul > li > ul > li > a {
    display: block;
    padding: 10px;
}
nav > ul > li > ul > li > a:hover {
    background-color: #ffffff;
}
#nav-learnmore {
    position: relative;
    padding-right: 15px;
}
#nav-learnmore i {
    font-size: 15px;
}



.quote-container {
    max-width: 800px;
    left: 50%;
    margin: auto;
}
.quote-container .submit {
    width: 300px;
}












.header .container nav {
    float:right;
}
.header .container nav a {
    height: 100%;
    margin-left: 10px;
    margin-right: 10px;
}

.logo-container {
    text-align: left;
    padding-left: 0px !important;
}


article {
    padding-top: 50px;
    padding-bottom: 50px;
}
h1, h2, h3, h4, h5, h6 {
    font-family: Handlee !important
}
input,
select,
label,
.mdl-textfield,
.mdl-textfield__label,
.mdl-textfield__input,
.tile,
article {
    font-family: Antic !important;
}


p, .tile, table {
    font-size: 18px !important;
    line-height: 1.8em !important;
}
.attribute-description {
    font-size: 1.3em !important;
    line-height: 1.6em;
}




.mdl-mega-footer__middle-section {
    max-width: 1200px;
    margin: auto;
    left: 50%;
    padding: 15px;
}
.footer-logo {
    padding-top: 50px !important;
    text-align: center;
}
.footer-logo p {
    font-size: 0.8em !important;
    line-height: 17px;
    text-align: center;
}


.featured-row {
    background-color: #8bb70a;
    width: 100%;
    padding: 35px;
}


.validation-error {
    color: #cc0000;
}
.field-validation-error {
    color: #cc0000;
    font-size: 0.8em;
}




.contact .field-validation-error {
    margin-top: -20px !important;
    position: absolute;
}
.contact textarea {
    width: 600px;
    height: 100px;
}
.contact .expand-mdl .mdl-textfield label,
.contact .expand-mdl .mdl-textfield {
    width: 600px !important;
}
.contact-submit-success i {
    color: #8bb70a;
    font-size: 4em;
    width: 70px;
}
.contact-submit-success {
    display: table-cell;
    font-size: 1.3em;
    vertical-align: middle;
}


/* Home Page */
.attributes .attribute img {
    max-width: 130px;
    margin-bottom: 20px;
}
.attributes .attribute img svg {
    fill: red !important;
}
.attributes .attribute {
    text-align: center;
}
.attributes .attribute h4 {
    margin-bottom: 0px;
    font-weight: bold;
}
.attributes .attribute .attribute-description {
    font-size: 0.9em;
}
.attributes {
    margin-top: 70px;
    margin-bottom: 50px;
}
.featured-row .attribute {
    color: #ffffff;
}
form.contact-me {
    margin-top: 130px;
    margin-bottom: 100px;
    text-align: center;
}
button.contact-me {
    width: 300px;
    height: 100px;
    background-color: #8bb70a;
    color: #ffffff;
    font-size: 1.3em;
    border: none;
}








ul.tile-container {
    list-style: none;
    list-style-type: none;
    padding-left: 0;
    margin-top: 50px;
    margin-bottom: 80px;
}
.tile-description p {
    line-height: 1.2em !important;
    margin-top: 10px;
}
.tile {
    width: 100%;
    border: 1px solid #cccccc;
    margin-bottom: 30px;
    padding: 30px;
    position: relative;
}
.opening-tile .tile-title {
    width: 150px;
    display: inline-block;
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    text-align: center;
    color: #ffffff;
    font-family: Handlee
}
.opening-tile .tile-title > div {
    position: absolute;
    height: 100%;
    width: 100%;
    display: table;
}
.opening-tile .tile-title span {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-size: 1.4em;
}
.opening-tile.open .tile-title {
    background-color: #8bb70a;
}
.opening-tile.upcoming .tile-title {
    background-color: #ffc000;
}
.opening-tile .opening-state.open {
    color: #8bb70a;
    font-weight: bold;
}
.opening-tile .opening-state.upcoming {
    color: #ffc000;
    font-weight: bold;
}
.opening-tile .tile-description {
    margin-left: 150px;
}




table.trainings {
    width: 100%;
}
table.trainings, table.trainings td, table.trainings th {
    border: 1px solid #cccccc;
    padding: 7px;
}



.interactive-google-map {
    height: 300px;
}
table.hours-grid {
    width: 100%;
}
article.hours .row {
    margin-bottom: 70px;
    margin-top: 50px;
}
#house {
    max-width: 100%;
}
.holiday-grid {
    width: 100%;
}
.holiday-grid td:first-child {
    width: 250px;
}
.holiday-grid .year-title {
    font-size: 1.3em;
    padding-bottom: 30px;
    text-decoration: underline;
}


.faq-tile {
    padding: 20px;
    padding-top: 0px;
    padding-left: 70px;
}
.faq-tile .tile-bubble {
    position: absolute;
    left: -10px;
    top: -10px;
    width: 50px;
    height: 50px;
    text-align: center;
    padding-top: 10px;
    background-color: #8bb70a;
    color: #ffffff;
    border-radius: 50%;
    font-weight: bold;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
}


table.daily-schedule-grid {
    width: 100%;
}



ul.testimonial-container {
    list-style: none;
    padding-left: 0px;
}
ul.testimonial-container li {
    position: relative;
    margin-top: 130px;
    margin-bottom: 130px;
}
ul.testimonial-container li::before {
    left: -30px;
}
ul.testimonial-container li::before,
ul.testimonial-container li::after {
    content: "\"";
    position: absolute;
    font-size: 70px;
}
ul.testimonial-container li::after
{
    right: -30px;
    bottom: 30px;
}
.testimonial-tile p {
    font-size: 1.7em !important;
}
.testimonial-meta p, .testimonial-meta span {
    font-size: 1.5em !important;
}











.grid {
    width: 100%;
}

    /* clear fix */
    .grid:after {
        content: '';
        display: block;
        clear: both;
    }

/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
    width: 33.333%;
}

.grid-item {
    float: left;
}

    .grid-item img {
        display: block;
        max-width: 100%;
    }