/*
Theme Name: Printflow s.r.o. - DSL style
Version: 0.4
Author: Printflow s.r.o
Author URI: http://printflow.eu/

by Oto BREZINA
mobile first rebuild
*/

@import url("https://fonts.googleapis.com/css?family=Karla:400,400italic,700,700italic");
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap')
@import url("https://printflow.eu/files/themes/printflow/font.css");


* {
	transition: all .2s ease;
	box-sizing: border-box;
	margin: 0;
	padding: 0;

}

body {
	background-color: #ddd;
	-margin: 0;
	color: black;
	overflow-x: hidden;
}



.bold {
	font-weight: bold;
}

div.link {
	position: relative;
}

div.link a span.link {
	position:absolute;
	width:100%;
	height:230px;
	top:0;
	left:0;
	z-index: +1;
	background-color: transparent;
	background-image:url('images/empty.png'); 
}

/* COMMON */
a, img {
	border: 0;
}

a {
/*	display: block;*/
	font-family: Arial,Tahoma;
	font-size: 15px;
	font-style: italic;
	font-weight: normal;
	color: black;
	padding: 0;
	margin: 0;
	text-decoration: none;
}

a:hover {
	color: white;
}

.highlight {
	color: white;
}
.strong {
	font-weight: 900;
}

/*.active {
	opacity: 1;
} */

.nactive {
	display: none;
}


/* LINKS */
a.link {
	background: url(images/link_icon_16) center left no-repeat;
	display: inline-block;
	line-height: 16px;
	padding-left: 0;
}
a.pdf {
	background: url(images/pdf_icon_16) center left no-repeat;
	display: inline-block;
	line-height: 16px;
	padding-left: 10px;
}
a.wordpress {
	background: url(images/wordpress.png) center left no-repeat;
}
a.drupa {
	background: url(images/drupa.png) center left no-repeat;
	display: inline-block;
	line-height: 16px;
	padding-left: 25px;
}
a.ipex {
	background: url(images/ipex.png) center left no-repeat;
	display: inline-block;
	line-height: 16px;
	padding-left: 25px;
}
a.feed {
	background: url(images/rss.png) center left no-repeat;
	display: inline-block;
	line-height: 16px;
	padding-left: 0;
}
a.printflow {
	background: url(images/printflow.png) center left no-repeat;
	display: inline-block;
	line-height: 16px;
	padding-left: 0;
}


.pointer {
	cursor: pointer;
}

pre {
	background-color: #eeeeee;
	padding: 20px;
	border: 3px solid #444444;
}

.small { font-size:x-small }

.dips, .dc {
	font-family: stop;
}
span.printflow, .inkflow, .inkdot, .thinkcut .inkcut {
	font-family: 'Lato', 'Banff', Arial;
	font-weight: 700;
	font-style: italic;
	font-size: 1.1em;

	background: url(images/printflow.png) center left no-repeat;
	-display: inline-block;
	-line-height: 16px;
	padding-left: 16px;
}
.printflow, .inkflow {
	text-transform: capitalize;
}
.inkdot,  .thinkcut .inkcut, .thinkcut .th {
	text-transform: lowercase;
	font-size: 1.25em;
}
.thinkcut .th {
	text-transform: lowercase;
	font-style: normal;
	font-size: .9em;
	font-weight: bold;
}



/* BODY */
body {
	-border-left: 2px solid red;
	background-image: url(images/bg_right.png);
	display: flex;
	flex-flow: column nowrap;
	-padding: 0;
	font-family: Verdana,Tahoma,Arial;
	background-position: left top;
	background-repeat: repeat-x;
	width: 100%;
}

.wrapper {
	width: 100%;
}


body > .wrapper {
	height: 100vh; /* 100% should work, but does not */
	display: flex;
	flex-flow: column nowrap;
	min-height: 100%;
}

#topleftbg {
	display: none;
}


div.link {
	position: relative;
}

