.clr{
    clear: both;
}
body{
    width: 100%;
    height: 100%;
    position: relative;
}
html{
    width: 100%;
    height: 100%;
}

<!-- new menu-->

.menu{
    height: 100px;
}
.menu-bar{
    padding: 20px 0px;
}
.menu-bar ul{
    width: 100%;
    margin: 0px;
}
.menu-bar ul li{
    float: left;
    list-style: none;
    margin-right: 92px;
}
.menu-bar ul li:last-child{
    margin-right: 20px;
}
.menu-bar ul li a{
    position: relative;
    display: block;
}
.menu-bar ul li a .imga{
  -webkit-transition: all linear 0.3s;
  -ms-transition: all linear 0.3s;
  -moz-transition: all linear 0.3s;
  -o-transition: all linear 0.3s;
  transition: all linear 0.3s
}
.menu-bar ul li a .imgb{
    position: absolute;
    left: 0px;
    top: 0px;
    opacity: 0;
    -webkit-transition: all linear 0.3s;
  -ms-transition: all linear 0.3s;
  -moz-transition: all linear 0.3s;
  -o-transition: all linear 0.3s;
  transition: all linear 0.3s
}
.menu-bar ul li:hover a .imgb{
    opacity: 1;
}
.menu-bar ul li:hover a .imga{
    opacity: 0;
}

.anythingControls{
    display: none !important;
}


<!-- footer -->

.foder{
}
.foder .fleft{
    float: left;
    position: absolute;
    left: 20px;
    bottom: 15px;
}
.foder .fleft .ins{
    float: left;
    width: 60px;
    position: relative;
}
.foder .fleft .ins .ima{
    width: 150px;
  
}
.foder .fleft .ins .imb{
    width: 150px;
    position: absolute;
    left: 0px;
    top: 0px;
    opacity: 0;
 
}
.foder .fleft .ins a:hover .ima{
    opacity: 0;
}
.foder .fleft .ins a:hover .imb{
    opacity: 1;
}
.foder .fright{
    float: right;
    position: absolute;
    right: 20px;
    bottom: 15px;
}
.foder .fright img{
    width: 90px;
}
.foder .copy{
    
}
.container{
    height: 100%;
}

/*
*************************
New style*/

.top-menu{
    position: relative;
    z-index: 20;
    text-align: center;
}
.top-menu ul{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between;
}
.top-menu ul{
    max-width: 1055px;
    margin: 0 auto;
    padding: 20px 15px;
}
.top-menu li img{
    max-width: 100%;
}
.top-menu li{
    display: inline-block;
    position: relative;
}

.top-menu li:hover:before, .top-menu li:hover:after{
    width: 30px;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}
/*.top-menu li:before, .top-menu li:after{*/
    /*width: 0;*/
    /*height: 2px;*/
    /*background-color: #43186d;*/
    /*content: "";*/
    /*display: block;*/
    /*position: absolute;*/
    /*bottom: -2px;*/
    /*-webkit-transition: 0.3s;*/
    /*-moz-transition: 0.3s;*/
    /*-ms-transition: 0.3s;*/
    /*-o-transition: 0.3s;*/
    /*transition: 0.3s;*/
/*}*/

.top-menu li:before{
    right: 50%;
}

.top-menu li:after{
    left: 50%;
}

.top-menu li a:before{
    left: 0;
}

.top-menu li a:after{
    right: 0;
}

.top-menu li.green a{
    color: #00ffda;
}

.top-menu li.green a:before, .top-menu li.green a:after{
    background-color: #00ffda;
}

.top-menu li.violet a{
    color: #cc0095;
}

.top-menu li.violet a:before, .top-menu li.violet a:after{
    background-color: #cc0095;
}

.top-menu li.orange a{
    color: #ffb600;
}

.top-menu li.orange a:before, .top-menu li.orange a:after{
    background-color: #ffb600;
}

.top-menu li.blue a{
    color: #00ebff;
}

.top-menu li.blue a:before, .top-menu li.blue a:after{
    background-color: #00ebff;
}

.top-menu .imgb{
    display: none;
}

.top-menu li a:hover .imgb{
    display: inline-block;
}

.top-menu li a:hover .imga{
    display: none;
}

.top-menu li.red a{
    color: #ff2d00;
}

.top-menu li.red a:before, .top-menu li.red a:after{
    background-color: #ff2d00;
}

/*.top-menu li a:before,  .top-menu li a:after{*/
    /*width: 8px;*/
    /*height: 8px;*/
    /*position: absolute;*/
    /*top: 9px;*/
    /*display: inline-block;*/
    /*-webkit-border-radius:50%;*/
    /*-moz-border-radius:50%;*/
    /*border-radius:50%;*/
    /*background-color: black;*/
    /*content: "";*/
/*}*/

.top-menu li a{
    padding: 0 0 5px;
    font-size: 20px;
    position: relative;
    display: inline-block;
    border-bottom: 2px solid transparent;
}

body{
    min-height: 100%;
}

.btnworknext, .btnworkprev{
    width: 100px;
    height: 100%;
    position: fixed;
    background-position: center!important;
}

.btnworkprev{
    margin-left: 0;
}

.btnworknext{
    right: 0;
}

@media (max-width: 1367px) {
    .top-menu ul{
        padding: 20px 5px;
        max-width: 742px;
    }
    .top-menu li{
        padding: 0 10px;
    }
    .top-menu li a {
        padding: 0;
    }
    #page-wrap {
        top: 13%;
    }
}

