body {
      margin:0; padding:0;
      font-size:9px; font-family:'verdana', sans-serif; line-height:12px;
    }
    h2 {
      width:144px; 
      height:144px; 
      min-width:144px;
      background-image:url('images/readymech_logo.png');
      background-size:contain;
      background-repeat:no-repeat;
      text-indent:-500px; overflow:hidden;
      }
      
    @media only screen and (min-width:768px) {
      h2 {
        float:left;
      }
    }
      
      
    #footer {text-align:left; padding-bottom:20px; }
    p {margin:0; padding:20px 40px; }
    img {border:0px; }
    .caption {clear:both; text-align:center; padding-top:4px; white-space:nowrap; }

    #masthead {
			display:flex;
			flex-direction:column;
			width:100%; padding:20px 20px 20px 20px;
			box-sizing:border-box;
      font-weight:bold; font-family:'trebuchet ms', sans-serif; font-size:11px; line-height:18px; }
    #masthead p {
      margin:0; 
      padding:0 20px;
    }
    a {color:black; text-decoration:none; }
    a:hover {border-bottom:1px dashed black; }
    a.poster:hover {border-bottom:0px; }
    #wrap_alpha {width:900px; margin:auto; }
    #wrap_beta {width:900px; position:absolute; top:0px;}

		.content {
			margin:auto;
			display:flex;
			flex-wrap:wrap;
			padding:10px;
		}
		
		@media only screen and (min-width:375px) {
  		.content {
    		padding:20px;
  		}
		}

		.box {
  		position:relative;
			width:300px;
			height:300px;
		}
		
		.box:hover .box_image {
  		opacity:0;
		}
		
		.box:hover .box_template {
  		opacity:1; 
		}

    .box_image {
      margin:0; padding:0;
			opacity:1;
			transition: opacity 0.35s ease-in-out;
		}
    .box_template {
      position:absolute; z-index:10;
      left:0px; 
      top:0px;
      opacity:0; 
			transition: opacity 0.35s ease-in-out;
    }