div.link a span.link {
	position: absolute;
	width: 100%;
	height: 230px;
	top: 0;
	left: 0;
	z-index: +1;
	background-color: transparent;
	background-image: url('images/empty.png'); 
}

/* HEADER */
header {
	background-image: url(images/head-min.png);
	background-repeat: no-repeat;
	width: 100%;
	position: relative;
	min-height: 
}
#logo {
	-display: block;
	-float: left;
	padding: 5px 5px 0;
	-margin: auto;
}
#slogan {
	color: #8b8b8b;
	-display: block;
	-float: left;
	font-family: Arial, Tahoma;
	font-size: 12px;
	font-style: italic;
	font-weight: normal;
	padding: 5px;
	text-decoration: none;
	-width: 1000px;
	width: auto;
}
#mainmenu {
	-position: absolute;
	-display: block;
	-height: 33px;
	-margin-left: 343px;
	-margin-top: 0px;
	-padding: 0;
	margin-top: 10px;
	order: 1;
}
#mainmenu ul {
	display: flex;
	flex-flow: row nowrap;
	height: 100%;
	margin: 0;
	padding: 0;
	width: auto;
}
/* using image & lot of move
#mainmenu li {
	display: block;
	flex-grow: 1;
	-margin: 0 0 0 -4px;
	-padding: 0 0 0 4px;
	pointer-events: none;
	text-align: center;
}
#mainmenu li + li {
	background-image: url("images/topbr.gif");
	background-position: -12px;
	background-repeat: no-repeat;
	padding-left: 4px;
}
#mainmenu a {
	-border: 1px solid blue;
	color: #707173;
	display: block;
	font-family: Arial,Tahoma;
	font-size: 15px;
	font-style: italic;
	font-weight: normal;
	padding: 5px 0;
	margin: 0 0 0 2px;
	text-decoration: none;
	pointer-events: auto;
	width: 100%;
}*/
#mainmenu li {
	-border: 1px solid red;
	display: block;
	flex-grow: 1;
	text-align: center;
	text-transform: capitalize;
}
#mainmenu li + li {
	border-left-style: solid;
	border-left-width: 2px;
	border-image: linear-gradient(to right, #fff, #bbb) 1 100%;
}
#mainmenu a {
	color: #707173;
	display: block;
	font-family: Arial,Tahoma;
	font-size: 15px;
	font-style: italic;
	font-weight: normal;
	padding: 4px 0;
	margin: 0;
	text-decoration: none;
	width: 100%;
}
#mainmenu a:hover {
	color: white;
	text-decoration: none;
	background: #8ac;
}
/* TODO: change background image instead */
#nosearch {
	display: none;
}

#curpos {
	/* TODO: change font to h1 ? */
	display: none;
	-color: #707172;
	-display: block;
	-font-family: Arial,Tahoma;
	-font-size: 12px;
	-font-style: normal;
	-font-weight: normal;
	-margin-left: 352px;
	-margin-top: 57px;
	-position: absolute;
	-order: 1;
}

#google_translate_element {
	margin-top: 12px;
	min-height: 30px;
	-text-align: right;
}
#google_translate_element > * {
	display: block;
	padding: 0 5px;
}


/* CONTENT */
#page {
	-border: 1px solid red;
	flex: 1;
	-display: flex;
}
#page div {
	-border: 1px dotted green;
}

.menutitle {
	margin: 0;
	padding: 0;
	padding-bottom: 5px;
}
.menutitle, .menutitle a {
	color: #345;
	font-size: 20px;
	font-weight: bold;
	font-style: italic;
	margin: 0;
	padding-bottom: 5px;
	border: 0;
}
.menutitle a:hover {
	color: #fff;
}

#content {
	padding: 0 5px;
}

/* SIDE MENU, TOP MENU */
#sidemenu,
#topmenu {
	padding: 10px 5px;
}


