/*
#######################################

General CSS for djpohotovost.cz, 2017 rebuild
based on Foundation 6 custom build - http://foundation.zurb.com
(c) djpohotovost.cz & chemical-one[at]email.cz

#######################################
*/


html, body {}

body {
    background-color: #2a2a2a;
    font-family: 'Arial', sans-serif;
    color: #404040;
}
.backdrop {
    background-color: #ffffff;
    padding-bottom: 3rem
}

/*##### general elements/tweaks #####*/

a {
    color: #404040;
}
a:hover {
    color: #000000;
}
a, .pagination button, input[type=button], input[type=submit] {
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
}


.row {
    max-width: 100%;
}

.pagination a, .pagination button {
    border: 1px solid #d3d3d3;
    color: #666666;
    background-color: #ffffff;
}
.pagination a:hover, .pagination button:hover {
    color: #a52a2a;
    border: 1px solid #a52a2a;
    background-color: #ffffff;
}
.pagination .current {
    color: #a52a2a;
    border: 1px solid #a52a2a;
    background-color: #ffffff;
}
div.clear {
    clear: both;
}
/*##### headings #####*/
h1, h2, h3, h4, h5 {
    font-family: 'Oswald', sans-serif;
    /*font-family: inherit;*/
}
h1.hidden, h2.hidden, h3.hidden, h4.hidden, h5.hidden {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 0;
    opacity: 0.0;
}
h1 {
    font-size: 1.6rem;
}
h2 {
    font-size: 1.6rem;
}
h3 {
    font-size: 1.3rem;
}
/*.homepage h2,*/
.media h2 {
    font-size: 1.5rem;
}
h1.larger {
    font-size: 1.7rem;
}

/*##### Nette flashes #####*/
#snippet--flashes {
    background-color: #ffffff;
}
.flash {
    width: 80%;
    text-align: center;
    margin: 0 auto 2rem;
    font-size: 1.8rem;
    padding: 1rem;
}
.ok {
    color: #60d060;
    border: 2px solid #60d060;
}
.err {
    color: #a1000b;
    border: 2px solid #a1000b;
}

