.portafolio-wrap {
    position: relative;
}
footer {
    display: none;
}
body{
    background: #2c2c2c;
}
.filtro-movil {
    display: none; position: fixed; top: 80px; right: 5%;
    z-index: 3;background: #FF9800; font-family: 'Fjalla One', sans-serif;
    text-transform: uppercase; padding: 10px; border: 2px solid #000;
    border-radius: 5px; color: #000; font-size: 14px;
}
/*TABS LEFT*/
.controller-wrap {
    width: 550px; background: #000; float: left; position: fixed; z-index: 1;
    min-height: 100%; max-height: 100%; overflow: auto;
    -webkit-transition: 0.3s ease-out;  -moz-transition: 0.3s ease-out;-ms-transition: 0.3s ease-out;-o-transition: 0.3s ease-out; transition: 0.3s ease-out;
}
.controller-container {
    padding: 70px;
}
.controller-container h3 {
    font-size: 45px; text-transform: uppercase; color: #ff7800; letter-spacing: 7px;

}
.controller-container p {
    font-size: 20px; color: #fff; line-height: 160%; display: none;
}
.controller-tabs{

}
.controller-tabs li h6{
    color: #fff; font-family: 'Fjalla One', sans-serif; text-transform: uppercase;
    letter-spacing: 4px; font-size: 24px; margin: 8px 0; display: inline-block;
    position: relative; cursor: pointer;
}
.controller-tabs li:hover h6::before {
    left: 0px; opacity: 1;
}
.controller-tabs li h6::before {
    -webkit-transition: 0.3s ease-out;  -moz-transition: 0.3s ease-out;-ms-transition: 0.3s ease-out;-o-transition: 0.3s ease-out; transition: 0.3s ease-out;
    content: ''; position: absolute; width: 100%; height: 4px; background: #ff7800; bottom: -2px; left: -10px; opacity: 0;
}
li.active h6::before  {
    left: 0px; opacity: 1;
}
li.active h6 {
    color: #ff7800;
}
.filtro {
    margin-top: 30px;
}
.filtro h4{
    font-size: 16px; text-transform: uppercase; color: #ff7800;
}
.controller-wrap::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #2c2c2c;
}

.controller-wrap::-webkit-scrollbar
{
	width: 10px;
	background-color: #2c2c2c;
}

.controller-wrap::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #ff7800;
}


/*RESULTADOS*/
.results-wrap {
    float: left; padding-left: 550px; width: 100%; min-height: 900px; background: #2c2c2c;
}
.proyectos-item {
    width: 50%;  float: left; height: 400px; background-size: cover; background-position: center; background-repeat: no-repeat;
    position: relative;
}

/*TEXTO DE PROYECTOS*/
.results-container hr {
    max-width: 50px; border: none; height: 3px; background: #ff7800; margin: 6px 0 7px;
}
.layerB {
    /*position: absolute;*/
    width: 100%; height: 100%; top: 0px; left: 0px; background: rgba(0,0,0,0); padding: 50px;
    -webkit-transition: 0.3s ease-out;  -moz-transition: 0.3s ease-out;-ms-transition: 0.3s ease-out;-o-transition: 0.3s ease-out; transition: 0.3s ease-out;
}
.layerB:hover {
    background: rgba(0,0,0,.8);
}
.project-txt {
    position: relative; top:10px; opacity: 0; color: #fff; max-width: 450px;
    -webkit-transition: 0.3s ease-out;  -moz-transition: 0.3s ease-out;-ms-transition: 0.3s ease-out;-o-transition: 0.3s ease-out; transition: 0.3s ease-out;
}
.layerB:hover .project-txt{
     top:0; opacity: 1;
}
.project-txt h2 {
    font-size: 40px; max-width: 400px; text-transform: uppercase;
}
.project-txt p {
    font-size: 18px; line-height: 160%;
}
.project-txt .btn {
    position: relative; bottom: initial; display: inline-block; margin: 20px 0 0; border-bottom: transparent;
}
.project-txt .btn:hover {
    border-bottom: 3px solid #ff7800;
}
/*============ MOVIL ===============*/
@media screen and (max-width: 1600px){
    .project-txt h2 {font-size: 35px;}
    .controller-container p {font-size: 16px;}
    .project-txt p {font-size: 16px;}
    .controller-container h3 {font-size: 35px;}
    .controller-wrap {width: 450px;}
    .results-wrap {padding-left: 450px;}
}
@media screen and (max-width: 1500px){
    .controller-tabs li h6 {font-size: 21px;}
    .proyectos-item {height: 350px;}
}
@media screen and (max-width: 1400px){
    .proyectos-item {height: 320px;}
    .controller-container {padding: 50px;}
    .controller-tabs {margin: 10px 0 0;}
    .controller-tabs li h6 {font-size: 19px;}
    .project-txt h2 {font-size: 24px;}
    .layerB {padding: 30px;}
    .results-wrap {min-height: 710px;}
}
@media screen and (max-width: 1300px){
    .controller-container h3 { font-size: 30px;}
    .project-txt p {font-size: 14px; line-height: 160%;}
    .results-wrap {min-height: 600px;}
}
@media screen and (max-width: 1200px){
    .controller-wrap {width: 350px;}
    .results-wrap {padding-left: 350px;}
    .proyectos-item {width: 100%; height: 250px;}
    .controller-container p {font-size: 14px;}
    .controller-tabs li h6 {font-size: 16px;letter-spacing: 2px; margin: 8px 0;}
    .project-txt {max-width: 100%;}
}
@media screen and (max-width: 1000px){
    .proyectos-item {height: 220px;}
}
@media screen and (max-width: 850px){
    .controller-container h3 {font-size: 25px;}
    .controller-wrap{height: 100%;  width: 300px;}
    .controller-container {padding: 50px 30px 150px;}
    .results-wrap {padding-left: 300px;}
    .project-txt h2 {font-size: 20px;}
    .project-txt p {line-height: 140%;}
}
@media screen and (max-width: 700px){
    .controller-wrap {left: -50%; width: 50%;}
    .open-filtro {left: 0!important; top: 50px;}
    .results-wrap {padding: inherit;}
    .filtro-movil{display: inline-block;}
    .controller-container p {display: none;}

}
@media screen and (max-width: 600px){
    .filtro-movil {top: 60px;}
}
@media screen and (max-width: 500px){
    .controller-wrap {left: -60%; width: 60%;}
    .controller-container h3 {font-size: 22px; letter-spacing: 4px;}
    .proyectos-item {height: 250px;}

}
@media screen and (max-width: 400px){
    .controller-wrap {left: -70%; width: 70%;}
}