/* roboto-condensed-regular - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/roboto-condensed-v25-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('./fonts/roboto-condensed-v25-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/roboto-condensed-v25-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/roboto-condensed-v25-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('./fonts/roboto-condensed-v25-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/roboto-condensed-v25-latin-regular.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

body { font-family: 'Roboto Condensed', sans-serif; }

/* Hide scrollbar for Chrome, Safari and Opera */

body::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
    width: 0px;
}

.imgscrollingwrapper {
    position: relative;
    background: transparent;
}

.hide-scrollbar {
    overflow: hidden !important;
    -ms-overflow-style: none; /* IE 11 */
    overflow-y: hidden;
    overflow-x: auto;
    
}

/* Hide scrollbar for IE and Edge */

body { 
    -ms-overflow-style: none; 
}


.login { margin-top: 120px; }

.login-modal { margin: 20px; }

.blank-top {
    width: 100%;
    background: white;
    height: 50px;
}

/* Set padding to keep content from hitting the edges */

#main-content {
    margin-top: 158px;
    padding-left: 44px;
    padding-right: 44px;
    min-height: 85vh; /*footer should not "stick" to the content""*/
    margin-bottom: 20px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/

.dl-horizontal dt { white-space: normal; }

/* Set width on the form input elements since they're 100% wide by default */

input,
select,
textarea { max-width: 280px; }

@media (min-width: 1800px) {
    .container { max-width: 1700px; }
}

.no-bold { font-weight: inherit !important; }

.smaller { font-size: 75%; }

.cursor-pointer { cursor: pointer; }

/* autocomplete*/

.autocomplete { position: relative; }

.autocomplete-results {
    padding: 0;
    margin: 0;
    border: 1px solid #eeeeee;
    height: 120px;
    overflow: auto;
    width: 100%;
}

.autocomplete-result {
    list-style: none;
    text-align: left;
    padding: 4px 2px;
    cursor: pointer;
}

.autocomplete-result.is-active,
.autocomplete-result:hover {
    background-color: #4AAE9B;
    color: white;
}

/* autocomplete end*/



.sliteritem {
    width: auto;
    height: 450px;
}

.img-responsive {
    max-width: 100%;
    object-fit: cover;
}



    /*Imagebox*/
    .flex-image-list {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    cursor: pointer;
}

.flex-image-list::after {
    content: '';
    flex-grow: 999999999;
}

.image-box {
    margin: 2px;
    position: relative;
}

.image-box > i { display: block; }

.image-box > img {
    position: absolute;
    top: 0;
    width: 100%;
    vertical-align: bottom;
}