/*##### font palette #####*/
.g40 {color: #404040;}
.g66 {color: #666666;} 
.g7f {color: #7f7f7f;}
.red-8a {color: #8a0000;}


/*##### top-bar menu #####*/

.top-bar {
    min-height: 6.2rem;
    margin: 0 auto;
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;
}
.top-bar, .top-bar ul {
    background-color: #ffffff;
}
.top-bar .my-menu a {
}
.top-bar .my-menu a:hover {
    color: #8a0000;
}
.top-bar .my-menu .is-active > a {
    background: none;
    color: #8a0000;
}
.top-bar .my-menu {
    display: table;
    margin: 0 auto;
    background: #ffffff;
}
.top-bar .my-menu > li {
    display: table-cell;
    position: relative;
}
.top-bar .my-menu > li > a {

    padding: 1.2rem 0.8rem;
    text-transform: uppercase;
    font-size: 0.9rem;
}
.top-bar .my-menu > li > a:hover {
    /*background: #eeeeee;*/
}
.top-bar .my-menu > li > a img {
    margin: 0 0 2px 0.3rem;
}
.top-bar .my-menu li > ul {
    position: absolute;
    top: 120%;
    z-index: 100;
    background-color: #ffffff;
    /*border: 1px solid #eeeeee;*/
    padding: 0.4rem 0 0.2rem;
    box-shadow: 0 4px 8px rgba(80,80,80,0.3);

}
.top-bar .my-menu li > ul > li {
    display: block;
    margin: 0;
}
.top-bar .my-menu li > ul > li:not(:last-child) {
    border-bottom: 1px solid #eeeeee;
}
.top-bar .my-menu li > ul > li > a {
    padding: 0.9rem 1rem;
    background-color: #ffffff;
    font-size: 0.85rem;
}
.top-bar .my-menu li > ul > li > a:hover {
    background-color: #f2f2f2;
    color: #404040;
}
#toggle1 span, #toggle2 span {
    background: url('../images/dropdown.svg') center no-repeat;
    background-size: 12px 12px;
    width: 12px;
    height: 10px;
    display: inline-block;
    margin-left: 4px;
}
#submenu1 {
    min-width: 200px;
}
#submenu2 {
    min-width: 250px;
}



.top-bar .logo {
    display: inline-block;
    width: 16%;
    max-width: 250px;
    position: absolute;
}
.top-bar .phone {
    /*    position: absolute;
        right: 1rem;
        top: -0.2rem;*/
    font-size: 1.3rem;
    float: right;
    margin-top: -3px;
    margin-left: -100%;
}
.top-bar .phone span {
    /*position: absolute;*/
    display: inline-block;

    /*    right: 0;
        text-align: right;*/
    padding-left: 2rem;
    background: url('../images/phone-01.svg') left center no-repeat;
    background-size: 36px 36px;
}




/*##### footer + social sites buttons #####*/

.footer {
    background-color: #2a2a2a;
    color: #ffffff;
    padding: 2.2rem 0;
    font-size: 0.75rem;
/*    margin-top: 4rem;*/
}
.footer h3 {
    text-transform: uppercase;
    font-family: 'Oswald';
    font-size: 1.2rem;
    /*padding-bottom: 0.4rem;*/
}
.hf-pad {
    padding-bottom: 0.3rem;
}
.footer p {
    margin-bottom: 0.8rem;
    line-height: 1.4;
}
/*.footer li {
    line-height: 1.5;
}*/
.footer-middle {
    /*outline: 1px solid lime;*/
    padding: 0 6%;
    
}

.newsletter {
    /*font-size: 0.7rem;*/
}
.newsletter b {
    /*    display: block;
        padding-bottom: 0.2rem;*/
}
.newsletter input[type=email] {
    height: 4rem;
    margin: 0.4rem 0;
}
.newsletter input[type=checkbox] {
    position: relative;
    top: 4px;
}
.newsletter button {
    float: right;
    width: 50%;
    padding: 0.4rem 1rem;
    margin-top: -1rem;
    cursor: pointer;
    color: #ffffff;
    font: 1rem 'Verdana';
    text-transform: uppercase;
    background-color: #d10000;
}

.socials {
    padding-top: 0.5rem;
}
.socials a {
    display: inline-block;
    width: 26px;
    height: 26px;

    margin: 0 1.6rem 0.4rem 0;
    /*background-image: url('../images/socials.png');*/
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center center;
}

.footer a {
    color: #ffffff;
}
.footer a:hover {
    opacity: 0.6;
}
.footer-float {
    float: right;
}
/*ft, tw, ig, yt, sc*/
a.facebook {
    background-image: url('../images/icon_fb.svg');
}
a.twitter {
    background-image: url('../images/icon_tw.svg');
}
a.instagram {
    background-image: url('../images/icon_ig.svg');
}
a.youtube {
    background-image: url('../images/icon_yt.svg');
    background-size: 115%;
}
a.soundcloud {
    background-image: url('../images/icon_sc.svg');
    background-size: 120%;
}

/*##### cookies notification #####*/

#cookies-notification {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.6rem 2rem;
    background-color: #8a0000;
    /*background: linear-gradient(rgba(138,0,0,0) 0%, rgba(138,0,0,1) 5%, rgba(138,0,0,1) 100%);*/
    color: #ffffff;
    text-align: center;
    font-size: 0.85rem;
    z-index: 101;
}
#cookies-notification a {
    color: #ffffff;
    text-decoration: underline;
}
#cookies-agree {
    background-color: #d10000;
    padding: 6px 10px;
    color: #ffffff;
    cursor: pointer;
    margin-left: 0.5rem;
}





/*##### content / general #####*/

.container {
    /*max-width: 1440px;*/
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
}

.withSpace {
    padding-top: 2.5rem;
}
.withSpace a {
    text-decoration: underline;
}

.wrapper {}
.wrapped {
    max-width: 1280px;
    margin: 0 auto;
}


/*##### content / pages #####*/
/*úvod, média, ceník, hodnocení, rezervace, o nás, kontakt*/

/* >>> úvod - homepage <<< */

.banner1 {
    position: relative;
    border-bottom: 2px solid #510e0e;
    margin-bottom: 1rem;
}
.banner1 img {
    width: 100%;
}
.banner1 .b-content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.banner1 .container {
    width: 100%;
    /*padding: 0 5%;*/
    text-align: right;
    color: #ffffff;
    text-transform: uppercase;
}
.banner1 h1 {
    font-size: 3.7rem;
    font-family: 'Oswald';
    line-height: 1.1;
    margin-bottom: 1rem;
    text-shadow: 3px 3px 2px #000000;
}
.banner1 h1 div {
    font-size: 2rem;
}
.banner1 .text {
    font-size: 0.9rem;
    line-height: 1.4;
    text-shadow: 2px 2px 1px #000000;
}

