@media (max-width: 599px){
body   {margin: 0px; padding: 0px 2px 0px 2px; text-align: center; color: black; background-color:rgb(0,255,255); font-family: Arial,sans-serif; font-size: 10pt;}}
@media (min-width: 600px){
body   {margin: 0px; padding: 0px 30px 0px 30px; text-align:center; color:black; background-color:rgb(0,255,255); font-family: Arial,sans-serif; font-size: 10pt;}} 

div            {text-overflow: ellipsis; box-sizing: border-box;}
span           {box-sizing: border-box;}
em             {font-style: normal;}
h1             {font-size:20pt; font-weight:bold; color:red;}
h2             {font-size:14pt; font-weight:bold; color:red;}
table          {border-collapse: collapse; }
td             {padding: 2px 5px 2px 5px; vertical-align: middle; }
ins            {text-decoration: none; }
div.flex       {display: flex; width: 100%; overflow: visible; }
div.logo1      {float: left;  min-width: 230px; height: 220px; background: url('https://www.ptakoviny.biz/obrnew/hlava-leva.png'); z-index: 1; overflow: visible; }
div.logo2      {float: left;  min-width: 50px; max-width: 50px; height: 220px; background: url('https://www.ptakoviny.biz/obrnew/hlava-leva.png'); z-index: 1; overflow: visible; }
@media (max-width: 799px) {div.logo1 {display: none;}}
@media (min-width: 800px) {div.logo2 {display: none;}}
div.uvod       {float: left;  width: 100%;      height: 220px; background: url('https://www.ptakoviny.biz/obrnew/hlava-stred.png'); }
div.radek1-1   {float: left;  padding: 20px 0px  5px 0px; width: 100%;  height:  70px; text-align: left; }   
div.radek1-2   {float: left;  padding: 20px 0px  5px 0px; width: 100%;  height:  70px; text-align: left; }   
@media (max-width: 449px) {div.radek1-1 {display: none;}}
div.hormenu1   {float: right; padding: 20px 0px  5px 0px; min-width: 680px; height:  70px; text-align: right; }
div.hormenu2   {float: right; position: relative; padding: 20px 0px  5px 0px; min-width: 196px; height:  70px; text-align: right; }
@media (max-width: 1229px) {div.hormenu1 {display: none;}}
@media (min-width: 1230px) {div.hormenu2 {display: none;}}
div.vlajky1    {display: block; padding:  0px 0px  0px 0px; width: 100%; height:  25px; text-align: right; }
div.www1       {display: block; padding:  0px 0px  0px 0px; max-width: 600px; height: 100px; text-align: left; background-image: url('https://www.ptakoviny.biz/obrnew/www600.png'); background-size: contain; background-repeat: no-repeat; background-position: center;}
div.uvodk      {float: right; min-width: 50px;  height: 220px; background: url('https://www.ptakoviny.biz/obrnew/hlava-prava.png'); }
div.lsloupec   {float: left;  min-width: 230px; max-width: 230px; height: auto; }
@media (max-width: 799px) {div.lsloupec {display: none;}}
main.hlavni    {float: left;  width:     100%;  height: auto; }
div.hledej1    {display: inline-block; width: 100%; }
@media (max-width: 799px) {div.hledej1 {display: none;}}
div.hledej2    {display: inline-block; width: 100%; }
@media (min-width: 800px) {div.hledej2 {display: none;}}
div.psloupec   {float: right; min-width: 230px; max-width: 230px; height: auto; }
@media (max-width: 1229px) {div.psloupec {display: none;}}
div.slzac      {display: block; width: 100%; height: 50px; background: url('https://www.ptakoviny.biz/obrnew/sloupecz.png');}
div.sltelo     {display: block; width: 100%; height: auto; background: url('https://www.ptakoviny.biz/obrnew/sloupec.png');}
div.slkon      {display: block; width: 100%; height: 50px; background: url('https://www.ptakoviny.biz/obrnew/sloupeck.png');}
div.zobmenu    {display: block; position: absolute; top: 120px; left: 10px; width: 226px; height: auto; padding: 0px; border: 4px solid gray; box-shadow: black 10px -10px 20px; background-color: yellow; z-index: 20; border-radius: 20px; } 
div.video1     {display: inline-block;} 
div.video2     {display: inline-block;} 
@media (min-width: 1000px) {div.video2 {display: none;}}
@media (max-width:  999px) {div.video1 {display: none;}}

