/* CSS RESET */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}

/* END OF CSS RESET */



h1  { 
font-size: 20px;
color: #aaaaaa;
text-align: left;
margin: 3px 3px 10px 15px;
padding-bottom: 2px;
border-bottom: 2px solid #555555;
display: inline-block;
position: relative;
float: left;
}

a          {outline: none; }
a:link     {color: white;   font-weight: bold; text-decoration: none; outline: none;}
a:visited  {color: white;   font-weight: bold; text-decoration: none; outline: none;}
a:hover    {color: red;     font-weight: bold; text-decoration: none; outline: none;}
a:active   {color: yellow;  font-weight: bold; outline: none;}

body { 
min-width: 1024px;
background-color: #101010;
background-image:url('/gfx/pattern.jpg');
background-repeat:repeat;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
color:#888888;
padding:0;
-webkit-text-size-adjust: 100%; /* importnt to stop iphone to resize fonts */
 } 


/* MEGA DULEZITE JINAK NEBUDOU THUMBNAILY OSTRE NA NON-RETINA SCREENS
PRI RESIZOVANI  Z JEJICH NATIVNI VELIKOSTI*/
@media
only screen and (-webkit-max-device-pixel-ratio: 1)       ,
only screen and (   max--moz-device-pixel-ratio: 1)       ,
only screen and (    -ms-max-device-pixel-ratio: 1)       ,
only screen and (     -o-max-device-pixel-ratio: 1)       ,
only screen and (        max-device-pixel-ratio: 1)       ,
only screen and (                max-resolution: 100dpi)  ,
only screen and (                max-resolution: 1dppx)   {
.thumb img, .galleries_list_item img {    
    image-rendering: optimizeSpeed;             /*                     */
    image-rendering: -moz-crisp-edges;          /* Firefox             */
    image-rendering: -o-crisp-edges;            /* Opera               */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */
    image-rendering: optimize-contrast;         /* CSS3 Proposed       */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                */
}
/* other non-Retina-specific stuff here */
}


hr.silver { 
 clear: both; 
  float: none; 
  width: 100%; 
  height: 1px;
  border: none;
  margin: 5px auto 0px auto; 
  background: silver;
  background-image: -webkit-gradient(
      linear,
      left bottom,
      right bottom,
      color-stop(0, rgb(100,100,100)),
      color-stop(0.3, rgb(255,2255,255)),
      color-stop(1, rgb(100,100,100))
  );
  background-image: -moz-linear-gradient(
      left center,
      rgb(100,100,100) 0%,
      rgb(255,255,255) 30%,
      rgb(100,100,100) 100%
  );
}
hr.red { 
  clear: both; 
  float: none; 
  width: 100%; 
  height: 1px;
  border: none;
  margin: 2px auto 5px auto;  
  background: red;
  background-image: -webkit-gradient(
      linear,
      left bottom,
      right bottom,
      color-stop(0, rgb(100,0,0)),
      color-stop(0.3, rgb(255,0,0)),
      color-stop(1, rgb(100,0,0))
  );
  background-image: -moz-linear-gradient(
      left center,
      rgb(100,0,0) 0%,
      rgb(255,0,0) 30%,
      rgb(100,0,0) 100%
  );
}
#wrapper {
width: 95%;
margin: 15px auto 30px auto;
padding: 10px 0px 0px 0px;
border: 1px solid #202020;
/*border-radius: 8px;*/
/*2018 - hranaty design je modernejsi - tez zvazit pouziti wraperu - ponechani cele 100% width ...*/
box-shadow: 5px 0 30px #000,  -5px 0 30px #000;
background: #000000;
}
/* nebo zkus #wrapper s width:960px; border-left:1px solid #ccc; border-right:1px solid #ccc; */
#header { 
height: 52px;
margin: auto;
text-align: center;
padding: 0px 12px 0px 12px;
}
#retina_ready_website {
display: block;
float: left;
width: 155px;
height: 12px;
position: relative;
top: 1px;
left: 15px;
}	
#header h3 {
font-size: 12px;
color: #888888;
position: absolute;
}
#header h3 span {
font-weight: bold;
}
#header h3 span.red {
color: #f30000;
}
#header h3 span.green {
color: #76ed00;
}
#header h3 span.blue {
color: #1e90ff;
}
#logo img{
width: 480px;
height:52px;
float: left;
display: block;
position: relative;
top: 0px;
left: 8px;
}
#logo h1{
position: absolute;
text-indent: -9999px;
overflow: hidden;
}

