html, body, * {
    box-sizing: border-box;
    height: auto;
    margin: 0 auto;
}

body {
    font-family: "Avenir Next", "Helvetica Neue", Helvetica;
}

form {
  display: flex;
  flex-direction: column;
  margin: auto;
  width: 800px;
}

#post_experiment_survey {
  display: none;
  height: auto;
  margin-top: 20px;
  margin-left: 30px;
}

#box_image {
  margin-top: 20px;
}

#canvas_left1{
  border: 10px solid blue;
}

#canvas_left2{
  border: 10px solid blue;
}

#canvas_left3{
  border: 10px solid blue;
}

#canvas_right1{
  border: 10px solid red;
}

#canvas_right2{
  border: 10px solid red;
}

#canvas_right3{
  border: 10px solid red;
}

input[type="radio"]{
  margin: 0 10px 40px 0px;
}

.preload_videos{
  display: none;
}

.dissapear {
  visibility: hidden;
}

.reappear {
  visibility: visible;
}

.hidden {
    display: none!important;
}

.frame {
  display: flex;
  flex-direction: row;
  margin-top: 20px;
  border-color: dimgray;
  border-style: solid;
  width: 200px;
  height: auto;
}

.bar {
  display: flex;
  margin: 0;
  background-color: lightseagreen;
  height: 21px;
  width: 0;
}

.consent {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 20px;
  font-style: italic;
}

.sub_container {
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: white;
    max-width: 1300px
}

.video_container {
  width: 800px;
  display: flex;
  flex-direction: row;
  background-color: white;
  max-width: 1300px
}

.instruction_box {
  width: 770px;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 20px;
  margin-top: 40px;
}

.start_button {
  max-width: 70px;
  max-height: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 50px;
  margin-bottom: 50px;

}

.instruction {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: 20px;
  margin-top: 20px;
}

.instruction-images {
  display: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  max-width: 1300px;
  margin-top: 10px
}

.i_video {
  display: flex;
  justify-content: center;
  border: 10px solid transparent;
  width: 640px;
  height: 360px;

}

label {
  float: left;
  clear: none;
  display: block;
  padding: 0px 1em 0px 8px;
    }

input[type=radio],
    input.radio {
      float: left;
      clear: none;
      margin: 2px 0 0 2px;
    }

.item {
  height: 250px;
  border: 3px solid black
}

.catch {
  clear: none;
}


.trial_video {
    border: 10px solid transparent;
    width: 320px;
    height: 180px;
}

.response_box {
  display: flex;
  justify-content: center;
  align-items: center;
}


.toggles {
  width: 800px;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin-top: 10px;
  margin-bottom: 10px;
}