.banner1 a {
    font-family: 'Oswald';
    display: inline-block;
    float: right;
    padding: 0.2rem 1.4rem 0.3rem;
    margin: 2rem 0 0 0;
    text-align: center;
    font-size: 1.5rem;
    color: #ffffff;
    background-color: #d10000;
}
.banner1 a:hover {
    background-color: #750000;
}


/*služby*/

.offers {
    display: flex;
    justify-content: space-between;
    font-family: 'Oswald';
    text-transform: uppercase;
    font-size: 1rem;
    line-height: 1.2;
}
.offer {
    /*    display: table-cell;
        width: 20%; */
}
.offer a {
    display: block;
    float: left;
    padding: 0.5rem 0.5rem 0.5rem 4rem;
    background: url('../images/sipka-01.svg') left center no-repeat;
    background-size: 50px;
}

/*.homepage h2, h2.hp {
    font-size: 1.9rem;
    text-transform: uppercase;
}*/
.homepage p.text-center {

}

a.aboutUsButton {
    display: inline-block;
    padding: 0.5rem 3rem;
    margin: 1rem 0;
    font-size: 1rem;
    color: #ffffff;
    background-color: #d10000;
}
a.aboutUsButton:hover, a.djButton:hover {
    background-color: #750000;
}
a.djButton {
    display: inline-block;
    font-family: 'Oswald';
    padding: 0.2rem 1.4rem 0.3rem;
    /*text-align: center;*/
    font-size: 1.5rem;
    color: #ffffff;
    background-color: #d10000;
    text-transform: uppercase;
}

/*red bg*/
.hpPatternBg, .counters {
    background-color: #750000; 
    background-image: url('../images/features_bg_left.png'), url('../images/features_bg_right.png');
    background-position: left top, right top;
    background-repeat: no-repeat, no-repeat;
    /*background-size: contain, contain;*/
    color: #ffffff;
}
.counters {
    height: 445px;
    max-height: 445px;
    margin-bottom: 1rem;
}

/*homepage counters*/

#counter {
    font-size: 0.9rem;
}
.counted {
    font-size: 2.2rem;
    font-family: 'Oswald';
    text-align: center;
}
.counted span {
    font-size: 5.0rem;
}
#counter .feature {
    font-size: 1.3rem;
    text-transform: uppercase;
    text-align: center;
}
/*#counter p {
    font-size: 0.9rem;
    padding: 1rem 1.4rem;
}*/
#counter ul {
    padding: 1.5rem 1rem 0;
    font-size: 0.9rem;
}

/*homepage hodnocení slick*/

.refText {
    font-size: 0.8rem;
}
.refName {
    color: #750000;
    font-size: 0.8rem;
    padding-top: 0.7rem;
}

.aboutUs {
    padding: 2rem 0;
    font-size: 0.9rem;
}
.aboutUs h2 {
    font-size: 1.4rem;
}



.mobileIntro {
    padding: 2rem 0 0rem;
}
.mobileIntro h1 {
    font-size: 1.4rem;
} 
.mobileIntro p {
    font-size: 0.80rem;
    padding: 0.8rem 0;
}
.mobileIntro a {
    display: block;
    width: 70%;
    margin: 0 auto;
    padding: 0.8rem 1rem;
    text-align: center;
    font-size: 1.4rem;
    color: #a00000;
    border: 3px solid #a00000;
}

/* >>> média <<< */

.videos iframe {
    width: 100%;
}

/* >>> ceník <<< */

.cenik {
    /*    display: -webkit-flex;
        display: flex;
        -webkit-align-items: flex-end;
        align-items: stretch;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;*/
}

.cenik .variant {
    padding: 0 3%;
}
.cenik .variant div {
    text-align: center;
}
.cenik .variant .name {
    position: relative;
}
.cenik .variant .name, .cenik .variant .price {
    background-color: #1f1f1f;
    color: #a0a0a0;
}
.cenik .variant .image, .cenik .variant .desc {
    color: #5d5d5d;
    background-color: #e0e0e0;
}
.cenik .variant .name {
    padding: 1.4rem 0.5rem;
    text-transform: uppercase;
    font-size: 1.4rem;
}
.cenik .variant .name img {
    position: absolute;
    top: -13px;
    left: -13px;
}
.cenik .variant .image {
    padding: 0 0rem;
}
.cenik .variant .image img {
    width: 80%;
}
.cenik .variant .desc {
    padding: 1rem 0.5rem 1rem;
    line-height: 1.6;
}
.cenik .variant .desc div {
    color: #404040;
    padding-top: 0.8rem;
    min-height: 115px;
}
.cenik .variant .price {
    padding: 1.0rem 0.5rem;
    font-size: 1.5rem;
    margin-bottom: 3rem;
    line-height: 1.0;
}
.cenik .variant .price small {
    color: #666666;
    font-size: 0.8rem;
}
.partyImg {
    opacity: 0.6;
}
.brands img {
    margin: 0 0.5rem 0.5rem;
}

