html {
    background-color: white;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    
}
body{
    
    color: #ffffff;
    letter-spacing: normal;
    height: 100%;
}
  #info {
	  -webkit-border-radius:5px;
	  -moz-border-radius:5px;
	  border-radius:5px;				
	  background:#fcf8e3;
	  border:1px solid  #fbeed5;
	  width:95%;
	  max-width:900px;
	  margin:0 auto 40px auto;
	  font-family:arial;
	  font-size:12px;
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  -o-box-sizing: border-box;
  }
  
	  #info .info-wrapper {
		  padding:10px;
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  -o-box-sizing: border-box;
  
	  }
	  
	  #info a {
		  color:#c09853;
		  text-decoration:none;
	  }
	  
	  #info p {
		  margin:5px 0 0 0;
	  }
  
  
  .container { 
	  position: relative; 
	  width: 1150px; 
	  margin: 0 auto; 
	  -webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;	
	text-align: center;

  }
  
  #filters {
	  margin:;
	  padding:0;
	  list-style:none;
	  text-align: center;
  
  }
  
	  #filters li {
		  float: left;
		  font-size: 19px;
		  
	  }
	  
	  #filters li span {
		  display: block;
		  width: 132px;	
		  height: 20px;
		  padding :20px;
		  margin: 8px;		
		  text-decoration:none;
		  cursor: pointer;
		  background: #fff;
		  color: #A95179;
		  border-radius: 0;
		  border: 1px solid #A95179;
		  min-width: 6em;
		  margin-bottom: 1vh;
	  }
	  
	  #filters li span.active {
		  background:#87345a;
		  padding :20px;
		  color:#fff;
	  }
   
  
   
  #portfoliolist .portfolio {
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  -o-box-sizing: border-box;
	  width:23%;
	  margin:1%;
	  display:none;
	  float:left;
	  overflow:hidden;
  }
  
	  .portfolio-wrapper {
		  overflow:hidden;
		  position: relative !important;
		  background: rgb(255, 255, 255);
		  cursor:pointer;
	  }
	  
  
	  .portfolio img {
		  width: 300px;
		  height: 350px;
		  position: relative;
		  top:0;
	  -webkit-transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);
	  transition:         all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);		
	  }
	  
	  .portfolio .label {
		  position: absolute;
		  width: 100%;
		  height:60px;
		  bottom:-60px;
	  -webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
	  transition:         all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
	  }
  
		  .portfolio .label-bg {
			background: linear-gradient(330deg, #4C4491 0%, #FD5C63 100%);
			  width: 100%;
			  height:100%;
			  position: absolute;
			  top:0;
			  left:0;
			  cursor: pointer;
			  
		  }
	  
		  .portfolio .label-text {
			  color:#fff;
			  position: relative;
			  z-index:500;
			  padding:5px 8px;
			  font-size: 20px;
			  cursor: pointer;
		  }
			  
			  .portfolio .text-category {
				  display:block;
				  font-size:15px;
				  cursor: pointer;
			  }
	  
	  .portfolio:hover .label {
	  bottom:0;
		cursor: pointer;
	}
	.portfolio .text {
		position: relative;
		bottom: 150px;
		visibility: hidden;
		cursor: pointer;
	}
	.portfolio:hover  .text {
		
		visibility: visible;
		cursor: pointer;
	} 
	  .portfolio:hover img {
		-webkit-filter: blur(2px);
		filter: blur(2px);
	  top:-30px;	
	  cursor: pointer;
	}  
	.table {
		display: table;   /* Allow the centering to work */
		margin: 0 auto;
		cursor: pointer;
	}
	  /* Hover effect */
	.image {
		position:relative;
		
	}
	.image img {
		width:100%;
		vertical-align:top;
	}
	.image:after {
		content:'\A';
		position:absolute;
		width:100%; height:100%;
		top:0; left:0;
		background:rgba(0,0,0,0.6);
		opacity:0;
		transition: all 0.5s;
		-webkit-transition: all 0.5s;
		cursor: pointer;
	}
	.image:hover:after {
		opacity:1;
		cursor: pointer;
	}
	#span {
		display: none;
	}
	.navbar {
		display: none;
	}
	p.text{
		
		margin-top: -50px; 
	}
  /* Hover effect end */
  /*******************************Scrollbar ***********************************/
  /* width */
::-webkit-scrollbar {
    width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: linear-gradient(330deg, #5D009C ,#D40062, #FCB600); ; 
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background:linear-gradient(330deg, #5D009C ,#D40062, #FCB600); ; 
}
/***********************************Scrollbar end*****************************/
  /* #Tablet (Portrait) */
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
	  .container {
		  width: 768px; 
	  }
	  ul{
		width:50%;
		margin: auto;
	}
	#portfoliolist .portfolio {
		width:45%;
		margin: 1%;
	}
  }
  
  
  /*  #Mobile (Portrait) - Note: Design for a width of 320px */
  @media only screen and (max-width: 767px) {
	  .container { 
		  width: 250px; 
	  }
	  ul{
		  width:50%;
		  margin: auto;
	  }
	  
	  #portfoliolist .portfolio {
		  width:100%;
		  margin: 1%;	  
	  }	
	  .image{
		  width :100%;
		  cursor: pointer;
		
	  }
	 
	 .image:after {
		 cursor: pointer;
	 }
	 .image:hover:after {
		 cursor: pointer;
	 }
	 
	.portfolio-wrapper {
		overflow:hidden;
		width : 100%;
		position: relative !important;
		background: rgb(255, 255, 255);
		cursor:pointer;
	}
	.table{
		display: none;
		visibility: hidden;
		cursor: pointer;
	}
	#span {
		display: block;
	}
	#header {
		display: none;
	}
	.navbar{
		display: block;
	}
	.portfolio:hover img {
		-webkit-filter: blur(2px);
		filter: blur(2px);
		top : 0px;
		cursor: pointer;
	} 

	  #ads {
		  display:none;
	  }
	  
	.back{
		display: none;
	}
	
  }
  
  
  /* #Mobile (Landscape) - Note: Design for a width of 480px */
  @media only screen and (min-width: 480px) and (max-width: 767px) {
	.container { 
		width: 250px; 
	}
	  
	  #ads {
		  display:none;
	  }
	.back{
		display: none;
	}  
  }

        /* Footer Start */
#footer {
    margin-top :80px; 
	background: linear-gradient(330deg, #4C4491 0%, #FD5C63 100%);
  color: #fff; 
}
#footer .footer-text{
    font-size: 1.2em;
    line-height: 1.8em;
}
#footer i {
    color: #fff;
    font-size: 2em;
    margin-right: 1em;
}

#footer i:hover {
    color: #7FDBFF;
}

#footer .contents {
    padding: 40px 0%;
}
#footer .social {
    margin-top: 2em;
}
#footer .socialicon {
    max-height: 30px;
    margin: 0px 10px;
}
.footer-team-link {
    color: white;
    font-size: 1.2em;
}
.footer-team-link:hover {
    color: #7FDBFF;
}
/* Footer end  */
  /* #Clearing */
  
  /* Self Clearing Goodness */
  .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
  
  .clearfix:before,
  .clearfix:after,
  .row:before,
  .row:after {
	content: '\0020';
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0; }
  .row:after,
  .clearfix:after {
	clear: both; }
  .row,
  .clearfix {
	zoom: 1; }
  
  .clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
  }