img#hello {
	position:absolute;
	top:0;
	left:0;
}

.clearboth {
	clear:both;
}

h1 {
	word-wrap:break-word;
	hyphens:auto;
}

#header h1 { hyphens: manual;}

#headermenu {
	 float:left;
}


select {
	max-width:100%;
}

input, textarea {
	max-width:100%;
	box-sizing:border-box;
}

/* Google map canvas */
#map_canvas {
	width:300px;
	height:200px;
	border:1px solid #AAAAAA;
	float:right;
	margin-top:40px;
}

.clear { clear: both; }

/*  Show preferred language switcher */
#pref_langs {
	border:2px solid #777;
	background-color:white;
	padding:20px;
	display:block;
	width:200px;
	margin:0 auto;
	position: fixed;
	top:20px;
	left:0;
	right:0;
	box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
	font-size:140%;
}

#pref_langs > a {
	display:inline-block;
	padding:5px;
}


/* Instagram */

#instagram_wrapper {
	display:grid;
	grid-template-columns: 33% 33% 33%;
}

.insta-media {
	border:0px dashed blue;
	box-sizing: border-box;
	padding:7px;
	box-shadow: 3px 3px 5px 2px rgba(0,0,0,0.1);
	margin-right: 10px;
	margin-bottom: 10px;
}

.insta-caption {
	border:0px solid silver;
	border-top: none;
	padding:3px 5px;
	height:38px;
	overflow-y: scroll;
	box-sizing: border-box;
	font-family: sans-serif;
}

#instagram_wrapper img {
    vertical-align: middle;
    padding:0px;
    box-sizing: border-box;
}



/* Cookie consent */
#cookieconsent {
 	border:15px solid #004494;min-height:30px;display:block;width:100%;position: fixed;bottom: 0; box-sizing:border-box;text-align:center;padding:25px;background-color:white;box-shadow: 0px -2px 7px 3px #555;z-index:100000;display:none;
}

#about_cookies_header {
	font-weight:bold;color:#404040;margin-bottom:10px;
}

#about_cookies_text {
	max-width:800px;margin:0px auto;
}

#cookieconsent button {
	background:#004494;color:#ffd617;font-size:12px;letter-spacing:2px;border:none;border-radius:5px; cursor:pointer;width:240px;height:42px;font-family:'Arial';margin-top:20px;
}








/* Contact page */
#contact_form {max-width: 500px;float:left;}
#contactinfo {width: 200px;float:left}

#contact_form p {
	margin-bottom:3px;
}

#contact_form label {
	min-width:110px;
	border:0px dashed magenta;
	display:block;
	float:left;
}

#contact_form textarea {
	max-width:100%;
	width:100%;
}

#contact_form input {
	min-height:50px;
	width:100%;
	box-sizing:border-box;
}

#contact_form label.required:after{
	content:' *';
}

#contact_form #submit_button {
	margin:20px auto 10px auto;
	padding:20px;
	display:block;
}

#contact_form #email {
	display:none;
}



/* Hamburger menu icon */

#hamburger-wrapper {
	padding:10px;
	float:right;
	position:fixed;
	bottom:0px;
	left:50%;
	transform: translateX(-50%);
	z-index:1000;
}

.menu-icon {
	border:4px solid white;
	border:4px solid rgba(255,255,255,0.3);
	width:44px;height:44px;
	/*display:block;*/
	background-color:rgba(220,220,220,0.6);
	border-radius:10px;
	/*display:flex;
	flex-flow: column nowrap;
	justify-content: space-evenly;*/
	cursor: pointer;
	box-shadow:0 0 7px 0 rgba(0,0,0, 0.45);
}

.menu-icon > .line {
    height: 12%;
    display: block;
    width: 80%;
    border-radius: 10px;
    background-color: white;
		background-color:rgba(255,255,255,0.8);
		box-shadow:0 0 2px 0 rgba(0,0,0, 0.2);
		margin:13% auto;
}

.menu-icon > .line + .line {
    /*margin-top: 8px;*/
}


/* Main menu */
ul#mainmenu li.active a {
    background-color: #ccc;
}

#lang_and_currency_wrapper {
	float:right;
}


.menubar {
	 position:relative;
}

.search_products {
	padding-top:3px;
	float:none;
	position:absolute;
	right:0;
	border:0px dashed blue;
	width:19%;
	max-width:160px;
}

.hidden_button {
	 position: absolute; left: -9999px; width: 1px; height: 1px;
}

div.menubar div {
	 width:79%;
}

#twitter {
 	height:405px;
	width:292px;
	overflow-y:hidden;
	float:right;
	clear:right;
	margin-left:15px;
}