#sidemenu li a,
#sidemenu li p,
#topmenu li a,
#topmenu li p {
	border-bottom: 1px solid #8ac;
	border-left: 10px solid transparent; /* body back */
	border-right: 10px solid transparent;
	border-top: 1px solid #8ac;
	color: #333;
	display: block;
	font-size: 15px;
	font-style: italic;
	margin: -1px -30px;
	padding: 5px 0 5px 25px;
	text-decoration: none;
}

#topmenu * {
	text-transform: lowercase;
}
#sidemenu *:first-letter {
	text-transform: uppercase;
}

#sidemenu li a:hover,
#sidemenu li p:hover,
#topmenu li a:hover,
#topmenu li p:hover {
	color: inherit;
}


#sidemenu li li,
#topmenu li li {
	margin-left: 20px;
	padding-left: 60px;
}

#sidemenu li li a,
#sidemenu li li p,
#topmenu li li a,
#topmenu li li p {
	margin-left: -110px;
	padding-left: 50px;
}

#sidemenu li li.selected a,
#sidemenu li.selected p,
#topmenu li.selected p {
	background-co2lor: #999;
	color: white;
	font-weight: bold;
	border-right: 10px solid #8ac;
}


#sidemenu li a:hover,
#topmenu li a:hover {
	background-color: #ccc;
	border-left: 10px solid #abc;
	border-right: 10px solid #abc;
	color: white;
}

#sidemenu li li a:hover {
	border-left: 10px solid #bcd;
	border-right: 10px solid #bcd;
}

#sidemenu a,
#sidemenu ul p,
#topmenu a,
#topmenu ul p {
	padding-left: 25px;
}

#sidemenu li li a,
#sidemenu li li p {
	padding-left: 40px;
}

#sidemenu ul,
#topmenu ul {
	list-style: disc outside;
	margin: 0 30px;
	padding: 0;
}
#sidemenu ul ul {
	list-style: circle outside url("images/printflow.png");
	margin: 0 0px;
}

#topmenu ul.dot {
	display: none;
}



/* newoverview */
.news {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	-border: 10px solid green;
	-width: auto !important;
	margin-top: 5px;
}
.news > div {
	-flex: 0 0 25%;
	-flex-grow: 1;
}
.newspreview {
	background-color: #aaa;
	border: 3px solid transparent;

	width: 240px;
	height: 250px;
	color: black;
	margin: 3px;
	-padding: 0;
}
/* link is effectively wrpper, not needed really */
.newspreview > .link {
	width: 100%;
	height: 100%;
	position: relative;
	display: flex;
	flex-flow: column nowrap;
}

.newspreview:hover {
	background-color: #468;
	border-color: #8ac;
	color: white;
}

.newspreview .link a {
	display: block;
	position: absolute;
	-border: 1px red solid;
	-background-color: blue;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.newspreview .img, .newspreview .img img{
	display: block;
	width: 100%;
	overflow: hidden;
}
/* TODO: set transformation origin from mouse by JS */
.newspreview:hover .img img{
	transition: all 2s ease;
	transform: scale(1.5);
}
.newspreview .text {
	border: 1px solid #cca;
	flex-grow: 1;
	float: left;
	font-size: 14px;
	padding: 0 2px;
	-position: relative;
	margin-top: 4px;
	width: 100%;
}
.newspreview:hover .text {
	border: 1px solid #8bd;
}
.newspreview .date {
	bottom: 0;
	color: black;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	position: absolute;
	right: 3px;
}


/* mobile got only 6 news */
@media (max-width:495px) {
#recent-posts .newspreview.order4,
#recent-posts .newspreview.order5
{
	display: none;
}
}

@media (max-width:985px) {
#recent-posts .newspreview.order6,
#recent-posts .newspreview.order7
{
	display: none;
}
}

#page.home {
	display: flex;
	flex-flow: column nowrap;
}

/* slides */
.slides {
	background-color: #0f6587;
	margin: 9px auto;
	overflow: hidden;
	position: relative;
}

