.fascia-top{width:100%; background-color: var(--colblue); text-align:center }
.fascia-top > div {width: 50%; margin:0 auto; background: url('../imgs/pixel-white.svg') repeat-x; background-size: 1px 1px; background-position: center}
#nome-profilo-xs{display: none}
h1, .pseudo-h1 {font-size:2.5rem; display:inline-block; color: #fff; background-color:var(--colblue); padding: 10px 20px;}

.intestazione-h1{font-size: 0.8em}
h1.pro{background:none !important; color: #333; padding:0 !important; background: #ffcc00}

.grid-container{margin-top: 120px; margin-left:var(--margin-lr-xl); margin-right: var(--margin-lr-xl); display: flex; justify-content: center; flex-wrap: wrap}
/* .item{max-width: 18%; margin:30px; box-shadow: #ccc 0 0 20px; text-align: center} */
.item{ box-shadow: #ccc 0 0 20px; text-align: center; margin-bottom: 24px}
.box-categoria{font-size: 0.7em; text-align: center; text-transform: uppercase; padding-top:4px; padding-bottom: 4px; color: #333}
.image{display:inline-block; margin-top: 0px; background-color: #000; margin-left: auto; margin-right: auto}
.item img{opacity: 0.8}
.content{padding: 10px; text-align: center}
.content small{text-transform: uppercase; font-size: 0.7em; line-height: 0.5em}
.content hr{max-width: 60%; opacity: 1; border-color: var(--colred); margin:8px auto}
h3{text-align: center;  color: #333; font-size: 1.3em}
.preview{font-size: 0.9em}

.item:hover img {opacity:1;}
.item:hover h3, .item:hover .box-categoria {color:var(--colred);}

.competenze{display: flex; align-items: flex-start; justify-content: flex-end; flex-wrap: wrap; align-content: flex-start;}
.competenze div{ margin:8px; padding:6px; border:#ccc 1px solid; font-size:0.9em; font-weight: 700; text-align: center; text-transform: uppercase;}
.competenze div span:first-child{color:#b0b0b0; font-size: 1em}
.competenze div span:last-child{color:var(--colred); font-size: 1.2em}

.contatti{display: flex; align-items: center; justify-content: flex-end;}
.contatti div {margin-left: 20px}
.contatti button{margin:0; padding: 0; text-align: center; background: none; width: 40px; height: 40px; border:var(--colred) 1px solid; display: flex; align-items: center; justify-content: center}
.contatti svg{height: 20px; width: auto; fill:var(--colred);}
.contatti button:hover{background: var(--colred);}
.contatti button:hover svg {fill:#fff}

.separatore{width: 100%; background-image: url('../imgs/pixel-707070.svg'); background-repeat: repeat-x; background-size: 1px 1px; background-position: center; text-align: center; margin-bottom: 20px; margin-top: 40px}
.separatore h2 {color: var(--colred); background-color: #fff; padding-left: 20px; padding-right: 20px; font-size: 1.6em; display: inline-block; margin:auto}

.title-arg{background-image: url('../imgs/pixel-707070.svg'); background-repeat: repeat-x; background-size: 1px 1px; background-position: center; margin-top: 24px; margin-bottom:12px; opacity:0.6 }
.title-arg span {background-color: #fff; font-size: 1.3em; color: #666666; padding-right: 20px}

.content-arg a:link, .content-arg a:visited {color: var(--colred);}
.content-arg a:hover {color: #666; padding-left: 20px}
/* .photo-profile{margin-bottom: 24px} */

.bg-grey{background:#fff;}
.contact-container{padding: 12px; color: #fff; font-size: 1em}
.contact-container hr {max-width: 70%; border-color: #666}
.box-contact{display: flex; align-items: center}
.box-contact .icon{padding-right: 12px}
.contact-container a:link, .contact-container a:visited {color: var(--colred);}
.contact-container a:hover {color: #000;}
.contact-container a:hover .box-contact{padding-left: 20px}
.image-qr{margin-right: 12px}
.profilo, .content-arg{text-align: justify;}
.redborder{border-top: var(--colred) 1px solid !important; opacity: 1}
@media (max-width: 1400px) {
 .grid-container{margin-left:var(--margin-lr-lg); margin-right: var(--margin-lr-lg);}
}

@media (max-width: 991px) {
  #nome-profilo-xs{display: block}
  #nome-profilo-xl{display: none}
  .profilo{margin-top: 24px}
  .grid-container{margin-left:var(--margin-lr-md); margin-right: var(--margin-lr-md);}
  /* .item{max-width: 40%;} */
  .competenze{display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap; margin-top: 24px}
}

@media (max-width: 767px) {
  .fascia-top div {width: 70%;}
  .competenze div{ margin:5px; padding:4px;}
  .competenze div span:first-child{color:#b0b0b0; font-size: 0.9em}
  .competenze div span:last-child{color:var(--colred); font-size: 1em}
  h1, .pseudo-h1 {font-size:1.8rem; display:inline-block; color: #fff; padding: 10px 20px;}
  .intestazione-h1{font-size: 0.7em}
  /* .image-qr{display: none} */
  .qrbox{ flex-basis: 100%;}
  

}
@media (max-width: 575px) {
  .fascia-top div {width: 80%;}
  .grid-container{margin-left:var(--margin-lr-xs); margin-right: var(--margin-lr-xs);}
  /* .item{max-width: 400px;} */
}