@font-face         {font-family: "From Street Art";
                    src: url("From Street Art.otf");}
body                    {font-family:Arial, sans-serif;
                         width:100%;
                         margin:0;
                         background: rgb(50,50,50);
                         background: linear-gradient(180deg, rgba(50,50,50,1) 0%, rgba(200,200,200,1) 50%, rgba(50,50,50,1) 100%);}
header                  {font-family: From Street Art;
                         background-image: linear-gradient(to left, yellow, #ff6666, orange, yellow, #99ff99, #ffff66);
                         -webkit-background-clip: text;
                         color: transparent;
                         position: relative;
                         right: -20px;}
.nadpis               {display:inline-block;
                       font-size: calc(12px + 2vw);
                       //color:#000000;
                       margin-left:15%;
                       margin-top:6px;} 
#slideshow_obal         {display:none;
                         z-index:10000;
                         width:100%;
                         height:100%;
                         background-color:black;
                         text-align:center;}
.otevrit_obrazky         {z-index:3000000;
                          float:right;
                          width:26px;
                          height:26px;
                          margin:10px 10px 0 0;
                          background-image: url(../ikony/ctverecek26.gif);
                          background-position: 26px 0px;
                          cursor:pointer;cursor:hand;}
.otevrit_obrazky:hover   {background-image: url(../ikony/ctverecek26.gif);
                          background-position: 52px 0px;}
/*
.slideshowbutton        {font-size:14px;
                         width:150px;
                         background: rgb(255,255,255);
                         background: linear-gradient( rgba(50,50,50,1) 0%, rgba(200,200,200,1) 30%, rgba(200,200,200,1) 70%, rgba(50,50,50,1) 100%);
                         color:black;
                         padding: 9px 2px 4px 2px;
                         border-radius: 6px;
                         float:right;
                         margin:8px 2px 0 0;
                         height: 22px;
                         text-align:center;
                         color:black;
                         cursor:pointer;cursor:hand;}
*/
.slideshowbutton        {font-size: 14px;
                         width: 130px;
                         background: #ddd;
                         color: black;
                         padding: 6px 0px 6px 2px;
                         float: right;
                         margin: 10px -131px 0 0;
                         height: 17px;
                         text-align: center;
                         color: black;
                         cursor: pointer;
                         cursor: hand;}
/*
.slideshowbutton:hover   {background: rgb(255,255,255);
                         background: linear-gradient( rgba(50,50,50,1) 0%, rgba(122,178,241,1) 30%, rgba(122,178,241,1) 70%, rgba(50,50,50,1) 100%); 
                         color:white;}
*/
.slideshowbutton:hover   {background: #bcd;
                         //background: linear-gradient( rgba(50,50,50,1) 0%, rgba(122,178,241,1) 30%, rgba(122,178,241,1) 70%, rgba(50,50,50,1) 100%); 
                         color:#fff;} 
.prerus_slideshowbutton {z-index:10002;
                         width:26px;
                         height:26px;
                         background-image: url(../ikony/prerusit26.gif);
                          background-position: 26px 0px;
                         float:right;
                         margin:10px auto;
                         cursor:pointer;cursor:hand;}
.prerus_slideshowbutton:hover {background-image: url(../ikony/prerusit26.gif);
                          background-position: 52px 0px;}
.spustit_slideshowbutton {z-index:10002;
                          width:26px;
                         height:26px;
                         background-image: url(../ikony/spustit26.gif);
                         background-position: 26px 0px;
                         float:right;
                         margin:10px auto;
                         cursor:pointer;cursor:hand;}
.spustit_slideshowbutton:hover {background-image: url(../ikony/spustit26.gif);
                         background-position: 52px 0px;}
.zavrit_slideshowbutton {z-index:10002;
                         width:26px;
                         height:26px;
                         background-image: url(../ikony/zavrit26.gif);
                         background-position: 26px 0px;
                         float:right;
                         margin:10px;
                         cursor:pointer;cursor:hand;}
.zavrit_slideshowbutton:hover {background-image: url(../ikony/zavrit26.gif);
                         background-position: 52px 0px;}
.popisky_slideshow       {display:inline;
                          color:white;
                          font-size:12px;}
.zadat_cislo_fotky_slideshow    {border: 2px solid lightblue;
                                 width: 40px;
                                 text-align: center;
                                 float: right;
                                 margin-right: -175px;
                                 position: relative;
                                 top: 10px;
                                 height:23px;}
#img_slideshow           {display:none;
                          z-index:10001;
                          max-height:99vh;
                          max-width:99vw;
                          margin:1vh auto;
                          border:2px solid white;}