.image-box > .desc {
    background-color: rgba(0, 0, 0, 0.6);
    bottom: 0px;
    color: white;
    left: 0px;
    padding: 10px 15px;
    position: absolute;
    transition: 0.5s opacity;
    text-align: center;
    width: 100%;
    font-size: 10px;
    opacity: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.image-box > .teasertitle {
    background-color: rgba(0, 0, 0, 0.6);
    bottom: 0px;
    color: white;
    left: 0px;
    padding: 10px 15px;
    position: absolute;
    transition: 0.5s opacity;
    text-align: left;
    width: 100%;
    height: 55px;
    font-size: 12px;
    opacity: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.image-box > .teasertitlesingle {
    background-color: rgba(0, 0, 0, 0.6);
    bottom: 0px;
    color: white;
    left: 0px;
    padding: 10px 15px;
    position: absolute;
    transition: 0.5s opacity;
    text-align: left;
    width: 100%;
    height: 35px;
    font-size: 12px;
    opacity: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.image-box > .event-number-images {
    top: 134px;
    right: 10px;
    color: white;
    padding: 4px 5px;
    position: absolute;
    opacity: 0;
    display: flex;
    justify-content: center;
    z-index: 9999;
    font-size: 12px;
    }
svg {
    color: white !important;
}
.image-box:hover > .desc {
    opacity: 1;
}


.image-box:hover > img { opacity: 0.7; }
.image-box:hover > .teasertitle { opacity: 1; }
.image-box:hover > .teasertitlesingle { opacity: 1; }
.image-box:hover > .event-number-images { opacity: 1; }

/*.imgscroller .imagebox > img {
        background-color: red;
        top: 0;
        height: 185px;
        width: auto;
        vertical-align: bottom;
    }*/

.imgscroller {
    display: flex;
    overflow-x: auto;
}

.imgscroller img {
    height: 185px;
    width: auto;
    position: unset;
}

.imgscroller::-webkit-scrollbar {
    display: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    width: 1px;
    height: 1px;
        
}



.scleft {
    position: absolute;
    top: 80px;
    left: 0;
    margin-left: 12px;
    z-index: 100;
}

.scright {
    position: absolute;
    top: 80px;
    right: 0;
    margin-right: 12px;
    z-index: 100;
}


.arrowright {
    border-right: 5px solid;
    border-bottom: 5px solid;
    height: 15px;
    width: 15px;
    transform: rotate(-45deg);
    color: white;
}

.arrowleft {
    border-right: 5px solid;
    border-bottom: 5px solid;
    height: 15px;
    width: 15px;
    transform: rotate(135deg);
    color: white;
}






/*image box polaroid*/

.imagebox-polaroid {
    list-style: none;
    display: inline-block;
    width: 273px;
    height: 260px;
    margin: 0px 3px 3px 0px;
    padding: 16px;
    text-align: center;
    position: relative;
}

.hover-detail {
    position: absolute;
    z-index: 1000;
    vertical-align: top;
    min-height: 200px;
    width: 273px;
    box-shadow: 2px 2px darkgray;
    border: 1px solid silver;
    padding: 10px 10px 0 10px;
    overflow: hidden;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 11;
    -webkit-box-orient: vertical;
    background: white;
    visibility: hidden;
    animation: fadein 5s;
}

.hover-detail > span { font-weight: bold; }

.imagebox-polaroid-frame {
    width: 228px;
    height: 200px;
    white-space: nowrap;
    text-align: center;
}

.imagebox-polaroid-helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.imagebox-polaroid img {
    max-width: 228px;
    max-height: 200px;
    vertical-align: middle;
}


.imagelist-polaroid-wrapper { padding-left: 0; }

.imagelist-polaroid-title {
    font-size: 0.8rem;
    color: #1d1d1b;
    position: absolute;
    bottom: 16px;
}

/*image galery*/

ul.imagelist {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    align-content: flex-start;
}


img.imagelist { border: 2px; }

.carousel {
    position: relative;
    padding-left: 4px;
}

.text-white-shadow {
    color: white;
    text-shadow: 0 0 6px black;
}

/*hide vue elements befor binding*/

[v-cloak] { display: none }


/*navbar*/

input,
select,
textarea { max-width: 100%; }

.navbar-nav {
    width: 100%;
    height: 100px;
    background: #dadada;
}

.navbar-brand img {
    height: 57px;
    margin-top: 0px;
}

@media (min-width: 992px) {
    .navbar {
        max-height: 150px;
        top: 15px;
    }
}

/*@media (min-width: 1366px) {
    .container { max-width: 1340px; }
}*/

.navbar-inner {
    margin-left: 15px;
    margin-right: 15px; 
    height: 150px;
}

#navbarResponsive > ul > li > a > span.fa {
    font-size: 19px;
    position: absolute;
    top: 3px;
    left: 20px;
}

/* search bar*/

#app-menu {
    background: transparent;
    padding: 32px 0;
    padding-left:30%;
    
}

.search-icon {
    padding-left: 10px;
    padding-top: 12px;
    font-size: 16px !important;
    color: white;
}

#app-search {
    width: 500px;
    border: 0px;
    outline: none;
    
}



#custom-search-input {
    width: 100%;
    height: 100%;
    font-size: 16pt;
    color: #ffffff;
    background: #4d4d4d;
}




.nav-link {
    font-size: 8px !important;
    padding: 0.3em 1rem;
}

.navitem-icon {
    padding-top: 9px;
}

.nav-item a {
    font-size: 10pt !important;
    max-height: 18px;
    line-height: 17px;
    padding-top: 14px;
}

.nav-item a.icon-item {
    position: relative;
    padding-left: 45px !important;
    
}

.nav-item .btn-sm {
    padding: 0.0rem 0.5rem;
    margin-bottom: 2px;
    background-color: #a5a5a6;
    border-color: #a5a5a6;
    color: rgba(0, 0, 0, 0.5);
    
}

.nav-item-ml { 
    margin-left: 30px; 
    
}

.search-query:focus + button { z-index: 3; }

.input-icons i {
    position: absolute;
    z-index: 1000;
}

.icon-input { padding-left: 34px; }



.icon {
    padding-left: 10px;
    padding-top: 6px;
    font-size: 12px !important;
}


/* search bar end*/

/*navbar end*/

/*footer start*/

/* sticky footer*/

.footer {
    width: 100%;
    height: 110px;
    background: #3d4546;
    font-size: 9pt;
    color: #fff9f9;
    padding: 10px;
    text-align: right;
    padding-left: 40px;
    padding-right: 40px;
}

