/* 
    ZieglerSoft (C) 2017
    CSS For ZieglerSoft templates
    Full responsive design

*/

.z-content { max-width: 980px; margin: auto }

.z-rest { overflow: hidden }

.z-cell-row { display: table; width: 100% }

.z-cell { display: table-cell }

.z-cell-top { vertical-align: top }

.z-cell-middle { vertical-align: middle }

.z-cell-bottom { vertical-align: bottom }

.z-hide { display: none }

.z-show-block, .z-show { display: block }

.z-show-inline-block { display: inline-block }

@media (max-width:600px) {
    .z-modal-content { margin: 0 10px; width: auto }

    .z-modal { padding-top: 30px }

    .z-dropdown-hover.z-mobile .z-dropdown-content, .z-dropdown-click.z-mobile .z-dropdown-content { position: relative }

    .z-hide-small { display: none }

    .z-mobile { display: block; width: 100% }

    .z-bar-item.z-mobile, .z-dropdown-hover.z-mobile, .z-dropdown-click.z-mobile { text-align: center }

        .z-dropdown-hover.z-mobile, .z-dropdown-hover.z-mobile .z-btn, .z-dropdown-hover.z-mobile .z-button, .z-dropdown-click.z-mobile, .z-dropdown-click.z-mobile .z-btn, .z-dropdown-click.z-mobile .z-button { width: 100% }
}

@media (max-width:768px) {
    .z-modal-content { width: 500px }

    .z-modal { padding-top: 50px }
}

@media (min-width:993px) {
    .z-modal-content { width: 900px }

    .z-hide-large { display: none }

    .z-sidebar.z-collapse { display: block }
}

@media (max-width:992px) and (min-width:601px) {
    .z-hide-medium { display: none }
}

@media (max-width:992px) {
    .z-sidebar.z-collapse { display: none }

    .z-main { margin-left: 0; margin-right: 0 }
}

.z-top, .z-bottom { position: fixed; width: 100%; z-index: 1 }

.z-top { top: 0 }

.z-bottom { bottom: 0 }

.z-overlay { position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 2 }

.z-display-topleft { position: absolute; left: 0; top: 0 }

.z-display-topright { position: absolute; right: 0; top: 0 }

.z-display-bottomleft { position: absolute; left: 0; bottom: 0 }

.z-display-bottomright { position: absolute; right: 0; bottom: 0 }

.z-display-middle { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%) }

.z-display-left { position: absolute; top: 50%; left: 0%; transform: translate(0%,-50%); -ms-transform: translate(-0%,-50%) }

.z-display-right { position: absolute; top: 50%; right: 0%; transform: translate(0%,-50%); -ms-transform: translate(0%,-50%) }

.z-display-topmiddle { position: absolute; left: 50%; top: 0; transform: translate(-50%,0%); -ms-transform: translate(-50%,0%) }

.z-display-bottommiddle { position: absolute; left: 50%; bottom: 0; transform: translate(-50%,0%); -ms-transform: translate(-50%,0%) }

.z-display-container:hover .z-display-hover { display: block }

.z-display-container:hover span.z-display-hover { display: inline-block }

.z-display-hover { display: none }

.z-display-position { position: absolute }

.z-circle { border-radius: 50% }

.z-round-small { border-radius: 2px }

.z-round, .z-round-medium { border-radius: 4px }

.z-round-l { border-radius: 8px }

.z-round-xl { border-radius: 16px }

.z-round-xxl { border-radius: 32px }

.z-row-padding, .z-row-padding > .z-half, .z-row-padding > .z-third, .z-row-padding > .z-twothird, .z-row-padding > .z-threequarter, .z-row-padding > .z-quarter, .z-row-padding > .z-col { padding: 0 8px }

.z-container, .z-panel { padding: 0.01em 16px }

.z-panel { margin-top: 16px; margin-bottom: 16px }

.z-code, .z-codespan { font-family: Consolas,"courier new"; font-size: 16px }

.z-code { width: auto; background-color: #fff; padding: 8px 12px; border-left: 4px solid #4CAF50; word-wrap: break-word }

.z-codespan { color: crimson; background-color: #f1f1f1; padding-left: 4px; padding-right: 4px; font-size: 110% }

.z-card, .z-card-2 { box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) }

.z-card-4, .z-hover-shadow:hover { box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19) }

