/****** STYLES specifically for Katherine M *****/ 
/****** FONTS + SPECIAL CHARACTERS *******/ 
@import url(https://fonts.googleapis.com/css?family=Italianno);
@import url(https://fonts.googleapis.com/css?family=Playfair+Display);


/****** IMPORT THE BASE CSS FILES *******/ 
@import '../_incl/normalize.css';
@import '../_incl/base.css';
@import '../_incl/flexslider.css';


/****** BASE CSS FOR SITE ********/
body {font-family: 'Playfair Display', serif; font-size:1.3em; background-color:#ECE6D7; color:#000;}
h1, h2, h3, h4, h5 {font-family: 'Italianno', 'Great Vibes', cursive;}
h1 {font-size: 2.5em; font-weight:400; line-height: 1em; color:#000;}
h2 {font-size: 2.2em; font-weight:400; line-height: 1em; color:#333;}
#logo * {font-family: 'Italianno', 'Great Vibes', cursive; font-size:2em; text-decoration: none; color:#EEE;}
a.buttonlink {background:#C5523D; border:#77352A; width:auto;}
a.buttonlink:hover {background:#77352A; border:#77352A;}
.amp {font-family:'Playfair Display', serif; font-size:0.7em; color:inherit;}
.spacing-p {min-height: 40px;}
.noshow {display:none;}


/****** SECTION SPECIFIC ********/
header {background-color:#c5523d;}
nav * {text-transform: uppercase; color:#DDD; font-size:0.7em;}
#topnav {font-size:1.5em !important;}

#pagecontent {background-image: url(../img/bkg_kmc.png); background-position: bottom right; background-repeat: no-repeat;}

footer {background-color:#090909;}
footer * {font-size:14px !important; text-align:center; color:#CCC; line-height:18px;}
footer a {text-decoration: none;}
footer a:visited {color:#DADADA;}
footer a:active, footer a:hover{color:#c5523d;}

footer ul {margin:0 auto; }
footer ul li {display:inline; padding:1px 10px;}

/****** AUDIO PLAYER OVERLAY  ********/
#shortcuts { position:relative; color: #777; font-size: 0.9em; margin:5px 0px 0px; 
    padding:5px;}
#shortcuts div {font-size:0.8em;}
#shortcuts p { margin:2px; }
#shortcuts em { font-style: normal; background: #d3d3d3; padding: 3px; position: relative; left: -3px;
    -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px;
    -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); -o-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); }
@media screen and (max-device-width: 480px) {
        #shortcuts { display: none; }
}


/****** MAILLING LIST OVERLAY  ********/
.modal-container {margin:20px 0; border:0px solid #F00; clear: both; position: relative; width: 350px;}
.modal-container button {
    display: inline-block; color: #fff; width: 280px; height: 50px; line-height: 40px; background: #c5523d; font-size: 1.0em;
    border: 0; border-radius: 7px; box-shadow: 0 10px 10px -5px #333; transition: background 0.3s ease-in; }
.modal-container .modal-backdrop { 
    height: 0; width: 0; opacity: 0; overflow: hidden; transition: opacity 0.2s ease-in;}
.modal-container #modal-toggle {
    position: absolute; left: 0; top: 0; height: 50px; width: 100%; margin: 0; opacity: 0; cursor: pointer;}
.modal-container #modal-toggle:hover ~ button { background: #77352a; }
.modal-container #modal-toggle:checked { width: 100vw; height: 100vh; position: fixed; left: 0;  top: 0;  z-index: 9;  opacity: 0;}
.modal-container #modal-toggle:checked ~ .modal-backdrop {
  background-color: rgba(0, 0, 0, 0.6);  width: 100vw;  height: 100vh;  position: fixed;  left: 0;
  top: 0;  z-index: 9;  pointer-events: none;  opacity: 1;}
.modal-container #modal-toggle:checked ~ .modal-backdrop .modal-content {
  background-color: #fff;  max-width: 400px;  width: 100%;  height: 360px;  padding: 10px 30px;
  position: absolute;  left: calc(50% - 200px);  top: 12%;  border-radius: 4px;  z-index: 999;
  pointer-events: auto;  cursor: auto;  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.6);}