.vizualni_zapisnik    {font-family: Arial, sans-serif;
                       width: 130px;
                       height: 14px;
                       position: relative;
                       top: 20px;
                       left: 4.1vw;
                       font-style: normal;
                       text-decoration: none;
                       font-size: 0.9em;
                       color: #000;
                       float: left;
                       cursor: hand;
                       cursor: pointer;
                       padding: 6px 0 9px 24px;
                       background-color: #ddd;}
.vizualni_zapisnik:hover {color:#fff;
                       background-color: #7ab2f1;}
#vyhledat               {position:relative;
                         top:-56px;}
.p_vyhledat             {float:right;}
.submit_vyhledat        {display:inline;
                         font-size:12px;
                         background-color:#86d0ff;
                         float:right;
                         margin-right:80px;
                         width:36px;
                         height:32px;
                         box-sizing: border-box;}
.input_vyhledat         {display:inline;
                         width:140px;
                         height:30px;
                         padding:0 0 0 10px;
                         box-sizing:border-box;}
#obal_miniatury      {width: 90%;
                      margin: 10px auto;
                      border: 2px solid white;
                      height: 7800px;
                      background-color: black;
                      display: block;
                      padding: 16px}
#obal_miniatury img   {cursor:hand;
                       cursor:pointer;}
#obal_velkeObrazky    {display:none;
		       height:10000px;
		       width:100%;
		       position:sticky;
	   	       top:0;
		       left:0;
		       text-align:center;
		       background: url(../ikony/pozadi_ligthtbox_velke.png) repeat top left;}
#cisloFotky           {height:0px}
.label_cislo_fotky    {width: 40px;
                       color:white;
                       float:right;
                       position: relative;
                       top: 78px;
                       left:200px;
                       font-size: 24px;}
.zadat_cislo_fotky    {width: 40px;
                       text-align: center;
                       float: right;
                       margin-right: 16px;
                       position: relative;
                       top: 80px;
                       left:200px;}
.kontejner            {z-index:1100;
                       position:fixed;
                       top:12px;
                       height:30px;
                       margin:0;
                       width:100%;
                       float:right;
                       text-align:center;}
.procenta_zvetseni    {float:right;
                       height:15px;
                       width:46px;
                       padding:3px;
                       background-color:#7ab2f1;
                       border:2px solid #fff;
                       color:black;
                       position:relative;
                       top:0px;
                       margin:2px 16px 0 0;}
#sipky_lightbox       {display:inline-block;
                       width:70px;
                       height:28px;
                       margin-left:300px;}
#sipky_lightbox img   {cursor:hand;
                       cursor:pointer;
                       height:33px;
                       width:23px;}
.sipkaL               {display:inline-block;
                       background-image: url(../ikony/arrowL_transparent_sprite.png);
                       background-position: 46px 0px;
                       height: 33px;
                       width: 23px;
                       margin-right:14px;
                       cursor:hand;cursor:pointer;}
.sipkaL:hover         {background-image: url(../ikony/arrowL_transparent_sprite.png);
                       background-position: 23px 0px;}
.sipkaP               {display:inline-block;
                       background-image: url(../ikony/arrowP_transparent_sprite.png);
                       background-position: 23px 0px;
                       height: 33px;
                       width: 23px;
                       cursor:hand;cursor:pointer;}
