/*
Theme Name: Reduce to Fit
Author: Ben Ickler
Author URI:
Description:
Template: twentysixteen
Version: 1.5
*/

/* Fonts */
@import url(https://fonts.googleapis.com/css?family=Schoolbell|Chelsea+Market);
.schoolbell {
  font-family: 'Schoolbell', cursive;
}
.cmarket {
  font-family: 'Chelsea Market', cursive;
}

/* Colors */

/* Top Level */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  font-size: 95%;
}

body {
 background: #fff1e0;
 font-family: 'Schoolbell', cursive;
 color: #393d76;
}

/* body.logged-in.admin-bar {
  padding-top: 3em;
} */


a, .linkish {
 color: #ff4545;
 text-decoration: none;
}

a {
  opacity: .85;
  transition: opacity .2s ease-in-out;
}

a:hover,
a:focus {
  opacity: 1;
}

h1,h2,h3,h4,h5,h6 {
  font-family: 'Chelsea Market', cursive;
}

strong {
    font-family: 'Chelsea Market', cursive;
    color: #28397b;
    font-size: 0.9em !important;
}

blockquote {
  border-left: 4px solid;
  font-size: inherit;
  font-style: initial;
  color: #5358a2;
  margin-bottom: 1.3em;
}
.format-quote blockquote {
  font-size: 1.2em;
}
blockquote:last-child {
  margin-bottom: 0;
}

.dashes {
  clear: both;
  position: relative;
  height: 1em;
  margin-top: .2em;
  font-size: 1.7em;
  color: #5358a2;
}
.dashes:after {
  content: '------------------';
  position: absolute;
  bottom: 0;
}

.linkish {
  display: block;
}

.anim-chev {
  display: inline;
}

#article-main aside.anim-chev {
  display: inline;
  border: none;
}

.more,
.excerpt_container a.more {
    color: #ff4545;
    border: 0;
    display: block;
    outline: 0;
}

.more span {
  display: inline-block;
  position: relative;
}

@keyframes more1 {
  0%, 50% {left:0;}
  100% {left:10px;}
}
@keyframes more2 {
  0%, 25% {left:0;}
  100% {left:10px;}
}
@keyframes more3 {
  0% {left:0;}
  100% {left:10px;}
}


.more span:first-of-type {
}
.more span:nth-of-type(2) {
}
.more span:last-of-type {
}

.more:hover span {
  left:10px;
}

.more:hover span:first-of-type {
  animation: more1 .4s ease-in-out;
}
.more:hover span:nth-of-type(2) {
  animation: more2 .35s ease-in-out;
}
.more:hover span:last-of-type {
  animation: more3 .3s ease-in-out;
}

/* Alignments */

.left {float:left;}
.right {float:right;}
.clear {clear:both;}
.center {text-align:center;}

/* Main Sidebar */

#sidebar-main,
#article-main {
  font-size: 1.2em;
}

#sidebar-main {
    background: #181248;
    color: #fff2e0;
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 100%;
}

.scrollhide {
  margin-left: 1em;
}

#sidebar-main .scrollhide {
  padding: 1em 1em 3em 0;
}

#primary h2 {
  color: #4564d8;
  font-size: 1.7em;
  font-weight: 400;
}

#top h2 {
  color: #fff2e0;
  font-size: 1.8em;
  font-weight: 400;
}
#top h2 a {
  color: #fff2e0;
}
#top article {
  font-size: 1em;
  color: #b9baf2;
}

.single #top h2 { display: none; }

.site-logo {
    float: left;
    margin-right: 3%;
    margin-bottom: 1%;
    padding-top: 1%;
    width: 35px;
}

.site-logo a {
  opacity: 1;
}

.home .site-logo {
  width: 38%;
  padding-top: 2%;
}

.home #top h2 {
  clear: none;
  width: 50%;
  font-size: 1.4em;
}

.home #top article {
  font-size: .8em;
}

.site-title {
  display: inline-block;
}

.single .site-slogan {
  display: none;
}

.nav-container {
  position: relative;
  display: block;
  clear: both;
  margin: 0;
  z-index: 5;
}

