// Utility Color Classes
.wpcf7 li {  list-style-type: none !important; margin: 0 !important;}
.wpcf7 ul { padding: 0 !important; }
.wpcf7 {
  li, ul, select, input, div, span, p  { background: transparent; margin: 0;
padding: 0;
border: 0; font-size: inherit;

.wpcf7-form-control {   background: none !important;;  }
 .wpcf7-form-control-wrap {   background-image: none !important; }
.wpcf7-range { display: inline-block !important;}
}
.wpcf7-form ul:not(.browser-default)>li { margin-left: 0; margin-right: 0; }
}

//.success {
//
//}

// Google Color Palette defined: http://www.google.com/design/spec/style/color.html
// No Text Select
.no-select {
  user-select: none;
}

$materialize-red: (
  "base":       #e51c23,
  "lighten-5":  #fdeaeb,
  "lighten-4":  #f8c1c3,
  "lighten-3":  #f3989b,
  "lighten-2":  #ee6e73,
  "lighten-1":  #ea454b,
  "darken-1":   #d0181e,
  "darken-2":   #b9151b,
  "darken-3":   #a21318,
  "darken-4":   #8b1014,
);

$red: (
  "base":       #F44336,
  "lighten-5":  #FFEBEE,
  "lighten-4":  #FFCDD2,
  "lighten-3":  #EF9A9A,
  "lighten-2":  #E57373,
  "lighten-1":  #EF5350,
  "darken-1":   #E53935,
  "darken-2":   #D32F2F,
  "darken-3":   #C62828,
  "darken-4":   #B71C1C,
  "accent-1":    #FF8A80,
  "accent-2":    #FF5252,
  "accent-3":    #FF1744,
  "accent-4":    #D50000
);

$pink: (
  "base":       #e91e63,
  "lighten-5":  #fce4ec,
  "lighten-4":  #f8bbd0,
  "lighten-3":  #f48fb1,
  "lighten-2":  #f06292,
  "lighten-1":  #ec407a,
  "darken-1":   #d81b60,
  "darken-2":   #c2185b,
  "darken-3":   #ad1457,
  "darken-4":   #880e4f,
  "accent-1":    #ff80ab,
  "accent-2":    #ff4081,
  "accent-3":    #f50057,
  "accent-4":    #c51162
);

$purple: (
  "base":       #9c27b0,
  "lighten-5":  #f3e5f5,
  "lighten-4":  #e1bee7,
  "lighten-3":  #ce93d8,
  "lighten-2":  #ba68c8,
  "lighten-1":  #ab47bc,
  "darken-1":   #8e24aa,
  "darken-2":   #7b1fa2,
  "darken-3":   #6a1b9a,
  "darken-4":   #4a148c,
  "accent-1":    #ea80fc,
  "accent-2":    #e040fb,
  "accent-3":    #d500f9,
  "accent-4":    #aa00ff
);

$deep-purple: (
  "base":       #673ab7,
  "lighten-5":  #ede7f6,
  "lighten-4":  #d1c4e9,
  "lighten-3":  #b39ddb,
  "lighten-2":  #9575cd,
  "lighten-1":  #7e57c2,
  "darken-1":   #5e35b1,
  "darken-2":   #512da8,
  "darken-3":   #4527a0,
  "darken-4":   #311b92,
  "accent-1":    #b388ff,
  "accent-2":    #7c4dff,
  "accent-3":    #651fff,
  "accent-4":    #6200ea
);

$indigo: (
  "base":       #3f51b5,
  "lighten-5":  #e8eaf6,
  "lighten-4":  #c5cae9,
  "lighten-3":  #9fa8da,
  "lighten-2":  #7986cb,
  "lighten-1":  #5c6bc0,
  "darken-1":   #3949ab,
  "darken-2":   #303f9f,
  "darken-3":   #283593,
  "darken-4":   #1a237e,
  "accent-1":    #8c9eff,
  "accent-2":    #536dfe,
  "accent-3":    #3d5afe,
  "accent-4":    #304ffe
);

$blue: (
  "base":       #2196F3,
  "lighten-5":  #E3F2FD,
  "lighten-4":  #BBDEFB,
  "lighten-3":  #90CAF9,
  "lighten-2":  #64B5F6,
  "lighten-1":  #42A5F5,
  "darken-1":   #1E88E5,
  "darken-2":   #1976D2,
  "darken-3":   #1565C0,
  "darken-4":   #0D47A1,
  "accent-1":    #82B1FF,
  "accent-2":    #448AFF,
  "accent-3":    #2979FF,
  "accent-4":    #2962FF
);

$light-blue: (
  "base":       #03a9f4,
  "lighten-5":  #e1f5fe,
  "lighten-4":  #b3e5fc,
  "lighten-3":  #81d4fa,
  "lighten-2":  #4fc3f7,
  "lighten-1":  #29b6f6,
  "darken-1":   #039be5,
  "darken-2":   #0288d1,
  "darken-3":   #0277bd,
  "darken-4":   #01579b,
  "accent-1":    #80d8ff,
  "accent-2":    #40c4ff,
  "accent-3":    #00b0ff,
  "accent-4":    #0091ea
);

$cyan: (
  "base":       #00bcd4,
  "lighten-5":  #e0f7fa,
  "lighten-4":  #b2ebf2,
  "lighten-3":  #80deea,
  "lighten-2":  #4dd0e1,
  "lighten-1":  #26c6da,
  "darken-1":   #00acc1,
  "darken-2":   #0097a7,
  "darken-3":   #00838f,
  "darken-4":   #006064,
  "accent-1":    #84ffff,
  "accent-2":    #18ffff,
  "accent-3":    #00e5ff,
  "accent-4":    #00b8d4
);

$teal: (
  "base":       #009688,
  "lighten-5":  #e0f2f1,
  "lighten-4":  #b2dfdb,
  "lighten-3":  #80cbc4,
  "lighten-2":  #4db6ac,
  "lighten-1":  #26a69a,
  "darken-1":   #00897b,
  "darken-2":   #00796b,
  "darken-3":   #00695c,
  "darken-4":   #004d40,
  "accent-1":    #a7ffeb,
  "accent-2":    #64ffda,
  "accent-3":    #1de9b6,
  "accent-4":    #00bfa5
);

$green: (
  "base":       #4CAF50,
  "lighten-5":  #E8F5E9,
  "lighten-4":  #C8E6C9,
  "lighten-3":  #A5D6A7,
  "lighten-2":  #81C784,
  "lighten-1":  #66BB6A,
  "darken-1":   #43A047,
  "darken-2":   #388E3C,
  "darken-3":   #2E7D32,
  "darken-4":   #1B5E20,
  "accent-1":    #B9F6CA,
  "accent-2":    #69F0AE,
  "accent-3":    #00E676,
  "accent-4":    #00C853
);

$light-green: (
  "base":       #8bc34a,
  "lighten-5":  #f1f8e9,
  "lighten-4":  #dcedc8,
  "lighten-3":  #c5e1a5,
  "lighten-2":  #aed581,
  "lighten-1":  #9ccc65,
  "darken-1":   #7cb342,
  "darken-2":   #689f38,
  "darken-3":   #558b2f,
  "darken-4":   #33691e,
  "accent-1":    #ccff90,
  "accent-2":    #b2ff59,
  "accent-3":    #76ff03,
  "accent-4":    #64dd17
);

$lime: (
  "base":       #cddc39,
  "lighten-5":  #f9fbe7,
  "lighten-4":  #f0f4c3,
  "lighten-3":  #e6ee9c,
  "lighten-2":  #dce775,
  "lighten-1":  #d4e157,
  "darken-1":   #c0ca33,
  "darken-2":   #afb42b,
  "darken-3":   #9e9d24,
  "darken-4":   #827717,
  "accent-1":    #f4ff81,
  "accent-2":    #eeff41,
  "accent-3":    #c6ff00,
  "accent-4":    #aeea00
);

$yellow: (
  "base":       #ffeb3b,
  "lighten-5":  #fffde7,
  "lighten-4":  #fff9c4,
  "lighten-3":  #fff59d,
  "lighten-2":  #fff176,
  "lighten-1":  #ffee58,
  "darken-1":   #fdd835,
  "darken-2":   #fbc02d,
  "darken-3":   #f9a825,
  "darken-4":   #f57f17,
  "accent-1":    #ffff8d,
  "accent-2":    #ffff00,
  "accent-3":    #ffea00,
  "accent-4":    #ffd600
);

$amber: (
  "base":       #ffc107,
  "lighten-5":  #fff8e1,
  "lighten-4":  #ffecb3,
  "lighten-3":  #ffe082,
  "lighten-2":  #ffd54f,
  "lighten-1":  #ffca28,
  "darken-1":   #ffb300,
  "darken-2":   #ffa000,
  "darken-3":   #ff8f00,
  "darken-4":   #ff6f00,
  "accent-1":    #ffe57f,
  "accent-2":    #ffd740,
  "accent-3":    #ffc400,
  "accent-4":    #ffab00
);

$orange: (
  "base":       #ff9800,
  "lighten-5":  #fff3e0,
  "lighten-4":  #ffe0b2,
  "lighten-3":  #ffcc80,
  "lighten-2":  #ffb74d,
  "lighten-1":  #ffa726,
  "darken-1":   #fb8c00,
  "darken-2":   #f57c00,
  "darken-3":   #ef6c00,
  "darken-4":   #e65100,
  "accent-1":    #ffd180,
  "accent-2":    #ffab40,
  "accent-3":    #ff9100,
  "accent-4":    #ff6d00
);

$deep-orange: (
  "base":       #ff5722,
  "lighten-5":  #fbe9e7,
  "lighten-4":  #ffccbc,
  "lighten-3":  #ffab91,
  "lighten-2":  #ff8a65,
  "lighten-1":  #ff7043,
  "darken-1":   #f4511e,
  "darken-2":   #e64a19,
  "darken-3":   #d84315,
  "darken-4":   #bf360c,
  "accent-1":    #ff9e80,
  "accent-2":    #ff6e40,
  "accent-3":    #ff3d00,
  "accent-4":    #dd2c00
);

$brown: (
  "base":       #795548,
  "lighten-5":  #efebe9,
  "lighten-4":  #d7ccc8,
  "lighten-3":  #bcaaa4,
  "lighten-2":  #a1887f,
  "lighten-1":  #8d6e63,
  "darken-1":   #6d4c41,
  "darken-2":   #5d4037,
  "darken-3":   #4e342e,
  "darken-4":   #3e2723
);

$blue-grey: (
  "base":       #607d8b,
  "lighten-5":  #eceff1,
  "lighten-4":  #cfd8dc,
  "lighten-3":  #b0bec5,
  "lighten-2":  #90a4ae,
  "lighten-1":  #78909c,
  "darken-1":   #546e7a,
  "darken-2":   #455a64,
  "darken-3":   #37474f,
  "darken-4":   #263238
);

$grey: (
  "base":       #9e9e9e,
  "lighten-5":  #fafafa,
  "lighten-4":  #f5f5f5,
  "lighten-3":  #eeeeee,
  "lighten-2":  #e0e0e0,
  "lighten-1":  #bdbdbd,
  "darken-1":   #757575,
  "darken-2":   #616161,
  "darken-3":   #424242,
  "darken-4":   #212121
);

$shades: (
  "black":        #000000,
  "white":        #FFFFFF,
  "transparent":  transparent
);

