.jof .ui-slider {margin-bottom: 0.6em;}
.jof .ui-slider a {outline: 0;} /* fix for box-shadow glitch in safari */
.jof .staticPrice {
	color: #a00;
}


.option li {
	list-style-type: none;
}

textarea {
	-webkit-resize: vertical;
	resize: vertical;
}

.o-radio label,
.o-checkbox label,
.o-radio input,
.o-checkbox input {
	float: left;
	margin-right: 5px;
	margin-left: 1px;
}

.o-radio ul,
.o-checkbox ul {
	overflow: hidden;
	margin-left: 0px;
}

.o-radio li,
.o-checkbox li {
	/* [disabled]margin-left: 0px; */
	overflow: hidden;
}

.o-radio.float li,
.o-checkbox.float li {
	float: left;
}

.email {
    display: none;
}
/* update 2020 */
* { box-sizing: border-box; font-family: 'Montserrat', sans-serif; line-height: 1.4em; }
body { background: #f9f9f9; font-size: 16px; }

body::before {
    content: "";
    display: block;
    position: fixed;
    width: 300%;
    height: 100%;
    top: 50%;
    left: 50%;
    border-radius: 100%;
    transform: translateX(-50%) skewY(-8deg);
    background-color: #f26322;
    z-index: -1;
    animation: wave 8s ease-in-out infinite alternate;
 }
 @keyframes wave {
    0% {
      transform: translateX(-50%) skew(0deg, -8deg);
    }

    100% {
      transform: translateX(-30%) skew(8deg, -4deg);
	}
}
.clear { clear: both; }
a { color: #e35615; }

.sidebar .total { position: fixed; padding: 0 15px; top: 15px; right: 15px; z-index: 3; text-align: center; color:#000;  }
.sidebar .total h3 { margin: 7px 0 0 0; font-weight: 300; font-size: 32px; }
.sidebar .total h3 span { font-weight: bold; }
.sidebar .total p { margin:0 0 7px 0; font-size: 14px; }
.sidebar .total p strong { font-weight: 300; }

.section { max-width: 850px; padding: 20px;  margin: 0 auto;  position: relative; overflow: visible; }
.section .title { margin-bottom: -30px; padding: 20px; }
.section .title h2 { font-size: 60px; margin:0; line-height: 1em; font-weight: bold; }
.sektion {
  background-color: #fff;
  box-sizing: border-box;
  
  box-shadow: 0 3.2px 2.2px rgba(0, 0, 0, 0.02),
    0 7px 5.4px rgba(0, 0, 0, 0.028), 0 12.1px 10.1px rgba(0, 0, 0, 0.035),
    0 19.8px 18.1px rgba(0, 0, 0, 0.042), 0 34.7px 33.8px rgba(0, 0, 0, 0.05),
    0 81px 81px rgba(0, 0, 0, 0.07);
  border-radius: 30px;
  padding: 28px;
  position: relative;

  margin-bottom: 40px;
  z-index:1;
  overflow: hidden; }
/*
.sektion:before {
    content: "";
    display: block;
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 100%;
    background-color: #f26322;
    top: -220px;
    left: -220px;;
    z-index: 0;
} */
.sektion .item { padding: 15px 0; border-bottom: 1px solid #ebebeb; }
.sektion .item label { font-weight: bold; padding: 2px 0; color: #000; }
.sektion .item label span.oznaka { margin-left: 10px; font-size: 12px; line-height: 25px; display: inline-block; font-weight: normal; padding: 0 7px; color:#fff; background: #f26322;  -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
.sektion .item label .price-tag-wrapper { margin: 0 10px; }
.sektion .item label .price-tag-wrapper .price-tag { font-weight: 300; }
.sektion input.i-spinner { width: 45px; font-size: 15px; margin-right: 5px; text-align: center !important; position: relative; }
.sektion .description,
.sektion .short_description { margin-top:10px; font-size: 14px; font-weight: 400; letter-spacing: 0.02em; color: #131313; }
.sektion .description p { margin: 0 0 10px 0; }
.sektion .description ul { padding-left: 30px; }
.sektion .description ul li { list-style: disc; }
.sektion .description .notice { position: relative; margin: 20px 0 0 0; background: #F9F9F9; padding: 1em 1em 1em 2em; border-left: 4px solid #f26322; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15); }
.sektion .description .notice:before { content: '!'; position: absolute; top: 50%; margin-top: -17px; left: -17px; background-color: #f26322; color: #FFF; width: 30px; height: 30px; border-radius: 100%; text-align: center; line-height: 30px; font-size: 21px; text-shadow: 1px 1px rgba(0, 0, 0, 0.2); }
.sektion .youtube,
.sektion .pod { margin-top: 10px;  cursor: pointer; background: #ebebeb; color: #131313; font-size: 13px; letter-spacing: 0.02em; padding: 0 14px; line-height: 30px; display: inline-block; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
.sektion .youtube { text-decoration: none;  background: #e35615; color: #fff; }

 .btn {
 	width: 180px;
	 --width: 180px;
	 --height: 50px;
	 border: 0;
	 position: relative;
	 min-width: var(--width);
	 min-height: var(--height);
	 border-radius: var(--height);
	 color: #fff;
	 font-weight: bold;
	 background: #f26322;
	 cursor: pointer;
	 overflow: hidden;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 margin: 15px 0 0 0;
	 float: right;
}
 .btn .text, 
 .btn .icon-container {
	 position: relative;
	 z-index: 2;
}
 .btn .icon-container {
	 --icon-size: 25px;
	 position: relative;
	 width: var(--icon-size);
	 height: var(--icon-size);
	 margin-left: 15px;
	 transition: transform 500ms ease;
}
 .btn .icon-container .icon {
	 position: absolute;
	 left: 0;
	 top: 0;
	 width: var(--icon-size);
	 height: var(--icon-size);
	 transition: transform 500ms ease, opacity 250ms ease;
}
 .btn .icon-container .icon--left {
	 transform: translateX(-200%);
	 opacity: 0;
}
 .btn .icon-container .icon svg {
	 width: 100%;
	 height: 100%;
	 fill: #fff;
}
 .btn::after {
	 content: "";
	 position: absolute;
	 left: 0;
	 top: 0;
	 width: 100%;
	 height: 100%;
	 background: #e35615;
	 border-radius: var(--height);
	 z-index: 1;
	 transition: transform 500ms ease;
}
 .btn:hover::after {
	 transform: translateX(65%);
}
 .btn:hover .icon-container {
	 transform: translateX(125%);
}
 .btn:hover .icon-container .icon--left {
	 transform: translateX(0);
	 opacity: 1;
}
 .btn:hover .icon-container .icon--right {
	 transform: translateX(200%);
	 opacity: 0;
}

/* order form */
.order fieldset { margin: 30px 0 0 0; border: 0; background: #f9f9f9; padding: 10px 20px 20px 20px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
.order ul { margin: 0; padding: 0; }
.order ul li { width:49%; margin-right: 2%; float: left;}
.order ul li:nth-child(2n) { margin-right: 0; }
.order ul li:nth-child(2n+1) { content:''; clear: both; }
.order ul li:nth-child(5) { width: 100%; margin:0; }
.order fieldset label { display: block; margin: 10px 0 5px 0; }
.order fieldset label em { color: #e35615; }
.order fieldset input { border: 1px solid #ccc; width: 100%; padding: 0 0 0 10px; height: 32px; line-height: 32px; font-size: 14px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }
.order button.btn-large { cursor: pointer; width: 100%; margin: 20px 0 0 0; background: #e35615; color: #fff; letter-spacing: 0.03em; font-weight: 600; text-shadow: 1px 1px 1px rgb(0,0,0,0.1); text-transform: uppercase; font-size: 18px; border: 0; padding: 0 20px; height: 50px; line-height: 50px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}


.footer { clear: both; border-top: 1px dashed #ebebeb; margin: 20px auto; text-align:  center; font-size: 12px; color: #777; }

/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
  position: relative;
  padding-left: 1.95em;
  cursor: pointer;
}

/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 1.25em; height: 1.25em;
  border: 2px solid #ccc;
  background: #fff;
  border-radius: 4px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
  content: '\2713\0020';
  position: absolute;
  top: .07em; left: .22em;
  font-size: 1.5em;
  line-height: 0.8;
  color: #000;
  transition: all .2s;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}
[type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}
/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #ddd;
}
[type="checkbox"]:disabled:checked + label:after {
  color: #999;
}
[type="checkbox"]:disabled + label {
  color: #aaa;
}
/* accessibility */
[type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not(:checked):focus + label:before {
  border: 2px dotted blue;
}

/* hover style just for information */
label:hover:before {
  border: 2px solid #4778d9!important;
}

h1 { margin: 0 0 10px 0; }
.izbira { display: flex; margin: 0; padding: 0; }
.izbira li { flex: 1; display: block; }
.izbira li:first-child { margin-right: 10px; }
.izbira li a.content { border: 3px solid #ebebeb; display: block; padding: 15px; overflow: hidden; text-decoration: none; color: #000; background: #fff; }
.izbira li a.content:hover,
.izbira li.active a.content { border-color: #e35615; background: #fff; }

.izbira li a.content img { float: right; margin-left: 10px; clear: right; }
.izbira li a.content h3 { margin: 0 0 10px 0; font-size: 17px; }
.izbira li a.content p { color: #131313; font-size: 14px; font-weight: 400; margin:  0 0 5px 0; }
 
.pomocnik img { float: right; margin-left:20px; }


.logo { position: fixed; top: 15px; left: 15px; z-index:2; }
.logo svg { width: 230px;  }

/* RESPONSIVE */
@media (max-width: 1330px) { 
	.sidebar .total { top: 5px; right: 5px;}
	.sidebar .total h3 { font-size: 26px; }
	.sidebar .total h3 span,
	.sidebar .total p strong { display: block; }
	.logo { width: 68px; overflow: hidden;}
}
@media (max-width: 1090px) { 
	.sidebar .total h3 span,
	.sidebar .total p strong { display: inline; }
	.section { padding: 60px 20px 0 20px; }
	.sidebar .total { top: 0; }
	.sidebar .total h3 { font-size: 21px; margin-top: 3px; }

	.logo { width: auto; top: 4px; left: 10px; }
	.logo svg { width: 156px; }
}
@media (max-width: 760px) { 
	.section .title { margin-bottom: -26px; padding-top: 10px; }
	.section .title h2 { font-size: 36px; }
}
@media (max-width: 620px) { 
	.order ul li { width:100%; margin-right: 0; float: none;}
	.izbira li a.content img { float: none; margin: 0 auto; clear: both; }
}
@media (max-width: 430px) {
	.logo { width: 47px; }
}
@media (max-width: 380px) { 
	.order button.btn-large { font-size: 16px; }
}