/* >>> hodnocení (applies also to homepage's #hpRefs) <<< */

/*.hodnoceni, #hpRefs {
    color: #404040;
}*/

.refImg {
    max-width: 150px;
    max-height: 150px;
    position: relative;
    /*float: left;*/

    /*overflow: hidden;*/
}
#hpRefs .refImg {
    margin: 0 1.5rem 1rem 0;
    float: left;
    width: 100px;
    height: 100px;
}

.hodnoceni .refImg img, img.grayscale {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
    filter: gray;
    -webkit-filter: grayscale(1);
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms; 
}
.refImg img, img.round {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
/*#hpRefs:hover .refImg img ,*/ .hodnoceni:hover .refImg img {
    filter: grayscale(0%);
    filter: none;
    -webkit-filter: grayscale(0);
}


.hodnoceni {
    padding: 1rem 0;
    margin-bottom: 1.8rem;
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
    border: 2px solid #ffffff;
    position: relative;
}
.hodnoceni:hover {
    border-color: #eeeeee;
}
.hodnoceni .columns {
    padding: 0;
}
.hodnoceni .medium-3 .refImg {
    margin: 0 auto;
}
.hodnoceni .medium-9 {
    font-size: 0.95rem;
    padding: 0 1rem;
    text-align: justify;
}
.hodnoceni .medium-9 h2 {
    font-size: 1.25rem;
    text-transform: uppercase;
    padding-bottom: 0.15rem;
}
.hodnoceni .medium-9 small {
    font-weight: bold;
}

/* >>> rezervace <<< */

.rezervace p.text-center {
    font-size: 1.4rem;
    color: #666666;
}
.rezervace .form-main label {
    display: inline-block;
    color: #666666;
    /*float: right;*/
    font-size: 1.0rem;
    padding-top: 0.1rem;
}
.rezervace .label-float label {
    float: right;
}

.rezervace .required {
    color: #a52a2a;
}
.rezervace input[type=text], .rezervace input[type=number], .rezervace input[type=email], .rezervace select {
    display: inline-block;
    width: auto;
}
.rezervace input[type=number] {
    /*padding-right: 1.5rem;*/
}
.rezervace textarea {
    width: 80%;
    min-height: 12rem;
}
.rezervace .namesize input {
    width: 60%;
}
.rezervace .fullsize input {
    width: 80%;
}
.rezervace input[type=button], .rezervace input[type=submit] {
    height: 2.4375rem;
    margin: 0 0 1rem;
    padding: 0.5rem 1rem;
    border: 1px solid #cacaca;
    font-size: 1rem;
    font-family: inherit;
    /*cursor: pointer;*/
}
.rezervace [type=checkbox] {
    margin-bottom: 0;
    position: relative;
    top: 2px;
}

.rezervace input[type=button]:not([disabled]), .rezervace input[type=submit]:not([disabled]) {
    cursor: pointer;
}
.rezervace input[type=submit]:not([disabled]):hover, .rezervace input[type=button]:hover {
    border-color: #666666;
}

/* >>> o nás <<< */

/*.about {
    font-size: 1.1rem;
}*/
.features .columns {
    padding: 0;
    text-align: center;
    position: relative;
    font-size: 0.9rem;
    display: table-cell;
}
.features .columns img {
    margin: 1.5rem 0;
}
.features h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem
}
.features .t {
    padding: 0 1rem;
}
a.nehemia {
    display: inline-block;
    color: #666666;
}
a.nehemia:hover {
    color: #404040;
}
.nehemiaHeading {
    font-size: 3.6rem;
}
.nehemiaLogo {
    max-width: 400px;
    width: 80%;
    margin: 1rem;
}
.nehemiaDonation {
    font-size: 1.1rem;

}

/* >>> náš tým <<< */


