wp_twentytwentyone-child-spring2life/titlepage.css

   /* --------------------------------------------- animated burger menu --- */
   /* from  https://www.cssscript.com/morphing-side-menu-with-pure-css-css3/ */
   
   .menu {
     position:fixed;
     /* position: absolute; */
     top: 0;
     left: 0;
     z-index: 1000;
     height: 70px;
     width: 70px;
     overflow: hidden;
     pointer-events: none;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
   }
   
   .menu * {
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
   }
   
   #menuTrigger:checked ~ .menu { pointer-events: auto; }
   
   #menuTrigger:checked ~ .menu h3 {
     -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
     -webkit-transition-delay: 0.2s;
     transition-delay: 0.2s;
   }
   
   #menuTrigger:checked ~ header>.site-branding p {
     color: green !important;
     display: flex !important;
   }
   
   .menu ~ header {
     display: none !important;
   }
   
   #menuTrigger:checked ~ header {
     display: flex !important;
   }
   
   #menuTrigger:checked ~ #masthead {
     -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
     -webkit-transition-delay: 0.2s;
     transition-delay: 0.2s;
   }
   
   
   .menu .trigger {
     position: absolute;
     z-index: 0;
     top: 10px;
     left: 10px;
     height: 56px;
     width: 56px;
     border-radius: 100%;
     cursor: pointer;
     pointer-events: auto;
     -webkit-transition: all 0.4s ease-in-out;
     transition: all 0.4s ease-in-out;
     -webkit-transition-property: -webkit-transform, box-shadow;
     transition-property: transform, box-shadow;
     -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
     box-shadow: 0 0 0 0px #424242;
   }
   
   .menu .trigger:before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     width: 100%;
     border-radius: inherit;
     overflow: hidden;
     -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
     -webkit-transition: box-shadow 0.2s 0.4s ease-in-out;
     transition: box-shadow 0.2s 0.4s ease-in-out;
     box-shadow: 0 0 0 28px #424242 inset, 0 0 0 28px #FF5722 inset;
   }
   
   #menuTrigger:checked ~ .menu .trigger {
     /* -webkit-transform: translate3d(94px, 0, 0); */
     /* transform: translate3d(94px, 0, 0); */
     /* box-shadow: 0 0 0 370px #424242; */
   }
   
   #menuTrigger:checked ~ .menu .trigger:before {
     -webkit-transition-delay: 0s;
     transition-delay: 0s;
     box-shadow: 0 0 0 0 #424242 inset, 0 0 0 28px #FF5722 inset;
   }
   
   #menuTrigger:checked ~ .menu .trigger .line:nth-child(1) {
     -webkit-transform: translateY(0) translate3d(-50%, -50%, 0);
     transform: translateY(0) translate3d(-50%, -50%, 0);
   }
   
   #menuTrigger:checked ~ .menu .trigger .line:nth-child(3) {
     -webkit-transform: translateY(0) translate3d(-50%, -50%, 0);
     transform: translateY(0) translate3d(-50%, -50%, 0);
   }
   
   .menu .trigger .line {
     position: absolute;
     top: 50%;
     left: 50%;
     background: white;
     height: 2px;
     width: 18.66667px;
     -webkit-transform: translate3d(-50%, -50%, 0);
     transform: translate3d(-50%, -50%, 0);
     -webkit-transition: -webkit-transform 0.4s ease-in-out;
     transition: transform 0.4s ease-in-out;
   }
   
   .menu .trigger .line:nth-child(1) {
     -webkit-transform: translateY(-5px) translate3d(-50%, -50%, 0);
     transform: translateY(-5px) translate3d(-50%, -50%, 0);
   }
   
   .menu .trigger .line:nth-child(3) {
     -webkit-transform: translateY(5px) translate3d(-50%, -50%, 0);
     transform: translateY(5px) translate3d(-50%, -50%, 0);
   }
   
   #menuTrigger {
     position: fixed;
     top: 0;
     left: -60px;
   }
   /* ----------------------------------------- end animated burger menu --- */
   
   /* ------------------------------------------------------ hide footer --- */
   .site-info {
     display: none !important;
   }

   /* -------------------------------------------------- full size image --- */
   * {
     margin: 0;
     padding: 0;
   }
   .imgbox {
     display: grid;
     height: 100%;
     /* -webkit-animation: sk-bouncedelay 3s infinite ease-in-out both;
        animation: sk-bouncedelay 3s infinite ease-in-out both; */
   }
   .center-fit {
     max-width: 100%;
     max-height: 100vh;
     /* max-width: 99%;
        max-height: 99vh; */
     margin: auto;
   }
   @media all and (device-width: 768px) and (device-height: 1024px) {
     .imgbox {
       /* height: 100vh;  */
       height: 100%;
       display: flex;
       /* background-color: red; */
     }
     .center-fit {
       position: relative;
       display:block;
       /* top: 50%;
          left: 50%;
          transform: translate(-50%, -50%); */
       ;
     }