.z-spin { animation: z-spin 2s infinite linear }

@keyframes z-spin {
    0% { transform: rotate(0deg) }

    100% { transform: rotate(359deg) }
}

.z-animate-fading { animation: fading 10s infinite }

@keyframes fading {
    0% { opacity: 0 }

    50% { opacity: 1 }

    100% { opacity: 0 }
}

.z-animate-opacity { animation: opac 0.8s }

@keyframes opac {
    from { opacity: 0 }

    to { opacity: 1 }
}

.z-animate-top { position: relative; animation: animatetop 0.4s }

@keyframes animatetop {
    from { top: -300px; opacity: 0 }

    to { top: 0; opacity: 1 }
}

.z-animate-left { position: relative; animation: animateleft 0.4s }

@keyframes animateleft {
    from { left: -300px; opacity: 0 }

    to { left: 0; opacity: 1 }
}

.z-animate-right { position: relative; animation: animateright 0.4s }

@keyframes animateright {
    from { right: -300px; opacity: 0 }

    to { right: 0; opacity: 1 }
}

.z-animate-bottom { position: relative; animation: animatebottom 0.4s }

@keyframes animatebottom {
    from { bottom: -300px; opacity: 0 }

    to { bottom: 0; opacity: 1 }
}

.z-animate-zoom { animation: animatezoom 0.6s }

@keyframes animatezoom {
    from { transform: scale(0) }

    to { transform: scale(1) }
}

.z-animate-input { transition: width 0.4s ease-in-out }

    .z-animate-input:focus { width: 100% }

.z-opacity, .z-hover-opacity:hover { opacity: 0.60 }

.z-opacity-off, .z-hover-opacity-off:hover { opacity: 1 }

.z-opacity-max { opacity: 0.25 }

.z-opacity-min { opacity: 0.75 }

.z-greyscale-max, .z-grayscale-max, .z-hover-greyscale:hover, .z-hover-grayscale:hover { filter: grayscale(100%) }

.z-greyscale, .z-grayscale { filter: grayscale(75%) }

.z-greyscale-min, .z-grayscale-min { filter: grayscale(50%) }

.z-sepia { filter: sepia(75%) }

.z-sepia-max, .z-hover-sepia:hover { filter: sepia(100%) }

.z-sepia-min { filter: sepia(50%) }

.z-tiny { font-size: 10px }

.z-small { font-size: 12px }

.z-medium { font-size: 15px }

.z-large { font-size: 18px }

.z-xlarge { font-size: 24px }

.z-xxlarge { font-size: 36px }

.z-xxxlarge { font-size: 48px }

.z-jumbo { font-size: 64px }

.z-left-align { text-align: left }

.z-right-align { text-align: right }

.z-justify { text-align: justify }

.z-center { text-align: center }

.z-border-0 { border: 0 }

.z-border { border: 1px solid #ccc }

.z-border-top { border-top: 1px solid #ccc }

.z-border-bottom { border-bottom: 1px solid #ccc }

.z-border-left { border-left: 1px solid #ccc }

.z-border-right { border-right: 1px solid #ccc }

.z-topbar { border-top: 6px solid #ccc }

.z-bottombar { border-bottom: 6px solid #ccc }

.z-leftbar { border-left: 6px solid #ccc }

.z-rightbar { border-right: 6px solid #ccc }

.z-section, .z-code { margin-top: 16px; margin-bottom: 16px }

.z-margin { margin: 16px }

.z-margin-top { margin-top: 16px }

.z-margin-bottom { margin-bottom: 16px }

.z-margin-left { margin-left: 16px }

.z-margin-right { margin-right: 16px }

.z-padding-small { padding: 4px 8px }

.z-padding { padding: 8px 16px }

.z-padding-large { padding: 12px 24px }

.z-padding-16 { padding-top: 16px; padding-bottom: 16px }

.z-padding-24 { padding-top: 24px; padding-bottom: 24px }

.z-padding-32 { padding-top: 32px; padding-bottom: 32px }

.z-padding-48 { padding-top: 48px; padding-bottom: 48px }

.z-padding-64 { padding-top: 64px; padding-bottom: 64px }

.z-left { float: left }

.z-right { float: right }

.z-button:hover { color: #000; background-color: #ccc }

.z-transparent, .z-hover-none:hover { background-color: transparent }

.z-hover-none:hover { box-shadow: none }