$colors: (
  "materialize-red": $materialize-red,
  "red": $red,
  "pink": $pink,
  "purple": $purple,
  "deep-purple": $deep-purple,
  "indigo": $indigo,
  "blue": $blue,
  "light-blue": $light-blue,
  "cyan": $cyan,
  "teal": $teal,
  "green": $green,
  "light-green": $light-green,
  "lime": $lime,
  "yellow": $yellow,
  "amber": $amber,
  "orange": $orange,
  "deep-orange": $deep-orange,
  "brown": $brown,
  "blue-grey": $blue-grey,
  "grey": $grey,
  "shades": $shades
) !default;


// Color Classes

@each $color_name, $color in $colors {
  @each $color_type, $color_value in $color {
    @if $color_type == "base" {
      .#{$color_name} {
        background-color: $color_value !important;
      }
      .#{$color_name}-text {
        color: $color_value !important;
      }
    }
    @else if $color_name != "shades" {
      .#{$color_name}.#{$color_type} {
        background-color: $color_value !important;
      }
      .#{$color_name}-text.text-#{$color_type} {
        color: $color_value !important;
      }
    }
  }
}

// Shade classes
@each $color, $color_value in $shades {
  .#{$color} {
    background-color: $color_value !important;
  }
  .#{$color}-text {
    color: $color_value !important;
  }
}


// usage: color("name_of_color", "type_of_color")
// to avoid to repeating map-get($colors, ...)

@function color($color, $type) {
  @if map-has-key($colors, $color) {
    $curr_color: map-get($colors, $color);
    @if map-has-key($curr_color, $type) {
      @return map-get($curr_color, $type);
    }
  }
  @warn "Unknown `#{$color}` - `#{$type}` in $colors.";
  @return null;
}



$primary-color: color("materialize-red", "lighten-2") !default;
$primary-color-light: lighten($primary-color, 15%) !default;
$primary-color-dark: darken($primary-color, 15%) !default;

$secondary-color: color("teal", "lighten-1") !default;
$success-color: color("green", "base") !default;
$error-color: color("red", "base") !default;
$link-color: color("light-blue", "darken-1") !default;


// 2. Badges
// ==========================================================================

$badge-bg-color: $secondary-color !default;
$badge-height: 22px !default;


// 3. Buttons
// ==========================================================================

// Shared styles
$button-border: none !default;
$button-background-focus: lighten($secondary-color, 4%) !default;
$button-font-size: 1rem !default;
$button-icon-font-size: 1.3rem !default;
$button-height: 36px !default;
$button-padding: 0 2rem !default;
$button-radius: 2px !default;

// Disabled styles
$button-disabled-background: #DFDFDF !default;
$button-disabled-color: #9F9F9F !default;

// Raised buttons
$button-raised-background: $secondary-color !default;
$button-raised-background-hover: lighten($button-raised-background, 5%) !default;
$button-raised-color: #fff !default;

// Large buttons
$button-large-icon-font-size: 1.6rem !default;
$button-large-height: $button-height * 1.5 !default;

// Flat buttons
$button-flat-color: #343434 !default;
$button-flat-disabled-color: lighten(#999, 10%) !default;

// Floating buttons
$button-floating-background: $secondary-color !default;
$button-floating-background-hover: $button-floating-background !default;
$button-floating-color: #fff !default;
$button-floating-size: 40px !default;
$button-floating-large-size: 56px !default;
$button-floating-radius: 50% !default;


// 4. Cards
// ==========================================================================

$card-padding: 24px !default;
$card-bg-color: #fff !default;
$card-link-color: color("orange", "accent-2") !default;
$card-link-color-light: lighten($card-link-color, 20%) !default;


// 5. Carousel
// ==========================================================================

$carousel-height: 400px !default;
$carousel-item-height: $carousel-height / 2 !default;
$carousel-item-width: $carousel-item-height !default;


// 6. Collapsible
// ==========================================================================

$collapsible-height: 3rem !default;
$collapsible-line-height: $collapsible-height !default;
$collapsible-header-color: #fff !default;
$collapsible-border-color: #ddd !default;


// 7. Chips
// ==========================================================================

$chip-bg-color: #e4e4e4 !default;
$chip-border-color: #9e9e9e !default;
$chip-selected-color: #26a69a !default;
$chip-margin: 5px !default;


// 8. Date + Time Picker
// ==========================================================================

$datepicker-display-font-size: 2.8rem;
$datepicker-weekday-color: rgba(0, 0, 0, .87) !default;
$datepicker-weekday-bg: darken($secondary-color, 7%) !default;
$datepicker-date-bg: $secondary-color !default;
$datepicker-year: rgba(255, 255, 255, .7) !default;
$datepicker-focus: rgba(0,0,0, .05) !default;
$datepicker-selected: $secondary-color !default;
$datepicker-selected-outfocus: desaturate(lighten($secondary-color, 35%), 15%) !default;

$timepicker-clock-color: rgba(0, 0, 0, .87) !default;
$timepicker-clock-plate-bg: #eee;


// 9. Dropdown
// ==========================================================================

$dropdown-bg-color: #fff !default;
$dropdown-hover-bg-color: #eee !default;
$dropdown-color: $secondary-color !default;
$dropdown-item-height: 50px !default;


// 11. Forms
// ==========================================================================

// Text Inputs + Textarea
$input-height: 3rem !default;
$input-border-color: color("grey", "base") !default;
$input-border: 1px solid $input-border-color !default;
$input-background: #fff !default;
$input-error-color: $error-color !default;
$input-success-color: $success-color !default;
$input-focus-color: $secondary-color !default;
$input-font-size: 1rem !default;
$input-margin-bottom: 20px;
$input-margin: 0 0 $input-margin-bottom 0 !default;
$input-padding: 0 !default;
$input-transition: all .3s !default;
$label-font-size: .8rem !default;
$input-disabled-color: rgba(0,0,0, .42) !default;
$input-disabled-solid-color: #949494 !default;
$input-disabled-border: 1px dotted $input-disabled-color !default;
$input-invalid-border: 1px solid $input-error-color !default;
$placeholder-text-color: lighten($input-border-color, 20%) !default;

// Radio Buttons
$radio-fill-color: $secondary-color !default;
$radio-empty-color: #5a5a5a !default;
$radio-border: 2px solid $radio-fill-color !default;

// Range
$range-height: 14px !default;
$range-width: 14px !default;
$track-height: 3px !default;

// Select
$select-border: 1px solid #f2f2f2 !default;
$select-background: rgba(255, 255, 255, 0.90) !default;
$select-focus: 1px solid lighten($secondary-color, 47%) !default;
$select-option-hover: rgba(0,0,0,.06) !default;
$select-option-focus: rgba(0,0,0,.03) !default;
$select-padding: 5px !default;
$select-radius: 2px !default;
$select-disabled-color: rgba(0,0,0,.3) !default;

// Switches
$switch-bg-color: $secondary-color !default;
$switch-checked-lever-bg: desaturate(lighten($switch-bg-color, 25%), 25%) !default;
$switch-unchecked-bg: #F1F1F1 !default;
$switch-unchecked-lever-bg: rgba(0,0,0,.38) !default;
$switch-radius: 15px !default;


// 12. Global
// ==========================================================================

// Media Query Ranges
$small-screen-up: 601px !default;
$medium-screen-up: 993px !default;
$large-screen-up: 1201px !default;
$small-screen: 600px !default;
$medium-screen: 992px !default;
$large-screen: 1200px !default;

$medium-and-up: "only screen and (min-width : #{$small-screen-up})" !default;
$large-and-up: "only screen and (min-width : #{$medium-screen-up})" !default;
$extra-large-and-up: "only screen and (min-width : #{$large-screen-up})" !default;
$small-and-down: "only screen and (max-width : #{$small-screen})" !default;
$medium-and-down: "only screen and (max-width : #{$medium-screen})" !default;
$medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})" !default;


// 13. Grid
// ==========================================================================

$num-cols: 12 !default;
$gutter-width: 1.5rem !default;
$element-top-margin: $gutter-width/3 !default;
$element-bottom-margin: ($gutter-width*2)/3 !default;


// 14. Navigation Bar
// ==========================================================================

$navbar-height: 64px !default;
$navbar-line-height: $navbar-height !default;
$navbar-height-mobile: 56px !default;
$navbar-line-height-mobile: $navbar-height-mobile !default;
$navbar-font-size: 1rem !default;
$navbar-font-color: #fff !default;
$navbar-brand-font-size: 2.1rem !default;

// 15. Side Navigation
// ==========================================================================

$sidenav-font-size: 14px !default;
$sidenav-font-color: rgba(0,0,0,.87) !default;
$sidenav-bg-color: #fff !default;
$sidenav-padding: 16px !default;
$sidenav-item-height: 48px !default;
$sidenav-line-height: $sidenav-item-height !default;


// 16. Photo Slider
// ==========================================================================

$slider-bg-color: color('grey', 'base') !default;
$slider-bg-color-light: color('grey', 'lighten-2') !default;
$slider-indicator-color: color('green', 'base') !default;


// 17. Spinners | Loaders
// ==========================================================================

$spinner-default-color: $secondary-color !default;


// 18. Tabs
// ==========================================================================

$tabs-underline-color: $primary-color-light !default;
$tabs-text-color: $primary-color !default;
$tabs-bg-color: #fff !default;


// 19. Tables
// ==========================================================================

$table-border-color: #d0d0d0 !default;
$table-striped-color: #f2f2f2 !default;


// 20. Toasts
// ==========================================================================

$toast-height: 48px !default;
$toast-color: #323232 !default;
$toast-text-color: #fff !default;
$toast-action-color: #eeff41;


// 21. Typography
// ==========================================================================

$off-black: rgba(0, 0, 0, 0.87) !default;
// Header Styles
$h1-fontsize: 4.2rem !default;
$h2-fontsize: 3.56rem !default;
$h3-fontsize: 2.92rem !default;
$h4-fontsize: 2.28rem !default;
$h5-fontsize: 1.64rem !default;
$h6-fontsize: 1rem !default;


// 22. Footer
// ==========================================================================

$footer-font-color: #fff !default;
$footer-bg-color: $primary-color !default;
$footer-copyright-font-color: rgba(255,255,255,.8) !default;
$footer-copyright-bg-color: rgba(51,51,51,.08) !default;


// 23. Flow Text
// ==========================================================================

$range : $large-screen - $small-screen !default;
$intervals: 20 !default;
$interval-size: $range / $intervals !default;


// 24. Collections
// ==========================================================================

$collection-border-color: #e0e0e0 !default;
$collection-bg-color: #fff !default;
$collection-active-bg-color: $secondary-color !default;
$collection-active-color: lighten($secondary-color, 55%) !default;
$collection-hover-bg-color: #ddd !default;
$collection-link-color: $secondary-color !default;
$collection-line-height: 1.5rem !default;


// 25. Progress Bar
// ==========================================================================

$progress-bar-color: $secondary-color !default;