.sipkaP:hover         {background-image: url(../ikony/arrowP_transparent_sprite.png);
                       background-position: 46px 0px;}
.zavrit               {position:fixed;
                       width:44px;
                       height:33px;
                       float:left;
                       margin:0px 0px 0 16px;
                       background-image: url("../ikony/nahledy.png");
                       background-position: 44px 0px;
                       cursor:hand;cursor:pointer;}
.zavrit:hover         {background-image: url("../ikony/nahledy.png");
                       background-position: 88px 0px;}
.full_size            {float:right;
                       margin:2px 10px 0 0;
                       background-image: url(../ikony/full_size_sprite25.png);
                       background-position: 25px 0px;
                       height: 25px;
                       width: 25px;
                       cursor:hand;cursor:pointer;}
.full_size:hover      {background-image: url(../ikony/full_size_sprite25.png);
                       background-position: 50px 0px;}
.zmensit              {float:right;
                       margin:2px 10px 0 0;
                       background-image: url(../ikony/zmensit_sprite25.png);
                       background-position: 25px 0px;
                       height: 25px;
                       width: 25px;
                       cursor:hand;cursor:pointer;
                       opacity: 1.0;}
.zmensit:hover        {background-image: url(../ikony/zmensit_sprite25.png);
                       background-position: 50px 0px;}
.zoom_plus            {float:right;
                       margin:2px 10px 0 0;
                       background-image: url(../ikony/zoom_plus_sprite25.png);
                       background-position: 25px 0px;
                       height: 25px;
                       width: 25px;
                       cursor:hand;cursor:pointer;}
.zoom_plus:hover      {background-image: url(../ikony/zoom_plus_sprite25.png);
                       background-position: 50px 0px;}
.zoom_minus            {float:right;
                       margin:2px 10px 0 0;
                       background-image: url(../ikony/zoom_minus_sprite25.png);
                       background-position: 25px 0px;
                       height: 25px;
                       width: 25px;
                       cursor:hand;cursor:pointer;}
.zoom_minus:hover      {background-image: url(../ikony/zoom_minus_sprite25.png);
                       background-position: 50px 0px;}
.otocitP              {float: right;
                       margin: 2px 10px 0px 0px;
                       background-image: url(../ikony/arrow_roundP_sprite25.png);
                       background-position: 17px 0px;
                       height: 25px;
                       width: 17px;
                       cursor:hand;cursor:pointer;}
.otocitP:hover       {background-image: url("../ikony/arrow_roundP_sprite25.png");
                       background-position: 34px 0px;}
.narovnat             {float:right;
                       margin:2px 5px 0 0;
                       background-image: url(../ikony/narovnat25.png);
                       background-position: 7px 0px;
                       height: 25px;
                       width: 7px;
                       cursor:hand;cursor:pointer;}
.narovnat:hover       {background-image: url(../ikony/narovnat25.png);
                       background-position: 14px 0px;}
.otocitL             {float: right;
                       margin: 2px 5px 0px 0px;
                       background-image: url(../ikony/arrow_roundL_sprite25.png);
                       background-position: 17px 0px;
                       height: 25px;
                       width: 17px;
                       cursor:hand;cursor:pointer;}
.otocitL:hover       {background-image: url("../ikony/arrow_roundL_sprite25.png");
                       background-position: 34px 0px;}
#nastenka            {display:inline-block;
                      border:2px solid #fff;
                      max-height: 85vh;            
                      max-width:  87vw;            
                      box-sizing:border-box;
                      position:relative;
                      top: 60px;
                      transform-origin: center top;}
.popi_exif           {z-index:1101;
                      position:absolute;
                      top:94vh;
                      left:0px;
                      color:#aaa;
                      width:100%;
                      font-size:20px;
                      text-align:center;
                      margin:0;
                      overflow: hidden}
.popi                {z-index:1102;
                      position:absolute;
                      top:96vh;
                      width:100%;
                      color:#fff;
                      font-size:14px;
                      text-align:center;
                      margin:0;}