@media only screen and (max-width: 600px) {
    .footer {
        padding-left: 0;
        padding-right: 0;
    }
}

.footer-first { text-align: left; }

.logo-footer {
    max-height: 25px;
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
}



/*footer end*/


/*detail*/

#detail-img {
    position: absolute;
    max-height: 80%;
    max-width: 88%;
    height: auto;
    width: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto auto;
}

div.modal-body-nomargin { padding: 0px !important; }

.col-padded {
    max-height: 90vh;
    background-color: #5a5959;
}

.detail-title {
    color: #706f6f;
    padding-bottom: 0px;
}

@media (min-width: 1200px) {
    .modal-xl { max-width: 1140px; }
}


.detail-navigation {
    display: inline-block;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 2rem;
    height: 3rem;
    opacity: .3;
    background-color: #fff;
    cursor: pointer;
    transition: opacity .2s ease-out;
    font-size: 15pt;
    text-align: center;
}

.detail-navigation > i { margin-top: 50%; }

.detail-navigation:hover { opacity: .7; }

.detail-navigation-back { left: 0; }

.detail-navigation-next { right: 0; }

.detail-body { text-align: left; }

.row-detail {
    min-height: 80vh;
    margin: 0;
}

.detail-description {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 11;
    -webkit-box-orient: vertical;
}

/*detail end*/

/*search result*/

.active-layout { filter: brightness(50%); }

.inactive-layout { cursor: pointer; }

.ml-9 { margin-left: 9px; }





.loading-centered {
    float: none;
    margin: 50px auto;
    display: table;
}


/*search result end*/

/*search result sidebar*/

@media only screen and (max-width: 600px) {
    div.sidebar { display: none; }
}

div.sidebar {
    padding: 10px;
    margin-left: 15px;
    margin-top: 2px;
    min-width: 250px;
    max-width: 300px;
}

.sidebar > div { 
    padding-bottom: 1.3rem; 
    
}


.search-result-body {
    padding-left: 2px;
    padding-right: 10px;
}

.panel-heading-dark {
    background-color: #9d9d9c;
    border-radius: 0.2rem;
    width: 100%;
    margin: 0;
    padding-left: 10px;
    cursor: pointer;
}

.panel-body {
    padding-left: 10px;
    padding-top: 0.3rem;
    font-size: 10pt;
}

.panel-heading .chevron:after { content: "\f077"; }

.chevron {
    float: right;
    padding-right: 0.75rem;
    padding-top: 0.2rem;
}

.panel-heading.collapsed .chevron:after { content: "\f078"; }


.checkbox {
    cursor: pointer;
    position: relative;
    display: block;
}

.checkbox > span {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                          supported by Chrome, Opera and Firefox */
    padding: 0.5rem 0rem 0.5rem 0.25rem;
}

.checkbox > input {
    height: 13px;
    width: 13px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    border: 1px solid darkgray;
    border-radius: 4px;
    outline: none;
    transition-duration: 0.1s;
    cursor: pointer;
}