.needs_looking_glass {
   width:120px;
}

/* Language selection menu - A basic horizontal language selection menu */
#lang_menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	cursor: pointer;
	position:relative;
}

#restoflangs {
	position:absolute;
	top:26px;
	right:5px;
	z-index:200;
	padding:18px;
	border-radius: 5px 0  5px 5px;
	background-color:white;
	background-color:rgba(255,255,255, 0.98);
	box-shadow: -1px 1px 2px 2px gray;
	display:none;
}

#restoflangs div {
	border:1px solid silver;
	margin-top:5px;
}

#restoflangs a {
	text-decoration:none;
	padding:10px;
	display:block;
}


#lang_menu ul div li {
	border-bottom:1px dashed silver;
}

#lang_menu ul div li:last-of-type {
	border-bottom:none;
}


#lang_menu ul li a {
	display: inline-block;
	margin: 0;
	padding: 8px 8px;
	list-style: none;
	/*border-left: 1px solid black;*/
	text-decoration:none;
}

#lang_menu ul li:first-child a {
	border-left: none;
}

.individual_page {
	overflow:hidden;
}

.odd {
	/*background:white;*/
}

.even {
	background:#F3F3F3;
}

div.no_image {
    background: #eee;
    border: 1px solid silver;
    padding: 5px;
}


/*
 *    Breadcrumbs
 */

ul.breadcrumbs, ul.breadcrumbs a {
	font-size: 12px;
	text-decoration:none;
}

ul.breadcrumbs li {
	display:inline;
}


ul.breadcrumbs li:before {
	content: "\00BB \0020";
	color:red;
}


ul.breadcrumbs li:first-child:before {
	content: " ";
}

/*
 *		footer
 */

div#footercontainer {
	position:relative;
	bottom:0px;
	border:0px dashed green;
	background-color: #555;
}

#custom_footer {
	padding:10px;
	font-size:75%;
	display: flex;
	justify-content: space-between;
	justify-content: space-around;
	flex-flow: row wrap;
	align-items:stretch;
	background-color: #555;

}

#custom_footer, #custom_footer a {
	color:#BBB;
	text-decoration:none;
}

#custom_footer>div{
	box-sizing: border-box;
	border:0px dashed red;
	/*width:150px;*/
	min-width:140px;
	padding:5px 15px;
	border-right:1px solid #666;
	flex:1 0 25%;
}

#custom_footer>div:last-of-type{
	border-right:none;
}


#custom_footer>#logoandcopyright:before {
    content: url("https://www.pageup.fi/image-scaler/scale?url=https://www.yri.fi/sitehandler/get-logo/&mode=fit&x=75&y=50");
		filter: grayscale(100%);
		height:55px;
		border:0px dashed magenta;
		display:inline-block;
}

#page_footer > div {
	 float: right;
	 margin-right:50px;
}


/*
 * 		Messages
 */


ul.messages li {
	border:2px solid #008000;
	background-color:#ddd;
	border-radius:6px;
	padding:20px;
	list-style-type: none;
	display:block;

}

ul.messages li {
    animation: cssAnimation  5s forwards;
}


@keyframes cssAnimation {

	0% {
		opacity:1;
		left:0;
	}

	90% {
		opacity: 1;
        width:auto;
        height:auto;
        padding:20px;
        border:2px solid #008000;
	}

	99% {
		opacity:0;
	}

    100% {
        width:0;
        height:0;
        opacity:0;
        left: -9999px;
        overflow:hidden;
        padding:0;
        border:0px;
    }
}

/* -- Light box image gallery  -- */
div.lightbox-wrapper img {
	border:1px solid silver;
	margin:8px;padding:1px;
	background-color:white;
}


/*  -- News --  */
.news-item-wrapper {
	 margin:15px 3px 3px 3px;
	 overflow:hidden;
	 position:relative;
	 padding:0px;
	 overflow:hidden;
	 border-radius:5px;
	 border:none;
	 box-shadow:0 0 7px 0px #aaa;
	 box-shadow:1px 1px 3px 0px rgba(0,0,0,0.3);
	 display:flex; flex-flow: row wrap;
	 align-content:flex-start;
}


.news-item-wrapper > .img-wrapper {
	flex:1 2 0 ;
}

.news-item-wrapper > .img-wrapper > img {
	width:210px;
	border:0px dashed brown;
	display:block;
}


.news-item-wrapper  .read_more {
	display:block;
	position:absolute;
	bottom:0;
	right:0;
	text-decoration:none;
	padding:10px;
}

