@charset "UTF-8";
/*

Theme Name: Virtuaalikirja / Ensi- ja turvakotien liitto
Theme URI: http://underscores.me/
Author: Underscores.me // Idearaatali
Author URI: http://underscores.me/
Description: Description
Version: 1.0-wpcom
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: idea
Domain Path: /languages/
Tags:
Template: idea

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

idea is based on Underscores http://underscores.me/, (C) 2012-2014 Automattic, Inc.

Resetting and rebuilding styles have been helped along thanks to the fine work of
Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html
along with Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
and Blueprint http://www.blueprintcss.org/

*/
/*.wrapper {
	max-width: 1200px; 
	width: 100%;
	margin: auto;
	position: relative;
	padding: 0 1.5rem;
	min-height: 100%;
	background-color: #fff;
}*/
.block-container {
  margin: 0 -1.5rem;
}

/* Blockit */
.block-1, .block-2, .block-3, .block-4, .block-5, .block-6, .block-7, .block-8, .block-9, .block-10, .block-11, .block-12 {
  float: left;
  padding: 1.5rem;
  position: relative;
}

.block-show {
  display: block !important;
}

.block-hide {
  display: none !important;
}

.block-12 {
  width: 100%;
}

.block-11 {
  width: 91.666667%;
}

.block-10 {
  width: 83.333333%;
}

.block-9 {
  width: 75%;
}

.block-8 {
  width: 66.666667%;
}

.block-7 {
  width: 58.333333%;
}

.block-6 {
  width: 50%;
}

.block-5 {
  width: 41.666667%;
}

.block-4 {
  width: 33.333333%;
}

.block-3 {
  width: 25%;
}

.block-2 {
  width: 16.666667%;
}

.block-1 {
  width: 8.333333%;
}

/* Suuresta pieneen */
@media (max-width: 1200px) {
  .block-12-xl {
    width: 100%;
  }

  .block-11-xl {
    width: 91.666667%;
  }

  .block-10-xl {
    width: 83.333333%;
  }

  .block-9-xl {
    width: 75%;
  }

  .block-8-xl {
    width: 66.666667%;
  }

  .block-7-xl {
    width: 58.333333%;
  }

  .block-6-xl {
    width: 50%;
  }

  .block-5-xl {
    width: 41.666667%;
  }

  .block-4-xl {
    width: 33.333333%;
  }

  .block-3-xl {
    width: 25%;
  }

  .block-2-xl {
    width: 16.666667%;
  }

  .block-1-xl {
    width: 8.333333%;
  }

  .block-show-xl {
    display: block !important;
  }

  .block-hide-xl {
    display: none !important;
  }
}
@media (max-width: 960px) {
  .block-12-lg {
    width: 100%;
  }

  .block-11-lg {
    width: 91.666667%;
  }

  .block-10-lg {
    width: 83.333333%;
  }

  .block-9-lg {
    width: 75%;
  }

  .block-8-lg {
    width: 66.666667%;
  }

  .block-7-lg {
    width: 58.333333%;
  }

  .block-6-lg {
    width: 50%;
  }

  .block-5-lg {
    width: 41.666667%;
  }

  .block-4-lg {
    width: 33.333333%;
  }

  .block-3-lg {
    width: 25%;
  }

  .block-2-lg {
    width: 16.666667%;
  }

  .block-1-lg {
    width: 8.333333%;
  }

  .block-show-lg {
    display: block !important;
  }

  .block-hide-lg {
    display: none !important;
  }
}
@media (max-width: 768px) {
  .block-12-md {
    width: 100%;
  }

  .block-11-md {
    width: 91.666667%;
  }

  .block-10-md {
    width: 83.333333%;
  }

  .block-9-md {
    width: 75%;
  }

  .block-8-md {
    width: 66.666667%;
  }

  .block-7-md {
    width: 58.333333%;
  }

  .block-6-md {
    width: 50%;
  }

  .block-5-md {
    width: 41.666667%;
  }

  .block-4-md {
    width: 33.333333%;
  }

  .block-3-md {
    width: 25%;
  }

  .block-2-md {
    width: 16.666667%;
  }

  .block-1-md {
    width: 8.333333%;
  }

  .block-show-md {
    display: block !important;
  }

  .block-hide-md {
    display: none !important;
  }
}
@media (max-width: 550px) {
  .block-12-sm {
    width: 100%;
  }

  .block-11-sm {
    width: 91.666667%;
  }

  .block-10-sm {
    width: 83.333333%;
  }

  .block-9-sm {
    width: 75%;
  }

  .block-8-sm {
    width: 66.666667%;
  }

  .block-7-sm {
    width: 58.333333%;
  }

  .block-6-sm {
    width: 50%;
  }

  .block-5-sm {
    width: 41.666667%;
  }

  .block-4-sm {
    width: 33.333333%;
  }

  .block-3-sm {
    width: 25%;
  }

  .block-2-sm {
    width: 16.666667%;
  }

  .block-1-sm {
    width: 8.333333%;
  }

  .block-show-sm {
    display: block !important;
  }

  .block-hide-sm {
    display: none !important;
  }
}
/* Nopadding */
.block-nopadding {
  padding: 0;
}

