/*
Theme Name: sld
Theme URI: http://sullivanlehdesigns.com
Author: Underscores.me /colleen sullivan leh
Author URI: http://sullivanlehdesigns.com
Description: my template
Version: 1.0.2017
License: private. mine. all rights reserved
License URI: none. you may not use this design.


Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
*/

/* TABLE OF CONTENTS
#base styles
#grid
#typography
#clearing
#figures
#header
#articles
#aside
#site footer
#links
#nav items
#forms
*/

/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */

html {
  font-size: 16px; }
body {
  font-size: 1em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400;
  font-family: 'Lato', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #222; }

/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  margin: 0 4%;
  padding: 0 20px;
  box-sizing: border-box; }
  header.container {padding:0;}
  
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

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

/* For devices larger than 550px */
@media (min-width: 550px) {
  .container { margin:0 8% }
  .column,
  .columns, 
     .column:first-child.listing-item,
     .columns:first-child.listing-item { margin-left: 4%; }
  .column:first-child,
  .columns:first-child { margin-left: 0; }
  .one.column,
  .one.columns                    { width: 16.8%; }
  .two.columns                    { width: 37.6%; }
  .three.columns                  { width: 58.4%;            }
  .four.columns                   { width: 79.2%; }
  .five.columns                   { width: 100%; margin-left: 0; }

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

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

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 20.8%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 42.2%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 62.8%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 83.4%; }
  

  .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%; }
  .pull-left{margin-left:0;}
  .push-right{float:right;}
  }
  
/* Larger than tablet */
@media (min-width: 750px) {
	body {font-size:1.2em;}
}  
 @media (min-width: 74em) {
	.container { margin:0 12%;}
	body {}
     .title h1{padding-top:2rem;}
}
    /* Larger than Desktop HD */
 @media (min-width: 95em) {
	.container { margin:0 18%; max-width:70em;}
	body {font-size:1.3em;}
     .title h1{padding-top:2rem;}
}

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */

h1, h2, h3, h4, h5, h6 {
  margin-top: .5em;
  margin-bottom: .2em;
  font-weight: 400; }
h1 { font-size: 2.5em; line-height: 1.1; }
h2 {  font-size: 2.0em; line-height: 1.3; }
  h2.subtitle, h2.widget-title, h2.widgettitle {font-size:1.5em; font-weight:300;}