.news-item-wrapper a {
	text-decoration:none;
}



#content div.news-item-wrapper h3 {
	 margin-top:0;
}

.metadata_wrapper {
	 float:right;
}

.news_metadata  {
	float:right;
	font-size:70%;
	font-style:italic;
	color:gray;
	clear:right;
}

img.news_metadata.author  {
	border:1px solid #bbb;
	display:inline-block;
	max-width:2em;
	float:right;
	/* box-shadow:0px 0px 2px 2px silver; */
	margin:2px 0;
}


.news_item {
	 border:1px solid silver;
	 padding:0.5em 0.8em;
	 border-radius:1em;
	 margin-top:10px;

}



/*
 * 	Sign up
 */


/*  --  Registration and sign up  --  */

#register_as_individual {
  float:left;
  margin-top:20px;
  margin-right:30px;
  border:2px solid gray;
  padding:11px;
  background-color:#FaFFFF;
  box-shadow:2px 2px 2px #888;
  max-width:100%;
  box-sizing:border-box;

}

#register_as_business {
	float:left;
	margin:20px 0px 0 0px;
	border:2px solid gray;
	padding:11px;
	background-color:#FFFFFa;
	box-shadow:2px 2px 2px #888;
	max-width:100%;
	box-sizing:border-box;
}

div.register ul {
	padding:0px;
}

div.register li {
	display:block;
	padding:4px 2px;
}


.register .helptext {
	color:#777;
	font-size:80%;
	display:block;
	clear:both;
}

.register label {
   display:block;
}

label.required {
	font-weight:bold;
	width:100%;
	display:block;
}

label.required:after {
	content:'*';
}



.register .helptext {
	color:#777;
	font-size:80%;
}

div.register input {
	display:block;
	width:100%;
}

div.register input[type=checkbox] {
	display:inline-block;
	float:none;
	width:auto;
}

ul.errorlist {
	padding:0px;
	margin:0px;
	border:0px solid brown;
	font-size:80%;
	font-style:oblique;
	display:block;
	list-style:none;
}

ul.errorlist + label {
	/* border:3px dashed red; */
}

ul.errorlist + label + input {
	/*border:1px solid red; */
	box-shadow: 0px 0px 5px 1px red;
}

ul.errorlist li {
	padding:0px;
	padding-top:20px;
}


.register input[type=submit] {
	clear:both;
	height:30px;
}

.register textarea {
	width: 100%;
}

.register li:after {
	content:"";
	display:table;
	clear:both;
}


.register p {
	margin:10px 0px;
}

/*  -- login  --  */
.login ul {
	list-style:none;
	padding:0px;
}

.login input[type=submit] {
	margin-top:10px;
	height:30px;
}

#login_page_hyperlink {
	 float:right;
	 margin-left:30px;
	 color:#667;
}

#show_cart_link {
	 float:right;
}

#cart_content {
	 position:fixed;
	 top:10px;
	 right:10px;
	 border:0px dashed blue;
	 overflow-y:auto;
	 padding:5px;
	 padding-right:10px;
	 max-height:25%;
}

#added_to_cart_message {
	position:fixed;
	top:10px;right:10px;
	border:2px solid yellow;
	background-color:magenta;
	color:white;padding:10px;
	display:none;
}

#quotation_rows {
	float:right;
}

#facebook_box {
	float:right;clear:right;margin-left:15px;margin-top:15px;
}

#facebook_box > iframe {
	border:none;
	overflow:hidden;
	width:292px;
	height:220px;
}

#show_trial_period {
	width:98%; height:98%;background-color: white;color:black;text-align:center;
					position:absolute;top:1%;left:1%;font-size:18px;font-weight:bold;
					opacity:.8;
}

#show_trial_period_message {
	width:100%; height:20%;background-color: white;color:black;text-align:center;
	position:absolute;top:40%;left:0%;font-size:18px;font-weight:bold;
	padding-top:40px;
}

/*  -- Roll info  -- */

.roll_element {
    border:1px solid silver;
    border-radius:5px;
    background-color:white;
    padding:5px;
    margin-bottom:20px;
}

.roll_element div {
	border:0px dashed green;
	display:inline-block;
	vertical-align:top;
}

.roll_element .started {
	width:50px;
}

.roll_element .name {
	width:220px;
}

.roll_element .nickname {
	font-weight:bold;
	font-style:italic;
}

.roll_element .about_me {
	font-family: "Comic Sans MS", "Marker Felt", cursive,sans-serif;
	font-size:115%;
	width:250px;
}