.block-nopadding-vert {
  padding: 1.5rem 0;
}

.block-nopadding-horz {
  padding: 0 1.5rem;
}

.cf:before,
.cf:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.cf:after {
  clear: both;
}

.floatleft {
  float: left;
}

.floatright {
  float: right;
}

.centertext {
  text-align: center;
}

.textright {
  text-align: right;
}

.table {
  display: table;
  width: 100%;
  height: 100%;
  table-layout: fixed;
  border-collapse: separate;
}

.table-row {
  display: table-row;
}

.table-cell-bot {
  display: table-cell;
  vertical-align: bottom;
}

.table-cell-mid {
  display: table-cell;
  vertical-align: middle;
}

.table-cell-top {
  display: table-cell;
  vertical-align: top;
}

.lohko-absolute {
  width: 100%;
  height: 100%;
  padding: 0%;
  position: absolute;
  top: 0;
  left: 0;
}

.fullwidth {
  width: 100%;
}

.fullheight {
  height: 100%;
}

.idea-hidden {
  display: none;
}

/**/
/* Begin SCSS theming */
@-webkit-viewport {
  width: device-width;
}
@-moz-viewport {
  width: device-width;
}
@-ms-viewport {
  width: device-width;
}
@-o-viewport {
  width: device-width;
}
@viewport {
  width: device-width;
}
.virtkirj-left {
  height: 100%;
  position: fixed;
  -webkit-overflow-scrolling: touch;
  overflow: hidden;
  background-attachment: scroll;
  background-size: cover;
  background-position: center center;
}

.virtkirj-right {
  height: 100%;
  position: relative;
  float: right;
}

@media (max-width: 768px) {
  .virtkirj-left {
    height: 50%;
    position: relative;
    margin-top: 65px;
  }

  .virtkirj-right {
    height: auto;
    margin-bottom: 90px;
  }

  .contain-right {
    padding: 1% 6% 0 6%;
  }

  .mid {
    margin-top: 65px;
    width: 85%;
  }
}
/* 3.0 Navigaatio */
/* 3.1 Takaisin kirjalistaan */
.kirjalista {
  position: fixed;
  -moz-transform: scale(0.5);
  -o-transform: scale(0.5);
  -ms-transform: scale(0.5);
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  top: 0%;
  left: 0%;
  z-index: 10000;
}

/* 3.2 Prev ja next */
.cycle-prev, .cycle-next {
  position: fixed;
  z-index: 10000;
  top: 50%;
  width: 70px;
  height: 70px;
  cursor: pointer;
  margin-top: -35px;
  -moz-transform: scale(0.85);
  -o-transform: scale(0.85);
  -ms-transform: scale(0.85);
  -webkit-transform: scale(0.85);
  transform: scale(0.85);
}

.cycle-prev {
  left: 20px;
  background-position: 0 0;
}

.cycle-next {
  right: 20px;
  background-position: -70px 0;
}

/* 3.3 Site-nav, eli home ja lista -napit */
#site-nav-contain {
  height: 220px;
  left: 20px;
  margin-top: -110px;
  position: fixed;
  top: 50%;
  z-index: 10000;
}

#etusivuSVGnappi, #sisaltoSVGnappi {
  position: absolute;
  width: 70px;
  height: 70px;
  transition: all 1s;
  -moz-transform: scale(0.75);
  -o-transform: scale(0.75);
  -ms-transform: scale(0.75);
  -webkit-transform: scale(0.75);
  transform: scale(0.75);
  left: -10px;
}

#etusivuSVGnappi {
  top: 0px;
}

#sisaltoSVGnappi {
  bottom: 0px;
}

/* 3.4 Sivuston pager-elementti, eli kirjan otsikko, alaotsikko ja missä sivulla mennään */
#pager-contain {
  z-index: 10000;
  top: 30px;
  right: 40px;
  position: fixed;
}

.pager-kirjainfo {
  text-align: right;
}

