body {
  margin: 0;
  padding: 0;
  background-color: #000;
  color: white;
  font: Arial 24px;
  perspective: 9600px;
  perspective-origin: 50% 50vw;
}

button {
  margin:12px;
  padding:12px;
  width: 100px;
  background-color: rgba(255, 0, 0, .15)
}

section{
  padding-top: 32px;
}

.topOfRightPage, .controls > span{
  cursor: pointer;
}

 .centered{
   text-align: center;
 }

.allSides{
  z-index: 1;
  left:0;
  top:0;
  right:0;
  bottom:0;
  transform: scale(-1,3);
  transform-style: preserve-3d;
  position: relative;
}

.toBack{
  animation: spinBack 0.8s ease-in-out;
  animation-fill-mode: forwards;
}

.toFront{
  animation: spinFront 0.8s ease-in-out;
  animation-fill-mode: forwards;
}

.toRight{
  animation: spinRight 0.8s ease-in-out;
  animation-fill-mode: forwards;
}

.toLeft{
  animation: spinLeft 0.8s ease-in-out;
  animation-fill-mode: forwards;
}

.toBottom{
  animation: spinBottom 0.8s ease-in-out;
  animation-fill-mode: forwards;
}

.toTop{
  animation: spinTop 0.8s ease-in-out;
}

.fadeToWhite{
  animation: fadedToWhite 2s ease-in;
  animation-fill-mode: forwards;
}

.fadeToBlack{
  animation: fadedToBlack 1s ease-out;
  animation-fill-mode: forwards;
}

@keyframes fadedToWhite {
  from { opacity:0; }
  to { opacity:1; }
}

@keyframes fadedToBlack {
  from { opacity:1; }
  to { opacity:0; }
}

@keyframes spin {
  from { transform: rotateY(0); }
  to { transform: rotateY(360deg); }
}

@keyframes spinFront {
  to { transform: rotateY(360deg); }
}

@keyframes spinBack {
  to { transform: rotateY(180deg); }
}

@keyframes spinRight {
  to { transform: rotateY(-90deg); }
}

@keyframes spinLeft {
  to { transform: rotateY(90deg); }
}

