/* ANIMATE */
.w3-animate-fading{animation:fading 2s }@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.w3-animate-opacity{animation:opac 0.9s}@keyframes opac{from{opacity:0} to{opacity:1}}
.w3-animate-top{position:relative;animation:animatetop 0.3s}@keyframes animatetop{from{top:-200px;opacity:0} to{top:0;opacity:1}}
.w3-animate-left{position:relative;animation:animateleft 0.5s}@keyframes animateleft{from{left:-500px;opacity:0} to{left:0;opacity:1}}
.w3-animate-right{position:relative;animation:animateright 0.7s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
.w3-animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.w3-animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.w3-animate-input{transition:width 0.4s ease-in-out}
.w3-animate-input:focus{width:100%!important}



/* OPACITY */
.w3-opacity,.w3-hover-opacity:hover{opacity:1; text-decoration:none}
.w3-opacity-off,.w3-hover-opacity-off:hover{opacity:1}
.w3-opacity-max{opacity:0.25}
.w3-opacity-min{opacity:0.75}


.greyscale-tiny,.grayscale-tiny{filter:grayscale(25%)}
.greyscale-min,.grayscale-min{filter:grayscale(50%)}
.greyscale,.grayscale{filter:grayscale(75%)}
.greyscale-med,.grayscale-med{filter:grayscale(85%)}
.greyscale-max,.grayscale-max,.hover-greyscale:hover,.hover-grayscale:hover{filter:grayscale(100%)}

.citazione {font-family: 'Playfair Display', serif; font-weight:400;}

.fa-play:before {margin-left: .3rem;}


/* Steps */
.step {list-style: none; margin: 0;}
.step-element {display: flex;  padding: 1rem 0;}
.step-number { position: relative;width: 7rem;flex-shrink: 0; text-align: center;}
.step-number .number {color: #fff; background-color: #1e79ba;font-size: 1.5rem;}
.step-number .number {width: 43px;height: 50px;line-height: 48px;}
.number {display: inline-flex;justify-content: center;align-items: center;height: 50px;border-radius: 0rem;}

.step-number::before {content: '';position: absolute;left: 50%;top: 50px; bottom: -2rem; margin-left: -1px; border-left: 2px dashed #ED7D31; opacity:0.3}
.step .step-element:last-child .step-number::before {bottom: 1rem;}
.step-number-square { position: relative;width: 5rem;flex-shrink: 0; text-align: center;}
.step-number-square .number-square {color: #000; background-color: #ffdc50;font-size: 28px;}
.step-number-square .number-square {width: 60px;height: 60px;line-height:60px}
.number-square {display: inline-flex;justify-content: center;align-items: center;width: 38px;border-radius: 0rem;}
.step-number-square::before {content: '';position: absolute;left: 50%;top: 48px; bottom: -2rem; margin-left: -5px; border-left: 12px dotted #ffdc50; opacity:0.5}
/* END Steps */




/* TIMELINE */

.circle {
  padding: 13px 20px;
  border-radius: 50%;
  background-color: #ffdc50;
  color: #fff;
  max-height: 50px;
  z-index: 2;
}

/*.square {
  padding-top: 8px;
  border-radius: 0%;
  background-color: #ffdc50;
  color: #fff;
  height: 60px;
  width:60px;
  z-index: 2;
}*/

.square:before {content: '';position: absolute;left: 50%;top: 20px; bottom: -2rem; margin-left:-12px; border-left: 12px dotted #ffdc50; opacity:0.5;   z-index: -1;}

.how-it-works.row .col-2 {
  align-self: stretch;
}
.how-it-works.row .col-2::after {
  content: "";
  position: absolute;
  border-left: 0px dotted #ffcc00;
  z-index: 1;
}
.how-it-works.row .col-2.bottom::after {
  height: 50%;
  left: 50%;
  top: 50%;
}
.how-it-works.row .col-2.full::after {
  height: 100%;
  left: calc(50% - 3px);
}
.how-it-works.row .col-2.top::after {
  height: 50%;
  left: 50%;
  top: 0;
}


.timeline div {
  padding: 0;
  height: 40px;
}
.timeline hr {
  border-top: 10px solid #ffdc50;
  margin: 0;
  top: 15px;
  position: relative;
}
.timeline .col-2 {
  display: flex;
  overflow: hidden;
}
.timeline .corner {
  border: 10px solid #ffdc50;
  width: 100%;
  position: relative;
  border-radius: 15px;
}
.timeline .top-right {
  left: 50%;
  top: -50%;
}
.timeline .left-bottom {
  left: -50%;
  top: calc(50% - 3px);
}
.timeline .top-left {
  left: -50%;
  top: -50%;
}
.timeline .right-bottom {
  left: 50%;
  top: calc(50% - 3px);
}
/* TIMELINE */







/* meets */

.pad {padding: 8px 0px;}

.parallax-one { background: url('../img/promo/p1.jpg') fixed 50%;}
.parallax-two { background: url('../img/background/overlay.png'), url('../img/promo/p2.jpg') fixed 50%;}
.parallax-three { background: url('../img/background/overlay.png'), url('../img/promo/p3.jpg') fixed 50%;}
.parallax-four { background: url('../immagini/overlay.png'), url('../immagini/antropocene-sfondo.jpg') fixed 100%;}


.meet {
	background: #52501c url('../immagini/back-ptrn.png') repeat;
	box-shadow: inset 0 0 0 0px #;
}
.meet .meet-item {
	max-width: 300px;
	margin: 0 auto;
	text-align: center;
}

.meet .meet-item img {
	width: 100%;
	max-width: 300px;
	margin: 0 auto;
}

.meet .meet-map {
	position: relative;
	margin-top: 0px;
}

.meet .default-heading-2 hr {
	max-width: 90px;
	margin: 0 auto;
	margin-top: 25px;
	border-top: 2px solid #fff;
}

.meet .meet-map .img-map {
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
}

.meet .tooltip {
	font-family: 'Raleway', sans-serif;
	font-size: 18px;
	letter-spacing: 0.05em;
}

.meet .tooltip .tooltip-inner {
	padding: 4px 8px;
	border-radius: 2px;
	opacity: 1;
}

.meet .tooltip .tooltip-inner {
	padding: 4px 8px;
	border-radius: 2px;
	opacity: 1;
}

.meet .meet-map .map-marker {
	display: block;
	position: absolute;
	margin: 0;
	padding: 0;
	text-align: center;
}

.meet-map .map-marker.india {top: 53%;	left: 68.5%;}
.meet-map .map-marker.usa {top: 43%;	left: 19%;}
.meet-map .map-marker.uganda {top: 63%;	left: 53%;}
.meet-map .map-marker.newyork {top: 45%; left: 24%;}
.meet-map .map-marker.brazil {top: 62%;	left: 28%;}
.meet-map .map-marker.italy {top: 44%;	left: 48%;}
.meet-map .map-marker.france {top: 42%;	left: 45.5%;}
.meet-map .map-marker.banda {top: 65%;	left: 79%;}
.meet-map .map-marker.britain {top: 38%; left: 43%;}
.meet-map .map-marker.antologia {top: 50%; left: 35%;}
.meet-map .map-marker.norvegia {top: 32%; left: 47%;}
.meet-map .map-marker.california {top: 48%; left: 14%;}
.meet-map .map-marker.ecuador {top: 65%; left: 23.5%;}




 /* Mobile phones 
 */
@media (max-width: 575px){
	.meet .meet-map .map-marker img {max-width: 15px !important;}
	.banner img {width:60%}
	.banner {width:50%}
	.banner h4{font-size:80%}
}

@media (max-width: 767px){
	.meet .meet-map .map-marker img {max-width: 18px;}
	.banner h4{font-size:90%}
	.banner img {width:60%}

}
/* END MEETS DIV */






.card2{background:url('c.jpg'); background-size:cover; border-left:0px solid #1e1e1e; }
.bg-orientamento {background:url('sfondo-orientamento.jpg'); background-size:cover; border-left:0px solid #1e1e1e; }
.card12{background:url('css-pcto/onde3.png'); background-size:auto; border-left:0px solid #1e1e1e}
.bg-usr { background-color: #ed7d31;}
.w3-tag{background-color:#1e79ba;color:#fff;display:inline-block; padding:4px 8px 4px 8px; margin:4px; text-align:center;}
.blu-indire,.hover-blu-indire:hover{color:#fff!important;background-color:#1e79ba!important}
.text-blu-indire{color:#1e79ba!important;}
.text-orange{color:#ed7d31!important;}
.text-black{color:#000!important;}
.text-grey{color:#838383!important;}
.text-red{color:#ff0000!important;}

/* RESPONSIVE GRID */
.header-image {  text-align: center;  padding: 32px;}
.row-image {  display: -ms-flexbox; /* IE10 */  display: flex;  -ms-flex-wrap: wrap; /* IE10 */  flex-wrap: wrap;  padding: 0 0px;}
.w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 8px}								
/* Imposta larghezza colonne in % in base al width 100% e al numero di colonne */
.column-image { -ms-flex: 25%; /* IE10 */  flex:25%;  max-width: 25%;  padding: 0 0px;}
.column-image-33 { -ms-flex: 33%; /* IE10 */  flex:33%;  max-width: 33%;  padding: 0 0px;}
.column-image img {  margin-top: 0px;  vertical-align: middle;}
.column-image-33 img {  margin-top: 0px;  vertical-align: middle;}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column-image {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
    .middle p{font-size:65%; line-height:120%;}
    .contenitore .link-preview,
	.contenitore .link-details {
				  display: inline-flex;
				  align-items: center;
				  justify-content: center;
				  line-height: 1;
				  width: 16px;
				  height: 16px;
				  background: #000;
				  border-radius: 50%;
				  margin: 10px 4px 0 4px;
}
#portfolio .portfolio-item .portfolio-wrap .portfolio-info .link-preview i,
#portfolio .portfolio-item .portfolio-wrap .portfolio-info .link-details i {
  font-size: 14px;
  color: #fff;
  line-height: 0;
}
.middle a {font-size:14px;background-color:#000;  color: #ffdc50;}
.middle a:hover {font-size:14px;background-color:#ffdc50;  color: #000;}

  
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column-image {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
  .middle p{display:none}
      .contenitore .link-preview,
	.contenitore .link-details {
				  display: inline-flex;
				  align-items: center;
				  justify-content: center;
				  line-height: 1;
				  width: 16px;
				  height: 16px;
				  background: #000;
				  border-radius: 50%;
				  margin: 10px 4px 0 4px;
}
#portfolio .portfolio-item .portfolio-wrap .portfolio-info .link-preview i,
#portfolio .portfolio-item .portfolio-wrap .portfolio-info .link-details i {
  font-size: 14px;
  color: #fff;
  line-height: 0;
}
.middle a {font-size:14px;background-color:#000;  color: #ffdc50;}
.middle a:hover {font-size:14px;background-color:#ffdc50;  color: #000;}

}



/* Clear floats after the columns */
.row:after {    content: "";    display: table;    clear: both;}
.wp-caption {position: relative;padding: 0;margin:0;display: inline-block;}
.wp-caption img {display: block;max-width: 100%;height: auto;}
.wp-caption-text {opacity: 0;position: absolute;width: 100%;height:100%;color: #fff;left: 0;bottom: 0;padding: 0.75em 1em;font-weight: 700;z-index: 2;-webkit-box-sizing: border-box;box-sizing: border-box;background-color: rgba(0,0,0,.7);-webkit-transition: opacity .3s ease-in-out ;transition: all 0.1s ease ;}
.wp-caption:hover .wp-caption-text {opacity: 1;}
								
/* Immagine con Overlay verde:0da69c*/
.contenitore {position: relative; background-color: #272828;margin:4px; }
.contenitore2 {position: relative; background-color: #005f98; }

.image {opacity: 1;  display: block;   width: 100%;  height: auto;  transition: .2s ease;  backface-visibility: hidden;}
.image2 {opacity: 1;  display: block; width: 100%;  height: auto;   transition: .2s ease;  backface-visibility: hidden;}
.middle {transition: .1s ease;opacity: 0;position: absolute;  top: 50%; left: 50%;transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);  text-align: left; width:80%; font-family:Raleway; font-weight:bold; color:#fff}
.middle a {background-color:#000;  color: #ffdc50;}
.middle a:hover {background-color:#ffdc50;  color: #000;}

.contenitore:hover .image { opacity: 0.2;}
.contenitore2:hover .image { opacity: 0;}

.contenitore:hover .middle {  opacity: 1;}
.contenitore2:hover .middle {  opacity: 1;}

.testocontenitore {  background-color: #;  color: white;  font-size: 0.9rem; font-weight:normal }




.contenitore .link-preview,
.contenitore .link-details {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  width: 36px;
  height: 36px;
  background: #000;
  border-radius: 50%;
  margin: 10px 4px 0 4px;
}

#portfolio .portfolio-item .portfolio-wrap .portfolio-info .link-preview i,
#portfolio .portfolio-item .portfolio-wrap .portfolio-info .link-details i {
  font-size: 22px;
  color: #fff;
  line-height: 0;
}

#contenitore .link-preview:hover,
#contenitore  .link-details:hover {
  background: #3395ff;
}


#contenitore  .link-preview:hover i,
#contenitore  .link-details:hover i {
  color: #fff;
}




/* Immagine con Overlay*/
/* END RESPONSIVE GRID */





.bgimg-2,.bgimg-3,.bgimg-4, .bgimg-5 {background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover;  margin: 0 auto; top:0; left: 0;}
.bgimg-2 {background-image: url("../immagini/calvino.jpg");min-height: 100%;}

.bg-toscana {background-image: url('mappa-toscana2.png'); max-width:70px; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: auto; margin: 0 auto; top:0; left: 0;}

.bgimg-10 {background-image: url('css-pcto/monitoraggio.jpg'); min-height: 50%;}
/* Create a Parallax Effect */
.bgimg-10 {background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; margin: 0 auto; top:0; left: 0;}
.bgfiligrana {background-image: url('css-pcto/filigrana.png'); min-height: 50%; z-index:99999999}
.bgfiligrana {background-attachment: fixed; background-position: ; background-repeat: repeat; background-size: ; margin: 0 auto; top:0; left: 0; z-index:99999999}
/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
    .bgimg10 {background-attachment: scroll;
    }
}


.connessioni-link a {
  color: #000;
  text-decoration: none;
  background-color: #ffdc50;
  padding-left:4px ;
  padding-right:4px;
  -webkit-text-decoration-skip: objects;
  font-weight: bold;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  font-size:100%;
}

.connessioni-link a:hover {
  color: #ffdc50;
  text-decoration: none;
  background-color: #000;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

.modal-link a {
  color: #ffdc50;
  text-decoration: none;
  background-color: #;
  padding-left:0px ;
  padding-right:0px;
  -webkit-text-decoration-skip: objects;
  font-weight: bold;
  border-top: 0px solid #fff;
  border-bottom: 0px solid #fff;
  font-size:100%;
}

.modal-link a:hover {
  color: #005f98;
  text-decoration: none;
  background-color: #;
  border-top: 0px solid #fff;
  border-bottom: 0px solid #fff;
}


.parallax-connessioni {
  /* The image used */
  background-image: url('../immagini/einaudi-bassano.jpg');

  /* Full height */
  height: 500px; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */
@media only screen and (max-device-width: 1366px) {
  .parallax-connessioni {
    background-attachment: scroll;
  }
}
#parallax-curtain{height:100%;background:rgba(255,220,80,0.8);}


.hr-dotted{border-top:8px dotted #ffdc50; margin-top:40px; opacity:;}


.rounded-tag{border-radius:0px; font-size:10px}
.button-tag{border-radius:14px; font-size:12px;display:inline-block;outline:0;padding:4px 12px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.btn-custom-tag{background:transparent; font-size:13px;display:inline-block;outline:0;padding:4px 8px;vertical-align:middle;overflow:hidden;color:#ed7d31;border:1px solid #ed7d31;-webkit-border-radius:0px;-moz-border-radius:0px;-ms-border-radius:0px;-o-border-radius:0px;border-radius:0px;box-sizing:border-box;font-weight: 400;}
.btn-custom-tag-black{text-decoration: none;background-color:#000; font-size:13px;display:inline-block;outline:0;padding:6px 10px;vertical-align:middle;overflow:hidden;color:#ffdc50;border:0px solid #000;-webkit-border-radius:0px;-moz-border-radius:0px;-ms-border-radius:0px;-o-border-radius:0px;border-radius:0px;box-sizing:border-box;font-weight: 400;}
.btn-custom-tag:hover,.btn-custom-tag-black:hover,.btn-custom3:active,.btn-custom-tag-black:active {text-decoration: none; background:#ffdc50;	color:#000;}
.button-glossario {background-color: #fff; border: none; border-radius: 0px; padding: 6px 12px; margin-top:0px;text-align: left;text-decoration: none; display: inline-block;font-size: 15px;cursor: pointer; width:auto;}
.btn-outline-white {  border: 1px solid #fff;color: #fff !important;background-color:#1e79ba; padding: 0.5rem; }
.btn-outline-white:hover, .btn-outline-white:focus, .btn-outline-white:active, .btn-outline-white:active:focus, .btn-outline-white.active {background-color:#fff;font-color: #1e79ba;border-color: #fff; }
.btn-outline-indire {color: #fff;background-color: transparent;  background-image: none;border-color: #fff;}
.btn-outline-indire:hover {color: #1e79ba;background-color: #fff;   border-color:#fff;}
.glossario a {background-color:#fff; color:#000; text-decoration: none;line-height:1.8em; padding: 2px;border: none;}
.glossario a:hover {background-color:#ed7d31; color:#fff; text-decoration: none; }

.modal-dialog-scrollable{display:-ms-flexbox;display:flex;max-height:calc(100% - 1rem)}
.modal-dialog-scrollable .modal-content{max-height:calc(100vh - 1rem);overflow:hidden}
.modal-dialog-scrollable .modal-footer,.modal-dialog-scrollable .modal-header{-ms-flex-negative:0;flex-shrink:0}
.modal-dialog-scrollable .modal-body{overflow-y:auto}
.modal .modal-fluid { width: 100%; max-width: 100%; }
.modal .modal-fluid .modal-content { width: 100%; }
.scrollable{overflow-y:auto}
.mark2 {  padding: 0.2em;  background-color: #1e79ba; color:#fff}
.w3-hide{display:none!important}
.w3-show-block,.w3-show{display:block!important}
.w3-show-inline-block{display:inline-block!important}
.tab-content2{	grid-column: 2 / 3;	grid-row: 2 / 5;	background:#;	position:relative;}
.tab-content2 > .tab-pane,.pill-content > .pill-pane {  	display: none;}
.tab-content2 > .active,.pill-content > .active {display: block;border-left:0px;	padding:0px;  	margin-left:0px;  	/*min-height: 636px;*/  	z-index: 100;}
/* Fading animation .fade {  -webkit-animation-name: fade;  -webkit-animation-duration: 0.5s;  animation-name: fade;  animation-duration: 0.5s;} */



/* Scrollbar personalizzata */
.scrollbar{	margin-left: 30px;	float: left;	height:;	width: ;	background: #;	overflow-y: scroll;	margin-bottom: 25px;}
#style-2::-webkit-scrollbar-track {	-webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0.3);	border-radius: 10px;	background-color: #f8f9fa;}
#style-2::-webkit-scrollbar{	width: 12px;	background-color: #;}
#style-2::-webkit-scrollbar-thumb{border:2px solid #e9e9e9;	border-radius: 10px;	-webkit-box-shadow: inset 0 0 0px rgba(0,0,0,.3);	background-color: #aaa;}
#style-3::-webkit-scrollbar-track {	-webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0.3);	border-radius: 10px;	background-color: #f8f9fa;}
#style-3::-webkit-scrollbar{	width: 12px;	background-color: #e9e9e9;}
#style-3::-webkit-scrollbar-thumb{border:2px solid #e9e9e9;	border-radius: 10px;	-webkit-box-shadow: inset 0 0 0px rgba(0,0,0,.3);	background-color: #aaa;}
/* Scrollbar personalizzata */



.w3-padding{padding:8px 16px!important}
.w3-display-container{position:relative}

.font-size-14{font-size:14px; line-height:100%}
.font-size-16{font-size:16px; line-height:1.2rem}
.font-size-18{font-size:18px}
.font-size-28{font-size:28px}
.font-size-38{font-size:38px}


/* PLAYLIST VIDEO */

#playlist a {font-weight:500; color:#ed7d31}
#playlist a:hover {font-weight:500; color:#000; text-decoration: none; }

{box-sizing:border-box}
.mySlides {display:none}
.slides {display:none}

/* slideshow container */
.slideshow-container {width: 60%;margin: 0 auto;}

/* Next & previous buttons */
.prev1, .next1 {cursor:pointer;position:absolute;top:50%;width:auto;padding:16px;margin-top:-22px;color:white;font-weight: bold;font-size: 18px;transition: 0.6s ease;border-radius: 0 3px 3px 0;}

/* Position the "next1 button" to the right */
.next1 {right: 0;border-radius: 3px 0 0 3px;}

/* On hover, add a black background color with a little bit see-through */
.prev1:hover, .next1:hover { background-color: rgba(0,0,0,0.8);}

/* Caption text */
.text {color:#000;font-size:15px;padding:8px 12px;position:absolute;bottom:8px;width:100%;text-align:center;}

/* Number text (1/3 etc) */
.numbertext {  color: #f2f2f2;  font-size: 12px;  padding: 8px 12px;  position: absolute;  top: 0;}

/* The dots/bullets/indicators */
.dot-usr {cursor: pointer;  height: 15px;  width: 15px;  margin: 0 2px;  background-color: #bbb;  z-index: 500; border-radius: 50%;  display: inline-block;  transition: background-color 0.6s ease;}
.active-usr, .dot-usr:hover {height: 20px;  width: 20px;  margin-bottom: 0px; margin-left:0px; z-index: 500; background-color: #ed7d31;  border: 0px solid #fff;}

/* Fading animation */
.fade {  -webkit-animation-name: fade;  -webkit-animation-duration: 0.5s;  animation-name: fade;  animation-duration: 0.5s;}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}
/* FINE PLAYLIST VIDEO */




#banner .claim {
    color: #fff;
    text-align: left;
    font-size: 13px;
    border-left: ;
    border-right:;
    line-height:120%;
    height: 100%;
    display: table;
    position: relative;
    padding-left: 20px;
}
#banner .claim-title{
    color: #fff;
    text-align: left;
    font-size: 14px;
    font-weight:800;
    line-height:120%;
    height: 100%;
    display: table;
    position: relative;
    padding-left: 20px;
    padding-bottom: 4px;
}


@media only screen and (max-width: 600px)  {
    #playlist h3, #playlist .lead{
    font-size: 97%;
    }}


@media only screen and (max-width: 600px)  {
    #demo .carousel-caption h5{
    font-size: 90%;
    }}

@media only screen and (max-width: 600px)  {
    #gallery .h3-ridotto{
    font-size: 1.2rem;
    }}
@media only screen and (max-width: 600px)  {
    #gallery .h5-ridotto{
    font-size: 1rem;
    }}


@media only screen and (max-width: 600px)  {
    #testo-citato p{
    font-size: 90%;
    }}



@media only screen and (max-width: 600px)  {
    .img-fluid {
    width: 60%;
    }}


@media only screen and (max-width: 600px)  {
    .capitoli3 {
    font-size: 80%;
    }}


@media only screen and (max-width: 600px)  {
    .step-excerpt h5 {
    font-size: 1rem;
    }}


@media only screen and (max-width: 600px)  {
    .capitoli-step-excerpt {
    font-size: 90%;
    }}



@media only screen and (max-width: 600px)  {
    .capitoli {
    text-align: left;
    font-size: 1.2rem;
    height: 80%;
    }}

@media only screen and (max-width: 600px)  {
    .capitoli2 {
    text-align: left;
    font-size: 1.1rem;
    height: 80%;
    }}


@media only screen and (max-width: 600px)  {
    #banner .web-name {
    color: #fff;
    text-align: left;
    font-size: 22px;
    height: 100%;
    display: table;
    position: relative;
    margin-top: 10px;
    padding-left:8px;
    padding-top:8px;
    }}



@media only screen and (max-width: 600px)  {
    #banner .claim {
    color: #fff;
    text-align: left;
    font-size: 16px;
    height: 100%;
    display: table;
    position: relative;
    margin-top: 10px;
    padding-left:0px;
    padding-top:8px;
    }}
    
    
#banner .claim h5 {
    color: #fff;
    text-align: left;
    font-size: 18px;
    line-height: 120%;
    font-weight: 300;
    display: table-cell;
    vertical-align: middle;
    padding-left: 0px;
    padding-right: 0px;
}


#banner .claim{
padding-left: -10px;
	border-left:1px solid rgba(255,255,255,0.2);
	border-right:0;
	width:100%
}


@media only screen and (max-width: 600px)  {
#banner .claim{
	border-left:0px solid rgba(255,255,255,0.2);
	border-right:0;
	width:100%
}
}

  #banner .claim .smaller-claim {
    font-size: 14px !important;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}




#portfolio .container-fluid, #portfolio .container-sm, #portfolio .container-md, #portfolio .container-lg, #portfolio .container-xl, #portfolio .container-xxl, #portfolio .container {
  max-width: 1920px;
}
#portfolio .container-fluid .portfolio-box, #portfolio .container-sm .portfolio-box, #portfolio .container-md .portfolio-box, #portfolio .container-lg .portfolio-box, 
#portfolio .container-xl .portfolio-box, #portfolio .container-xxl .portfolio-box, #portfolio .container .portfolio-box {
  position: relative;
  display: block;
}
#portfolio .container-fluid .portfolio-box .portfolio-box-caption, #portfolio .container-sm .portfolio-box .portfolio-box-caption, 
#portfolio .container-md .portfolio-box .portfolio-box-caption, #portfolio .container-lg .portfolio-box .portfolio-box-caption, 
#portfolio .container-xl .portfolio-box .portfolio-box-caption, #portfolio .container-xxl .portfolio-box .portfolio-box-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  text-align: center;
  opacity: 0;
  color: #fff;
  background: rgba(255, 102, 0, 0.8);
  transition: opacity 0.25s ease;
  text-align: center;
}
#portfolio .container-fluid .portfolio-box .portfolio-box-caption .project-category, #portfolio .container-sm .portfolio-box .portfolio-box-caption .project-category, #portfolio .container-md .portfolio-box .portfolio-box-caption .project-category, #portfolio .container-lg .portfolio-box .portfolio-box-caption .project-category, #portfolio .container-xl .portfolio-box .portfolio-box-caption .project-category, #portfolio .container-xxl .portfolio-box .portfolio-box-caption .project-category {
  font-family: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
}
#portfolio .container-fluid .portfolio-box .portfolio-box-caption .project-name, #portfolio .container-sm .portfolio-box .portfolio-box-caption .project-name, #portfolio .container-md .portfolio-box .portfolio-box-caption .project-name, #portfolio .container-lg .portfolio-box .portfolio-box-caption .project-name, #portfolio .container-xl .portfolio-box .portfolio-box-caption .project-name, #portfolio .container-xxl .portfolio-box .portfolio-box-caption .project-name {
  font-size: 1.2rem;
}
#portfolio .container-fluid .portfolio-box:hover .portfolio-box-caption, #portfolio .container-sm .portfolio-box:hover .portfolio-box-caption, #portfolio .container-md .portfolio-box:hover .portfolio-box-caption, #portfolio .container-lg .portfolio-box:hover .portfolio-box-caption, #portfolio .container-xl .portfolio-box:hover .portfolio-box-caption, #portfolio .container-xxl .portfolio-box:hover .portfolio-box-caption {
  opacity: 1;
}


#portfolio2 .portfolio-item {
  max-width: 26rem;
  margin-left: auto;
  margin-right: auto;
}

#portfolio2 .portfolio-item .portfolio-link {
  position: relative;
  display: block;
  margin: 0 auto;
}
#portfolio2 .portfolio-item .portfolio-link .portfolio-hover {
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 102, 0, 0.8);
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity ease-in-out 0.25s;
}
#portfolio2 .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content {
  font-size: 1.25rem;
  color: white;
}
#portfolio2 .portfolio-item .portfolio-link:hover .portfolio-hover {
  opacity: 1;
}
#portfolio2 .portfolio-item .portfolio-caption {
  padding: 1.5rem;
  text-align: center;
  background-color: #fff;
}
#portfolio2 .portfolio-item .portfolio-caption .portfolio-caption-heading {
  font-size: 0.975rem;
  font-family: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 600;
  margin-bottom: 0;
}
#portfolio2 .portfolio-item .portfolio-caption .portfolio-caption-subheading {
  font-style: italic;
  font-family: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.portfolio-modal .modal-dialog {
  margin: 1rem;
  max-width: 50vw;
  margin: 0 auto;
}
.portfolio-modal .modal-content {
  padding-top: 6rem;
  padding-bottom: 6rem;
  text-align: center;
}
.portfolio-modal .modal-content h2, .portfolio-modal .modal-content .h2 {
  font-size: 3rem;
  line-height: 3rem;
}
.portfolio-modal .modal-content p.item-intro {
  font-style: italic;
  margin-bottom: 2rem;
  font-family: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.portfolio-modal .modal-content p {
  margin-bottom: 2rem;
}
.portfolio-modal .modal-content ul.list-inline {
  margin-bottom: 2rem;
}
.portfolio-modal .modal-content img {
  margin-bottom: 2rem;
}
.portfolio-modal .close-modal {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 3rem;
  height: 3rem;
  cursor: pointer;
  background-color: transparent;
}
.portfolio-modal .close-modal:hover {
  opacity: 0.3;
}*/

.embed-responsive{position:relative;display:block;width:100%;padding:0;overflow:hidden}.embed-responsive::before{display:block;content:""}.embed-responsive .embed-responsive-item,.embed-responsive embed,.embed-responsive iframe,.embed-responsive object,.embed-responsive video{position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;border:0}
.embed-responsive-21by9::before{padding-top:42.857143%}.embed-responsive-16by9::before{padding-top:56.25%}.embed-responsive-4by3::before{padding-top:75%}.embed-responsive-1by1::before{padding-top:100%}
.middle {transition: .1s ease;opacity: 0;position: absolute;  top: 50%; left: 50%;transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);  text-align: left; width:80%}



*/
/* Accordion CONNESSIONI Horizontal line */
.collapsible-link::before {
  content: '';
  width: 14px;
  height: 2px;
  background: #333;
  position: absolute;
  top: calc(50% - 1px);
  right: 1rem;
  display: block;
  transition: all 0.3s;
}

/* Vertical line */
.collapsible-link::after {
  content: '';
  width: 2px;
  height: 14px;
  background: #333;
  position: absolute;
  top: calc(50% - 7px);
  right: calc(1rem + 6px);
  display: block;
  transition: all 0.3s;
}

.collapsible-link[aria-expanded='true']::after {
  transform: rotate(90deg) translateX(-1px);
}

.collapsible-link[aria-expanded='true']::before {
  transform: rotate(180deg);
}







/* Accordion Carlo */

.accordion-container {
  margin-top: 30px;
}

@media (max-width: 767px) {
  .accordion-container {
    margin-top: 15px;
  }
}

.panel-heading {
  h4, i {
  display: inline-block;
  padding: 5px;
  margin: 0px;
  }
  i {
    margin: 4px;
    -webkit-transition: 0.25s ease-in-out;
    -moz-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
  }
  &.collapsed i {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
}

.panel-body p {
  margin-left: 10px;
}