div.inline {display: inline-block;}
div.table  {display: table; border-collapse: collapse;}
div.tr     {display: table-row; }
div.td0    {display: table-cell; vertical-align: middle; }
div.td     {display: table-cell; padding: 2px 5px 2px 5px;}

a.menu1       {display: block; position: relative; left: 20px; width: 180px; margin: 2px; padding: 2px; background-image: radial-gradient(white,aqua); font-size: 10pt; font-weight: bold; text-decoration: none; color: black; border: 1px outset black; border-radius: 10px; overflow: hidden; text-overflow: ellipsis;}
a.menu1:hover {border: 1px inset black; background-image: radial-gradient(rgb(100,149,237),aqua);}
a.menu1Q       {display: block; position: relative; left: 20px; width: 180px; margin: 2px; padding: 2px; background-image: radial-gradient(white,red); font-size: 10pt; font-weight: bold; text-decoration: none; color: black; border: 1px outset black; border-radius: 10px; overflow: hidden; text-overflow: ellipsis;}
a.menu1Q:hover {border: 1px inset black; background-image: radial-gradient(pink,red);}
a.menu2       {display: block; position: relative; left: 40px; width: 153px; margin: 2px; padding: 2px 2px 2px 8px; background-color: rgb(0,255,128); font-size: 9pt; font-weight: bold; text-decoration: none; color: black; border: 1px solid black; border-radius: 15px 5px; overflow: hidden; text-overflow: ellipsis; text-align: left; transition: 0.5s all;}
a.menu2:hover {left: 30px; padding-left: 18px; transition: 0.5s all; background-color: rgb(153,255,102);}
a.menu3       {display: block; position: relative; left: 60px; width: 133px; margin: 2px; padding: 2px 2px 2px 8px; background-color: rgb(255,0,255); font-size: 9pt; font-weight: bold; text-decoration: none; color: black; border: 1px solid black; border-radius: 15px 5px; overflow: hidden; text-overflow: ellipsis; text-align: left; transition: 0.5s all;}
a.menu3:hover {left: 50px; padding-left: 18px; transition: 0.5s all; background-color: rgb(255,153,255);}
a.odkaz       {color: blue; text-decoration: none;}
a.odkaz:active{color: blue;}
a.odkaz:hover {color: red;}
a.odkaz2      {color: black; text-decoration: none;}
a.odkaz4      {font-size: 12pt; color: red; text-decoration: none; font-weight: bold;}
a.odkaz4:hover {color: blue; }
a.hormenu        {display: inline-block; width: 75px; height: 40px; padding-top: 6px; margin: 0px 0px 5px 0px; font-weight: bold; text-decoration: none; background-color: #FF8040; border: 1px solid black; border-radius: 15px 7px; transition: all 1s; text-align: center; color: black; }
a.hormenu:hover  {background-color: lime; }

img.ikona           {height: 46px; width: 46px; border: 1px solid black; border-radius: 14px 7px; background-color: #FF8040;}
div.ik-menu         {display: block; position: absolute; left:   0px; top: 20px; width: 46px; height: 46px; padding-top: 0px; font-weight: bold; text-decoration: none; background-color: #FF8040; border: 1px solid black; border-radius: 15px 7px; transition: all 0.5s; text-align: center; color: black; overflow: hidden;}
div.ik-menu:hover   {background-color: lime; }
@media (min-width: 800px) {div.ik-menu {display: none;}}
div.ik-osobni       {display: block; position: absolute; left:  50px; top: 20px; width: 46px; height: 46px; padding-top: 0px; font-weight: bold; text-decoration: none; background-color: #FF8040; border: 1px solid black; border-radius: 15px 7px; transition: all 0.5s; text-align: center; color: black; overflow: hidden;}
div.ik-osobni:hover {left: 0px; width: 196px; height: 160px; background-color: yellow; z-index: 1;}
div.ik-kosik        {display: block; position: absolute; left: 100px; top: 20px; width: 46px; height: 46px; padding-top: 0px; font-weight: bold; text-decoration: none; background-color: #FF8040; border: 1px solid black; border-radius: 15px 7px; transition: all 0.5s; text-align: center; color: black; overflow: hidden; }
div.ik-kosik:hover  {left: 0px; width: 196px; height: 160px; background-color: yellow; z-index: 1;}
div.ik-info         {display: block; position: absolute; left: 150px; top: 20px; width: 46px; height: 46px; padding-top: 0px; font-weight: bold; text-decoration: none; background-color: #FF8040; border: 1px solid black; border-radius: 15px 7px; transition: all 0.5s; text-align: center; color: black; overflow: hidden;}
div.ik-info:hover   {left: 0px; width: 196px; height: 210px; background-color: yellow; z-index: 1;}

@media (max-width: 949px){div.tabkosik1 {display: none;}}
@media (min-width: 950px){div.tabkosik2 {display: none;}}


img.res      {max-width: 100%; height: auto; box-sizing: border-box; }
input.hledej {border: 1px solid #c7c7c7; font-weight: bold; text-align: center; padding: 3px; border-radius: 10px;}

.pis7   {font-size:  7pt; }
.pis8   {font-size:  8pt; }
.pis10  {font-size: 10pt; }
.pis12  {font-size: 12pt; }
.pis14  {font-size: 14pt; }
.pis16  {font-size: 16pt; }
.pis18  {font-size: 18pt; }
.pis30  {font-size: 30pt; }
.red    {color: red; }
.bold   {font-weight: bold;}
.ital   {font-style: italic;}
.under  {text-decoration: underline; }
.form   {border: 1px solid #c7c7c7;}
.left   {text-align: left; }
.center {text-align: center; }
.right  {text-align: right; }
.s25    {width:  25%;}
.s35    {width:  35%;}
.s50    {width:  50%;}
.s65    {width:  65%;}
.s75    {width:  75%;}
.s90    {width:  90%;}
.s99    {width:  99%;}
.s100   {width: 100%;}
.s300px {width: 300px; height: 300px; vertical-align: top; }
.ram1   {border: 1px solid black; }
.ram1a  {border-width: 1px 0px 1px 0px; border-style: solid; border-color: black; border-radius: 0px; }
.ramkul {border: 1px solid black; border-radius: 5px; padding: 0px 5px;}
.ramkul2{border: 1px solid black; border-radius: 5px; padding: 0px;}
.ram2   {border: 3px solid black; border-radius: 0px; }
.ram3   {border: 1px solid blue;  border-radius: 25px; box-shadow: black 10px -10px 20px; }
.vatop  {vertical-align: top; }
.vamid  {vertical-align: middle; } 
.vabot  {vertical-align: bottom; }
.ruzpoz {background-color: #FF98A2; }
.zelpoz {background-color: lime;}
.zlupoz {background-color: yellow;}
.sedpoz {background-color: lightgrey;}
.bilpoz {background-color: white;}
.tabost {background-color: #FF98A2; border-radius: 25px; box-shadow: black 10px -10px 20px; padding: 20px 20px; border: 1px solid gray;}
.pocetks{width: 50px;}
.pad10  {padding: 10px;}
.vb40   {height: 40px;}
.vb5    {height: 0px; background-color: white;}
.lh150  {line-height: 150%; }
.noprop {font-family: Courier New; }
.facebook {border:none; overflow:hidden; width:200px; height:100px; }
 
/* box položky */
div.zbhlabox     {display:  inline-block; position: relative; width:  220px; height: 440px; background-color: white; border-radius: 20px; padding: 10px; margin: 5px; border: 1px solid gray; box-shadow: black 10px -10px 20px;}
div.nnazev       {display:  block; position: absolute;  left:  10px; top: 10px; width: 200px; height:  40px; font-size:12pt; font-weight:bold; color:red; overflow: hidden;}
div.nkod         {display:  block; position: absolute;  left:  10px; top: 50px; width: 200px; height:  20px; font-size: 9pt; font-style: italic; font-weight: bold; color: maroon;}
div.npopis       {display:  block; position: absolute;  left:  60px; top: 70px; width: 100px; height:  16px; background-color: #FF98A2; border-radius:  5px 20px; font-size: 9pt; overflow: hidden; transition: all 0.5s; }
div.npopis:hover {left:  10px; top: 70px; width: 200px; height: 243px; border-radius: 20px; opacity: 0.9; border: 1px solid gray; padding: 2px;}
a.nodkazimg      {display:  block; position: absolute; left: 10px; top: 100px; width: 200px; height: 200px;}
a.nodkaz         {display:  block; position: absolute; left: 10px; top: 300px; width: 200px; height:  10px; font-size: 8pt; color: blue; text-decoration: none; font-weight:bold;}
a.nodkaz:active  {color: blue; text-decoration: none;}
a.nodkaz:hover   {color: red;  text-decoration: none;}
a.ntabvel        {display:  block; position: absolute; left:170px; top: 290px; width: 40px; height:  60px;}
img.vekomez      {display:  block; position: absolute; left: 10px; top: 310px; width: 40px; height:  40px;}
img.video        {display:  block; position: absolute; left: 10px; top: 110px; width: 40px; height:  40px;}
div.sizes        {display:  block; position: absolute; left:180px; top: 110px; width: 20px; height:  60px;}
div.ramsizes     {display:  block; font-size:7pt; border: 1px solid gray; margin: 1px; width: 32px; height:  14px; border-radius:  3px 10px;}
div.vkosiku      {display:  block; position: absolute; left: 10px; top: 400px; width: 200px; height:  20px; font-size: 12pt; font-weight: bold; color: limegreen; overflow: hidden; }
div.ncena        {display:  block; position: absolute; left: 55px; top: 320px; width: 110px; height: 30px; background-color: lawngreen; border-radius: 20px 20px; padding: 5px 5px; border: 1px solid gray; font-size: 12pt; font-weight:bold; }
div.nvcena       {display:  block; position: absolute; left:  6px; top:   0px; width: 100px; height: 19px; font-family: arial; text-align: center   ;font-size: 12pt; font-style:normal; font-weight:bold; color:black; }
div.nmcena       {display:  block; position: absolute; left:  6px; top:  18px; width: 100px; height: 19px; font-family: arial; text-align: center   ;font-size:  7pt; font-style:normal; color: #202020; }
div.ndost        {display:  block; position: absolute; left:   10px; top: 355px; width: 120px; height:  40px; border: 1px solid gray;  background-color: #00FFFF; overflow: hidden; border-radius: 20px; transition: all 0.5s; padding: 5px 3px; line-height: 100%; z-index: 5;}
div.ndost:hover  {left: -47px; top: 355px; width: 310px; height: 260px; overflow: auto; border-radius: 20px; z-index: 6; padding: 5px;}
div.nkos         {display:  block; position: absolute; left:  140px; top: 355px; width:  70px; height:  40px; border: 1px solid gray;  text-align: left; text-decoration: none; background-color: rgb(249,205,138); overflow: hidden; border-radius: 20px; transition: all 0.5s; padding: 5px 3px; text-align: center; z-index: 5;}
div.nkos:hover   {left:  10px; top: 355px; width: 200px; height: 260px; overflow: auto; z-index: 6;}

/* box zobraz */
div.hlavnibox    {display:  block; width: 100%; border-radius: 30px 30px; border: 2px solid gray; box-shadow: black 10px -10px 20px; background-color: white; padding: 5px;}
div.boxobrapopis {width:  100%;}  
div.detailbox    {display: inline-block; vertical-align: top; min-width: 250px; width:  48%; height: auto; padding: 5px;}
@media (max-width: 1000px) {div.detailbox {width: 98%;}}

div.tabprikos    {background-color: #00FFC0; border-radius: 25px; box-shadow: black 10px -10px 20px; padding: 10px; border: 3px solid gray; min-width: 260px;}
div.vkosiku2     {display:  block; width: 100%; font-size: 12pt; background-color: white; color: lime; border: 1px solid black; border-radius: 5px; padding: 0px 5px; }
div.ceny         {display:  block; width: 100%; border-radius: 10px; border: 1px solid blue; background-color: #00FFF0}


td.vybervar      {border-radius: 10px; border: 1px solid blue; background-color: #00FFF0; }
td.nobord        {border: none;}
td.pulka         {width: 50%; border-radius: 10px; border: 1px solid blue; background-color: #00FFF0}



span.neviditelny  {display:  block; position: relative; left:   0px; top:  30px; width: 100%; text-align: left; background-color: rgb(0,255,255); }
span.hlavnibox2   {display:  block; position: relative; left:   0px; top:  62px; width: 100%; text-align: center; background-color: white; border-radius: 30px 30px; border: 2px solid gray; box-shadow: black 10px -10px 20px; padding: 20px 10px;}
span.podousky     {display:  block; position: relative; left:   0px; top:   0px; width: 660px; text-align: center; background-color: white; padding: 10px 10px; border: 1px solid gray;  border-radius: 20px 20px 20px 20px;}

span.boxousek1    {display:  block; position: absolute; left:   0px; top:   0px; width: 620px; text-align: left; }
span.boxousek2    {display:  block; position: absolute; left:   0px; top:   0px; width: 300px; text-align: left; }
@media (min-width: 900px) {
span.boxousek2    {display: none;}
span.ouskopom     {display:  inline-block; vertical-align: bottom; height: 60px; width:  15px; background-color: white; border: 2px solid white; border-radius: 10px 10px 0px 0px; }
span.ouskopom2    {display:  inline-block; vertical-align: bottom; height: 64px; width:  30px; border: 1px none; border-radius: 10px 10px 0px 0px; }
span.ousko        {display:  inline-block; vertical-align: bottom; height: 40px; width:  90px; text-align: center; background-color: white;  border: 2px solid gray;  border-radius: 10px 10px 0px 0px; font-size: 10pt;   font-style:normal; font-weight:bold; text-decoration: none; color:blue; transition: all 0.5s; box-shadow: black 10px -10px 20px;}
span.ousko:hover  {display:  inline-block; vertical-align: bottom; height: 60px; width:  90px; text-align: center; background-color: yellow; border: 2px solid gray;  border-radius: 10px 10px 0px 0px; font-size: 10pt;   font-style:normal; font-weight:bold; text-decoration: none; color:blue; transition: all 0.5s; box-shadow: black 10px -10px 20px;}
span.ouskoa       {display:  inline-block; vertical-align: bottom; height: 40px; width:  90px; text-align: center; background-color: white;  border: 2px solid; border-color: gray gray white gray; border-radius: 10px 10px 0px 0px; font-size: 10pt;   font-style:normal; font-weight:bold; text-decoration: none; color:blue; transition: all 0.5s; box-shadow: black 10px -10px 20px;}
span.ouskoa:hover {display:  inline-block; vertical-align: bottom; height: 60px; width:  90px; text-align: center; background-color: yellow; border: 2px solid; border-color: gray gray white gray; border-radius: 10px 10px 0px 0px; font-size: 10pt;   font-style:normal; font-weight:bold; text-decoration: none; color:blue; transition: all 0.5s; box-shadow: black 10px -10px 20px;}
span.ouskon       {display:  inline-block; vertical-align: bottom; height: 40px; width:  90px; text-align: center; background-color: white;  border: 2px solid gray;  border-radius: 10px 10px 0px 0px; font-size: 10pt;   font-style:normal; font-weight:bold; text-decoration: none; color:black; transition: all 0.5s; box-shadow: black 10px -10px 20px;}
span.ouskon:hover {display:  inline-block; vertical-align: bottom; height: 60px; width:  90px; text-align: center; background-color: white;  border: 2px solid gray;  border-radius: 10px 10px 0px 0px; font-size: 10pt;   font-style:normal; font-weight:bold; text-decoration: none; color:black; transition: all 0.5s; box-shadow: black 10px -10px 20px;}
}
@media (max-width: 899px) {
span.boxousek1    {display: none;}
span.ouskopom     {display:  inline-block; vertical-align: bottom; height: 60px; width:  15px; background-color: white; border: 2px solid white; border-radius: 10px 10px 0px 0px; }
span.ouskopom2    {display:  inline-block; vertical-align: bottom; height: 64px; width:  30px; border: 1px none; border-radius: 10px 10px 0px 0px; }
span.ousko        {display:  inline-block; vertical-align: bottom; height: 44px; width:  44px; text-align: center; background-color: white;  border: 2px solid gray;  border-radius: 10px 10px 0px 0px; font-size: 10pt;   font-style:normal; font-weight:bold; text-decoration: none; color:blue; transition: all 0.5s; box-shadow: black 10px -10px 20px;}
span.ousko:hover  {display:  inline-block; vertical-align: bottom; height: 60px; width:  44px; text-align: center; background-color: yellow; border: 2px solid gray;  border-radius: 10px 10px 0px 0px; font-size: 10pt;   font-style:normal; font-weight:bold; text-decoration: none; color:blue; transition: all 0.5s; box-shadow: black 10px -10px 20px;}
span.ouskoa       {display:  inline-block; vertical-align: bottom; height: 44px; width:  44px; text-align: center; background-color: white;  border: 2px solid; border-color: gray gray white gray; border-radius: 10px 10px 0px 0px; font-size: 10pt;   font-style:normal; font-weight:bold; text-decoration: none; color:blue; transition: all 0.5s; box-shadow: black 10px -10px 20px;}
span.ouskoa:hover {display:  inline-block; vertical-align: bottom; height: 60px; width:  44px; text-align: center; background-color: yellow; border: 2px solid; border-color: gray gray white gray; border-radius: 10px 10px 0px 0px; font-size: 10pt;   font-style:normal; font-weight:bold; text-decoration: none; color:blue; transition: all 0.5s; box-shadow: black 10px -10px 20px;}
span.ouskon       {display:  inline-block; vertical-align: bottom; height: 44px; width:  44px; text-align: center; background-color: white;  border: 2px solid gray;  border-radius: 10px 10px 0px 0px; font-size: 10pt;   font-style:normal; font-weight:bold; text-decoration: none; color:black; transition: all 0.5s; box-shadow: black 10px -10px 20px;}
span.ouskon:hover {display:  inline-block; vertical-align: bottom; height: 60px; width:  44px; text-align: center; background-color: white;  border: 2px solid gray;  border-radius: 10px 10px 0px 0px; font-size: 10pt;   font-style:normal; font-weight:bold; text-decoration: none; color:black; transition: all 0.5s; box-shadow: black 10px -10px 20px;}
}

@media (max-width: 699px){
div.formco {display: block;        width: 260px; min-height: 20px; text-align:left;   font-size: 10pt;}
div.formin {display: inline-block; width: 260px; min-height: 35px; text-align:left;   font-size: 10pt; }
}
@media (min-width: 700px) AND (max-width: 799px) {
div.formco {display: inline-block; width: 260px; min-height: 25px; text-align:right;  font-size: 10pt;  padding-right: 5px;}
div.formin {display: inline-block; width: 260px; min-height: 25px; text-align:left;   font-size: 10pt; }
}
@media (min-width: 800px) AND (max-width:  875px){
div.formco {display: block;        width: 260px; min-height: 20px; text-align:left;   font-size: 10pt;}
div.formin {display: inline-block; width: 260px; min-height: 35px; text-align:left;   font-size: 10pt; }
}
@media (min-width: 876px){
div.formco {display: inline-block; width: 260px; min-height: 25px; text-align:right;  font-size: 10pt;  padding-right: 5px;}
div.formin {display: inline-block; width: 260px; min-height: 25px; text-align:left;   font-size: 10pt; }
}
 
div.kroksed        {display: inline-block; height: 35px; width: 110px; background-color: silver; margin: 2px; font-size: 7pt;}
div.krokzlu        {display: inline-block; height: 35px; width: 110px; background-color: yellow; margin: 2px; font-size: 7pt;}