﻿#oh-runway {
    width: 71px;
    min-height: 1650px;
    background-color: rgb(31,37,51);
    border: 3px solid rgb(173,181,204);
    border-top: 0;
    -webkit-box-shadow: 2px 4px 1px rgba(26,24,23,.35);
    -moz-box-shadow: 2px 4px 1px rgba(26,24,23,.35);
    box-shadow: 2px 4px 1px rgba(26,24,23,.35);
    position: relative;
    display: inline-block;
    margin-top: -4px;
}

#oh-runwaymiddle {
    position: absolute;
    top: 0;
    left: 35px;
    right: 35px;
    bottom: 50px;
    border-left: 1px solid rgb(86,92,104);
}

#oh-runwaybottomtext {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 15px;
    color: rgb(214,217,222);
    font-size: 1.7em;
    -webkit-transform: scale(0.75,1); /* Safari and Chrome */
    -moz-transform: scale(0.75,1); /* Firefox */
    -ms-transform: scale(0.75,1); /* IE 9 */
    -o-transform: scale(0.75,1); /* Opera */
    transform: scale(0.75,1); /* W3C */
}

#oh-runwaytopmarks {
    position: absolute;
    left: 0;
    right: 0;
    top: 174px;
}

#oh-runwaybottommarks {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 83px;
}

.oh-runwaymarkm4,
.oh-runwaymarkm3,
.oh-runwaymarkm2,
.oh-runwaymarkm1,
.oh-runwaymarkp1,
.oh-runwaymarkp2,
.oh-runwaymarkp3,
.oh-runwaymarkp4 {
    width: 4px;
    height: 33px;
    background-color: rgb(217,217,222);
    position: absolute;
    bottom: 0px;
}

.oh-runwaymarkm4 {
    left: 7px;
}

.oh-runwaymarkm3 {
    left: 14px;
}

.oh-runwaymarkm2 {
    left: 21px;
}

.oh-runwaymarkm1 {
    left: 28px;
}

.oh-runwaymarkp1 {
    right: 7px;
}

.oh-runwaymarkp2 {
    right: 14px;
}

.oh-runwaymarkp3 {
    right: 21px;
}

.oh-runwaymarkp4 {
    right: 28px;
}
/* hangar */
#oh-hangar {
    display: inline-block;
    position: relative;
    height: 105px;
    vertical-align: top;
    z-index: 100;
}

#oh-hangarshadowcontainerleft,
#oh-hangarshadowcontainerright {
    overflow:hidden;
    position:absolute;
    top:105px;
    width:75px;
    height:30px;
}

#oh-hangarshadowcontainerleft {
    left:-75px;
}

#oh-hangarshadowcontainerright {
    right:-75px;
}

.oh-hangarshadow {
    width: 200px;
    height: 3px;

    -webkit-box-shadow: 0px 15px 3px 10px rgba(26,24,23,0.35);
    -moz-box-shadow: 0px 15px 3px 10px rgba(26,24,23,0.35);
    box-shadow: 0px 15px 3px 10px rgba(26,24,23,0.35);
}

#oh-hangarshadowcontainerright .oh-hangarshadow {
    transform:rotate(-10deg);
    top:-20px;
    position:absolute;
    left:0;
}

#oh-hangarshadowcontainerleft .oh-hangarshadow {
    transform:rotate(10deg);
}

#oh-hangarleft {
    width: 75px;
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: rgb(193,195,194);
}

#oh-hangarright {
    width: 75px;
    position: absolute;
    left: 0;
    bottom: 0;
    top: 0;
    background-color: rgb(164,168,169);
}

.oh-hangarroofmark {
    background-color: rgb(219,224,218);
    display: inline-block;
    width: 10px;
    height: 2px;
    position: absolute;
}

.oh-hangarroofmarkleft {
    left: 32px;
}

