@font-face { 
font-family: Cond; 
src: url('IntroCondLight.otf');
src: url('IntroCondLight.eot');
src: url('IntroCondLight.eot?#iefix') format('embedded-opentype'),
url('IntroCondLight.woff') format('woff'),
url('IntroCondLight.ttf') format('truetype'),
url('IntroCondLight.svg#Cond') format('svg');
font-weight: normal;
font-style: normal;
} 
@font-face { font-family: Cottons; src: url('CottonsLight.otf'); } 
@font-face { font-family: Eunomia; src: url('EunomiaLight.otf'); } 
@font-face { font-family: Encode; src: url('EncodeSansNarrow.ttf'); } 
@font-face { font-family: EncodeThin; src: url('EncodeSansNarrowThin.ttf'); } 
@font-face { font-family: Lerotica; src: url('Lerotica.ttf'); } 
@font-face { font-family: Open; src: url('OpenSansCondLight.ttf'); } 
@font-face { font-family: Roboto; src: url('RobotoCondensedLight.ttf'); } 


  #svg_menu{ 
  fill: /* #5C5D5E; */
  #8E8E8E;
  }
  
a svg:hover #svg_menu { 

  fill: #51BCFF;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
  /*
  -webkit-filter: drop-shadow(5px 5px 5px rgba(81, 188, 255, 0.7));      
  filter: drop-shadow(5px 5px 5px rgba(81, 188, 255, 0.7)); 
  */
  
}

a { 
  outline: none; 
  border: 0; 
  text-decoration: none; 
}
a svg #svg_menu { 
  transition: 200ms;
  transition-timing-function: ease-in-out;
  -webkit-transition: 200ms;
  -webkit-transition-timing-function: ease-in-out;
}

html {
  overflow-y: scroll;
}
h1{
	text-align:center;
	font-family:Cond;
	font-size: 35px;
  transform: scale(1, 1.5);
  -webkit-transform: scale(1, 1.5); /* Safari and Chrome */
  -moz-transform: scale(1, 1.5); /* Firefox */
  -ms-transform: scale(1, 1.5); /* IE 9+ */
  -o-transform: scale(1, 1.5); /* Opera */
	letter-spacing: 5px;   
	text-shadow: 0px 6px 6px rgba(150, 150, 150, 0.55);
	padding-bottom: 25px;
}

*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
	font-family: Helvetica, Arial, Verdana;
	background: #f9f9f9;
	margin:15px 0 0 0;
	font-size:12px;
}

.controls{
  padding: 2%;
  color: #eee;
}

label{
  font-weight: 300;
  margin: 0 .4em 0 0;
}
#info {
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;				
	background:#fcf8e3;
	border:1px solid  #fbeed5;
	width:95%;
	max-width:1000px;
	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;
	}



h3{
  font-size: 20px;
  font-weight: 500;
  color: white;
  margin-bottom: .5em;
}
 /* backup
button{
  display: inline-block;
  padding: .4em .8em;
  background: #666;
  border: 0;
  color: #ddd;
  font-size: 16px;
  font-weight: 300;
  border-radius: 4px;
  cursor: pointer;
}

button.active{
  background: #68b8c4;
}

button:focus{
  outline: 0 none;
}

button + label{
  margin-left: 1em;
}
*/



button{
		display: inline-block;
		padding:5px 25px;		
		text-decoration:none;
		color:#777777;
		cursor: pointer;
		border:0px;
		margin-right:8px;
		margin-bottom:8px;
		-webkit-transition-duration: 0.4s; /* Safari */
		transition-duration: 0.4s;
		
}

button.active{
		background: #69A8F1;
		color:#fff;
}

button:hover {
    background-color: #B2D3F9; 
    color: white;
}

button:focus{
  outline: 0 none;
}

button + label{
  margin-left: 1em;
}


/*
.container{
  padding: 2% 2% 0;
  text-align: justify;
  font-size: 0.1px;
  background: #68b8c4;
  
  -webkit-backface-visibility: hidden;
}
*/

.container { 
	position: relative; 
	width: 960px; 
	margin: 0 auto; 
	-webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;	
}

.container:after{
  content: '';
  display: inline-block;
  width: 100%;
}

.container .mix,
.container .gap{
  display: inline-block;
  width: 49%;
}

.container .mix{
  text-align: left;
  margin-bottom: 2%;
  display: none;
}

.container .mix:after{
 /* content: attr(data-myorder); */
  color: white;
  font-size: 16px;
  display: inline-block;
  vertical-align: top;
  padding: 4% 1%;
  font-weight: 700;
}

.container .mix:before{
  content: '';
  display: inline-block;
  padding-top: 10%;
}

@media all and (min-width: 420px){
  .container .mix,
  .container .gap{
    width: 32%;
  }
}

@media all and (min-width: 640px){
  .container .mix,
  .container .gap{
    width: 23.5%;
  }
}


#portfoliolist .portfolio {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	width:110px;
	margin:1%;
	/*display:none;  */
	float:left;
	overflow:hidden;
}

	.portfolio-wrapper {
		/*overflow:hidden;*/
		position: relative !important;
		background: #484848;
		cursor:pointer;
	}

	.portfolio img {
		max-width:100%;
	/*	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:40px; */
		bottom:-50px;
   -webkit-transition: all 200ms cubic-bezier(0.645, 0.045, 0.355, 1);
    transition:         all 200ms cubic-bezier(0.645, 0.045, 0.355, 1); 
	}

		.portfolio .label-bg {
		/*	background: #e95a44; */
			width: 100%;
			height:100%;
			position: absolute;
			top:0;
			left:0;
			background-color: rgba(0,0,0,0.5);
		}
	
		.portfolio .label-text {
			color:#fff;
			position: relative;
			z-index:500;
			padding:5px 8px;
		}
			
			.portfolio .text-category {
				display:block;
				font-size:9px;
			}
	
	.portfolio:hover .label {
    bottom:0;
  }
	.portfolio:hover img {
    top:-30px;
  }  



/* #Tablet (Portrait) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	.container {
		width: 768px; 
	}
}


/*  #Mobile (Portrait) - Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
	.container { 
		width: 95%; 
	}
	
	#portfoliolist .portfolio {
		width:48%;
		margin:1%;
	}		

	#ads {
		display:none;
	}
	
}


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


.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;
}