/* CSS Document for omaggioalmaestro.com */

/*_________________Generici_____________________*/
* { margin: 0; padding: 0 }
a { text-decoration: underline; color: #323232; transition: .3s; }
a:hover { color: #3771bc; }

body, html { height: 100%; }

body { 
   position: relative;
   overflow-x: hidden;
   background-color: #e9e9e9;
   font-family: 'Open Sans', sans-serif;
   font-weight: 400;
   font-style: normal;
   color: #323232;
}

.page { width: 100%; }

h1 {
   font-family: 'Roboto Slab', serif;
   font-size: 30px;
   font-weight: normal;
   letter-spacing: 2px;
   text-align: center;
   text-transform: uppercase;
   padding: 50px 0px 20px;
}

@media only screen and (max-width: 767px) { h1 { padding-top: 20px; font-size: 26px; } }

h2 {
   font-family: 'gothic', serif; font-size: 20px;
   text-transform: uppercase; letter-spacing: 2px;
   color: #3771bc;
}

article { margin-bottom: 30px; }

article.full-width { width: 100%; background-color: #000000; text-align: center; height: 450px; }
@media only screen and (max-width: 767px) { article.full-width { height: 350px; } }

article.content-viewport, footer div.container { max-width: 1200px; margin: 0px auto 30px; }
article.content-viewport { text-align: center; }

p { margin: 10px 0px; text-align: justify; }

/* ===============[ Layout di base           ]================= */
header {
   max-width: 1200px;
   margin: 30px auto;
   display: flex;
   justify-content: space-between;
}
/* mobile */
@media only screen and (max-width: 767px) {
   header { margin: 15px auto; }
}

.grecaptcha-badge { display: none; }

/* ===============[ Button                   ]================= */
.button {
   font-family: 'Roboto Slab', serif;
   padding: 10px;
   color: #2160b5;
   border: 1px solid #2160b5;
   border-radius: 3px;
   text-transform: uppercase;
   text-decoration: none;
   font-weight: bold;
   font-size: 14px;
   transition: all .3s;
   position: relative;
   z-index: 1;
}

.button:hover {
     color: #e9e9e9;
}

.button:before, .button:after {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  content: "";
  z-index: -1;
  border-radius: 3px;
}
.button:after {
  z-index: -1;
  width: 1%;
  left: 50%;
  opacity: 0;
  border-radius: 0;
  border: 1px solid #2160b5;
  background-color: #2160b5;
  transition: all .4s;
}
.button:hover:after {
  opacity: 1;
  width: 100%;
  border-radius: 3px;
  left: 0;
}








.youtube iframe { aspect-ratio: 1 / 0.57; }
@media only screen and (min-width: 767px) { .youtube iframe { width: 800px; border-radius: 5px; } }
@media only screen and (max-width: 767px) { .youtube iframe { width: 100%; } }

.margin-top-30 { margin-top: 30px; }
.margin-top-40 { margin-top: 40px; }
.margin-top-50 { margin-top: 50px; }

/* ===============[ Logo                     ]================= */
.logo img { display: block; }

/* bigscreen */
@media only screen and (min-width: 767px) {
}

/* mobile */
@media only screen and (max-width: 767px) {
   .logo { margin: 0px auto 0px; }
   .logo img { width: 250px; }
}

/* ===============[ Menu di navigazione      ]================= */
nav { width: 100%; max-width: 1200px; margin: 0px auto; padding-bottom: 40px; }
nav ul { display: flex; justify-content: space-between; text-align: center; list-style: none; }
nav ul li { display: flex; flex-direction: column; justify-content: center; min-height: 30px; text-transform: uppercase; position: relative; }
nav ul li a {
   display: block; position: relative; transition: all .3s;
   font-family: 'Roboto Slab', serif; font-size: 17px; font-weight: bold; letter-spacing: 2.8px; text-decoration: none;
}
nav ul li a span { display: block; font-size: 14px; font-weight:300; text-transform: none; letter-spacing: 0.5px; }
nav ul li a:hover, nav ul li.item-selected a { color: #2160b5; background-color: #dddddd; }

/* bigscreen */
@media only screen and (min-width: 767px) {
   nav .logo { display: none; }
   .hamburger-menu { display: none; }
   .navbar-close { display: none; }

   nav { border-bottom: 1px solid #cccccc; }
   body.page-home nav { border-bottom: none; }
   
   nav ul { width: 70%; margin: 0px 15%; }
   nav ul li a { border-radius: 5px; padding: 5px 10px; }
}

/* mobile */
@media only screen and (max-width: 767px) {
   .hamburger-menu {
      width: 45px; height: 45px; margin: 0px auto 15px; border-radius: 3px;
      background-image: url('../images/hamburger_menu.png?v=2'); background-color: #323232; background-position: center; background-size: cover;
   }
 
   nav { display: block; position: fixed; top: 0; right: -100%; width: 100%; height: 100vh; background-color: #e9e9e9; z-index: 100; transition: right 0.3s ease-in-out; }
   body.show-navbar { overflow-y: hidden; }
   body.show-navbar .navbar { right: 0; }

   nav .logo img { margin: 15px auto; }
   
   .navbar-close .icon { font-size: 28px; color: #323232; position: absolute; top: 0; right: 0; padding: 10px; }
   
   nav ul { width: 100%; height: 50%; }
   nav ul { flex-direction: column; flex-wrap: nowrap; text-align: center; margin-bottom: 40px; }
   nav li { margin: 1px 0px; }
   nav li.item-selected { background-color: #333333; }

   nav ul li a { font-size: 22px; padding: 5px; }
   nav ul li a span { font-size: 14px; }
}

/* ===============[ Social                   ]================= */
.social ul { height: 90%; margin-top: 5px; display: flex; list-style: none; }
.social li a { display: block; background-size: 100%; filter: grayscale(100%) contrast(200%); transition: .4s; }
.social li a img { display: block; }
.social li a:hover { filter: none; }

.social li.facebook a { background-image: url("../images/social/facebook.png"); }
.social li.instagram a { background-image: url("../images/social/instagram.png"); }
.social li.youtube a { background-image: url("../images/social/youtube.png"); }

/* bigscreen */
@media only screen and (min-width: 767px) {
   header .empty, header .social { width: 70px; text-align: right; }
   .social .social-label, nav .social { display: none; }
   header .social ul { flex-direction: column; justify-content: space-between; }
   .social li a { width: 42px; height: 42px; }
}

/* mobile */
@media only screen and (max-width: 767px) {
   header .empty, header .social { display: none; }
   nav .social { text-align: center; }
   nav .social ul { flex-direction: row; justify-content: center; }
   nav .social li { margin: 5px; }
   nav .social li a { width: 27px; height: 27px; }
}

/* ===============[ Footer                   ]================= */
footer { background-color: #323232; margin-top: 80px; padding-top: 10px; padding-bottom: 30px; }
footer, footer a { font-family: 'Roboto Slab', serif; font-size: 16px; color: #dddddd; text-decoration: none; }
footer li { list-style: none; padding-bottom: 6px; }
footer p { font-weight: 300; }
footer div.container { min-height: 100px; padding: 30px; display:flex; justify-content: space-between; }
footer div.container h3 { margin: 0px; font-size: 32px; letter-spacing: 1.8px; }
footer div.container h4 { font-size: 29px; font-weight: 300; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px; }
footer div.container h4:not(:first-of-type) { margin-top: 50px; }

footer .icon { font-size: 32px; margin-right: 15px; }
footer div.container li.mail, footer div.container li.location { margin-bottom: 15px; display: flex; flex-direction: row; align-items: center; }

/* bigscreen */
@media only screen and (min-width: 767px) {
   footer div.container { flex-direction: row; }
}

/* mobile */
@media only screen and (max-width: 767px) {
   footer div.container { flex-direction: column; }
   footer article { margin-top: 50px; }
   footer article:nth-of-type(2), footer article:last-of-type { display: none; }
}

/* ============================================================ */
/* ===============[ Pagina HOME - Inizio     ]================= */

/*__________________ Upcoming events ________________ */
div.read-more { margin-top: 25px; }
@media only screen and (min-width: 767px) { div.read-more { text-align: right; } }
@media only screen and (max-width: 767px) { div.read-more { text-align: center; } }

.upcoming-events { 
   width: 100%; height: 100%; 
   background-image: url("../images/bg_upcoming_events_20250703_rieti_big.png"); background-position: center; background-repeat: no-repeat; background-size: auto 100%;
}
@media only screen and (max-width: 767px) { .upcoming-events { background-image: url("../images/bg_upcoming_events_20250703_rieti_small.png"); } }

/*__________________ About preview __________________ */
.homepage-welcome-sub { margin: 10px auto 30px !important; }
.homepage-welcome-sub p { text-align: center; margin: 5px; font-style: italic; }

.homepage-welcome { display: flex; justify-content: space-between; }
@media only screen and (max-width: 767px) { .homepage-welcome { flex-direction: column; } }
.homepage-welcome > div { display: flex; flex-direction: column; justify-content: space-between; }

.homepage-welcome-about-preview div:first-of-type { display: flex; flex-direction: column; justify-content: space-around; height: 100%; }

@media only screen and (min-width: 767px) { 
   .homepage-welcome-media-preview iframe { width: 775px; }
   .homepage-welcome-about-preview { width: 400px; }
}
@media only screen and (max-width: 767px) { .homepage-welcome-about-preview { width: 100%; margin-top: 25px; padding: 0px 15px; box-sizing: border-box; } }


/* ===============[ Pagina HOME - Fine       ]================= */
/* ============================================================ */




/* ============================================================ */
/* ===============[ Pagina BAND - Inizio     ]================= */

/*__________________ About us      __________________ */
.about-us { display: flex; justify-content: space-between; }
.about-us > div { width: 50%; box-sizing: border-box; padding: 20px; }

@media only screen and (max-width: 767px) { 
   .about-us { flex-direction: column; } 
   .about-us > div { width: 100%; }
}

/*__________________ Band          __________________ */
.about-us-story img { width: 100%; margin: 0px 0px 15px; border-radius: 5px; }
.about-us-today img { width: 100%; margin: 15px 0px 0px; border-radius: 5px; }
.about-us p { text-align: justify; }

.about-band ul { display: flex; justify-content: center; flex-wrap: wrap; }
.about-band ul li { width: 25%; box-sizing: border-box; list-style-type: none; padding: 20px; }
.about-band ul li img { width: 100%; border-radius: 5px; }
.about-band ul li p { text-align: center; }
.about-band ul li p:first-of-type { font-family: 'gothic'; font-size: 20px; font-weight: bold; color: #3771bc; margin-bottom: 0px; }
.about-band ul li p:last-of-type { margin-top: 5px; }

@media only screen and (max-width: 767px) { 
   .about-band ul li { width: 50%; }
   .about-band ul li p:first-of-type { font-size: 18px; letter-spacing: -0.5px; }
}


/* ===============[ Pagina BAND - Fine       ]================= */
/* ============================================================ */


/* ============================================================ */
/* ===============[ Pagina CONTACTS - Inizio ]================= */
.contacts { display: flex; }
.contacts > * { box-sizing: border-box; padding: 0px 30px; }
.contacts div p:first-of-type { margin-bottom: 30px; }
.contacts form { display: flex; flex-direction: column; align-items: center; }
input, textarea, button { border: none; border-radius: 5px; margin-bottom: 10px; padding: 10px 20px; font-family: 'Open Sans', sans-serif; font-size: 14px; } 
.contacts input, .contacts textarea { width: 100%; box-sizing: border-box; }
.contacts textarea { height: 150px; margin-bottom: 30px; }


@media only screen and (min-width: 767px) { 
   .contacts div { width: 30%; border-right: 1px solid #ccc; }
   .contacts form { width: 70%; margin-top: 10px; }
}

@media only screen and (max-width: 767px) { 
   .contacts { flex-direction: column; }
   .contacts div, .contacts form { width: 100%; }
   .contacts div { margin-bottom: 30px; }
}

/* ===============[ Pagina CONTACTS - Fine   ]================= */
/* ============================================================ */