/* The device with borders */
.smartphone {
    position: relative;
    width: 187px;
    height: 404px;
    margin: auto;
    border: 8px black solid;
    border-top-width: 30px;
    border-bottom-width: 30px;
    border-radius: 18px;
  }
  
  /* The horizontal line on the top of the device */
  .smartphone:before {
    content: '';
    display: block;
    width: 30px;
    height: 2.5px;
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #333;
    border-radius: 5px;
  }
  
  /* The circle on the bottom of the device */
  .smartphone:after {
    content: '';
    display: block;
    width: 17.5px;
    height: 17.5px;
    position: absolute;
    left: 50%;
    bottom: -32.5px;
    transform: translate(-50%, -50%);
    background: #333;
    border-radius: 50%;
  }
  
  /* The screen (or content) of the device */
  .smartphone .insidey {
    width: 171px;
    height: 364px;
    background: 
    white;
  }

  .screeny {
    width: 171px;
    height: 364px;
  }

/* Page fan */

.please {
  margin-left: 50%;
  padding: 50px;
  
}

/*1 */

 .pagey {
   display: inline-block;
   margin-left: -175px;
   background: white;
   width: 150px;
   max-width: 200px;
   min-height: 250px;
   box-shadow: 0px 4px 10px #000;
   padding: 5px;
   
   background-image: url("images/1.png");
   background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;
   transform: translate(0px,0px) translateZ(0);
   transition: all 0.1s;
   
}
 .pagey:hover {
   transform: translate(-6px,-30px) rotate(-1.2deg);
}
 .pagey.active:hover {
   transform: translate(0px,0px);
}
 .pagey .titley {
   float: left;
   color: silver;
   font-weight: bold;
   transform: rotate(90deg);
   transform-origin: 0% 100%;
}
 .pagey .contenty {
   float: left;
   width: 85%;
   margin-left: 1.5em;
}
 .pagey .contenty p {
   margin: 0;
   padding: 0;
}
 .pagey .contenty p.info {
   color: silver;
}

/*2 */

 .pagey2 {
   display: inline-block;
   margin-left: -175px;
   background: white;
   width: 150px;
   max-width: 200px;
   min-height: 250px;
   box-shadow: 0px 4px 10px #000;
   padding: 5px;
   
   background-image: url("images/2.png");
   background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;
   transform: translate(0px,0px) translateZ(0);
   transition: all 0.1s;
   
}
 .pagey2:hover {
   transform: translate(-6px,-30px) rotate(-1.2deg);
}
 .pagey2.active:hover {
   transform: translate(0px,0px);
}
 .pagey2 .titley {
   float: left;
   color: silver;
   font-weight: bold;
   transform: rotate(90deg);
   transform-origin: 0% 100%;
}
 .pagey .contenty {
   float: left;
   width: 85%;
   margin-left: 1.5em;
}
 .pagey2 .contenty p {
   margin: 0;
   padding: 0;
}
 .pagey2 .contenty p.info {
   color: silver;
}

/*3 */

 .pagey3 {
   display: inline-block;
   margin-left: -175px;
   background: white;
   width: 150px;
   max-width: 200px;
   min-height: 250px;
   box-shadow: 0px 4px 10px #000;
   padding: 5px;
   
   background-image: url("images/3.png");
   background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;
   transform: translate(0px,0px) translateZ(0);
   transition: all 0.1s;
   
}
 .pagey3:hover {
   transform: translate(-6px,-30px) rotate(-1.2deg);
}
 .pagey3.active:hover {
   transform: translate(0px,0px);
}
 .pagey3 .titley {
   float: left;
   color: silver;
   font-weight: bold;
   transform: rotate(90deg);
   transform-origin: 0% 100%;
}
 .pagey3 .contenty {
   float: left;
   width: 85%;
   margin-left: 1.5em;
}
 .pagey3 .contenty p {
   margin: 0;
   padding: 0;
}
 .pagey3 .contenty p.info {
   color: silver;
}

/*4 */

 .pagey4 {
   display: inline-block;
   margin-left: -175px;
   background: white;
   width: 150px;
   max-width: 200px;
   min-height: 250px;
   box-shadow: 0px 4px 10px #000;
   padding: 5px;
   
   background-image: url("images/4.png");
   background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;
   transform: translate(0px,0px) translateZ(0);
   transition: all 0.1s;
   
}
 .pagey4:hover {
   transform: translate(-6px,-30px) rotate(-1.2deg);
}
 .pagey4.active:hover {
   transform: translate(0px,0px);
}
 .pagey4 .titley {
   float: left;
   color: silver;
   font-weight: bold;
   transform: rotate(90deg);
   transform-origin: 0% 100%;
}
 .pagey4 .contenty {
   float: left;
   width: 85%;
   margin-left: 1.5em;
}
 .pagey4 .contenty p {
   margin: 0;
   padding: 0;
}
 .pagey4 .contenty p.info {
   color: silver;
}

/*5*/

 .pagey5 {
   display: inline-block;
   margin-left: -175px;
   background: white;
   width: 150px;
   max-width: 200px;
   min-height: 250px;
   box-shadow: 0px 4px 10px #000;
   padding: 5px;
   
   background-image: url("images/5.png");
   background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;
   transform: translate(0px,0px) translateZ(0);
   transition: all 0.1s;
   
}
 .pagey5:hover {
   transform: translate(-6px,-30px) rotate(-1.2deg);
}
 .pagey5.active:hover {
   transform: translate(0px,0px);
}
 .pagey5 .titley {
   float: left;
   color: silver;
   font-weight: bold;
   transform: rotate(90deg);
   transform-origin: 0% 100%;
}
 .pagey5 .contenty {
   float: left;
   width: 85%;
   margin-left: 1.5em;
}
 .pagey5 .contenty p {
   margin: 0;
   padding: 0;
}
 .pagey5 .contenty p.info {
   color: silver;
}


/*6 */

 .pagey6 {
   display: inline-block;
   margin-left: -175px;
   background: white;
   width: 150px;
   max-width: 200px;
   min-height: 250px;
   box-shadow: 0px 4px 10px #000;
   padding: 5px;
   
   background-image: url("images/6.png");
   background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;
   transform: translate(0px,0px) translateZ(0);
   transition: all 0.1s;
   
}
 .pagey6:hover {
   transform: translate(-6px,-60px) rotate(-1.2deg);
}
 .pagey6.active:hover {
   transform: translate(0px,0px);
}
 .pagey6 .titley {
   float: left;
   color: silver;
   font-weight: bold;
   transform: rotate(90deg);
   transform-origin: 0% 100%;
}
 .pagey6 .contenty {
   float: left;
   width: 85%;
   margin-left: 1.5em;
}
 .pagey6 .contenty p {
   margin: 0;
   padding: 0;
}
 .pagey6 .contenty p.info {
   color: silver;
}



/* headphone background */

.headphonebg {
  background-image: url("images/headphones.jpg");
  /*background-attachment: fixed;*/
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;
  min-height: 400px;

}

.headphonebg p {
  margin-top: 10%;
}

/*
.headphonebg p {
  padding: 50px;
}