* { box-sizing: border-box; }

body { font-family: 'Arial', sans-serif; background-image: linear-gradient(to right, rgb(80, 80, 80), rgb(122, 122, 122), rgb(80, 80, 80));}

body, h1, h2, h3, ul, ol, p, hr { margin: 0; }
ul, ol { padding: 0; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; max-height: 100%; }
a img { display: block; }
hr { width: 100%; height: 2px; float: left; background: #dfdede; border: 0; }
p {line-height: 1.6;}
strong {font-weight: 700;}

.flexbox {display:-webkit-flex; display:-webkit-box; display:-moz-flex; display:-moz-box; display:-ms-flexbox; display:flex;}
.flexbox.hcenter {align-items: center;}

.bold {font-weight: 700;}

.w100 {width: 100%;} 
.posRel {position: relative;}

.full-frame, .container { width: 100%; float: left; }

.mainFrame {width: 1200px; margin: 0 auto;}

header {width: 100%; height: auto; color: #858484; font-size: 13px; background-image: linear-gradient(rgb(255, 255, 255), rgb(238, 238, 238));}
header .inner {width: 100%; height: 120px;}
header .inner .logo {width: 347px; height: 100%; flex-wrap: wrap; align-items: center; align-content: center;}
header .inner .logo a {margin-bottom: 5px;}
header .inner .logo span {margin-top: 5px; font-weight: 600; letter-spacing: 0.3px;}

header .inner .menuBlock {flex: 1; flex-wrap: wrap; align-content: space-between; padding: 10px 30px 0 30px;}
header .inner .menuBlock .top {width: 100%;}
header .inner .menuBlock .top NAV UL LI {position: relative; padding: 0 15px;}
header .inner .menuBlock .top NAV UL LI:first-child {padding-left: 0;}
header .inner .menuBlock .top NAV UL LI:after {position: absolute; content: ''; width: 1px; height: 100%; right: 100%; background-color: #858484;}
header .inner .menuBlock .top NAV UL LI:first-child:after {display: none;}
header .inner .menuBlock .bottom {width: 100%;}
header .inner .menuBlock .bottom .btn {padding: 20px 20px 20px 20px; margin: 0 20px 0 0; align-items: center; font-weight: 700; font-size: 18px; background-image: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));}
header .inner .menuBlock .bottom .btn IMG {margin-right: 15px;}

header .inner .rightBlock {flex-wrap: wrap; justify-content: flex-end; align-content: space-between; padding: 10px 0;}
header .inner .rightBlock .user {width: 100%; text-align: right; align-items: center; justify-content: flex-end;}
header .inner .rightBlock .user .name {align-items: center;}
header .inner .rightBlock .user .sepr {padding: 0 5px;}
header .inner .rightBlock .user IMG {margin-right: 10px;}
header .inner .rightBlock .nt {width: 100%; height: 40px; margin-bottom: 10px; text-align: right;}

#navigation {width: 100%; height: auto; color: #858484; font-size: 13px; background-color: #fff;}
#navigation .inner {width: 100%; height: 40px; justify-content: space-between;}
#navigation .inner .left {align-items: center;}
#navigation .inner .right {align-items: center;}

#yellowLine {width: 100%; height: 5px; background-image: linear-gradient(rgb(248, 201, 68), rgb(249, 229, 62));}

#dlazdiceBilyPodklad {width: 100%; height: auto; background-color: #fff; z-index: 0; position: relative;}
#dlazdice {position: relative; width: 100%; height: auto;}
#dlazdice .yellowBg {position: absolute; left: 0; top: 0; width: 100%; height: 269px; z-index: -1; background-image: linear-gradient(rgb(248, 201, 68), rgb(249, 229, 62));}
#dlazdice .inner {width: 100%; height: auto;}
#dlazdice .inner .item {width: 400px; height: auto; color: #fff;}
#dlazdice .inner .item .photo {width: 100%; height: 269px;}
#dlazdice .inner .item .photo A {width: 100%; height: 100%; display: block;}
#dlazdice .inner .item .text {position: relative; width: 100%; height: auto; padding: 20px 10px 20px 65px; background-image: url('/images/dlazdice-arrow.png'); background-position: left 20px center; background-repeat: no-repeat;}
#dlazdice .inner .item .text .bg {position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 100%; background-image: linear-gradient(rgb(107, 107, 107), rgb(125, 125, 125));}
#dlazdice .inner .item .text .title {font-size: 20px;}
#dlazdice .inner .item .text .perex {font-size: 14px;}
#dlazdice .inner .item .text.yellow {color: #505050;}
#dlazdice .inner .item .text.yellow .bg {position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 100%; background-image: linear-gradient(rgb(248, 201, 68), rgb(249, 229, 62));}

main {width: 100%; height: auto; color: #4c4c4c; font-size: 14px; background-color: #fff; min-height: 650px;}
main .inner {width: 100%; height: auto; padding: 10px 0 30px 0;}
main .inner h1 {width: 100%; font-size: 22px; padding: 25px 0 15px 0; margin: 0 0 15px 0; border-bottom: 1px solid #4c4c4c; font-weight: 400;}
main .inner h2 {width: 100%; font-size: 22px; padding: 25px 0 15px 0; margin: 0 0 15px 0; border-bottom: 1px solid #4c4c4c; font-weight: 400;}
main .inner h3 {width: 100%; font-size: 16px; padding: 10px 0 10px 0; margin: 0 0 0 0; font-weight: 600;}
main .inner h3.prihlaseni {font-size: 22px; font-weight: 400; padding: 20px 0 10px; margin-bottom: 15px; border-bottom: 1px solid #4c4c4c;}
main .inner P {padding: 10px 0; margin: 0;}
main .inner UL {width: 100%; padding: 0px 0px 0px 15px; margin: 15px 0px 5px 0px; list-style-type: square;}
main .inner UL LI {margin: 0px 0px 10px 0px;}
main .inner .left {width: 66.66666%; height: auto; padding: 0 30px;}
main .inner .left #doprava.skrt {text-decoration: line-through;}
main .inner .right {width: 33.33333%; height: auto; padding: 0 30px;}
main .inner .right .registraceBtn {width: 100%; margin: 0 0 15px 0; padding: 8px 20px;}
main .inner A {color: #bd8c00; font-weight: 700; text-decoration: underline;}
main .inner A:HOVER {text-decoration: none;}
main .inner .registraceBtn {color: #4c4c4c; text-decoration: none;}

main .inner .wholePage {width: 100%; height: auto; padding: 0 30px;}

main .hintBalloon {width: 300px; position: absolute; display: none; z-index: 20000; overflow: hidden; border: 0px; background-image: url('/images/hintBalloon.png'); background-repeat: no-repeat; background-position: -1px 0px; border-radius: 5px;}
main .hintBalloon A {width: 13px; height: 13px; margin: 35px 15px 7px 15px; float: right; display: block; background-image: url('/images/icon-close-white.png'); background-size: contain;}
main .hintBalloon .hintBalloonText {width: calc(100% - 43px); float: left; padding: 35px 15px 15px 15px; display: block; font-size: 14px; color: #FFF;}

main .payButton {width: 100%; height: 40px; float: left; display: block; padding-top: 7px; background-image: url('/images/gopay-button.jpg'); border-radius: 5px; text-align: center; font-size: 18px; color: #4c4c4c !important;}
main .payButton:HOVER {text-decoration: none !important;}
main .payDesc {width: 100%; float: left; padding: 30px 0px 10px 0px; margin: 0px 0px 15px 0px; border-bottom: 1px solid #ccc; display: flex; align-items: center; justify-content: left; font-size: 14px;}
main .payLogos {width: 100%; float: left; display: flex; align-items: center; justify-content: left;}
	main .payLogos IMG {max-height: 35px; margin: 0px 25px 0px 0px; border: 0px;}

#vzornik {width: 100%;}
	#vzornik .vzornikItem {width: 24%; height: 210px; float: left; margin-right: 1.33333%;}
	#vzornik .vzornikItem:nth-child(4n) {margin-right: 0px;}
		#vzornik .vzornikItem .image {width: 100%; height: 130px; float: left; background-size: cover; background-position: center; cursor: pointer;}
			#vzornik .vzornikItem .image .stock {width: 100%; height: 140px; float: left; background-image: url('/images/stock.png'); background-repeat: no-repeat; background-position: right 15px;}
		#vzornik .vzornikItem .name {width: 100%; float: left; font-size: 12px; color: #434343; font-weight: bold; padding: 5px 0px 3px 0px;}
		#vzornik .vzornikItem .format {width: 100%; float: left; font-size: 11px; color: #434343; padding: 0px 0px 2px 0px;;}
		#vzornik .vzornikItem .thcks {width: 100%; float: left; font-size: 11px; color: #434343; padding: 0px;}

#objednavka {width: 100%; height: auto;}
#objednavka H3 {width: 100%; margin: 15px 0 15px 0; justify-content: space-between; align-items: center; border-bottom: 1px solid #4c4c4c;}
#objednavka .row {width: 100%; height: auto; padding: 6px 0; border-bottom: 1px dotted #ccc;}
#objednavka .row .left {width: 35%; padding: 0;}
#objednavka .row .right {width: 65%; padding-right: 0;}
#objednavka .row .right #celkovaCena {font-size: 16px; float: left; padding: 2px 0px 0px 0px;}
#objednavka .row .right #celkovaCenaDPH {float: left; font-size: 18px; font-weight: bold; clear: left; padding: 10px 0px 0px 0px;}
#objednavka .row .whole {width: 100%; padding: 0;}
#objednavka .row .dopravaItem IMG {margin: 0px 15px 0px 10px; border: 0px;}
#objednavka .row .dopravaItem .dopravaPopis {font-size: 14px; font-weight: normal; line-height: 1.5;}
#objednavka .row .platbaItem IMG {margin: 0px 15px 0px 10px; border: 0px;}
#objednavka .row .platbaItem .platbaPopis {font-size: 14px; font-weight: normal; line-height: 1.5;}

#objednavka .dilce {width: 100%; height: auto;}
#objednavka .dilce .dil {width: 100%; height: auto; border-bottom: 1px dotted #ccc;}
#objednavka .dilce .dil .row {border: 0;}
#objednavka .dilce .dil .row .left {width: 20%; padding-left: 50px;}
#objednavka .dilce .dil .row .right {width: 80%;}

#objednavka .buttons {justify-content: center; padding: 10px 0;}
#objednavka .buttons .formLine {width: 100%;}
#objednavka .buttons .formLine .formSubmit {width: 100%;}

#mojeZakazkyFiltry {width: 100%; margin: 20px 0 0 0;}
#mojeZakazkyFiltry .basicInput {width: 250px; margin-right: 20px;}

#mojeZakazky {width: 100%; margin: 20px 0 0 0;}
#mojeZakazky .zakazka {width: 100%; padding: 4px 0; border-bottom: 1px solid #b4b4b4;}
#mojeZakazky .zakazka .stav {width: 18%; align-items: center; flex-wrap: wrap;}
#mojeZakazky .zakazka .stav SPAN {width: 12px; height: 12px; display: block; margin-right: 8px;}
#mojeZakazky .zakazka .stav .expedovano {padding-left: 20px; font-style: italic; font-size: 12px; color: #999;}
#mojeZakazky .zakazka .nazev {width: 25%; align-items: center;}
#mojeZakazky .zakazka .order_no {width: 12%; align-items: center;}
#mojeZakazky .zakazka .cena_bez_dph {width: 10%; text-align: right; justify-content: flex-end; align-items: center;}
#mojeZakazky .zakazka .cena_bez_dph SPAN {font-style: italic; font-size: 12px;}
#mojeZakazky .zakazka.header .cena_bez_dph SPAN {color: #ccc; font-weight: 100;}
#mojeZakazky .zakazka .zpusob_doruceni {width: 17%; text-align: right; justify-content: flex-end; align-items: center; font-size: 12px;}
#mojeZakazky .zakazka .btn {width: 13%; text-align: right; justify-content: flex-end; align-items: center;}
#mojeZakazky .zakazka .action {width: 5%; justify-content: flex-end; align-items: center;}
#mojeZakazky .zakazka .action I {cursor: pointer;}
#mojeZakazky .zakazka.header {padding: 6px 0; font-weight: 700; text-align: left; font-size: 16px; border-bottom: 2px solid #696969;}
#mojeZakazky .zakazka.header .zpusob_doruceni {font-size: 16px;}

#formPrihlaseni {width: 100%; height: auto; float: left; justify-content: space-between; flex-wrap: wrap;}
#formPrihlaseni .column {width: 49%; float: left;}
#formPrihlaseni .column .item .txt {margin-bottom: 4px; font-weight: 700;}
#formPrihlaseni .columnSubmit {width: 100%; margin: 15px 0;}
#formPrihlaseni .column.full {width: 100%;}
#formPrihlaseni .row {margin-top: 15px;}

#formRegistrace {width: 100%; height: auto; float: left; justify-content: space-between; flex-wrap: wrap;}
#formRegistrace .column {width: 49%; float: left;}
#formRegistrace .column.mesto {width: 36%;}
#formRegistrace .column.psc {width: 11%;}
#formRegistrace .column .item {margin-bottom: 10px;}
#formRegistrace .column .item .txt {margin-bottom: 4px; font-weight: 700;}
#formRegistrace .column .item .txt SPAN {float: right; color: #8a8a8a; font-style: italic; font-weight: 300;}
#formRegistrace .columnSubmit {width: 100%; margin: 15px 0;}
#formRegistrace .row {width: 100%; margin: 6px 0; align-items: center;}
#formRegistrace .row.spaceBetween {justify-content: space-between;}
#formRegistrace .row INPUT {margin-right: 10px;}
#formRegistrace .row.souhlas {padding-top: 10px; border-top: 1px solid #4c4c4c;}
#formRegistrace .row.souhlas2 {padding-top: 5px;}
#formRegistrace .firmaBlock {width: 100%; margin: 0 0 15px 0; justify-content: space-between; align-items: center; border-bottom: 1px solid #4c4c4c;}
#formRegistrace .firmaBlock .title {padding: 10px 0; font-size: 18px; font-weight: 400;}

#filtrDekoru {width: 100%; height: auto; float: left; justify-content: space-between; flex-wrap: wrap; margin: 5px 0px 15px 0px; padding: 10px 0px 3px 0px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;}
#filtrDekoru .column {width: 31%; float: left;}
#filtrDekoru .column .item {margin-bottom: 10px;}
#filtrDekoru .column .item .txt {margin-bottom: 4px; font-weight: 700;}
#filtrDekoru .column .item .txt SPAN {float: right; color: #8a8a8a; font-style: italic; font-weight: 300;}
#filtrDekoru .column_name {width: 65.6666%; float: left;}
#filtrDekoru .column_name .item {margin-bottom: 10px;}
#filtrDekoru .column_name .item .txt {margin-bottom: 4px; font-weight: 700;}
#filtrDekoru .column_name .item INPUT {width: 100%;}
#filtrDekoru .columnSubmit {width: 100%; margin: 15px 0;}
#filtrDekoru .row {width: 100%; margin: 6px 0; align-items: center;}
#filtrDekoru .row INPUT {margin-right: 10px;}


footer {width: 100%; height: auto; background-image: linear-gradient(to right, rgb(80, 80, 80), rgb(122, 122, 122), rgb(80, 80, 80)); padding-bottom: 20px;}
footer .inner {width: 100%; height: auto; padding: 20px 0px; font-size: 13px;}
footer .inner .left {width: 20%; color: #c6c6c6;}
footer .inner .center {flex: 1; color: #fff; text-align: center; line-height: 1.7;}
footer .inner .right {width: 20%;}
footer .inner .right IMG {width: 100px; float: right;}


/* LOADER */
#mainpage-loader {}
#mainpage-loader .overlay {width: 100%; height: 100%; background-color: #000; opacity: 0.5; position: fixed; z-index: 888888;}
#mainpage-loader .content {width: 100%; height: 100%; position: fixed; z-index: 888889; display: flex; justify-content: space-around; align-items: center; text-align: center; color: #FFF;}
#mainpage-loader .content I {margin: 0px 0px 10px 0px; }

.alertFrame {width: 100%; padding: 10px 15px; min-height: 30px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; line-height: 1.4; border-radius: 5px; text-align: center;}
.alertFrame.red {background-color: #d9001a; color: #FFF;}
.alertFrame.blue {background-color: #00a6e0; color: #FFF;}


.textFormatFrame {}
.textFormatFrame A {color: #bd8c00; font-weight: 700; text-decoration: underline;}
.textFormatFrame :first-child {margin-top: 0px;}
.textFormatFrame :last-child {margin-bottom: 0px;}