/*--- title breadcrumb ---*/
.breadcrumb .currentitle {
  padding: 7px 8px;
}

.currentitle {
	color: #000;
	padding: 0 8px;
	border-radius: 4px;
	line-height: 150%;
}

.currentitle.blu {
	background: #3CB4E7;
}

.new-line {
  display: none;
}

@media (max-width: 580px) {
	.new-line {
		content: "";
		display: block;
		margin: 1rem;
	}
}

a.bclink {
  text-decoration: underline #3CB4E7 4px !important;
  text-underline-offset: 11px !important;
  padding: 0 4px !important;
  left: -2px !important;
  position: relative !important;
  color: #000 !important;
  line-height: 150% !important;
}

a.bclink:hover {
  text-decoration: transparent !important;
  text-underline-offset: 4px !important;
  content: '';
  background-color: #3CB4E7;
  -webkit-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  border-radius: 4px;
  cursor: pointer;
  padding: 8px 4px 7px 4px !important;
}

a.bclink:focus {
  outline: solid 2px #f7941d !important;
  background-color: #fff !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  text-underline-offset: 0 !important;
  content: '';
  -webkit-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  cursor: pointer;
  padding: 5px 4px 5px 4px !important;
  border-bottom: unset !important;
  display: inline;
}

/*------*/

.flowchart h2 {
  font-size: 1rem;
}

.flowchart p {
  margin: 0 !important;
}

.flowchart .bold {
  font-weight: 600;
}

article.flowchart {
  display: flex;
justify-content: center;
height: 85rem;
}

.midlecol {
position: absolute;
text-align: center;
background-color: #3CB4E7;
padding: 1rem;
border-radius: 16px;
width: 12rem;
}

.midlecol figcaption {
  margin: 0 !important;
	font-weight: 600;
}

.h-line-1 .arrowl {
	position: relative;
	left: 3rem;
	line-height: 150%;
}

.s-line-1 .arrowr {
	position: relative;
	left: -3rem;
	line-height: 150%;
}

.h-line-2, .h-line-3, .h-line-4, .h-line-5, .h-line-6  {
  position: relative;
  left: -3rem;
}

.s-line-2, .s-line-3, .s-line-4, .s-line-5, .s-line-6  {
  position: relative;
  left: 3rem;
}

.h-line-7 {
  position: relative;
  left: 3rem;
}

.s-line-7 {
  position: relative;
  left: -3rem;
}

/*------*/
.arrowl, .arrowr, .arrowldown {
font-size: 4em;
line-height: 100%;
height: 5rem;
}

.arrowl {
-webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
        transform: rotate(45deg);
margin-bottom: 10px;
}

.arrowr {
-webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
margin-bottom: 10px;
}

.arrowldown {
  margin-bottom: 20px;
}

.flowchart .fa, .flowchart .far, .flowchart .fas {
	font-family: "Font Awesome 5 Free";
	font-size: 2rem !important;
	line-height: 100% !important;
	margin: 8px !important;
	color: #000;
}

.h-line-1 .arrowl, .s-line-1 .arrowr {
  margin-top: 0.75rem !important;
}
/*------*/

.hostcol {
  left: -10vw;
}

.studentcol {
  left: 10vw;
}

.hostcol, .studentcol {
width: 0vw;
position: relative;
top: 4rem;
}

.level-1, .matcha_level-1, .matchb_level-1, .matcha_level-3, .matchb_level-3 {
list-style: none;
margin: 0;
}

.hostcol .level-1 {
background: #f0f8ff6b;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
left: 25%;
}

.h-line-2, .h-line-6 {
text-align: center;
padding: 1rem;
border-radius: 16px;
display: flex;
flex-direction: column;
width: 8rem;
line-height: 150%;
background-color: #B2D234;
}

.h-line-4 {
  width: 20rem;
  padding: 16px;
  line-height: 1.5;
  background: #3CB4E780;
  border-radius: 1rem;
	height: 11rem;
}

.s-line-4 {
  width: 20rem;
  padding: 16px;
  line-height: 1.5;
  background: #3CB4E780;
  border-radius: 16px;
  height: 11rem;
}

.studentcol .level-1 {
background: #faebd773;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
left: -25%;
}

.s-line-2, .s-line-6 {
background-color: #f7941d;
text-align: center;
padding: 1rem;
border-radius: 16px;
display: flex;
flex-direction: column;
width: 8rem;
line-height: 150%;
}

/*--------------------------------------*/

.matchatitle {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: end;
width: 0;
left: 10vw;
position: relative;
}

.matitle, .mbtitle {
  text-align: center;
  background-color: #3CB4E7;
  padding: 1rem;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  width: 10rem;
}

.matitle .fas.fa-handshake {
  font-size: 2rem !important;
}

.mbtitle .fas.fa-handshake {
  font-size: 2rem !important;
}

.matcha_level-1, .matchb_level-1 {
  display: flex;
  text-align: center;
  gap: 5vw;
}

.matcha_level-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style: none;
  margin: 0;
}

.matchbtitle {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: start;
width: 0;
right: 10vw;
position: relative;
}

.matchb_level-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style: none;
  margin: 0;
}

.matchup, .matchdown {
display: flex;
flex-direction: column;
margin-top: 1rem;
position: relative;
}

.matchup {
  left: 7rem;
}

.matchdown {
  left: -7rem;
}

.matchup .fa.fa-thumbs-up {
  color: green;
}

.matchdown .fa.fa-thumbs-down {
  color: red;
}

.matcha_level-4 .arrowl, .matchb_level-4 .arrowl {
  position: relative;
  left: 2rem;
}

.matchb_level-4 .arrowr, .matcha_level-4 .arrowr {
  position: relative;
  left: -2rem;
}