h3 { font-size:1.5em;font-weight:300;text-transform:uppercase;letter-spacing:.1em;}
h4 { font-size: 1.4em; line-height: 1.35;  text-transform:capitalize;letter-spacing:.1em;}
h5 { font-size: 1.2em; line-height: 1.5;  color:#a1774f; }
h6 { font-size: 1em; line-height: 1.6;   }
p{margin:0;padding:.5em 0;}
ul, ol {margin-top:0;padding-left:0;}
li {margin-left:1em;line-height:1.3;padding-bottom:1em;}
p+ul {margin-top:0;}
p+h2, p+h3, p+h4, p+h5 {}
h5+p, h4+p {margin-top:0;padding-top:0;}
.subtitle{margin-bottom:2.5rem;}
.readmore, .small {font-size:.8em; font-style:italic;font-weight:300;}
  span.small{padding-left:.5em;color:#888;}
q {font-style:italic; color:#555;
  quotes: "“" "”" "‘" "’";}
q:before {
    content: open-quote;}
q:after {
    content: close-quote;}
.quote-name {font-family: 'Lato', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;text-transform:uppercase;letter-spacing:.1em;font-weight:300;font-size:.8em;}

@media (min-width: 550px) {
 h1 {font-weight:300; font-size: 3em; line-height: 1.1; }
  h2 {padding-top:.25em;}
  .single h2 { border-top:.1em dotted #999;}
  h6 {display:block;clear:both;}
}
@media (min-width: 45em) {
  h2 { font-size: 3.2em; font-size:1.5em; letter-spacing: .1rem; line-height: 1.3; }
  h3 { font-size:1.1em; line-height:1.1;text-transform:uppercase;font-weight:700; word-spacing:.2em;display:inline-block;border-top:.1em dotted;padding-top:.25em;letter-spacing: .08em;  margin-top:.5em;}
  h4 { font-size:1.1em; text-transform:uppercase; word-spacing:.2em;letter-spacing: .05em; margin-top:1.5em;}
  h5 {font-size:1.5em;line-height:1.2;font-weight:300;}
  h6 {font-size:.6em; line-height:1; text-transform:uppercase; letter-spacing:.1em; color:#555;font-weight:700;border-top:.1em dotted;padding-top:.3em;display:inline;}
}

@media (min-width: 65em) {
  h2 {font-size:1.6em; letter-spacing: .1rem; }
}

 @media (min-width: 75em) {
   h2 { }
}
  /* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf, .clear, .group {
  content: "";
  display: table;
  clear: both; }


/* Figures 
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
figure {border:1px solid #eeeae5;padding:1rem;background-color:#f7f5f3;margin:2rem 1rem;}
   figure p{padding:1rem;background-color:#fff;}
  figure img {width:100%;height:auto;}
figcaption{font-style:italic;color:#4b4c4f;font-size:.9em;}

@media (min-width: 37.5em) and (max-width:69.99999em) {
  figure {width:46%;display:inline-block;margin:.5rem;}
    .work figure:first-of-type, .work figure:nth-of-type(3n) {margin-left:-20%;}
    .work figure:nth-of-type(-n+2) {margin-top:2rem;}
   figcaption{font-style:italic;font-weight:300;color:#636469;}
}
@media (min-width: 70em) {
  figure {width:30%;display:inline-block;}
    .home figure {width:90%;}
   figure img {object-fit:contain; max-height:20em;margin:0 auto;}
  .work figure:first-of-type {margin-left:-20%;}
  .work figure:first-of-type, .work figure.thirds:nth-of-type(4n) {margin-left:-20%;}
  .work figure:nth-of-type(-n+3) {margin-top:1rem;}
  .work figure:last-of-type + *{}
figure.half {width:45%;}
figure.half:nth-of-type(3n){margin-left:-20%;}
}
@media (min-width: 98em) {
	/*figure {max-width:32%;display:inline-block;}*/
}

/* Circle images 
–––––––––––––––––––––––––––––––––––––––––––––––––– */
 .circle {margin-left:-.5em; }
 header .circle {z-index:1;border:1px solid #ccc;width:16em;height:16em;border-radius:50%;}
 .circle img{width:10em;height:10em;border-radius:50%;border:1px solid #ccc;object-fit:cover;}
   
@media (min-width: 550px) {
  .listing-item .one {margin-left:-20%;}
  .category .circle img{width:3.8em;height:3.8em;}
   header .circle {filter:opacity(40%);}
}
@media (min-width: 850px) {
  .category .circle img {width:5em;height:5em;}
}
 @media (min-width: 37.5em) {
  header .circle{width:22em;height:22em;}
} 
 @media (min-width: 55em) {
  header .circle {filter:opacity(100%);}
}
@media (min-width: 95em) {
  .category .circle img {width:7em;height:7em;}
  .listing-item .one {margin-left:-25%;}
}

/* Header 
 –––––––––––––––––––––––––––––––––––––––––––––––––– */

header.container {margin-top:1rem;}
header .logo {margin-top:1rem; margin-bottom:1.5rem;}
.logo h2 {font-size:1.2rem;font-weight:400; letter-spacing:.05em; color:#66388f;border:none;}
header .logo svg{width:3rem;height:3rem; display: inline-block;
   vertical-align: middle; fill:#774e9b;}
 p.site-description {font-size:.85em;color:#66388f;margin-left:54px;margin-top:-1em; }

@media (min-width: 37.5em) {
  header .logo{text-align:right;margin-top:0;margin-bottom:0;}
  .logo h2 {margin-bottom:0;}
  .logo p{margin-top:0;}
 .site-description {margin-left:0;margin-top:0;font-weight:300;}
}  
@media (min-width: 75em) {
   header .logo svg{width:3.2rem;height:3.2rem; padding-right:.4em;}
}

/* HOME 
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.summary {font-size:.8em;line-height:1.5; color:#555;}

/* Articles  
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
.content header{width:100%;}
article + footer {margin-top:2em;}
.title {postion:relative;}
article.item {border-top:.2rem dotted #999;margin-top:1rem;padding-top:1em;}
.title h6 {color:#999;}
.content .project-peek {position:relative;z-index:-1;}

article{z-index:100;}
article footer h4{font-size:.9em;margin-bottom:0;}
article footer{margin-top:2rem;}
article footer div{display:block;}
article footer p{margin:0;padding:0;}
.post-meta div, .related{border-top:1px solid #ccc;width:100%;margin-top:1rem;}
 .post-meta h6{margin-top:0;}
.related{width:100%;}
.related .columns:first-of-type{margin-left:0;}
.related h6{border:none;margin-top:.5em;}
.content footer div.column:last-of-type {margin-bottom:4em;}
.post-nav{width:100%;}
nav.post-nav a {padding:0;}
.related-post img{filter: brightness(75%);}
.related-post img:hover{filter: brightness(100%);}
.why {margin-bottom:1rem;}
.why li {font-size:.92em;}

 @media (min-width: 37.5em) {
 .post-meta div, .related{border:none;}
    .title h1{float:right;text-align:right;padding-top:0;margin-top:.5rem;}
    .title h6 {float:right; margin-top:4rem;border:none;}
    .subtitle,  .single h2.subtitle {margin-top:-1em;margin-left:16.8%; border:none;font-weight:300; }
      .home .subtitle {margin-top:0;}
    .post-meta{margin-top:4em;width:100%;border:none;}
    .related{margin-top:4em;width:100%;}
    .post-nav{margin-top:4rem;width:100%;}
} 

 @media (min-width: 75em) {
     .title h1{font-size:3em;}
}
 /* Archives 
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.item span {margin-left:.5rem;}
.row .item{margin-bottom:2rem;}
    .item h6 {border-top:none;}
.item h6 a {margin-right:.5em; margin-left:.5em;}
.item h6 a:first-of-type{margin-left:0;}


 /* Aside 
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
aside {border-top:1px solid #c2c0c3;margin-top:1rem;
   font-family:"Georgia", serif;color:#636469;font-size:.9em;padding-top:1em;}
aside h5 {font-size:.875em;line-height:1.2;margin:.1rem 0 1.4rem;}
  aside h5.stack{margin-bottom:0;}

 @media (min-width: 37.5em) {
 aside{border:none;padding-top:2rem;margin-top:0;}
 }
/* site footer 
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
.site-footer {margin-top:5rem;border-top:.2em dotted #c2c0c3;padding-top:1rem;padding-bottom:2rem;}
footer .logo svg{width:1.5em;height:1.5em; display: inline-block;
   vertical-align: middle;fill:#774e9b;}
.contact{}
footer nav {margin-top:1rem;}
footer p {padding:0;}

@media (min-width: 37.5em) {
 footer p, footer li{font-size:.7em;padding:0;}
 footer ul{text-align:right;}
footer nav {margin-top:0;}

}  
 @media (min-width: 75em) {
  footer .logo svg{width:2.5em;height:2.5em; display: inline-block;
   vertical-align: middle;padding-right:.3em;}

}
  /*  links
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
a {color:#774e9b;text-decoration:none;  filter: brightness(100%);}
  .circle a{filter:brightness(90%);
	-webkit-filter: brightness(90%);
  	-webkit-transition: .5s ease-in-out;
  	-moz-filter: brightness(90%); 
  	-moz-transition: .5s ease-in-out;
  	-o-filter: brightness(90%) 
	-o-transition: .5s ease-in-out;}
	.circle a:hover {filter: brightness(100%);
			-webkit-filter: brightness(100%);
			-moz-filter: brightness(100%);
			-o-filter: brightness(100%);}
  figure a{filter:brightness(100%);
	}
 figure a:hover { filter:brightness(90%);
	}
 a:hover { filter: brightness(70%);
	-webkit-filter: brightness(70%);
	-moz-filter: brightness(70%);
	-o-filter: brightness(70%);}

p a::after{ content: "»"; padding-left:.2em;}
.bar:after {    content: "|";  padding-left:1em;}
  .bar:last-child:after { content: "";}
.logo p a::after, footer a::after {content:"";}

 /*  navigation
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
nav ul{list-style-type:none;margin:0;padding:0;}
nav li {display: inline-block;vertical-align: middle; position:relative;border-right: 2px dotted #ccc;margin:0 auto; padding:0 .5em; font-size:.8em;}
nav a {padding:.5em .8em;  display: block;
    text-decoration: none;
    /*white-space: nowrap;*/}
 nav li:first-of-type a{}
nav li:last-child  { border: 0; }  /* remove the pipe from the last list item */
footer nav li {padding:0;} 

@media (min-width: 37.5em) {
footer nav li {padding:0 ;}
 header nav li {font-size:1em;}
   nav a {padding:.5em 1em;}
.main-nav li:first-of-type{}
nav li a {  position:relative;}
nav li  a::after {
	position: absolute;
	top: 0;
	left:0;
	right:0;
	margin-left:auto;
	margin-right:auto;
	width: 3.125em;
	height:3.125em;
	border-radius: 50%;
	background: #c2c0c3;
	content: '';
	opacity: 0;
	-webkit-transition: -webkit-transform 0.6s, opacity 0.3s;
	transition: transform 0.6s, opacity 0.3s;
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
	z-index:-1;}
nav li a:hover::after {
	opacity: .3;
	-webkit-transform: scale(1);
	transform: scale(1);}

.post-nav h6 {border:none;padding-top:1em;}
.circle-nav{background-color:#e0dfe0;width:2.5em;height:2.5em; border-radius:50%;
transition: background-color 0.3s ease;
-webkit-transition: background-color 0.3s ease;
 filter: brightness(80%);
 margin:0 0 .8em;}
 .circle-nav:hover{background-color:#e0dfe0;}
.chevron {padding:.6em;}
.chevron a{  color: #fff!important;
  filter:brightness(100%)!important;} /* must declare important to override page selection color brightness */
.chevron a:hover {color:black;}
.chevron a:before {
  border-style: solid;
  border-width: 0.1em 0.1em 0 0;  /* Line thickness */
  content: '';
  display: inline-block;
  height: .8em;     /* Arrow size; Height & Width must remain equal */
  width: .8em;
  position: relative;
  transform: rotate(-45deg);     
  color: #fff!important;
  filter:brightness(100%)!important;
  transition: border-width 0.2s ease;
  -webkit-transition: border-width 0.2s ease;}
/* Hover State */   
.chevron a:hover:before {
  content: '';
  color: black;
  border-width: 0.3em 0.3em 0 0;
  }      
.chevron.right a:before {
 left: 0;
 transform: rotate(45deg);    }
 .chevron.left {padding:0.6em 1em;}
.chevron.left a:before {
  top: 0;
  transform: rotate(225deg);
  /* To position at top of element, compensate for rotation with margin-top: -2.5em; */}

/* Small menu. 
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {
	.menu-toggle {
		display: none;
	}
	.main-navigation ul {
		display: block;
	}
}


/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  height: 2rem;
  padding: 0 1.8rem;
  color: #555;
  text-align: center;
  font-size: .7em;
  line-height: 2rem;
  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="submit"]:hover { background-color: #774e9b;color:#fff;}
form label span {font-weight:300;margin-right:.5em;}
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 2rem;
  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;
   }
  .search-form label {display:inline-block;margin: 0 .5em 0 0;}
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; }
  p+form {margin:2rem 0;}

/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {list-style: disc outside; }
ol { list-style: decimal outside; }
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: 1rem; }


/* plugins override 
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.wp-featherlight-captions div.featherlight, .wp-featherlight-captions div.featherlight:last-of-type{background-color:rgba (0,0,0,.3)!important;}
.featherlight .featherlight-content .caption {padding-top:.5em; font-weight:300; font-family: 'Lato', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;}