.oneSide {
  position: absolute;
  left: 2vw;
  top: 2vh;
  padding: 3vw;
  background-image: url('../images2D/kdReadyEyes.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 1px solid #333;
  align-items: center;
  height: 90vh;
  width: 90vw;
  font-size: 18px;
  font-weight: 300;
  font-family: Arial;
  opacity: 0;
}
.flexC{
  /* overflow: hidden; */
  display: inline-flex;
  justify-content: center;
  align-items: stretch;
  flex-direction: col;
}
.flexR{
  /* overflow: hidden; */
  display: inline-flex;
  justify-content: center;
  align-content: stretch;
  flex-direction: row;
}
.backSide {
  transform: translateZ(-48vw) rotateY(180deg);
  background-image: url('../images2D/metalHorse.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: white;
  color: black;
  display: flex;
  overflow: scroll;
}
.rightSide {
  transform: rotateY(-270deg) translateX(48vw);
  transform-origin: top right;
  background-image: url('../images2D/fadedPedBridge.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: white;
  overflow: scroll;
  color: black;
}
#aframed{
  position: absolute;
  z-index:10;
  top: 2vh;
  left: 2vh;
  background-color: rgba(0, 0, 0, 0.83);
  height: 94vh;
  width: 94vw;
}
.leftSide {
  transform: rotateY(270deg) translateX(-48vw);
  transform-origin: center left;
  background-color: #000;
}
.topSide {
  transform: rotateX(-90deg) translateY(-48vh);
  transform-origin: top center;
}
.bottomSide {
  transform: rotateX(90deg) translateY(48vh);
  transform-origin: bottom center;
}
.frontSide {
  transform: translateZ(48vw) rotateY(360deg);
}

div .sideOne {
  font-size: 48px;
  font-variant: small-caps;
  font-weight: 700;
  font-family: Arial;
  background-color: rgba(220, 0, 0, 0.75);
  color: #fff;
  cursor: pointer;
}

div .sideTwo {
  font-size: 48px;
  font-variant: small-caps;
  font-weight: 700;
  font-family: Arial;
  background-color: rgba(255, 255, 255, 0.75);
  color: #000;
  cursor: pointer;
}

nav{
  cursor: pointer;
  display: block;
  position: fixed;
  z-index:100;
  top: 3px;
  left: 3px;
  width: 60px;
  height:60px;
  background-image: url('../images2D/pk60.png');
  opacity: 0;
}

header{
  float: right;
  font-weight: 600;
  margin: 4px;
}

p{
  padding: 6px;
}

.rightMe {
  float: right;
  text-align: right;
}

p:first-child {
  padding-top: 30px;
}

select, input, textarea, button, input[type="reset"]  {
  font-size: 18px;
  font-weight: 300;
  font-family: Arial;
}

.contact{
  color: #c00;
  cursor: pointer;
}

input[type="text"], textarea {
  box-shadow:inset 0 0 1px 1px #333;
  background: #fff;
  min-height: 36px;
  width: 80vw;
}

form{
  margin-top: 30vh;
}

@media screen and (orientation: landscape) {
  div .sideOne {
    height: 96vh;
    line-height: 96vh;
    flex: 1;
    vertical-align: middle;
    padding: 2vw;
    text-align: right;
  }

  div .sideTwo {
    height: 96vh;
    line-height: 96vh;
    flex: 1;
    vertical-align: middle;
    padding: 2vh 1vh;
    text-align: left;
  }
  .allSides > .frontSide{
    overflow: hidden;
    display: inline-flex;
    justify-content: center;
    align-content: stretch;
    flex-direction: row;
  }
}

@media screen and (max-device-width: 720px) and (orientation: landscape) {
  .backSide {
    height: 96vh;
    padding-top: 15vh;
  }
}
/* @media screen and (max-device-width: 2048px) {
  nav{
    transform-style: preserve-3d;
    transform: translate3d(calc(1vw * 1px),calc(1vh * 1px), 49vw);
  }
}
 */

/* @media screen and (max-device-width: 2048px) {
  nav{
    transform-style: preserve-3d;
    transform: translate3d(4.5vw, 4.5vh, 49vw);
  }
} */

@media screen and (max-device-width: 3840px) {
  nav{
    transform-style: preserve-3d;
    transform: translate3d(20vw, 20vh, 49vw);
  }
  .controls{
    transform: translate3d(-18vw, 24vh, 49vw);
  }
  .overlay{
    transform: translate3d(15vw, 15vh, 49vw);
  }
}

@media screen and (max-device-width: 2400px) {
  nav{
    transform-style: preserve-3d;
    transform: translate3d(10vw, 10vh, 49vw);
  }
  .controls{
    transform: translate3d(-8vw, 12vh, 49vw);
  }
  .overlay{
    transform: translate3d(7.75vw, 7.75vh, 49vw);
  }
}

@media screen and (max-device-width: 1920px) {
  nav{
    transform-style: preserve-3d;
    transform: translate3d(5vw, 5vh, 49vw);
  }
  .controls{
    transform: translate3d(-4vw, 7vh, 49vw);
  }
  .overlay{
    transform: translate3d(5.75vw, 5.75vh, 49vw);
  }
}

@media screen and (max-device-width: 1920px) {
  nav{
    transform-style: preserve-3d;
    transform: translate3d(5vw, 5vh, 49vw);
  }
  .controls{
    transform: translate3d(-4.8vw, 5vh, 49vw);
  }
  .overlay{
    transform: translate3d(5.75vw, 5.75vh, 49vw) scale(0.9);
  }
}

@media screen and (max-device-width: 1536px) {
  nav{
    transform-style: preserve-3d;
    transform: translate3d(3.5vw, 4vh, 49vw);
  }
  .controls{
    transform: translate3d(-4vw, 3.3vh, 49vw);
  }
  .overlay{
    transform: translate3d(-3.75vw, -3.75vh, 49vw) scale(0.9);
  }
}

@media screen and (max-device-width: 1280px) {
  nav{
    transform-style: preserve-3d;
    transform: translate3d(3.5vw, 4vh, 49vw);
  }
  .controls{
    transform: translate3d(-2.5vw, 3.3vh, 49vw);
  }
  .overlay{
    transform: translate3d(-3.75vw, -3.75vh, 49vw);
  }
}

@media screen and (max-device-width: 1024px) {
  nav{
    transform-style: preserve-3d;
    transform: translate3d(2.5vw, 2.5vh, 49vw);
  }
  .controls{
    transform: translate3d(-1.5vw, 0.75vh, 49vw);
  }
  .overlay{
    transform: translate3d(3.5vw, 3.5vh, 49vw);
  }
}

@media screen and (max-device-width: 700px){
  nav{
    transform-style: preserve-3d;
    transform: translate3d(1.75vw, 1.75vh, 49vw);
  }
  .controls{
    transform: translate3d(-0.75vw, -0.75vh, 49vw);
  }
  .overlay{
    transform: translate3d(2.5vw, 2.5vh, 49vw);
  }
}
@media screen and (orientation: portrait) {
  .allSides > .frontSide{
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-content: stretch;
    flex-direction: column;
  }
  div .sideOne {
    flex: 1;
    width: 90vw;
    height: 45vh;
    padding: 2vh;
    text-align: center;
  }
  .placement{
    display:block;
    vertical-align:bottom;
    padding-top: 36vh;
  }

  div .sideTwo {
    flex: 1;
    width: 90vw;
    height: 45vh;
    font-size: 48px;
    padding: 0vh 2vh;
    text-align: center;
  }
}
.skillContainer{
}
.skills{
  margin: auto;
  text-align: center;
  padding: 10px 100px;
}
#pairContainer > a{
  color: white;
  text-decoration: none;
}
#pairContainer > div{
  padding: 1em;
}
h2 > a{
  color: #c00;
  text-decoration: none;
}
h2 > a:hover{
  color: #e33;
  text-decoration: none;
}
#pairContainer > div:nth-child(even){
  background-color: rgba(252, 220, 224, 0.5);
  color: #532;
  float:left;
  text-align: left;
}
#pairContainer > div:nth-child(odd){
  background-color: rgba(252, 240, 232, 0.5);
  color: #330;
  text-align: right;
  float: right;
}

