@charset "UTF-8";
/* licuit.com */
/* main.css */
/* Created Apr, 2012 */
/* Modified Apr, 2012
--------------------------------------- */

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased; }

html{
    width: 100%;
    height: auto;
    min-height: 100%;
}


body{
    position: relative;
	width:100%;
    height: 100%;
    min-height: 100%;
    background-color: #fff;
    color: #000;
    font-family: Helvetica, Arial, sans-serif;

    overflow-x:hidden;
    overflow-y: hidden; /* has to be scroll, not auto */
    -webkit-overflow-scrolling: touch;

    /*
     overflow-x:hidden;
    overflow-y: scroll;  has to be scroll, not auto
    -webkit-overflow-scrolling: touch;
    */

}

body.scrollable{

    overflow-x:hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;

}

html, body, #fullheight {
    min-height: 100% !important;
    height: 100%;
}

/*//////////////////////////
/////   EFFECTS
//////////////////////////*/



.show {
    opacity: 1;

    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    transition: all 1s ease-out;
}

.hide {
    opacity: 0;

    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}


/*//////////////////////////
/////   DECO
//////////////////////////*/



.scanlines {
    z-index: 15;

    position: relative;

    width: 100%;
    height: 100%;
    opacity: 1;
    background: url(../images/scanline.png) repeat;

    border: 0px solid #fff;

    pointer-events: none;
}

@media  (-webkit-min-device-pixel-ratio: 2) {
    .scanlines {
        background: url(../images/scanline@2x.png) repeat;
        background-size: 1px 2px;
    }
}




/*//////////////////////////
/////   CANVAS
//////////////////////////*/


#canvas-holder {
    z-index: 10;

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
}

#canvas-holder canvas{
    z-index: 5;

    position: absolute;

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
}

/*//////////////////////////
/////   LOADING
//////////////////////////*/

#loading {
    position: fixed;

    top:0px;
    left: 0px;

    z-index: 999;
    -webkit-transform:translateZ(9999px);
    -moz-transform:translateZ(9999px);
    -o-transform:translateZ(9999px);
    transform:translateZ(9999px);

    width: 100%;
    height: 100%;

    overflow: hidden;

    -webkit-transition: opacity 0.4s ease-out,  height 0s ease-out ;
    -moz-transition: opacity 0.4s ease-out,  height 0s ease-out ;
    -o-transition: opacity 0.4s ease-out,  height 0s ease-out ;
    transition: opacity 0.4s ease-out,  height 0s ease-out ;

    opacity:1;
}
#loading.hideBar {
    opacity:0;
    height: 0%;

    -webkit-transition: opacity 0.4s ease-out 0.4s,  height 0s ease-out 0.8s;
    -moz-transition: opacity 0.4s ease-out 0.4s,  height 0s ease-out 0.8s;
    -o-transition: opacity 0.4s ease-out 0.4s,  height 0s ease-out 0.8s;
    transition: opacity 0.4s ease-out 0.4s,  height 0s ease-out 0.8s;
}

#loading .bar {
    position: absolute;

    /*background-color: #A2FF4F;*/
    background-color: #ffffff;
    width: 0%;
    height: 15px;
    bottom: 0px;

    -webkit-transition: height 0.4s ease-out;
    -moz-transition: height 0.4s ease-out;
    -o-transition: height 0.4s ease-out;
    transition: height 0.4s ease-out;
}

#loading.hideBar .bar{
    height:0px;

    -webkit-transition: height 0.4s ease-out;
    -moz-transition: height 0.4s ease-out;
    -o-transition: height 0.4s ease-out;
    transition: height 0.4s ease-out;
}

/*//////////////////////////
/////   HEADER
//////////////////////////*/


header{}


#canvas-holder-menu {
    z-index: 501;
    position: fixed;
    top: 0;
    right: 0;
    width: 150px;
    height: 800px;
}

#canvas-holder-menu canvas{
    position: absolute;

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


nav {
    position: fixed;

    z-index: 504;
    -webkit-transform:translateZ(506px);
    -moz-transform:translateZ(506px);
    -o-transform:translateZ(506px);
    transform:translateZ(506px);

    width: 150px;
    height: 100%;

    top: 100px;
    right: -150px;
}