/* Start of navigation menu */
#nav
{
float: right;
position: relative;
top: -11px;
right: -13px;
height:30px;
text-align: center;
}
#nav li
{
display:inline;
}
#nav li sup {
color: red;
font-weight: bold;
}
#nav li a
{
font-size:24px;
font-weight: 400;
text-decoration: none;
float:left;
padding:10px;
margin: 11px 13px 11px 0;
background-color: #151515;
color:#dddddd;
border:1px solid #222222;
}
#nav li a:hover
{
background-color: #333333;
border:1px solid #444444;
color:#eeeeee;
}
#nav li a.active 
{
background-color:#eeeeee;
background: #eeeeee; /* Old browsers */
background: -moz-linear-gradient(top, #eeeeee 0%, #b8b8b8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#b8b8b8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #eeeeee 0%,#b8b8b8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #eeeeee 0%,#b8b8b8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #eeeeee 0%,#b8b8b8 100%); /* IE10+ */
background: linear-gradient(to bottom, #eeeeee 0%,#b8b8b8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#b8b8b8',GradientType=0 ); /* IE6-9 */
color:#000000;
border:1px solid #202020;
}
/* End of navigation menu */
.material-icons.home { 
font-size: 32px;
position: relative;
top: 7px; margin-top: -14px;
}
.material-icons.photos { 
font-size: 32px;
position: relative;
top: 7px; margin-top: -14px;
padding-right: 8px;
}
.material-icons.videos { 
font-size: 32px;
position: relative;
top: 7px; margin-top: -14px;
padding-right: 8px;
}
#adthisacek {
width: 250px;
height: 50px;
position: relative;
top: -62px;
margin-bottom: -100px;
left: 450px;
display:block;
}
#slider {
height:0px;
text-align: center;
}
#content {
text-align: center;
}

#smart_thumb_link {
font-size: 10px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight:bold;
text-align: center;
}
#footer {
width: 100%;
margin: 0 auto 0 auto;
padding: 20px 0 20px 0;
clear:both;
text-align: center;
}
#footer p {
padding-top: 5px;
}
#footer span {
color: #404040;
margin: auto;
}
#footer img {
width: 60px;
height: 30px;
border: 1px solid #252525; 
margin: 15px auto 10px auto;
}
#footer h2 {
font-size: 16px;
}

.thumbs_grid { 
position: relative;
display: table;
padding: 0 0 0 0;
left: -1px;  /* musi byt v Safari je to o 1px doprava  - zrejme 1px border okolo img*/
line-height: 0;
width: -webkit-calc(100% + 1px);  /* a ted musime sirku o ten 1px zvetsit */
width: -moz-calc(100% + 1px);
width: calc(100% + 1px);
 }
@-moz-document url-prefix() {
  .thumbs_grid {
    width: 100%;    /* ve Firefoxu neni potreba zvetsit sirku o 1px */
  }
}
 
div.thumbs_grid { line-height: 0; }

.thumbs_grid div, .galleries_list_grid div { 
display: table; 
float: left; 
margin: 0px;  /* kdyz dame margin 10px musime pak u vsech calc odecitat -10px */
width: 10%; 
width: -webkit-calc(10% - 0px);
width: -moz-calc(10% - 0px);
width: calc(10% - 0px);
}

.vgalleries_list_grid div {
display: table; 
float: left; 
margin: 0px;  /* kdyz dame margin 10px musime pak u vsech calc odecitat -10px */
width: 10%; 
width: -webkit-calc(14.2857142% - 0px);
width: -moz-calc(14.2857142% - 0px);
width: calc(14.2857142% - 0px);
}