.dictionary, .eveo, .teachscape, .conversant, .akqa, .smartShoot, .nuance, .cbsi, .organic, .frog, .mindjet, .on24 {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-blend-mode: lighten;

}

.dictionary{
  background-image: url('../logos/dictionary.png');
}
.eveo{
  background-image: url('../logos/eveo.png');
}

.teachscape{
  background-image: url('../logos/teachscape.png');
}

.conversant{
  background-image: url('../logos/conversant.png');
}

.akqa{
  background-image: url('../logos/akqa.png');
}

.smartShoot{
  background-image: url('../logos/smartShoot.png');
}

.nuance{
  background-image: url('../logos/nuance.png');
}

.cbsi{
  background-image: url('../logos/cbsi.png');
}

.organic{
  background-image: url('../logos/organic.png');
}

.frog{
  background-image: url('../logos/frog.png');
}

.mindjet{
  background-image: url('../logos/mindjet.png');
}

.on24{
  background-image: url('../logos/on24.png');
}

.videos1 {
  /* border-top-left-radius: 100%; */
  /* transform-style: preserve-3d;
  transform: translate3d(3vw, 0, 9vw) scale(.80); */
  /* background-color: rgba(255, 255, 204, 0.3); */
  animation-direction: alternate;
  background-image: url('../images2D/videos.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  vertical-align: bottom;
  text-align: right;
}

.images1 {
  /* border-top-right-radius: 200%; */
  /* background-color: rgba(223, 144, 99, 0.3); */
  background-image: url('../images2D/images.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* transform: scale(.80);
  transform-style: preserve-3d; */
  /* overlay: hidden; */
  vertical-align: bottom;
}

.writing1 {
  /* border-bottom-left-radius: 100%; */
  /* background-color: rgba(204, 255, 255, 0.3); */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: translate3d(-3vw, 0, 9vw) scale(.80);
  transform-style: preserve-3d;
  overlay: hidden;
  vertical-align: top;
  text-align: right;
}

.other1 {
  border-bottom-right-radius: 100%;
  /* background-color: rgba(255, 204, 255, 0.3); */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: translate3d(3vw, 0, 9vw) scale(.80);
  transform-style: preserve-3d;
  overlay: hidden;
  vertical-align: top;
  text-align: left;
}


.controls {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: right;
  height: 60px;
  padding: 4px;
  background: linear-gradient(to left, rgba(222, 22, 0, .75) 30%, rgba(222, 19, 34, 0) 70%);
  font-size: 36px;
  z-index: 1000;
}

.thumbFactoryBox{
  display: flex;
  flex-wrap: wrap;
}

.thumb{
  justify-content: center;
  border-radius: 100%;
  flex-grow: 1;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display: inline-block;
}

@media screen and (orientation: landscape) {
  .thumb{
    transform: translate3d(-8vw, 0, 49vw) scale(.75);
    transform-style: preserve-3d;
    width: 28%;
    height: 28vw;
  }
}

#videosBox, #imagesBox {
  transform-style: preserve-3d;
  transform: translate3d(2.5vw, 8vh, 49vw) scale(0.833);
  padding: 1em 0em 0em 2em;
  position: relative;
  top: -20px;
  animation-name: animInPlace;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  animation-direction: alternate;
  /* background-color: rgba(255, 255, 204, 0.3); */
  /* background-color: #ffc; */
}

@media screen and (orientation: landscape) and (max-device-width: 768px) {
  #videosBox, #imagesBox {
    transform-style: preserve-3d;
    transform: translate3d(2.5vw, -8vh, 49vw) scale(0.833);
    top: -20px;
    /* background-color: rgba(255, 255, 204, 0.3); */
    /* background-color: #ffc; */
  }
}