@media (max-width: 768px) {

    .top-menu ul {
        max-width: 670px;
    }

    .top-menu li a{
        padding: 0;
        font-size: 16px;
    }

    .top-menu li a:before, .top-menu li a:after{
        width: 6px;
        height: 6px;
        top: 6px;
    }

    #page-wrap {
        top: 0;
    }

}

#page-wrap {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
}
#page-container {
  position: absolute;
  display: table;
  text-align: center;
  width: 100%;
}

#page-container-about {
  position: absolute;
  display: table;
  text-align: center;
  width: 100%;
}
#page-container-2 {
  position: absolute;
  display: table;
  text-align: center;
  width: 100%;
}

#pt-wrapper {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  height: 768px;
  position: absolute;
}

#about_content {
  display: table-cell;
  vertical-align: middle;
}

#about_content img {
  width: 50%;
}

.contact_info {
  display: table-cell;
  vertical-align: middle;
}

.clearfix::after {
  content: " ";
  clear: both;
  display: block;
}
#contact_info_main_pic {
  width: 50%; 
  margin-left: 25%; 
  margin-right: 25%;
}
#contact_info_main {
  text-align: center;
}
#related_info {
  margin-left: 25%; 
  margin-right: 25%;
}	
#contactinfo {
  width: 56%; 
  float: left; 
  margin: 25px 0 0 0;
}
#contactinfo_button {
  width: 100%; 
  margin: 0; 
  padding: 0;
}
#contactphone {
  width: 42%; 
  float: right; 
  margin: 25px 0 0 2%;
}
#contactphone_button {
  width: 100%; 
  margin: 0; 
  padding: 0; 
  float: right;
}
.flex-fix-container{ /* added this ID to fix some responsive bugs on published page*/
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}

.flex-fix{ /* added this class to fix some responsive bugs on published page*/
  -webkit-box-flex:1;
      -ms-flex:1 1 calc(100%/3);
          flex:1 1 calc(100%/3);
  padding:  5px;
  margin-bottom: 0;
}
@media screen and (max-width: 1400px) {
.pt-page,
#pt-wrapper {
  height: 534px;
}
}

@media screen and (min-width: 1920px) {
  #about_content img {
    width: 36%;
  }

  #contact_info_main_pic {
    width: 40%;
    margin-left: 30%;
    margin-right: 30%; 
  }

  #contactinfo_button {
    background-size: 57%;
  }

  #contactphone_button {
    background-size: 55%;
  }

  #related_info {
    margin-left: 30%;
    margin-right: 30%;
  }
}

@media screen and (max-width: 1300px) {
#contact_info_main_pic {
  width: 50%; 
  margin-left: 25%; 
  margin-right: 25%;
}

#related_info {
  margin-left: 25%; 
  margin-right: 25%;
}	
#contactinfo {
  width: 53%; 
  float: left; 
  margin: 25px 0 0 0;
}
#contactinfo_button {
  width: 100%; 
  margin: 0; 
  padding: 0;
}
#contactphone {
  width: 37%; 
  float: right; 
  margin: 25px 0 0 2%;
}
}

@media screen and (max-width: 1024px) {
  .pt-page img {
    height: 534px;
  }
  #page-wrap {
    top: 0;
  }
}

@media screen and (max-width: 960px) {
  .pt-page img {
    max-width: 460.8px;
    height: 346px;
  }
  .pt-page {
    height: 346px;
  }
  #pt-wrapper {
    height: 346px;
  }
  .top-menu ul {
    max-width: 550px;
  }
  .anythingSlider {
    width: 461px!important;
    height: 346px!important;
  }
  #slider1 img {
    width: 461px!important;
    max-width: 461px!important;
    height: 346px!important;
  }
  #slider1 li {
    width: 461px!important;
  }
  #slider1 {
    width: 461px!important;
  }  
  #contactphone,
  #contactinfo {
    margin-top: -30px;
  }

}

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

  #about_content img {
    width: 80%;
  }
}


@media screen and (max-width: 1024px) and (max-height: 600px){
  .pt-page img {
    max-width: 460.8px;
    height: 346px;
  }
  .pt-page {
    height: 346px;
  }
  #pt-wrapper {
    height: 346px;
  }
  .top-menu ul {
    max-width: 550px;
  }
  .anythingSlider {
    width: 460.8px;
  }
}

.published-container { 
  height: auto;
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: space-between;
  max-width: 1025px;
  margin: 0 auto;
  grid-gap: 15px 15px;
  margin-top:  69px;
  margin-bottom: 75px;
}

.grid-item {
  margin-bottom: -4px;
}

.foder-published {
  position: relative;
}

.imghvr-push-up figcaption img {
  width: 100%;
}

@media (max-width: 1367px) {
  .grid-container {
    max-width: 712px; 
    margin-top:  41px;
    margin-bottom: 90px; 
  }
}

@media (max-width: 960px) {
  .grid-container {max-width: 523px; }

  #frame-container iframe {
    width: 70%;
  }
}

@media (max-width: 1024px) {
  .grid-container {
    margin-top:  9px;
  }
}

@media (max-width: 540px) {
  .grid-container {
    margin-left: 3%;
    margin-right: 3%;
  }
}

#pt-wrapper img:hover {
  cursor: pointer;
}

a, a:hover, a:active, a:focus {
  outline: 0;
}