/* --------------------------- SLIDER ------------------------------------------- */

.slidecontainer {width: 300px; /* Width of the outside container */
                 height:38px;
                 white-space:nowrap;
                 margin-left:20px;
                 margin-top:16px;}
.slider_label   {display:inline;
                 color:#999;}
.slider {
  -webkit-appearance: none;
  width: 300px;
  height: 10px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 44px;
  height: 32px;
  border: 0;
  background: url('../ikony/nahledy.png');
  background-position: 88px 0px;
  cursor: pointer;}

.slider::-moz-range-thumb {
  width: 44px;
  height: 32px;
  border: 0;
  background: url('../ikony/nahledy.png');
  background-position: 88px 0px;
  cursor: pointer;
}
.slider:hover {
  opacity: 1;}
/* ------------------------------------------ MENSI MONITORY (mobil apod.) ---------------------- */
@media screen and (max-width: 900px) {

.zadat_cislo_fotky_slideshow {display:none;}
.otocit {display:none;}
.otocitP {display:none;}
.otocitL {display:none;}
.zoom_minus {display:none;}
.zoom_plus {display:none;}
.zmensit   {display:none;}
.full_size {display:none;}
.narovnat  {display:none;}
.procenta_zvetseni {display:none;}
.zadat_cislo_fotky {display:none;}
header                {font-family:Arial, sans-serif;
                       background: rgb(255,255,255);
                       background: linear-gradient( rgba(50,50,50,1) 0%, rgba(200,200,200,1) 30%, rgba(200,200,200,1) 70%, rgba(50,50,50,1) 100%);
                       color:black;
                       padding: 5px 12px;
                       border-radius: 16px;}
.nadpis               {display:inline-block;
                       font-size: calc(7px + 1.4vw);
                       color:#000000;
                       margin-left:10px;
                       margin-top:6p;}
.vizualni_zapisnik {display:block;
                    width: 100px;
                    height: 11px;
                    top: 40px;
                    font-size: 12px;
                    padding: 2px 0 6px 4px;}
#obal_miniatury    {border:none;
                    margin:none;
                    width:96%;}
#obal_velkeObrazky    {display:none;
		       height:100vh;
		       width:100vw;
		       position:sticky;
	   	       top:0;
		       left:0;
		       text-align:center;
		       background: url(../ikony/pozadi_ligthtbox_velke.png) repeat top left;}
.kontejner            {position:fixed;
                       top:-40px;
                       height:0px;
                       margin:0;
                       width:98vw;}

.p_vyhledat             {display:none;}
.slidecontainer        {display:none;}
.slideshowbutton        {display:none;
                         position:absolute;
                         top:10px;
                         right:8px;
                         margin:0;
                         font-size:14px;
                         width:110px;
                         background: rgb(255,255,255);
                         background: linear-gradient( rgba(50,50,50,1) 0%, rgba(200,200,200,1) 30%, rgba(200,200,200,1) 70%, rgba(50,50,50,1) 100%);
                         padding: 4px 2px 4px 2px;
                         border-radius: 6px;
                         float:right;
                         height: 18px;
                         text-align:center;
                         color:black;
                         cursor:pointer;cursor:hand;}
.slideshowbutton:hover   {background: rgb(255,255,255);
                         background: linear-gradient( rgba(50,50,50,1) 0%, rgba(122,178,241,1) 30%, rgba(122,178,241,1) 70%, rgba(50,50,50,1) 100%); 
                         color:white;}
.otevrit_obrazky         {z-index:3000000;
                          float:right;
                          width:18px;
                          height:18px;
                          margin:8px 8px 0 0;
                          background-image: url(../ikony/ctverecek18.gif);
                          background-position: 0px 0px;
                          cursor:pointer;cursor:hand;}
.otevrit_obrazky:hover   {background-image: url(../ikony/ctverecek18.gif);
                          background-position: 0px 0px;}