.slides > .transform {
	transform-origin: top left;
	width: 1000px;
	height: 465px;
}

.slides a {
	color: inherit;
	font-weight: 900;
	font-size: inherit;
}

@media (max-width:1000px){ .slides{width:950px;height:442px}.slides>.transform{transform:scale(.95);}}
@media (max-width:950px) { .slides{width:900px;height:418px}.slides>.transform{transform:scale(.90);}}
@media (max-width:900px) { .slides{width:850px;height:395px}.slides>.transform{transform:scale(.85);}}
@media (max-width:850px) { .slides{width:800px;height:372px}.slides>.transform{transform:scale(.80);}}
@media (max-width:800px) { .slides{width:750px;height:349px}.slides>.transform{transform:scale(.75);}}
@media (max-width:750px) { .slides{width:700px;height:325px}.slides>.transform{transform:scale(.70);}}
@media (max-width:700px) { .slides{width:650px;height:302px}.slides>.transform{transform:scale(.65);}}
@media (max-width:650px) { .slides{width:600px;height:279px}.slides>.transform{transform:scale(.60);}}
@media (max-width:600px) { .slides{width:550px;height:255px}.slides>.transform{transform:scale(.55);}}
@media (max-width:550px) { .slides{width:500px;height:232px}.slides>.transform{transform:scale(.50);}}
@media (max-width:500px) { .slides{width:450px;height:209px}.slides>.transform{transform:scale(.45);}}
@media (max-width:450px) { .slides{width:400px;height:186px}.slides>.transform{transform:scale(.40);}}
@media (max-width:400px) { .slides{width:350px;height:162px}.slides>.transform{transform:scale(.35);}}
@media (max-width:350px) { .slides{width:300px;height:139px}.slides>.transform{transform:scale(.30);}}

.slide {
	transition-property: none;
	position: absolute;
	-background-color: black;
	-border-radius: 0;
	left: 0;
	top: 0;
	width: 1000px;
	height: 399px;
}

.slide .toptext {
	position: absolute;
	font-family: "Karla",Arial,Tahoma;
}

.slide .toptext .title {
	position: absolute;
	font-size: 24px;
	font-weight: bold;
	margin: 0;
	padding: 0 10px;
	min-hei4ght: 50px;
}

.slide .toptext h1 {
	text-align: center;
	vertical-align: middle;
	background-co4lor: green;
	border-color: black;
	border-bottom: 1.5px solid black;
	margin: 20px;
	padding: 0;
	font-size: 23px;
	font-weight: bold;
	min-hei4ght: 50px;
}

.slide .toptext .left {
/*	width: 140px;
	border-radius: 0 20px 20px 0;*/
}

.slide .toptext p{
	padding: 0 10px;
	text-indent: 50px;
}

/* slide 1 Modernize your press */
#slide1 .toptext {
/*	margin: 38px 150px 500px 100px;
	width: 420px;*/
}

/* slide 2 Universal application */
#slide2 .toptext {
	margin: 103px 0 0 16px;
	width: 963px;
}

/* slide 3 Universal application */
#slide3 .toptext {
	margin: 95px 0 0 16px;
	width: 963px;
}

/* slide 4 Universal application */
#slide4 .toptext {
	margin: 15px 0 0 70px;
	width: 465px;
}

/* slide 5 World wide */
#slide5 .toptext {
	margin: 47px 0 0 637px;
	width: 335px;
}

/* slide 6 Savings */
#slide6 .toptext {
	margin: 88px 0 0 341px;
	width: 569px;
}

.slide .toptext .text {
	float: left;
	font-size: 18px;
	font-weight: normal;
	padding: 55px 0 10px 0;
	margin-left: 20px;
	margin-right: 20px;
}

.nactive {
	display: none;
}

.slide img {
	height: 400px;
	width: 1000px;
}

.slide .topttext {
	position: absolute;
}

#slidesmenu {
	float: right;
	margin: 390px 15px 0;
	padding: 0;
}