/*	--  OP Checkout  --  */
.C1 {
	width: 180px;
	height: 120px;
	border: 1pt solid #a0a0a0;
	display: block;
	float: left;
	margin: 7px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	clear: none;
	padding: 0;
}

.C1:hover {
	background-color: #f0f0f0;
	border-color: black;
}

.C1 form {
	width: 180px;
	height: 120px;
}

.C1 form span {
	display: table-cell;
	vertical-align: middle;
	height: 92px;
	width: 180px;
}

.C1 form span input {
	margin-left: auto;
	margin-right: auto;
	display: block;
	border: 1pt solid #f2f2f2;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	padding: 5px;
	background-color: white;
}

.C1:hover form span input {
	border: 1pt solid black;
}

.C1 div {
	text-align: center;
	font-family: arial;
	font-size: 8pt;
}

/*	Logged in clients  */

#my_account_menu_wrapper {
	 position:relative;
	 margin-left:10px;
}


.my_account_menu_item {
	border:1px solid #777;
	border-bottom:none;
	padding:5px;
	padding-right:10px;
	border-radius:5px 5px 0px 0px;
	box-shadow:0px -2px 2px 0px rgba(0,0,0, 0.15);
	margin-left:-10px;
	background-color:white;
}

.my_account_menu_item:hover {
	padding-bottom:10px;
	position:relative;
	bottom:5px;
	left:0;
	box-shadow:0px -3px 4px 2px rgba(0,0,0, 0.15);
}


#my_account table {
	max-width:100%;
}

#my_account table,
#my_account table td,
#my_account table th {
	border-collapse: collapse;
	border:1px solid #777;
	padding:1px 4px;
	background-color:white;
}





/* Testimonials */

#cycler{position:relative;margin:50px auto;margin-bottom:10px;}
#cycler div{position:absolute;z-index:1;background-color:white;height:240px;margin:30px;width:540px;}
#cycler div.active{z-index:3}
#cycler img{display:block}
#cycler div img {float:right;margin-left:20px;}


#testimonials_wrapper {
	height:280px;
}


#testimonials_wrapper button {
	position:absolute;
	bottom:10px;
	left:15px;
}


#testimonial_cycler{
	position:relative;
	margin:0px auto;
}


#testimonial_cycler>div {
   position:absolute;
   z-index:1;
   background-color:white;
   height:200px;
   width:260px;
   /*border:2px dashed blue;*/
   left:10px;
   overflow-y:auto;
}

#testimonial_cycler div.active{z-index:3}

#testimonial_cycler img{
  display:block;
  width:60px;
  float:right;
  margin-left:10px;
}



@media only screen and (min-width:768px){
#testimonial_list_wrapper {

  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;

  -moz-column-gap: 20px;
  -webkit-column-gap: 20px;
  column-gap: 20px;
}
}


#testimonial_list_item_wrapper {
   /* margin:5px 10px 5px 0; */
   border:2px solid silver;
   background-color:white;
   width:100%;
   box-sizing: border-box;
   margin-bottom:20px;
   padding:20px;
   /* display:block; */
   /*min-height:180px; */
   /*float:left; */
   overflow:auto;
   border-radius:8px;

   display: inline-block;

}

.testimonial_date{
 	color:#999;
 	font-size:85%;
 	padding-bottom:10px;
 	border:0px dashed red;
 	display:inline-block;
}

.testimonial_opinion {
	border:0px dashed green;
	/*hyphens:auto;*/
}

.testimonial_stars {
	color:yellow;
	letter-spacing: 2px;
	text-shadow:0px 1px black, 0px -1px black, -1px 0px black, 1px 0px black;
	padding:5px 0;
}

#testimonial_list_item_wrapper p { margin:0px; }


#testimonial_list_item_wrapper img {
	margin-left:10px;
	margin-bottom:10px;
	padding:0px !important;
	border:3px solid #fff;
	box-shadow:2px 2px 2px silver;
	width:90px;
}





@media only screen and (min-width:1024px){
#contact_form {
	margin-top:50px;
}

}



@media screen and (max-width:767px) {
#register_as_individual {
	max-width:100%;
}

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




@media only screen and (max-width:360px){


#page_content {
    margin: 20px 0px 0;
}

}


@media only screen and (max-width:414px) {

	body {
		background-image: none;
	}

	#lang_menu {
		visibility:hidden;
	}

	#country_and_currency_wrapper {
		visibility:hidden;
	}

	#mainmenu, #menucontainer {
		display:none;
	}
}



@media only screen and (min-width:415px) {

	body {
		background-image: none;
	}

#hamburger-wrapper {
	display:none;
}

}