Difference between revisions of "Template:Sheffield/style/front"

Revision as of 12:34, 5 October 2016

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;

}

.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;

}

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

.phone {

      display:none;
      }

@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;

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

}

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

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

font-size:25px;

       }
      .right-but, .left-but {
            height:80px;
            width:200px;
        }
       .front-img {
             margin-top:50px;
             width:100%;
             }

}

@media (max-width:600px) {

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

font-size:20px;

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

       .front-img {
             margin-top:50px;
             width:100%;
             }

}