.single .nav-container {
  clear: none;
  display: inline-block;
  width: 81%;
  margin-top: 0;
}

#nav-main {
  position: relative;
  display: inline-block;
  vertical-align: top;
  padding-top: 1px;
  height: 2.4rem;
}
#nav-main a {
    cursor: pointer;
    font-size: 1.4em;
}

#nav-main a .chevron {
    font-size: inherit;
    margin: 0;
    transition: transform .4s ease-in-out;
}

#nav-main.on .chevron {
  -moz-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}
#nav-main.off .chevron {
  -moz-transform: rotate(0);
  transform: rotate(0);
}

.sidebar-excerpt {
    display: inline-block;
    position: relative;
    width: 100%;
    padding: 0;
}

#primary .sidebar-excerpt h2 {
  font-size: 1.3em;
  color: #627bfe;
}

.sidebar-thumb {
    display: inline-block;
    vertical-align: top;
/*    background: rgba(255,255,255,.2); */
    margin: 6px 0;
    overflow: hidden;
    position: relative;
    padding-right: 2%;
}

/* .sidebar-thumb > img {
    position: absolute;
    top: 0;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, 0);
} */

.sidebar-thumb > img {
  border: 3px solid #5358a2;
}

.social-navigation {
  margin: 0;
  display: inline-block;
  vertical-align: top;
  height: 2.4rem;
  font-size: 1.05em;
}

.social-navigation a {
    display: block;
    height: 2em;
    position: relative;
    width: 2em;
    margin: 5px .5em;
    opacity: .7;
    transition: opacity .2s ease-in-out;
}

.social-navigation a:hover,
.social-navigation a:focus {
  opacity: 1;
}

.social-navigation a:before {
    content: "\f415";
    font-size: 2em;
    position: absolute;
    top: 0;
    left: 0;
}

.social-navigation a[href*="facebook.com"]:before {
    content: "\f203";
    color: #4862a3;
}

.social-navigation a[href*="twitter.com"]:before {
    content: "\f202";
    color: #1da1f2;
}

.glyphicons {
  font-size: 1.5em;
  cursor: pointer;
}

.glyphicons:before{padding:6px 0px}

#search-form {
  width: 100%;
  height: 0;
  display: block;
  opacity: 0;
  transition: height .4s ease-in-out, opacity .4s ease-in-out, margin .5s ease-in-out;
  font-size: 1.8em;
  margin-top: 0;
}

.single #search-form {
  width: 90%;
}

#search-form.on {
  height: 1.7em;
  opacity: 1;
}

#search-form input[type="search"] {
  padding: 0 .5em;
  border: 0;
  transition: padding .4s ease-in-out, height .4s ease-in-out, opacity .4s ease-in-out;
  height: 0;
  font-size: .6em;
  display: block;
  background: #fff1e0;
  color: #9190c7;
  font-family: 'Chelsea Market', cursive;
  opacity: 0;
}

#search-form.on input[type="search"] {
  padding: 1em .5em;
  border: 1px solid;
  border: 1px solid;
  height: 1.7em;
  opacity: .9;
}

#search-form.on input[type="search"]:focus {
  opacity: 1;
}


#search-form input[type="search"]::-webkit-input-placeholder {
  background: #fff1e0;
  color: #9190c7;
  font-family: 'Chelsea Market', cursive;
}
#search-form input[type="search"]:-moz-placeholder {
  background: #fff1e0;
  color: #9190c7;
  font-family: 'Chelsea Market', cursive;
}
#search-form input[type="search"]::-moz-placeholder {
  background: #fff1e0;
  color: #9190c7;
  font-family: 'Chelsea Market', cursive;
}
#search-form input[type="search"]:-ms-input-placeholder {
  background: #fff1e0;
  color: #9190c7;
  font-family: 'Chelsea Market', cursive;
}

#search-form input[type="search"]:placeholder {
  background: #fff1e0;
  color: #9190c7;
  font-family: 'Chelsea Market', cursive;
}

.glyphicons-search {
  color: #017ff5;
  font-size: 1.6em;
  height: 2.4rem;
  opacity: .7;
  transition: opacity .2s ease-in-out;
}