.oh-hangarroofmarkleft:after {
    content: '';
    width: 10px;
    height: 2px;
    position: absolute;
    top: 2px;
    left: 0;
    background: -moz-linear-gradient(left, rgba(120,120,120,0.5) 0%, rgba(120,120,120,0.0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(120,120,120,0.0)), color-stop(100%,rgba(120,120,120,0.5))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(120,120,120,0.5) 0%,rgba(120,120,120,0.0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(120,120,120,0.5) 0%,rgba(120,120,120,0.0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(120,120,120,0.5) 0%,rgba(120,120,120,0.0) 100%); /* IE10+ */
    background: linear-gradient(to right, rgba(120,120,120,0.5) 0%,rgba(120,120,120,0.0) 100%); /* W3C */
}

.oh-hangarroofmarkright:after {
    content: '';
    width: 10px;
    height: 2px;
    position: absolute;
    top: 2px;
    left: 0;
    background: -moz-linear-gradient(left, rgba(120,120,120,0.0) 0%, rgba(120,120,120,0.5) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(120,120,120,0.5)), color-stop(100%,rgba(120,120,120,0.0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(120,120,120,0.0) 0%,rgba(120,120,120,0.5) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(120,120,120,0.0) 0%,rgba(120,120,120,0.5) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(120,120,120,0.0) 0%,rgba(120,120,120,0.5) 100%); /* IE10+ */
    background: linear-gradient(to right, rgba(120,120,120,0.0) 0%,rgba(120,120,120,0.5) 100%); /* W3C */
}

.oh-hangarroofmarkright {
    right: 32px;
}

.oh-hangarroofmark1 {
    top: 19px;
}

.oh-hangarroofmark2 {
    top: 40px;
}

.oh-hangarroofmark3 {
    top: 61px;
}

.oh-hangarroofmark4 {
    top: 82px;
}

.oh-hangardoorsleft, 
.oh-hangardoorsright {
    z-index: -1;
    position: absolute;
    
    bottom: 0;
    height: 14px;
    border-bottom: 3px solid rgb(165,171,171);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
    -webkit-box-shadow: 0 12px 3px 0px rgba(26,24,23,.35);
    -moz-box-shadow: 0 12px 3px 0px rgba(26,24,23,.35);
    box-shadow: 0px 12px 3px 0px rgba(26,24,23,.35);
}

.oh-hangardoorsleft {
    left: -74px;
    right: 74px;
}

.oh-hangardoorsright {
    left: 74px;
    right: -74px;
}

.oh-hangardoorsopen .oh-hangardoorsleft {
    left: -100px;
}

.oh-hangardoorsopen .oh-hangardoorsright {
    right: -100px;
}

/* end hangar */

.oh-historyleft {
    position: absolute;
    right: 0;
}

.oh-historyright {
    position: absolute;
    left: 0;
}

.oh-historyright::after,
.oh-historyleft::after {
    position: absolute;
    content: '';
    width: 7px;
    height: 7px;
    top: -4px;
    left: -4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-color: rgb(86,92,104);
}

.oh-historytext {
    font-style: italic;
    color: white;
    font-size: 14px;
    font-weight: 100;
    color: rgb(185,195,207);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
    white-space: nowrap;
    position: absolute;
    top: 10px;
}

.oh-historyyear {
    position: absolute;
    padding: 0px 5px;
    background-color: white;
    color: rgb(16,66,115);
    font-size: 1.7em;
    font-weight: 100;
    top: -34px;
}

.oh-historyright .oh-historytext {
    text-align: left;
    left: 75px;
}

.oh-historyleft .oh-historytext {
    text-align: right;
    right: 75px;
}

.oh-historyright .oh-historyyear {
    left: 70px;
}

.oh-historyleft .oh-historyyear {
    right: 70px;
}

.oh-historyleft .oh-historyyear:after {
    content: '';
    position: absolute;
    height: 0px;
    width: 0px;
    top: 16px;
    right: -21px;
    -webkit-transform: scaleX(0.5) rotate(90deg) skew(131deg);
    transform: scaleX(0.5) rotate(90deg) skew(131deg);
    border-top: 14px solid transparent;
    border-left: 14px solid rgb(207,207,215);
    border-right: 14px solid transparent;
    border-bottom: 14px solid rgb(207,207,215);
}

.oh-historyright .oh-historyyear:after {
    content: '';
    position: absolute;
    height: 0px;
    width: 0px;
    top: 16px;
    left: -21px;
    -webkit-transform: scaleX(0.5) rotate(270deg) skew(49deg);
    transform: scaleX(0.5) rotate(270deg) skew(49deg);
    border-top: 14px solid transparent;
    border-left: 14px solid transparent;
    border-right: 14px solid rgb(207,207,215);
    border-bottom: 14px solid rgb(207,207,215);
}

.oh-historyyearshadow {
    position: absolute;
    top: -20px;
    width: 50px;
    height: 10px;
    background-color: rgba(0,0,0, 0.4);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.oh-historyright .oh-historyyearshadow {
    left: 70px;
}

.oh-historyleft .oh-historyyearshadow {
    right: 70px;
}

.oh-historyleft .oh-historyyearshadow:after {
    content: '';
    position: absolute;
    height: 0px;
    width: 0px;
    top: 4.5px;
    right: -12px;
    -webkit-transform: rotate(90deg) skew(132deg);
    transform: rotate(90deg) skew(132deg);
    border-top: 6px solid transparent;
    border-left: 6px solid rgba(0,0,0, 0.4);
    border-right: 6px solid transparent;
    border-bottom: 6px solid rgba(0,0,0, 0.4);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.oh-historyright .oh-historyyearshadow:after {
    content: '';
    position: absolute;
    height: 0px;
    width: 0px;
    top: 4.5px;
    left: -12px;
    -webkit-transform: rotate(270deg) skew(48deg);
    transform: rotate(270deg) skew(48deg);
    border-top: 6px solid transparent;
    border-left: 6px solid transparent;
    border-right: 6px solid rgba(0,0,0, 0.4);
    border-bottom: 6px solid rgba(0,0,0, 0.4);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.oh-historyimage {
    bottom: 0;
    position: absolute;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    border: 4px solid rgb(53,83,143);
    -ms-transform: scale(0.5);
    -ms-transform-origin: 50% 100%;
    -webkit-transform: scale(0.5);
    -webkit-transform-origin: 50% 100%;
    transform: scale(0.5);
    transform-origin: 50% 100%;
}

    .oh-historyimage img {
    }

/* highlighted elements */
.oh-historyhighlighted {
}

.oh-historyprehighlighted::after {
    animation: runwaylights 2s;
    animation-iteration-count: 1;
}

.oh-historyhighlighted .oh-historyyear {
    color: rgb(16,66,115);
}

.oh-historyhighlighted .oh-historytext {
    color: white;
}

.oh-historyhighlighted .oh-historyyearshadow {
    top: -7px;
}

.oh-historyhighlighted .oh-historyimage {
    -ms-transform: none;
    -ms-transform-origin: 50% 100%;
    -webkit-transform: none;
    -webkit-transform-origin: 50% 100%;
    transform: none;
    transform-origin: 50% 100%;
}
/* end highlighted elements */

#oh-takeofftext {
    font-size: 220px;
    color: rgb(49,78,136);
    font-weight: 100;
    position: relative;
    top: -130px;
    text-align: center;
    z-index: -2;
}

#oh-plane {
    position: absolute;
    top: -105px;
    left: -16.5px;
    z-index: 95;
    transform-origin: 50% 0%;
}

.oh-plane-shadow {
    opacity: 0.2;
    position:absolute;
    left:0;
    top:13px;
    z-index:-2;
}

#oh-plane img {
    transform: rotate(180deg);
    transform-origin: 50% 50%;
}

@keyframes runwaylights {
    0% {
        background-color: rgb(86,92,104);
        -webkit-box-shadow: 0 0 10px 10px rgba(255,255,255,0);
        -moz-box-shadow: 0 0 10px 10px rgba(255,255,255,0);
        box-shadow: 0px 0 10px 10px rgba(255,255,255,0);
    }

    50% {
        background-color: white;
        -webkit-box-shadow: 0 0px 10px 10px rgba(255,255,255,.5);
        -moz-box-shadow: 0 0px 10px 10px rgba(255,255,255,.5);
        box-shadow: 0px 0px 10px 10px rgba(255,255,255,.5);
    }

    100% {
        background-color: rgb(86,92,104);
        -webkit-box-shadow: 0 0 10px 10px rgba(255,255,255,0);
        -moz-box-shadow: 0 0 10px 10px rgba(255,255,255,0);
        box-shadow: 0px 0 10px 10px rgba(255,255,255,0);
    }
}
