#plane-canvas {
  position: absolute;
  width: 100%;
}
#plane-hover-canvas {
  position: absolute;
  width: 100%;
  cursor: pointer;
}
.plane-tracks-section {
  max-width: 325px;
  margin:4em 3em 0 0;
  position: relative;
  float: right;
  cursor: pointer;
}
#plane-lines-section {
  position: absolute;
}
.plane-tracks-wrapper {
  display: flex;
  max-width: 325px;
  margin: 0 auto;
}
.track-wrapper{
  flex: 1;
}
.track-base-img {
  text-align: center;
}
.track-accelerated .track-base-img img {
  object-fit: cover;
  object-position: top;
}
.track-header {
  font-size: 16px;
  font-weight: 800;
  text-align: center;
  letter-spacing: .12em;
  max-width: 170px;
  margin: 0 auto 40px;
}
.plane-textbox {
  width: 542px;
  position: absolute;
}
.plane-textbox.red {
  left: -200%;
}
.plane-textbox.blue {
  left: -200%;
}
.plane-textbox.hovered {
  /* transform: translateY(-20px); */
}
#plane-text-ppl {
  top: 168px;
}
#plane-text-cpl {
  top: 467px;
}
#plane-text-cfi {
  top: 697px;
}
#plane-text-mei1 {
  top: 998px;
}
#plane-text-ir {
  top: 369px;
}
#plane-text-me {
  top: 617px;
}
#plane-text-cfii {
  top: 897px;
}
.label-wrapper {
  display: flex;
}
.label-short {
  font-weight: 700;
  font-size: 13px;
  line-height: 16px;
  padding: 4px 12px;
  color: white;
  background-color: #A92A29;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 8px;
  cursor: pointer;
}
.plane-textbox.blue .label-short {
  background-color: #021C56;
}
.label-long {
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  letter-spacing: 0.03em;
  margin-right: 16px;
}
.label-long:hover {
  color: #A92A29;
}
.plane-textbox .label-content {
  display: block;
}
.plane-textbox .label-content p.duration {
  font-size: 12px !important;
}
.plane-textbox .label-content p.description {
  font-size: 13px !important;
  margin: 4px 0 !important;
}
.plane-textbox.collapsed .label-content {
  display: none;
}
.plane-textbox .label-long::after {
  display: inline-block;
  content: "";
  background-image: url('../images/chevron-up.svg');
  width: 24px;
  height: 24px;
  margin-bottom: -8px;
  margin-left: 4px;
}
.plane-textbox.collapsed .label-long::after {
  background-image: url('../images/chevron-down.svg');
}
.label-content {
  margin-top: -6px;
  font-size: 13px;
  line-height: 20px;
}

.plane-image {
  transition: all 1s ease-in-out; 
}

.plane-image.grow { 
  transform: scale(1.2) translateY(-200px);
}

.plane-image.shrink { 
  transform: scale(1) translateY(-100px);
}
.plane-image.plane-right {
	position: absolute;
	bottom: 112px;
	left: 192px;
	scale: 1.5;
}
.plane-image.plane-left {
	position: absolute;
	bottom: -164px;
	left: -100px;
}
.divider {
  background: #D9D9D9;
  width: 2px;
  content: "";
  height: 25px;
  display: inline-block;
  margin: 0 9px;
}
.duration {
  font-weight: 600;
  display: flex;
  align-items: center;
  font-size: 10px;
  margin-top: -4px !important;
}
.duration-label {
  letter-spacing: .12em;
  color: #A92A29;
  text-transform: uppercase;
  margin-right: 4px;
}

#tracks-section:before {
  background: url(assets/images/barrett.svg);
  content: '';
  width: 312px;
  height: 491px;
  position: absolute;
  top: 0;
  left: -7px;
  background-repeat: no-repeat;
}
#tracks-section:after {
  background: url(assets/images/barrett.svg);
  content: '';
  width: 312px;
  height: 491px;
  position: absolute;
  bottom: 0;
  right: 0px;
  background-repeat: no-repeat;
  transform: rotate(180deg);
}

#main-line {
  position: absolute;
  top: 181px;
  left: 122px;
}
#sub-line {
  position: absolute;
  top: 188px;
  left: 122px;
}
#main-line-mobile,
#sub-line-mobile {
  display:none;
}
.mobile {
  display: none;
}