@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);

* {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
}

body {
    font-family: 'Open Sans', sans-serif;
    font-weight: normal;
    background-color: #f3fafe;
    margin: 0;
    padding: 0;
    color: #333;
}

img {
    max-width: 100%;
    height: auto;
    border: 0;
}

a, a:visited, a:active {
    color: #ff6b5b;
    text-decoration: none;
}

a:hover {
    opacity: .7;
    text-decoration: none;
}

a:hover img {
    opacity: .7;
}

.logo {
    padding: 20px 10px 40px 10px;
    text-align: center;
}

.nav {
    top: 15px;
    right: 15px;
    z-index: 10;
    position: absolute;
}

.navItem {
    padding: 0 5px 0 5px;
    float: left;
    line-height: 35px;
    color: #FFF;
    font-weight: bold;
}

.iconLinks:hover {
    opacity: .8;
}

.nav .icons p:hover {
    opacity: 1;
}

h1 {
    font-size: 2em;
    color: #fff;
    font-weight: normal;
    background-color: #ff6b5b;
    margin: 0 0 20px 0;
    padding: 10px 10px 10px 15px;
}

h2 {
    color: #333;
    margin: 0;
    padding: 0;
    font-weight: normal;
}

h3 {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.2em;
}

hr {
    height: 12px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
}

ul li {
    line-height: 25px;
}

.twd_container {
    margin: 15px;
}

.twd_centered {
    margin: auto;
    text-align: center;
}

.twd_margin20 {
    margin-bottom: 20px;
}

.twd_clearfloat {
    width: 100%;
    clear: left;
}

.twd_float_left {
    float: left;
}

.twd_float_right {
    float: right;
}

.twd_row {
    display: table;
    width: 100%;
}

.twd_column {
    display: table-cell;
    vertical-align: top;
    padding-left: 1%;
    padding-right: 1%;
}

.twd_column img {
    max-width: 100%;
    height: auto;
}

.twd_one {
    width: 100%;
}

.twd_two {
    width: 48%;
}

.twd_hideOnDesktop, .twd_hideColumnOnDesktop {
    display: none;
}

.twd_showOnDesktop {
    display: block;
}

.twd_showColumnOnDesktop {
    display: table-cell;
}

.tabs {
    text-align: center;
    font-weight: bold;
    width: 200px;
    height: 50px;
    line-height: 50px;
    float: left;
    background-color: #ddd;
    -moz-border-radius: 0px;
    -webkit-border-radius: 6px 6px 0px 0px;
    border-radius: 6px 6px 0px 0px;
    margin-right: 5px;
}

.tabs:hover {
    background-color: #eee;
    cursor: pointer;
}

.active {
    background-color: #00c185;
    color: #fff;
}

.active:hover {
    background-color: #00c185;
}

.tabContainer {
    border: #00c185 solid 1px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px 10px 0px 0px;
    border-radius: 0px 10px 0px 0px;
    clear: left;
    padding: 20px;
}

.categories {
    height: 300px;
    width: 300px;
    overflow: hidden;
    padding: 5px;
    margin: 5px;
    display: inline-block;
    float: left;
    text-align: center;
    border: solid 1px #eee;
}

.categories img {
    max-width: 100%;
    max-height: 300px;
}

.categories:hover {
    opacity: .5;
}

.red {
    color: red;
}

.green {
    color: green;
}

form {
    width: 100%;
    padding: 0;
}

#addClassForm {
    display: none;
}

table {
    border-collapse: collapse;
}

/* Zebra striping */
tr:nth-of-type(odd) {
    background: #ddd;
}

tr:nth-of-type(even) {
    background: #eee;
}

th {
    background: #bbb;
    font-weight: bold;
}

td, th {
    padding: 10px;
    text-align: left;
    vertical-align: middle;
}