.wpcf7-form {

/* ==========================================================================
   $BASE-PICKER
   ========================================================================== */
/**
 * Note: the root picker element should *NOT* be styled more than what's here.
 */
.picker {
  font-size: 16px;
  text-align: left;
  line-height: 1.2;
  color: #000000;
  position: absolute;
  z-index: 999999;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: none;
}
/**
 * The picker input element.
 */
.picker__input {
  cursor: default;
}
/**
 * When the picker is opened, the input element is "activated".
 */
.picker__input.picker__input--active {
  border-color: #0089ec;
}
/**
 * The holder is the only "scrollable" top-level container element.
 */
.picker__holder {
  width: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/*!
 * Default mobile-first, responsive styling for pickadate.js
 * Demo: http://amsul.github.io/pickadate.js
 */
/**
 * Note: the root picker element should *NOT* be styled more than what's here.
 */
/**
 * Make the holder and frame fullscreen.
 */
.picker__holder,
.picker__frame {
  bottom: 0;
  left: 0;
  right: 0;
  top: 100%;
}
/**
 * The holder should overlay the entire screen.
 */
.picker__holder {
  position: fixed;
  -webkit-transition: background 0.15s ease-out, top 0s 0.15s;
  -moz-transition: background 0.15s ease-out, top 0s 0.15s;
  transition: background 0.15s ease-out, top 0s 0.15s;
  -webkit-backface-visibility: hidden;
}
/**
 * The frame that bounds the box contents of the picker.
 */
.picker__frame {
  position: absolute;
  margin: 0 auto;
  min-width: 256px;

//  picker width
  width: 300px;
  max-height: 350px;

  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  opacity: 0;
  -webkit-transition: all 0.15s ease-out;
  -moz-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}
@media (min-height: 28.875em) {
  .picker__frame {
    overflow: visible;
    top: auto;
    bottom: -100%;
    max-height: 80%;
  }
}
@media (min-height: 40.125em) {
  .picker__frame {
    margin-bottom: 7.5%;
  }
}
/**
 * The wrapper sets the stage to vertically align the box contents.
 */
.picker__wrap {
  display: table;
  width: 100%;
  height: 100%;
}
@media (min-height: 28.875em) {
  .picker__wrap {
    display: block;
  }
}
/**
 * The box contains all the picker contents.
 */
.picker__box {
  background: #ffffff;
  display: table-cell;
  vertical-align: middle;
}
//@media (min-height: 26.5em) {
//  .picker__box {
////    font-size: 1.25em;
//  }
//}
@media (min-height: 28.875em) {
  .picker__box {
    display: block;

//    picker header font-size
//    font-size: 1rem;

    border: 1px solid #777777;
    border-top-color: #898989;
    border-bottom-width: 0;
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
    -webkit-box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);
    -moz-box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);
    box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);
  }
}
//@media (min-height: 40.125em) {
//  .picker__box {
//    font-size: 1.1rem;
//    border-bottom-width: 1px;
//    -webkit-border-radius: 5px;
//    -moz-border-radius: 5px;
//    border-radius: 5px;
//  }
//}
/**
 * When the picker opens...
 */
.picker--opened .picker__holder {
  top: 0;
  background: transparent;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1E000000,endColorstr=#1E000000)";
  zoom: 1;
  background: rgba(0, 0, 0, 0.32);
  -webkit-transition: background 0.15s ease-out;
  -moz-transition: background 0.15s ease-out;
  transition: background 0.15s ease-out;
}
.picker--opened .picker__frame {
  top: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  opacity: 1;
}
@media (min-height: 35.875em) {
  .picker--opened .picker__frame {
    top: 10%;
    bottom: auto;
  }
}
/**
 * For `large` screens, transform into an inline picker.
 */

/* ==========================================================================
   CUSTOM MATERIALIZE STYLES
   ========================================================================== */

.picker__input.picker__input--active {
  border-color: color("blue", "lighten-5");
}

.picker__frame {
  margin: 0 auto;
  max-width: 325px;
}

@media (min-height: 38.875em) {
  .picker--opened .picker__frame {
    top: 10%;
    bottom: auto;
  }
}

@media only screen and (min-width: 601px) {
	.picker__box {
		display:flex;
	}
	.picker__frame {
		width: 80%;
		max-width:600px;
	}
}

/* ==========================================================================
   $BASE-DATE-PICKER
   ========================================================================== */
/**
 * The picker box.
 */
.picker__box {
  padding: 0;
  border-radius: 2px;
  overflow: hidden;
}
/**
 * The header containing the month and year stuff.
 */
.picker__header {
  text-align: center;
  position: relative;
  margin-top: .75em;
}
/**
 * The month and year labels.
 */
.picker__month,
.picker__year {
//  font-weight: 500;
  display: inline-block;
  margin-left: .25em;
  margin-right: .25em;
}
/**
 * The month and year selectors.
 */
.picker__select--month,
.picker__select--year {

  height: 2em;
  padding: 0;
  margin-left: .25em;
  margin-right: .25em;
}

// Modified
.picker__select--month.browser-default {
  display: inline;
  background-color: #FFFFFF;
  width: 40%;
}
.picker__select--year.browser-default {
  display: inline;
  background-color: #FFFFFF;
  width: 26%;
}
.picker__select--month:focus,
.picker__select--year:focus {
  border-color: $datepicker-focus;
}
/**
 * The month navigation buttons.
 */
.picker__nav--prev,
.picker__nav--next {
  position: absolute;
  padding: .5em 1.25em;
  width: 1em;
  height: 1em;
  box-sizing: content-box;
  top: -0.25em;
}
//@media (min-width: 24.5em) {
//  .picker__nav--prev,
//  .picker__nav--next {
//    top: -0.33em;
//  }
//}
.picker__nav--prev {
  left: -1em;
  padding-right: 1.25em;
}
//@media (min-width: 24.5em) {
//  .picker__nav--prev {
//    padding-right: 1.5em;
//  }
//}
.picker__nav--next {
  right: -1em;
  padding-left: 1.25em;
}
//@media (min-width: 24.5em) {
//  .picker__nav--next {
//    padding-left: 1.5em;
//  }
//}

.picker__nav--disabled,
.picker__nav--disabled:hover,
.picker__nav--disabled:before,
.picker__nav--disabled:before:hover {
  cursor: default;
  background: none;
  border-right-color: #f5f5f5;
  border-left-color: #f5f5f5;
}
/**
 * The calendar table of dates
 */
.picker__table {
  text-align: center;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 1rem !important;
  width: 100%;
  margin-top: .75em;
  margin-bottom: .5em;
}



.picker__table th, .picker__table td {
  text-align: center;
}






.picker__table td {
  margin: 0;
  padding: 0;
}
/**
 * The weekday labels
 */
.picker__weekday {
  width: 14.285714286%;
  font-size: .75em;
  padding-bottom: .25em;
  color: #999999;
  font-weight: 500;
  /* Increase the spacing a tad */
}
@media (min-height: 33.875em) {
  .picker__weekday {
    padding-bottom: .5em;
  }
}
/**
 * The days on the calendar
 */

.picker__day--today {
  position: relative;
  color: #595959;
  letter-spacing: -.3;
  padding: .75rem 0;
  font-weight: 400;
  border: 1px solid transparent;

}

//.picker__day--today:before {
//  content: " ";
//  position: absolute;
//  top: 2px;
//  right: 2px;
//  width: 0;
//  height: 0;
//  border-top: 0.5em solid #0059bc;
//  border-left: .5em solid transparent;
//}
.picker__day--disabled:before {
  border-top-color: #aaaaaa;
}


.picker__day--infocus:hover{
  cursor: pointer;
  color: #000;
  font-weight: 500;
}

.picker__day--outfocus {
  display: none;
  padding: .75rem 0;
  color: #fff;

}
.picker__day--outfocus:hover {
  cursor: pointer;
  color: #dddddd;
//  background: #b1dcfb;
  font-weight: 500;
}


.picker__day--highlighted {
//  border-color: #0089ec;
}
.picker__day--highlighted:hover,
.picker--focused .picker__day--highlighted {
  cursor: pointer;
//  color: #000000;
//  background: #b1dcfb;
//  font-weight: 500;
}
.picker__day--selected,
.picker__day--selected:hover,
.picker--focused .picker__day--selected {


//  Circle background
   border-radius: 50%;
  transform: scale(.75);
  background: #0089ec;
  color: #ffffff;
}
.picker__day--disabled,
.picker__day--disabled:hover,
.picker--focused .picker__day--disabled {
  background: #f5f5f5;
  border-color: #f5f5f5;
  color: #dddddd;
  cursor: default;
}
.picker__day--highlighted.picker__day--disabled,
.picker__day--highlighted.picker__day--disabled:hover {
  background: #bbbbbb;
}
/**
 * The footer containing the "today", "clear", and "close" buttons.
 */
.picker__footer {
  text-align: right;
}
.picker__button--today,
.picker__button--clear,
.picker__button--close {
  border: 1px solid #ffffff;
  background: #ffffff;
  font-size: .8em;
  padding: .66em 0;
  font-weight: bold;
  width: 33%;
  display: inline-block;
  vertical-align: bottom;
}
.picker__button--today:hover,
.picker__button--clear:hover,
.picker__button--close:hover {
  cursor: pointer;
  color: #000000;
  background: #b1dcfb;
  border-bottom-color: #b1dcfb;
}
.picker__button--today:focus,
.picker__button--clear:focus,
.picker__button--close:focus {
  background: #b1dcfb;
  border-color: $datepicker-focus;
  outline: none;
}
.picker__button--today:before,
.picker__button--clear:before,
.picker__button--close:before {
  position: relative;
  display: inline-block;
  height: 0;
}
.picker__button--today:before,
.picker__button--clear:before {
  content: " ";
  margin-right: .45em;
}
.picker__button--today:before {
  top: -0.05em;
  width: 0;
  border-top: 0.66em solid #0059bc;
  border-left: .66em solid transparent;
}
.picker__button--clear:before {
  top: -0.25em;
  width: .66em;
  border-top: 3px solid #ee2200;
}
.picker__button--close:before {
  content: "\D7";
  top: -0.1em;
  vertical-align: top;
  font-size: 1.1em;
  margin-right: .35em;
  color: #777777;
}
.picker__button--today[disabled],
.picker__button--today[disabled]:hover {
  background: #f5f5f5;
  border-color: #f5f5f5;
  color: #dddddd;
  cursor: default;
}
.picker__button--today[disabled]:before {
  border-top-color: #aaaaaa;
}

/* ==========================================================================
   CUSTOM MATERIALIZE STYLES
   ========================================================================== */
/*.picker__box {
  border-radius: 2px;
  overflow: hidden;
}*/

.picker__date-display {
  text-align: left;
  background-color: $datepicker-date-bg;
  color: #fff;
  padding: 18px;
  font-weight: 300;
}

@media only screen and (min-width: 601px) {
	.picker__date-display {
		flex:1;
	}
	.picker__weekday-display {
		display:block;
	}
	.picker__container__wrapper {
		flex:2
	}
}

.picker__nav--prev:hover,
.picker__nav--next:hover {
  cursor: pointer;
  color: #000000;
  background: $datepicker-selected-outfocus;
}

.picker__weekday-display {
  font-weight: 500;
  font-size: $datepicker-display-font-size;
  margin-right: 5px;
  margin-top: 4px;
}

.picker__month-display {
  //text-transform: uppercase;
  font-size: $datepicker-display-font-size;
  font-weight: 500;
}
.picker__day-display {
  font-size: $datepicker-display-font-size;
  font-weight: 500;
  margin-right: 5px;
}
.picker__year-display {
  font-size: 1.5rem;
  font-weight: 500;
  color: $datepicker-year;
}

/*.picker__box {
  padding: 0;
}*/
.picker__calendar-container {
  padding: 0 1rem;

  thead {
    border: none;
  }
}