.thumb img, .galleries_list_item img {
display: block; /* display block is important to get rid of additional space between table rows with img in td */
width: 100%;
height: 100%;
margin-top: -1px;
border: 1px solid #252525; }


.thumb a:hover img, .galleries_list_item a:hover img  {
border: 1px solid #555555;
opacity: 1;
webkit-animation: flash 3s;
animation: flash 3s;
}

.galleries_list_grid {
display: table;
padding: 0 0 0 0;
margin: 0 0 5px 0;
position: relative;
left: -1px;  /* musi byt v Safari je to o 1px doprava */
min-width: 100%; 
}
.vgalleries_list_grid {
display: table;
padding: 0 0 0 0;
margin: 0 0 5px 0;
position: relative;
left: -1px;  /* musi byt v Safari je to o 1px doprava */
min-width: 100%; 
}

.galleries_list_item i {
font-size: 100px;
line-height: 0;
display: block;
padding: 0;
margin: -27% 0 27% 0;
opacity: 0.4;
}
.galleries_list_item a:hover i { color: white; opacity: 0.6; }

.galleries_list_item span { 
display: block;
width: 100%;
color: #999999
}
.galleries_list_item a:hover span { 
color: #cccccc;
}

#galleries_list_item_name { 
width: 100%; /* POUZITO VE VYPISU SETU V ADRESARI NAPR. SEKCE PHOTOS */
margin-bottom: 0px;
padding: 10px 0 10px 0; 
background: #151515; 
border-right: 1px solid #252525;
border-bottom: 1px solid #252525;
border-left: 1px solid #252525;
}

a:hover #galleries_list_item_name {
    background: #222222; 
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
    border-left: 1px solid #333333;
    color: #ffffff;
    }


@media all and (max-width:1920px) { 
.thumbs_grid div, .galleries_list_grid div { 
margin: 0px;  /* kdyz dame margin 10px musime pak u vsech calc odecitat -10px */
width: 10%; 
width: -webkit-calc(14.2857142% - 0px);
width: -moz-calc(14.2857142% - 0px);
width: calc(14.2857142% - 0px);
}
.vgalleries_list_grid div{ 
margin: 0px; /* kdyz dame margin 10px musime pak u vsech calc odecitat -10px */
width: 10%; 
width: -webkit-calc(20% - 0px);
width: -moz-calc(20% - 0px);
width: calc(20% - 0px);
}
}

@media all and (max-width:1280px) { 
.thumbs_grid div, .galleries_list_grid div { 
margin: 0px; /* kdyz dame margin 10px musime pak u vsech calc odecitat -10px */
width: 10%; 
width: -webkit-calc(20% - 0px);
width: -moz-calc(20% - 0px);
width: calc(20% - 0px);
}
.vgalleries_list_grid div{ 
margin: 0px; /* kdyz dame margin 10px musime pak u vsech calc odecitat -10px */
width: 33.33333333333333%; 
width: -webkit-calc(33.33333333333333% - 0px);
width: -moz-calc(33.33333333333333% - 0px);
width: calc(33.33333333333333% - 0px);
}
}

@media all and (max-width:1150px) { 
#retina_ready_website { display: none; } 
}

#photo_galleries { 
clear: both;
display: block;
padding: 5px 0 5px 0;
}
#photo_galleries.homepagegals {
padding: 25px 0 0 0;
}    

#video_galleries { 
clear: both;
display: block;
padding: 5px 0 5px 0;
}
#video_galleries.homepagevids {
padding: 20px 0 5px 0;
}    

table.st_img_table, table.st_vid_table, table.video_img_table {
border-collapse: separate; /* must be separate in order to have border-spacing working properly*/
border-spacing: 3px;
margin: auto;
text-align: center;
}
table.st_img_table img {
width: 240px;
height: 160px;
border: 1px solid #252525;
display: block; /* important to get rid of additional space between table rows with img in td */
}
div#gallery_list_span {
    padding: 10px 0 10px 0; 
    background: #151515; 
    border-right: 1px solid #252525;
    border-bottom: 1px solid #252525;
    border-left: 1px solid #252525;
    }
a:hover div#gallery_list_span {
    background: #222222; 
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
    border-left: 1px solid #333333;
    color: #ffffff;
    }