.stipula, .nricerca {
  display: flex;
  flex-direction: column;
  width: 20rem;
  padding: 1rem;
  line-height: 1.5;
  background: #88CEEC;
  border-radius: 16px;
  height: 9rem;
}

@media (max-width: 1200px) {
	.h-line-4 {
  width: 25vw;
}
		.s-line-4 {
  width: 25vw;
}
}

@media (max-width: 1024px) {
		.h-line-4 {
	width: 28vw;
	height: 14rem;
}
		.s-line-4 {
  width: 28vw;
  height: 14rem;
}
}

@media (max-width: 768px) {
	article.flowchart {
  height: 90rem;
}
	
.hostcol {
  left: -10vw;
}

.h-line-1, .h-line-2, .h-line-3, .h-line-4, .h-line-5, .h-line-6 {
  left: -12.5vw;
  position: relative;
}
	
.h-line-1 .arrowl {
  position: relative;
  left: 12.5vw;
}

.s-line-1 .arrowr {
	  position: relative;
  left: -12.5vw;
}

.h-line-2, .s-line-2 {
  width: 6.5rem;
}

.h-line-4, .s-line-4 {
  width: 42.5vw;
  height: 11rem;
}

	.h-line-7 {
  left: -8vw;
  position: relative;
}
	
	.s-line-7 {
  left: 8vw;
  position: relative;
}

.s-line-1, .s-line-2, .s-line-3, .s-line-4, .s-line-5, .s-line-6 {
  left: 12.5vw;
  position: relative;
}

	.stipula, .nricerca {
  display: flex;
  flex-direction: column;
  width: 42.5vw;
  padding: 1rem;
  line-height: 1.5;
  background: #88CEEC;
  border-radius: 1rem;
  height: 10rem;
}
	
	
	.matchup {
  left: 10vw;
}

.matchdown {
  left: -10vw;
}
	
.matcha_level-4 .arrowl, .matchb_level-4 .arrowl {
  position: relative;
  left: 5vw;
}
	
.matcha_level-4 .arrowr, .matchb_level-4 .arrowr {
  position: relative;
  left: -5vw;
}
	
.matcha_level-1, .matchb_level-1 {
  display: flex;
  text-align: center;
  gap: 2.5vw;
}
}

@media (max-width: 580px) {
	article.flowchart {
  height: 90rem;
}
	
.hostcol {
  right: 10vw;
}

.h-line-1, .h-line-2, .h-line-3, .h-line-4, .h-line-5, .h-line-6 {
  left: -12.5vw;
  position: relative;
}

.h-line-1 .arrowl {
  position: relative;
  left: 12.5vw;
}

.s-line-1 .arrowr {
	  position: relative;
  left: -12.5vw;
}

.h-line-2, .s-line-2 {
  width: 6.5rem;
}

.h-line-4, .s-line-4 {
  width: 42.5vw;
  height: 14rem;
}

.h-line-7 {
  left: -8vw;
  position: relative;
}
	
	.s-line-7 {
  left: 8vw;
  position: relative;
}

.s-line-1, .s-line-2, .s-line-3, .s-line-4, .s-line-5, .s-line-6 {
  left: 12.5vw;
  position: relative;
}

	.stipula, .nricerca {
  display: flex;
  flex-direction: column;
  width: 42.5vw;
  padding: 1rem;
  line-height: 1.5;
  background: #88CEEC;
  border-radius: 1rem;
  height: 14rem;
}
	
	.matchup {
  left: 12vw;
}

.matchdown {
  left: -12vw;
}
	
.matcha_level-4 .arrowl, .matchb_level-4 .arrowl {
  position: relative;
  left: 5vw;
}
	
.matcha_level-4 .arrowr, .matchb_level-4 .arrowr {
  position: relative;
  left: -5vw;
}
	
.matcha_level-1, .matchb_level-1 {
  display: flex;
  text-align: center;
  gap: 2.5vw;
}
}


@media (max-width: 480px) {
	article.flowchart {
  height: 90rem;
}
	
.hostcol {
  left: -10vw;
}

.h-line-1, .h-line-2, .h-line-3, .h-line-4, .h-line-5, .h-line-6 {
  left: -12.5vw;
  position: relative;
}
	
.h-line-1 .arrowl {
  position: relative;
  left: 12.5vw;
}

.s-line-1 .arrowr {
	  position: relative;
  left: -12.5vw;
}

.h-line-2, .s-line-2 {
  width: 6.5rem;
}

.h-line-4, .s-line-4 {
  width: 42.5vw;
  height: 18.5rem;
}

.s-line-1, .s-line-2, .s-line-3, .s-line-4, .s-line-5, .s-line-6 {
  left: 12.5vw;
  position: relative;
}
	
.h-line-7 {
  left: -5vw;
  position: relative;
}
	
.s-line-7 {
  left: 5vw;
  position: relative;
}
	
	.stipula, .nricerca {
  display: flex;
  flex-direction: column;
  width: 42.5vw;
  padding: 1rem;
  line-height: 1.5;
  background: #88CEEC;
  border-radius: 1rem;
  height: 14rem;
}

	.matchup {
  left: 5vw;
}

.matchdown {
  left: -5vw;
}
	
.matcha_level-4 .arrowl, .matchb_level-4 .arrowl {
  position: relative;
  left: 5vw;
}
	
.matcha_level-4 .arrowr, .matchb_level-4 .arrowr {
  position: relative;
  left: -5vw;
}
	
.matcha_level-1, .matchb_level-1 {
  display: flex;
  text-align: center;
  gap: 2.5vw;
}
}

.lastarrow {
	left: 0;
}