.parallax--california{
    background-image: url(california-coast.jpg);
    min-height: 500px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.top-adjust{ height: 25px; }

/*contains the 3d objects*/
.scene-3d {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  perspective: 1000px;

  /*border: 3px dashed red;*/
  width: 100%;
  height: 612px;
}

.big-arrow-connector{
  width: 377px;
  height: 30px;
  background-color: #ffd500;
  visibility: hidden;
}

.big-arrows{
    position: absolute;
    top: 198px;
    height: auto;
    transform-style: preserve-3d;
    transform-origin: center center;
    display: flex;
    flex-direction: row;
    justify-content: center; /*make all the elements bunch up to the center*/
    pointer-events: none;
}

/*using html borders to create an arrow shape*/
.big-arrow{
  transform: scale(1);
  width: 0;
  height: 0;
  cursor: pointer;
  margin: 0px;
  position: relative;
  border-top: 120px solid transparent;
  border-left: 120px solid transparent;
  border-right: 120px solid transparent;
  border-bottom: 120px solid transparent;
  pointer-events: all;
}

.big-arrow-left{ border-right: 120px solid #ffd5007a; }
.big-arrow-right{ border-left: 120px solid #ffd5007a; }

.big-arrow-left:hover{ border-right: 120px solid #ffd500; }
.big-arrow-right:hover{ border-left: 120px solid #ffd500; }

.big-arrow-text{
  position: relative;
  font-size: 17pt;
  width: 75px;
  top: -54px;
  font-style: italic;
}

.big-arrow-text-left{
  left: 25px;
  text-align: right;
}
.big-arrow-text-right{
  left: -104px;
}

/*3d book object*/
.book-3d {
  width: 410px;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  /*border: 3px dashed yellow;*/
  transform-origin: center center;

  transition: transform 1s;
  transform: scale(1) translateZ(-100px) rotateY(28deg) translateX(0px); /*rotate from 28deg (front) to 151deg (back)*/
}
.book-3d-rotated { transform: scale(1) translateZ(-100px) rotateY(151deg) translateX(0px); }


/*a face of the book*/
.book-face {
  position: absolute;
  /*width: 410px;*/
  /*height: 612px;*/
  text-align: center;
}


/*styles for each face*/

/*                                                                                             center within book-3d                  position faces    rotate faces   */
.book-face-front  { width: 410px; height: 612px;   transform-origin: top left;      transform: translateX(0px) translateZ(30px);                                        background-color: rgba(150,150,150,0.5); }
.book-face-back   { width: 410px; height: 612px;   transform-origin: top left;      transform: translateX(0px) translateZ(-30px);                                       background-color: rgba(150,150,150,0.5); }

.book-face-left   { width: 60px; height: 612px;    transform-origin: center right;  transform: translateX(0px) translateZ(30px)     translateX(-60px) rotateY(-90deg);  background-color: rgba(150,150,150,0.5); }
.book-face-right  { width: 60px; height: 612px;    transform-origin: center left;   transform: translateX(0px) translateZ(30px)     translateX(410px) rotateY(90deg);   background-color: rgba(150,150,150,0.5); }

.book-face-top    { width: 410px; height: 60px;    transform-origin: bottom center; transform: translateX(0px) translateZ(30px)     translateY(-60px) rotateX(90deg);   background-color: rgba(150,150,150,0.5); }
.book-face-bottom { width: 410px; height: 60px;    transform-origin: top center;    transform: translateX(0px) translateZ(30px)     translateY(612px) rotateX(-90deg);  background-color: rgba(150,150,150,0.5); }

.parallax--homevideos {
  background-image: url("dof-forest-small.jpg");
  min-height: 500px;
  /*min-width: 560px;*/
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow-x: hidden;
}

.bymike{
  text-align: right;
  font-family: 'Stylish';
  font-size: 20px;
  padding: 11px;
  color: #e8b982;
}







/*below 600 width*/
@media only screen and (max-width: 600px) {
  .book-3d {transform:         scale(0.7) translateZ(-100px) rotateY(28deg)  translateX(0px);}
  .book-3d-rotated {transform: scale(0.7) translateZ(-100px) rotateY(151deg) translateX(0px);}
  .big-arrow-connector{width: 262px;}
  .top-adjust{ display: none;}
  .scene-3d{height: 510px;}
}

/*below 450 width*/
@media only screen and (max-width: 450px) {
  .book-3d {         transform: scale(0.5) translateZ(-100px) rotateY(28deg)  translateX(0px);}
  .book-3d-rotated { transform: scale(0.5) translateZ(-100px) rotateY(151deg) translateX(0px);}
  /*.big-arrow-connector{width: 176px;}*/
  .big-arrow-connector{width: 160px;}
/*.scene-3d{height: 580px;}*/
  .scene-3d{height: 395px;}
  .big-arrows{ top: 144px;}
}

/*SUPER SMALL MODE*/
@media only screen and (max-width: 390px) { /* Display the cover flat, front only */
  .big-arrows{ display: none;}
  .book-3d {
    /*transform: scale(0.65) translateZ(0px) rotateY(0deg)  translateX(0px);*/
    transform: scale(0.65) translateZ(-233px) rotateY(0deg)  translateX(0px) translateY(-80px);
    left:-25px;
  }
  .book-3d-rotated {
    transform: scale(0.65) translateZ(0px) rotateY(0deg)  translateX(0px);
  }
  .scene-3d{
    /*height: 530px;*/
    height: 395px;
  }
  .parallax--california{
    /*height: 395px;*/
    height: unset;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

/*ULTRA SMALL MODE*/
@media only screen and (max-width: 360px) {
  .scene-3d{    display: none; }
  .ultra-small{ display: block; }
  .hide-ultra-sm{display: none;}
}