table.video_img_table td {
vertical-align: top;
}
table.video_img_table td img {
width: 240px;
height: 160px;
border: 1px solid #252525;
display: block; /* important to get rid of additional space between table rows with img in td */
}
table.video_img_table td a:hover img {
border: 1px solid #555555;
opacity: 1;
webkit-animation: flash 3s;
animation: flash 3s;
}
#videotd {
width: 815px;
height: 524px;
background-color: #101010; 
border: 1px solid #252525;
 /* important to get rid of additional space between table rows with img in td */
}
#videotd img {
border: none;
width:0px;  /* these 3 lines removes removes JW logo completely including border */
height: 0px;
}
#videotd h1 {
margin-top: 20px;
}
#video {
border-bottom: 1px solid #252525;
}
table.st_vid_table img {
width: 405px;
height: 228px;
border: 1px solid #252525;
display: block; /* important to get rid of additional space between table rows with img in td */
}
table.st_vid_table #video_img_table_play_button {
position: relative;
top: -230px; 
margin-bottom: -230px;
left: 0px; 
margin-right: 0px;
} 
table.st_vid_table a:hover #video_img_table_play_button {
opacity: 1;
webkit-animation: flash 5s;
animation: flash 5s;
}    
table.st_img_table a:hover img, table.st_vid_table a:hover img, #footer a:hover img {
border: 1px solid #555555;
opacity: 1;
webkit-animation: flash 3s;
animation: flash 3s;
}
@-webkit-keyframes flash {
	0% {
		opacity: .8;
	}
	100% {
		opacity: 1;
	}
}
@keyframes flash {
	0% {
		opacity: .8;
	}
	100% {
		opacity: 1;
	}
}   
.separator {
height: 3px;
width: 1227px;
margin: 5px auto 5px auto;
clear: both !important;
background-image: url(/gfx/separator.png);
}

/* START OF GALLERY CSS */
#gallery_wrap {
width: 1232px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
overflow:hidden;  /* important for the wrapper to follow inside divs height*/
}
#thumbnails {
float: left;
}
table.img_table {
border-collapse: separate; /* must be separate in order to have border-spacing working properly*/
border-spacing: 3px;
margin: auto;
}
table.img_table td {
background-color: #101010;
border: 1px solid #252525;
vertical-align: middle;
}
table.img_table img {
width: 200px;
min-height: 100px;
border: 1px solid #252525;
display: block; /* important to get rid of additional space between table rows with img in td */
}
table.img_table a:hover img {
border: 1px solid #555555;
opacity: 1;
webkit-animation: flash 3s;
animation: flash 3s;
}
table.link_table {
border-collapse: separate; /* must be separate in order to have border-spacing working properly*/
border-spacing: 3px;
margin: auto;
}
#photo {
text-align: center;
}
#photo div {
display: block;
width: 100%;
}
.photo_paginator {
width: 100%;
}
.photo_paginator ul {
text-align: center;
padding: 0;
margin: 15px 0;
}
.photo_paginator li {
padding: 0 40px;
display: inline;
margin: 6px 0;
}
#photo img {
min-width: 500px;
max-width: 100%;
height: 75vh;
object-fit: contain; /* the replaced content is scaled to maintain its aspect ratio while fitting within the element's content box */
margin: auto;
display:block;
filter:
  /* BORDER NELZE POUZIT S object-fit: contain, pouzijeme FILTER
     Each shadow becomes part of the image and the next filter
     adds a shadow beneath it, so we have to be very careful. */
    drop-shadow(0 -1px 0 #222222)
    drop-shadow(0 1px 0 #222222)
    drop-shadow(-1px 0 0 #222222)
    drop-shadow(1px 0 0 #222222);
}
#photo a:hover img {
filter:
  /* BORDER NELZE POUZIT S object-fit: contain, pouzijeme FILTER
     Each shadow becomes part of the image and the next filter
     adds a shadow beneath it, so we have to be very careful. */
    drop-shadow(0 -1px 0 #555555)
    drop-shadow(0 1px 0 #555555)
    drop-shadow(-1px 0 0 #555555)
    drop-shadow(1px 0 0 #555555);
}
/* Fading animation for image gallery */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 2.0s;
  animation-name: fade;
  animation-duration: 2.0s;
}

@-webkit-keyframes fade {
  from {opacity: 0.4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: 0.4} 
  to {opacity: 1}
}
#sponsor_web {
float: right;
padding: 4px;
}
#sponsor_web img {
width: 390px;
min-height: 800px;
border: 1px solid #252525;
}
#sponsor_web a:hover img {
border: 1px solid #555555;
}
#sponsors {
margin: auto;
overflow: hidden;
margin-top: 15px;
margin-bottom: 10px;
}
#sponsors h2 {
color: #ffffff;
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}
#sponsors hr.silver {
margin-bottom: 10px;
}
#sponsors ul {
float: left;
width: 208px
}
#sponsors li {
font-size: 13px;
line-height:2.0em;
}

