#load-more{
  margin:5px;
}
.portloadmorecon{
	margin:0px;
	padding: 0px;
	margin-top: 50px;
}

.hidden{visibility:hidden;
  width:0px!important;
  height:0px!important;
  margin:0px!important;
  padding:0px!important;
  }
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.totop{
	display:none;
}

/* PROJECT GALLERY SECTION*/

/*----------------------------------------------------------------------------------------------------*/

.portgal_title_con{
	margin-top: 100px;
	padding-left: 50px;
}

.portgal_page_title{
	font-weight: 500;
	
}

* { box-sizing: border-box; }

/* ---- button ---- */

.button {
  font-family: 'Quicksand', sans-serif;
  margin-right: 6px;
  margin-bottom: 15px;
  color: #b3bcc3;
  text-decoration: none;
  border: 1px solid #ccc;
  padding: 4px 15px;
  border-radius: 50px;
  display: inline-block;
  background: none;
}

.button:hover {
  background-color: #6c757d;
  text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
  color: white;
}
.button:focus {
  outline: none;
}

.button:active,
.button.is-checked {
   background: #ffffff;
  border: 1px solid #1e1e1e;
  color: #1A1A1A;
}

.button:active {
  background-color: #FFffff;
}

.button.is-checked {
  color: white;
	color: #1A1A1A
	
}


/* ---- button-group ---- */

.button-group:after {
  content: '';
  display: block;
  clear: both;
}

.button-group .button {
  float: left;
  border-radius: 0;
  margin-left: 0;
  margin-right: 10px;
	
}

.button-group {
	padding: 15px 0;
	padding-left: 7%;
	padding-right: 7%;
}

.button-group .button{ border-radius: 1em 1em 1em 1em; }



.progalimage {
  opacity: 1;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}


.progaltext {
  background-color: rgba(0,0,0,1);
  color: white;
  font-size: 24px;
  padding: 25px;
  text-transform: uppercase;
}




/* PROJECT GALLERY SECTION END*/

/*----------------------------------------------------------------------------------------------------*/


.grid {
  background-color: transparent;
  margin: 0 auto; /* centered */
  margin-bottom: 0px;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-item {
  
  width: 700px;
  /*height: 450px;*/
  /*border: 2px solid #333;*/
  border: 10px solid #17171A;
  /*border-color: #17171A;*/
  border-color: rgba(0,0,0,0);
  /*padding: 10px;
  padding-top: 20px;
  padding-bottom: 20px;*/
  overflow: hidden;
}

.progalimage{
	width:700px;
	height: 100%;
}

.grid-item:hover .progalimage {
  opacity: 0.5;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}


.grid-item:hover .middle {
  opacity: 1;
}

.grid-sizer{
	width: 700px;
}

@media screen and (max-width: 1650px) {
	
.grid-sizer{
	width: 600px;
}
	
.grid-item {
  
   width: 600px;
  /*height: 340px;*/
  
}
	
.progalimage{
  width:600px;
  height: 100%;
}
}

@media screen and (max-width: 1300px) {
	
.grid-sizer{
	width: 500px;
}
	
.grid-item {
  
  width: 500px;
  /*height: 280px;*/
  
}
	
.progalimage{
  width:500px;
 /* height: 280px;*/
}
}

@media screen and (max-width: 1024px) {
	
.grid{
 padding-bottom: 0px;
 margin-bottom: 0px;
}
	
.grid-sizer{
	width: 400px;
}
	
.grid-item {
  
  width: 400px;
  /*height: 225px;*/
  
}
	
.progalimage{
  width:400px;
  /*height: 225px;*/
}

.totop{
	display: inline;
}	
	
}


@media screen and (max-width: 820px) {
	
.grid-sizer{
	width: 600px;
}
	
.grid-item {
  
  width: 600px;
  /*height: 340px;*/
  
}
	
.progalimage{
  width:600px;
  /*height: 340px;*/
}
	
.portloadmorecon{
	margin-top: -550px;
   }
}


@media screen and (max-width: 575px) {
	
.grid-sizer{
	width: 400px;
}
	
.grid-item {
  
  width: 400px;
  /*height: 225px;*/
  
}
	
.progalimage{
  width:400px;
  /*height: 225px;*/
}
	
.portgal_title_con{
	
	padding-left: 50px;
	padding-right: 50px;
}	
}