// Calendar
.picker__table {
  margin-top: 0;
  margin-bottom: .5em;
}

.picker__day--infocus {
  color: $datepicker-weekday-color;
  letter-spacing: -.3px;
  padding: 0.75rem 0;
  font-weight: 400;
  border: 1px solid transparent !important;
  line-height: 1 !important;
  font-size: 15px;
}
@media only screen and (min-width: 601px) {
	.picker__day--infocus {
		padding: 1.1rem 0;
	}
}


//Today style
.picker__day.picker__day--today {
  color: $datepicker-selected;
}

.picker__day.picker__day--today.picker__day--selected {
  color: #fff;
}

// Table Header
.picker__weekday {
  font-size: .9rem;
}


.picker__day--selected,
.picker__day--selected:hover,
.picker--focused .picker__day--selected {
  // Circle background
  border-radius: 50%;
  transform: scale(.9);
  background-color: $datepicker-selected;
  &.picker__day--outfocus {
  background-color: $datepicker-selected-outfocus;
  }
  color: #ffffff;
}

.picker__footer {
  text-align: right;
  padding: 5px 10px;
}

// Materialize modified
.picker__close, .picker__today, .picker__clear {
  font-size: 1.1rem;
  padding: 0 1rem;
  color: $datepicker-selected;
}
.picker__clear {
	color:#f44336 !important;
	float:left;
}

//month nav buttons
.picker__nav--prev:before,
.picker__nav--next:before {
  content: " ";
  border-top: .5em solid transparent;
  border-bottom: .5em solid transparent;
  border-right: 0.75em solid #676767;
  width: 0;
  height: 0;
  display: block;
  margin: 0 auto;
}
.picker__nav--next:before {
  border-right: 0;
  border-left: 0.75em solid #676767;
}
button.picker__today:focus, button.picker__clear:focus, button.picker__close:focus {
  background-color: rgba(150,150,150, 0.25);
}


/* This is needed for some mobile phones to display the Google Icon font properly */
.material-icons {
  text-rendering: optimizeLegibility;
  font-feature-settings: 'liga';
}


/* Checkboxes
   ========================================================================== */

/* CUSTOM CSS CHECKBOXES */
form p {
  margin-bottom: 10px;
  text-align: left;
}

form p:last-child {
  margin-bottom: 0;
}

/* Remove default checkbox */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

// Checkbox Styles
[type="checkbox"] {
  // Text Label Style
  + label {
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    display: inline-block;
    height: 25px;
    line-height: 25px;
    font-size: 1rem;
    user-select: none;
  }

  /* checkbox aspect */
  + label:before,
  &:not(.filled-in) + label:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    z-index: 0;
    border: 2px solid $radio-empty-color;
    border-radius: 1px;
    margin-top: 2px;
    transition: .2s;
  }

  &:not(.filled-in) + label:after {
    border: 0;
    transform: scale(0);
  }

  &:not(:checked):disabled + label:before {
    border: none;
    background-color: $input-disabled-color;
  }

  // Focused styles
  &.tabbed:focus + label:after {
    transform: scale(1);
    border: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 10px rgba(0,0,0,.1);
    background-color: rgba(0,0,0,.1);
  }
}

[type="checkbox"]:checked {
  + label:before {
    top: -4px;
    left: -5px;
    width: 12px;
    height: 22px;
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    border-right: $radio-border;
    border-bottom: $radio-border;
    transform: rotate(40deg);
    backface-visibility: hidden;
    transform-origin: 100% 100%;
  }

  &:disabled + label:before {
    border-right: 2px solid $input-disabled-color;
    border-bottom: 2px solid $input-disabled-color;
  }
}

/* Indeterminate checkbox */
[type="checkbox"]:indeterminate {
  +label:before {
    top: -11px;
    left: -12px;
    width: 10px;
    height: 22px;
    border-top: none;
    border-left: none;
    border-right: $radio-border;
    border-bottom: none;
    transform: rotate(90deg);
    backface-visibility: hidden;
    transform-origin: 100% 100%;
  }

  // Disabled indeterminate
  &:disabled + label:before {
    border-right: 2px solid $input-disabled-color;
    background-color: transparent;
  }
}

// Filled in Style
[type="checkbox"].filled-in {
  // General
  + label:after {
    border-radius: 2px;
  }

  + label:before,
  + label:after {
    content: '';
    left: 0;
    position: absolute;
    /* .1s delay is for check animation */
    transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;
    z-index: 1;
  }

  // Unchecked style
  &:not(:checked) + label:before {
    width: 0;
    height: 0;
    border: 3px solid transparent;
    left: 6px;
    top: 10px;
    transform: rotateZ(37deg);
    transform-origin: 100% 100%;
  }

  &:not(:checked) + label:after {
    height: 20px;
    width: 20px;
    background-color: transparent;
    border: 2px solid $radio-empty-color;
    top: 0px;
    z-index: 0;
  }

  // Checked style
  &:checked {
    + label:before {
      top: 0;
      left: 1px;
      width: 8px;
      height: 13px;
      border-top: 2px solid transparent;
      border-left: 2px solid transparent;
      border-right: 2px solid $input-background;
      border-bottom: 2px solid $input-background;
      transform: rotateZ(37deg);
      transform-origin: 100% 100%;
    }

    + label:after {
      top: 0;
      width: 20px;
      height: 20px;
      border: 2px solid $secondary-color;
      background-color: $secondary-color;
      z-index: 0;
    }
  }

  // Focused styles
  &.tabbed:focus + label:after {
    border-radius: 2px;
    border-color: $radio-empty-color;
    background-color: rgba(0,0,0,.1);
  }

  &.tabbed:checked:focus + label:after {
    border-radius: 2px;
    background-color: $secondary-color;
    border-color: $secondary-color;
  }

  // Disabled style
  &:disabled:not(:checked) + label:before {
    background-color: transparent;
    border: 2px solid transparent;
  }

  &:disabled:not(:checked) + label:after {
    border-color: transparent;
    background-color: $input-disabled-solid-color;
  }

  &:disabled:checked + label:before {
    background-color: transparent;
  }

  &:disabled:checked + label:after {
    background-color: $input-disabled-solid-color;
    border-color: $input-disabled-solid-color;
  }
}


/* File Input
   ========================================================================== */

.file-field {
  position: relative;

  .file-path-wrapper {
    overflow: hidden;
    padding-left: 10px;
  }

  input.file-path { width: 100%; }

  .btn {
    float: left;
    height: $input-height;
    line-height: $input-height;
    background-image: none;
  }

  span {
    cursor: pointer;
    color: white;
  }

  input[type=file] {

    // Needed to override webkit button
    &::-webkit-file-upload-button {
      display: none;
    }

    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
  }
}

// Remove Focus Boxes
select:focus {
  outline: $select-focus;
}

button:focus {
  outline: none;
  background-color: $button-background-focus;
}

label {
  font-size: $label-font-size;
  color: $input-border-color;
}


/* Text Inputs + Textarea
   ========================================================================== */

/* Style Placeholders */

::placeholder {
  color: $placeholder-text-color;
}

/* Text inputs */

input:not([type]),
input[type=text]:not(.browser-default),
input[type=password]:not(.browser-default),
input[type=email]:not(.browser-default),
input[type=url]:not(.browser-default),
input[type=time]:not(.browser-default),
input[type=date]:not(.browser-default),
input[type=datetime]:not(.browser-default),
input[type=datetime-local]:not(.browser-default),
input[type=tel]:not(.browser-default),
input[type=number]:not(.browser-default),
input[type=search]:not(.browser-default),
textarea.materialize-textarea {

  // General Styles
  background-color: transparent;
  border: none;
  border-bottom: $input-border;
  border-radius: 0;
  outline: none;
  height: $input-height;
  width: 100%;
  font-size: $input-font-size;
  margin: $input-margin;
  padding: $input-padding;
  box-shadow: none;
  box-sizing: content-box;
  transition: $input-transition;

  // Disabled input style
  &:disabled,
  &[readonly="readonly"] {
    color: $input-disabled-color;
    border-bottom: $input-disabled-border;
  }

  // Disabled label style
  &:disabled+label,
  &[readonly="readonly"]+label {
    color: $input-disabled-color;
  }

  // Focused input style
  &:focus:not([readonly]) {
    border-bottom: 1px solid $input-focus-color;
    box-shadow: 0 1px 0 0 $input-focus-color;
  }

  // Focused label style
  &:focus:not([readonly])+label {
    color: $input-focus-color;
  }

  // Valid Input Style
  &.valid,
  &:focus.valid {
    @extend %valid-input-style;
  }

  // Custom Success Message
  &.valid + label:after,
  &:focus.valid + label:after {
    @extend %custom-success-message;
  }

  // Invalid Input Style
  &.invalid,
  &:focus.invalid {
    @extend %invalid-input-style;
  }

  // Custom Error message
  &.invalid + label:after,
  &:focus.invalid + label:after {
    @extend %custom-error-message;
  }

  // Full width label when using validate for error messages
  &.validate + label {
    width: 100%;
  }

  // Form Message Shared Styles
  & + label:after {

  }

  // TODO: Remove once input fields are reworked to support validation messages better
  &.invalid + label:after,
  &.valid + label:after{
    display: none;
  }

  &.invalid + label.active:after,
  &.valid + label.active:after{
    display: block;
  }
}


/* Validation Sass Placeholders */
%valid-input-style {
  border-bottom: 1px solid $input-success-color;
  box-shadow: 0 1px 0 0 $input-success-color;
}
%invalid-input-style {
  border-bottom: $input-invalid-border;
  box-shadow: 0 1px 0 0 $input-error-color;
}
%custom-success-message {
  content: attr(data-success);
  color: $input-success-color;
  opacity: 1;
  transform: translateY(9px);
}
%custom-error-message {
  content: attr(data-error);
  color: $input-error-color;
  opacity: 1;
  transform: translateY(9px);
}
%input-after-style {
  display: block;
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  opacity: 0;
  transition: .2s opacity ease-out, .2s color ease-out;
}


// Styling for input field wrapper
.input-field {
  // Inline styles
  &.inline {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;

    input,
    .select-dropdownmaterialmaterial {
      margin-bottom: 1rem;
    }
  }

  // Gutter spacing
  &.col {
    label {
      left: $gutter-width / 2;
    }

    .prefix ~ label,
    .prefix ~ .validate ~ label {
      width: calc(100% - 3rem - #{$gutter-width});
    }
  }

  position: relative;
  margin: 0 !important;

  label {
    color: $input-border-color;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    font-size: 1rem;
    cursor: text;
    transition: transform .2s ease-out;
    transform-origin: 0% 100%;
    text-align: initial;
    transform: translateY(12px);
    pointer-events: none;

    &:not(.label-icon).active {
      transform: translateY(-14px) scale(.8);
      transform-origin: 0 0;
    }
  }

  // Prefix Icons
  .prefix {
    position: absolute;
    width: $input-height;
    font-size: 2rem;
    transition: color .2s;
    font-style: normal !important;

    &.active { color: $input-focus-color; }
  }

  .prefix ~ input,
  .prefix ~ textarea,
  .prefix ~ label,
  .prefix ~ .validate ~ label,
  .prefix ~ .autocomplete-content {
    margin-left: 3rem;
    width: 92%;
    width: calc(100% - 3rem);
  }

  .prefix ~ label { margin-left: 3rem; }

  @media #{$medium-and-down} {
    .prefix ~ input {
      width: 86%;
      width: calc(100% - 3rem);
    }
  }

  @media #{$small-and-down} {
    .prefix ~ input {
      width: 80%;
      width: calc(100% - 3rem);
    }
  }
}


