:root {
  /* Global Color Palette Here */
  --rugo-white: #FFFFFF;
  --rugo-accent: #72A7B9;
  --rugo-black: #1A1A1A;
  --rugo-text: #333333;
  --border-radius: 20px;
}

* { margin: 0; padding: 0 }
*,*:before,*:after { box-sizing: inherit }

html, body { max-width: 100%; overflow-x: hidden; }

::-moz-selection { background: #72A7B9; color: #fff }
::selection { background: #72A7B9; color: #fff }

/* 

// Import Local Font (not Google Font)

@font-face {
  font-family: 'Font Name';
  src: url('../fonts/Font-File-Name.otf') format('otf'); // Se OTF
  src: url('../fonts/Font-File-Name.woff') format('woff'), url('../fonts/Font-File-Name.woff2') format('woff'); // Se WOFF
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

*/

body { font-size: 21px; font-family: 'Inter', sans-serif; font-weight: 400; background-color: #fff; color: #000000; box-sizing: border-box }

.container { max-width: 1280px; width: 70%; margin: 0 auto }
.container.medium { width: 50%; max-width: 1350px }
.container.small { width: 45%; max-width: 825px }
.container.x-small { width: 35%; max-width: 670px }

.x-small { max-width: 670px; margin: auto; }

.container {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-right: auto;
  margin-left: auto;
}

.row { 
  display: flex; 
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-.5 * var(--bs-gutter-x));
  margin-left: calc(-.5 * var(--bs-gutter-x));
}
.row>* {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-top: var(--bs-gutter-y);
}

.half { width: 48% }
.third { width: 30%; float: left; margin: 0 2.5%; text-align: center }

.left { float: left }
.right { float: right }
.clear { clear: both }

.sep { height: 100px }

h1 { font-weight: 500; font-size: 260%; font-weight: 600; }
h2 { font-size: 260%; font-weight: 600;}
h3 { font-size: 150%; }

p { 
  color: var(--rugo-text);
  text-wrap: pretty;
}

q { 
  font-family: "Crimson Pro";
  font-weight: 600;  
  font-style: italic;  
}

a { cursor: pointer; text-decoration: none; color: var(--rugo-black); }
a:hover { text-decoration: none; color: var(--rugo-text); }

.ta-center { text-align: center }
.ta-left { text-align: left }
.ta-right { text-align: right }

.no-do { padding-bottom: 0px!important }
.no-up { padding-top: 0px!important }
.no-ma-do { margin-bottom: 0px!important }

.big-title { font-size: 180% }
.big-txt { font-size: 150%; margin-bottom: 25px }
.big-link { font-size: 150% }

.first { margin-left: 0px!important }
.last { margin-right: 0px!important }

.d-flex { display: flex; align-items: center; }
.d-none { display: none !important; }
.justify-center { justify-content: center; }
.justify-start { justify-content: flex-start !important; }
.column { flex-direction: column; }
.align-center { align-items: center; }
.align-start { align-items: flex-start; }

.pb-1 { padding-bottom: 1rem; }
.pb-2 { padding-bottom: 2rem; }
.pb-4 { padding-bottom: 4rem; }
.pb-8 { padding-bottom: 8rem; }
.pb-10 { padding-bottom: 10rem; }

.mb-2 { margin-bottom: 2rem; }
.mb-4 { margin-bottom: 4rem; }
.mb-8 { margin-bottom: 8rem; }

.g-0, .gx-0 {
  --bs-gutter-x: 0
}

.g-3, .gy-3 {
  --bs-gutter-y: 1rem;
}
.g-3, .gx-3 {
  --bs-gutter-x: 1rem;
}
.g-6, .gx-6 {
  --bs-gutter-x: 2rem;
}
.g-9, .gx-9 {
  --bs-gutter-x: 3rem;
}

.w-100 {
  width: 100% !important;
}

.mobile-only { display: none !important; }
.desktop-only { display: block; }

/* Common */

.button { padding: 8px 32px; border-radius: 50px; background-color: var(--rugo-accent); color: var(--rugo-white); border: 2px solid var(--rugo-accent); transition: .4s; white-space: nowrap; font-size: 75%; text-decoration: none; }
.button:hover { opacity: .75; cursor: pointer; color: var(--rugo-white); }
.button.secondary { background-color: var(--rugo-white); color: var(--rugo-accent); border: 2px solid var(--rugo-accent); }
.btn-container {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.content .container { padding-bottom: 10rem; }

/* .section-bg { background-color: var(--rugo-accent);} */

header { width: 100%; height: 120px; position: fixed; padding: 40px 0; z-index: 100; background-color: rgba(255,255,255,.85); }
header .menu { padding: 10px 25px }
header .hamburger { display: none }

header .container { display: flex; justify-content: space-between; align-items: center; max-width: 1440px; }

.logo { height: 100%; }
.logo img { width: 330px; display: block }

.menu { list-style: none; display: flex; gap: 60px; border: 1px solid rgba(26,26,26,.25); border-radius: 50px; background-color: var(--rugo-white); }
.menu li { display: inline-block; vertical-align: top }
.menu li a { display: block; color: var(--rugo-black); text-decoration: none; font-size: 75%; transition: ease .4s; }
.menu li.active a, .menu li a:hover { color: var(--rugo-accent); opacity: .75; }

main { padding-top: 125px }

footer  { background-color: var(--rugo-black); color: #fff; padding: 4rem 0 2rem 0; margin: 2rem; border-radius: var(--border-radius);}
footer .logo { width: 350px; display: block; }
footer .logo img { width: 100% }
footer p { font-size: 90%; font-weight: 500 }
footer p.title { text-transform: uppercase; font-weight: 600 }
footer p.small { font-weight: 500 }
footer p a { color: #fff; text-decoration: none; transition: .4s; }
footer p a:hover { text-decoration: none; color: #fff; opacity: .75; }
footer .social li { display: inline }
footer .social li a img { width: 45px }
footer .social li a img:hover { opacity: 0.5 }
footer a { margin-left: 5px }
footer .clear.sep { height: 120px }

footer .footer-menu { font-size: 85% !important; }
footer .footer-menu li { list-style: none; padding-bottom: 1rem; color: #999999;}
footer .footer-menu li a { color: #ffffff; transition: .4s; margin: 0; opacity: 1; }
footer .footer-menu li a:hover { opacity: .75; }

footer .copyright p { color: #999999 ; }

.image-block h2 { padding-bottom: 1rem; }
.image-block p { padding-bottom: 2rem; }
.image-block .img-container { display: flex; align-content: center; flex-wrap: wrap; }
.image-block .img-container img { width: 100%; height: 100%; margin: auto; border-radius: var(--border-radius); object-fit: contain; }
.image-block .text-container { display: flex; flex-direction: column; justify-content: center; align-items: start; }

.tag-categoria { background-color: var(--rugo-black); color: var(--rugo-white); padding: 6px 40px; border-radius: 50px; font-size: 75%; }

.quotation-block { background-image: var(--quotation-block-bg); background-position: center; padding: 4rem 6rem; border-radius: var(--border-radius); margin: 0 -4rem; text-align: center; }
.quotation-block q { font-size: 175%; font-weight: 500; }

.page .title { padding-top: 10rem; }
.page .title h1 { text-align: center; } 
.page .title p { font-size: 100% !important; width: 100%; }


/* Home */
.welcome.home {
  padding-top: 10rem;
  padding-bottom: 10rem;
}
.welcome.home h1 {
  font-weight: 400;
  letter-spacing: -2px;
  font-size: 185%;
}
.welcome.home q {
  font-size: 375%;
}
.welcome.home .img-container {
  display: flex;
  justify-content: end;
}
.welcome.home .img-container img {
  width: 90%;
  border-radius: var(--border-radius);
}
.welcome.home .column {
  gap: 120px;
}

.home-category {
  box-shadow: 0 10px 40px 0 rgba(0,0,0,.05);
  width: 100%;
  height: 100%;
  aspect-ratio: 9/10;
  display: flex;
  flex-direction: column;
  border: 1.5rem solid #ffffff;
  border-radius: var(--border-radius);
  transition: .4s;
}
.home-category:hover {
  transform: scale(1.05);
}
.home-category .inner-category {
  height: 100%;
  width: 100%;
  border-radius: 15px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.home-category .top {
  display: flex;
  justify-content: end;
}
.home-category .arrow-container {
  background-color: #ffffff;
  padding: 1px 1px 1rem 1rem;
  border-radius: 0 0 0 30px;
  margin: -1px;
}
.home-category .arrow-container svg {
  display: flex;
  width: 64px;
  height: 64px;
  border-radius: 100px;
  transition: .4s;
}
.home-category .arrow-container:hover svg {
  opacity: .75;
}
.home-category .name-container {
  display: flex;
}
.home-category .name-container .name { 
  width: auto;
  background-color: #ffffff;
  padding: 1rem 1rem 1rem 1px;
  border-radius: 0 15px 0 0;
  margin: -1px;
}
.home-category .name-container .name h3 { 
  text-decoration: none;
  transition: .4s;
}
.home-category .name-container .name h3:hover {
  opacity: .75;
}

.prefooter-boxes {
  display: flex;
  justify-content: flex-end;
}
.prefooter-boxes img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* About */
.bio p {
  font-size: 90%;
}
.bio .text-container p {
  padding-bottom: 1rem;
}

.formazione-year { display: flex; gap: 1rem ; align-items: start; }
.formazione-year span { background-color: rgba(114,167,185,.10); padding: .4rem; border-radius: 5px; color: rgba(34,34,34,.75); font-weight: 700; }
.formazione-year p { padding-top: 8px; margin-bottom:20px; }

/* Libri */
.libri p {
  font-size: 90%;
}

.single-book { display: flex; box-shadow: 0 10px 40px 0 rgba(0,0,0,.05); position: relative; margin: 0 3rem 3rem 3rem; }
.single-book .book-img { width: 100%; transition: .4s; object-fit: cover;}
.single-book:hover .book-img { transform: scale(1.05); }
.single-book .book-arrow { position:absolute; bottom: 2rem; right: -2rem; transition: .4s;}
.single-book .book-arrow:hover { opacity: .85; }

.libri .text-container p { padding-bottom: 1rem; }

/* Convegni */
.convegni p { font-size: 90%; }
.themes-column { display: flex; flex-direction: column; gap: 1.5rem ; align-items: stretch; justify-content: center; }
.single-theme { box-shadow: 0 10px 40px 0 rgba(0,0,0,.05); border-radius: var(--border-radius); padding: 2rem; }
.single-theme img, .single-theme h4 { padding-bottom: 1rem; }
.single-theme p { font-size: 90%; }

.convegni .video-container { width: 100%; max-width: 100%; background-image: var(--video-container-bg); background-position: center; margin-bottom: 12rem; }
.convegni .video-container > .container { padding: 6rem 0; }

.single-convegno { display: flex; flex-direction: column; gap: 1.5rem ; align-items: stretch; justify-content: center; }
.single-convegno a { position: relative; }
.single-convegno .convegno-img { width: 100%; box-shadow: 0 0 25px rgba(0,0,0,.25); transition: .4s; }
.single-convegno:hover .convegno-img { transform: scale(1.05); }
.single-convegno .convegno-arrow { position:absolute; bottom: 2rem; right: -2rem; transition: .4s;}
.single-convegno .convegno-arrow:hover { opacity: .85; }

/* Supervisioni */
.supervisioni p { font-size: 90%; }
.supervisioni .img-container { position: relative; }
.supervisioni .step-title { position: absolute; bottom: 1rem; left: 2rem; font-size: 200%; }
.supervisioni .single-step { position: relative; }
.supervisioni .single-step .step-arrow { width: 80px; height: 80px; position: absolute; left: -8.5rem; top: 2rem; }

.supervisioni .text-container p {
  padding-bottom: 1rem;
}

/* Contacts */

.contatti-bg { background-image: var(--contatti-bg); border-radius: var(--border-radius); padding: 6rem 4rem; }

section.form form label { display: block; margin-bottom: 20px; font-weight: 500; font-size: 85%; }
section.form form input, section.form form textarea, section.form button, section.form select { font-family: 'Inter', sans-serif; font-size: 85%; outline: none }
section.form form input[type=text], section.form form input[type=email], section.form form textarea, section.form select { border: none; border: 1px solid rgba(228,228,228,1); padding: 1rem; width: 100%; box-sizing: border-box; border-radius: .5rem; }
section.form form input[type=text], section.form form input[type=email], section.form form textarea, section.form select, section.form .pretty { margin-top: 10px }
section.form form textarea { height: 150px }
section.form form label span.error { color: #a659ae; font-weight: 500; float: right }
section.form form label.pretty-label { margin: 0 }
section.form form label.pretty-label span.error { float: none }
section.form form #more { display: none; }
section.form form label.custom { font-size: 80% }
section.form form a { color:#000000; text-decoration: underline; }
section.form form a:hover { opacity: .75; }
.pretty { line-height: 1.25em; margin: 0; }
.pretty a { position: relative; z-index: 2; text-decoration: underline; transition: .4s; }
.pretty a:hover { opacity: .75; }
.pretty.p-default input:checked~.state label:after { background-color: var(--rugo-accent) !important; }

section.form .contact-info { width: 475px; margin: 125px auto; margin-right: 0 }
section.form .contact-info p { font-size: 150%; margin-bottom: 25px }
section.form .contact-info span { font-weight: 500 }

section.form textarea { font-family: 'Inter', sans-serif; }

.contatti .form {background-color: var(--rugo-white); padding: 2rem !important; border-radius: var(--border-radius); box-shadow: 0 10px 40px 0 rgba(0,0,0,.05);}
.contatti .form select { justify-content: space-between; align-items: center; }

.grecaptcha-badge { display: none!important }

section.form select::after {
  content: url('/micheleangelorugo.it/front/assets/img/icons/down-arrow.svg');
  width: 15px;
  height: 15px;
}

/* Custom Select */
select, ::picker(select) {
  appearance: base-select;
  font: -webkit-small-control;
}
option::checkmark {
  display: none;
}
option {
  font-size: 1rem;
  padding: 0.5rem 1rem;
  transition-duration: 0.25s;
  place-items: initial;
  align-items: center;
  font-family: 'Inter', sans-serif;
}
option:hover,option:focus-visible {
  background: #eaeaea;
}
select::picker-icon{
  display:none
}
::picker(select) {
  border: none;
  padding: 0.5rem 0;
  overflow-x: hidden;
  border-radius: 5px;
  /*  resets from UA  */
  min-inline-size: 0;
  box-shadow: 0px 12.8px 28.8px rgba(0, 0, 0, 0.13), 0px 0px 9.2px rgba(0, 0, 0, 0.11);
}
select:has(:popover-open) button {
  background: lightgray;
}

/* Thank you */


/* Policies */

section.policy h1 { margin-bottom: 50px }
section.policy a { color: #000000 }
section.policy b { display: block; margin: 40px 0 20px }
section.policy ul { padding-left: 30px }

section.policy p { margin-bottom: 1rem; }

/* 404 */

section.service-page a { color: #000000 }


/* Animations */

[data-reveal="fade"] { opacity: 0; }
[data-reveal="fade"].revealed { animation: reveal 1.2s cubic-bezier(0.17, 0.97, 0.38, 1) forwards 300ms }

@keyframes reveal {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

[data-reveal="fade-left"] { opacity: 0; }
[data-reveal="fade-left"].revealed { animation: fade-left 1.2s cubic-bezier(0.17, 0.97, 0.38, 1) forwards 300ms }

@keyframes fade-left {
  0% {
    opacity: 0;
    transform: translate(-2em, 0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

[data-reveal="fade-up"] { opacity: 0; }
[data-reveal="fade-up"].revealed { animation: reveal-up 1.2s cubic-bezier(0.17, 0.97, 0.38, 1) forwards 300ms }

@keyframes reveal-up {
  0% {
    opacity: 0;
    transform: translate(0, 2em);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

[data-reveal="fade-right"] { opacity: 0; }
[data-reveal="fade-right"].revealed { animation: fade-right 1.2s cubic-bezier(0.17, 0.97, 0.38, 1) forwards 300ms }

@keyframes fade-right {
  0% {
    opacity: 0;
    transform: translate(2em, 0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

/* Hamburger */

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
  background-color: var(--rugo-black);
}
.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after {
  background-color: var(--rugo-black);
}


/* Media Queries */

@media screen and (min-width: 2561px) and (max-width: 3840px) {}
    
@media screen and (min-width: 1921px) and (max-width: 2560px) {}

@media screen and (min-width: 1921px) {}

@media (max-width: 1919px) {}

@media (max-width: 1279px) { 

  header .menu { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: var(--rugo-white); margin: 0; padding: 0; z-index: 2; padding: 25px; border: none; border-radius: 0; }
	header .menu li { display: flex !important; justify-content: center; margin-left: 0; }
	header .menu li a { margin: 20px; font-size: 180%;  }
	header.home .hamburger, header .hamburger { display: block; position: absolute; right: 25px; z-index: 20 }

  header .header-right {
      display: none;
  }
  header .custom-menu {
      display: none;
  }

  header .mobile-menu {
      overflow: scroll;
  }
    
	.container.small { width: 70% }

  .container { max-width: 1024px; width: 90%; }

  .supervisioni .step-title { font-size: 175%; }

  .desktop-only { display: none !important; }
  .mobile-only { display: block; }

}

@media (max-width: 1023px) {
  body { font-size: 18px }
	.container.small { width: 90% }
	.center { margin-bottom: 30px }
	.box-menu { display: block }
	.menu { font-size: 80%; }
	.menu li { margin-left: 20px }
  .third { width: 100%;}
  
  .row { gap: 1em 0; }

}

@media (max-width: 767px) {
  main {
    padding-top: 65px;
  }

	.container.small { width: 90% }

  .menu-hamb { top: 10px; }
	.hamburger { padding: 10px 0px }

	.menu { padding: 10px 0 15px; }
	.logo img { max-width: 248px; }
  
  header { padding: 1em 0; height: auto; }

  footer { margin: 1rem; } 
  footer .logo { width: auto; }
  footer .logo img { margin: auto; padding-bottom: 2rem; }

  .welcome.home {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
  .welcome.home h1 {
    font-size: 150%;
    padding-bottom:.5em;
  }
  .welcome.home q {
    font-size: 200%;
  }

  .page .title { 
    padding-top: 6rem;
  }

  .contatti-bg {
    width: 100%;
    border-radius: 0;
    background-size: cover;
    background-position: center;
    padding: 2rem 1rem;
  }
  .contatti .form { padding: 1rem 0 !important; margin: .5rem; }

  .contatti-bg .row {
    justify-content: center;
  }

  .single-book { margin: 0 3rem 3rem 2rem; }
  .single-convegno { margin: 0 2rem .5rem .5rem; }

  .home-category { border: 1rem solid #ffffff; }
  .home-category .name-container .name { padding: .5rem 1rem .5rem 0; }

  footer .copyright * { text-align: center !important; }

  .prefooter { padding-bottom: 1em !important; }
  .prefooter .row { gap: 8em 0; }

  .quotation-block { padding: 4rem 3rem; }

}

@media (max-width: 639px) {
  h1 { font-size: 200% }
  h2 { font-size: 150% }
  .center {margin-bottom: 0 }
  .pre-footer { padding: 60px 0 }
  .button { width: auto }

  .fourth { width: 30%; margin: 20px 10% 25px }
  .first { margin-left: 10% !important }
  .last { margin-left: 10% !important }
  .info { margin: 40px auto 20px }

  .half { width: 100%; }
}

@media (max-width: 479px) {
  body{ font-size: 18px; }
}

@media (max-width: 359px) {}

@media (min-width: 992px) {
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%
  }
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-lg-5 {
      flex: 0 0 auto;
      width: 41.66666667%
  }
  .col-lg-6 {
      flex: 0 0 auto;
      width: 50%
  }
  .col-lg-7 {
      flex: 0 0 auto;
      width: 58.33333333%
  }
  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%
  }

  .g-lg-3, .gy-lg-3 {
    --bs-gutter-y: 1rem;
  }
  .g-lg-3, .gx-lg-3 {
    --bs-gutter-x: 1rem;
  }


  .pr-lg-5 { padding-right: 5rem }
  .pl-lg-5 { padding-left: 5rem }

  .contatti .form { margin-left: 3rem; }

  .welcome.home .img-container img { width: 75%; }

}

@media (max-width: 991px) {

  .welcome.home .img-container {
    display: none;
  }

  .supervisioni .single-step .step-arrow {
    /* position: relative; */
    width: 35px;
    height: 35px;
    top:auto;
    left: auto;
  }
  .supervisioni .single-step h3 {
    font-size: 140%;
    padding-left: 2.75rem;
    padding-top: .2rem;
  }
  .supervisioni .single-step p {
    padding-bottom: 2rem;
  }
  
  .image-block .img-container {
    padding-bottom: 1rem;
  }
  .image-block .img-container img {
    width: 90%;
  }

}