.glyphicons-search:hover,
.glyphicons-search:focus {
  opacity: 1;
}

.siderecent {
  margin-bottom: 50px;
}

.format-quote a.post-title,
.format-image a.post-title {
  display: none;
}

/* Formats */
#article-main .format-video aside.post_thumb {
  display: none;
}

/* Home */
#article-main {
  width: 66%;
  min-width: 320px;
  z-index: 0;
  display: inline-block;
  vertical-align: top;
}
#article-main .scrollhide {
  padding: 1% 3% 1% 0;
}

#article-main p {
  margin-bottom: 1.3em;
}
#article-main p:last-of-type {
  margin-bottom: 0;
}

.archive #article-main p {
  margin-bottom: 0;
}

#article-main article:last-of-type {
  padding-bottom: 50px;
}

#article-main aside {
    width: auto;
    display: inline-block;
    position: relative;
}

#article-main img,
#article-main iframe {
  margin-bottom: .7em;
  border: 3px solid #5358a2;
}

#article-main iframe {
  max-width: 500px;
}

#article-main aside.post_thumb.offsite {
    width: 9em;
    height: 6em;
    overflow: hidden;
    float: left;
    display: block;
    margin: 0 1.2em 0 0;
    position: relative;
}

#article-main aside.post_thumb.offsite > img {
  position: absolute;
  max-width: 100%;
}

.source-link {
  color: #393d76;
}

.sidebar-excerpt .source-link {
  color: #fff2e0;
  vertical-align: baseline;
}
#article-main .sidebar-excerpt .source-link {
  color: #ff4545;
}

.source-link span.glyphicons {
  font-size: 1.2em;
  vertical-align: baseline;
  display: inline;
  color: #ff4545;
}

.excerpt_container {
  display: block;
  padding: .5em 0;
  min-height: 6.5em;
}
.format-quote .excerpt_container {
  min-height: initial;
}

.excerpt_container a{
  color: #393d76;
}

.excerpt_container p a {
  text-decoration: underline;
}

.source_excerpt {
  padding-top: .2em;
}

#article-main .source_excerpt p:first-of-type {
  display: inline;
}

#article-main .source_excerpt p:first-of-type:before {
  content: 'Excerpt: ';
  font-weight: 700;
}

#article-main .source_excerpt p:last-of-type {
  margin-bottom:0;
}

/* Tags Menu */
#tagsmenu {
    right: 0;
    position: absolute;
    top: 0;
    width: 400px;
    height: 100vh;
    background: #181248;
    transition: width .3s ease-in-out;
    overflow-x: hidden;
    z-index: 25;
    overflow-y: scroll;
}
#tagsmenu.on {
  box-shadow: 0 5px 5px;
}

@keyframes navoff {
  0%, 25% {width:400px;}
  100% {width:0;}
}

#tagsmenu.off {
  width: 0;
  position: absolute;
}

#tagsmenu > article {
    margin: 4em 3em;
    min-width: 320px;
}

#tagsmenu ul {
    list-style: none;
    margin: 0;
    font-size: 1.4em;
}

#menu-tags-menu li:before {
  content: '#';
  color: #ff4545;
}

#menu-kudos li:before {
  content: '♥ ';
  color: #ff4545;
}

#menu-kudos li:after {
  content: ' >>';
  color: #ff4545;
}

#tagsmenu a {
  color: #fff2e0;
}

#tagsmenu a:hover {
  color: #ff4545;
}

#tagsmenu .chevron {
  margin: 1em 0 -1em 1.2em;
  font-size: 2.2em;
}

/* Footer */

/* Go Away */
#article-main aside.sidebar-thumb.hidesometimes,
.sidebar-thumb.hidesometimes {
  display: none;
}

.more-link {
  display: none;
}

/**
 * Media Queries
 */

/*
 * Does the same thing as <meta name="viewport" content="width=device-width">,
 * but in the future W3C standard way. -ms- prefix is required for IE10+ to
 * render responsive styling in Windows 8 "snapped" views; IE10+ does not honor
 * the meta tag. See https://core.trac.wordpress.org/ticket/25888.
 */
