/**
* Perusrakenteet: ylikirjoita tarvittaessa style.css -tiedostossa
*/
body { margin:0; padding:0; }
header .content-wrapper { display:flex; align-items:center; flex-wrap:wrap; justify-content: space-between; }
img { max-width:100%; height:auto; }
#logo { order:1; flex-grow:1; }
#menu_toggle { order:2; display:block; border:none; }
nav#menu-main { order:3; display:none; width:100%; }
nav#mmenu-main ul { display:flex; flex-direction:column; }
.maxwidth { max-width:90%; margin:0 auto; }
footer .col { padding:0 10px; }
p { margin:0 0 0.5em 0; }
article, main, section, header, footer, aside { display:block; }

article ul, article ol { list-style-type: disc; margin-bottom:1em; }
article ol { list-style-type:decimal; }
article ul li, article ol li { margin-left:20px; }

.popupLayer {
  display: block;
  position: fixed;
  width: 100vw;
  height: 100%;
  z-index: 9999999;
}

.popupLayer__body {
  position: absolute;
  bottom: 50%;
  right: 50%;
  transform: translate( 50%, 50% );
  background-color: white;
  border-radius: 1.25em;
  text-align: center;
  padding: 2em 2em;
  max-width: 245px;
  width: 100%;
  box-shadow:
     0 0 0 5px #cc0000,
     0 0 0 10px rgba( 255, 255, 255, 0.3 );
}

.popupLayer__body::before {
  content: ' X ';
  display: block;
  position: absolute;
  right: 1.25em;
  top: 1em;
  font-size: 1.25em;
  font-weight: bolder;
  color: #c00;
  cursor: pointer;
}

.popupLayer__body h2, .popupLayer__body strong {
  color: #cc0000;
}

.popupLayer__body__content a:hover {
  border-bottom: 2px solid #cc0000;
}

.popupLayer--visited{
  display: none;
}

@media all and ( min-width: 992px ) {
  .popupLayer__body {
    padding: 2em 5em;
    width: auto;
    max-width: 510px;
  }
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #cccccc; opacity: 1; /* Firefox */ }
:-ms-input-placeholder { /* Internet Explorer 10-11 */  color: #cccccc; }
::-ms-input-placeholder { /* Microsoft Edge */ color: #cccccc; }

.clearfix:after {
    content: "";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
 }

@media all and ( min-width:1024px    ) {
    .maxwidth { margin:0 auto; }
    .content-wrapper {  display:flex; justify-content: space-between; }
    header .content-wrapper { flex-wrap:nowrap; }
    nav#menu-main { display:block; flex-grow:3; width:auto; }
    nav#menu-main ul { flex-direction:row; justify-content: space-between; }
    #menu_toggle { display:none; }
    article.page { order:1; }
    #sidebar { order:2; flex:0 0 30%; }
    .flex { display:flex; justify-content:space-between; }
    .flex .item  { flex:1 1 0; }

	.alignleft { float:left; margin-right:10px; }
	.alignright { float:right; margin-left:10px; }
	.aligncenter { display:block; margin-left:auto; margin-right:auto; }
}