body {
	margin: 0;
	background-color: #111;
	color: #fff;
	font-family: 'Helvetica', sans-serif; }

.hero-image {
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(17, 17, 17, 1.00)), url("/layout/wall1.jpg");
	background-color: #cccccc;
	height: 70vh;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	border-top: 2px solid #fff; }

.hero-text {
	text-align: center;
	position: absolute;
	top: 80%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-weight: bold;
	color: white; }
	
/*  NAVIGOINTIPALKKI */
/*********************/
.supermenu { display: none; }

nav label { margin: 0px; z-index: 100; }
nav input { display:none; }
nav input:checked ~ label span:last-child { display:none; }
nav input:not(:checked) ~ label span:first-child { display:none; }

/* Hamburger-menu ja sulkurasti */
nav label {
	display: block;
	position: fixed;
	z-index: 200;
	right: 5px;
	top: 10px;
	line-height: 53px;
	user-select: none;
	color: #fff; /* sulkurasti */
	cursor: pointer;
	font-size: 3em; }

nav input:checked ~ .supermenu {
	position: fixed; 
	display: block; 
	background-color: rgba(0, 0, 0, 0.90);
	border-left: 1px solid red;
	top: 0px; 
	right: 0px;
	height: 100vh;
	z-index: 100; }

.supermenu ul {
	list-style-type: none;
	margin: 0;
	margin-top: 55px;
	padding: 0; }

.supermenu ul li a {
	color: #fff;
	text-decoration: none;
	display: block;
	margin-left: 1.5vw;
	margin-right: 2.5vw;
	height: 1.4em;
	line-height: 1.4em;
	letter-spacing: 3px;
	font-size: 1.6em; }
	
.supermenu ul li a:hover { color: #999; }

nav .menucalendar {
	margin-top: 1.2vh;
	margin-left: 1.5vw;
	margin-right: 2.5vw;
	font-size: 1em;
	}

nav .menucalendar p { margin: 2px; padding: 0px; }

/********** MAIN **********/
/**************************/
main .content {
	display: block;
	overflow: hidden;	
	max-width: 1180px;
	margin: auto;
	padding: 0px 10px; 
	margin-top: 0px; 
	background: #171717;
	color: #888888;
	border-radius: 20px; }

main a { color: #ff8888; }
main a:hover { color: #777; }
main #sivun_otsikko { margin: 10px 0px 0px 0px; font-weight: bold; font-size: 2.2em; }
main h2 { margin: 10px 0px 0px 0px; }
main h1 { margin: 10px 0px 0px 0px; color: #fff; border-bottom: 1px solid #cc0000; }
main img { max-width: 100%; }
blockquote { 
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  padding-left: 20px;
  margin-left: 20px;
  border-left: solid 3px #888888;
}

/********* FOOTER *********/
/**************************/
footer { 
	position: absolute; 
	background-image: linear-gradient(#550000, #111); 
	border-top: 1px solid #fff; 
	width: 100vw; 
	margin-top: 20px;
	
	}
#footer {
	display: block;
	margin: auto;
	padding-left: 15px;
	max-width: 1100px; }
	
footer a { text-decoration: none; color: #888; }
footer a:hover { text-decoration: none; color: #fff; }

.copyright { 
	clear: both; 
	background-color: #ddd; 
	color: #000; 
	padding: 5px 0px; 
	text-align: center; 
	font-weight: bold; }

.left {
	float: left;
	max-width: 95%;
	width: 380px; }

.centered {
	float: left;
	max-width: 95%;
	width: 450px; }

.right {
	float: right;
	max-width: 95%;
	background-image: url("/layout/redbull.svg"); 
	background-repeat: no-repeat; 
	background-position: right; 
	background-size: contain;
	width: 250px; 
	height: 250px; }

/*** RUUDUN SOVITUS KUN IKKUNAA KAVENNETAAN TAI MOBIILI ***/
/**********************************************************/
@media screen and (max-width: 1200px) {
	#footer { margin-left: 30px; }
	.left { width: 100vw; }
	.centered { width: 100vw; margin-left: -30px; }
	.right { float: left; }
	}

@media screen and (max-width: 800px) {
	.supermenu { width: 75vw; }
	.supermenu ul li a { font-size: 1.4em; }
	nav .menucalendar { font-size: 0.8em; }
	}
	
@media screen and (max-width: 450px) {
	#footer { font-size: 0.8em; }
	}


:root {
	--ck-sample-color-white: #bbb;
	--ck-sample-color-green: #279863;
	--ck-sample-color-blue: #1a9aef;
	--ck-sample-sidebar-width: 350px;
	--ck-sample-editor-min-height: 400px;
	--ck-sample-editor-z-index: 10;
}

.ck.editor__editable[role='textbox'],
.ck.ck-editor__editable[role='textbox'],
/* Inline & Balloon build. */
.ck.editor[role='textbox'] {
	background: #bbb;
	min-height: var(--ck-sample-editor-min-height);
}

.ck.ck-editor__editable {
	background: #bbb;
	border: 1px solid hsl(0, 0%, 70%);
}

textarea { background: #bbb; }