.paginator { display: block; clear: both; }

/* ST PAGINATOR */
.pagination{display:inline-block;padding-left:0;margin:20px 0;border-radius:4px}
.pagination>li{display:inline}
.pagination>li>a,.pagination>li>span{position:relative;float:left;padding:6px 12px;margin-left:-1px;line-height:1.42857143;color:#da0000;text-decoration:none;background-color:#fff;border:1px solid #ddd}
.pagination>li:first-child>a,.pagination>li:first-child>span{margin-left:0;border-top-left-radius:4px;border-bottom-left-radius:4px}
.pagination>li:last-child>a,.pagination>li:last-child>span{border-top-right-radius:4px;border-bottom-right-radius:4px}
.pagination>li>a:focus,.pagination>li>a:hover,.pagination>li>span:focus,.pagination>li>span:hover{z-index:2;color:#6a6a6a;background-color:#eee;border-color:#ddd}
.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover{z-index:3;color:#fff;cursor:default;background-color:#da0000;border-color:#da0000}
.pagination>.disabled>a,.pagination>.disabled>a:focus,.pagination>.disabled>a:hover,.pagination>.disabled>span,.pagination>.disabled>span:focus,.pagination>.disabled>span:hover{color:#777;cursor:not-allowed;background-color:#fff;border-color:#ddd}
.pagination-lg>li>a,.pagination-lg>li>span{padding:10px 16px;font-size:18px;line-height:1.3333333}
.pagination-lg>li:first-child>a,.pagination-lg>li:first-child>span{border-top-left-radius:6px;border-bottom-left-radius:6px}
.pagination-lg>li:last-child>a,.pagination-lg>li:last-child>span{border-top-right-radius:6px;border-bottom-right-radius:6px}
.pagination-sm>li>a,.pagination-sm>li>span{padding:5px 10px;font-size:12px;line-height:1.5}
.pagination-sm>li:first-child>a,.pagination-sm>li:first-child>span{border-top-left-radius:3px;border-bottom-left-radius:3px}
.pagination-sm>li:last-child>a,.pagination-sm>li:last-child>span{border-top-right-radius:3px;border-bottom-right-radius:3px}
.pager{padding-left:0;margin:20px 0;text-align:center;list-style:none}
.pager li{display:inline}
.pager li>a,.pager li>span{display:inline-block;padding:5px 14px;background-color:#fff;border:1px solid #ddd;border-radius:15px}
.pager li>a:focus,.pager li>a:hover{text-decoration:none;background-color:#eee}
.pager .next>a,.pager .next>span{float:right}
.pager .previous>a,.pager .previous>span{float:left}
.pager .disabled>a,.pager .disabled>a:focus,.pager .disabled>a:hover,.pager .disabled>span{color:#777;cursor:not-allowed;background-color:#fff}
/* END ST PAGINATOR */

/*Zajisti ze videojs prehravac nebude u sirokych  obrazovek vychazet dole mimo zorny uhel
.my_video_1-dimensions.vjs-fluid { padding-top: 75vh}*/

/*odebere ikonku pro prepimani audio stop s unknown audio track z video js playeru*/
.vjs-audio-button {
  display: none; }