nav ul {
    position:absolute;
    list-style: none;
    height: auto;
    top:54px;
    width: 150px;
}

nav li {

    position:relative;
    display: block;

    width: 100%;
    height: auto;

    text-align: right;
    font-size: 18px;
    font-weight: 100;
}


nav a {
    position: relative;
    display: inline-block;

    padding: 15px 50px 14px 0px;

    width: auto;
    height: auto;

    color: rgba(250, 250, 250, 0);
    opacity: 0;
}

nav a:hover {
    opacity: 0;
}

nav ul.share {
    position:absolute;
    list-style: none;
    height: auto;
    top:250px;
    width: 150px;
}

nav ul.share li {

    position:relative;
    display: inline-block;

    width: 32px;
    height: 32px;
    margin-right: 0px;
    margin-left: 0px;


    font-size: 1px;
    font-weight: 100;
    overflow: hidden;
}


nav ul.share a {
    position: relative;
    display: inline-block;

    width: 32px;
    height: 32px;

    opacity: 0;
}

nav ul.share a:hover {
    opacity: 0;
}



/* ////////////////////////////

BOTON

//////////////////////////// */

.btn-menu {
    position: fixed;

    z-index: 557;
    -webkit-transform:translateZ(557px);
    -moz-transform:translateZ(557px);
    -o-transform:translateZ(557px);
    transform:translateZ(557px);

    top:30px;
    right: 30px;

    width: 60px;
    height: 60px;

    background: url(../images/void.png);

    border: 0px none;
    opacity: 0;

    cursor: pointer;
}




/*//////////////////////////
/////   MAIN
//////////////////////////*/

main {
    z-index: 30;
    display: none;
    position: relative;
    width: 100%;
    height: auto;
    min-height: 100%;
    opacity:1;
}
#wrap {
    position: relative;
    display: block;
    /*top:0px;
    left:0px;*/
    width: 100%;
    /*height: auto;*/
    height: auto;

}

#intro {
    position: relative;
    width: 100%;
    height:1800px;
}


#works {
    position: relative;
    width: auto;
    height:auto;
}

#works article {
    position: absolute;

    top: 0px;
    left: 0px;
}

#works article a{
    display: block;
    padding-top: 18px;
    width: 200px;
    height: 50px;

    font-size: 18;
    font-family: Futura-Light;

    border: solid 1px #ffffff;

    color: #ffffff;
    text-align: center;
    text-transform: uppercase;

    opacity: 0;

    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;


}

/*#works*/ article h1,h2{
    display: block;


    width:auto;
    height: auto;
    width: 100%;
    text-align: left;
    line-height: 48px;
    text-transform: uppercase;
    font-family: "Futura-ExtraBold";
    font-size: 50px;
    text-align: center;

    color: rgba(250, 250, 250, 0);


}

/*#works*/ article span{
    display: block;
}

article h1 .t2{
    font-family: "Futura-Light";
    font-size: 30px;
}
article h2 .t2{
    margin-top: 4px;
    font-family: "Futura-Light";
}
/*//////////////////////////
/////   HOLDERS
//////////////////////////*/



.content {
    position: relative;
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color: #fff;
    overflow: hidden;
}


.content-text {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding: 150px 150px 50px 150px;
}

.content-image {
    position: relative;
    width: 100%;
    height: auto;
   background-color: #ffffff;

}
.arrow-up {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 500px 250px 500px;
    border-color: transparent transparent #007bff
}





/*
    Legacy Firefox implementation treats all flex containers
    as inline-block elements.
*/

@-moz-document url-prefix() {
    .flex-container {
        width: 100%;
        -moz-box-sizing: border-box;
    }

}

/*//////////////////////////
/////   PROJECT
//////////////////////////*/

