.container-laptop {
  position: relative;
  margin-top: 0px;
  width: 600px;
  height: 180px;
}

.laptop-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  transition: background 0.5s ease;
}

.container-laptop:hover .laptop-overlay {
  display: block;
  background: rgba(0, 0, 0, .3);
}

img.laptop {
  position: absolute;
  width: 590px;
  height: 180px;
  left: 0;
}

.laptop-title {
  position: absolute;
  width: 290px;
  right: 100px;
  top: 45px;
  font-family: Calibri;
  font-size:16px;
  font-weight: 200;
  font-size: 20px;
  text-align: right;
  text-transform: uppercase;
  color: white;
  z-index: 1;
  transition: top .5s ease;
  text-shadow: 1px 1px 1px black, 0 0 0 black;
}

.container-laptop:hover .laptop-title {
  top: 20px;
}

.laptop-button {
  position: absolute;
  width: 190px;
  right:160px;
  top: 95px;
  text-align: right;
  opacity: 0;
  transition: opacity .35s ease;
}

a.laptop:link, a.laptop:visited {color:white; font-family:Calibri; font-weight:200;text-shadow: 1px 1px 1px black, 0 0 0 black;}
a.laptop:hover {text-decoration:none; color:#FFFFFF; font-family:Calibri; font-weight:200;text-shadow: 1px 1px 1px black, 0 0 0 black;}	

.laptop-button a.laptop {
  width: 300px;
  padding: 4px 10px;
  text-align: center;
  color: white;
  border: solid 1px white;
  z-index: 1;
}

.container-laptop:hover .laptop-button {
  opacity: 1;
}

/* build pc homepage effect start */
.container-buildpc1 {
  position: relative;
  margin-top: 0px;
  width: 592px;
  height: 371px;
}

.buildpc1-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  transition: background 0.5s ease;
}

.container-buildpc1:hover .buildpc1-overlay {
  display: block;
  background: rgba(0, 0, 0, .3);
}

img.buildpc1 {
  position: absolute;
  width: 592px;
  height: 371px;
  left: 0;
}

.buildpc1-title {
  position: absolute;
  width: 300px;
  right: 280px;
  top: -33px;
  font-family: Calibri;
  font-size:38px;
  font-weight: 700;
  text-align: left;
  text-shadow:#000 1px 1px 5px;
  text-transform: uppercase;
  color: white;
  z-index: 1;
  transition: top .5s ease;
  text-shadow: 1px 1px 1px black, 0 0 0 black;
}

.container-buildpc1:hover .buildpc1-title {
  top: 20px;
}

.buildpc1-button {
  position: absolute;
  width: 592px;
  left:12px;
  top: 24px;
  text-align: left;
  opacity: 0;
  transition: opacity .35s ease;
}

a.buildpc1:link, a.buildpc1:visited {color:white; font-family:Calibri; font-weight:500;text-shadow: 1px 1px 1px black, 0 0 0 black;}
a.buildpc1:hover {text-decoration:none; color:#FFFFFF; font-family:Calibri; font-weight:500;text-shadow: 1px 1px 1px black, 0 0 0 black;}	

.buildpc1-button a.buildpc1 {
  width: 300px;
  padding: 10px 20px;
  text-align: center;
  color: white;
  border: solid 1px white;
  z-index: 1;
}

.container-buildpc1:hover .buildpc1-button {
  opacity: 1;
}
/* build pc homepage effect end */

.container-smartwatch {
  position: relative;
  margin-top: 0px;
  width: 267px;
  height: 179px;
}

.smartwatch-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  transition: background 0.5s ease;
}

.container-smartwatch:hover .smartwatch-overlay {
  display: block;
  background: rgba(0, 0, 0, .3);
}

img.smartwatch {
  position: absolute;
  width: 267px;
  height: 179px;
  left: 0;
}

.smartwatch-title {
  position: absolute;
  width: 167px;
  right: 10px;
  top: 1px;
  font-family: Calibri;
  font-size:16px;
  font-weight: 200;
  font-size: 20px;
  text-align: right;
  text-transform: uppercase;
  color: white;
  z-index: 1;
  transition: top .5s ease;
  text-shadow: 1px 1px 1px black, 0 0 0 black;
}

.container-smartwatch:hover .smartwatch-title {
  top: -17px;
}

.smartwatch-button {
  position: absolute;
  width: 267px;
  right:12px;
  top: 33px;
  text-align: right;
  opacity: 0;
  transition: opacity .35s ease;
}

a.smartwatch:link, a.smartwatch:visited {color:white; font-family:Calibri; font-weight:200;text-shadow: 1px 1px 1px black, 0 0 0 black;}
a.smartwatch:hover {text-decoration:none; color:#FFFF00; font-family:Calibri; font-weight:200;text-shadow: 1px 1px 1px black, 0 0 0 black;}	

.smartwatch-button a.smartwatch {
  width: 300px;
  padding: 4px 10px;
  text-align: center;
  color: white;
  border: solid 1px white;
  z-index: 1;
}

.container-smartwatch:hover .smartwatch-button {
  opacity: 1;
}


/* apple homepage effect start */
.container-apple {
  position: relative;
  margin-top: 0px;
  width: 324px;
  height: 179px;
}

.apple-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  transition: background 0.5s ease;
}