/* Search Field */

.input-field input[type=search] {
  display: block;
  line-height: inherit;

  .nav-wrapper & {
    height: inherit;
    padding-left: 4rem;
    width: calc(100% - 4rem);
    border: 0;
    box-shadow: none;
  }

  &:focus {
    background-color: $input-background;
    border: 0;
    box-shadow: none;
    color: #444;

    & + label i,
    & ~ .mdi-navigation-close,
    & ~ .material-icons {
      color: #444;
    }
  }

  & + label {
    left: 1rem;
  }

  & ~ .mdi-navigation-close,
  & ~ .material-icons {
    position: absolute;
    top: 0;
    right: 1rem;
    color: transparent;
    cursor: pointer;
    font-size: 2rem;
    transition: .3s color;
  }
}


/* Textarea */

// Default textarea
textarea {
  width: 100%;
  height: $input-height;
  background-color: transparent;

  &.materialize-textarea {
    // Fixes validation messages for dynamic textareas
    &.validate + label {
      &::after {
        top: calc(100% - 12px);
      }
      &:not(.label-icon).active {
        transform: translateY(-25px);
      }
      height: 100%;
    }

    overflow-y: hidden; /* prevents scroll bar flash */
    padding: .8rem 0 1.6rem 0; /* prevents text jump on Enter keypress */
    resize: none;
    min-height: $input-height;
  }
}

// For textarea autoresize
.hiddendiv {
  display: none;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
  padding-top: 1.2rem; /* prevents text jump on Enter keypress */

  // Reduces repaints
  position: absolute;
  top: 0;
}


