/* - - - Phone Container: */
#phoneContainer {
   right: 20%;
   z-index: 4001;
   bottom: 46px;
   width: 100px;
   height: 123px;
	perspective: 5000px;
	perspective-origin: 50% 0%;
}

#phoneContainer:hover {
   cursor: pointer;
}

.phone {
   width: 60px;
   height: 123px;
   -webkit-perspective: 1000px;
   perspective: 1000;
	transform-style: preserve-3d;
   transform-origin: 50% 50%;
   left: 8%;
}

.phone {
   transform: rotateX(75deg) rotateY(4deg) rotateZ(-31deg) translateX(-20%) translateY(-10px) translateZ(-40px);
}

.phoneInUse {
   transition: all 0.8s cubic-bezier(0,1.5,1,1.6);
   transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important; 
}

.phoneLandscape {
   transition: all 0.8s cubic-bezier(0.5,1.5,1,1);
    transform: rotateX(0deg) rotateY(0deg) rotateZ(-90deg) scale(1.5) !important; 
}

.phoneNOTUse {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important; 
}

.centerPhone {
   transition: all 0.8s linear;
   left: 75%;
   bottom: 300px;
   transform: translateX(-50%);
   transition: all 0.8s linear;
}

.phoneCovers {
   width: 60px;
   height: 123px;
   border-radius: 6px;
   left: 0;
   top: 0;
}

/* 3D Elements: */
.phoneSides {
   transform-origin: 0;
}

#phoneSideLeft {
   width: 5px;
   height: 117px;
   transform: rotateY(90deg) translateX(-5px) translateY(3px) translateZ(0px);
   border-top: 2px solid #647483;
   border-bottom: 2px solid #647483;
   border-left: 1px solid #c0c9d8;
   border-right: 0px solid #c0c9d8;
   background-image: linear-gradient(to bottom, #95a2b3, #aab7c8, #8490a0, #6a7684);
}

#phoneSideRight {
   width: 5px;
   height: 117px;
   transform: rotateY(90deg) translateX(-5px) translateY(3px) translateZ(60px);
   border-top: 2px solid #647483;
   border-bottom: 2px solid #647483;
   border-left: 1px solid #c0c9d8;
   border-right: 0px solid #c0c9d8;
   background-image: linear-gradient(to bottom, #95a2b3, #aab7c8, #8490a0, #6a7684);
}

#phoneSideTop {
   width: 50px;
   height: 5px;
   transform: rotateX(90deg) translateX(5px) translateY(2.5px) translateZ(2.5px);
   background-color: brown;
   border-left: 2px solid #647483;
   border-right: 2px solid #647483;
   border-left: 2px solid #c0c9d8;
   border-right: 2px solid #c0c9d8;
   background-image: linear-gradient(to right, #95a2b3, #aab7c8, #8490a0, #6a7684);
}

#phoneSideBottom {
   width: 50px;
   height: 5px;
   transform: rotateX(90deg) translateX(5px) translateY(2.5px) translateZ(-120.5px);
   background-color: red;
   border-left: 2px solid #647483;
   border-right: 2px solid #647483;
   background-image: linear-gradient(to right, #95a2b3, #aab7c8, #8490a0, #6a7684);
}

/* Corners: */
.iphoneCornerCont {
   width: 6px;
   height: 6px;
	transform-style: preserve-3d;
}

#cornerTopLeft {
   top: 0;
   left: 0px;
}

#cornerTopRight {
   top: 0;
   right: 0px;
   transform: rotate(90deg);
}

#cornerBottomLeft {
   left: 0px;
   bottom: 0;
   transform: rotate(270deg);
}

#cornerBottomRight {
   bottom: 0;
   right: 0px;
   transform: rotate(180deg);
}

.iphoneCorners {
   width: 3px;
   height: 5px;
   transform-origin: 0 0;
}

.firstCornerBG {
   transform: rotateX(90deg) rotateY(-20deg) translateX(0px) translateY(0px) translateZ(-1.5px);
   left: 2px;
   top: 0px;
   background-image: linear-gradient(to left, #7a8694, #bfcbd9);
}

.midCornerBG {
   transform: rotateX(90deg) rotateY(-57deg) translateX(-0.5px) translateY(0px) translateZ(0px);
   top: 3.2px;   
   left: 0.8px;
   background-image: linear-gradient(to right, #bfcbd9, #dfe9f3,  #bfcbd9);
}
.endCornerBG {
   transform: rotateX(90deg) rotateY(-70deg) translateX(0px) translateY(0px) translateZ(0px);
   top: 5.5px;
   left: 0px;
   background-image: linear-gradient(to right, #bfcbd9, #7a8694, #bfcbd9);
}

/* phoneShadow: */
.shadowBig {
   left: 8%;
   bottom: 0;
   width: 60px;
   height: 123px;
   background-color: rgb(0, 0, 0, 0.5);
   box-shadow: -6px 15px 11px 6px rgba(0, 0, 0, 0.5);
}

.phoneLocation {
   transform: rotateX(75deg) rotateY(4deg) rotateZ(-31deg) translateX(-20%) translateY(-10px) translateZ(-40px);
}

.shadowSmall {
   left: 19%;
   width: 40px;
   height: 8px;
   bottom: -126px;
   border-radius: 30px;
   background-color: rgb(0, 0, 0, 0.25) ;
   box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25);
   transition: all 0.3s linear;
}

.phoneLandscapeShadow {
   left: 43%;
   width: 20px;
   height: 4px;
   bottom: -281px;
   border-radius: 30px;
   background-color: rgb(0, 0, 0, 0.25);
   box-shadow: 0px 0px 5px 5px rgb(0 0 0 / 25%);
   transition: all 0.9s linear;
}

/* iphone Buttons: */
.iphoneButtons {
   width: 2px;
   left: .5px;
   border-radius: 1.5px;
   box-shadow: 0 0.5px 0.2px 0.05px rgba(0, 0, 0, 0.4);
   background-color: #a7b3c3;
}

#iphoneButton01 {
   top: 20px;
   height: 7px;
}

#iphoneButton02 {
   top: 28px;
   height: 10px;
}

