/*
$chart-dkBlue: 	#073B4C;
$chart-yellow: 	#ffd166;
$chart-green: 	#06D6A0;
$chart-red: 	#EF476F;
$chart-blue: 	#118AB2;
*/
.carouselBtns {
  position: absolute;
  z-index: 300000;
  top: -95vh;
  width: 650px;
  margin-left: calc(50% - 325px); }
  @media only screen and (min-width: 920px) {
    .carouselBtns {
      width: 79%;
      margin-left: 10%; } }
  @media only screen and (orientation: landscape) and (min-width: 1200px) {
    .carouselBtns {
      width: 950px;
      top: -95vh;
      margin-left: calc(50% - 475px); } }
  .carouselBtns.no-click {
    pointer-events: none; }
  .carouselBtns .mobileBreak {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1; }
  .carouselBtns button {
    background-color: rgba(255, 255, 255, 0.667);
    margin-top: 1vh;
    height: calc(1vh + 22px);
    border-color: #222;
    color: #222; }
    @media only screen and (orientation: portrait) and (min-width: 599.9px) {
      .carouselBtns button {
        margin-top: 0; } }
    .carouselBtns button.selected, .carouselBtns button:hover {
      background-color: #222;
      color: #fff;
      border-color: #bbb; }
    .carouselBtns button.no {
      opacity: 0;
      pointer-events: none;
      max-width: 95px; }
      @media only screen and (orientation: portrait) and (max-width: 599.9px) {
        .carouselBtns button.no {
          display: none; } }
      @media only screen and (min-width: 600px) and (max-width: 919.9px) {
        .carouselBtns button.no {
          max-width: unset; } }
      @media only screen and (max-height: 500px) {
        .carouselBtns button.no {
          flex: 0.3; } }
    @media only screen and (min-width: 920px) {
      .carouselBtns button.contact-button, .carouselBtns button.credits-button {
        margin-right: 5%; } }
    @media only screen and (max-height: 500px) {
      .carouselBtns button.contact-button, .carouselBtns button.credits-button {
        margin-right: 0.5%; } }
    @media only screen and (min-width: 600px) and (max-width: 919.9px) {
      .carouselBtns button.contact-button {
        margin-right: calc(-2vw + 40px); } }
    @media only screen and (max-height: 500px) {
      .carouselBtns button.contact-button {
        margin-right: 3vw; } }
    @media only screen and (min-width: 920px) {
      .carouselBtns button.bio-button, .carouselBtns button.resume-button {
        margin-left: 5%; } }
    @media only screen and (max-height: 500px) {
      .carouselBtns button.bio-button, .carouselBtns button.resume-button {
        margin-left: 2%; } }
    @media only screen and (min-width: 600px) and (max-width: 919.9px) {
      .carouselBtns button.resume-button {
        margin-left: calc(-2vw + 50px); } }
    @media only screen and (max-height: 500px) {
      .carouselBtns button.resume-button {
        margin-left: 5vw; } }
    @media only screen and (min-width: 1100px) and (min-height: 800px) {
      .carouselBtns button {
        flex: 0.5;
        background-color: transparent; } }
    @media only screen and (min-width: 1280px) {
      .carouselBtns button {
        flex: 0.5;
        background-color: transparent; } }
  @media only screen and (max-width: 919.9px) {
    .carouselBtns {
      width: 87.5vw;
      margin-left: 5.75vw;
      top: -94.75vh; } }
  @media only screen and (max-width: 919.9px) and (orientation: portrait) {
    .carouselBtns {
      top: -93.75vh; } }
  @media only screen and (orientation: portrait) and (max-width: 599.9px) {
    .carouselBtns {
      top: -89.5vh;
      width: 88vw;
      margin-left: 6vw; }
      .carouselBtns button {
        margin-top: 0.5vh;
        height: calc(2.5vh + 1.75vw);
        margin-bottom: 0.5vh;
        text-transform: uppercase;
        font-size: 0.85em; } }

.scene {
  position: relative;
  width: 80vw;
  height: 70vh;
  margin: 0 auto;
  perspective: 250px;
  top: calc(-83vh + 10px);
  max-width: 1200px; 
  transform: perspective(400px);
}
  @media only screen and (max-width: 920px) {
    .scene {
      width: 90vw;
      height: 66vh;
      margin: 0 5%;
      top: -87.5vh; } }
  @media only screen and (orientation: landscape) and (min-width: 920px) {
    .scene {
      height: 74vh;
      top: calc(-87.5vh + 10px); } }
  @media only screen and (orientation: portrait) and (min-width: 599.9px) {
    .scene {
      top: -88h;
      height: 73vh; } }
  @media only screen and (orientation: portrait) and (max-width: 768px) {
    .scene {
      width: 90vw;
      height: 73vh; } }
  @media only screen and (orientation: portrait) and (max-width: 599.9px) {
    .scene {
      height: 73vh;
      width: 90vw;
      top: -84vh; } }
  @media only screen and (max-height: 500px) {
    .scene {
      top: -85vh; } }

.carousel {
  width: 100%;
  height: 100%;
  position: absolute;
  transform: translate3d(0,0,-10000px);
  transform-style: preserve-3d;
  /*transition: transform 2.5s;*/
  transition: transform 0.05s
  ;}

.carousel__cell {
  position: absolute;
  width: 80vw;
  height: 70vh;
  left: 0;
  top: 0;
  /*line-height: 116px;
  font-size: 80px;
  font-weight: 400;
  color: white;
  text-align: center;*/
  overflow: hidden;
  border-radius: 2vw;
  max-width: 1200px;
  display: flex;
  align-items: center; 
  box-shadow: 0 0 0 transparent !important;
      opacity: 0;
      transition: opacity 0.3s linear 0s;
  }
  .carousel__cell.select {
    opacity: 1;
  }
  
  .carousel__cell svg {
    flex: 1; }
    @media only screen and (orientation: portrait) {
      .carousel__cell svg {
        flex: 2.33; } }
    @media only screen and (orientation: portrait) and (max-width: 599.9px), only screen and (orientation: landscape) and (max-height: 500px) {
      .carousel__cell svg {
        display: none; } }
    @media only screen and (min-width: 920px) and (max-width: 1023.99px) {
      .carousel__cell svg {
        flex: 1.1; } }
  .carousel__cell .cardContent {
    flex: 7;
    display: flex;
    justify-content: center;
    height: 100%; }
    @media only screen and (orientation: portrait) and (max-width: 599.9px) {
      .carousel__cell .cardContent {
        align-items: unset; } }
  .carousel__cell text {
    font-size: calc(4em + 0.5vw);
    transform-origin: 50% 50%;
    transform: translateX(33%) translateY(-50px) rotate(-90deg);
    text-anchor: middle;
    font-weight: 400; }
    @media only screen and (min-width: 1200px) {
      .carousel__cell text {
        font-weight: 300; } }
    @media only screen and (orientation: portrait) {
      .carousel__cell text {
        transform: translateX(9%) translateY(-337px) rotate(-90deg);
        text-anchor: end; } }
    @media only screen and (min-width: 599.9px) and (orientation: portrait) {
      .carousel__cell text {
        text-anchor: middle;
        transform: translateX(5%) translateY(-50px) rotate(-90deg) scale(0.8); } }
  @media only screen and (max-width: 920px) {
    .carousel__cell {
      width: 90vw;
      height: 70vh; } }
  @media only screen and (orientation: landscape) and (min-width: 920px) {
    .carousel__cell {
      height: 74vh; } }
  @media only screen and (orientation: portrait) and (max-width: 768px) {
    .carousel__cell {
      width: 90vw;
      height: 73vh; } }
  @media only screen and (orientation: portrait) and (max-width: 599.9px) {
    .carousel__cell {
      height: calc(90vh - 120px);
      width: 89vw; } }

@media only screen and (orientation: portrait) and (max-width: 599.9px) {
  .short .carousel__cell {
    height: calc(78vh - 120px); } }

/*@media only screen and (orientation: portrait ) and (max-width: $mq-mobile-max),
  	   only screen and (orientation: landscape ) and (max-height: 500px) {
  	&.scrollable{
  		transform-style: unset;
  		transform: translateZ(0) !important;
  		transition: transform 0s;
  		.carousel__cell { 
  			display:none;
	  		&.select{
	  			transform: translateZ(0) !important;
				display: block;
	  		}
  		}
  	}
  }*/
.carousel__cell rect.bg {
  fill-opacity: 1; }

.carousel__cell:nth-child(9n+1) {
  box-shadow: 0 0 15px red; }
  .carousel__cell:nth-child(9n+1) rect.bg {
    fill: rgba(255, 0, 0, 0.75); }
  .carousel__cell:nth-child(9n+1) .cardContent {
    background: rgba(255, 0, 0, 0.75); }

.carousel__cell:nth-child(9n+2) {
  background: rgba(255, 170, 0, 0.5);
  box-shadow: 0 0 15px #ffaa00; }

.carousel__cell:nth-child(9n+3) {
  background: rgba(170, 255, 0, 0.5);
  box-shadow: 0 0 15px #aaff00; }

.carousel__cell:nth-child(9n+4) {
  box-shadow: 0 0 15px #7733ff; }
  .carousel__cell:nth-child(9n+4) rect.bg {
    fill: rgba(119, 51, 255, 0.75); }
  .carousel__cell:nth-child(9n+4) .cardContent {
    background: rgba(119, 51, 255, 0.75); }

.carousel__cell:nth-child(9n+5) {
  box-shadow: 0 0 15px #00ffaa; }
  .carousel__cell:nth-child(9n+5) rect.bg {
    fill: rgba(0, 255, 170, 0.75); }
  .carousel__cell:nth-child(9n+5) .cardContent {
    background: rgba(0, 255, 170, 0.75); }

.carousel__cell:nth-child(9n+6) {
  box-shadow: 0 0 15px #00aaff; }
  .carousel__cell:nth-child(9n+6) rect.bg {
    fill: rgba(0, 170, 255, 0.75); }
  .carousel__cell:nth-child(9n+6) .cardContent {
    background: rgba(0, 170, 255, 0.75); }

.carousel__cell:nth-child(9n+7) {
  background: rgba(0, 0, 255, 0.5);
  box-shadow: 0 0 15px blue; }

.carousel__cell:nth-child(9n+8) {
  background: rgba(170, 0, 255, 0.5);
  box-shadow: 0 0 15px #aa00ff; }

.carousel__cell:nth-child(9n+0) {
  background: rgba(255, 0, 170, 0.5);
  box-shadow: 0 0 15px #ff00aa; }

/*.carousel__cell:nth-child(1) { transform: rotateY(  0deg) translateZ(10000px); }
.carousel__cell:nth-child(2) { transform: rotateY( 40deg) translateZ(10000px); }
.carousel__cell:nth-child(3) { transform: rotateY( 80deg) translateZ(10000px); }
.carousel__cell:nth-child(4) { transform: rotateY(120deg) translateZ(10000px); }
.carousel__cell:nth-child(5) { transform: rotateY(160deg) translateZ(10000px); }
.carousel__cell:nth-child(6) { transform: rotateY(200deg) translateZ(10000px); }
.carousel__cell:nth-child(7) { transform: rotateY(240deg) translateZ(10000px); }
.carousel__cell:nth-child(8) { transform: rotateY(280deg) translateZ(10000px); }
.carousel__cell:nth-child(9) { transform: rotateY(320deg) translateZ(10000px); }*/

.carousel__cell:nth-child(1) {
  /*transform: rotateY(0deg) translateZ(10000px); */
  transform: translate3d(0,0,10000px) rotate3d(0,0,0,0deg) ;
}

.carousel__cell:nth-child(2) {
  transform: rotateY(60deg) translateZ(10000px); }

.carousel__cell:nth-child(3) {
  transform: rotateY(120deg) translateZ(10000px); }

.carousel__cell:nth-child(4) {
  /*transform: rotateY(180deg) translateZ(10000px); */
  transform:  rotate3d(0,1,0,180deg) translate3d(0,0,10000px);
}

.carousel__cell:nth-child(5) {
  transform: rotateY(240deg) translateZ(10000px); }

.carousel__cell:nth-child(6) {
  /*transform: rotateY(300deg) translateZ(10000px);*/ 
  transform: rotate3d(0,1,0,300deg) translate3d(0,0,10000px);
}

html.touch .carousel.scrollable {
  transform-style: unset;
  transform: translateZ(0) !important;
  transition: transform 0s; }
  html.touch .carousel.scrollable .carousel__cell {
    display: none; }
    html.touch .carousel.scrollable .carousel__cell.select {
      transform: translateZ(0) !important;
      display: flex; }

@media only screen and (min-height: 500px) and (orientation: landscape), only screen and (min-width: 600px) and (orientation: portrait) {
  html.touch .carousel {
    /*.carousel__cell .cardContent .li-content{
				transform:translateX(-1px);

				border-left: 0px solid rgba(0,0,0,0);
				border-right:none;
				border-top:none;
				border-bottom:none;

			}



			.carousel__cell:nth-child(9n+1)   .cardContent .li-content{ 
				border-color: hsla(  0, 100%, 50%, 0.75);
			}
			.carousel__cell:nth-child(9n+2)   .cardContent .li-content{ 
				border-color: hsla( 40, 100%, 50%, 0.75); 
			}
			.carousel__cell:nth-child(9n+3)   .cardContent .li-content{ 
				border-color: hsla( 80, 100%, 50%, 0.75); 
			}
			.carousel__cell:nth-child(9n+4)  .cardContent .li-content{ 
				border-color: rgba(119, 51, 255, 0.75)
			}
			.carousel__cell:nth-child(9n+5)  .cardContent .li-content{ 
				border-color: hsla( 160, 100%, 50%, 0.75); 
			}
			.carousel__cell:nth-child(9n+6)  .cardContent .li-content{ 
				border-color: hsla( 200, 100%, 50%, 0.75); 
			}*/ } }