/*
Theme Name: Zajímavá.cz
Description: Šablona vytvořená na míru.
Author: Talmer
Author URI: http://talmer.cz
Version: 1.0
*/

@media all {
    * {margin: 0; padding: 0;}
    ::selection {background-color: #000; color: #fff;}
    body {padding: 0; margin: 0; font-family: Trebuchet MS, Verdana, Arial, sans-serif; font-size: 16px; color: #222; line-height: 140%;}
    img {max-width: 100%; height: auto; border: none;}
    a {border: none; outline: none; padding-bottom: 0px; text-decoration: underline; color: #d00;}
    a:hover {text-decoration: none;}
    hr {clear: both; visibility: hidden; height: 0; padding: 0; margin: 0; border: 0;}
    table {border-collapse: collapse;}
    h1, h2, h3 {font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif; line-height: 120%; font-weight: 200;}
    h1 {font-size: 250%; margin: 35px 0 20px 0; color: #444;}
    h2 {font-size: 168.75%; margin: 22px 0 12px 0;}
    h2.margin {margin: 10px 0 20px 0;}
    h3 {font-size: 156.25%; margin: 20px 0 10px 0;}

    header {background-color: #bb0000; border-bottom: 1px solid #900;}
    header #motto {color: #fff; font-family: 'Open sans', sans-serif; font-weight: 100;}
    nav {background-color: #c00; border-top: 1px solid #d11;}
    nav ul {list-style: none;}
    nav a {color: #fff; font-family: Verdana; font-weight: bold; text-decoration: none;}
    nav a:hover {text-shadow: 1px 1px #000; color: #fbfbfb;}
    
    article {margin: 5px 0 20px 0; background-color: #fff; border: 1px solid #ddd; border-bottom: 8px solid #c00; box-shadow: 0 0 16px #aaa; line-height: 150%;}
    article li {list-style-image: url("img/odrazka.jpg"); padding-left: 10px; margin: 10px 0px 10px 20px;}
    
    footer {padding-top: 30px; background-color: #000; background-image: url("img/paticka.png"); background-repeat: repeat-x; border-top: 2px solid #444; font-family: Verdana, Trebuchet MS, Tahoma, Arial, sans-serif; color: #fff; font-size: 80%;
    }
    footer p {text-align: center; padding: 15px 0; color: #666;}
    footer a {color: #666;}

    .box50 .vcard {background-color: #a11; border: 1px solid #d00; margin: 0 10%; text-shadow: 1px 1px #000; line-height: 160%; padding: 10px 20px;}
    .box50 .vcard .org {font-size: 120%; font-weight: bold; padding-top: 5px;}
    .pagemap {list-style: none; margin: 10px 0 0 8%;}
    .pagemap a {color: white; text-decoration: none; text-shadow: 1px 1px #555; padding: 6px; border-top: 1px solid #222;}
    .pagemap a:hover {background-color: #b00; text-shadow: 2px 2px #000; border-bottom: 4px solid #800;}
    .pagemap li {float: left; margin-bottom: 15px; width: 50%;}
    
    .grey {background-color: #fafafa;}
    .center {text-align: center;}
    .margin {margin: 20px 0;}
    .contact, #submit {box-shadow:inset 0px 1px 0px 0px #f29c93; background:linear-gradient(to bottom, #f10 5%, #c00 100%); background-color:#f10; border-radius: 6px; border: 1px solid #d00; cursor:pointer; color: #fff; font-weight: bold; padding: 8px 28px; text-decoration: none; text-shadow: 0px 1px 0px #b23e35; letter-spacing: 0.03em; margin: 20px 0; display: inline-block; font-size: 120%;}
    .contact:hover, #submit:hover {background:linear-gradient(to bottom, #ce0100 5%, #fe1a00 100%); background-color:#ce0100;}
    #submit {font-size: 100%;}
          
    .gallery {width: 310px; float: right; display: block; margin: 0; padding: 0;}
    .gallery img.big {width: 300px;}
    .gallery img {float: left; box-shadow: 0 0 5px #000; margin-bottom: 10px; margin-left: 10px; border-radius: 2px; width: 145px;}
    .gallery .more {font-size: 100%; text-align: center; display: block; padding: 10px;}
    .gallery .more:after {content: ' >';}
    .page {width: 750px; float: left; text-align: justify;}
    .page p {margin: 10px 0;}
    
    .photo {box-shadow: 0 0 5px #000; margin: 10px 0;}
    .photogallery {margin: 20px 0; padding: 30px 20px; text-align: center; border: 1px dashed #ccc; display: flex; justify-content: flex-start; flex-wrap: wrap;}
    .photogallery a {width: 16.6666%; display: block; box-sizing: border-box; padding: 0 5px;}
    
    
    input, select, textarea {border: 1px solid #ccc; outline: none; padding: 5px; transition: 1s; border-radius: 3px;}
    input:focus, select:focus, textarea:focus {border: 1px solid #999;}
    textarea {width: 98%; max-width: 98%;}
    form div, form p {clear: both; display: block; padding: 10px 0;}
    input[type=submit] {float: left; padding: 6px 24px; font-size: 120%; margin-top: 10px;}
    iframe {width: 100%; border: none; height: 400px;}
    
    .comment-reply-title, .comment-notes,  .comment-form-url {display: none;}
    .comment-list .photo {margin: 0;}
    .comment {list-style: none; border: 1px solid #ccc; padding: 20px; border-radius: 5px; margin: 10px 0 0 0; background-color: #fafafa; box-sizing: border-box; -webkit-box-sizing: border-box; display: inline-block; width: 100%;}
    .comment p {clear: both; padding-top: 10px;}
    .comment-author {float: left;}
    .comment-meta {float: right;}
    #next {float: left; padding: 20px;}
    #previous {float: right; padding: 20px;}

}

@media (max-width: 767px) { /*mobiles only 320, 480, 568, 640*/
    .content {width: 98%; margin: 0 auto;}
    
    .box25, .box33, .box50, .box67 {width: 100%; margin: 10px 0;}
    .box25 + .box25, .box50 + .box50, .box33 + .box33, .box33 + .box67, .box67 + .box33 {padding-left: 0%;}
    .box50 .box50 {float: left; width: 48.3333%; margin: 10px 0;}
    .box50 .box50 + .box50 .box50 {padding-left: 3.3333%;}
    
    .home {padding: 10px 3.3333%; width: 93.3333%; margin: 0;}
    .home + .home {padding-left: 3.3333%; border-top: 1px dashed #ccc;}
    
    header #logo {display: block; text-align: center;}
    header #motto {display: block; font-size: 100%; text-align: center; padding: 10px 0;}
    
    .bx-wrapper {position: relative; margin: 10px 0 50px 0; padding: 0; width: 100%;}
    
    article {padding: 5px 10px;}
    
     .comment-list {-moz-column-gap: 10px; -webkit-column-gap: 10px; column-gap: 10px; -moz-column-count: 1; -webkit-column-count: 1; column-count: 1;}
}

@media (max-width: 1250px) and (min-width: 768px) { /*tablets only 768, 800, 960, 1024, 1138, 1152*/
    .content {width: 98%; margin: 0 auto;}
    
    header > div {height: 150px; display: table;}
    header #logo {display: table-cell; height: 150px; vertical-align: middle;}
    header #motto {display: table-cell; vertical-align: middle; font-size: 120%; text-align: right; line-height: 150%;}
    
    .comment-list {-moz-column-gap: 10px; -webkit-column-gap: 10px; column-gap: 10px; -moz-column-count: 2; -webkit-column-count: 2; column-count: 2;}
}

@media (max-width: 1250px) and (min-width: 768px) and (orientation:portrait) { /*tablets with orientation portrait*/
    header #motto {font-size: 90%;}
}

@media (max-width: 1250px) { /*tablets and mobiles*/
    nav {padding-left: 0;}
    nav #mobilemenu {display: block; padding: 5px; cursor: pointer; color: #fff; font-weight: bold; text-align: center; border-bottom: 1px solid #d11;}
    
    nav ul {display: none; margin: 0; text-align: left;}
    nav ul > li {display: block; list-style: none; letter-spacing: 0.02em; padding: 3px 20px 3px 0; border-bottom: 1px solid #d11; clear: both;}
    nav ul > li.withsubmenu:after {content: '+'; padding: 0 7px; border: 1px solid #ccc; border-radius: 10px; display: inline; color: #fff;}
    nav ul > li.opensubmenu:after {content: '-'; padding: 0 7px; border: 1px solid #ccc; border-radius: 10px; display: inline; color: #fff;}
    nav ul > li > a {display: inline;}
    nav ul > li > ul {display: none; margin-left: 20px;}
    
    .gallery {width: 100%;}
    .gallery img {margin: 2.5%; width: 45%;}
    .gallery img.big {width: 95%;}
    .gallery .more {display: block;}
    .page {width: 100%; text-align: left;}
}

@media (min-width: 768px) { /*tablets and desktops*/
    .box25 {float: left; width: 22.5%; margin: 10px 0;}
    .box33 {float: left; width: 30%; margin: 10px 0;}
    .box50 {float: left; width: 48.3333%; margin: 10px 0;}
    .box67 {float: left; width: 65%; margin: 10px 0;}
    .box25 + .box25, .box50 + .box50 {padding-left: 3.3333%;}
    .box33 + .box33, .box33 + .box67, .box67 + .box33 {padding-left: 5%;}
    .box33.home  {padding: 0px 2%; width: 33.3333%; min-height: 300px; margin: 15px 0; box-sizing: border-box;}
    .box50.home {padding: 0px 2%; width: 50%; min-height: 300px; margin: 15px 0; box-sizing: border-box;}
    .box33.home + .box33.home {border-left: 1px dashed #ccc;}
    .box50.home + .box50.home {border-left: 1px dashed #ccc;}
    .flex {display: flex;}
    
    .bx-wrapper {position: relative; margin: 10px 0 50px 3.3%; padding: 0; width: 700px;}
    
    article {padding: 20px 30px;}
    
    label {float: left;}
    input, select, textarea {float: right;}
    form {width: 50%; margin: 50px 25%;}
    #form {width: 50%; margin: 100px 25% 25px 25%;}
}


@media (min-width: 1251px) { /*desktops only 1280, 1366, 1440, 1600, 1680, 1920*/
    .content {width: 1160px; margin: 0 auto;}
    #mobilemenu {display: none;}
    
    header > div {height: 150px; display: table;}
    header #logo {display: table-cell; height: 150px; vertical-align: middle;}
    header #motto {display: table-cell; vertical-align: middle; font-size: 150%; margin-right: 10px; text-align: right;}
    
    nav li {float: left;}
    nav a {padding: 8px 10px; margin: 0 40px 0 0; display: block;}
    nav ul > li > ul {display: none; position: absolute; z-index: 2001; margin: 0; list-style: none; background-color: #bb0000; text-align: left; padding: 10px 0;}
    nav ul > li:hover > ul {display: block;}
    nav ul > li > ul > li {transition: all 0.5s; float: none; display: block;}
    nav ul > li > ul > li:hover {background-color: #d00;}
    nav ul > li > ul > li > a {color: #fff; padding: 10px 20px;} 
    
    .comment-list {-moz-column-gap: 10px; -webkit-column-gap: 10px; column-gap: 10px; -moz-column-count: 3; -webkit-column-count: 3; column-count: 3;}
}

/*LIGHTBOX*/
body:after {content: url(img/lightbox/close.png) url(img/lightbox/loading.gif) url(img/lightbox/prev.png) url(img/lightbox/next.png); display: none;}
.lightboxOverlay {position: absolute; top: 0; left: 0; z-index: 9999; background-color: black; opacity: 0.8; display: none;}
.lightbox {position: absolute; left: 0; width: 100%; z-index: 10000; text-align: center; line-height: 0; font-weight: normal;}
.lightbox .lb-image {display: block; height: auto; max-width: inherit; border-radius: 3px;}
.lightbox a img {border: none;}
.lb-outerContainer {position: relative; background-color: white; *zoom: 1; width: 250px; height: 250px; margin: 0 auto; border-radius: 4px;}
.lb-outerContainer:after {content: ""; display: table; clear: both;}
.lb-container {padding: 4px;}
.lb-loader {position: absolute; top: 43%; left: 0; height: 25%; width: 100%; text-align: center; line-height: 0;}
.lb-cancel {display: block; width: 32px; height: 32px; margin: 0 auto; background: url(img/lightbox/loading.gif) no-repeat;}
.lb-nav {position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10;}
.lb-container > .nav {left: 0;}
.lb-nav a {outline: none; background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');}
.lb-prev, .lb-next {height: 100%; cursor: pointer; display: block;}
.lb-nav a.lb-prev {width: 34%; left: 0; float: left; background: url(img/lightbox/prev.png) left 48% no-repeat; opacity: 0; transition: opacity 0.6s;}
.lb-nav a.lb-prev:hover {opacity: 1;}
.lb-nav a.lb-next {width: 64%; right: 0; float: right; background: url(img/lightbox/next.png) right 48% no-repeat; opacity: 0; transition: opacity 0.6s;}
.lb-nav a.lb-next:hover {opacity: 1;}
.lb-dataContainer {margin: 0 auto; padding-top: 5px; *zoom: 1; width: 100%; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;}
.lb-dataContainer:after {content: ""; display: table; clear: both;}
.lb-data {padding: 0 4px; color: #ccc;}
.lb-data .lb-details {width: 85%; float: left; text-align: left; line-height: 1.1em;}
.lb-data .lb-caption {font-size: 13px; font-weight: bold; line-height: 1em;}
.lb-data .lb-number {display: block; clear: left; padding-bottom: 1em; font-size: 12px; color: #999999;}
.lb-data .lb-close {display: block; float: right; width: 30px; height: 30px; background: url(img/lightbox/close.png) top right no-repeat; text-align: right; outline: none;  opacity: 0.7; transition: opacity 0.2s;}
.lb-data .lb-close:hover {cursor: pointer; opacity: 1;}

/*BX slider*/

.bx-wrapper img {max-width: 100%; display: block;}
.bx-wrapper li {margin: 0; padding: 0;}
.bx-wrapper .bx-viewport {box-shadow: 0 0 15px rgba(0,0,0,0.5); border: 10px solid #fff; left: -10px; background: #fff; transform: translatez(0);}
.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {position: absolute; bottom: -35px; width: 100%;}
.bx-wrapper .bx-loading {min-height: 50px; background: url(img/lightbox/loading.gif) center center no-repeat #fff; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 2000;}
.bx-wrapper .bx-pager {text-align: center;}
.bx-wrapper .bx-pager .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item {display: inline-block;}
.bx-wrapper .bx-pager.bx-default-pager a {background: #666; text-indent: -9999px; display: block; width: 20px; height: 20px; margin: 0 6px; border-radius: 5px;}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active {background: #000;}
.bx-wrapper .bx-prev {left: 0px;}
.bx-wrapper .bx-next {right: 0px;}
.bx-wrapper .bx-controls-direction a {position: absolute; top: 40%; text-decoration: none; z-index: 9999; font-size: 150%; background-color: rgba(238, 0, 0, 0.55); color: #fff; padding: 15px 10px;}
.bx-wrapper .bx-controls-direction a:hover {background-color: rgba(238, 0, 0, 0.95);}
.bx-wrapper .caption {position: absolute; bottom: 0; color: #fff; background-color: rgba(0, 0, 0, 0.7); padding: 10px; width: 100%;}
.bx-wrapper .caption strong {font-weight: bold; display: block; padding-bottom: 5px;}
.bx-wrapper .caption p {font-size: 90%;}