@charset "UTF-8";
/******************************************************************
Site Name:
Author: Ko Kimura at No Shortcuts Design

Stylesheet: IE Stylesheet

So instead of using the respond.js file to add media query support
to IE, we're going to use SASS to create an easily readable css file.
Here, we import all the styles the standard stylesheet gets, only
without the media queries. No need to worry about editing anything!

******************************************************************/
/******************************************************************
IMPORTS & DEPENDENCIES
Remember, all the BASE styles are called already since IE can
read those. Below, we need to import only the stuff IE can't
understand (what's inside the media queries). We also need to
import the mixins file so SASS can understand the variables.
******************************************************************/
/******************************************************************
Site Name:
Author: Ko Kimura at No Shortcuts Design

Stylesheet: Variables

Here is where we declare all our variables like colors, fonts,
base values, and defaults. We want to make sure this file ONLY
contains variables that way our files don't get all messy.
No one likes a mess.

Need help w/ choosing your colors? Try this site out:
https://0to255.com/
******************************************************************/
/******************************************************
COLORS
NOTE: To use these SASS variables in Child Theme,
You need to copy all to _valiable.scss in the Child Theme.
******************************************************/
/*****************************************
  Choose Theme Specific Colors, then....
  *******************************************/
/*****************************************
  ... change VALUES of colors below as needed.
  DON"T remove any color names, just change the values!
  *******************************************/
/******************************************************************
Site Name:
Author: Ko Kimura

Stylesheet: Typography

Need to import a font or set of icons for your site? Drop them in
here or just use this to establish your typographical grid. Or not.
Do whatever you want to...GOSH!

Helpful Articles:
https://trentwalton.com/2012/06/19/fluid-type/
https://ia.net/blog/responsive-typography-the-basics/
https://alistapart.com/column/responsive-typography-is-a-physical-discipline

******************************************************************/
/************************************************
(Off by default) The following is based of Typebase:
https://github.com/devinhunt/typebase.css
I've edited it a bit, but it's a nice starting point.
*************************************************/
/************************************************
some nice typographical defaults
more here: https://www.newnet-soft.com/blog/csstypography
*************************************************/
/* line 32, Users/kokimura/Sites/Food Words/wp2018/wp-content/themes/no-shortcuts/library/scss/partials/_typography.scss */
p {
  /******
  (off by default) Enabling fancy ligatures when available
  DON'T USE IF SITE USES JAPANESE.
  This causes garbling on some browsers.
  日本語使うと、Safari 以外のブラウザーで文字化けする場合あり！
  Comment added by Ko.
  *******/ }

/**********************************************
CUSTOM FONTS (Off by default)
NOTE: Styles can be moved and activated in child theme
**********************************************/
/************************************************
  Google fonts are called in functions.php
  Make changes as needed.
  *************************************************/
/*********************
  FONT FACE (IN YOUR FACE)
  *********************/
/*  To embed your own fonts, use this syntax
    and place your fonts inside the
    library/fonts folder. For more information
    on embedding fonts, go to:
    https://www.fontsquirrel.com/
    Be sure to remove the comment brackets.
  */
/*  @font-face {
        font-family: 'Font Name';
        src: url('library/fonts/font-name.eot');
        src: url('library/fonts/font-name.eot?#iefix') format('embedded-opentype'),
               url('library/fonts/font-name.woff') format('woff'),
               url('library/fonts/font-name.ttf') format('truetype'),
               url('library/fonts/font-name.svg#font-name') format('svg');
        font-weight: normal;
        font-style: normal;
    }
  */
/*******************************
  JAPANESE FONTS
  Make sure desired Japanese fonts are placed
  inside the library/fonts/jp folder.
  ********************************/
/*
  @font-face {
        font-family: 'IPA Mincho';
        src: url('../../library/fonts/jp/ipaexm.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }
  $jp-font-reg:        'IPA Mincho', sans-serif;
  */
