/* GENERAL */
body { margin: 0; font-family: 'Frutiger', sans-serif; font-weight: 400; }
    body a { transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -o-transition: 0.5s all; -ms-transition: 0.5s all; text-decoration: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; font-style: italic; font-family: louvette-display, serif; }
p { margin: 0; font-size: 0.9em; line-height: 1.8em; color: #555; font-weight: 400; }
ul, label { margin: 0; padding: 0; }
body a:hover { text-decoration: none; }

/* WEBAPP LAYOUT */
.app-body { background: #fff; }
#viewport-area::-webkit-scrollbar-track { border-radius: 10px; background-color: #F5F5F5; }
#viewport-area::-webkit-scrollbar { width: 6px; background-color: #F5F5F5; }
#viewport-area::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #6b046b; border: 1px solid rgba(255, 255, 255, 0.7) !important; }
.header { background: #B12B43; padding: 1.2em 3em; }
.menu-icon, .logo, .user-area { float: left; width: 33.33%; }
    .user-area .dropdown .btn-link { color: #F0F0F0; }
        .user-area .dropdown .btn-link:hover { text-decoration: none; }
        .user-area .dropdown .btn-link:focus { box-shadow: none; }
.logo { text-align: center; }
    .logo h2 { font-size: 1.3em; text-align: center; }
        .logo h2 a img { display: block; margin: auto; max-height: 40px; }
.user-area { text-align: right; }

/* MENU */
.menu-wrap { position: fixed; z-index: 1001; width: 250px !important; height: 100% !important; background: #B12B43; -webkit-transform: translate3d(-320px,0,0); -moz-transform: translate3d(-320px,0,0); -o-transform: translate3d(-320px,0,0); -ms-transform: translate3d(-320px,0,0); transform: translate3d(-320px,0,0); -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s; -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1); -moz-transition-timing-function: cubic-bezier(0.7,0,0.3,1); transition-timing-function: cubic-bezier(0.7,0,0.3,1); overflow-y: auto !important; }
.top-nav li { display: block; }
    .top-nav li.menu-title { font-size: 1.5em; padding: 1em 0.8em; text-align: left; color: #fff; border-bottom: 1px solid #FFF; text-transform: none; background: #910B23; font-family: 'Frutiger', sans-serif; font-weight: 400; -webkit-transform: translate3d(0,500px,0); -moz-transform: translate3d(0,500px,0); -o-transform: translate3d(0,500px,0); -ms-transform: translate3d(0,500px,0); transform: translate3d(0,500px,0); }
.show-menu li.menu-title { -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
.top-nav li a { font-size: 1.1em; color: #fff; font-weight: 300; -webkit-transition: .5s all; -moz-transition: .5s all; transition: .5s all; outline: none; text-decoration: none; }
    .top-nav li a:hover, .top-nav li a.active { background: #A11B33; }
.top-nav i.fa { margin-right: 10px; font-size: .9em; }
.top-nav a.menu span.fa { font-size: .8em; margin-left: 1.5em; top: 2px; }
ul.nav-sub { display: none; }
    ul.nav-sub li a { font-size: 1em; padding-left: 3.5em; }
.icon-list { height: 400px !important; -webkit-transform: translate3d(0,100%,0); -moz-transform: translate3d(0,100%,0); -o-transform: translate3d(0,100%,0); -ms-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); margin-bottom: 1.5em; }
    .icon-list a { display: block; padding: 0.8em 1em; -webkit-transform: translate3d(0,500px,0); -moz-transform: translate3d(0,500px,0); -o-transform: translate3d(0,500px,0); -ms-transform: translate3d(0,500px,0); transform: translate3d(0,500px,0); }
        .icon-list a:nth-child(2) { -webkit-transform: translate3d(0,1000px,0); -moz-transform: translate3d(0,1000px,0); -o-transform: translate3d(0,1000px,0); -ms-transform: translate3d(0,1000px,0); transform: translate3d(0,1000px,0); }
        .icon-list a:nth-child(3) { -webkit-transform: translate3d(0,1500px,0); -moz-transform: translate3d(0,1500px,0); -o-transform: translate3d(0,1500px,0); -ms-transform: translate3d(0,1500px,0); transform: translate3d(0,1500px,0); }
        .icon-list a:nth-child(4) { -webkit-transform: translate3d(0,2000px,0); -moz-transform: translate3d(0,2000px,0); -o-transform: translate3d(0,2000px,0); -ms-transform: translate3d(0,2000px,0); transform: translate3d(0,2000px,0); }
        .icon-list a:nth-child(5) { -webkit-transform: translate3d(0,2500px,0); -moz-transform: translate3d(0,2500px,0); -o-transform: translate3d(0,2500px,0); -ms-transform: translate3d(0,2500px,0); transform: translate3d(0,2500px,0); }
        .icon-list a:nth-child(6) { -webkit-transform: translate3d(0,3000px,0); -moz-transform: translate3d(0,3000px,0); -o-transform: translate3d(0,3000px,0); -ms-transform: translate3d(0,3000px,0); transform: translate3d(0,3000px,0); }
.content-wrap { overflow: hidden; width: 100%; height: 100%; }
.content { position: relative; }
    .content::before { position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; background: rgba(0,0,0,0.3); content: ''; opacity: 0; -webkit-transform: translate3d(100%,0,0); -moz-transform: translate3d(100%,0,0); -o-transform: translate3d(100%,0,0); -ms-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); -webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s; -moz-transition: opacity 0.4s, -moz-transform 0s 0.4s; transition: opacity 0.4s, transform 0s 0.4s; -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1); -moz-transition-timing-function: cubic-bezier(0.7,0,0.3,1); transition-timing-function: cubic-bezier(0.7,0,0.3,1); }
.menu-button { position: relative; z-index: 1000; padding: 0; width: 2.5em; height: 2.2em; border: none; text-indent: 2.8em; font-size: 0.8em; color: transparent; background: transparent; outline: none; margin: .5em 0; }
    .menu-button::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: -webkit-linear-gradient(#ffffff 20%, transparent 20%, transparent 40%, #ffffff 40%, #ffffff 60%, transparent 60%, transparent 80%, #ffffff 80%); background: linear-gradient(#ffffff 20%, transparent 20%, transparent 40%, #ffffff 40%, #ffffff 60%, transparent 60%, transparent 80%, #ffffff 80%); content: ''; }
.close-button { width: 1em; height: 1em; position: absolute; right: 1em; top: 0.5em; overflow: hidden; text-indent: 1em; font-size: 1.1em; border: none; background: transparent; color: transparent; outline: none; z-index: 999; }
    .close-button::before, .close-button::after { content: ''; position: absolute; width: 3px; height: 100%; top: 0; left: 7px; background: #fff; }
    .close-button::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
    .close-button::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
.show-menu .menu-wrap { -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); -webkit-transition: -webkit-transform 0.8s; -moz-transition: -moz-transform 0.8s; transition: transform 0.8s; -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1); -moz-transition-timing-function: cubic-bezier(0.7,0,0.3,1); transition-timing-function: cubic-bezier(0.7,0,0.3,1); }
.show-menu .icon-list,
.show-menu .icon-list a { -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); -webkit-transition: -webkit-transform 0.8s; -moz-transition: transform 0.8s; transition: transform 0.8s; -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1); -moz-transition-timing-function: cubic-bezier(0.7,0,0.3,1); transition-timing-function: cubic-bezier(0.7,0,0.3,1); }
    .show-menu .icon-list a { -webkit-transition-duration: 0.9s; -moz-transition-duration: 0.9s; transition-duration: 0.9s; }
.show-menu .content::before { opacity: 1; -webkit-transition: opacity 0.8s; -moz-transition: opacity 0.8s; transition: opacity 0.8s; -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1); -moz-transition-timing-function: cubic-bezier(0.7,0,0.3,1); transition-timing-function: cubic-bezier(0.7,0,0.3,1); -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }

/* NICESCROLL */
.nicescroll-cursors { background-color: #6b046b !important; border: 1px solid #b3b3b3; }

/* CAROUSEL */
.banner .carousel-control span.fa { font-size: 1.5em; text-shadow: none; }
.banner-img { background-repeat: no-repeat; background-position: center; background-size: cover; min-height: 370px; }
.carousel-control.left, .carousel-control.right { background: none; }

/* CLASSES */
.welcome { padding: 3.5em 5em 0; }
    .welcome h4 { font-size: 1em; color: #000; text-align: center; margin: 0.5em 0; font-family: louvette-display, serif; font-style: italic; font-weight: 400; }
    .welcome span.fa { font-size: 1em; color: #fff; padding: 3px; }
.inner-content { padding: 3.5em 2em; background: #fff; }
h1.nblayout-title { font-size: 3.6em; color: #910B23; margin-bottom: .2em; text-align: center; }
h3.nblayout-title { font-size: 3.1em; color: #910B23; margin-bottom: .2em; text-align: center; }
.nblayout-subtitle { text-align: center; }
.label { font-weight: 300 !important; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
.main-content { padding: 2em; background-color: #768084; color: #FFFFFF; text-align: center; }
    .main-content h1, .main-content h2, .main-content h3, .main-content h4, .main-content h5, .main-content h6 { color: #FFFFFF; text-shadow: 2px 2px #222222; text-align: left; }
    .main-content .item-text p { color: #FFFFFF; text-align: justify; }
.audioguide-content { margin: 0; padding: 2em; background-color: #768084; color: #FFFFFF; text-align: center; }
    .audioguide-content h1, .audioguide-content h2, .audioguide-content h3, .audioguide-content h4, .audioguide-content h5, .audioguide-content h6 { font-family: 'Frutiger', sans-serif; font-style: normal; font-weight: 400; color: #FFFFFF; text-shadow: 1px 1px #222222; text-align: left; }
    .audioguide-content .elements { margin-bottom: 0.5em; }
.items-list { background: #CCC4B8; }
.dark-list { background: #768084; }
    .dark-list h1, .dark-list h2, .dark-list h3, .dark-list h4, .dark-list h5, .dark-list h6 { color: #FFFFFF; text-shadow: 2px 2px #222222; }
    .dark-list p { color: #FFFFFF; }
img[data-enlargeable="true"]:hover { cursor: zoom-in; }

/* CARDs */
.card { box-shadow: none; transition: .5s all; }
    .card h6 { color: #404040; }
    .card h4.card-title { color: #202020; transition: 0.5s all; margin: 0; }
    .card:hover { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); transition: .5s all; margin: 0; }
        .card:hover h4.card-title { color: #910B23; transition: 0.5s all; }

@media (max-width:640px) {
    h1, .h1, h2, .h2, h3, .h3 { margin-top: 0px; margin-bottom: 0px; }
    .label { font-size: 53%; }
}

@media(max-width:736px) {
    .inner-content { padding: 3.5em 1.8em; }
    h3.nblayout-title { font-size: 3em; }
}

@media(max-width:667px) {
    .inner-content { padding: 3em 1.8em; }
}

@media(max-width:640px) {
    .banner-img { min-height: 310px; }
    .welcome { padding: 3em 5em 0; }
    h3.nblayout-title { font-size: 2.8em; }
    .inner-content { padding: 3em 1.5em; }
}

@media(max-width:600px) {
    .banner-img { min-height: 270px; }
    .logo h2 { font-size: 1.2em; }
    h3.nblayout-title { font-size: 2.6em; }
}

@media(max-width:480px) {
    .logo h2 { font-size: 1.1em; }
    .menu-button { height: 2em; margin: .45em 0; }
    .header { padding: 1em 2em; }
    .banner-img { min-height: 240px; }
    .welcome { padding: 2.5em 5em 0; }
    .inner-content { padding: 2.5em 1.5em; }
}

@media(max-width:414px) {
    .header { padding: 1em 1.5em; }
    .welcome { padding: 2.5em 3em 0; }
    h3.nblayout-title { font-size: 2.5em; }
}

@media(max-width:384px) {
    h3.nblayout-title { font-size: 2.2em; }
}

@media(max-width:375px) {
    .welcome { padding: 2em 2em 0; }
}

@media(max-width:320px) {
    .header { padding: 1em; }
    .banner-img { min-height: 220px; }
    .kb_caption h3 { font-size: 1.3em; }
    h3.nblayout-title { font-size: 2em; }
    .inner-content { padding: 2em 1.2em; }
}

@media (min-width: 576px) {
    .card-columns { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }
}

@media (min-width: 768px) {
    .card-columns { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; }
}

@media (min-width: 992px) {
    .card-columns { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; }
}

@media (min-width: 1200px) {
    .card-columns { -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; }
}