/*================ Variables, theme settings, and Sass mixins ================*/
/*================ Global | Sass Mixins ================*/
@mixin clearfix() {  &:after {  content: ""; display: table; clear: both; }  *zoom: 1;}
@mixin prefix($property, $value) {  -webkit-#{$property}: #{$value};  -moz-#{$property}: #{$value};  -ms-#{$property}: #{$value};  -o-#{$property}: #{$value};  #{$property}: #{$value};}
@mixin transition($transition: 0.1s all) {  @include prefix('transition', #{$transition});}
@mixin transform($transform: 0.1s all) {  @include prefix('transform', #{$transform});}
@mixin backface($visibility: hidden) {  @include prefix('backface-visibility', #{$visibility});}
@mixin visuallyHidden {  clip: rect(0 0 0 0);  clip: rect(0, 0, 0, 0);  overflow: hidden;  position: absolute;  height: 1px;  width: 1px;}
@mixin box-sizing($box-sizing: border-box) {  -webkit-box-sizing: #{$box-sizing};  -moz-box-sizing: #{$box-sizing};  box-sizing: #{$box-sizing};}

/*============================================================================
  Dependency-free breakpoint mixin
    - http://blog.grayghostvisuals.com/sass/sass-media-query-mixin/
==============================================================================*/
$min: min-width;
$max: max-width;
@mixin at-query ($constraint, $viewport1, $viewport2:null) {
  @if $constraint == $min {
    @media screen and ($min: $viewport1) {
      @content;
    }
  } @else if $constraint == $max {
    @media screen and ($max: $viewport1) {
      @content;
    }
  } @else {
    @media screen and ($min: $viewport1) and ($max: $viewport2) {
      @content;
    }
  }
}

$siteWidth: 100%;
$gutter: 30px;
$gridGutter: 30px;
$radius: 2px;
$small: 567px;
$medium: 767px;
$large: 768px;
$semilarge: 967px;
$postlarge:1199px;
$laplarge:1599px;
$wide: 5000px;


$viewportIncrement: 1px;
$postSmall: $small + $viewportIncrement;
$preMedium: $medium - $viewportIncrement;
$presemiLarge: $semilarge + $viewportIncrement;
$prepostLarge: $postlarge + $viewportIncrement;

/*================ The following are dependencies of csswizardry grid ================*/
$breakpoints: (
  'small' '(max-width: #{$small})',
  'medium' '(min-width: #{$postSmall}) and (max-width: #{$medium})',
  'medium-down' '(max-width: #{$medium})',
  
  'large' '(min-width: #{$large}) and (max-width: #{$semilarge})',
  'post-large' '(min-width: #{$presemiLarge}) and (max-width: #{$postlarge})',
    'lap-large' '(min-width: #{$prepostLarge}) and (max-width: #{$laplarge})',

  'wide' '(min-width: #{$prepostLarge}) and (max-width: #{$wide})'
);
$breakpoint-has-widths: ('small', 'medium', 'medium-down', 'large', 'post-large', 'wide');
$breakpoint-has-push:  ('medium', 'medium-down', 'large', 'post-large', 'wide');
$breakpoint-has-pull:  ('medium', 'medium-down', 'large', 'post-large', 'wide');


.newsletterwrapper .btn.close:before { border:none;content:none; }
.newsletterwrapper btn.close::after , .newsletterwrapper btn.close::before {content: none;}

#email-modal{display:none; @include at-query ($max, $medium) { display:none !important; }height:100%;left:0;position:fixed;top:50%;width:100%;z-index:1000;}

#email-modal .window-window .window-content .title b { font-family:$headerFontStack; }

#email-modal .modal-window .window-window{ float:left;width:50%;top: 50%;@include at-query ($max, $laplarge) { width:70%; }@include at-query ($max, $postlarge) { width:70%; } @include at-query ($max, $semilarge) { width:90%; }height:auto;position: absolute; transform: translateY(-50%);-webkit-transform: translateY(-50%); display: inline-block; text-align: center; margin: auto;left: 0; right: 0;margin: auto; }
#email-modal .modal-window{display:none;margin:0 auto;padding:10px;}
#mc_embed_signup #mc-embedded-subscribe-form #mail { border:none;float:left;width:100%;height:50px; background:#ffffff;margin:0;padding:0 85px 0 15px;font-size:17px; }

#mc_embed_signup #mc-embedded-subscribe-form input::-webkit-input-placeholder {  color:#000000;}
#mc_embed_signup #mc-embedded-subscribe-form input:-moz-placeholder { color:#000000;}
#mc_embed_signup #mc-embedded-subscribe-form input::-moz-placeholder {  color:#000000;}
#mc_embed_signup #mc-embedded-subscribe-form input:-ms-input-placeholder {  color:#000000;}
#mc_embed_signup #mc-embedded-subscribe-form input { color:#000000; }

#mc_embed_signup form input[type="email"] {border-radius:px; }
#mc-embedded-subscribe-form input[type='text'] { border:none;  }
#mc_embed_signup form{display:inline-block;text-align:center;width:100%;}
#mc-embedded-subscribe-form input[type="email"]:focus { border:none; }
#mc_embed_signup form{text-align:center !important;margin:0px 0 10px;padding:0px;position:relative;}
#email-modal .window-window .window-content img { display:block; }
#email-modal .window-window .window-content { position:relative;float:left;display:inline-block;width:100%;text-align:center;margin:auto;background:rgba(#ffffff,0.9); }
#email-modal .modal-overlay{background:;height:100%;position:absolute;width:100%;}
#email-modal .modal-overlay{opacity:0.8;filter:alpha(opacity=50);zoom:1;}
#email-modal .window-border{background:#111;left:0;position:absolute;top:0;}
#email-modal .window-window{position:relative;min-height:280px;}
#email-modal .window-window .window-background{opacity:0.9;filter:alpha(opacity=90);}
#email-modal .window-window .window-content{padding:0px;margin:0px;}
#mc_embed_signup button { border-radius:0 px px 0;top:0;width:auto;margin:0;font-size:14px;font-weight:normal;position:absolute;right:0;background:;color:; }

#email-modal .window-window .window-content .title,
#email-modal .window-window .window-content .message{text-align:center;float:left;border-top:none;color:#000000;font-size:16px;}

#email-modal .window-window .window-content .message { width:100%;margin:auto; }
#email-modal .window-window .window-content .title{display:inline-block;font-size:30px;@include at-query ($max, $laplarge) {font-size:24px; }left:0;letter-spacing:0.05em;line-height:normal;margin:0 auto;padding:0 0px 20px;text-align:center;width:100%;}
.title{}
#email-modal .window-window .window-content .title span:before{position:absolute;top:0;left:50%;margin-left:-10px;height:2px;content:"";width:20px;background:#404e53;}
#email-modal .window-window .window-content .title span{font-size:14px;text-transform:none;display:block;font-weight:normal;padding-top:18px;line-height:14px;color:#404e53;position:relative;margin-top:15px;letter-spacing:0;}
#email-modal .window-window .window-content .message{clear:both;padding:0px 25px 15px;margin-bottom:0px;font-weight:normal;}
#mailchimp-email-subscibe { padding:0px 40px 0 40px;float:left;width:50%; position:absolute;top:50%;transform:translateY(-50%);-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);}
#mce-EMAIL{border:1px solid #000;color:#333;font:11px arial, sans-serif;height:11px;margin:0 !important;padding:8px !important;width:217px;}
#mc-embedded-subscribe,
#mc_embed_signup button span,
#mc_embed_signup .input-group-btn .btn{color:#fff;height:auto !important;width:auto;line-height:36px !important;padding:0 !important;text-transform:uppercase;background:#272e31;display:block;}
#mc_embed_signup .input-group-btn{float:right;}
#mc_embed_signup button span span{border:none;padding:0 20px !important;background:none;}
#mc_embed_signup button:hover span,
#mc_embed_signup .input-group-btn .btn:hover{background:#cbeded;}
#mc_embed_signup .input-group-btn .btn{padding:0 15px !important;}
#mc_embed_signup button:hover span span{background:none;}

#mc_embed_signup button:hover { @include transition(all 0.4s ease-in-out); }
#mc_embed_signup button { float:right;border:none;height:50px; }
#mc_embed_signup input[type="text"]:focus { border:none; }
.newsletterwrapper .btn.close {  background:url(//www.cradleplanet.com/cdn/shop/t/19/assets/hover-Close.png?v=143907006325609251981574404773) no-repeat;background-position:center right; border:none;  cursor: pointer; width: 58px; height: 58px; text-indent: -9999px;  position: absolute;padding:0; }
.newsletterwrapper .btn.close { top:-6%; right:-2%;z-index:9; }