#project {
    position: relative;
    width: 100%;
    height: 100%;
    color:#333;
    font-size: 20px;

}

    #project article {
        position: relative;
        width: 100%;
        height: auto;
    }



    .description {
        position: relative;
        display: inline-block;
        width: 70%;
        height: auto;


        margin-bottom: 40px;


        line-height: 45px;

        padding-left: 40px;
    }

   /* .description p::first-letter {
        font-size: 200%;
        color: #000;
        font-family: "Futura Std";
        font-weight:300;
        font-weight:300;
    }*/

#project .pie {
        display: inline-block;
        margin-top: 20px;
        font-size: 16px;
        text-align: right;

    }

    .workData {
        display: inline-block;
        width: 30%;
        font-size: 14px;

        line-height: 25px;
        text-align: left;
        padding-right: 40px;
        font-weight: 300;
        float: left;
    }

    .workData .item-data {
        display: inline-block;
        margin-right: 10px;
    }

@media (max-width: 800px) {
    .description {
        position: relative;
        display: inline-block;
        width: 100%;

        padding-left: 0px;
    }

    .workData {
        display: inline-block;
        width: 100%;
        text-align: left;
        padding-right: 0px;
        font-weight: 300;
        float: none;


        margin-bottom: 75px;
    }
}

    .workData .type{
        text-transform: uppercase;
        color: #000;

        letter-spacing: 1px;
    }

    .workData .data{
        margin-bottom: 20px;

    }

    .workData .data.item{
        margin-right: 10px;
    }

#project a {
        height: auto;
        position: relative;

        width: auto;

        outline: none;
        /*color: #0c9de5;*/
        color: inherit;
        text-decoration: none;
        font-style: italic;

        font-weight: 100;


    }

#project a::after {
        position: absolute;
        bottom: 40%;
        left: 110%;


        width: 0%;
        height: 2px;
        background-color: #333;

        content: '';
        opacity: 1;

        -webkit-transition: width 0.3s ease-out, left 0.3s ease-out;
        -moz-transition: width 0.3s ease-out, left 0.3s ease-out;
        -o-transition: width 0.3s ease-out, left 0.3s ease-out;
        transition: width 0.3s ease-out, left 0.3s ease-out;

        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);

}
/*
#project a::before {
    position: absolute;
    bottom: -4px;
    left: -5%;


    width: 110%;
    height: 1px;
    background-color: #666;

    content: '';
    opacity: 1;

    -webkit-transition: width 0.2s ease-out 0.2s, left 0.2s ease-out 0.2s;
    -moz-transition: width 0.2s ease-out 0.2s, left 0.2s ease-out 0.2s;
    -o-transition: width 0.2s ease-out 0.2s, left 0.2s ease-out 0.2s;
    transition: width 0.2s ease-out 0.2s, left 0.2s ease-out 0.2s;

    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
}
*/
#project a:hover {
        opacity: 1;
    }

#project a:hover::after {
        position: absolute;

        left: -10%;

        width: 120%;


    -webkit-transition: width 200ms cubic-bezier(0.735, 0.085, 0.975, -0.015), left 0ms;
    -moz-transition: width 200ms cubic-bezier(0.735, 0.085, 0.975, -0.015), left 0ms;
    -o-transition: width 200ms cubic-bezier(0.735, 0.085, 0.975, -0.015), left 0ms;
    transition: width 200ms cubic-bezier(0.735, 0.085, 0.975, -0.015), left 0ms;
}






.imgHolder {
        position: relative;
        width: 100%;
        max-width: 900px;
        height: auto;


        padding: 50px;
        text-align: center;
    }

.iphone {
    position: relative;


    max-width: 900px;
    margin-left: auto;
    margin-right: auto;

    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
}



.imgHolder img{
    z-index: 1;
    position: relative;
    width: 100%;
    max-width: 900px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

/*//////////////////////////
/////   COLOR
//////////////////////////*/

.amarillo {
    background-color:#f0cb08;
}
.negro {
    background-color:#000000;
}
.morado {
    background-color:#9651d0;
}
.verde {
    background-color:#1dbb90;
}

/*//////////////////////////
/////   FOOTER
//////////////////////////*/

footer {
    z-index: 50;
    position: relative;
    width: 100%;
    height: 180px;
    background-color: #fff;

    opacity:0;
}