/* Autocomplete */
.autocomplete-content {
  margin-top: -1 * $input-margin-bottom;
  margin-bottom: $input-margin-bottom;
  display: block;
  opacity: 1;
  position: static;

  li {
    .highlight { color: #444; }

    img {
      height: $dropdown-item-height - 10;
      width: $dropdown-item-height - 10;
      margin: 5px 15px;
    }
  }
}

/* Radio Buttons
   ========================================================================== */

// Remove default Radio Buttons
[type="radio"]:not(:checked),
[type="radio"]:checked {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

[type="radio"]:not(:checked) + label,
[type="radio"]:checked + label {
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  display: inline-block;
  height: 25px;
  line-height: 25px;
  font-size: 1rem;
  transition: .28s ease;
  user-select: none;
}

[type="radio"] + label:before,
[type="radio"] + label:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  margin: 4px;
  width: 16px;
  height: 16px;
  z-index: 0;
  transition: .28s ease;
}

/* Unchecked styles */
[type="radio"]:not(:checked) + label:before,
[type="radio"]:not(:checked) + label:after,
[type="radio"]:checked + label:before,
[type="radio"]:checked + label:after,
[type="radio"].with-gap:checked + label:before,
[type="radio"].with-gap:checked + label:after {
  border-radius: 50%;
}

[type="radio"]:not(:checked) + label:before,
[type="radio"]:not(:checked) + label:after {
  border: 2px solid $radio-empty-color;
}

[type="radio"]:not(:checked) + label:after {
  transform: scale(0);
}

/* Checked styles */
[type="radio"]:checked + label:before {
  border: 2px solid transparent;
}

[type="radio"]:checked + label:after,
[type="radio"].with-gap:checked + label:before,
[type="radio"].with-gap:checked + label:after {
  border: $radio-border;
}

[type="radio"]:checked + label:after,
[type="radio"].with-gap:checked + label:after {
  background-color: $radio-fill-color;
}

[type="radio"]:checked + label:after {
  transform: scale(1.02);
}

/* Radio With gap */
[type="radio"].with-gap:checked + label:after {
  transform: scale(.5);
}

/* Focused styles */
[type="radio"].tabbed:focus + label:before {
  box-shadow: 0 0 0 10px rgba(0,0,0,.1);
}

/* Disabled Radio With gap */
[type="radio"].with-gap:disabled:checked + label:before {
  border: 2px solid $input-disabled-color;
}

[type="radio"].with-gap:disabled:checked + label:after {
  border: none;
  background-color: $input-disabled-color;
}

/* Disabled style */
[type="radio"]:disabled:not(:checked) + label:before,
[type="radio"]:disabled:checked + label:before {
  background-color: transparent;
  border-color: $input-disabled-color;
}

[type="radio"]:disabled + label {
  color: $input-disabled-color;
}

[type="radio"]:disabled:not(:checked) + label:before {
  border-color: $input-disabled-color;
}

[type="radio"]:disabled:checked + label:after {
  background-color: $input-disabled-color;
  border-color: $input-disabled-solid-color;
}

/* Range
   ========================================================================== */

.range-field {
  position: relative;
}

input[type=range],
input[type=range] + .thumb {
  @extend .no-select;
  cursor: pointer;
}

input[type=range] {
  position: relative;
  background-color: transparent;
  border-color: transparent !important;
  border: none;
  outline: none;
  width: 100%;
  margin: 15px 0;
  padding: 0;

  &:focus {
    outline: none;
  }
}

input[type=range] + .thumb {
  position: absolute;
  top: 10px;
  left: 0;
  border: none;
  height: 0;
  width: 0;
  border-radius: 50%;
  background-color: $radio-fill-color;
  margin-left: 7px;

  transform-origin: 50% 50%;
  transform: rotate(-45deg);

  .value {
    display: block;
    width: 30px;
    text-align: center;
    color: $radio-fill-color;
    font-size: 0;
    transform: rotate(45deg);
  }

  &.active {
    border-radius: 50% 50% 50% 0;

    .value {
      color: $input-background;
      margin-left: -1px;
      margin-top: 8px;
      font-size: 10px;
    }
  }
}

// WebKit
input[type=range] {
  -webkit-appearance: none;
}

input[type=range]::-webkit-slider-runnable-track {
  height: $track-height;
  background: #c2c0c2;
  border: none;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: $range-height;
  width: $range-width;
  border-radius: 50%;
  background-color: $radio-fill-color;
  transform-origin: 50% 50%;
  margin: -5px 0 0 0;
  transition: .3s;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ccc;
}

// FireFox
input[type=range] {
  /* fix for FF unable to apply focus style bug  */
  border: 1px solid white;

  /*required for proper track sizing in FF*/
}

input[type=range]::-moz-range-track {
  height: $track-height;
  background: #ddd;
  border: none;
}

input[type=range]::-moz-range-thumb {
  border: none;
  height: $range-height;
  width: $range-width;
  border-radius: 50%;
  background: $radio-fill-color;
  margin-top: -5px;
}

// hide the outline behind the border
input[type=range]:-moz-focusring {
  outline: 1px solid #fff;
  outline-offset: -1px;
}

input[type=range]:focus::-moz-range-track {
  background: #ccc;
}

// IE 10+
input[type=range]::-ms-track {
  height: $track-height;

  // remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead
  background: transparent;

  // leave room for the larger thumb to overflow with a transparent border */
  border-color: transparent;
  border-width: 6px 0;

  /*remove default tick marks*/
  color: transparent;
}

input[type=range]::-ms-fill-lower {
  background: #777;
}

input[type=range]::-ms-fill-upper {
  background: #ddd;
}

input[type=range]::-ms-thumb {
  border: none;
  height: $range-height;
  width: $range-width;
  border-radius: 50%;
  background: $radio-fill-color;
}

input[type=range]:focus::-ms-fill-lower {
  background: #888;
}

input[type=range]:focus::-ms-fill-upper {
  background: #ccc;
}

/* Select Field
   ========================================================================== */

select { display: none; }
select.browser-default { display: block; }

select {
  background-color: $select-background;
  width: 100%;
  padding: $select-padding;
  border: $select-border;
  border-radius: $select-radius;
  height: $input-height;
}


.input-field {
  & > select {
    display: block;
    position: absolute;
    width: 0;
    pointer-events: none;
    height: 0;
    top: 0;
    left: 0;
    opacity: 0;
  }
}

.select-label {
  position: absolute;
}

.select-wrapper {
  &.valid {
    & > input.select-dropdownmaterial {
      @extend %valid-input-style;
    }

    & + label:after {
      @extend %custom-success-message;
    }
  }

  &.invalid {
    & > input.select-dropdownmaterial {
      @extend %invalid-input-style;
    }

    & + label:after {
      @extend %custom-error-message;
    }
  }

  &.valid + label,
  &.invalid + label {
    width: 100%;
    pointer-events: none;
  }

  & + label:after {

  }

  position: relative;

  input.select-dropdownmaterial {
    position: relative;
    cursor: pointer;
    background-color: transparent;
    border: none;
    border-bottom: $input-border;
    outline: none;
    height: $input-height;
    line-height: $input-height;
    width: 100%;
    font-size: $input-font-size;
    margin: $input-margin;
    padding: 0;
    display: block;
    user-select:none;
  }

  span.caret {
    color: initial;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    height: 10px;
    width: 10px;
    display: block;
    margin: auto 0;
    font-size: 10px;
    line-height: 10px;
  }

  & + label {
    position: absolute;
    top: -26px;
    font-size: $label-font-size;
  }
}

// Disabled styles
select:disabled {
  color: $input-disabled-color;
}

.select-wrapper.disabled {
  span.caret,
  & + label {
    color: $input-disabled-color;
  }
}

.select-wrapper input.select-dropdownmaterial:disabled {
  color: $input-disabled-color;
  cursor: default;
  user-select: none;
}

.select-wrapper i {
  color: $select-disabled-color;
}

.select-dropdownmaterial li.disabled,
.select-dropdownmaterial li.disabled > span,
.select-dropdownmaterial li.optgroup {
  color: $select-disabled-color;
  background-color: transparent;
}

.select-dropdownmaterial.dropdown-content {
  li {
    &.active {
      background-color: transparent;
    }

    &:hover {
      background-color: $select-option-hover;
    }

    &.selected {
      background-color: $select-option-focus;
    }
  }
}

// Prefix Icons
.prefix ~ .select-wrapper {
  margin-left: 3rem;
  width: 92%;
  width: calc(100% - 3rem);
}

.prefix ~ label { margin-left: 3rem; }

// Icons
.select-dropdownmaterial li {
  img {
    height: $dropdown-item-height - 10;
    width: $dropdown-item-height - 10;
    margin: 5px 15px;
    float: right;
  }
}

// Optgroup styles
.select-dropdownmaterial li.optgroup {
  border-top: 1px solid $dropdown-hover-bg-color;

  &.selected > span {
    color: rgba(0, 0, 0, .7);
  }

  & > span {
    color: rgba(0, 0, 0, .4);
  }

  & ~ li.optgroup-option {
    padding-left: 1rem;
  }
}


/* Switch
   ========================================================================== */

.switch,
.switch * {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  margin-bottom: 10px;
}

.switch label {
  cursor: pointer;
}

.switch label input[type=checkbox] {
  opacity: 0;
  width: 0;
  height: 0;

  &:checked + .lever {
    background-color: $switch-checked-lever-bg;

    &:before, &:after {
      left: 18px;
    }

    &:after {
      background-color: $switch-bg-color;
    }
  }
}

.switch label .lever {
  content: "";
  display: inline-block;
  position: relative;
  width: 36px;
  height: 14px;
  background-color: $switch-unchecked-lever-bg;
  border-radius: $switch-radius;
  margin-right: 10px;
  transition: background 0.3s ease;
  vertical-align: middle;
  margin: 0 16px;

  &:before, &:after {
    content: "";
    position: absolute;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    left: 0;
    top: -3px;
    transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease, transform .1s ease;
  }

  &:before {
    background-color: transparentize($switch-bg-color, .85);
  }

  &:after {
    background-color: $switch-unchecked-bg;
    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  }
}

// Switch active style
input[type=checkbox]:checked:not(:disabled) ~ .lever:active::before,
input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .lever::before {
  transform: scale(2.4);
  background-color: transparentize($switch-bg-color, .85);
}

input[type=checkbox]:not(:disabled) ~ .lever:active:before,
input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::before {
  transform: scale(2.4);
  background-color: rgba(0,0,0,.08);
}

// Disabled Styles
.switch input[type=checkbox][disabled] + .lever {
  cursor: default;
  background-color: rgba(0,0,0,.12);
}

.switch label input[type=checkbox][disabled] + .lever:after,
.switch label input[type=checkbox][disabled]:checked + .lever:after {
  background-color: $input-disabled-solid-color;
}


/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */

[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */

a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */

abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */

b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */

dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari.
 */

figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */

pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */

/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */

input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  box-sizing: content-box; /* 2 */
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */

textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */

optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

}


.wpcf7-form .input-field {
display: block;  margin-top: 1rem !important;}

.wpcf7-form {
.dropdown-content {
  @extend .z-depth-1;
  background-color: $dropdown-bg-color;
  margin: 0;
  display: none;
  min-width: 100px;
  max-height: 650px;
  overflow-y: auto;
  opacity: 0;
  position: absolute;
  z-index: 999999;
  will-change: width, height;

  li {
    clear: both;
    color: $off-black;
    cursor: pointer;
    min-height: $dropdown-item-height;
    line-height: 1.5rem;
    width: 100%;
    text-align: left;
    text-transform: none;

    &:hover, &.active, &.selected {
      background-color: $dropdown-hover-bg-color;
    }

    &.active.selected {
      background-color: rgba(150,150,150,0.25)
    }

    &.divider {
      min-height: 0;
      height: 1px;
    }

    & > a, & > span {
      font-size: 16px;
      color: $dropdown-color;
      display: block;
      line-height: 22px;
      padding: (($dropdown-item-height - 22) / 2) 16px;
    }

    & > span > label {
      top: 1px;
      left: 0;
      height: 18px;
    }

    // Icon alignment override
    & > a > i {
      height: inherit;
      line-height: inherit;
      float: left;
      margin: 0 24px 0 0;
      width: 24px;
    }
  }
}

// Input field specificity bugfix
.input-field.col .dropdown-content [type="checkbox"] + label {
  top: 1px;
  left: 0;
  height: 18px;
}
// shared styles
.btn,
.btn-flat, .wpcf7-submit {
  background-image: none !important;
  border: $button-border;
  border-radius: $button-radius;
  display: inline-block;
  height: $button-height;
  line-height: $button-height;
  padding: $button-padding;
  text-transform: uppercase;
  vertical-align: middle;
  // Gets rid of tap active state
  -webkit-tap-highlight-color: transparent;
  position: unset;
  will-change: unset;
}

// Disabled shared style
.btn.disabled,
.btn-floating.disabled,
.btn-large.disabled,
.btn-flat.disabled,
.btn:disabled,
.btn-floating:disabled,
.btn-large:disabled,
.btn-flat:disabled,
.btn[disabled],
.btn-floating[disabled],
.btn-large[disabled],
.btn-flat[disabled] {
  pointer-events: none;
  background-color: $button-disabled-background !important;
  box-shadow: none;
  color: $button-disabled-color !important;
  cursor: default;

  &:hover {
    background-color: $button-disabled-background !important;
    color: $button-disabled-color !important;
  }
}

// Shared icon styles
.btn,
.btn-floating,
.btn-large,
.btn-flat, .wpcf7-submit {
  font-size: $button-font-size;
  outline: 0;

  i {
    font-size: $button-icon-font-size;
    line-height: inherit;
  }
}

// Shared focus button style
.btn,
.btn-floating, .wpcf7-submit {
  &:focus {
    background-color: darken($button-raised-background, 10%);
  }
}

// Raised Button
.btn, .wpcf7-submit{
  text-decoration: none;
  color: $button-raised-color;
  background-color: $button-raised-background;
  text-align: center;
  letter-spacing: .5px;
  @extend .z-depth-1;
  transition: .2s ease-out;
  cursor: pointer;

  &:hover {
    background-color: $button-raised-background-hover;
    @extend .z-depth-1-half;
  }
}

// Floating button
.btn-floating {
  &:hover {
    background-color: $button-floating-background-hover;
    @extend .z-depth-1-half;
  }

  &:before {
    border-radius: 0;
  }

  &.btn-large {
    &.halfway-fab {
      bottom: -$button-floating-large-size / 2;
    }

    width: $button-floating-large-size;
    height: $button-floating-large-size;
    i {
      line-height: $button-floating-large-size;
    }
  }

  &.halfway-fab {
    &.left {
      right: auto;
      left: 24px;
    }

    position: absolute;
    right: 24px;
    bottom: -$button-floating-size / 2;
  }

  display: inline-block;
  color: $button-floating-color;
  position: relative;
  overflow: hidden;
  z-index: 1;
  width: $button-floating-size;
  height: $button-floating-size;
  line-height: $button-floating-size;
  padding: 0;
  background-color: $button-floating-background;
  border-radius: $button-floating-radius;
  @extend .z-depth-1;
  transition: .3s;
  cursor: pointer;
  vertical-align: middle;

  i {
    width: inherit;
    display: inline-block;
    text-align: center;
    color: $button-floating-color;
    font-size: $button-large-icon-font-size;
    line-height: $button-floating-size;
  }
}

// button fix
button.btn-floating {
  border: $button-border;
}

// Fixed Action Button
.fixed-action-btn {
  &.active {
    ul {
     visibility: visible;
    }
  }

  &.horizontal {
    padding: 0 0 0 15px;

    ul {
      text-align: right;
      right: 64px;
      top: 50%;
      transform: translateY(-50%);
      height: 100%;
      left: auto;
      width: 500px; /*width 100% only goes to width of button container */

      li {
        display: inline-block;
        margin: 15px 15px 0 0;
      }
    }
  }

  &.toolbar {
    &.active {
      & > a i {
        opacity: 0;
      }
    }

    padding: 0;
    height: $button-floating-large-size;

    ul {
      display: flex;
      top: 0;
      bottom: 0;
      z-index: 1;

      li {
        flex: 1;
        display: inline-block;
        margin: 0;
        height: 100%;
        transition: none;

        a {
          display: block;
          overflow: hidden;
          position: relative;
          width: 100%;
          height: 100%;
          background-color: transparent;
          box-shadow: none;
          color: #fff;
          line-height: $button-floating-large-size;
          z-index: 1;

          i {
            line-height: inherit;
          }
        }
      }
    }
  }

  position: fixed;
  right: 23px;
  bottom: 23px;
  padding-top: 15px;
  margin-bottom: 0;
  z-index: 999997;

  ul {
    left: 0;
    right: 0;
    text-align: center;
    position: absolute;
    bottom: 64px;
    margin: 0;
    visibility: hidden;

    li {
      margin-bottom: 15px;
    }

    a.btn-floating {
      opacity: 0;
    }
  }

  .fab-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: $button-floating-size;
    height: $button-floating-size;
    background-color: $button-floating-background;
    border-radius: $button-floating-radius;
    transform: scale(0);
  }
}

// Flat button
.btn-flat {
  box-shadow: none;
  background-color: transparent;
  color: $button-flat-color;
  cursor: pointer;
  transition: background-color .2s;

  &:focus,
  &:hover {
    box-shadow: none;
  }

  &:focus {
    background-color: rgba(0,0,0,.1);
  }

  &.disabled {
    background-color: transparent !important;
    color: $button-flat-disabled-color !important;
    cursor: default;
  }
}

// Large button
.btn-large {
  @extend .btn;
  height: $button-large-height;
  line-height: $button-large-height;

  i {
    font-size: $button-large-icon-font-size;
  }
}

// Block button
.btn-block {
  display: block;
}
//Default styles

html {
 box-sizing: border-box;
}
*, *:before, *:after {
 box-sizing: inherit;
}

body {
  // display: flex;
  // min-height: 100vh;
  // flex-direction: column;
}

main {
  // flex: 1 0 auto;
}

ul {
  &:not(.browser-default) {
    padding-left: 0;
    list-style-type: none;

    & > li {
      list-style-type: none;
    }
  }
}

a {
	color: $link-color;
	text-decoration: none;

  // Gets rid of tap active state
  -webkit-tap-highlight-color: transparent;
}


// Positioning
.valign-wrapper {
  display: flex;
  align-items: center;
}


// classic clearfix
.clearfix {
  clear: both;
}


// Z-levels
.z-depth-0 {
  box-shadow: none !important;
}
.z-depth-1 {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
.z-depth-1-half {
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
}
.z-depth-2 {
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
.z-depth-3 {
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3);
}
.z-depth-4 {
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.3);
}
.z-depth-5 {
  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
}

.hoverable {
  transition: box-shadow .25s;

  &:hover {
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
}

// Dividers

.divider {
  height: 1px;
  overflow: hidden;
  background-color: color("grey", "lighten-2");
}


//  Blockquote

blockquote {
  margin: 20px 0;
  padding-left: 1.5rem;
  border-left: 5px solid $primary-color;
}

// Icon Styles

i {
  line-height: inherit;

  &.left {
    float: left;
    margin-right: 15px;
  }
  &.right {
    float: right;
    margin-left: 15px;
  }
  &.tiny {
    font-size: 1rem;
  }
  &.small {
    font-size: 2rem;
  }
  &.medium {
    font-size: 4rem;
  }
  &.large {
    font-size: 6rem;
  }
}

// Images
img.responsive-img,
video.responsive-video {
  max-width: 100%;
  height: auto;
}


// Pagination

.pagination {

  li {
    display: inline-block;
    border-radius: 2px;
    text-align: center;
    vertical-align: top;
    height: 30px;

    a {
      color: #444;
      display: inline-block;
      font-size: 1.2rem;
      padding: 0 10px;
      line-height: 30px;
    }

    &.active a { color: #fff; }

    &.active { background-color: $primary-color; }

    &.disabled a {
      cursor: default;
      color: #999;
    }

    i {
      font-size: 2rem;
    }
  }


  li.pages ul li {
    display: inline-block;
    float: none;
  }
}
@media #{$medium-and-down} {
  .pagination {
    width: 100%;

    li.prev,
    li.next {
      width: 10%;
    }

    li.pages {
      width: 80%;
      overflow: hidden;
      white-space: nowrap;
    }
  }
}

// Breadcrumbs
.breadcrumb {
  font-size: 18px;
  color: rgba(255,255,255, .7);

  i,
  [class^="mdi-"], [class*="mdi-"],
  i.material-icons {
    display: inline-block;
    float: left;
    font-size: 24px;
  }

  &:before {
    content: '\E5CC';
    color: rgba(255,255,255, .7);
    vertical-align: top;
    display: inline-block;
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 25px;
    margin: 0 10px 0 8px;
    -webkit-font-smoothing: antialiased;
  }

  &:first-child:before {
    display: none;
  }

  &:last-child {
    color: #fff;
  }
}

// Parallax
.parallax-container {
  position: relative;
  overflow: hidden;
  height: 500px;

  .parallax {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;

    img {
      display: none;
      position: absolute;
      left: 50%;
      bottom: 0;
      min-width: 100%;
      min-height: 100%;
      transform: translate3d(0,0,0);
      transform: translateX(-50%);
    }
  }
}

// Pushpin
.pin-top, .pin-bottom {
  position: relative;
}
.pinned {
  position: fixed !important;
}

/*********************
  Transition Classes
**********************/

ul.staggered-list li {
  opacity: 0;
}

.fade-in {
  opacity: 0;
  transform-origin: 0 50%;
}


/*********************
  Media Query Classes
**********************/
.hide-on-small-only, .hide-on-small-and-down {
  @media #{$small-and-down} {
    display: none !important;
  }
}
.hide-on-med-and-down {
  @media #{$medium-and-down} {
    display: none !important;
  }
}
.hide-on-med-and-up {
  @media #{$medium-and-up} {
    display: none !important;
  }
}
.hide-on-med-only {
  @media only screen and (min-width: $small-screen) and (max-width: $medium-screen) {
    display: none !important;
  }
}
.hide-on-large-only {
  @media #{$large-and-up} {
    display: none !important;
  }
}
.show-on-large {
  @media #{$large-and-up} {
    display: block !important;
  }
}
.show-on-medium {
  @media only screen and (min-width: $small-screen) and (max-width: $medium-screen) {
    display: block !important;
  }
}
.show-on-small {
  @media #{$small-and-down} {
    display: block !important;
  }
}
.show-on-medium-and-up {
  @media #{$medium-and-up} {
    display: block !important;
  }
}
.show-on-medium-and-down {
  @media #{$medium-and-down} {
    display: block !important;
  }
}


