/* STRUTTURA */

.manifacturingProcess,
.manifacturingProcess * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 150px;
  position:relative;
  line-height: 1em;
  font-variant: small-caps;
}

.manifacturingProcess {
  position: relative;
  display: block;
  max-width: 1280px;
  margin: auto;
  float: none;
  overflow:hidden;
  margin: 30px auto 0 auto;
  padding: 0 15px;
}

.manifacturingProcess:before {
  content: "";
  opacity: 0.25;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  width:100%;
  height:100%;
  display: block;
  background: white center top no-repeat;
  background-size: 100% auto !important;
  overflow:hidden;
  /*   background-image: url(scheme.png); */
}

.mp-cols {
  display:table;
  width:100%;
}

.mp-cols .mp-col {
  display:table-cell;
  border:gray solid 0;
  vertical-align: top;
}

.mp-cols .mp-col .rotated-text {
  font-size: 0.3em;
  line-height:1em;
  display:block;
}

.mp-cols .mp-col:first-child,
.mp-cols .mp-col:last-child {
  display:table-cell;
  border: none;
  width: 1.25em;
}

/* POSIZIONI */

[class*="mp-position"] {
  position:absolute;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.mp-position-center {
  position:absolute;
  top: 50%;
  left: 50%;
}

.mp-position-top {
  top: 0;
  left: 50%;
  right:auto;
  bottom:auto;
}

.mp-position-right {
  top: 50%;
  left: 100%;
}

.mp-position-bottom {
  top: 100%;
  left: 50%;
}

.mp-position-left {
  left:0;
  top: 50%;
}

.mp-position-right-top {
  top: 0;
  left: 100%;
}

.mp-position-left-top {
  top: 0;
  left: 0;
  right:auto;
  bottom:auto;
}

.mp-position-right-bottom {
  top: 100%;
  left: 100%;
}

.mp-position-left-bottom {
  top: 100%;
  left: 0;
}

/* ELEMENTI */

.graffa {
  height: auto;
  width: 0.5em;
}

.mp-processBox {
  margin: 0 1em 0.125em 1em;
  height: 3em;
  -webkit-border-radius: 0.25em;
  -moz-border-radius: 0.25em;
  border-radius: 0.25em;
  position:relative;
}

.mp-processBox.mp-processBox-half {
  height: 1.5em;
}

.mp-processBox.mp-processBox-dashed {
  border: #d04a39 dotted 0.05em;
}

.mp-processBox:first-child {
  margin-top: 0.5em;
}

.mp-processBox:last-child {
  margin-bottom: 0.75em;
}

.mp-processBox:nth-child(3) {
  margin-top: -0.125em;
}

.mp-videoBox {
  -webkit-border-radius: 0.25em;
  -moz-border-radius: 0.25em;
  border-radius: 0.25em;
  background: #ddd;
  background-size: cover;
  width: 1em;
  height: 1em;
  z-index:2;
  -webkit-box-shadow: 3px 3px 3px 0 #bbb, 0 0 0 7px white ;
  -moz-box-shadow: 3px 3px 3px 0 #bbb, 0 0 07px white ;
  box-shadow: 3px 3px 3px 0 #bbb, 0 0 0 10px white ;
}

.mp-videoBox[onclick] {
  -webkit-transition: box-shadow 0.4s ease-in-out;
  -o-transition: box-shadow 0.4s ease-in-out;
  transition: box-shadow 0.4s ease-in-out;
  cursor: pointer;
}
.mp-videoBox[onclick]:hover {
-webkit-box-shadow: 3px 3px 3px 0 #d04a39, 0 0 0 7px white ;
-moz-box-shadow: 3px 3px 3px 0 #d04a39, 0 0 07px white ;
box-shadow: 3px 3px 3px 0 #d04a39, 0 0 0 10px white ;
}

.mp-videoBox.mp-arrows {
  z-index: 1;
}

.mp-videoBox.mp-arrows:before,
.mp-videoBox.mp-arrows:after {
  display:block;
  content: "";
  width: 0;
  height: 0;
  margin-top:-0.1em;
}

.mp-videoBox.mp-arrows:before {
  border-top: 0.1em solid transparent;
  border-bottom: 0.1em solid transparent;
  border-right: 0.15em solid #d04a39;
  position:absolute;
  top: 50%;
  margin-top: -0.075em;
  left: 100%;
}

.mp-videoBox.mp-arrows:after {
  border-top: 0.1em solid transparent;
  border-bottom: 0.1em solid transparent;
  border-left: 0.15em solid #d04a39;
  position:absolute;
  margin-top: -0.075em;
  top: 50%;
  right: 100%;
}

.rotated-text {
  color:#666;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height:0;
  text-align:center;
  white-space: nowrap;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

/* prima colonna */

.mp-cols .mp-col:first-child .mp-videoBox {
  position: absolute;
  top: 6.6em;
  left: 0.5em;
}

.mp-cols .mp-col:first-child .graffa {
  position: absolute;
  top: 0;
  right: -0.5em;
  height: 11em;
}

.mp-cols .mp-col:first-child .rotated-text {
  position: absolute;
  top: 19em;
  left: 0.75em;
  text-align:left;
}

/* ultima colonna */

.mp-cols .mp-col:last-child .mp-videoBox {
  position: absolute;
  top: 4.65em;
  right: 0.05em;
}

.mp-cols .mp-col:last-child .graffa {
  position: absolute;
  top: 1.5em;
  left: -0.5em;
  height: 7em;
}

.mp-cols .mp-col:last-child .rotated-text {
  position: absolute;
  top: 11em;
  left:auto;
  right: 0.75em;
  text-align:right;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.mp-label {
  font-size: 0.15em;
  position: absolute;
  top:100%;
  left:50%;
  margin: 0.5em 0 0 0;
  padding:0;
  line-height: 0.8em;
  border: gray solid 0;
  width:auto;
  max-width:200%;
  height: auto;
  text-align: center;
  z-index:3;
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  color: #666;
}

.line-continue,
.line-arrow {
  position:absolute;
  top:calc( 100% + 5px);
  left:50%;
  border-left: #d04a39 dotted 0.05em;
  height:calc( 0.5em - 5px);
  width: 0.05em;
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

.line-arrow {
  height:calc( 0.5em - 20px);
}

.line-arrow:after {
  display:block;
  content: "";
  width: 0;
  height: 0;
  border-left: 0.1em solid transparent;
  border-right: 0.1em solid transparent;
  border-top: 0.15em solid #d04a39;
  position:absolute;
  bottom: -5px;
  left: -0.115em;
}

/* titoli */

.mp-title {
  margin:0;
  padding:0;
  font-size: 0.3em;
  border: gray solid 0;
  max-width: calc( 4em * 1.7 );
  height: auto;
  text-align: center;
  z-index:3;
  line-height: 0.8em;
  color: #a1a7a7;
  width: 5EM;
}

.mp-title:before,
.mp-label:before {
  display: block;
  content: '';
  background: rgba(255,255,255,0.75);
  width: 30%;
  height: 100%;
  position:absolute;
  top:50%;
  left:50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: -1;
}

.mp-title.mp-main-title {
  width: 100%;
  max-width: 100%;
  margin: 0 0 0.3em 0;
}

/* modifiche posizione per titoli */

.mp-title.mp-position-top,
.mp-title.mp-position-left-top,
.mp-title.mp-position-right-top {
  margin-top: 1.5em;
}

.mp-title.mp-position-bottom,
.mp-title.mp-position-left-bottom,
.mp-title.mp-position-right-bottom {
  margin-bottom: 1.5em;
}

/* RESPONSIVE */


@media (max-width:350px) {
  .mp-processBox:nth-child(2) .mp-videoBox.mp-position-left,
  .mp-processBox:nth-child(2) .mp-videoBox.mp-position-right {
    margin-top: -0.75em;
  }
  .mp-processBox:nth-child(2) .mp-videoBox.mp-position-left-bottom,
  .mp-processBox:nth-child(2) .mp-videoBox.mp-position-right-bottom {
    margin-top: -1.25em;
  }
  .mp-label {
    min-width: auto !important;
    max-width: none !important;
    width: 150% !important;
  }
}

@media (min-width:351px) and (max-width:400px) {
  .mp-processBox:nth-child(2) .mp-videoBox.mp-position-left-bottom,
  .mp-processBox:nth-child(2) .mp-videoBox.mp-position-right-bottom {
    margin-top: -0.35em;
  }
}

@media (max-width:400px) {
  .manifacturingProcess, .manifacturingProcess * { font-size: 40px; }
  .manifacturingProcess { padding: 0 5px; }
  .mp-title { font-size: 10px; font-weight: bold;}
  .mp-label { font-size: 9px; /*min-width: 200%;*/ max-width: 300%; }
}

@media (min-width:400px) and (max-width:560px) {
  .manifacturingProcess, .manifacturingProcess * { font-size: 50px; }
}

@media (max-width:560px) {
  .line-continue, .line-arrow { height: 1em; }
  .line-arrow:after { bottom: 5px; }
  .mp-processBox { height: 4em; }
  .mp-processBox.mp-processBox-half { height: 2em; }
  .mp-videoBox {
    -webkit-box-shadow: 3px 3px 0 0 #bbb;
    -moz-box-shadow: 3px 3px 0 0 #bbb;
    box-shadow: 3px 3px 0 0 #bbb;
  }
}

@media (min-width:560px) and (max-width:640px) {
  .manifacturingProcess, .manifacturingProcess * { font-size: 70px; }
}

@media (min-width:640px) and (max-width:768px) {
  .manifacturingProcess, .manifacturingProcess * { font-size: 80px; }
}

@media (min-width:768px) and (max-width:1024px) {
  .manifacturingProcess, .manifacturingProcess * { font-size:95px; }
}

@media (min-width:1024px) and (max-width:1200px) {
  .manifacturingProcess, .manifacturingProcess * { font-size: 120px; }
}

@media (min-width:400px) {
  .mp-title { font-size: 0.3em; }
  .mp-label { font-size: 0.15em; }
}