.prerus_slideshowbutton {z-index:3000002;
                         width:18px;
                         height:18px;
                         background-image: url(../ikony/zastavit18.gif);
                         background-position: 0px 0px;
                         float:right;
                         margin:8px 8px 0 0;
                         cursor:pointer;cursor:hand;}
.prerus_slideshowbutton:hover {background-image: url(../ikony/zastavit18.gif);
                               background-position: 0px 0px;}
.spustit_slideshowbutton {z-index:3000003;
                         width:18px;
                         height:18px;
                         margin:8px 8px 0 0;
                         background-image: url(../ikony/spustit18.gif);
                         background-position: 0px 0px;
                         float:right;
                         cursor:pointer;cursor:hand;}
.spustit_slideshowbutton:hover {background-image: url(../ikony/spustit18.gif);
                               background-position: 0px 0px;}
.zavrit_slideshowbutton {z-index:3000004;
                         width:18px;
                         height:18px;
                         background-image: url(../ikony/zavrit18.gif);
                         background-position: 0px 0px;
                         float:right;
                         margin:8px 0 0 0;
                         cursor:pointer;cursor:hand;}
.zavrit_slideshowbutton:hover {background-image: url(../ikony/zavrit18.gif);
                               background-position: 0px 0px;}
#img_slideshow           {display:none;
                          z-index:10001;
                          max-height:94vh;
                          max-width:99vw;
                          margin:12px auto;
                          border:2px solid white;}
#sipky_lightbox       {display:inline-block;
                       //width:370px;
                       height:30px;}
.sipkaL               {display:inline-block;
                       position:absolute;
                       top:45vh;
                       left:0.5vw;
                       background-image: url(../ikony/fancy_nav_left.png);
                       background-position:0 0;
                       background-repeat: no-repeat;
                       height: 30px;
                       width: 30px;}
.sipkaL:hover         {background-image: url(../ikony/fancy_nav_left.png);
                       background-position:0 0;
                       background-repeat: no-repeat;}                       
.sipkaP                {display:inline-block;
                        position:absolute;
                        top:45vh;
                        left:92vw;
                        background-image: url(../ikony/fancy_nav_right.png);
                        background-position:0 0;
                        background-repeat: no-repeat;
                        height: 30px;
                        width: 30px;
                        margin-right:6px;}
.sipkaP:hover         {background-image: url(../ikony/fancy_nav_right.png);
                       background-position:0 0;
                       background-repeat: no-repeat;}  
.label_cislo_fotky     {display:none;} 
.zavrit               {//position:fixed;
                       position:absoloute;
                       width:44px;
                       height:33px;
                       transform:scale(0.7);
                       top: 5vh;
                       left: -5px;
                       background-image: url("../ikony/nahledy.png");
                       background-position: 0px 0px;
                       cursor:hand;cursor:pointer;}
#nastenka            {display:inline-block;
                      border:0 solid #fff;
                      height:auto;
                      max-height: 83vh;            
                      max-width:  87vw;            
                      box-sizing:border-box;
                      position:relative;
                      top: 6px;
                      margin-top:0;
                      transform-origin: center top;} 
.popi_exif           {z-index:1101;
                      position:absolute;
                      top:86vh;
                      margin: 0;
                      left:10px;
                      color:#aaa;
                      height:14px;
                      width:99vw;
                      font-size:12px;
                      text-align:center;
                      overflow: hidden} 
.popi                {z-index:1102;
                      position:absolute;
                      top:90vh;
                      width:100%;
                      color:#fff;
                      font-size:12px;
                      text-align:center;
                      margin:0;}
 
   
  }   
  /* --------- mobil portrét --------------------------- */