.checkbox > input:checked { background-color: #cd1719; }

.date-style {
    width: 100%;
    min-width: 100%;
}


/*search result sidebar end*/

/*pagination*/

.pagination > li > a {
    background-color: white;
    color: #9d9d9c;
}

.pagination > li > .page-link { border: none; }

.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover {
    color: #5a5a5a;
    background-color: #eee;
    border-color: #ddd;
}

.pagination > .active > a {
    color: white;
    background-color: #9d9d9c !Important;
    border: none !Important;
    border-radius: 0.2rem;
}

.pagination > .active > a:hover {
    background-color: #5a5a5a !Important;
    border: none;
}

.badge {
    border-radius: 0.2rem !Important;
    font-size: 100% !Important;
}

/*pagination end*/

.main-alert {
    z-index: 5000;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: 30pt;
}


/**datepicker ocerride*/

.datepicker__buttons .datepicker__button-select { background: #cd1719 !Important; }

.calendar-date-selected, .calendar-date-selected:hover { background: #cd1719 !Important; }

.calendar-date-on, .calendar-date:hover { background: #dadad9 !Important; }

/**datepicker ocerride end*/

/**slider*/

.slider-container { position: relative; }

.controls {
    margin: 0;
    padding: 10px;
    list-style: none;
    position: absolute;
    left: 0;
    width: 100%;
    top: 50%;
    transform: translatey(-50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
}

.controls > li {
    background: #00000055;
    padding: 10px 4px 2px 4px;
}

.controls > li:hover { cursor: pointer; }

#slider-iw {
    margin-top: -17px !important;
    background: black;
}

.tns-item {
    opacity: 0.5;
    position: relative;
}

.tns-item > img { height: 450px; }

.tns-slide-center { opacity: 1; }

.box { display: flex; }

.left {
    flex: 2;
    width: 400px;
    margin-right: 5px;
}

.right {
    flex: 0 0 623px;
    overflow: hidden;
}

/**slider end*/

.editors-choice-col {
    overflow: hidden;
    padding: 0px;
    margin-left: 5px;
    max-height: 230px;
}

.editors-choice {
    object-fit: cover;
    object-position: 50% 0%;
    min-height: 100%;
    min-width: 100%;
    max-width: 100% 
}


.editors-choice-col > .teasertitle {
    background-color: rgba(0, 0, 0, 0.6);
    bottom: 0px;
    color: white;
    left: 0px;
    padding: 10px 15px;
    position: absolute;
    transition: 0.5s opacity;
    text-align: left;
    width: 100%;
    height: 55px;
    font-size: 12px;
    opacity: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.editors-choice-col > .event-number-images {
    bottom: 22px;
    right: 25px;
    color: white;
    padding: 4px 5px;
    position: absolute;
    opacity: 0;
    display: flex;
    justify-content: center;
    z-index: 9999;
    font-size: 12px;
}

.editors-choice-col:hover > img {
    opacity: 0.7;
}

.editors-choice-col:hover > .teasertitle {
    opacity: 1;
}
.editors-choice-col:hover > .teasertitlesingle {
    opacity: 1;
}

.editors-choice-col:hover > .event-number-images {
    opacity: 1;
}



.user-info {
    font-size: 13px !important;
    padding-top: 14px;
    color: rgba(0, 0, 0, 0.7);
    
}




.badge-cart {
    display: inline-block;
    font-size: 12px;
    font-weight: 400;
    padding: 3px 6px;
    border: 1px solid transparent;
    min-width: 10px;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    border-radius: 99999px;
    background: red;
    margin-top: -25px;
    margin-left: -20px;
}


.down nav {
    transform: translate3d(0, -30px, 0);
    height: 100px;
}

.fixed-search {
    position: sticky;
    top: 165px;
    right: 0;
    left: 0;
    z-index: 1020;
    background: white;
    padding-top: 10px;
}

.fixed-search-scrolled {
    position: sticky;
    top: 80px;
    right: 0;
    left: 0;
    z-index: 1020;
    padding-top: 10px;
    background-color: white;
    height: 120px;
}

.search-header {
    padding-bottom: 0.56rem;
    height: auto;
    height: 50px;
}

.search-header > div {
    clear: both;
    padding-top: 2pt;
}

.description-visible {
   visibility: visible;
}
.description-collapsed {
    visibility: collapse;
    height: 0px;
}

.paging-container {
    width: 100%;
    height: 30px;
    background: white;
}

.paging-icons {
    float: right;
    text-align: right;
    padding-right: 4px;
}

@media only screen and (max-width: 800px) {
    img.imagelist {
        height: 100px;
    }

    .box {
        visibility: collapse;
        height: 0px;
    }

    .navbar .navbar-inner {
        height: 100px;
    }

    .logo-header {
        height: 10px;
    }

    #main-content {
        margin-top: 100px;
        padding-left: 44px;
        padding-right: 44px;
        min-height: 85vh; /*footer should not "stick" to the content""*/
        margin-bottom: 20px;
    }

    .description-visible {
        visibility: collapse;
        height: 0px;
    }
}

@media only screen and (min-width: 800px) {
    img.imagelist {
        height: 180px;
    }

    .fixed-search {
        position: sticky;
        top: 110px;
        right: 0;
        left: 0;
        z-index: 1020;
        background: white;
        padding-top: 10px;
    }

    .fixed-search-scrolled {
        position: sticky;
        top: 70px;
        right: 0;
        left: 0;
        z-index: 1020;
        padding-top: 10px;
        background-color: white;
        height: 120px;
    }
}

@media only screen and (max-width: 600px) {
    .imagebox {
        width: 100%;
    }

    img.imagelist {
        height: 200px;
        width: 100%;
    }

    .description-visible {
        visibility: collapse;
        height: 0px;
    }

    .fixed-search {
        position: sticky;
        top: 110px;
        right: 0;
        left: 0;
        z-index: 1020;
        background: white;
        padding-top: 10px;
    }

    .fixed-search-scrolled {
        position: sticky;
        top: 70px;
        right: 0;
        left: 0;
        z-index: 1020;
        padding-top: 10px;
        background-color: white;
        height: 120px;
    }

    .search-header {
        padding-bottom: 0.56rem;
        height: auto;
        height: 50px;
        background-color: white;
    }

   
}