#iphoneButton03 {
   top: 40px;
   height: 10px;
}

/* Face Elements: */
#phoneBack {
   transform: translate(0%, 0%) translateZ(0px);
   background-color: #a7bacb;
}

#phoneFront {
   z-index: 6000;
   border: 2px solid #000000;
   transform: translate(0%, 0%) translateZ(5px);
   background-color: rgba(0, 0, 0, 1);

   background-image: url('images/phoneSlideShow01.jpg');
   background-position: cover;
   background-repeat: no-repeat;

   -webkit-animation-name: phoneWallpaperSlideShow;
      -moz-animation-name: phoneWallpaperSlideShow;
       -ms-animation-name: phoneWallpaperSlideShow;
        -o-animation-name: phoneWallpaperSlideShow;
           animation-name: phoneWallpaperSlideShow;
    
   -webkit-animation-duration: 20s;
      -moz-animation-duration: 20s;
       -ms-animation-duration: 20s;
        -o-animation-duration: 20s;
           animation-duration: 20s;     
       
   -webkit-animation-iteration-count: infinite;
      -moz-animation-iteration-count: infinite;
       -ms-animation-iteration-count: infinite;
        -o-animation-iteration-count: infinite;
           animation-iteration-count: infinite;

   -webkit-transform-origin: 50% 50%;
      -moz-transform-origin: 50% 50%;
        -o-transform-origin: 50% 50%;
           transform-origin: 50% 50%;            

   -webkit-animation-timing-function: linear;
      -moz-animation-timing-function: linear;
           animation-timing-function: linear;
}

@keyframes phoneWallpaperSlideShow {

   0% {
      background-image: url('images/phoneSlideShow01.jpg');
   }

   19% {
      background-image: url('images/phoneSlideShow01.jpg');
   }

   21% {
      background-image: url('images/phoneSlideShow02.jpg');
   }

   39% {
      background-image: url('images/phoneSlideShow02.jpg');
   }

   41% {
      background-image: url('images/phoneSlideShow03.jpg');
   }

   59% {
      background-image: url('images/phoneSlideShow03.jpg');
   }

   61% {
      background-image: url('images/phoneSlideShow04.jpg');
   }

   79% {
      background-image: url('images/phoneSlideShow04.jpg');
   }

   81% {
      background-image: url('images/phoneSlideShow05.jpg');
   }
   
   99% {
      background-image: url('images/phoneSlideShow05.jpg');
   }

   100% {
      background-image: url('images/phoneSlideShow01.jpg');
   }

}

@-webkit-keyframes phoneWallpaperSlideShow {

   0% {
      background-image: url('images/phoneSlideShow01.jpg');
   }

   19% {
      background-image: url('images/phoneSlideShow01.jpg');
   }

   21% {
      background-image: url('images/phoneSlideShow02.jpg');
   }

   39% {
      background-image: url('images/phoneSlideShow02.jpg');
   }

   41% {
      background-image: url('images/phoneSlideShow03.jpg');
   }

   59% {
      background-image: url('images/phoneSlideShow03.jpg');
   }

   61% {
      background-image: url('images/phoneSlideShow04.jpg');
   }

   79% {
      background-image: url('images/phoneSlideShow04.jpg');
   }

   81% {
      background-image: url('images/phoneSlideShow05.jpg');
   }
   
   99% {
      background-image: url('images/phoneSlideShow05.jpg');
   }

   100% {
      background-image: url('images/phoneSlideShow01.jpg');
   }

}

#phoneFront02 {
   height: 60px !important;
   width: 123px !important;
   z-index: 6000;
   border: 2px solid #000000;
   transform: translate(-26%, 54%) translateZ(0px) rotateZ(90deg);
   background-color: red;
   overflow: hidden;
   display: none;   
}

#topFrontCamera {
   width: 20px;
   height: 4px;
   top: 0px;
   left: 50%;
   transform: translateX(-50%);
   overflow: hidden;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
   background-color: #000000;
}

#clockCont {
   width: 70%;
   height: 20px;
   top: 10px;
   text-align: center;
}

#time {
   color: rgba(255, 255, 255, 0.9);
   font-size: 15px;
}