#slidesmenu img, #slidesmenu li {
	width: 100px;
	height: 50px;
	margin: 0;
	padding: 0;
}

#slidesmenu li {
	float: left;
	box-shadow: 1px 1px 3px 3px #123;
	margin: 15px 5px;
	border: 0px solid black;
	padding: 0;
}

#slidesmenu li:hover {
	box-shadow: 1px 1px 3px 3px #ace;
}

#slidesmenu ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}




#content h1,
#content h2,
#content h3 {
	font-face: arial;
	color: #345;
	font-weight: bold;
	marin: 0;
	padding: 0;
	margin-left: 2em;
	margin-top: .5em;
}
#content div.entry > h2:first-child,
#content div.entry > a:first-child > h3 {
	margin-top: 0;
}
#content h1 {
	font-size: 2em;;
}
#content h2 {
	font-size: 1.75em;
}
#content h3 {
	font-size: 1.5em;
}
#content p {
	margin-bottom: .5em;
}

/* post */
.post {
	margin: 0;
	padding: 0;
	padding-top: 10px;
}

.post .entry {
	margin: 0;
	-margin-top: -10px;
	padding: 0;
}
.post h2.title {
	font-face: arial;
	font-size: 19px;
	color: #345;
}
.post span.date {
	float: right;
	border-bottom: 1px solid #89a;
	padding: 0 5px;
	margin: 0;
	margin-top: -50px;
	font-size: 12px;
}
.posta img {
	float: left;
	width: 400px;
	height: 300px;
	margin: 5px;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
}
.post p {
	margin: 5px;
	-text-indent: 25px;
}
.post ul {
	padding-left: 3em;
}
.post li {
	margin: .2em 0;
}

#posts #prevpost, #posts #nextpost {
	margin: 5px;
	margin-top: 25px;
	padding: 0;
	width:49%
}

#posts #prevpost {
	float: left;
	text-align: left;
}

#posts #nextpost {
	float: right;
	text-align: right;
}

#posts #nextpost .title, #posts #prevpost .title {
	font-size: 12px;
}

#posts div.mainimg {
	text-align: center;
	width: 1024px;
	margin: 0px -12px;
	padding: 0;
}

#posts div.mainimg a img {
	border: 1px solid black;
	margin: 0;
	padding: 0;
}

#posts div.mainimg a img:hover {
	border: 1px solid white;
	box-shadow: 1px 1px 3px 3px white;
}

.post img {
	background-color: transparent;
	border: 1px solid transparent;
}

.post img a:hover {
	text-align: center;
	background-color: white;
	border: 1px solid white;
	box-shadow: 1px 1px 3px 3px white;
}
/**/



/* FOOTER */
footer {
	margin: 0;
	margin-top: 20px;
	padding: 5px;
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	border-top: 2px #8ac solid;
}

footer > div {
	flex-grow: 1;
}

footer p {
	margin: 0;
	padding: 0;
}

footer > div, footer > div a {
	color: #333;
	font-family: Arial,Tahoma,Verdana;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	line-height: 1.2em;
	padding: 0;
	width: auto;
	min-width: 35%;
	line-height: 1.2em;
}

footer div.contact + div.contact {
	order: 3;
}
footer div.support {
	order: 2;
}
footer div.support div {
	margin-left: auto;
}
footer div.design {
	text-align: right;
	order: 4;
}

footer .design a {
	color: #000;
	display: inline-block;
	line-height: 16px;
	padding-left: 20px;
	text-decoration: none;
}

#footer a:hover {
	color: #fff;
}


footer div#m {
	--border: 1px solid green;
	--display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto;
	grid-template-areas: "s p e";
	column-gap: 0;
}
footer div#m div {
	padding: 0;
	--border-left: solid 1px red;
}
footer #s {
	grid-area: s;
}
footer #p:before {
	content: "@";
}
footer #p {
	grid-area: p;
}
footer #e:before {
	content: ".";
}
footer #e {
	grid-area: e;
}