@media screen and (orientation: landscape) and (max-device-width: 1536px) {
  #videosBox, #imagesBox {
    transform-style: preserve-3d;
    transform: translate3d(2.5vw, 8vh, 49vw) scale(0.833);
    padding: 1em;
    /* background-color: rgba(255, 255, 204, 0.3); */
    /* background-color: #ffc; */
  }
}

@media screen and (orientation: landscape) and (max-device-width: 1280px) {
  #videosBox, #imagesBox {
    transform-style: preserve-3d;
    transform: translate3d(2.5vw, 6vh, 49vw) scale(0.833);
    padding: 1em;
  }
}

@media screen and (orientation: portrait) and (max-device-width: 768px) {
  #videosBox, #imagesBox {
    transform-style: preserve-3d;
    transform: translate3d(2.5vw, -8vh, 49vw) scale(0.833);
    top: -20px;
  }
}

@media screen and (orientation: portrait) and (max-device-width: 1536px) {
  #videosBox, #imagesBox {
    transform-style: preserve-3d;
    transform: translate3d(2.5vw, 8vh, 49vw) scale(0.833);
    /* background-color: rgba(255, 255, 204, 0.3); */
    /* background-color: #ffc; */
  }
}

@media screen and (orientation: portrait) {
  .thumb{
    transform: translate3d(-8vw, 15vw, 9vw) scale(.75);
    transform-style: preserve-3d;
    width:   30vw;
    height: 30vw;
    min-width: 35%;
    max-width: 45%;
  }
}

#wtcThumb {
  background-image: url('../images/thumbs/wtc.png');
}

#friendsThumb {
  background-image: url('../images/thumbs/friends.png');
}

#natureThumb {
  background-image: url('../images/thumbs/nature.png');
}

#placesThumb {
  background-image: url('../images/thumbs/places.png');
}

#twinPeaksTopThumb{
  background-image: url('../videos360/thumbs/smThumbs/twinPeaksTopX.png');
  background-position: -10px;
}

#twinPeaksDownThumb{
  background-image: url('../videos360/thumbs/smThumbs/twinPeaksDownX.png');
  background-position: -10px;
}

#eclipseThumb{
  background-image: url('../videos360/thumbs/smThumbs/eclipse.png');
  background-position: -10px;
}

#crossThumb{
  background-image: url('../videos360/thumbs/smThumbs/cross.png');
  background-position: -10px;
  display: inline-block;
}

#shirtOffThumb{
  background-image: url('../videos360/thumbs/smThumbs/shirtOff.png');
  background-position: -10px;
  display: inline-block;
}

#concertThumb{
  background-image: url('../videos360/thumbs/smThumbs/radioheadOut.png');
  background-position: -10px;
  display: inline-block;
}

.controls-container {
  background-color: rgba(255, 211, 211, 0.3);
  margin-top: 4px;
  height: 48px;
}

.btns {
  width: 48px;
  height: 48px;
  cursor: pointer;
}

.smbtns {
  width: 48px;
  height: 24px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  margin: 0;
}

progress {
  width: 120px;
}

#video-controls {
  list-style-type: none;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 0;
}

#playpause {
  height: 48px;
  width: 48px;
  background-image: url('../controls/play.png');
  transform: scale(.75) translateX(16px);
}

#playpause .pause {
  height: 48px;
  width: 48px;
  background-image: url('../controls/pause.png');
  transform: scale(.75);
}

#muteBtn {
  height: 48px;
  width: 48px;
  background-image: url('../controls/mute.png');
  transform: scale(.75);
}

#stopBtn {
  height: 48px;
  width: 48px;
  background-image: url('../controls/stop.png');
  transform: scale(.75);
}

.controls-container {
  padding: 0;
  margin: 0;
}

.controls-container>button {
  margin: 0;
  padding: 0;
  width: 48px;
  background-color: rgba(255, 0, 0, .15);
  border: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

#progress-bar {
  background-color: rgba(33, 33, 33, 0.5);
  color: rgba(86, 13, 13, 0.9);
  height: 8px;
  min-width: 2px;
}

#progress {
  background-color: rgba(87, 33, 22, 0.4);
  cursor: pointer;
  position: relative;
  height: 24px;
  top: -24px;
}

.btns {
  border: none;
  padding: none;
}