@-ms-viewport {
	width: device-width;
}

@viewport {
	width: device-width;
}

/* Portrait Mode */
@media screen and (orientation: portrait) {

  #sidebar-main {
    position: relative;
    width: 100%;
    min-width: initial;
    max-width: initial;
  }

  #sidebar-main.single {
    height: auto;
    z-index: 20;
    position: fixed;
    background: #302a66
  }

  #sidebar-main.single .scrollhide {
    padding: .5em 0 0;
  }

  #sidebar-main.single .siderecent {
    display: none;
  }

  #sidebar-main.home {
    margin-bottom: -2em;
  }

  #article-main {
    padding: 2em .5em;
    width: 100%;
    min-width: initial;
}

#article-main.home {
  display: none;
}

#article-main.single {
  margin-top: 3em;
}

  #tagsmenu {
    max-width: 100%;
  }
}

/* Tiny Phone Corrections */
@media screen and (max-width: 300px) {
  html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    font-size: 94%;
  }

  .single .nav-container {
    font-size: .8em;
  }

}

/* HTC */
@media screen and (min-width: 22em) {
  html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    font-size: 96%;
  }

  .home .site-logo {
    width: 40%;
    padding-top: 1%;
  }

  .home #top h2 {\
    font-size: 1.6em;
  }

}

/* Nokia Lumia */
@media screen and (min-width: 23em) {
  html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    font-size: 98%;
  }

  .home .site-logo {
    width: 32%;
  }

  .home #top h2 {
    width: 65%;
    font-size: 1.8em;
  }

}

/* Google Nexus */
@media screen and (min-width: 35em) {
  html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    font-size: 100%;
  }

  .home .site-logo {
    width: 28%;
  }

  .home #top h2 {
    width: 60%;
    font-size: 2em;
  }

  .social-navigation ul {
    font-size: 82%;
  }

}


/* iPad Mini */

@media screen and (min-width: 38.75em) {

.home #top article {
  font-size: .6em;
}

.home .site-logo {
  width: 36%;
  padding-top: 6%;
}

.nav-container {
  margin: 1em 0;
}

.dashes {
  margin-top: .5em;
}

.social-navigation ul {
  font-size: inherit;
}

#article-main.single {
  margin-top: 11em;
}


}


/* Tablet Portrait 740px */

@media screen and (min-width: 46.25em) {
  html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    font-size: 100%;
  }

  .site-logo {
      width: 16%;
  }

#top h2,
.home #top h2 {
  font-size: 2.5em;
}

.home .site-logo {
  width: 33%;
  padding-top: 4%;
}

.home #top h2 {
  width: 60%;
}


.single .site-slogan {
  display: inline;
}

.single #top h2 {
  display: inline-block;
}


.single .nav-container {
  display: block;
  clear: both;
  width: auto;
  font-size: 1em;
  margin-top: 0;
}

.site-logo,
.home .site-logo {
  padding-top: 1%;
}

.home #top h2 {
  clear: both;
  width: auto;
}

.home #top article {
  font-size: 1em;
}

.nav-container {
  margin-top: 0;
}

.sidebar-excerpt {
  width: 80%;
}

.sidebar-excerpt h2 {
  font-size: 1.7em;
}

}


/**
 * Tablet Landscape 880px
 */

@media screen and (min-width: 55em) {

  html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    font-size: 97%;
  }

  body {
   height: 100vh;
   width: 100vw;
   overflow: hidden;
   position: fixed;
   top:0;
  }

  body.logged-in.admin-bar {
    padding-top: 2em;
  }


  #page {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    position: fixed;
  }
  .content-area {
      position: fixed;
      height: 100vh;
      width: 100vw;
      overflow-y: hidden;
      overflow-x: hidden;
  }

  .site-logo {
      width: 36%;
  }

  .scrollhide {
      width: 100%;
      position: relative;
      height: 100%;
      overflow-y: scroll;
      overflow-x: hidden;
  }

  #sidebar-main {
      overflow: hidden;
      height: 100vh;
      width: 33.33%;
      min-width: 320px;
      max-width: 600px;
  }


  #article-main {
      height: 100vmin;
      overflow: hidden;
  }

 .glyphicons-search {
   font-size: 1.8em;
 }

 #search-form.on {
   margin-top: 0.7em;
 }

 .sidebar-thumb {
     min-width: 100px;
     max-width: 100px;
     width: 100px;
 }

 #article-main.single {
   margin-top: 0;
 }

}

