body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
}

img, video, object {
  max-width: 100%;
}

/* Clearfix */

.clearfix:before, .clearfix:after {
  content:"";
  display:table;
}
.clearfix:after {
    clear: both;
}

.clearfix {
  *zoom:1;
}


.container {
  width:960px;
  margin: 0 auto;
  height: auto;
  line-height: 180%;
}

/*Menu de navegacion*/

#menu {
	height: 60px;
	width: 100%;
	background-color: #795121;
	font-weight: bold;
}

#menu ul {
	padding: 0;
	height: 60px;
	width: 450px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

#menu li {
	display: inline;
	background-color: #795121;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	line-height: normal;
}

#menu a {
	color: #fff;
	display: inline-block;
	width: 125px;
	text-align: center;
	text-decoration: none;
	line-height: 60px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

#menu li:last-child a {

}

#menu a:hover, #menu a:active {
	background-color: #E95A44;
}

#menu a#pull {
  display: none;
}


#slideshow{
	width: 100%;
	height: auto;
}

.slide {
  width: 100%;
  height: auto;
}

.container {

  width: 960px;
  margin: 0 auto;
/*  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;*/
}




#col-1 {
	width: 50%;
	float: left;
	padding: 15px;
}

#col-2 {
	width: 50%;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	text-align: center;
}




/* Portafolio */

#filters {
	padding: 0;
	list-style: none;
}

  #filters li {
	float: left;
	margin-left: 25px;
	text-align: center;
  }

  .filter {
    display: block;
    padding:5px 20px;
    text-decoration:none;
    color:#666;
    cursor: pointer;
  }

  .filter.active {
    background: #e95a44;
    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: #666;
    cursor:pointer;
  }



  .portfolio img {
    max-width:100%;
    position: relative;
  }

  .portfolio .label {
    position: absolute;
    width: 100%;
    height:40px;
    bottom:-40px;
  }

.portfolio .label-bg {
     background: #e95a44;
      width: 100%;
      height:100%;
      position: absolute;
      top:0;
      left:0;
    }

    .portfolio .label-text {
      color:#fff;
      position: relative;
      z-index:500;
      padding:5px 8px;
    }

      .portfolio .text-category {
        display:block;
        font-size:19px;
      }


/* Footer */

footer {
	height: auto;
	margin-top: 35px;
	color: #fff;
	font-weight: 800;
	font-size: 17px;
	letter-spacing: 2px;
	text-align: center;
	width: 100%;
}









/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
@media screen and (min-width: 768px) and (max-width: 1024px) {



}


/*Styles for screen 600px and lower*/
@media screen and (max-width: 767px) {
     .container {
    width: 100%;
  }
	#menu {
  		height: auto;
  	}
  	#menu ul {
  		width: 100%;
  		display: block;
  		height: auto;
  	}
  	#menu li {
	width: 75%;
	float: left;
	position: relative;
	padding: 0;
	margin: 0;
  	}
  	#menu li a {
		border-bottom: 1px solid #576979;
		border-right: 1px solid #576979;
	}
  	#menu a {
	  	text-align: left;
	  	width: 100%;
	  	text-indent: 25px;
  	}

  #col-1, #col-2 {
    width: 100%;
    margin-top: 20px;
  }

}

/*Styles for screen 480px and lower*/
@media only screen and (max-width : 480px) {
  .container {
    width: 70%;
  }
	#menu {
	border-bottom: 0;
	}
	#menu ul {
	display: none;
	height: auto;
	}
	#menu a#pull {
	display: block;
	background-color: #795121;
	width: 100%;
	position: relative;
	}
	#menu a#pull:after {
		content:"";
		background: url('../images/nav-icon.png') no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 10px;
	}

	 	#col-1, #col-2 {
  		width:100%;
  	}
}


/*Smartphone*/
@media only screen and (max-width : 320px) {
	#menu li {
		display: block;
		float: none;
		width: 100%;
	}
	#menu li a {
		border-bottom: 1px solid #576979;
	}
}