// Center text on mobile
.center-on-small-only {
  @media #{$small-and-down} {
    text-align: center;
  }
}


.hide {
  display: none !important;
}

// Text Align
.left-align {
  text-align: left;
}
.right-align {
  text-align: right
}
.center, .center-align {
  text-align: center;
}

.left {
  float: left !important;
}
.right {
  float: right !important;
}

// No Text Select
.no-select {
  user-select: none;
}

.circle {
  border-radius: 50%;
}

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.truncate {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.no-padding {
  padding: 0 !important;
}

/* ==========================================================================
   $BASE-TIME-PICKER
   ========================================================================== */
/**
 * The list of times.
 */
.picker__list {
  list-style: none;
  padding: 0.75em 0 4.2em;
  margin: 0;
}
/**
 * The times on the clock.
 */
.picker__list-item {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  margin-bottom: -1px;
  position: relative;
  background: #fff;
  padding: .75em 1.25em;
}
@media (min-height: 46.75em) {
  .picker__list-item {
    padding: .5em 1em;
  }
}
/* Hovered time */
.picker__list-item:hover {
  cursor: pointer;
  color: #000;
  background: #b1dcfb;
  border-color: #0089ec;
  z-index: 10;
}
/* Highlighted and hovered/focused time */
.picker__list-item--highlighted {
  border-color: #0089ec;
  z-index: 10;
}
.picker__list-item--highlighted:hover,
.picker--focused .picker__list-item--highlighted {
  cursor: pointer;
  color: #000;
  background: #b1dcfb;
}
/* Selected and hovered/focused time */
.picker__list-item--selected,
.picker__list-item--selected:hover,
.picker--focused .picker__list-item--selected {
  background: #0089ec;
  color: #fff;
  z-index: 10;
}
/* Disabled time */
.picker__list-item--disabled,
.picker__list-item--disabled:hover,
.picker--focused .picker__list-item--disabled {
  background: #f5f5f5;
  border-color: #f5f5f5;
  color: #ddd;
  cursor: default;
  border-color: #ddd;
  z-index: auto;
}
/**
 * The clear button
 */
.picker--time .picker__button--clear {
  display: block;
  width: 80%;
  margin: 1em auto 0;
  padding: 1em 1.25em;
  background: none;
  border: 0;
  font-weight: 500;
  font-size: .67em;
  text-align: center;
  text-transform: uppercase;
  color: $timepicker-clock-color;
}
.picker--time .picker__button--clear:hover,
.picker--time .picker__button--clear:focus {
  color: #000;
  background: #b1dcfb;
  background: #ee2200;
  border-color: #ee2200;
  cursor: pointer;
  color: #fff;
  outline: none;
}
.picker--time .picker__button--clear:before {
  top: -0.25em;
  color: $timepicker-clock-color;
  font-size: 1.25em;
  font-weight: bold;
}
.picker--time .picker__button--clear:hover:before,
.picker--time .picker__button--clear:focus:before {
  color: #fff;
}

/* ==========================================================================
   $DEFAULT-TIME-PICKER
   ========================================================================== */
/**
 * The frame the bounds the time picker.
 */
.picker--time .picker__frame {
  min-width: 256px;
  max-width: 320px;
}
/**
 * The picker box.
 */
.picker--time .picker__box {
  font-size: 1em;
  background: #f2f2f2;
  padding: 0;
}
@media (min-height: 40.125em) {
  .picker--time .picker__box {
    margin-bottom: 5em;
  }
}

/* ==========================================================================
   $DEFAULT-TIME-PICKER
   ========================================================================== */
.clockpicker-display {
	font-size: 4rem;
	font-weight: bold;
	text-align: center;
	color: rgba(255, 255, 255, 0.6);
  font-weight: 400;
	clear: both;
	position: relative;
}

.clockpicker-span-am-pm {
  font-size: 1.3rem;
  position: absolute;
  right: 1rem;
  bottom: 0.3rem;
  line-height: 2rem;
  font-weight: 500;
}
@media only screen and (min-width: 601px) {
	.clockpicker-display {
		top: 32%;
	}
	.clockpicker-span-am-pm {
	  position: relative;
	  right: auto;
	  bottom: auto;
	  text-align: center;
	  margin-top: 1.2rem;
	}
}


.text-primary{
	color: rgba(255, 255, 255, 1)
}
.clockpicker-span-hours {
  margin-right: 3px;
}
.clockpicker-span-minutes {
  margin-left: 3px;
}

.clockpicker-span-hours,
.clockpicker-span-minutes,
.clockpicker-span-am-pm div {
	cursor: pointer;
}
.clockpicker-moving {
	cursor: move;
}
.clockpicker-plate {
	background-color: $timepicker-clock-plate-bg;
	border-radius: 50%;
	width: 270px;
	height: 270px;
	overflow: visible;
	position: relative;
  margin: auto;
  margin-top: 25px;
  margin-bottom: 5px;
	user-select: none;
}
.clockpicker-canvas,
.clockpicker-dial {
	width: 270px;
	height: 270px;
	position: absolute;
	left: -1px;
	top: -1px;
}
.clockpicker-minutes {
	visibility: hidden;
}
.clockpicker-tick {
	border-radius: 50%;
	color: $timepicker-clock-color;
	line-height: 40px;
	text-align: center;
	width: 40px;
	height: 40px;
	position: absolute;
	cursor: pointer;
}
.clockpicker-tick.active,
.clockpicker-tick:hover {
	background-color: rgba(150,150,150, .4);
}
.clockpicker-dial {
	-webkit-transition: -webkit-transform 350ms, opacity 350ms;
	-moz-transition: -moz-transform 350ms, opacity 350ms;
	-ms-transition: -ms-transform 350ms, opacity 350ms;
	-o-transition: -o-transform 350ms, opacity 350ms;
	transition: transform 350ms, opacity 350ms;
}
.clockpicker-dial-out {
	opacity: 0;
}
.clockpicker-hours.clockpicker-dial-out {
	-webkit-transform: scale(1.2, 1.2);
	-moz-transform: scale(1.2, 1.2);
	-ms-transform: scale(1.2, 1.2);
	-o-transform: scale(1.2, 1.2);
	transform: scale(1.2, 1.2);
}
.clockpicker-minutes.clockpicker-dial-out {
	-webkit-transform: scale(.8, .8);
	-moz-transform: scale(.8, .8);
	-ms-transform: scale(.8, .8);
	-o-transform: scale(.8, .8);
	transform: scale(.8, .8);
}
.clockpicker-canvas {
	-webkit-transition: opacity 175ms;
	-moz-transition: opacity 175ms;
	-ms-transition: opacity 175ms;
	-o-transition: opacity 175ms;
	transition: opacity 175ms;
}
.clockpicker-canvas-out {
	opacity: 0.25;
}
.clockpicker-canvas-bearing {
	stroke: none;
	fill: $secondary-color;
}
.clockpicker-canvas-bg {
	stroke: none;
	fill: $secondary-color;
}
.clockpicker-canvas-bg-trans {
	fill: $secondary-color;
}
.wpcf7-radio { display: flex;
justify-content: space-between; flex-wrap: wrap; align-items: start;  }
.wpcf7-form-control-wrap  { .one, .two, .three, .four, .five, .six, .seven, .eight, .nine, .ten { display: flex;
justify-content: space-between; flex-wrap: wrap; align-items: start; }     }

.wpcf7-form-control.one > .wpcf7-list-item { width: 100%;  }

.wpcf7-form-control.two > .wpcf7-list-item { width: 50%;  }

.wpcf7-form-control.three > .wpcf7-list-item { width: calc(100% / 3);  }

.wpcf7-form-control.four > .wpcf7-list-item { width: 25%;  }

.wpcf7-form-control.five > .wpcf7-list-item { width: 20%;  }

.wpcf7-form-control.six > .wpcf7-list-item { width: calc(100% / 6);  }

.wpcf7-form-control.seven > .wpcf7-list-item { width: calc(100% / 7);  }


.wpcf7-form-control.eight > .wpcf7-list-item { width: calc(100% / 8);  }


.wpcf7-form-control.nine > .wpcf7-list-item { width: calc(100% / 9);  }


.wpcf7-form-control.ten > .wpcf7-list-item { width: calc(100% / 10);  }


.clockpicker-canvas line {
	stroke: $secondary-color;
	stroke-width: 4;
	stroke-linecap: round;
	/*shape-rendering: crispEdges;*/
}
.file-field .wpcf7-not-valid-tip, .wpcf7-checkbox+.wpcf7-not-valid-tip, .wpcf7-radio+.wpcf7-not-valid-tip {
  margin-top: 0;
}
.wpcf7-not-valid-tip {
    color: #F44336 !important; font-weight: 300;
    opacity: 1;
    font-size: 13.5px;
  margin-top: 10px; }

  .file-path {
    margin-bottom: 3px !important;


  }


  font-weight: 300;

  .input-text, label, input[type=email], input[type=password], input[type=search], input[type=text], input[type=url], textarea {
    font-weight: 300;
  }

  .file-field { display: block;}
  /*
      @license
      Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
      This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
      The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
      The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
      Code distributed by Google as part of the polymer project is also
      subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   */

  /**************************/
  /* STYLES FOR THE SPINNER */
  /**************************/

  /*
   * Constants:
   *      STROKEWIDTH = 3px
   *      ARCSIZE     = 270 degrees (amount of circle the arc takes up)
   *      ARCTIME     = 1333ms (time it takes to expand and contract arc)
   *      ARCSTARTROT = 216 degrees (how much the start location of the arc
   *                                should rotate each time, 216 gives us a
   *                                5 pointed star shape (it's 360/5 * 3).
   *                                For a 7 pointed star, we might do
   *                                360/7 * 3 = 154.286)
   *      CONTAINERWIDTH = 28px
   *      SHRINK_TIME = 400ms
   */


  .preloader-wrapper {
    display: inline-block;
    position: relative;
    width: 50px;
    height: 50px;

    &.small {
      width: 36px;
      height: 36px;
    }

    &.big {
      width: 64px;
      height: 64px;
    }

    &.active {
      /* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
      -webkit-animation: container-rotate 1568ms linear infinite;
      animation: container-rotate 1568ms linear infinite;
    }
  }

  @-webkit-keyframes container-rotate {
    to { -webkit-transform: rotate(360deg) }
  }

  @keyframes container-rotate {
    to { transform: rotate(360deg) }
  }

  .spinner-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;

  }



  /**
   * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
   *
   * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
   * guarantee that the animation will start _exactly_ after that value. So we avoid using
   * animation-delay and instead set custom keyframes for each color (as redundant as it
   * seems).
   *
   * We write out each animation in full (instead of separating animation-name,
   * animation-duration, etc.) because under the polyfill, Safari does not recognize those
   * specific properties properly, treats them as -webkit-animation, and overrides the
   * other animation rules. See https://github.com/Polymer/platform/issues/53.
   */
  .active .spinner-layer.spinner-blue {
    /* durations: 4 * ARCTIME */
    -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
    animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
  }

  .active .spinner-layer.spinner-red {
    /* durations: 4 * ARCTIME */
    -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
    animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
  }

  .active .spinner-layer.spinner-yellow {
    /* durations: 4 * ARCTIME */
    -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
    animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
  }

  .active .spinner-layer.spinner-green {
    /* durations: 4 * ARCTIME */
    -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
    animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
  }

  .active .spinner-layer,
  .active .spinner-layer.spinner-blue-only,
  .active .spinner-layer.spinner-red-only,
  .active .spinner-layer.spinner-yellow-only,
  .active .spinner-layer.spinner-green-only {
    /* durations: 4 * ARCTIME */
    opacity: 1;
    -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
    animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
  }

  @-webkit-keyframes fill-unfill-rotate {
    12.5% { -webkit-transform: rotate(135deg);  } /* 0.5 * ARCSIZE */
    25%   { -webkit-transform: rotate(270deg);  } /* 1   * ARCSIZE */
    37.5% { -webkit-transform: rotate(405deg);  } /* 1.5 * ARCSIZE */
    50%   { -webkit-transform: rotate(540deg);  } /* 2   * ARCSIZE */
    62.5% { -webkit-transform: rotate(675deg);  } /* 2.5 * ARCSIZE */
    75%   { -webkit-transform: rotate(810deg);  } /* 3   * ARCSIZE */
    87.5% { -webkit-transform: rotate(945deg);  } /* 3.5 * ARCSIZE */
    to    { -webkit-transform: rotate(1080deg); } /* 4   * ARCSIZE */
  }

  @keyframes fill-unfill-rotate {
    12.5% { transform: rotate(135deg);  } /* 0.5 * ARCSIZE */
    25%   { transform: rotate(270deg);  } /* 1   * ARCSIZE */
    37.5% { transform: rotate(405deg);  } /* 1.5 * ARCSIZE */
    50%   { transform: rotate(540deg);  } /* 2   * ARCSIZE */
    62.5% { transform: rotate(675deg);  } /* 2.5 * ARCSIZE */
    75%   { transform: rotate(810deg);  } /* 3   * ARCSIZE */
    87.5% { transform: rotate(945deg);  } /* 3.5 * ARCSIZE */
    to    { transform: rotate(1080deg); } /* 4   * ARCSIZE */
  }

  @-webkit-keyframes blue-fade-in-out {
    from { opacity: 1; }
    25% { opacity: 1; }
    26% { opacity: 0; }
    89% { opacity: 0; }
    90% { opacity: 1; }
    100% { opacity: 1; }
  }

  @keyframes blue-fade-in-out {
    from { opacity: 1; }
    25% { opacity: 1; }
    26% { opacity: 0; }
    89% { opacity: 0; }
    90% { opacity: 1; }
    100% { opacity: 1; }
  }

  @-webkit-keyframes red-fade-in-out {
    from { opacity: 0; }
    15% { opacity: 0; }
    25% { opacity: 1; }
    50% { opacity: 1; }
    51% { opacity: 0; }
  }

  @keyframes red-fade-in-out {
    from { opacity: 0; }
    15% { opacity: 0; }
    25% { opacity: 1; }
    50% { opacity: 1; }
    51% { opacity: 0; }
  }

  @-webkit-keyframes yellow-fade-in-out {
    from { opacity: 0; }
    40% { opacity: 0; }
    50% { opacity: 1; }
    75% { opacity: 1; }
    76% { opacity: 0; }
  }

  @keyframes yellow-fade-in-out {
    from { opacity: 0; }
    40% { opacity: 0; }
    50% { opacity: 1; }
    75% { opacity: 1; }
    76% { opacity: 0; }
  }

  @-webkit-keyframes green-fade-in-out {
    from { opacity: 0; }
    65% { opacity: 0; }
    75% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; }
  }

  @keyframes green-fade-in-out {
    from { opacity: 0; }
    65% { opacity: 0; }
    75% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; }
  }

  /**
   * Patch the gap that appear between the two adjacent div.circle-clipper while the
   * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
   */
  .gap-patch {
    position: absolute;
    top: 0;
    left: 45%;
    width: 10%;
    height: 100%;
    overflow: hidden;
    border-color: inherit;
  }

  .gap-patch .circle {
    width: 1000%;
    left: -450%;
  }

  .circle-clipper {
    display: inline-block;
    position: relative;
    width: 50%;
    height: 100%;
    overflow: hidden;
    border-color: inherit;

    .circle {
      width: 200%;
      height: 100%;
      border-width: 3px; /* STROKEWIDTH */
      border-style: solid;
      border-color: inherit;
      border-bottom-color: transparent !important;
      border-radius: 50%;
      -webkit-animation: none;
      animation: none;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
    }

    &.left .circle {
      left: 0;
      border-right-color: transparent !important;
      -webkit-transform: rotate(129deg);
      transform: rotate(129deg);
    }
    &.right .circle {
      left: -100%;
      border-left-color: transparent !important;
      -webkit-transform: rotate(-129deg);
      transform: rotate(-129deg);
    }
  }



  .active .circle-clipper.left .circle {
    /* duration: ARCTIME */
    -webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
    animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
  }

  .active .circle-clipper.right .circle {
    /* duration: ARCTIME */
    -webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
    animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
  }

  @-webkit-keyframes left-spin {
    from { -webkit-transform: rotate(130deg); }
    50% { -webkit-transform: rotate(-5deg); }
    to { -webkit-transform: rotate(130deg); }
  }

  @keyframes left-spin {
    from { transform: rotate(130deg); }
    50% { transform: rotate(-5deg); }
    to { transform: rotate(130deg); }
  }

  @-webkit-keyframes right-spin {
    from { -webkit-transform: rotate(-130deg); }
    50% { -webkit-transform: rotate(5deg); }
    to { -webkit-transform: rotate(-130deg); }
  }

  @keyframes right-spin {
    from { transform: rotate(-130deg); }
    50% { transform: rotate(5deg); }
    to { transform: rotate(-130deg); }
  }

  #spinnerContainer.cooldown {
    /* duration: SHRINK_TIME */
    -webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
    animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
  }

  @-webkit-keyframes fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
  }

  @keyframes fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
  }


}
.wpcf7-form label::after { width:500px;}