/* other */
/* milestones */
div.imgentry {
	border: 1px solid #ccc;
	margin: 5px 0;
	overflow: hidden;
	padding: 5px;
}

div.imgentry div.img {
	float: right;
	margin: 0;
	width: 100px;
	-width: 120px;
}

div.imgentry div.img a {
	display: block;
	margin: 0;
	padding: 0;
}

div.imgentry img {
	float: left;
	height: 100px;
	margin: 0;
	padding: 0;
	-width: 140px;
	-border-left: 20px solid white;
	-border-right: 20px solid white;
}


div.imgentry div.text {
	border: 1px solid red;
	float: left;
	width: 575px;
}

div.imgentry h2 {
	font-size: 20px;
	margin: 0;
}


.googlemaps, #post-41.post > div.entry > div.floatright {
	-border: 5px solid blue;
	width: 100%;
	height: 200px;
	padding-top: 70.7%;
	max-height: 400px;
	position: relative;
}
#post-41.post iframe {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
}




/* TABLET MODE */

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

/* HEADER */
header {
	background-image: url(images/head.png);
	height: 111px;
	min-height: 111px;
}
#mainmenu {
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	height: 33px;
	margin: 0;
	z-index: 2;
	width: calc(100% - 348px);
}
/* search */
#nosearch {
	display: block;
	background-image: url(images/head.png);
	background-position: -985px 0;
	background-repeat: none;
	position: absolute;
	right: 0;
	top: 0;
	width: 15px;
	height: 100%;
}
#curpos {
	color: #707172;
	display: block;
	font-family: Arial,Tahoma;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	right: 0;
	top: 57px;
	position: absolute;
	width: calc(100% - 348px);
}

#google_translate_element {
	position: absolute;
	right: 0;
	top: 71px;
	margin: 0;
}
#google_translate_element > div {
	padding: 4px 0;
}
#google_translate_element select{
	display: block;
	float: right;
	margin: 0 4px;
	width: 120px;
}



/* CONTENT */
#page {
	display: flex;
	flex-flow: row nowrap;
	-float: left;
}
#page.download {
	display: block;
	-flex-flow: column nowrap;
}
#page.download .FileBlock {
	width: 200px;
	float: left;
}
#page.download .FileBlock img {
	float: left;
}
#page.download .FileBlock .sums {
	clear: both;
}
#page.download .clear {
	clear: both;
	margin: 10px;
	height: 15px;
}

#page #content {
	flex-grow: 1;
}

/* SIDE MENU */
#sidemenu {
	border-right: 3px solid #789;
	-font-family: Arial,Tahoma;
	-font-style: italic;
	-float: left;
	width: 245px;;
	-min-width: 200px;
	-margin: 0px -5px 10px 0px;
	-padding: 15px;
	flex: 0 0 25%;
}

/* FOOTER */

footer {
	-float: left;
	-margin: 0px 0;
	-margin-bottom: 40px;
	-padding: 0;
	flex-wrap: nowrap;
	margin-top: 20px !important;
}
footer > div {
	order: 0 !important;
	flex: 1 1 25%;
	min-width: 100px;
}
footer > div.support > div {
	margin: 0 auto;
}

}


/* WIDE MODE */

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

/* BODY */
body > .wrapper {
	max-width: 1000px;
	margin: 0 auto;
}

#topleftbg {
	display: block;
	background-image: url(images/bg_left.png);
	background-position: left top;
	background-repeat: repeat-x;
	position: absolute;
	height: 97px;
	left: 0;
	top: 0;
	width: 50%;
	z-index: -1;
}

#nosearch {
	display: none;
}

.slides {
	height: 465px;
	width: 1000px;
}

.slides > .slide,
.slides > .slidesmenu {
	transform: none;
}


}


#wol ul {
	list-style: circle inside;
	padding: 1em;
}