.tym .column-block img {
    margin-bottom: 1.2rem;
    max-width: 150px;
}
.tym .column-block img.bigger {
    max-width: 300px;
}
.tym .column-block div.role {
    font-size: 0.9rem;
    padding: 0.4rem 0 0.5rem;
}
.tym .column-block div.contact {
    font-size: 0.8rem;
    margin-bottom: 1rem;
}
/*img.grayscale filter set in "hodnocení"*/
.tym .column-block:hover img, .mapBox .pointer:hover img {
    filter: grayscale(0%);
    filter: none;
    -webkit-filter: grayscale(0);
}
/*.kontakt .person h2 {
    font-size: 1.1rem;
    margin-bottom: 0.1rem;
    font-weight: bold;
}
.kontakt .person .tiny {
    padding: 0.5rem 0;
    font-size: 0.8rem;
}*/

/*SVG map*/
.svgMap {
    width: 70%;
    min-height: 260px;
    max-width: 400px;
    margin: 0 auto;
}
.svgMap a {
    text-decoration: none;
}
.hover_group:hover {
    opacity:1;
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
}
#projectsvg { 
    position: relative;
    width: 94%; 
    margin: 0 auto;
    max-width: 380px;
    vertical-align: middle; 
    overflow: hidden; 
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
}
#projectsvg svg/*, .svgBox svg*/ { 
    display: inline-block;
}

#projectsvg:hover {
    max-width: 400px;
    width: 100%;
}

.kontakt p {
    /*font-size: 0.9rem;*/
    line-height: 1.8;
}
.kontakt p span {
    color: #a52a2a;
}
.kontakt p img {
    width: 50%;
    margin-bottom: 2rem;
}

/* >>> admin <<< */

.admin textarea {
    min-height: 6rem;
}

.adminBox {
    display: table-cell;
    vertical-align: middle;
    position: fixed;
    bottom: 0;
    left: 0;
    max-width: 500px;
    width: 25%;
    min-height: 6.0rem;
    background-color: rgba(255,255,255,0.8);
    border: 4px solid #8a0000;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    line-height: 2;
}
.hodnoceni .tools {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #8a0000;
    padding: 0.5rem 1rem;
    opacity: 0.8;

}
.hodnoceni .tools:hover {
    opacity: 1.0;
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
}
.hodnoceni .tools a {
    color: #ffffff;
    text-decoration: none;
}
.hodnoceni .tools a:hover {
    text-decoration: underline;
}

/*
####################################
##### JAVASCRIPT PLUGIN TWEAKS #####
####################################
*/

/*##### SoundManager2 player #####*/

.sm2-bar-ui {
    font-size: 1.2rem;
}
.sm2-bar-ui .sm2-main-controls, .sm2-bar-ui .sm2-playlist-drawer {
    background-color: #5b5b5b;
}
.sm2-bar-ui .sm2-inline-texture {
    background: transparent;
}

/*##### jflickrfeed.js #####*/
/* used in homepage, média */

#photoFeed {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
#photoFeed a { 
    display: block;
    max-height: 150px;
    width: 18.8%;
    margin: 0.6%;
    overflow: hidden;
}
#photoFeed a > img {
    /*width: 100%;*/
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
    filter: gray;
    -webkit-filter: grayscale(1);
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
}
#photoFeed a:hover > img {
    filter: grayscale(0%);
    filter: none;
    -webkit-filter: grayscale(0);
}

/* thx4help
http://thenewcode.com/532/Convert-Images-To-Black-And-White-With-CSS
http://www.cpu20.com/2015/desaturate-pictures-css-grayscale-color-rollover-effect/
*/

/*##### slick #####*/

/* homepage - reference */
#hpRefs {
    padding: 0 5%;
}
#hpRefs div {
    cursor: pointer;
    text-align: justify;
}

/* homepage - partneři */
#linkLoop {
    margin: 3rem 0;
}
#linkLoop a img {
    width: 94%;
    margin: 0 3%;

    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
    filter: gray;
    -webkit-filter: grayscale(1);
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
}

#linkLoop a:hover img {
    filter: grayscale(0%);
    filter: none;
    -webkit-filter: grayscale(0);
}


/* ceník - citáty */
#quoteLoop {
    /*margin-top: -6rem;*/
}
#quoteLoop div {
    text-align: center;
    font-size: 1.6rem;
    width: 80%;
    margin: 0 auto;
}

/*
#######################################
##### FOUNDATION TOP_BAR FOUC FIX #####
#######################################
*/

.no-js .top-bar {
    display: none;
}

@media screen and (min-width: 40em) {
    .no-js .top-bar {
        display: block;
    }

    .no-js .title-bar {
        display: none;
    }
}