.wpcf7 .wpcf7-submit { outline:  none !important; margin-right: 15px; }
.wpcf7 .preloader-wrapper.ajax-loader.small { display: inline-block !important; visibility: hidden; vertical-align: middle;}
.wpcf7 .preloader-wrapper.ajax-loader.small.is-active { visibility: visible;}

.wpcf7-form .spinner-layer { border-color: pink; }

.wpcf7 td, .wpcf7 th, .wpcf7 table  { border: none; }

.wpcf7 p { line-height: 1.5 !important; }

.wpcf7 p { margin-bottom: 2rem; }


.wpcf7 { td, th, tr, thead {     padding: 0 !important; border: none !important;  background-color:  transparent !important; }}
.wpcf7 .picker__frame th { padding: 15px 5px !important; background-color:  transparent !important;}

.wpcf7 .input-field .wpcf7-not-valid-tip {  margin-top: -15px; display: block;}
.wpcf7 .wpcf7-not-valid-tip { margin-top: -10px; }

.wpcf7 .picker__frame select {
  background: rgba(255,255,255,0.9) !important;
  width: 100%;
  padding: 5px !important;
  border: 1px solid #f2f2f2;
  border-radius: 2px;
min-width: unset !important; max-width: unset !important;}

.wpcf7 .picker__frame table { border: none !important;}

.wpcf7  .clockpicker span { font-size: inherit !important; font-family: inherit !important;}
.wpcf7   span { font-weight:  inherit !important;}

.wpcf7 p { margin: 1rem 0 1rem 0  !important;}

.wpcf7 .file-field { margin: 0 0 2rem 0; }

.wpcf7 .picker__frame .btn-flat:hover { background: none !important; }

:root {
  font-size: 16px !important;
}

.wpcf7-form .picker__nav--prev:hover, .wpcf7-form .picker__nav--next:hover {
  background-color:  rgba(150,150,150,0.25);
}
.wpcf7-form .wpcf7-list-item { padding: 0 15px; }

.wpcf7-form p { font-size: 1rem; }

.wpcf7-radio { display: flex; width: 100%;}

.wpcf7 .wpcf7-validation-errors, .wpcf7 .wpcf7-mail-sent-ng, .wpcf7 .wpcf7-mail-sent-ok, .screen-reader-response {
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
  border-radius: 2px;
  padding: 15px 20px;
  width: 100%;
  display: block;
  font-weight: 300;
  font-size: 15px;
}
.wpcf7 .wpcf7-validation-errors {
  color: #F44336;
  background-color: #FFEBEE;
}
.wpcf7 .wpcf7-mail-sent-ng {
  color: #ff9800;
  background-color: #fff3e0;
}
.wpcf7 .wpcf7-mail-sent-ok {
  color: #4CAF50;
  background-color: #E8F5E9;
}

.wpcf7 {
div.two {
display: flex;
justify-content: space-between;
 flex-wrap: wrap;
}

div.two > p { display: block; width: 48%; margin: 0 !important;}}

.wpcf7 .wpcf7-form .picker__weekday-display { font-size: 2rem;}

.wpcf7-submit::after { content: ""; }

.wpcf7-form small { font-size: .8rem;
    color: #9e9e9e;}

.wpcf7-validates-as-required+label:after { content: "*"; display: inline;}

.wpcf7 .wpcf7-form .thumb:nth-child(odd) {
	display: none;
}

.wpcf7-form { padding: 20px 10px;}
.wpcf7-form * { box-sizing: border-box;}

.wpcf7 .screen-reader-response { display: none; }

.wpcf7-checkbox { display: flex; }
