.banner.portfolio-bnn {  
    text-align: center;
}

.portfolio-bnn h1{
  font-size: 64px;
  font-family: 'Raleway', sans-serif;
  color: rgb( 255, 255, 255 );
  font-weight: 200;
      padding: 20px 0 0px;
}

.portfolio-bnn h1 span{
  font-weight: 800;
  color: #16a085;
}


.vk_portfolio {
    text-align: center;
    padding: 60px 0 40px;
    color: #222e32;
}

.vk_portfolio h2{}

.vk_portfolio p {
    margin-top: 15px;    margin-bottom: 20px;
    color: #b0b0b0;
}

ul.port-cat {
    display: table;
    width: 95%;
    padding: 0;
    margin: 12px auto ;
}

ul.port-cat li{
  display: table-cell;
  border: 1px solid #cccccc;
  border-right:none; 
}

ul.port-cat li:last-child{
  border-right:1px solid #cccccc;
}


ul.port-cat li button.button {
  width: 100%;
    box-shadow: none;
    margin: 0;
    cursor: pointer;
    color: #b0b0b0;
    font-size: 18px;
    font-family: 'Raleway', sans-serif;
    line-height: 1.278;
    padding: 18px 25px 15px;
    display: block;
    -webkit-transition: all 1000ms cubic-bezier(0.23, 1, 0.32, 1);
    -moz-transition: all 1000ms cubic-bezier(0.23, 1, 0.32, 1);
    -o-transition: all 1000ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: all 1000ms cubic-bezier(0.23, 1, 0.32, 1);
    border: none;
    background-color: white;
}


ul.port-cat li .button:hover {
  background-color: #26a69a;
  color: white;
}

ul.port-cat li .button:active,
ul.port-cat li .button.is-checked {
  background-color: #26a69a;
}

ul.port-cat li .button.is-checked {
  color: white; 
}

ul.port-cat li .button:active {}

.grid {      overflow: hidden; margin-bottom: 40px;}
.button-group:after {  content: '';  display: block;  clear: both;}
.grid:after {  content: '';  display: block;  clear: both;}
.element-item {  position: relative;  float: left;  width: 50%;}
/*.element-item.element-item--width2{ width: 66%;}*/

.grid-box  {   margin: 15px; position: relative;}

	

.element-item:hover .grid-overlay{
 display: block;
}





.grid-overlay{
  display: none;
    top: 0;
    width: 100%;
    position: absolute;
    background-color: rgba( 34,46,50,.9);
    height: 100%;
}
.grid-overlay-inner {
    position: absolute;
    width: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
}

.grid-overlay-inner img{    height: 60px;}

.grid-overlay-inner p {
    font-family: 'Raleway', sans-serif;
    font-size: 18px;
    color: rgb( 228, 244, 251 );
    margin-bottom: 10px;
}


.hidden{visibility:hidden;
  width:0px!important;
  height:0px!important;
  margin:0px!important;  
  }

#load-more {
    background-color: #16a085;
    font-size: 14px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700 !important;
    border-radius: 3px;
    padding: 20px 93px 18px;
    border: none;
}

#load-more:hover{ background-color: #0f7561}


a.overlay-btn.read-more{
  padding: 13px 50px 11px;
}










#mobile-nav-trigger {
  display: none;
   text-transform: uppercase; 
      font-family: 'merge_oneregular';
    width: 100%;
    font-size: inherit;
    border: 0;
    cursor: pointer;
    color: #fff;
    background-color: #16a085;
    padding: 10px 0px 7px;
    position: relative;
   
      
}


#mobile-nav-trigger:after {
        font-family: 'Glyphicons Halflings';
    content: "\e236";
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}


#mobile-nav-trigger.active { background-color: #16a085; }







@media  (max-width: 1199px) { 

ul.port-cat li button.button {font-size: 16px; padding: 15px 16px 12px;}

.grid-box  {   margin: 10px; }
.grid-overlay-inner p {  font-size: 16px;  margin-bottom: 6px;    margin-top: 10px;}
.grid-overlay-inner img {height:45px;}
a.overlay-btn.read-more {  padding: 9px 18px 7px ;}



}





@media  (max-width: 992px) { 

  .vk_portfolio { padding: 30px 0;}
  .vk_portfolio h2 {    margin-top: 0px;}
.vk_portfolio p {  margin-top: 10px; margin-bottom: 10px; font-size: 16px;}

.portfolio-bnn h1 { font-size: 40px; padding: 10px 0 0px;}
.portfolio-bnn h1 img {    width: 35px;}

ul.port-cat li button.button {  padding: 10px 12px 8px;}

#load-more {   padding: 15px 60px 13px;}

.grid-box  {   margin: 10px; }
.grid-overlay-inner p {   font-size: 13px;    margin-bottom: 2px;    margin-top: 6px;}
.grid-overlay-inner img {height:40px;}
a.overlay-btn.read-more {  padding: 8px 15px 6px ;font-size: 12px;}





}






/** -------- for responsive tab menu -------- **/
@media (max-width: 991px) {

ul.port-cat {    display: inline-block;width: 100%;}
nav.mynav {}
ul.port-cat li {display: block;margin: 0; border: none;}
ul.port-cat li button.button { width: 100%; text-align: left;}
ul.port-cat { margin: 0;border: 1px solid #c1c1c1; border-top: none;}
.grid {   margin: 15px 0;}







}
/** -------- for responsive tab menu -------- **/



@media (max-width: 767px) {

.portfolio-bnn h1 {    font-size: 30px;   padding: 0px 0 0px;}
.portfolio-bnn h1 img {   width: 25px;   margin-top: -5px;}

#load-more { padding: 12px 40px 10px;}

}







@media (max-width: 550px) {

.vk_portfolio p {   font-size: 18px;}

.grid-box .grid-overlay-inner img{    height: 35px;}
.grid-overlay-inner p { font-size: 17px; margin-bottom: 6px; margin-top: 10px;}


.element-item {  position: relative;  float: left;  width: 100%;}
.element-item.element-item--width2{ width: 100%;}

.grid-box  {      margin: 5px 15px; }
/*.grid-box img {    width: 100%;}*/



}







@media (max-width: 399px) {
.element-item {  position: relative;  float: left;  width: 100%;}
.element-item.element-item--width2{ width: 100%;}
.grid-box  {   margin: 5px; }
.grid-overlay-inner p {    font-size: 15px;   margin-bottom: 5px;    margin-top: 5px;    line-height: 16px;}
a.overlay-btn.read-more {    font-size: 11px;   padding: 7px 16px 5px;}
.grid-overlay-inner img {    height: 30px;}

}