@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');

      
      
      body{
        background-color:#F1F1F1;
        padding:20px;
        padding-top:150px;
        background-image:url("https://dev.byte-post.com/src/backs3x3.png");
        background-size: 100px;
        background-attachment: fixed;
       font-family:"Ubuntu";
      }
      
      .main-header{
        height:150px;
        background-color:#AD2624;;
        color:white;
        position:fixed;
        top:0;
        left:0;
        right:0;
        text-align:right;
        padding:5px 15px;
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
    -webkit-box-shadow: 0 4px 10px #00000044;
            box-shadow: 0 4px 10px #00000044;
            
                transition: font-size 0.5s, height 0.5s;
    -webkit-transition: font-size 0.5s, height 0.5s;
    -moz-transition: font-size 0.5s, height 0.5s;
      }
      h1 a {
          text-decoration:none;
          color:white;
      }
      .main-header h1, .main-header img{
        margin:auto 3px;
      }
      .main{
        background:white;
        padding:30px;
        border-radius:8px;
        -webkit-box-shadow:3px 3px 8px #00000033;
                box-shadow:3px 3px 8px #00000033;
        margin: 30px auto;
        max-width: 60%;
      }
      .main .header{
        text-align:right;
      }
      .sub-cont{
        background:#F1F1F1;
        padding:20px;
        border-radius:10px;
      }
      input, textarea, select{
        border-radius:4px;
        border:none;
        height:18pt;
        width:100%;
      }
       textarea{
           resize:vertical;
           height:150px;
       }
      button{
        padding:5px 20px;
        background:white;
        border:solid 1px grey;
        border-radius:3px;
      }
      h1{
        font-weight:lighter;
      }
      .flexGrid{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-orient:horizontal;
        -webkit-box-direction:normal;
            -ms-flex-direction:row;
                flex-direction:row;
        width:100%;
        text-align:left;
      }
      .flexItem{
        -webkit-box-shadow:3px 3px 8px #00000033;
                box-shadow:3px 3px 8px #00000033;
        -webkit-box-flex:1;
            -ms-flex:1 0 30%;
                flex:1 0 30%;
        margin:auto 5px auto auto;
        background:#F3F3F3;
        padding:5px 10px;
        border-radius:5px;
        min-height:100px;
        max-width: 50%;
      }
   .divimg{
        margin:auto;
        text-align:center;
        width:100%;
      }
      .flexItem .ItemBtn {
         width:100%;
         margin:auto;
        padding:4px;
        display:-webkit-inline-box;
        display:-ms-inline-flexbox;
        display:inline-flex;
      } 
      .flexItem .ItemBtn a{
        -webkit-box-flex:1;
            -ms-flex:1;
                flex:1;
        margin:3px;
        padding:3px;
        background:whitesmoke;
        border:solid 2px grey;
        text-align:center;
        text-decoration:none;
        color:grey;
        border-radius:4px;

      }
      .flexItem .ItemBtn a:hover{
        background:lightgray;
      }
        .footer{
        height:50px;
        background:#5a5a5a;
		margin-bottom:0;
        color:whitesmoke;
        font-size:10pt;
        
      }
      
      .footer a {
          color:whitesmoke;
          text-decoration:none;
      }
           .footer a:hover {
          color:#fcfcfc;
          text-decoration:underline;
      }
      ul{
        list-style-type: square;
      }
      ul li {
         padding: 7px;
      }
      li a {
          text-decoration:none;
      }
      
    .main-header.small {
        font-size: 9pt;
        height: 90px;
    }
          
    .sub-cont img.zoomImg {
      position:fixed;
      top:0;
      bottom:0;
      left:0;
      right:0;
      margin:auto;
      zoom: 1.25;
      z-index:55;
      max-width: 90%;
      max-height: 90%;
    }
    
    .overlay {
      position:fixed;
      top:0;
      bottom:0;
      left:0;
      right:0;
      margin:auto;
      width:100%;
      height:100%;
      background:black;
      z-index:50;
      display:none;
      opacity:0.9;
    	-webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
    }
          
      
    @media screen and (min-width:0px) and (max-width:900px) {
          body{
            background-size: 200px;
          }
        .main {
          max-width: 90%;
        }
        .main-header{
          height:100px;
          font-size:10pt;
        }
        .main p{
          font-size:10pt;
        }
        body{
          padding-top:100px;
        }
        .flexItem{
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            min-height: 150px;
            max-width: 100%;
        }
       .main  img {
         width: 100%;
          height: auto;
        }
         .main img .zoomImg {
                zoom: 1.5;
          }
      }