@media only screen and (max-width: 768px) {
    /* break to 100% columns on tablet */
    .twd_breakOnTablet {
        float: left;
        padding: 0;
        width: 100%;
    }

    .twd_hideOnTablet, .twd_hideColumnOnTablet, .twd_showOnDesktop, .twd_showColumnOnDesktop {
        display: none;
    }

    .twd_hideOnDesktop {
        display: block;
    }

    .twd_hideColumnOnDesktop {
        display: table-cell;
    }

    table {
        width: 100%;
    }

    table, thead, tbody, th, td, tr {
        display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr {
        /*border: 1px solid #ccc;*/
        border: none;
    }

    td {
        border: none;
        position: relative;
    }
}

.button {
    color: #00c185 !important;
    border: 2px solid #00c185;
    padding: 16px;
    text-transform: uppercase;
    display: inline-block;
    text-align: center;
    background-color: #fff;
    min-width: 250px;
    cursor: pointer;
}

.button:hover {
    opacity: .75;
}

fieldset {
    border: none;
    padding: 0;
}

input, select {
    font-size: 1em;
    border: 2px solid #e0e0e0;
    display: block;
    padding: 10px;
    box-sizing: border-box;
    background-color: #fff;
}

input[type=submit] {
    color: #00c185 !important;
    border: 2px solid #00c185;
    padding: 10px;
    text-transform: uppercase;
    display: inline-block;
    text-align: center;
    background-color: #fff;
    min-width: 125px;
    cursor: pointer;
}

input[type=submit]:hover {
    opacity: .75;
}

input[type=checkbox] {
    width: 20px;
}

/* mobile styles */
@media screen and (max-width: 480px) {
    .twd_column {
        float: left;
        padding: 0;
    }

    .twd_two, .twd_three, .twd_threeCenter, .twd_threeCustom, .twd_threeCustomDivider, .twd_four, .twd_five, .twd_twoThirds1, .twd_twoThirds2, .twd_oneQuarter1, .twd_oneQuarter2 {
        width: 100%;
    }

    .twd_quad {
        width: 50%;
        float: left;
    }

    .twd_six {
        width: 50%;
        float: left;
    }

    /* hide and show styles */
    .twd_showOnDesktop, .twd_showColumnOnDesktop {
        display: none;
    }

    .twd_hideOnTablet, .twd_hideOnDesktop {
        display: block;
    }

    .twd_hideColumnOnTablet, .twd_hideColumnOnDesktop {
        display: table-cell;
    }

    .twd_hideOnMobile, .twd_hideColumnOnMobile {
        display: none;
    }
}

/* DATE PICKER */
.picker {
    font-size: 16px;
    text-align: left;
    line-height: 1.2;
    color: #000;
    position: absolute;
    z-index: 10000
}

.picker__input.picker__input--active {
    border-color: #00c185
}

.picker__holder {
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
}

.picker {
    min-width: 25%
}

.picker__holder {
    position: absolute;
    background: #fff;
    border: 1px solid #aaa;
    border-top: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    min-width: 176px;
    max-width: 466px;
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
    max-height: 0;
    -ms-filter: "alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
    -webkit-transform: translateY(-1em) perspective(600px) rotateX(10deg);
    -moz-transform: translateY(-1em) perspective(600px) rotateX(10deg);
    transform: translateY(-1em) perspective(600px) rotateX(10deg);
    -webkit-transition: all .15s ease-out, max-height 0 .15s;
    -moz-transition: all .15s ease-out, max-height 0 .15s;
    transition: all .15s ease-out, max-height 0 .15s
}

.picker--opened .picker__holder {
    max-height: 25em;
    -ms-filter: "alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
    -webkit-transform: translateY(0) perspective(600px) rotateX(0);
    -moz-transform: translateY(0) perspective(600px) rotateX(0);
    transform: translateY(0) perspective(600px) rotateX(0);
    -webkit-transition: all .15s ease-out, max-height 0;
    -moz-transition: all .15s ease-out, max-height 0;
    transition: all .15s ease-out, max-height 0;
    -webkit-box-shadow: 0 6px 18px 1px rgba(0, 0, 0, .12);
    -moz-box-shadow: 0 6px 18px 1px rgba(0, 0, 0, .12);
    box-shadow: 0 6px 18px 1px rgba(0, 0, 0, .12)
}

.picker__box {
    padding: 0 1em
}

.picker__header {
    text-align: center;
    position: relative;
    margin-top: .75em
}

.picker__month, .picker__year {
    font-weight: 500;
    display: inline-block;
    margin-left: .25em;
    margin-right: .25em
}

.picker__year {
    color: #999;
    font-size: .8em;
    font-style: italic
}

.picker__select--month, .picker__select--year {
    font-size: .8em;
    border: 1px solid #b7b7b7;
    height: 2.5em;
    padding: .66em .25em;
    margin-left: .25em;
    margin-right: .25em;
    margin-top: -.5em
}

.picker__select--month {
    width: 35%
}

.picker__select--year {
    width: 22.5%
}

.picker__select--month:focus, .picker__select--year:focus {
    border-color: #00c185
}

.picker__nav--prev, .picker__nav--next {
    position: absolute;
    top: -.33em;
    padding: .5em 1.33em;
    width: 1em;
    height: 1em
}

.picker__nav--prev {
    left: -1em;
    padding-right: 1.5em
}

.picker__nav--next {
    right: -1em;
    padding-left: 1.5em
}

.picker__nav--prev:before, .picker__nav--next:before {
    content: " ";
    border-top: .5em solid transparent;
    border-bottom: .5em solid transparent;
    border-right: .75em solid #000;
    width: 0;
    height: 0;
    display: block;
    margin: 0 auto
}

.picker__nav--next:before {
    border-right: 0;
    border-left: .75em solid #000
}

.picker__nav--prev:hover, .picker__nav--next:hover {
    cursor: pointer;
    color: #000;
    background: #b1dcfb
}

.picker__nav--disabled, .picker__nav--disabled:hover, .picker__nav--disabled:before, .picker__nav--disabled:before:hover {
    cursor: default;
    background: 0;
    border-right-color: whitesmoke;
    border-left-color: whitesmoke
}

.picker__table {
    text-align: center;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    font-size: inherit;
    width: 100%;
    margin-top: .75em;
    margin-bottom: .5em
}

@media (min-height: 26.5em) {
    .picker__table {
        margin-bottom: .75em
    }
}

.picker__table td {
    margin: 0;
    padding: 0
}

.picker__weekday {
    width: 14.285714286%;
    font-size: .75em;
    padding-bottom: .25em;
    color: #999;
    font-weight: 500
}

@media (min-height: 26.5em) {
    .picker__weekday {
        padding-bottom: .5em
    }
}

.picker__day {
    padding: .3125em 0;
    font-weight: 200;
    border: 1px solid transparent
}

.picker__day--today {
    color: #00c185;
    position: relative
}

.picker__day--today:before {
    content: " ";
    position: absolute;
    top: 2px;
    right: 2px;
    width: 0;
    height: 0;
    border-top: .5em solid #00c185;
    border-left: .5em solid transparent
}

.picker__day--selected, .picker__day--selected:hover {
    border-color: #0089ec
}

.picker__day--highlighted {
    background: #b1dcfb
}

.picker__day--disabled:before {
    border-top-color: #aaa
}

.picker__day--outfocus {
    color: #ddd;
    -ms-filter: "alpha(Opacity=66)";
    filter: alpha(opacity=66);
    -moz-opacity: .66;
    opacity: .66
}

.picker__day--infocus:hover, .picker__day--outfocus:hover {
    cursor: pointer;
    color: #000;
    background: #b1dcfb
}

.picker__day--highlighted:hover, .picker--focused .picker__day--highlighted {
    background: #00c185;
    color: #fff
}

.picker__day--disabled, .picker__day--disabled:hover {
    background: whitesmoke;
    border-color: whitesmoke;
    color: #ddd;
    cursor: default
}

.picker__footer {
    text-align: center
}

.picker__button--today, .picker__button--clear {
    border: 1px solid #fff;
    background: #fff;
    font-size: .8em;
    padding: .66em 0;
    font-weight: 700;
    width: 50%;
    display: inline-block;
    vertical-align: bottom
}

.picker__button--today:hover, .picker__button--clear:hover {
    cursor: pointer;
    color: #000;
    background: #b1dcfb;
    border-bottom-color: #b1dcfb
}

.picker__button--today:focus, .picker__button--clear:focus {
    background: #b1dcfb;
    border-color: #00c185;
    outline: 0
}

.picker__button--today:before, .picker__button--clear:before {
    position: relative;
    display: inline-block;
    height: 0
}

.picker__button--today:before {
    content: " ";
    margin-right: .45em;
    top: -.05em;
    width: 0;
    border-top: .66em solid #00c185;
    border-left: .66em solid transparent
}

.picker__button--clear:before {
    content: "\D7";
    margin-right: .35em;
    top: -.1em;
    color: #e20;
    vertical-align: top;
    font-size: 1.1em
}

/* tooltips */
.tooltip {
    display: inline;
    position: relative;
}

.tooltip:hover:after {
    background: #000;
    background: rgba(0, 0, 0, .5);
    border-radius: 5px;
    bottom: 40px;
    color: #fff;
    content: attr(title);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 150px;
}

.tooltip:hover:before {
    border: solid;
    border-color: #666 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 35px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}

.tooltip2 {
    display: inline;
    position: relative;
}

.tooltip2:hover:after {
    background: #000;
    background: rgba(0, 0, 0, .5);
    border-radius: 5px;
    top: 40px;
    color: #fff;
    content: attr(title);
    right: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 150px;
}

.tooltip2:hover:before {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;

    border-bottom: 5px solid #666;
    top: 35px;
    content: "";
    right: 50%;
    position: absolute;
    z-index: 99;
}

.helpImage {
    border: solid 1px #333;
}

/* pinterest style grid */
.pinGridWrapper {
    width: 98%;
    margin: auto;
}

.pinGridWrapper h1 {
    font-size: 2.0em;
    padding: 20px 0 20px 0;
    text-align: center;
}

.pinGrid {
    -webkit-column-count: 2;
    -webkit-column-gap: 15px;
    -moz-column-count: 2;
    -moz-column-gap: 15px;
    column-count: 2;
    column-gap: 15px;
}

.pin {
    display: inline-block;
    background: #fff;
    border-radius: 10px;
    -webkit-box-shadow: 0 6px 6px -6px #ccc;
    -moz-box-shadow: 0 6px 6px -6px #ccc;
    box-shadow: 0 6px 6px -6px #ccc;
    margin: 0 0 15px;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    width: 260px;
    max-width: 100%;
}

.pin img {
    width: 100%;
    height: auto;
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
}

.pin h2 {
    font-size: 1.2em;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

.pin p {
    padding: 10px;
    color: #333;
}

@media (min-width: 870px) {
    .pinGrid {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }
}

@media (min-width: 1160px) {
    .pinGrid {
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
    }
}

@media (min-width: 1450px) {
    .pinGrid {
        -webkit-column-count: 5;
        -moz-column-count: 5;
        column-count: 5;
    }
}