* { margin: 0; padding: 0; text-indent: 0; border: 0 }
h1, h2, h3, a img { padding: 0; margin: 0; border: 0 }
ul, ol { list-style: none }
table, td, th { border: 0; font-size: 1em; font-weight: normal }
li { margin: 0; list-style-type: none }
hr { display: none }

body { font-family: 'segoe ui', sans-serif; background-color: #F1F4F9 }
p, li { color: #222; font-size: 1em; letter-spacing: .1px; line-height: 1.85em }
h1 { color: #FFF; font-size: 1.4em; font-weight: normal; text-align: center; padding-top: 5rem; position: relative }
h2 { color: #11892F; font-size: 1.7em; font-weight: 100; word-spacing: -2px; line-height: 1.25em; margin-top: 24px; margin-bottom: 27px }
h2 span { font-weight: 400 }
h3, h4 { color: #11892F; font-size: 1.7em; font-weight: 400; word-spacing: -2px; line-height: 1.25em }
h4 { color: #111; margin-bottom: 31px }

img { max-width: 100%; height: auto }
a { color: #11892F; text-decoration: underline }
a:hover { text-decoration: none }

#web { max-width: 1080px; margin: 0 auto; background-color: #FFF; box-shadow: 0 0 15px 0 rgba(0,0,0,.10) }
.max { max-width: 830px; margin: 0 auto; padding: 0 30px }
.blok { max-width: 670px; margin: 0 auto; padding: 0 30px }
.center { text-align: center }
.clear { clear: both }

.tlacitko { font-family: sans-serif; font-size: 1.2em; text-align: center; letter-spacing: .5px; word-spacing: -1px; padding: 12px 15px; border-radius: 5px; display: block; box-shadow: 0 2px 5px 0 rgba(0,0,0,.2) }
.tlacitko span { text-decoration: none }
.tlacitko:hover { box-shadow: none; transition: all .2s ease-in-out }
.tlacitko.zmena { margin-top: 56px; margin-bottom: 64px; font-size: 1em; text-decoration: none }
.zelena { color: #FFF; background: #11892F; text-shadow: 0 1px 0 #126628 }
.zelena:hover { background: rgba(17,137,47,.7) }
.ruda { color: #FFF; background: #FF5722; text-shadow: 0 1px 0 #CC4419 }
.ruda:hover { background: rgba(255,87,34,.8) }

.logo { font-size: 1.3em; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; display: inline-block; margin-top: 11px }
.logo span { color: #111; font-weight: 500 }
.logo cite { font-size: .6em; font-style: normal; margin-left: 1px }
.logo a { text-decoration: none }

#touch { margin-top: -52px; margin-bottom: 19px; visibility: hidden }
.menu { margin-top: -16px; visibility: visible; float: right }
.menu a { color: #000; text-decoration: none }
.menu a:hover { text-decoration: none }
.menu li { font-size: 1em; text-transform: uppercase; padding: 10px 0; padding-left: 20px; position: relative }
.menu li span { cursor: default }
.menu li span:after { content: url(../img/web/menu.png) }
.menu li ul { min-width: 200px; left: -20px; margin-top: 6px; padding: 15px 19px; padding-bottom: 20px; background-color: #FFF; position: absolute; border-radius: 5px; z-index: 100; display: none }
.menu li:hover ul { display: block; box-shadow: 2px 6px 21px -2px rgba(0,0,0,.75) }
.dropdown:before { content: ''; width: 15px; height: 15px; top: -5px; left: 0; right: 0; margin: 0 auto; background-color: #FFF; position: absolute; transform: rotate(45deg) }
.dropdown li { width: 100%; padding-top: 3px; padding-bottom: 1px }
.dropdown li a { color: #000; font-size: .825em; letter-spacing: .5px; line-height: 1em; padding: 5px 0; display: block }
.dropdown li a:hover { color: #11892F }

.notice { font-size: .9em; padding-top: 15px; padding-bottom: 19px; background-color: #FBE3D8; display: block }
.notice a:before { content: '!'; font-weight: bold; font-style: italic; line-height: 23px; margin-right: 9px; padding: 0 9px; background-color: #FFF; border-radius: 50%; display: inline-block }
.notice a { color: #7e2200; text-decoration: none }
.notice span:before { content: 'Nenechte si dnes ujít' }
.notice span:after { content: 'NEJLEPŠÍ CENOVÉ NABÍDKY'; font-weight: bold; text-decoration: underline }
.notice em:before { content: 'při nákupu her a herního zařízení...'; font-style: normal }

.okno { background-color: #111; font-style: italic }
.okno.zmena { margin-bottom: 52px }
.pozadi { max-width: 1080px; margin: 0 auto; position: relative }
.pozadi img { height: 100%; width: 100%; position: absolute; filter: brightness(.5); object-fit: cover }
.popis { max-width: 800px; color: #FFF; font-size: 3em; font-weight: bold; text-align: center; line-height: 1.2em; text-shadow: 2px 2px 5px rgba(0,0,0,.35); margin: 0 auto; padding: 0 30px; padding-bottom: 15rem; position: relative }
.popis.zmena { padding-bottom: 6rem }
.popis:before { content: ''; width: 40px; margin: 0 auto; margin-top: 24px; margin-bottom: 7px; border-top: 1px solid #FFF; display: block }

#nej { max-width: 920px; margin: 0 auto; margin-top: -10rem; padding-bottom: 52px; position: relative }
#nej .tlacitko { font-size: 1.1em }
.nej { margin: 0 15px; background-color: #FFF; border-radius: 10px; border-top: 40px solid #FFF; border-bottom: 42px solid #FFF; box-shadow: 0 4px 11px rgba(0,0,0,.25) }
.nej .zmena { text-align: initial; margin-top: 28px }
.nej .tech { text-align: initial; line-height: 1.7em; margin-top: -2px; margin-bottom: 18px }
.nej .text { text-align: initial; line-height: 1.7em; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden }
.nej .text a { color: #333; text-decoration: underline }
.nej .text a:hover { text-decoration: none }
.nej .plumi { text-align: initial; margin-top: -20px }
.nej .hodnoceni { color: #111; font-weight: bold; margin-top: 17px; margin-bottom: 3px }
.nej .link { line-height: 1.65em; margin-top: 27px; margin-bottom: 0 }
.nej .link a { text-decoration: underline; font-weight: bold }
.nej .link a:hover { text-decoration: none }
.nej a { text-decoration: none }
.nej li { list-style-type: disc; line-height: 1.65em; margin-left: 18px }
.nej > div { width: 236px; min-width: 236px; text-align: center; padding: 15px 30px; border-left: 1px dashed #AAA }
.nej > div:first-child { border: none }
.posun { display: flex; overflow-x: auto; overflow-y: hidden }
.typo { color: #111; font-weight: bold; margin-top: -3px; margin-bottom: -1px }
.meno { color: #11892F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }

.volba { margin-top: 38px; margin-bottom: 33px; padding: 30px; background-color: #F3F8F1; border-radius: 5px; border: 1px solid #D1E8D0 }
.volba ul { margin-top: 10px; margin-bottom: 5px }
.volba li { line-height: 1.3em; margin-left: 17px; margin-bottom: 9px }
.volba li:before { content: ''; width: 5px; height: 5px; margin: 2px 11px; margin-left: -16px; background: #222; border-radius: 50%; vertical-align: 1px; display: inline-block }
.volba a:hover { text-decoration: none }
.anchor { top: -25px; display: block; position: relative; visibility: hidden }
.sloupec { columns: 2 }

.nahled { margin-top: 42px; position: relative }
.nahled a { text-decoration: none }
.nahled img { margin-bottom: -9px; border-top-left-radius: 5px; border-top-right-radius: 5px }
.nahled:hover, .pix:hover { transition: all .3s ease; opacity: .7 }
.nahled .tlacitko { font-size: 1.1em; margin-bottom: 38px; border-top-left-radius: 0; border-top-right-radius: 0 }
.nahled .tlacitko:hover { background: #FF5722; box-shadow: 0 2px 5px 0 rgba(0,0,0,.2) }
.stitek, .nalepka { width: 42px; color: #FFF; text-align: center; line-height: 1.3em; background: linear-gradient(to right bottom, rgba(0,0,0,0), rgba(0,0,0,.24)), #59CC5D; margin: 27px 15px; padding: 15px; border-radius: 50%; position: absolute; z-index: 100 }
.stitek span { padding: 0 2px; border-bottom: 1px solid #FFF }
.filtr:after, .barva:after { content: ''; width: 100%; height: 100%; top: 0; background: radial-gradient(circle, rgba(255,255,255,0) 70%, rgba(215,215,215,.55) 100%); border-radius: 5px; position: absolute; mix-blend-mode: multiply; pointer-events: none }

.pix { margin-top: 39px; margin-bottom: 35px; position: relative }
.pix img { height: 300px; object-fit: cover; box-shadow: 0 3px 6px rgba(0,0,0,.20); border-radius: 5px; display: block }
.barva:after { background: #EEE }
.media img { height: auto; margin: 45px 0 }
.game img { height: auto }

#dalsi img { margin-bottom: 6px }
#dalsi img:first-of-type { margin-top: 30px }
#dalsi img:last-of-type { margin-bottom: 29px }
.galerie img { height: 100px; margin-top: 30px; object-position: left; object-fit: none }

.tech { line-height: 1.6em }
.parm { margin-top: 29px }
.parm li { margin-left: 20px; line-height: 1.45em; margin-bottom: 7px }
.parm li:before { content: ''; width: 5px; height: 5px; margin: 2px 15px; margin-left: -20px; background: #FF5722; border-radius: 50%; display: inline-block }

.poznamka { border-left: 4px solid #3BA659; background-color: #F3F8F1; margin-top: 40px; margin-bottom: 36px; padding: 33px; padding-bottom: 37px; border-top-right-radius: 5px; border-bottom-right-radius: 5px }
.poznamka.zmena { margin-top: 13px }
.poznamka ul { margin-top: 20px }
.poznamka li { line-height: 1.3em; margin-bottom: 7px }
.big { font-size: 2.4em; font-weight: 100; text-align: center; line-height: 1.1em; margin-bottom: 3px }
.big.zmena { margin-top: -6px }
.line { text-decoration: line-through }

.odstavec { margin-top: 26px }
.mezera { margin-top: 30px }
.linka { margin-top: 37px; margin-bottom: 32px; border-bottom: 1px solid #EEE }
.linka.uprava { margin-top: 37px; margin-bottom: 32px; border-bottom: 1px dashed #DDD }
.zuby { height: 10px; margin: 60px 0; margin-bottom: 45px; background: url(../img/web/zuby.png) repeat-x center }

.karta { margin: 44px 0; margin-bottom: 40px; padding: 16px 40px; padding-bottom: 18px; background-color: #2F3742; border-radius: 7px; box-shadow: 0 2px 9px 0 rgba(0,0,0,.19) }
.karta h2 { color: #FFF; font-size: 1.7em; line-height: 1.2em; margin-top: 21px; margin-bottom: 0 }
.karta p { color: #B8BDC5 }
.karta strong { color: #FFF; font-weight: 500 }
.karta ul { margin-top: -1px; margin-bottom: 28px }
.karta li { color: #C5C8CE; margin-left: 17px; margin-bottom: 23px; margin-bottom: 7px; line-height: 1.45em }
.karta li:before { content: ''; width: 5px; height: 5px; margin: 2px 11px; margin-left: -16px; background-color: #FFF; border-radius: 50%; vertical-align: 1px; display: inline-block }
.karta li:last-of-type { margin-bottom: 0 }
.karta .hodnoceni { color: #FF784D; font-weight: 500; letter-spacing: .3px; margin-bottom: 7px }
.nadpis { color: #FFF !important; letter-spacing: .2px; margin-bottom: 25px }

#list { padding: 56px 30px; padding-bottom: 64px; background: #F5F5F5 url(../img/web/sum.png) repeat }
#list h2 { color: #3BA659; margin-top: 0 }
#list h3.center { margin-top: -9px }
#list .nadpis { color: #333 !important; margin-bottom: 54px }
#list .nadpis.zmena { margin-bottom: 25px }
#list.zmena { padding: 56px 0; padding-bottom: 25px }
#list.zmena h3 { color: #111; margin-bottom: 31px }
.list { max-width: 830px; margin: 30px auto; font-size: .9em; padding: 26px 0; padding-bottom: 28px; background-color: #FFF; border-radius: 10px; position: relative; overflow: hidden; box-shadow: 0 0 15px rgba(0,0,0,.15) }
.list ul { margin-top: -3px }
.list li { font-size: 1.1em; line-height: 1.75em }
.list li:before { content: '\2022'; color: #11892F; font-size: 1.2em; margin-left: -15px; position: absolute }
.list .tlacitko { width: 160px; color: #FFF; font-size: 1.4em; margin: 14px; margin-bottom: 11px }
.list .tlacitko { text-decoration: none }
.list .tlacitko:hover { text-decoration: none; box-shadow: none }
.list > div:first-child { margin-left: 30px }

.box { width: 250px; display: flex; flex-direction: column; align-items: center; float: left }
.box p { color: #000; font-size: 1.1em }
.box a { color: #000; text-decoration: underline }
.box a:hover { text-decoration: none }
.box span { color: #11892F; font-size: 1.8em; line-height: 1em; letter-spacing: -0.5px; word-spacing: -2px }
.box img { margin-top: 5px }
.nazev { font-size: 1.2em !important; line-height: 1em; letter-spacing: -0.5px; margin-top: 3px }
.data { margin: 0 }
.link { line-height: 1.6em; margin-top: 53px; margin-bottom: -9px }
.linky { text-align: center; margin-top: 44px; margin-bottom: 20px; display: flex; justify-content: space-around }
.linky li:nth-of-type(n+5) { display: none }
.linky a:hover img { opacity: .5; transform: scale(.9) }
.linky img { padding: 5px 0; transition: all .3s ease }

.pricka { margin-bottom: 45px; padding: 6px 0; background: #F5F5F5 url(../img/web/pricka.png) repeat-x }
.pricka.zmena { margin-top: 50px; margin-bottom: 0; transform: rotate(180deg) }
.pricka.uprava { margin-top: 58px }

.blocek { max-width: 670px; margin: 12px auto; margin-bottom: 6px; padding: 51px 80px; padding-bottom: 31px; background-color: #FFF; border-radius: 10px; box-shadow: 0 0 15px rgba(0,0,0,.15) }
.blocek h3.zmena { margin-top: 43px }
.blocek ul { margin-top: -29px; margin-bottom: 25px }
.blocek li { margin-left: 17px; margin-bottom: 23px; margin-bottom: 25px }
.blocek li:before { content: ''; width: 5px; height: 5px; margin: 2px 11px; margin-left: -16px; background-color: #000; border-radius: 50%; vertical-align: 1px; display: inline-block }
.zaver { width: 120px; margin: 35px auto; margin-bottom: 16px; border-bottom: 1px solid #3BA659 }

.clanky { margin-top: 26px; margin-bottom: 40px }
.clanky li { line-height: 1.3em !important; margin-top: 12px }
.clanky li:before { content: '\2630'; color: #FF5722; margin-right: 10px; float: left }
.clanky li a { color: #333; text-decoration: none; display: flex }
.clanky li a:hover { text-decoration: underline }

.vyber { margin-top: 44px }
.vyber li span { font-weight: bold }
.vyber li:after { content: ''; height: 1px; margin: 27px 0; background: #3BA659; display: block }
.vyber li:last-child:after { display: none }
.vyber img { margin-top: 7px; margin-right: 15px; padding: 0 10px; float: left }
.vyber img:hover { transition: all .3s ease; opacity: .7 }

#tab { max-width: 830px; margin: 0 auto; margin-top: -7px; margin-bottom: -32px }
.tab:first-of-type { margin-top: 52px }
.tab { margin: 45px 0; background-color: #FFF; border-radius: 8px; box-shadow: 0 2px 10px 0 rgba(0,0,0,.20); overflow: hidden }
.tab img { height: 300px; object-fit: cover }
.perex { margin-bottom: -8px }
.pole { padding: 1px 40px; padding-bottom: 36px }
.pole h3 { color: #111; line-height: 1.2em; margin-top: 22px; margin-bottom: 10px }
.pole p { line-height: 1.55em }
.leva img { margin-right: 50px; border-top-left-radius: 8px; border-bottom-left-radius: 8px; float: left }
.prava img { margin-left: 40px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; float: right }
.klik { width: 210px; font-family: sans-serif; text-align: center; letter-spacing: .5px; word-spacing: -1px; text-decoration: none; margin-top: 18px; padding: 13px; border: 2px solid #11892F; border-radius: 5px; display: inline-block }
.klik:hover { color: #FFF; background-color: #11892F; transition: all .2s ease-in-out }

#pata { padding-bottom: 25px; background-color: #2B2F48 }
#pata span { color: #FF5722; padding: 0 3px }
#pata a { color: #FFF; text-decoration: none; font-style: italic }
#pata a:hover { text-decoration: underline }
.pata { height: 215px; margin-top: -30px; background: url(../img/web/pata.png); background-repeat: no-repeat; background-position: top center }
.delitko { padding: 7px 0; background: #2B2F48 url(../img/web/delitko.png) repeat-x }
.konec { font-size: .9em; padding: 15px 0; padding-bottom: 18px; background-color: #111 }
.odkaz a { color: #888; line-height: 2em; letter-spacing: .5px; text-decoration: none; transition: all .3s ease }
.odkaz a:hover { color: #FFF }
.odkaz span { margin-left: 3px; margin-right: 7px; border-right: 1px solid #444 }
.copy { color: #888; letter-spacing: .5px; text-align: right; margin-top: -28px; padding-right: 5px; float: right }

/* responzivne */

@media (max-width: 920px) {
html { -webkit-text-size-adjust: 100% }
.menu { text-align: center; padding: 0 33px; float: none }
.menu span { border: none; padding: 0 }
.menu a:hover { text-decoration: none }
.menu li ul { padding: 0; background-color: initial; position: initial; display: block }
.menu li:hover ul { box-shadow: none }
.menu li { font-size: .9em; padding: 0 }
.menu li span { display: none }
.menu li span:after { display: none }
.dropdown li a { color: #FFF; font-weight: 100; letter-spacing: 1.5px; line-height: 2em; border-bottom: 1px solid #3C4654 }
.dropdown li a:hover { color: #FFF }
.dropdown li:last-of-type a { border: none }
.dropdown:before { display: none }

#touch { color: #000; font-size: 1.6em; margin-top: 10px; margin-bottom: 17px; cursor: pointer; visibility: visible; float: right }
.overlay { height: 0%; width: 100%; top: 0; left: 0; background-color: #2F3742; overflow-y: hidden; position: fixed; z-index: 300; transition: all .4s ease-in-out }
.overlay a { text-decoration: none }
.overlay .closebtn { top: -3px; right: 28px; color: #676D74; font-size: 1.6em; font-weight: 100; position: absolute }
.overlay-content { top: 10%; width: 100%; position: relative }

.nej > div { -webkit-transform: translateZ(0) }
.list { max-width: 380px; padding: 40px 5px; padding-bottom: 14px }
.list .tlacitko { width: 210px }
.list ul { margin: auto }
.list > div:first-child { margin: 0 }
.list > div:last-child { padding-left: 0 }
.list:last-of-type { margin-bottom: 68px !important }
.box { width: auto; padding-bottom: 25px; float: none }
.nazev { margin-top: 25px }
.link { margin-top: -15px }
.link.zmena { margin-top: 53px }
.blocek { padding: 51px 30px; padding-bottom: 31px }
}

@media (max-width: 900px) {
.tab { max-width: 670px; margin: 45px auto }
.tab img { height: auto }
.perex { margin-bottom: -8px }
.pole { padding-bottom: 40px }
.leva img, .prava img { width: auto; margin: 0; border-radius: initial; border-top-left-radius: 8px; border-top-right-radius: 8px; float: none }
}

@media (max-width: 768px) {
.popis { font-size: 2em }
.popis:before { margin-bottom: 14px }
.popis.zmena { padding-bottom: 5.5rem }
.big { font-size: 2em }
.linky { flex-wrap: wrap; justify-content: center }
.linky li:nth-of-type(n+5) { display: block }
.linky img { padding: 5px 25px }
#tab { margin-top: -4px }
.big.zmena { margin-top: -3px }
.vyber li span { margin-top: 14px; margin-bottom: -20px; text-align: center; display: block }
.vyber li:after { margin: 30px 0 }
.vyber li div { margin-top: 48px; margin-bottom: 29px; position: relative }
.vyber li div:after { content: ''; width: 100%; height: 100%; top: -10px; padding: 10px 0; background: #EEE; border-radius: 5px; position: absolute; mix-blend-mode: multiply; pointer-events: none }
.vyber img { margin: 0 auto; display: block; float: none }
.link.zmena br { display: none }
.zuby { margin-bottom: 48px }
.pata { margin-top: -70px }
.konec { font-size: initial }
.odkaz { text-align: center }
.copy { font-size: .9em; text-align: center; margin-top: 0; padding-bottom: 2px; float: none }
}

@media (max-width: 545px) {
.sloupec { columns: initial }
}

@media (max-width: 425px) {
h1 { font-size: 1.2em; padding: 3rem; padding-bottom: 0 }
.overlay .closebtn { right: 13px }
.popis { font-size: 1.6em; padding-bottom: 12.5rem }
.popis.zmena { padding-bottom: 3.5rem }
.volba { padding: 30px 20px }
.karta { padding: 17px 20px }
.poznamka { padding: 33px 20px; padding-bottom: 37px }
.pole { padding: 1px 20px; padding-bottom: 40px }
.klik { width: auto; display: block }
#list { padding: 56px 15px; padding-bottom: 64px }
.blocek { padding: 51px 20px; padding-bottom: 31px }
.max, .blok { padding: 0 15px }
}

/* gameplac.cz */