@media (max-width: 600px) AND (orientation:portrait) {
 .nadpis_velkeObrazky {display:none;}

header               {position:static;}

.nadpis              {display:block;
                      width:100%;
                      //font-size: 24px;
                      margin: 16px 0 4px 0;
                      text-align:center;}
//header    {display:none;}
//.nadpis    {display:none;}
.nadpis_velkeObrazky {display:block;}
.nadpis_velkObrazky2 {display:none;}
.zadat_cislo_fotky_slideshow {display:none;}
.otocit {display:none;}
.otocitP {display:none;}
.otocitL {display:none;}
.zoom_minus {display:none;}
.zoom_plus {display:none;}
.zmensit   {display:none;}
.full_size {display:none;}
.narovnat  {display:none;}
.procenta_zvetseni {display:none;}
.zadat_cislo_fotky {display:none;}
.slidecontainer {display:none;}

.nadpis_vyhledane    {font-size: 20px;}
.obal_vizualni_zapisnik {display:inline-block;
                         position:initial;}
.vizualni_zapisnik      {top:0px;
                         left:30px;}
.vizualni_zapisnik2 {
    position:absolute;
    top: 35px;
    left: 60px;
    width: 120px;
    height: 16px;
    font-size:12px;
    padding:4px 0 4px 0;}
#cisloFotky           {display:none;} 
#cisloFotky_slideshow {display:none;}
/*
.slidecontainer      {position: absolute;
                      top: 65px;
                      margin-top:0px;
                      width: 100vw;
                      margin-left: 20px;}
*/
.vyhledat_obal       {top: 70px;
                      float: left;}
.p_vyhledat          {float: left;
                      position: relative;
                      top: 0px;
                      left:30px;}
.input_vyhledat      {width:150px;}
.submit_vyhledat     {margin-right: 6px;
                      margin-top: 0px;
                      margin-left: 0;
                      float:right;}
#obal_miniatury {
    display: block;
    position: relative;
    top: 20px;
    width: 96%;
    margin: 0 auto;
    border: none;
    padding: 4px;
    height: 10000px;
    background-color: black;}
.kontejner {
    position: relative;
    top: 0px;
    height: 0px;
    margin: 0;
    width: 98vw;}                      
#sipky_lightboxL     {position: absolute;
                      left:16px;
                      top:35px;
                      width:25px; 
                      height:30px;}
#sipky_lightboxP     {position: absolute;
                      left:90%;
                      top:35px;
                      width:25px;
                      height:30px;}  
.sipkaL              {left:30vw;
                      top:5vh;}
.sipkaP              {left:55vw;
                      top:5vh;}
/*
.obal_nastenka       {position: absolute;
                      top: 30px;
                      left:34px;}
#nastenka            {display:inline-block;
                      border:0 solid #fff;
                      height:auto;
                      max-height: 70vh;            
                      max-width:  80vw;            
                      box-sizing:border-box;
                      position:relative;
                      top: 10px;
                      margin-top:16px;}
*/
.obal_img_nastenka {display:inline-block;
                    height:auto;}
#nastenka          {display:inline-block;
                    height:auto;
                    max-height: 81vh;
                    max-width: 96vw;
                    box-sizing: border-box;
                    position:absolute;
                    top:16px;left:0;bottom:0;right:0;
                    margin:auto;}
#pretahovaci_div     {top:92vh;}
#pretahovaci_divheader {display:none;}
.popi                {font-size:12px;
                      line-height: 14px;}
// .zavrit {display:none;} 

.reload_str_miniatur   {width: 120px;
                        height: 16px;
                        font-style:normal;
                        font-size:12px;
                        position:absolute;
                        top:35px;
                        left:190px;
                        padding: 4px 0 4px 0px;
                        }
.na_celou_obrazovku    {width:130px;
                        height:26px;
                        position:absolute;
                        top:64px;
                        left:220px;}
.zavrit               {//position:fixed;
                       position:absolute;
                       width:40px;
                       height:30px;
                       transform:scale(0.9);
                       top: 10px;
                       left: 140px;
                       background-image: url("../ikony/nahledy30.png");
                       background-position: 0px 0px;
                       cursor:hand;cursor:pointer;}
.zavrit:hover         {background-image: url("../ikony/nahledy30.png");
                       background-position: 0px 0px;}
}