Template:Sheffield/style/front

1. front {

width:100%; height:100vh; background-size: 100% 100%; background-color: }

.back-video {

   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   overflow: hidden;
   z-index: -100;

}

.fullscreen-bg {

   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
   filter: grayscale(100%);
   opacity: 0.5;
   filter: alpha(opacity=50);

}

.front-img { height:80%; margin-top:120px; z-index:2; margin-left: auto;

   margin-right: auto;
   display:block;

}

.left-box { height:100vh; width:100px; float:left; position: relative; }

.left-but { background-color:#a94442; opacity:0.75; border-radius:5px; margin-left:100px; width:300px; height:120px; position: absolute; top: 50%; transform: translate(0, -50%); line-height:90px; text-align:center;

       cursor:pointer;

}

.left-but h1{ font-size:40px; color:white; border:#752E2D 7px solid; border-radius:5px; margin:10px; }

.right-box { height:100vh; width:100px; float:right; position: relative;

       margin-top:0px;
       border:none;

}

.right-but { background-color:#0091c2; opacity:0.75; border-radius:5px; right:100px; width:300px; height:120px; position: absolute; top: 50%; transform: translate(0, -50%); line-height:90px; text-align:center; float:left;

       cursor:pointer;

}

.right-but h1{ font-size:40px; color:white; border:#00678A 7px solid; margin:10px; border-radius:5px; } .results { background-color:#eac100; opacity:0.75; border-radius:5px; height:120px; line-height:90px; text-align:center;

       align:center;
       cursor:pointer;

}

.results h1{ font-size:40px; color:white; border:#00678A 7px solid; margin:10px; border-radius:5px; }

.phone {

      display:none;
      }

.close-jumbo h3,.close-music h3 {

       border:5px solid #eac100;
       padding:10px;
       width:300px;
       cursor:pointer;
       color: #C4AE00;
   font-size: 40px;
     }

1. music {

       width:600px;
       height:300px;
       z-index:100;
       background-color:rgba(52, 50, 50, 0.85);
       border:#eac100 2px solid;
       border-radius:5px;
       top:50%;
       left:50%;
       margin-top:-150px;
       margin-left:-300px;
       position:fixed;
       padding:20px;
       text-align:center;
       }

1. music audio {

       width:500px;
       margin:20px;
      }

@media (min-aspect-ratio: 16/9) {

 .fullscreen-bg {
   height: 300%;
   top: -100%;
 }

}

@media (max-aspect-ratio: 16/9) {

 .fullscreen-bg {
   width: 300%;
   left: -100%;
 }

}

@media (min-width:992px) and (max-width:1199px) {

       .left-but {
          margin-left:25px;
          }
       .right-but {
          right:25px;
       }
      .right-but h1,.left-but h1{

font-size:30px;

       }
      .right-but, .left-but {
            height:90px;
            width:250px;
        }

}

@media (max-width:991px) {

     .tablet {
         display:none;
         }
     .phone {
         display:inline-block;
        }
     .left-but,.right-but {
         position:static;
         transform:none;
         
         margin-top:50px;
       }
     .left-but {
         float:left;
         margin-left:5vh;
         }
     .right-but {
         float:right;
             margin-right:5vh;
        }

}

@media (min-width:768px) and (max-width:991px) {

      .right-but h1,.left-but h1{

font-size:30px;

             border-width:5px;
       }
      .right-but, .left-but {
            height:90px;
            width:250px;
        }

}

@media (min-width:601px) and (max-width:767px) {

       .right-but h1,.left-but h1{

font-size:25px;

             border-width:3px;
       }
      .right-but, .left-but {
            height:80px;
            width:200px;
        }
       .front-img {
             margin-top:50px;
             width:95%;
             margin-left:2vh;
             }
       .left-but {
            margin-left:2vh;
            }
      .right-but {
            margin-rightt:2vh;
            }

} @media( max-width:767px) {

       #music {
       width:300px;
       height:250px;
       z-index:100;
       top:50%;
       left:50%;
       margin-top:-125px;
       margin-left:-150px;
       position:fixed;
       padding:10px;
       text-align:center;
       }

1. music p {

       font-size:15px;
       }

1. music audio {

       width:250px;
       margin:10px;
      }

}

@media (max-width:600px) {

      .right-but h1,.left-but h1{

font-size:20px;

             border-width:3px;
       }
      .right-but, .left-but {
            height:70px;
            width:130px;
        }
      .left-but {
            margin-left:2vh;
            }
      .right-but {
            margin-rightt:2vh;
            }

       .front-img {
             margin-top:50px;
             width:95%;
             margin-left:2vh;
             }
     #shield .close-jumbo h3,#shield .close-music h3 {
       border:5px solid #eac100;
       padding:10px;
       width:150px;
       font-size:20px;
     }

}