.container-apple:hover .apple-overlay {
  display: block;
  background: rgba(0, 0, 0, .3);
}

img.apple {
  position: absolute;
  width: 324px;
  height: 179px;
  left: 0;
}

.apple-title {
  position: absolute;
  width: 224px;
  right: 88px;
  top: 125px;
  font-family: Calibri;
  font-size:16px;
  font-weight: 200;
  font-size: 20px;
  text-align: right;
  text-transform: uppercase;
  color: white;
  z-index: 1;
  transition: top .5s ease;
  text-shadow: 1px 1px 1px black, 0 0 0 black;
}

.container-apple:hover .apple-title {
  top: 86px;
}

.apple-button {
  position: absolute;
  width: 324px;
  right:120px;
  top: 150px;
  text-align: right;
  opacity: 0;
  transition: opacity .35s ease;
}

a.apple:link, a.apple:visited {color:white; font-family:Calibri; font-weight:200;text-shadow: 1px 1px 1px black, 0 0 0 black;}
a.apple:hover {text-decoration:none; color:#FFFF00; font-family:Calibri; font-weight:200;text-shadow: 1px 1px 1px black, 0 0 0 black;}	

.apple-button a.apple {
  width: 120px;
  padding: 4px 10px;
  text-align: center;
  color: white;
  border: solid 1px white;
  z-index: 1;
}

.container-apple:hover .apple-button {
  opacity: 1;
}
/* apple homepage effect end */

/* readypc homepage effect start */
.container-readypc {
  position: relative;
  margin-top: 0px;
  width: 282px;
  height: 365px;
}

.readypc-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  transition: background 0.5s ease;
}

.container-readypc:hover .readypc-overlay {
  display: block;
  background: rgba(0, 0, 0, .3);
}

img.readypc {
  position: absolute;
  width: 282px;
  height: 365px;
  left: 0;
}

.readypc-title {
  position: absolute;
  width: 224px;
  right: 30px;
  top: 10px;
  font-family: Calibri;
  font-size:16px;
  font-weight: 200;
  font-size: 20px;
  text-align: center;
  text-transform: uppercase;
  color: white;
  text-shadow: 1px 1px 1px black, 0 0 0 black;
  z-index: 1;
  transition: top .5s ease;
}

.container-readypc:hover .readypc-title {
  top: -8px;
}

.readypc-button {
  position: absolute;
  width: 124px;
  right:105px;
  top: 60px;
  text-align: right;
  opacity: 0;
  transition: opacity .35s ease;
}

a.readypc:link, a.readypc:visited {color:white; font-family:Calibri; font-weight:200; text-shadow: 1px 1px 1px black, 0 0 0 black;}
a.readypc:hover {text-decoration:none; color:white; font-family:Calibri; font-weight:200; text-shadow: 1px 1px 1px black, 0 0 0 black;}	

.readypc-button a.readypc {
  width: 120px;
  padding: 4px 10px;
  text-align: center;
  color: white;
  border: solid 1px white;
  z-index: 1;
  
}

.container-readypc:hover .readypc-button {
  opacity: 1;
}
/* tablet homepage effect end */

/* smartwatch homepage effect start */
.container-server {
  position: relative;
  margin-top: 0px;
  width: 282px;
  height: 365px;
}

.server-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  transition: background 0.5s ease;
}

.container-server:hover .server-overlay {
  display: block;
  background: rgba(0, 0, 0, .3);
}

img.server {
  position: absolute;
  width: 282px;
  height: 365px;
  left: 0;
}

.server-title {
  position: absolute;
  width: 224px;
  right: 30px;
  top: 10px;
  font-family: Calibri;
  font-size:16px;
  font-weight: 200;
  font-size: 20px;
  text-align: center;
  text-transform: uppercase;
  color: white;
  text-shadow: 1px 1px 1px black, 0 0 0 black;
  z-index: 1;
  transition: top .5s ease;
}

.container-server:hover .server-title {
  top: -8px;
}

.server-button {
  position: absolute;
  width: 124px;
  right:105px;
  top: 60px;
  text-align: right;
  opacity: 0;
  transition: opacity .35s ease;
}

a.server:link, a.server:visited {color:white; font-family:Calibri; font-weight:200; text-shadow: 1px 1px 1px black, 0 0 0 black;}
a.server:hover {text-decoration:none; color:white; font-family:Calibri; font-weight:200; text-shadow: 1px 1px 1px black, 0 0 0 black;}	

.server-button a.server {
  width: 120px;
  padding: 4px 10px;
  text-align: center;
  color: white;
  border: solid 1px white;
  z-index: 1;
  
}

.container-server:hover .server-button {
  opacity: 1;
}
/* smartwatch homepage effect end */