/*
  @font-face {
        font-family: 'RoundedMPlus Light';
        src: url('../../library/fonts/jp/rounded-mplus-1c-light.ttf') format('truetype');
        font-style: normal;
    }
  $jp-font-light:    'RoundedMPlus Light', sans-serif;

  // Calling RoundedMPlus Regular
  @font-face {
        font-family: 'RoundedMPlus Regular';
        src: url('../../library/fonts/jp/rounded-mplus-1c-regular.ttf') format('truetype');
        font-style: normal;
    }
  $jp-font-reg:      'RoundedMPlus Regular', sans-serif;
  */
/*
  @font-face {
        font-family: 'YasashisaGothic';
        src: url('../../library/fonts/jp/YasashisaGothic.ttf') format('truetype'),
             url('../../library/fonts/jp/YasashisaGothic.otf') format('otf'),
             url('../../library/fonts/jp/ipag.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }
  $jp-font-reg:        'YasashisaGothic', sans-serif;
  */
/*
  @font-face {
        font-family: 'LogoTypeGothicCondense';
        src: url('../../library/fonts/jp/LogoTypeGothicCondense.otf') format('otf'),
             url('../../library/fonts/jp/07LogoTypeGothic-Condense.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }
  $jp-font-reg:        'LogoTypeGothicCondense', sans-serif;
  */
/*
  @font-face {
        font-family: 'FGModernGothic';
        src: url('../../library/fonts/jp/FGModernGothic.ttf') format('truetype'),
             url('../../library/fonts/jp/ipag.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }
  $jp-font-reg:        'FGModernGothic', sans-serif;
  */
/******************************************************************
Site Name:
Author: Ko Kimura at No Shortcuts Design

Stylesheet: Mixins Stylesheet
You can ADD new mixins, but DON'T DELETE ANY mixins here.
******************************************************************/
/****************************************************
MOBILE FIRST BREAK POINTS - MEDIA QUERIES added by Ko
Smartphones Tall(portrait) is the starting default veiwport.
Viewpotts below are for stylyng larger or smaller devices.
Ref: https://davidwalsh.name/write-media-queries-sass

In order to use the samee SASS mixin used in Parent Theme,
Same mixins need to be available here.

Usage example:
@include phone-w
****************************************************/
/**********************************************
EXTRA MIXINS (Off by default)
NOTE: These mixins can be moved and activated in child theme
**********************************************/
/*********************
  TRANSITION
  I totally rewrote this to be cleaner and easier to use.
  You'll need to be using Sass 3.2+ for these to work.
  Thanks to @anthonyshort for the inspiration on these.
  USAGE: @include transition(all 0.2s ease-in-out);
  *********************/
/*********************
  BOX SIZING
  Value of "padding-box" is only supported in Gecko. So
  probably best not to use it. I mean, were you going to anyway?
  *********************/
/*********************
  BUTTONS
  *********************/
/*********************
  CSS3 GRADIENTS
  Be careful with these since they can
  really slow down your CSS. Don't overdo it.
  *********************/
/* @include css-gradient(#dfdfdf,#f8f8f8); */
/******************************************************************
Site Name:
Author:

Stylesheet: IE Grid Styles

Since the example grid is based on media queries, so rather than
setup some js library that would make IE8 and below understand
media queries, let's just add some styles that serves a fixed grid.

Again, if you want to roll your own, just remove this junk and put
whatever you use in here.

******************************************************************/
/*
you can call the larger styles if you want, but there's really no need
*/
/******************************************************************
ADDITIONAL IE FIXES
These fixes are now ONLY seen by IE, so you don't have to worry
about using prefixes, although it's best practice. For more info
on using Modernizr classes, check out this link:
https://www.modernizr.com/docs/
******************************************************************/
/*
For example, you can use something like:

.no-textshadow .class { ... }

You can also target specific versions by using the classes applied to
the html element. These can sometimes change, so take a look inside the
header.php file to see what they are:


.lt-ie8 .class { ... }

*/