.pager-kirjainfo h3 {
  font-family: open sans condensed;
  font-weight: 600;
  font-size: 18px;
  color: #000;
}

.pager-kirjainfo h4 {
  font-family: roboto;
  font-size: 14px;
  color: #000;
}

.pager-kirjainfo span.pager-sivu {
  font-family: roboto;
  font-size: 14px;
  color: #000;
}

/* 3.5 Scroll-icon, eli ikoni joka tulee oikeaan alalaitaan, kun sis├ñlt├Â├ñ voi rullata */
#scrollicon {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 999999;
  moz-animation: scrollicon 4s infinite linear;
  -o-animation: scrollicon 4s infinite linear;
  -ms-animation: scrollicon 4s infinite linear;
  -webkit-animation: scrollicon 4s infinite linear;
  animation: scrollicon 4s infinite linear;
  -moz-transform: rotate(90deg) scale(0.75);
  -o-transform: rotate(90deg) scale(0.75);
  -ms-transform: rotate(90deg) scale(0.75);
  -webkit-transform: rotate(90deg) scale(0.75);
  transform: rotate(90deg) scale(0.75);
}

@-webkit-keyframes scrollicon {
  0% {
    bottom: 10px;
  }
  50% {
    bottom: 0px;
  }
  100% {
    bottom: 10px;
  }
}
@-moz-keyframes scrollicon {
  0% {
    bottom: 10px;
  }
  50% {
    bottom: 0px;
  }
  100% {
    bottom: 10px;
  }
}
@-o-keyframes scrollicon {
  0% {
    bottom: 10px;
  }
  50% {
    bottom: 0px;
  }
  100% {
    bottom: 10px;
  }
}
@-ms-keyframes scrollicon {
  0% {
    bottom: 10px;
  }
  50% {
    bottom: 0px;
  }
  100% {
    bottom: 10px;
  }
}
@keyframes scrollicon {
  0% {
    bottom: 10px;
  }
  50% {
    bottom: 0px;
  }
  100% {
    bottom: 10px;
  }
}
@media (max-width: 768px) {
  /* 3.1 Takaisin kirjalistaan */
  .kirjalista {
    position: fixed;
    -moz-transform: scale(0.5);
    -o-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    top: -3px;
    left: 0%;
    z-index: 10000;
  }

  /* 3.2 Prev ja next */
  .cycle-prevnext {
    background-color: #333;
    position: fixed;
    height: 60px;
    width: 100%;
    bottom: 0;
    z-index: 9999;
  }

  .cycle-prev, .cycle-next {
    position: absolute;
    z-index: 10000;
    top: 30px;
    -moz-transform: scale(0.5);
    -o-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }

  .cycle-prev {
    left: 0px;
  }

  .cycle-next {
    right: 0px;
  }

  /* 3.3 Site-nav, eli home ja lista -napit */
  #site-nav-contain {
    height: 60px;
    position: fixed;
    bottom: 0px;
    z-index: 10000;
    width: 140px;
    top: auto;
    margin-top: 0;
    left: 50%;
    margin-left: -70px;
  }

  #etusivuSVGnappi, #sisaltoSVGnappi {
    position: absolute;
    width: 70px;
    height: 70px;
    transition: all 1s;
    -moz-transform: scale(0.5);
    -o-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    left: -10px;
  }

  #etusivuSVGnappi {
    left: 0px;
    top: -5px;
  }

  #sisaltoSVGnappi {
    right: 0px;
    left: auto;
    bottom: auto;
    top: -5px;
  }

  /* 3.4 Sivuston pager-elementti, eli kirjan otsikko, alaotsikko ja missä sivulla mennään */
  #pager-contain {
    z-index: 9999;
    top: 0;
    right: 0;
    position: fixed;
    background-color: #333;
    width: 100%;
    padding: 0.5rem 2.0rem;
    height: 65px;
  }

  .pager-kirjainfo {
    text-align: right;
  }

  .pager-kirjainfo h3 {
    font-family: open sans condensed;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 0;
    color: #fff;
  }

  .pager-kirjainfo h4 {
    font-family: roboto;
    font-size: 12px;
    color: #fff;
    margin-bottom: 0;
  }

  .pager-kirjainfo span.pager-sivu {
    font-family: roboto;
    font-size: 12px;
    color: #fff;
    margin-bottom: 0;
  }

  /* 3.5 Scroll-icon, eli ikoni joka tulee oikeaan alalaitaan, kun sis├ñlt├Â├ñ voi rullata */
  #scrollicon {
    display: none !important;
  }
}
/* Navigaatio END */
/* Suuresta pieneen */
/* Pienestä suureen */