/* Tablet Landscape */
@media screen and (min-width: 55em) and (max-height: 38.75em) {
  body {
    font-size: 14px;
  }

}

/**
 * Desktop Small 955px
 */

@media screen and (min-width: 59.6875em) {


}


/**
 * Desktop Medium 1100px
 */

@media screen and (min-width: 68.75em) {

  html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    font-size: 97%;
  }

  .dashes:after {
    content: '--------------------------';
  }

}


/**
 * Desktop Large 1240px
 */

@media screen and (min-width: 77.5em) {

}


/**
 * Desktop X-Large 1403px
 */

@media screen and (min-width: 87.6875em) {

  #article-main aside.sidebar-thumb.hidesometimes,
  .sidebar-thumb.hidesometimes {
    display: inline-block;
  }


}


/**
 * Print
 */

@media print {
	body {
		background: none !important; /* Brute force since user agents all print differently. */
		font-size: 11.25pt;
	}

	.secondary-toggle,
	.navigation,
	.page-links,
	.edit-link,
	#reply-title,
	.comment-form,
	.comment-edit-link,
	.comment-list .reply a,
	button,
	input,
	textarea,
	select,
	.widecolumn form,
	.widecolumn .mu_register form {
		display: none;
	}

	.site-header,
	.site-footer,
	.hentry,
	.entry-footer,
	.page-header,
	.page-content,
	.comments-area,
	.widecolumn {
		background: none !important; /* Make sure color schemes dont't affect to print */
	}

	body,
	blockquote,
	blockquote cite,
	blockquote small,
	label,
	a,
	.site-title a,
	.site-description,
	.post-title,
	.author-heading,
	.entry-footer,
	.entry-footer a,
	.taxonomy-description,
	.entry-caption,
	.comment-author,
	.comment-metadata,
	.comment-metadata a,
	.comment-notes,
	.comment-awaiting-moderation,
	.no-comments,
	.site-info,
	.site-info a,
	.wp-caption-text,
	.gallery-caption {
		color: #000 !important; /* Make sure color schemes don't affect to print */
	}

	pre,
	abbr[title],
	table,
	th,
	td,
	.site-header,
	.site-footer,
	.hentry + .hentry,
	.author-info,
	.page-header,
	.comments-area,
	.comment-list + .comment-respond,
	.comment-list article,
	.comment-list .pingback,
	.comment-list .trackback,
	.no-comments {
		border-color: #eaeaea !important; /* Make sure color schemes don't affect to print */
	}

	.site {
		margin: 0 7.6923%;
	}

	.sidebar {
		position: relative !important; /* Make sure sticky sidebar doesn't affect to print */
	}

	.site-branding {
		padding: 0;
	}

	.site-header {
		padding: 7.6923% 0;
	}

	.site-description {
		display: block;
	}

	.hentry + .hentry {
		margin-top: 7.6923%;
	}

	.hentry.has-post-thumbnail {
		padding-top: 7.6923%;
	}

	.sticky-post {
		background: #000 !important;
		color: #fff !important;
	}

	.entry-header,
	.entry-footer {
		padding: 0;
	}

	.entry-content,
	.entry-summary {
		padding: 0 0 7.6923%;
	}

	.post-thumbnail img {
		margin: 0;
	}

	.author-info {
		margin: 0;
	}

	.page-content {
		padding: 7.6923% 0 0;
	}

	.page-header {
		padding: 3.84615% 0;
	}

	.comments-area {
		border: 0;
		padding: 7.6923% 0 0;
	}

	.site-footer {
		margin-top: 7.6923%;
		padding: 3.84615% 0;
	}

	.widecolumn {
		margin: 7.6923% 0 0;
		padding: 0;
	}
}