/*

Desmond
Copyright (c) 2018-2026, Peter A. McKay
Free to use under MIT License

Contents

- Basics & Typography
- Grid
- Banner & Cards
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries

/* Base & Typography ........................................*/

@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&family=Roboto+Slab:wght@100..900&display=swap'); /* Importing Roboto and Roboto Slab from Google Fonts... */

@font-face {
  font-family: 'Hattori Hanzo';
  src: url('hattori_hanzo/webfont.eot') format('eot'), url('fonts/hattori_hanzo/webfont.eot?iefix') format('eot'),
       url('hattori_hanzo/webfont.woff') format('woff'),
       url('hattori_hanzo/webfont.ttf') format('truetype'),
       url('hattori_hanzo/webfont.svg#webfont') format('svg');
}

html {
  font-size: 62.5%; /* Note, html is set to 62.5% so that all the REM measurements are based on 10px sizing. For example, 1.5rem = 15px 😊 */
  font-family: 'Roboto Slab', serif;
  font-weight: 350;
  background: #fcfcfc;
  color: black;
}

body {
  font-size: 2rem;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6, nav, .subhead {font-weight: 400;}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

nav, .subhead {font-family: 'Roboto Flex', Helvetica, Arial, sans-serif;}

h1 { font-size: 5.4rem; line-height: 1.25;  letter-spacing: -.1rem;}
h2 { font-size: 4.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 4.2rem; line-height: 1.35;  letter-spacing: -.1rem; }
h4 { font-size: 3.8rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 3.5rem; line-height: 1.5;  letter-spacing: -.08rem; }
h6 { font-size: 3.2rem; line-height: 1.5;  letter-spacing: 0; }

p {
  margin-top: 0; }

img {max-width: 100%;}

article {}

#post figcaption {
  text-align: center;
  margin-bottom: 2rem;
}

figure {
    margin-right: 0;
    margin-left: 0;
  }

figure img {
     width: 100%;
  }

figcaption {font-style: italic;}

hr {
  margin: 3rem 0;
  border-width: 0;
  border-top: 1px solid #E1E1E1; }

article {}

/* Grid...............................................*/

.container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; }
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 88%;
    padding: 0; }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 90%; }
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}


/* Banner & Cards ........................................*/


/* These styles tk. Need to pickup from customizations on pmckay.com */





/* Links..............................................*/

a {
    color:#131bb5;
    text-decoration: none;
  }

a:hover {
  color: #1EAEDB;
  text-decoration: underline;
}

/* Buttons............................................*/

.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  height: 38px;
  padding: 0 30px;
  color: #555;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid #bbb;
  cursor: pointer;
  box-sizing: border-box; }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #333;
  border-color: #888;
  outline: 0; }
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #FFF;
  background-color: #33C3F0;
  border-color: #33C3F0; }
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #FFF;
  background-color: #1EAEDB;
  border-color: #1EAEDB; }

/* Forms..............................................*/

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #33C3F0;
  outline: 0; }
label,
legend {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600; }
fieldset {
  padding: 0;
  border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
  display: inline; }
label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; }

/* Lists..............................................*/

ul {
  list-style: disc inside; }
ol {
  list-style: decimal inside; }

ol, ul {
  padding-left: 0;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }
li {
  margin-bottom: 1.25rem;
}

/* Code...............................................*/

code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #F1F1F1;
  border: 1px solid #E1E1E1;
  border-radius: 4px; }
pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre; }

/* Tables.............................................*/

th,
td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #E1E1E1; }
th:first-child,
td:first-child {
  padding-left: 0; }
th:last-child,
td:last-child {
  padding-right: 0; }

/* Spacing............................................*/

button,
.button {
  margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 2.5rem; }

/* Utilities..........................................*/

.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }

/* Clearing...........................................*/

.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }


/* Media Queries......................................*/

/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/

/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}






/*




 a, a:visited {
   color: #2A25B8; 
   /* Indizr orange... color: #FF9100; 
   font-weight: bold;
   text-decoration: none;
  }
 
 a:hover {text-decoration: underline;}
 
 
 img {
   max-width: 100%;
   }

.container img, .container-fluid img {margin-bottom: 1.5rem;}


/* ----------------------------------------------------------

Navbar

----------------------------------------------------------

 
 .navbar {
    margin-bottom: 1.25rem;
  }
 
 .nav-link {
   position: relative;
   top: 0.5rem;
   }
 
 .navbar-brand img {
   width: auto;
   max-width: 160px;
   margin-right: 1rem;
 }
 
 .navbar-toggler {border:none} 
 
 .navbar .socicons {
   }
 
  .navbar .socicons img {
    width: auto;
    max-width: 35px;
    margin: 0.5rem 0.25rem;
  }
 
 .dropdown-menu {}

 .dropdown-menu a, .dropdown-menu a:visited {color: white;}
 
 .dropdown-menu a:hover {
   background: #f2f2f2;
   color: #2A25B8;
   } 

/* ----------------------------------------------------------

Jumbotron & Cards

----------------------------------------------------------

.jumbotron, .jumbotron>*, .album {background: none}

.jumbotron a.btn, .jumbotron a.btn:visited {color: white;}

.card img {margin-bottom: 0.25rem;}

.card a, .card a:visited {color: black;}

.card a:hover {text-decoration: none;}

.card-text, .album .row {margin-bottom: 1.5rem;}

.album .row {}

/* ----------------------------------------------------------

Footer

----------------------------------------------------------
 
 .footer {
 
   /* 
   Turning this off for now, leaving background color to Bootstrap to see how that looks...
   background: #2A25B8;
   background: #464646;
   
   
   margin-top: 3rem; 
   color: #ebebeb;
   padding: 2rem 0 12rem 0;
   position: relative;
   top: 2rem;
   }
 
 
 


/* Blog Customizations................................

#homepage, #about, #post {margin-top: 3rem;}

#homepage header, #about header {
    margin-bottom: 4rem;
  }

#homepage header h1, #about header h1  {
    margin-bottom: 0.5rem;
  }

#newsRiver li {
    list-style:none;
    color: #5b5b5b;
  }

#newsRiver a {margin-right: 1rem;}

#authorinfo {
    margin-bottom: 1.25rem;
  }

#bysoc, #byline, #email {
    display: block;
  }

#homepage header img, #about header img, #bysoc img {
    height: 1.75rem;
    width: auto;
    margin: 2px;
    position: relative;
    top: 0.5rem;
  }