.header{
  position: relative;
  float: top;
  top: -25px;
  text-align: center;
  width: 100%;
  min-height: 500px;
  background-origin:border;
  background-size:cover;
  background: repeating-linear-gradient(135deg,#046e00,#a3a3a3,rgb(12, 11, 11));
  z-index: 0;
  
}
.header-text{
    font-size: 180px;
    
}
.apps-container{
  width: 100%;
  height: 450px;
  text-align: left;
}
.specifications-list{
  width: auto;
  height: auto;
  margin-left: 10px;
}
.android{
    position: absolute;
    top: 25%;
    margin-left: 0px;
    width: 0;
    float: right;
    transition: 5s;
}
.apple{
    position: absolute;
    top: 25%;
    margin-left: 0px;
    float: right;
    width: 0;
    transition: 5s;
}
.windows{
  position: absolute;
  top: 25%;
  right: 10%;
  width: 0;
  float: right;
  transition: 2s;
}
.mac{
  position: absolute;
  top: 25%;
  right: 10%;
  width: 0;
  float: right;
  transition: 2s;
}

.headings{
 font-weight: bolder;
 color: blue;
 margin-left: 10px;
}
.door-lock{
 position: relative;
 width: 300px;
 margin-right:10px;
 margin-left: 20px;
 float: left;
}
.door-lock .image{
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.door-lock:hover .image {
opacity: 0.3;
}
.door-lock:hover .middle {
opacity: 1;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.bell {
background-color: rgb(13, 0, 128);
color: white;
font-size: 16px;
outline: none;
border-radius: 15px;
padding: 16px 32px;
}
.horn {
background-color: rgb(13, 0, 128);
color: white;
font-size: 16px;
outline: none;
border-radius: 15px;
padding: 16px 32px;
}
.download{
padding: 20px 80px;
font-size: 24px;
cursor: pointer;
outline: none;
color: #fff;
background-color: #0000a3;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
position: relative;
float: center;
margin-left: 30%;
margin-top: 20px;
}
.download:disabled{background-color: #3d3d3d }
.download:focus {outline:0;}
.download:active {
background-color: #05736d;
background-size:cover;
background-image: url(images/blue-lightning.png);
box-shadow: 0 5px #666;
transform: translateY(4px);
transition: .1s;
}

@media screen and (max-width: 800px) {
  .header{min-height: 400px;}
  .header-text{font-size: 60px;left: 25px;}
  .door-lock{width:100%;margin-left:0px;}
  .apple{margin-right: 0px;}
  .apps-container{height: 800px;}
  .specifications-list{font-size: 12px;}
  .download{margin-left: 10px;padding: 10px 40px;}
}