@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,300;1,200&display=swap');

@font-face { font-family: 'bul-b'; src: url('/fonts/woff2/bul-b.woff2') format('woff2'), url('/fonts/woff2/bul-b.woff') format('woff'), url('/fonts/woff2/bul-b.ttf') format('ttf'); }
@font-face { font-family: 'bul-b-i'; src: url('/fonts/woff2/bul-b-i.woff2') format('woff2'), url('/fonts/woff2/bul-b-i.woff') format('woff'), url('/fonts/woff2/bul-b-i.ttf') format('ttf'); }
@font-face { font-family: 'bul-i'; src: url('/fonts/woff2/bul-i.woff2') format('woff2'), url('/fonts/woff2/bul-i.woff') format('woff'), url('/fonts/woff2/bul-i.ttf') format('ttf'); }
@font-face { font-family: 'bul-l'; src: url('/fonts/woff2/bul-l.woff2') format('woff2'), url('/fonts/woff2/bul-l.woff') format('woff'), url('/fonts/woff2/bul-l.ttf') format('ttf'); }
@font-face { font-family: 'bul-l-i'; src: url('/fonts/woff2/bul-l-i.woff2') format('woff2'), url('/fonts/woff2/bul-l-i.woff') format('woff'), url('/fonts/woff2/bul-l-i.ttf') format('ttf'); }
@font-face { font-family: 'bul-r'; src: url('/fonts/woff2/bul-r.woff2') format('woff2'), url('/fonts/woff2/bul-r.woff') format('woff'), url('/fonts/woff2/bul-r.ttf') format('ttf'); }

:root { --main-color: #365070; }

* { font-family: 'bul-l'; }

html, body { height: 100% }

body { padding-top: 4.4rem; color: #5a5a5a; background-color: #ffffff; }

h3 { margin: 0; text-align: center; text-transform: uppercase; }
h4 { text-align: center }

a { color: var(--main-color); font-weight: bold; text-decoration: none; }
    a:hover { color: var(--main-color); font-weight: bold; text-decoration: underline; }

input[type="button"], input[type="submit"] { text-transform: uppercase; color: white; background-color: var(--main-color); border: none; padding: 10px; box-sizing: border-box; border-radius: 5px; }
    input[type="button"]:hover, input[type="submit"]:hover { filter: brightness(1.2); transition: all .2s ease-in-out; }

.navbar { padding: 15px 0; background-color: white; }
.navbar-brand { padding: 12px 0; flex: 1 }
.brand-img { position: absolute; top: 15px }

.main-cnt { position: relative; min-height: 100%; padding-bottom: 45px }
.cnt-wrapper { max-width: 1000px; margin: 0 auto }

.footer { position: absolute; height: 45px; bottom: 0; width: 100%; background-color: rgb(240, 237, 232); padding: 10px; color: rgba(0, 0, 0, 0.55) }
    .footer a { color: rgba(0, 0, 0, 0.55); text-decoration: none; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out; }
        .footer a:hover { color: rgba(0, 0, 0, 0.75); }

.fascione-home { background-image: url(/images/fascioni/fascione1.jpg); width: 100%; height: 350px; background-repeat: no-repeat; background-position: 50% 50%; background-attachment: scroll; background-size: cover; max-width: 1920px; margin: 0 auto; }
.fascione-inner { width: 100%; height: 100px; background-repeat: no-repeat; background-position: 50% 100%; background-attachment: scroll; background-size: cover }

.striscia { position: relative; padding: 40px 20px; }
    .striscia h1 { text-align: center; line-height: 1em; margin-top: .3em; }
        .striscia h1::after { content: url(/images/baffo-bianco-174.png); display: block; clear: both; padding: 0; margin: -0.5em 0 0 0 }

.bgchiaro { background-color: #e4e4e4; color: #202020 }
    .bgchiaro h2 { text-align: center; line-height: 1em; margin-top: .3em; }
        .bgchiaro h2::after { content: url(/images/baffo-nero-174.png); display: block; clear: both; padding: 0; margin: -0.2em 0 0 0 }

.home-viaggi-cnt { display: flex; gap: 20px; flex-wrap: wrap; justify-content: space-evenly; margin-top: 20px }
    .home-viaggi-cnt a, .home-viaggi-cnt a:hover { text-decoration: none; font-weight: normal }

.home-viaggio-cnt { width: 300px; position: relative }
.home-viaggio-img, .home-viaggio-img img { width: 100% }
.home-viaggio-titolo { position: absolute; bottom: 0; background: #000000aa; color: white; width: 100%; padding: 4px; }

.prg-titolo { background-color: var(--main-color); color: white; margin-bottom: 20px; padding: 30px 0; text-align: center; font-size: 38px; }
.prg-cnt { width: 80%; max-width: 950px; margin: 0 auto }
.prg-img { text-align: center; }
    .prg-img img { width: 100%; max-width: 800px }
.prg-testo-cnt { }
.prg-giorno-titolo { margin: 0 auto; background-color: var(--main-color); color: white; padding: 15px; margin-top: 20px }
.prg-giorno-sottotitolo { font-style: italic; margin-top: 4px }
.prg-giorno-testo { margin: 0 auto; padding: 15px; background-color: transparent; border: 1px solid #dddddd; overflow-wrap: break-word; }
.prg-note-titolo { margin: 0 auto; background-color: #fff098; color: #ffa400; padding: 15px; margin-top: 20px }
.prg-note-testo { margin: 0 auto; padding: 15px; background-color: transparent; border: 1px solid #dddddd; overflow-wrap: break-word; }
.prg-prenota-cnt { width:100%; margin:20px 0; text-align:center }
.prg-wip { width: 100%; text-align: center }

#popupRegolamento { position: fixed; display: none; justify-content: center; align-items: center; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); z-index: 9999; }
#popupRegolamento-Box { position: relative; width: calc(90% - 20px); max-width: 500px; background-color: white; border-radius: 10px; padding: 10px; }
    #popupRegolamento-Box p { text-align: center; margin: 10px 0; }
    #popupRegolamento-Box input[type="button"] { width: 100% }

@media only screen and (max-width: 450px) {
    .fascione-home { background-image: url(/images/fascioni/fascione1s.jpg); height: 200px; background-size: contain }
}