/*General SA-Cylinders styles*/

.sa-cylinders .formula-var,
.sa-cylinders .formula {
  color: #cc0000;
}

.question-manager .question{
  padding: 20px 15px;
}
  .question-manager .prompt,
  .question-manager .illustration{
    width: 340px;
    height: 320px;
    vertical-align: middle;
    margin:0;
  }
  .question-manager .prompt{
    padding: 0;
    float:right;
  }
    .question-manager .prompt-content{
      display: inline-block;
      vertical-align: middle;
      padding: 10px;
      text-align: left;
    }
    .question-manager .prompt:before{
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
    }

/*screen-1*/
.screen-1 .intro-item{
  display: inline-block;
  vertical-align: middle;
  width: 330px;
  height: 320px;
  margin-right: 10px;
  text-align: left;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  padding: 10px;
  overflow: hidden;
  font-size: 15px;
}

  .screen-1 .intro-item:last-child{
    margin-right: 0;
  }

  .intro-animation{
    border: 2px solid #006699;
    background: #fafdfd; /* Old browsers */
    background: -moz-linear-gradient(top, #fafdfd 0%, #94c8f5 66%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafdfd), color-stop(66%,#94c8f5)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #fafdfd 0%,#94c8f5 66%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #fafdfd 0%,#94c8f5 66%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #fafdfd 0%,#94c8f5 66%); /* IE10+ */
    background: linear-gradient(to bottom, #fafdfd 0%,#94c8f5 66%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafdfd', endColorstr='#94c8f5',GradientType=0 ); /* IE6-9 */
  }

    .screen-1 .intro-animation .animation-container{
      margin-top: 30px;
    }

      .screen-1 .intro-animation .animation-player{
        padding-bottom: 55%;
        border: none;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
      }

.screen-1 .instructions-container{
  border: 2px solid #cc0000;
  background: #ffffff;
}

  .screen-1 .intro-item-content{
    display: inline-block;
    vertical-align: middle;
  }

    .screen-1 .instructions-container:after{
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
    }

    .screen-1 .instructions-container .button-container{
      text-align: center;
    }

/*screen-2*/

.screen-2 .question-1 .field-container-1{
  top: 63%;
  left: 50%;
  margin-left: -25px;
}

.screen-2 .question-2 .field-container-1{
  top: 69%;
  left: 50%;
  margin-left: -25px;
}

.screen-2 .question-3 .field-container-1{
  top: 65%;
  left: 50%;
  margin-left: -25px;
}

.screen-2 .question-4 .field-container-1{
  top: 59%;
  left: 50%;
  margin-left: -25px;
}

.screen-2 .question-4 .total{
  text-align: center;
}
.screen-2 .question-4 .answer-unit{
  margin-left: 90px;
  margin-top: 20px;
  display: block;
}

.screen-3 .screen-content{
  margin-bottom: 40px;
}

.summary-item{
  width: 330px;
  height: 340px;
  vertical-align: top;
  display: inline-block;
  margin-right: 10px;
  position: relative;
}
  .summary-item:last-child{
    margin-right: 0px;
  }

  .summary-content{
    float: none;
    border: 2px solid #cc0000;
    background: #ffffff;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    padding: 10px;
  }


  .equation .formula{
    margin-bottom: 0;
    font-size: 13px;
  }

  .equation img{
    position: absolute;
    top:auto;
    bottom: 10px;
    right: 10px;
    left: auto;
  }

    .equation .total{
      display: block;
      margin-top: 100px;
      font-size: 18px;
    }

.screen-4 .question{
  padding: 5px;
  vertical-align: middle;
}

  .screen-4 figure,
  .screen-4 .illustration{
    display: inline-block;
    vertical-align: middle;
    float: none;
  }

  .screen-4 figure{
    width: 340px;
    height: 340px;
  }

  .screen-4 .illustration{
    width: 315px;
    margin-right: 20px;
  }

  .screen-4 .prompt{
    width: 330px;
    height: 268px;
    position: absolute;
    top: 50%;
    margin-top: -134px;
    right: 0;
  }

    .screen-4 .prompt-content{
      text-align: center;
    }

  .screen-4 .depth-2.question-index-2{
    text-align: left;
  }

  .screen-4 .depth-2.question-index-2:after{
    content:'';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }

    .screen-4 .total{
      margin-top: 35px;
    }
    .screen-4 .answer-unit{
      display: block;
      margin-top: 20px;
    }

  /*question 1*/
    .screen-4 .question-1-1 .field-container-1{top: 30%; left: 39%;}
    .screen-4 .question-1-1 .field-container-2{top: 44%; left: 71%;}
    .screen-4 .question-1-1 .field-container-3{top: 61%; left: 39%;}

    .screen-4 .question-1-2 .field-container-1{top: 70%; left: 40%;}

  /*question 2*/
    .screen-4 .question-2-1 .field-container-1{top: 29%; left: 47%;}
    .screen-4 .question-2-1 .field-container-2{top: 45%; left: 60%;}
    .screen-4 .question-2-1 .field-container-3{top: 61%; left: 47%;}

    .screen-4 .question-2-2 .field-container-1{top: 70%; left: 40%;}

  /*question 3*/
    .screen-4 .question-3-1 .field-container-1{top: 33%; left: 44%;}
    .screen-4 .question-3-1 .field-container-2{top: 59%; left: 77%;}
    .screen-4 .question-3-1 .field-container-3{top: 67%; left: 45%;}

    .screen-4 .question-3-2 .field-container-1{top: 70%; left: 40%;}

  /*question 4*/
    .screen-4 .question-4-1 .field-container-1{top: 34%; left: 44%;}
    .screen-4 .question-4-1 .field-container-2{top: 58%; left: 78%;}
    .screen-4 .question-4-1 .field-container-3{top: 66%; left: 45%;}

    .screen-4 .question-4-2 .field-container-1{top: 70%; left: 40%;}

  /*question 5*/
    .screen-4 .question-5-1 .field-container-1{top: 33%; left: 46%;}
    .screen-4 .question-5-1 .field-container-2{top: 45%; left: 57%;}
    .screen-4 .question-5-1 .field-container-3{top: 58%; left: 46%;}

    .screen-4 .question-5-2 .field-container-1{top: 70%; left: 40%;}

@media all and (max-width: 750px){
  
  .summary-item{
    display: block;
    max-width: 100%;
    margin: 0 auto 10px !important;
    float: none;
    height: auto;
  }
  
    .summary-item img{
      position: relative;
      margin:auto;
    }
  
      .summary-item .total{
        margin-top: auto;
      }
  
  .intro-item,
  .question-manager .illustration,
  .question-manager form,
  .question-manager .prompt{
    float: none !important;
    display: block !important;
    margin: 0 auto 10px !important;
    position: relative !important;
    top:auto !important;
    right: auto !important;
    max-width: 340px !important;
    height: auto !important;
  }
  
  .intro-item,
  .question-manager .prompt{
    max-width: 100% !important;
  }
  
  .question-manager .prompt{
    padding-bottom: 50px;
  }
  
  .question-manager .prompt .field-container-1{
    max-width: 100%;
  }
}