@media screen and (max-width: 480px) {

    .wrapper {
        width: 100%;
    }

    .blog-wrapper {
        width: 90%;
    }

    #top {
        grid-template-columns: 55px auto 50px;
        justify-items: right;
        margin-right: 20px;
        height: 35px;
        padding: 0;
    }

    #top .search {
        margin-top: 0;
    }    

    #top .search-form .search-field {
        top: -2px;
        right: 65px;
    }

    

    #top .ham {
        margin-top: 5px;    
        
    }   

    #top #ham {
        margin-top: 4px;
        position: inherit;
    }
      

    .menu-fomenu-container {
        /* position: fixed;                 */
        width: 100%;        
        left: 0;
        margin-top: 7px;
    }

    #logo {
        padding-left: 20px;
    }
    nav#main {
        display: none;
    }

    header {
        background-size: auto 282px;        
        height: 282px;
    }

    header .bg {
        display: none !important;
    }

    header .bp {
      background-size: auto 282px;
      background-position: 830px center;
      height: 282px;
    }

    header .futar {
        background-size: 360px auto;
        background-position: 0px center;
        height: 314px;
        width: 100%;
        top: -14px;
        left: -20px;        
    }     

    header .buttons {
        position: relative;
        display: grid;
        grid-template-columns: auto auto;
        height: 240px;
        width: 90%;
        left: 0;
        top: 0;
        right: 0;
        margin: auto;

    }    

    header .buttons .price,
    header .buttons .phone,
    header .buttons .blog,
    header .buttons .fb {
        background-position: right 0;
        background-repeat: no-repeat;
        background-size: 100px auto;
        width: 100px;
        height: 100px;
        margin: auto;
        padding:0;    
    }    

    header .buttons .price:hover,
    header .buttons .phone:hover,
    header .buttons .blog:hover,
    header .buttons .fb:hover {
        background-position: 0 -100px !important;
    }

    header .buttons a:hover span {
        display: none;
    }

    header .leaves {
        display: none;
    }

    #blog {
        margin-top: 290px;
        left: 0;
    }

    #blog .grid-item, 
    #blog .grid-sizer { width: 100%; }

    #blog .grid-item {
        margin-bottom: 20px;
    }

    .seal { 
        background-size: 90px 90px;
        width: 90px;
        height: 90px;
        left: 35%;
        right: auto;
        top: -44px;
    }

    #postcontent {
        padding: 0 20px;
    }

    #headerleft {
        padding: 20px;
    }

    #footer {
        padding: 20px 20px 0px 20px;
    }

    #footer .wrapper {
        margin:0;
        width: 100%;
    }

    #footer .wrapper .grids {
        grid-template-columns: 1fr;
        column-gap: 20px;    
    }


    #footer .col {
        margin-bottom: 40px;
    }

    .wp-block-table.is-style-stripes td, 
    .wp-block-table.is-style-stripes th {
        font-size: 15px;
        font-size: 14px;
        padding: 5px;        
    }

}


@media screen and (max-width: 1200px) {
    nav#main a {
        margin:0 2em;
    }
}




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

    #postcontent {
        width: 100%;
        float: none;
    }

    #sidebar {
        display: none;
    }

    nav#main #mainmenu {
        display: none;
    }

    .headerwrapper {
        width: 100%;
        max-width: 1240px;
    
    }

    #headerleft {
        width: 90%;
        float: none;
        position: relative;
        margin: 0 auto;
    }
    
    #headerright {
        display: none;
    }
    

}


@media screen and (min-width: 481px) and (max-width: 992px) {
    #footer .wrapper .grids {
        grid-template-columns: repeat(2,1fr);
    }
}


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

    header {
        height: 345px;
    }

    header .bg {
        height: 385px;
    }

    header .bp {
        background-size: auto 340px;
        background-position: 1113px center;
        height: 340px;
    }

    header .leaves {
        padding-right: 30px;
        right: 7%;
        background-size: 20px 20px;        
    }
  
    header .buttons {
        position: absolute;
        display: grid;
        grid-template-columns: auto auto;
        height: 240px;
        width: 50%;
        
        top: 15px;
        right: 0;
        margin: auto;
    }

      header .futar {
          background-size: 360px auto;
          background-position: 0px center;
          height: 314px;
          width: 100%;
          top: -14px;
          left: -20px;        
      }     

      header .buttons .price,
      header .buttons .phone,
      header .buttons .blog,
      header .buttons .fb {
          background-position: right 0;
          background-repeat: no-repeat;
          background-size: 100px auto;
          width: 100px;
          height: 100px;
          margin: auto;
          padding:0;    
      }    
  
      header .buttons .price:hover,
      header .buttons .phone:hover,
      header .buttons .blog:hover,
      header .buttons .fb:hover {
          background-position: 0 -100px !important;
      }
  
      header .buttons a:hover span {
          display: none;
      }

      .seal { 
        left: 39%;
        right: auto;
        top: -80px;
    }

      #blog .grid-sizer,
        #blog .grid-item { width: 45%; margin-bottom: 30px; }


}

/*@2x images*/
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) {
    header .bg {
        background-image: url(../images/header-bg@2x.png);
    }
    header .bp {
        background-image: url(../images/bp@2x.jpg);
    }
    header .futar {
        background-image: url(../images/futar@2x.png);
    }
    header .buttons .price {
        background-image: url(../images/price@2x.png);
    }
    header .buttons .phone {
        background-image: url(../images/phone@2x.png);
    }
    header .buttons .blog {
        background-image: url(../images/blog@2x.png);
    }
    header .buttons .fb {
        background-image: url(../images/fb@2x.png);
    }
    header .buttons .price:hover,
    header .buttons .phone:hover,
    header .buttons .blog:hover,
    header .buttons .fb:hover {
        background-position: 0 -120px;
    }

    header .leaves {
        background-image: url(../images/leaves@2x.png);
    }

    #blog .seal {
        background-image: url(../images/hpblog@2x.png);
    }

    .footer-logo {
        background-image: url(../images/footer-logo@2x.png);
    }

    #footer .yt {
        background-image: url(../images/yt-footer@2x.png);
    }

    #footer .fb {
        background-image: url(../images/fb-footer@2x.png);
    }

}