/* FONTS -------------------------------------------------------------------- */
            @font-face
            {
                font-family: "at";
                font-weight: normal;
                font-style: normal;
                src: url("FONTS/SharpGrotesk-SemiBold25.woff")
            }

            @font-face
            {
                font-family: "at2";
                font-weight: normal;
                font-style: normal;
                src: url("FONTS/SharpGrotesk-Medium25.woff")
            } 
            @font-face
            {
                font-family: "at3";
                font-weight: normal;
                font-style: normal;
                src: url("FONTS/SharpGrotesk-Light25.woff")
            } 
 @font-face
            {
                font-family: "at4";
                font-weight: normal;
                font-style: normal;
                src: url("FONTS/SharpGrotesk-Thin25.woff")
            } 

/* FONTS -------------------------------------------------------------------- */

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

            html {

              
                height: 100vh;
                margin: 0 auto;
                padding: 0 auto;
                overflow-y: scroll;
                overflow-x: hidden;
                
            }


            body {

                
                height: 100vh;
                margin: 0 auto;
                padding: 0 auto;
                background-color: #dbdbdb;
                opacity:1;
                text-rendering: optimizeLegibility;
                transition: opacity 0.8s ease 0s;
                -webkit-transition: opacity 0.8s ease 0s;

            }





            .temp {
                position: fixed;
                width: 100%;
                height: 100vh;
                background: url(GIF/ezgif.com-resize.gif) no-repeat 50% 50%;
                background-color: #100F0F;
                background-position: center;
                background-size: auto;
                animation: fadeOut 4s linear forwards;
                opacity: 1;
                z-index: 999 !important;
                overflow-y: auto;
            }
            @keyframes fadeOut {
                0% {
                    opacity: 1;
                    z-index:  999 !important;



                }
                20% {
                    opacity: 1;
                    z-index:  999 !important;


                }
                41% {
                    opacity: 1;
                    z-index: 999 !important;9;
                }
                91% {
                    opacity: 1;
                    z-index:  999 !important;

                }
                92% {
                    opacity: 1;
                    z-index:  999 !important;

                }
                100% {
                    opacity: 0;
                    z-index: 0;


                }
            }


            /* HEADER -------------------------------------------------------------------- */


            .header {
                position: fixed;
                top: 0;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                display: -webkit-flex;
                -webkit-align-items: center;
                -webkit-justify-content: space-between;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                justify-content: space-between;
                width: 85%;
                height: 80px;
                z-index: 1;
            }
            .logo {

                font-family: "at";

            }

            .logo a {
                color: #000;
                font-size: 36px;
                text-decoration: none;
                margin-left: -2px;
            }
            a:hover { 
                color: #ccc;
                -webkit-transition: all 0.6s ease;
                -o-transition: all 0.6s ease;
                transition: all 0.6s ease;
                -webkit-animation:colorchange2 4s infinite alternate;
                animation:colorchange2 4s infinite alternate;
            }



           .logo a.active {
                -webkit-animation:colorchange2 4s infinite alternate;
                animation:colorchange2 4s infinite alternate;
                -webkit-transition: all 0.6s ease;
                -o-transition: all 0.6s ease;
                transition: all 0.6s ease;
            } 

            nav ul li a.active{
                -webkit-animation:colorchange4 5s infinite alternate;
                animation:colorchange4 5s infinite alternate;
                -webkit-transition: all 0.6s ease;
                -o-transition: all 0.6s ease;
                transition: all 0.6s ease;
            }

            nav ul li a.active:hover, .logo a.active:hover {
                -webkit-animation:colorchange22 0.00001s infinite alternate;
                animation:colorchange22 0.00001s infinite alternate;
                -webkit-transition: all 0.6s ease;
                -o-transition: all 0.6s ease;
                transition: all 0.6s ease;
            }


            span.one.active, span.two.active {
                position: absolute;
                width: 40px;
                height: 8px;

                -webkit-animation:colorchange3 4s infinite alternate;

                animation:colorchange3 4s infinite alternate;
            }
            span.one.active:hover, span.two.active:hover {
                -webkit-animation:colorchange33 0.00001s infinite alternate;
                animation:colorchange33 0.00001s infinite alternate;
                -webkit-transition: all 0.6s ease;
                -o-transition: all 0.6s ease;
                transition: all 0.6s ease;
            }


            @-webkit-keyframes colorchange2 {
                0% {

                    color: black;


                }

                10% {

                    color: #0D92DD;

                }

                20% {

                    color: #FFD100;

                }

                30% {

                    color: #008945;

                }

                40% {

                    color: #EF3D0B;

                }

                50% {

                    color: #F36994;

                }

                60% {

                    color: black;

                }

                70% {

                    color: #0D92DD;

                }
                80% {

                    color: #FFD100;

                }

                90% {

                    color: #008945;

                }

                100% {

                    color:#F36994;

                }
            } 
            @-webkit-keyframes colorchange22 {
                0% {

                    color: white


                }

                100% {

                    color: white
                }


            }

            @-webkit-keyframes colorchange4 {
                0% {

                    color: black;


                }

                10% {

                    color: #0D92DD;

                }

                20% {

                    color: #FFD100;

                }

                30% {

                    color: #008945;

                }

                40% {

                    color: #EF3D0B;

                }

                50% {

                    color: #F36994;

                }

                60% {

                    color: black;

                }

                70% {

                    color: #0D92DD;

                }
                80% {

                    color: #FFD100;

                }

                90% {

                    color: #008945;

                }

                100% {

                    color:#F36994;

                }
            } 
            

            @-webkit-keyframes colorchange3 {
                0% {

                    background-color: black;


                }

                10% {

                    background-color: #0D92DD;

                }

                20% {

                    background-color:#FFD100;

                }

                30% {

                    background-color: #008945;

                }

                40% {

                    background-color: #EF3D0B;

                }

                50% {

                    background-color: #F36994;

                }

                60% {

                    background-color: black;

                }

                70% {

                    background-color: #0D92DD;

                }
                80% {

                    background-color: #FFD100;

                }

                90% {

                    background-color: #008945;

                }

                100% {

                    background-color:#F36994;

                }
            }
            @-webkit-keyframes colorchange33 {
                0% {

                    background-color:  white;


                }

                100% {

                    background-color:   white;

                }

            }

            ul
            {

                font-family: "at";
                display: block;
                list-style-type: disc;
                -webkit-margin-before: 0em;
                margin-block-start: 0em;
                -webkit-margin-after: 0em;
                margin-block-end: 0em;
                -webkit-margin-start: 0px;
                margin-inline-start: 0px;
                -webkit-margin-end: 0px;
                margin-inline-end: 0px;
                -webkit-padding-start: 0px;
                padding-inline-start: 0px;
            }

            nav ul li {

                display: inline-block;
                font-family: "at";
                margin-top: 0px;
            }

            nav ul li:not(:first-child) {
                margin-left:
            }

            nav ul li:last-child {
                margin-right:
            }

            nav ul li a {

                display: inline-block;
                outline: none;
                color: #000;
                text-decoration: none;
                font-size: 36px;
                margin-left: -1px;
            }

            .toggle-btn {

                -webkit-box-align:center;

                -ms-flex-align:center;

                align-items:center;
                -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                justify-content: space-between;
                margin-top: -6px;
                padding-top: 0px;
                padding-left: 0px;
                width: 40px;
                height: 20px;
                -ms-flex-line-pack: center;
                align-content: center;
                display: none;
                z-index: 999999 !important;

            }

            span.one {
                position: absolute;
                width: 40px;
                height: 8px;
                background: black;
            }

            span.two {
                position: absolute;
                width: 40px;
                height: 8px;
                background: black;
                margin-top: 14px;


            }
            .menu {

                position: fixed;
                overflow: hidden ;
                background: black;
                height: 100%;
                width: 100%;
                top: -100% ;
                left: 0px !important; 
                margin: 0 auto;
                z-index: 1;

            }

            .menu_info {

                position: fixed;
                overflow: hidden ;

                height: 100%;
                width: 100%;
                top: -100% ;
                left: 0px !important; 
                margin: 0 auto;
                z-index: 1;

                background: #fff055;

            }

            .containerul {

                max-width: 68rem;
                margin-left: auto;
                margin-right: auto;
                padding-left: 0rem;
                padding-right: 0rem;

            }
            .containerul {

                display: -webkit-box;
                display: -moz-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-direction: normal;
                -webkit-box-orient: vertical;
                -moz-flex-direction: column;
                -ms-flex-direction: column;
                flex-direction: column;
                -ms-flex-wrap: wrap;
                flex-wrap: wrap;
                min-height: calc(100% - 1.6818181818rem);
                margin-top: 1.6818181818rem;

            }

            @media screen and (max-width: 941px) {


                .toggle-btn {

                    display: block;
                    cursor: pointer;
                } 

                .logo {
                    font-family: "at";
                }


                .nav-wrapper {
                    display: none;
                }




                nav ul li a {

                    display: inline-block;
                    outline: none;
                    color: white;
                    text-decoration: none;
                    font-size: 59px;


                }
                nav ul li {

                    display: inline-block;
                    font-family: "at";
                    margin-top: 0px;
                    margin-left:auto;
                    margin-right:auto;
                    text-align: center;
                    vertical-align: middle;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-pack: center;
                    -ms-flex-pack: center;
                    justify-content: center;
                    -webkit-box-orient: vertical;
                    -webkit-box-direction: normal;
                    -ms-flex-direction: column;
                    flex-direction: column;
                    text-align: center;
                }

                ul{

                    display: -webkit-box;
                    display: -moz-flex;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-direction: normal;
                    -webkit-box-orient: vertical;
                    -moz-flex-direction: column;
                    -ms-flex-direction: column;
                    flex-direction: column;
                    -webkit-flex-wrap: wrap;
                    -moz-flex-wrap: wrap;
                    -ms-flex-wrap: wrap;

                    -webkit-box-flex: 1;
                    -moz-flex-grow: 1;
                    -ms-flex-positive: 1;
                    flex-grow: 1;
                    list-style-type: none;

                }
                li
                {

                    display: flex;
                    justify-content: center;
                    flex-direction: column;
                    text-align: center;
                    text-align: center;

                    font-size: 100%;
                    font: inherit;
                    display: -webkit-box;
                    display: -moz-flex;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-flex: 1;
                    -moz-flex-grow: 1;
                    -ms-flex-positive: 1;
                    flex-grow: 1;
                    -webkit-box-pack: center;
                    -ms-flex-pack: center;
                    -moz-justify-content: center;
                    justify-content: center;
                    -webkit-box-direction: normal;
                    -webkit-box-orient: vertical;
                    -moz-flex-direction: column;
                    -ms-flex-direction: column;
                    flex-direction: column;
                    width: 100%;
                    


                }

                nav ul li:last-child {
                    margin-right: 0px !important;
                    




                }

                nav ul li:first-child {
                    margin-top: 0px !important;
                    
                }
            }


/* HEADER -------------------------------------------------------------------- */

/* MASONRY -------------------------------------------------------------------- */

            .container
            {
                max-width: 100%;
                width:85%;
                height: 76px;
                margin-left: auto;
                margin-right: auto;
                position: relative;
            }

            .content-wrapper {


                max-width: 100%;
                width:85%;
                height: auto;
                margin-left: auto;
                margin-right: auto;
                position: relative;
                margin-bottom: 7.4221875%;
                -webkit-transform: translate3d(0,0,0);



            }



            #projects-wrapper {
                height: 100vh;


            }

            .masonry-column-sizer.x1 {
                width: 25%

            }

            .masonry-column-sizer.x2 {
                width: 50%
            }

            .masonry-column-sizer.x3 {
                width: 75%
            }

            .masonry-column-sizer.full {
                width: 100%

            }

            .masonry-gutter-sizer {
                width: 0px!important
            }

            .inner-wrapper {
                width: auto;
                height: auto;
                top: 6px;
                right: 6px;
                left: 6px;
                bottom: 6px;
                overflow: hidden;
                -webkit-transform: translateZ(0);
                transform: translateZ(0);
            }



            .project {


                width: 25%;
                height: calc(.86624 * 29vw);
                line-height: 0;
                margin-top: 0;
                overflow: hidden;
                cursor: auto;
                left: 0;
                right: 0;
                position: relative;
                display: inline-block;
                max-width: 100%;

            } 

    .project.x1 {
                width: 25%;
                height: calc(.86624 * 29vw);
                background-color: transparent;
            }



            .project.x1_1 {
                width: 25%;
                height: calc(.21656 * 29vw);
                opacity: 1;
            }

            .project.x1_2 {
                width: 25%;
                height: calc(.43312 * 29vw);
                opacity: 1;

            }

            .project.x2 {
                width: 50%;
                height: calc(.86624 * 29vw);

                opacity: 1;

            } 

            .project.x2_3 {
                width: 50%;
                height: calc(.64968 * 29vw);
                opacity: 1;


            }

            .project.x11 {
                width: 50%;
                height: calc(.86624 * 29vw);
                opacity: 1;

            } 

            .project.x2_2 {
                width: 50%;
                height: calc(.43312 * 29vw);
                opacity: 1;



            }

            .project.x3 {
                width: 75%;
                height: calc(.86624 * 29vw);
                opacity: 1;





            }

            .project.x4 {
                width: 50%;
                height: calc(1.0828 * 29vw);
                opacity: 1;


            }
            .project.x_text{

                display: none !important;
            }
.project.x_text_auto{

                display: none !important;
            }

            .project.x_text_1{

                display: none!important;
            }
            .project.x_text_2{

                display: none!important;
            } 
            .project.x_text_3{
                display: none!important;
            }




            .videoWrappercuadrado {
                position: relative;
                padding-bottom: 74.7211896%; /* 1:1 */
                padding-top: 0px;
                margin-bottom: 0px;
                height: 0;
                display: block;

            }  

  .videoWrappercuadrado {
                position: relative;
                padding-bottom: 100%; /* 1:1 */
                padding-top: 0px;
                margin-bottom: 0px;
                height: 0;

            }  
            .videoWrapperhd {
                position: relative;
                padding-bottom: 56.25%; /* 16:9 */
                padding-top: 0px;
                margin-bottom: 0px;
                height: 0;

            }    
            .videoWrapper {
                position: relative;
                padding-bottom: 56.25%; /* 16:9 */
                padding-top: 0px;
                margin-bottom: 0px;
                height: 0;

            }




            iframe {
                width: 100vw;
                height: auto;



                min-width: 100vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */

                position: absolute;
                top: 50%;
                left: 50%;
                -webkit-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
            } 



            .marco{
                position: absolute;
                top: 50%;
                left: 50%;
                -webkit-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
                width: 100%;
                height:100%;
                opacity: 1;
            }
            .mc2
            {
                padding: 60.23% 0 0 0;
                position:relative;
                display: block;
            }

            .visible
            {
                display:none !important;
            }



            @media screen and (max-width: 2560px) {

                .content-wrapper {
                    left: 0;
                    right: 0;
                    -webkit-transform: translate3d(0,0,0);
                }


                iframe.cuadrado {
                    width: 100vw;
                    height: auto;

                    min-height: 130vh;

                    min-width: 100vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    -webkit-transform: translate(-50%, -50%);
                    -ms-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%);
                } 



            }  


            @media screen and (max-width: 650px) {

                .project.x1 {
                    width:100%;
                    height: calc(16/16 * 100vw);
                    opacity: 1;
                }
                .project.x11 {
                    width:100%;
                    height: calc(9/16 * 100vw);
                    opacity: 1;
                }

                .project.x1_1 {
                    width:100%;
                    height: calc(9/16 * 100vw);
                    opacity: 1;
                }
                .project.x1_2 {
                    width:100%;
                    height: calc(9/16 * 100vw);
                    opacity: 1;
                }


                .project.x2 {
                    width:100%;
                    height: calc(9/16 * 100vw);
                    opacity: 1;
                }
                .project.x2_2 {
                    width:100%;
                    height: calc(9/16 * 100vw);
                    opacity: 1;


                }
                .project.x2_3 {
                    width:100%;
                    height: calc(9/16 * 100vw);
                    opacity: 1;

                } .project.x2_3 {
                    width: 100%;
                    height: calc(9/16 * 100vw);

                } 

                .project.x3 {
                    width:100%;
                    height: calc(9/16 * 100vw);
                    opacity: 1;
                }

                .project.x4 {
                    width: 100%;
                    height: auto;
                    opacity: 1;
                }

                .project.x_text{
                    width: 100%;
                    height: calc(9.88/16 * 100vw);
                    background-color: #FFD100;
                    opacity: 1;
                    display: block !important;
                }

                .project.x_text_0{
                    width: 100%;
                    height: calc(9/16 * 100vw);
                    background-color: #FFD100;
                    opacity: 1;
                    display: block !important;
                } 
                 .project.x_text_auto{
                    width: 100%;

                   
                    opacity: 1;
                    display: block !important;
                }


                .project.x_text_1{
                    width: 100%;
                    height: calc(16/16 * 100vw);
                    background-color: #FFD100;
                    opacity: 1;
                    display: block !important;
                }
                .project.x_text_2{
                    width: 100%;
                    height: calc(6.11/16 * 100vw);
                    background-color: #FFD100;
                    opacity: 1;
                    display: block !important;
                } 
                .project.x_text_3{
                    width: 100%;
                    height: calc(6.1/16 * 100vw);
                    background-color: #FFD100;
                    opacity: 1;
                    display: block !important;
                }





                .remove
                {
                    display: none !important;
                }

                .visible
                {
                    display: block !important;
                }



                iframe {
                    width: 100vw;
                    height: auto;



                    min-width: 100vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    -webkit-transform: translate(-50%, -50%);
                    -ms-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%);
                }  

                iframe.cuadrado {
                    width: 100vw;
                    height: auto;



                    min-width: 100vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    -webkit-transform: translate(-50%, -50%);
                    -ms-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%);
                }
                iframe.xs {
                    width: 100vw;
                    height: auto;


                    min-width: 100vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    -webkit-transform: translate(-50%, -50%);
                    -ms-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%);
                }



                .content-wrapper {


                    max-width: 100%;
                    width:100%;
                    height: auto;
                    margin-left: auto;
                    margin-right: auto;
                    margin-bottom: 0px;
                    opacity: 1;
                    -webkit-transform: translate3d(0,0,0);

                    }
                  .container-fluid {

                max-width: 100%;
                width:85%;
                margin-left: auto;
                margin-right: auto; 

            }



                .header {
                    position: fixed;
                    top: 0;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    display: -webkit-flex;
                    -webkit-align-items: center;
                    -webkit-justify-content: space-between;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                    -webkit-box-pack: justify;
                    -ms-flex-pack: justify;
                    justify-content: space-between;
                    width: 92%;
                    height: 80px;

                    margin-left: auto;
                    margin-right: auto;

                    z-index: 1;
                }

                .container
                {
                    max-width: 100%;
                    width:92%;
                    height: 76px;
                    margin-left: auto;
                    margin-right: auto;
                    position: relative;
                }   





            }

            .project:after {
                content: '';
                display: block;
                clear: both;
            }



            /* MASONRY -------------------------------------------------------------------- */
            /* TEXTO_HOVER_MOBILE -------------------------------------------------------------------- */

            .hvrbox-layer_top {
                opacity: 0;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                width: 100%;
                height: 100%;
                background-color: #FFD100; 
                color: black;
                font-family: "at2";
                padding-left: 20px;
                padding-right: 20px;
                padding-top: 20px;
                -webkit-transition: all 0.4s ease-in-out 0s;
                -o-transition: all 0.4s ease-in-out 0s;
                transition: all 0.4s ease-in-out 0s;
            }

        .hvrbox-layer_top_mobile {
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: #FFD100;
    color: black;
    font-family: "at2";
    padding-left: 3.5%;
    padding-right: 3.5%;
    padding-top: 3.5%;
    -webkit-transition: all 0.4s ease-in-out 0s;
    -o-transition: all 0.4s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
}
            .hvrbox-layer_top:hover{
                opacity: 1;

            }
            .hvrbox-text {
                vertical-align: top;
                text-align: left;
                font-size: 13px;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                position: relative;
                opacity: 1;
                cursor: default;
                line-height: 24px;
                font-family: "at2";
            }  

            .hvrbox-text-tittle {
                vertical-align: top;
                text-align: left;
                font-size: 21.4px;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                position: relative;
                opacity: 1;
                cursor: default;
                line-height: 22px;
                font-family: "at";
            }
            #nav-animation
            {
                font-size: 24px;
                vertical-align: top;

                display: -webkit-box;

                display: -ms-flexbox;

                display: flex;
                position: relative;
                line-height: 19px;
                font-family: "at";

            }

            .hvrbox-layer_top:hover #nav-animation {
                animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
                -webkit-animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;

                transform: translate3d(0, 0, 0);
                -webkit-transform: translate3d(0, 0, 0);
                -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
                -webkit-perspective: 1000px;
                perspective: 1000px;
                -webkit-transform-origin: 2% 2%;
                -ms-transform-origin: 2% 2%;
                transform-origin: 2% 2%;
            } 

            .hvrbox-layer_top:hover #nav-animation {
                animation:colorchange2 5s infinite alternate;
                -webkit-animation:colorchange2 5s infinite alternate;


            }

            @keyframes shake {

                10%, 90% {
                    transform: translate3d(0, -1px, 0);
                    -webkit-transform: translate3d(0, -1px, 0);
                    font-size: 26px;
                }

                20%, 80% {
                    transform: translate3d(0, 2px, 0);
                    -webkit-transform: translate3d(0, 2px, 0);
                    font-size: 28px;
                }

                30%, 50%, 70% {
                    transform: translate3d(0, -4px, 0);
                    font-size: 26px;
                }

                40%, 60% {
                    transform: translate3d(0, 4px, 0);
                    font-size: 24px;
                }

            }

            @keyframes Easy {
                0% { transform: rotate(0deg); }
                20% { transform: rotate(-360deg); }
                100% { transform:  rotate(-360deg); }
            }

            @media screen and (max-width: 320px)
            {

                .hvrbox-layer_top {


                    padding-left: 14px;
                    padding-right: 14px;
                    padding-top: 14px;

                }
              .hvrbox-text {
    vertical-align: top;
    text-align: left;
    font-size: 18px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    opacity: 1;
    cursor: default;
    line-height: 22px;
    font-family: "at2";
}
                .hvrbox-text-tittle {
                    vertical-align: top;
                    text-align: left;
                    font-size: 26px;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    position: relative;
                    opacity: 1;

                    line-height: 26px;

                }
                #nav-animation
                {
                    font-size: 18px;
                    vertical-align: top;

                    display: -webkit-box;

                    display: -ms-flexbox;

                    display: flex;
                    position: relative;
                    line-height: 18px;

                }

            }

            /* TEXTO -------------------------------------------------------------------- */
            /* MASONRY -------------------------------------------------------------------- */

        
        
  

            .project.x1 {
                width: 25%;
                height: auto;
               
            } 



            .project.x2_2 {
                width: 100%;
                height: auto!important;



            }

            .project.x2_22 {
                width:100%;
               
                    
                height: auto!important;



            }

            .project.x2_3 {
              
                width: 50%;
                  
                height: auto!important;



            }
            
            
            
            .project.x1_h {
                width: 25%;
                height: calc(.86624 * 29vw);
                background-color: transparent;
            }



            .project.x1_1_h {
                width: 25%;
                height: calc(.21656 * 29vw);
                opacity: 1;
            }

            .project.x1_2_h {
                width: 25%;
                height: calc(.43312 * 29vw);
                opacity: 1;

            }

            .project.x2_h {
                width: 50%;
                height: calc(.86624 * 29vw);

                opacity: 1;

            } 

            .project.x2_3_h {
                width: 50%;
                height: calc(.64968 * 29vw);
                opacity: 1;


            }

            .project.x11_h {
                width: 50%;
                height: calc(.86624 * 29vw);
                opacity: 1;

            } 

            .project.x2_2_h {
                width: 50%;
                height: calc(.43312 * 29vw);
                opacity: 1;



            }

            .project.x3_h {
                width: 75%;
                height: calc(.86624 * 29vw);
                opacity: 1;





            }

            .project.x4_h {
                width: 50%;
                height: calc(1.0828 * 29vw);
                opacity: 1;


            }
            .project.x_text{

                display: none !important;
            }

            .project.x_text_1{

                display: none!important;
            }
.project.x_text_auto{

                display: none!important;
            }
            .project.x_text_2{

                display: none!important;
            } 
            .project.x_text_3{
                display: none!important;
            }




            .videoWrappercuadrado {
                position: relative;
                padding-bottom: 100%; /* 1:1 */
                padding-top: 0px;
                margin-bottom: 0px;
                height: 0;
                display: block;

            } 
.videoWrappercuadrado_lottie {
                position: relative;
                padding-bottom: 74.7211896%; /* 1:1 */
                padding-top: 0px;
                margin-bottom: 0px;
                height: 0;
                display: block;

            } 

            .videoWrapperhd {
                position: relative;
                padding-bottom: 56.25%; /* 16:9 */
                padding-top: 0px;
                margin-bottom: 0px;
                height: 0;

            }    
            .videoWrapper {
                position: relative;
                padding-bottom: 56.25%; /* 16:9 */
                padding-top: 0px;
                margin-bottom: 0px;
                height: 0;

            }




            iframe {
                width: 100vw;
                height: auto;



                min-width: 100vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */

                position: absolute;
                top: 50%;
                left: 50%;
                -webkit-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
            } 



       
            iframe.x1 {
                position: absolute;
                top: 50%;
                left: 50%;
                -webkit-transform: translate(-50%, -50%);
                    -ms-transform: translate(-50%, -50%);
                        transform: translate(-50%, -50%);
                width: 100% !important;

            }  

            iframe.x3 {
                position: absolute;
                top: 50%;
                left: 50%;
                -webkit-transform: translate(-50%, -50%);
                    -ms-transform: translate(-50%, -50%);
                        transform: translate(-50%, -50%);
                width: 100% !important;

            }          




            .marco{
                position: absolute;
                top: 50%;
                left: 50%;
                -webkit-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
                width: 100%;
                height:100%;
                opacity: 1;
            }
            .mc2
            {
                padding: 60.23% 0 0 0;
                position:relative;
                display: block;
            }

            .visible
            {
                display:none !important;
            }



            @media screen and (max-width: 2560px) {

                .content-wrapper {
                    left: 0;
                    right: 0;
                    -webkit-transform: translate3d(0,0,0);
                }


                iframe.cuadrado {
                    width: 100vw;
                    height: auto;

                    min-height: 130vh;

                    min-width: 100vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    -webkit-transform: translate(-50%, -50%);
                    -ms-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%);
                } 



            }  


            @media screen and (max-width: 650px) {
                
                         .project {

                    margin-bottom: 0%;
                }



                .project.x2_2 {
                    width:100%;
                    height: auto!important;
                }

                .project.x2_3 {
                    width:100%;
                    height: auto!important;

                }
                
                .project.x2_22 {
                    width:100%;
                    height: auto!important;

                }
                .project.x_text{
                    width: 100%;
                    height: calc(9/16 * 100vw);
                    background-color: #FFD100;
                     opacity: 1;
                    display: block !important;
                } 
                
                .project.x_text{
                    width: 100%;
                    height: auto;
                    background-color: #FFD100;
                     opacity: 1;
                    display: block !important;
                }
                .project.x_text_1{
                    width: 100%;
                    height: calc(16/16 * 100vw);
                    background-color: #FFD100;
                    opacity: 1;
                    display: block !important;
                }
                 .project.x_text_2{
                    width: 100%;
                    height: calc(6/16 * 100vw);
                    background-color: #FFD100;
                     opacity: 1;
                    display: block !important;
                } 
                .project.x_text_3{
                    width: 100%;
                    height: calc(4.5/16 * 100vw);
                    background-color: #FFD100;
                    opacity: 1;
                    display: block !important;
                }

                #info {
            
                display: none !important; 

            }

          


                iframe.x1 {
                    width: 100%!important;
                    height: auto;

                  
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    -webkit-transform: translate(-50%, -50%);
                        -ms-transform: translate(-50%, -50%);
                            transform: translate(-50%, -50%);
                }
                iframe.x3 {
                    width: 100%!important;
                    height: auto;

                    min-height: 100vw;

                    min-width: auto; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    -webkit-transform: translate(-50%, -50%);
                        -ms-transform: translate(-50%, -50%);
                            transform: translate(-50%, -50%);
                }
                


 .content-wrapper {


                max-width: 100%;
                width:100%;
                height: auto;
                margin-left: auto;
                margin-right: auto;
                margin-bottom: 0px;
     -webkit-transform: translate3d(0,0,0);
                


            }
                .project.x1_h {
                    width:100%;
                    height: calc(16/16 * 100vw);
                    opacity: 1;
                }
                .project.x11_h {
                    width:100%;
                    height: calc(9/16 * 100vw);
                    opacity: 1;
                }

                .project.x1_1_h{
                    width:100%;
                    height: calc(9/16 * 100vw);
                    opacity: 1;
                }
                .project.x1_2_h {
                    width:100%;
                    height: calc(9/16 * 100vw);
                    opacity: 1;
                }


                .project.x2_h {
                    width:100%;
                    height: calc(9/16 * 100vw);
                    opacity: 1;
                }
                .project.x2_2_h {
                    width:100%;
                    height: calc(9/16 * 100vw);
                    opacity: 1;


                }
                .project.x2_3_h {
                    width:100%;
                    height: calc(9/16 * 100vw);
                    opacity: 1;

                } .project.x2_3_h {
                    width: 100%;
                    height: calc(9/16 * 100vw);

                } 

                .project.x3_h {
                    width:100%;
                    height: calc(9/16 * 100vw);
                    opacity: 1;
                }

                .project.x4_h {
                    width: 100%;
                    height: auto;
                    opacity: 1;
                }

                .project.x_text{
                    width: 100%;
                    height: calc(9.88/16 * 100vw);
                    background-color: #FFD100;
                    opacity: 1;
                    display: block !important;
                }

                .project.x_text_0{
                    width: 100%;
                    height: calc(9/16 * 100vw);
                    background-color: #FFD100;
                    opacity: 1;
                    display: block !important;
                } 


                .project.x_text_1{
                    width: 100%;
                    height: calc(16/16 * 100vw);
                    background-color: #FFD100;
                    opacity: 1;
                    display: block !important;
                }
                .project.x_text_2{
                    width: 100%;
                    height: calc(6.11/16 * 100vw);
                    background-color: #FFD100;
                    opacity: 1;
                    display: block !important;
                } 
                .project.x_text_3{
                    width: 100%;
                    height: calc(6.1/16 * 100vw);
                    background-color: #FFD100;
                    opacity: 1;
                    display: block !important;
                }





                .remove
                {
                    display: none !important;
                }

                .visible
                {
                    display: block !important;
                }



                iframe {
                    width: 100vw;
                    height: auto;



                    min-width: 100vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    -webkit-transform: translate(-50%, -50%);
                    -ms-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%);
                }  

                iframe.cuadrado {
                    width: 100vw;
                    height: auto;



                    min-width: 100vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    -webkit-transform: translate(-50%, -50%);
                    -ms-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%);
                }
                iframe.xs {
                    width: 100vw;
                    height: auto;


                    min-width: 100vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    -webkit-transform: translate(-50%, -50%);
                    -ms-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%);
                }



                .content-wrapper {


                    max-width: 100%;
                    width:100%;
                    height: auto;
                    margin-left: auto;
                    margin-right: auto;
                    margin-bottom: 0px;
                    opacity: 1;
                    -webkit-transform: translate3d(0,0,0);



                }

                .header {
                    position: fixed;
                    top: 0;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    display: -webkit-flex;
                    -webkit-align-items: center;
                    -webkit-justify-content: space-between;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                    -webkit-box-pack: justify;
                    -ms-flex-pack: justify;
                    justify-content: space-between;
                    width: 92%;
                    height: 80px;

                    margin-left: auto;
                    margin-right: auto;

                    z-index: 1;
                }

                .container
                {
                    max-width: 100%;
                    width:92%;
                    height: 76px;
                    margin-left: auto;
                    margin-right: auto;
                    position: relative;
                }   





            }

            .project:after {
                content: '';
                display: block;
                clear: both;
            }


    /* MASONRY -------------------------------------------------------------------- */
          
            .info-toggle1 {

                bottom: 0px;
                left: 10px;
                position: fixed;
                z-index: 0;

                line-height: 2em;
                font-family: "at";
                font-size: 30px;

                opacity: 1;
                -webkit-animation:colorchange 5s infinite alternate;
                -moz-animation:colorchange 5s infinite alternate;
                -o-animation:colorchange 5s infinite alternate; 
                -ms-animation:colorchange 5s infinite alternate;
                animation:colorchange 5s infinite alternate;

            }


            .info-toggle1:hover {

                opacity: 0;

            } 


            @-webkit-keyframes colorchange {
                0% {

                    color: black;
                    cursor: url(GIF/red_gif/FIGURA_1.png) 50 50, auto;

                }

                10% {

                    color: #0D92DD;
                    cursor: url(GIF/red_gif/FIGURA_2.png) 50 50, auto;
                }

                20% {

                    color: #FFD100;
                    cursor: url(GIF/red_gif/FIGURA_3.png) 50 50, auto;
                }

                30% {

                    color: #008945;
                    cursor: url(GIF/red_gif/FIGURA_4.png) 50 50, auto;
                }

                40% {

                    color: #EF3D0B;
                    cursor: url(GIF/red_gif/FIGURA_1.png) 50 50, auto;
                }

                50% {

                    color: #F36994;
                    cursor: url(GIF/red_gif/FIGURA_2.png) 50 50, auto;
                }

                60% {

                    color: black;
                    cursor: url(GIF/red_gif/FIGURA_3.png) 50 50, auto;
                }

                70% {

                    color: #0D92DD;
                    cursor: url(GIF/red_gif/FIGURA_4.png) 50 50, auto;
                }
                80% {

                    color: #FFD100;
                    cursor: url(GIF/red_gif/FIGURA_1.png) 50 50, auto;
                }

                90% {

                    color: #008945;
                    cursor: url(GIF/red_gif/FIGURA_2.png) 50 50, auto;
                }

                100% {

                    color:#F36994;
                    cursor: url(GIF/red_gif/FIGURA_3.png) 50 50, auto;
                }
            }



            weather{

                padding: 0 10px;
                text-align: left;
                margin-bottom: 5vh;
                position: absolute;
                top: 50%;
                -webkit-box-sizing: inherit;
                box-sizing: inherit;

                text-align: left;
                font-size: 34px;
                font-family: "at";
                color: ghostwhite;
                line-height: 1.4vw;
            } 
 /* ABOUT -------------------------------------------------------------------- */


            .info-container {
                overflow: hidden;
                display: block;
            }

            #content {
                padding: 0px 0;
                height: 100vh;

                width: 100%;
                -webkit-box-sizing: border-box;
                        box-sizing: border-box;
                -webkit-touch-callout: inherit;
            }


            @media screen and (max-width: 1440px){
                #content {
                    height: calc(100vh - 60px);
                }
            }

            .container-fluid {

                max-width: 100%;
                width: 85%;
                margin-left: auto;
                margin-right: auto; 

            }

            @media screen and (max-width: 650px){
                 .container-fluid {

                max-width: 100%;
                width:100%;
                margin-left: auto;
                margin-right: auto; 

            }

            }



            .contact {
                min-width: 188px;
                max-width: 188px;

                position: relative;


                background-color: lightsalmon;


            }

            .portrait {

            }

            .blend {

                width: 270px;
                height: 404px;
                position: absolute;
                top: 0;
                background-size: cover;
                background-position: center;
            }



            .main {

                width: calc(100% - 270px);
                margin-top: 0px;
                margin-right: 0px;
                margin-bottom: 0px;
                margin-left: auto;
                padding: 0 0px;



                float: none;


            }

.main_info_full
{ 
                    width: 100%;
                    max-width: 100%;
                    height: 300px;

    
}
            .each {
                padding-bottom: 80px;
            }
            p {
                margin-bottom: 0px;
                margin-top: 0;
            }

           


/* ABOUT -------------------------------------------------------------------- */

       
/* FOOTER -------------------------------------------------------------------- */

            footer
            {


                position: relative !important;
                margin-top: 0px !important;
                height: 150px !important;
                clear: both !important;
                bottom: 0 !important;
                top: 100 !important;
                opacity: 1;

            }

.bottom_bar
{
    bottom: 0;
    width: 100%;
    height: 5px; 
    background-image: url(GIF/BOTTOM_gradient_bar.gif);
    background-position: center;
    background-size: cover;
    display: block !important;
}
.bottom_bar_top
{
    bottom: 0;
    width: 100%;
    height: 5px; 
    background-image: url(GIF/TOP_gradient_bar.gif);
    background-position: center;
    background-size: cover;
    display: block !important;
}


        
            .archive {
                background-color: #dbdbdb;
                width: 100%;
                height: 100%;
                color: #aaa;
                overflow: hidden;
                padding-bottom: 0px;
                font-family: "at2";

               
            }

            .abstand {

                width: 85%;
                padding:  10px 0px 20px 0px;
                height: auto;
                margin: 0 auto;
            }
            .FooterCell {
                position: relative;
                width: 210px;
                padding: 5px 10px 2px 0px;
                margin: 0px 0px 0px 0px;
                float: left;
                visibility: visible;
            }

.FooterCell.Extra {
                position: relative;
                width: 210px;
                padding: 5px 10px 2px 0px;
                margin: 0px 0px 0px 0px;
                float: right;
                visibility: visible;
            }

            .infoCell {
                position: relative;
                width: 33.3333333%;
                height: auto;
                padding: 0px 0px 0px 0px;
                margin: -30px 0px 0px 0px;
                float: left;
                
                font-size: 15px;
                line-height: 19px;
                visibility: visible;
            }

            .infoCell_2 {
                position: relative;
                width:50%;
                height: auto;
                padding: 0px 0px 0px 0px;
                margin: -30px 0px 0px 0px;
                float: left;
                
                font-size: 15px;
                line-height: 19px;
                visibility: visible;
            }

            .FooterCell.Small {
                width: 80px;
            }

            .FooterCell.time {

                width: 100%;
                padding-right: 0px;
                font-size: 8px;
                line-height: 12px;

                text-align: center;
                font-family: "at3";
            }




            .social {
                display: none;
            }

            .aboutmobile {
                float: left;
                display: block;
                padding: 4px 3px 5px 0px;
            }


            .aboutmobile.onlymobile {
                display: none;
            }

            #abouttime {
                display: block;
            }
            #aboutcredits {
                display: block;
            }




            @media only screen and (max-width: 650px){
                
                  footer
            {


                position: relative !important;
                margin-top: 0px !important;
                height: 150px !important;
                clear: both !important;
                bottom: 0 !important;
                top: 100 !important;

            }

                .abstand {

                    padding: 20px 0px 20px 0px;
                    height: auto;
                    margin: 0 auto;
                }
                .aboutmobiletitle {
                    display: none;
                }

                .aboutmobile img {
                    display: none;
                }

                .aboutmobile {

                    display: block;
                    font-family: "at";

                    font-size: 24px;
                    line-height: 29px;
                    width: 100%;
                    -webkit-box-pack: center;
                    -ms-flex-pack: center;
                    justify-content: center;
                    text-align: center;

                    clear: none;

                    padding: 0px;



                }

                .aboutmobile a {

                    border-bottom: 0px;


                    color: black;
                    text-decoration: none;
                }

                .FooterCell.Blank {
                    display: none;
                }

                .FooterCell.Small {
                    width: 100%;
                }
                
                
                .FooterCell {
                
                padding: 20px 0px 0px 0px;
               
                visibility: visible;
            }

                .aboutmobile.notmobile {
                    display: none;
                }

                .aboutmobile.onlymobile {
                    display: block;


                }


                #aboutfede {
                    display: none;
                }


                #aboutemail {
                    display: none;
                }

                #aboutadress {
                    display: none;
                }

                .social {
                    display: block;
                }


                .FooterCell.time {

                    width: 100%;
                    padding-right: 0px;
                    font-size: 6px;
                    line-height: 8px;
                    text-align: center;
                    font-family: "at3";
                }




            }    
            @media only screen and (max-width: 414px){

                .abstand {

                    padding: 15px 0px 0px 0px;
                    height: auto;
                    margin: 0 auto;
                }
                .aboutmobiletitle {
                    display: none;
                }

                .aboutmobile img {
                    display: none;
                }

                .aboutmobile {

                    display: block;
                    font-family: "at";

                    font-size: 30px;
                    line-height: 32px;
                    width: 100%;
                    -webkit-box-pack: center;
                    -ms-flex-pack: center;
                    justify-content: center;
                    text-align: center;

                    clear: none;

                    padding: 0px;



                }

                .aboutmobile a {

                    border-bottom: 0px;


                    color: black;
                    text-decoration: none;
                }

                .FooterCell.Blank {
                    display: none;
                }

                .FooterCell.Small {
                    width: 100%;
                    height: ;

                }

                .aboutmobile.notmobile {
                    display: none;
                }

                .aboutmobile.onlymobile {
                    display: block;


                }


                #aboutfede {
                    display: none;
                }



                #aboutemail {
                    display: none;
                }

                #aboutadress {
                    display: none;
                }

                .social {
                    display: block;
                }
            }   





            @-webkit-keyframes colorchange {
                0% {

                    color: black;


                }

                10% {

                    color: #0D92DD;

                }

                20% {

                    color: #FFD100;

                }

                30% {

                    color: #008945;

                }

                40% {

                    color: #EF3D0B;

                }

                50% {

                    color: #F36994;

                }

                60% {

                    color: black;

                }

                70% {

                    color: #0D92DD;

                }
                80% {

                    color: #FFD100;

                }

                90% {

                    color: #008945;

                }

                100% {

                    color:#F36994;

                }
            }


            @media only screen and (max-width: 767px){

                #abouttime {
                    display: none;
                }

                #aboutcredits {
                    display: none;
                }


            }





            @media only screen and (max-width: 375px)  {

                .logo a {
                    color: #000;
                    font-size: 27px;
                    text-decoration: none;
                }

                nav ul li a {

                    display: inline-block;
                    outline: none;
                    color: white;
                    text-decoration: none;
                    font-size: 52px;


                }
                span.one {
                    position: absolute;
                    width: 35px;
                    height: 8px;
                    background: black;
                }

                span.two {
                    position: absolute;
                    width: 35px;
                    height: 8px;
                    background: black;
                    margin-top: 14px;


                }


            }


            /* LOTTIE -------------------------------------------------------------------- */

       
       

            #gradientlottie
            {
                position: absolute;
                width: 400%;

                height: 400%;
                top: 50%;
                left: 50%;
                -webkit-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
                opacity: 1;   
            } 

            #gradientlottie2
            {
                position: absolute;
                width: 400%;

                height: 400%;
                top: 50%;
                left: 50%;
                -webkit-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
                opacity: 1;   
            }
            #gradientlottie3
            {
                position: absolute;
                width: 101%;

                height 1001%;
                top: 50%;
                left: 50%;
                -webkit-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
                opacity: 1;  
            }

            #gradientlottie4
            {
                position: absolute;
                width: 100%;

                height 100%;
                top: 50%;
                left: 50%;
                -webkit-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
                opacity: 1;   
            } 
            #gradientlottie5
            {
                position: absolute;
                width: 100%;

                height 100%;
                top: 50%;
                left: 50%;
                -webkit-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
                opacity: 1;   
            } 

            #gradientlottie6
            {
                position: absolute;
                width: 101%;

                height 101%;
                top: 50%;
                left: 50%;
                -webkit-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
                opacity: 1;   
            }

      #beso {
                position:absolute;
                top:50;
                left:50;
                width:100%;
                height:100%;
            }


            #info2 {
                width: 100px;
                height: 100px;
                opacity: 1;
                border-radius: 50%;
                position: fixed;
                top: 7%;
                right: calc(100% - 50px);
                background: #EF3D0B;
                color: #022B22;
                z-index: 10 !important;

                display: block;

            }
     #lottie1 {
  position: absolute;
  width: 100%;
 
  height: auto;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
                   opacity: 1;
 
}   
            #lottie2 {
  position: absolute;
  width: 100%;
 
  height: auto;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
                opacity: 0;
 
}


      
            /* LOADER -------------------------------------------------------------------- */





            #load{
                width:100%;
                height:100%;
                position:fixed;
                z-index:9999;



            }

            #loading
            {
                position: fixed;
                top:50%;
                left:50%;

                z-index:9999 !important;
                position: fixed;
                height: 100%;
                width: 100%;

                max-height: none;
                max-width: none;

                min-height: 100%;
                min-width: 100%;
                overflow: hidden;
                transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                -webkit-transform: translate(-50%, -50%);
             



            }
            
            .main2
            {
                opacity: 1;
               
                
            }



          

   /*  INFORMATION -------------------------------------------------------------------- */

  #info {
                       width: 100px;
                       height: 100px;
                       font-size: 16px;
                       text-align: center;
                       border-radius: 50%;
                       position: fixed;
                       bottom: 3%;
                       right: 3.7%;
                       background: #FFD100;
                       color: #022B22;
                       z-index:999999999!important;
                       -webkit-transform: translate3d(10px);
                       margin-left: 10px;
                       display: block;
                       cursor: pointer;
            }

@media only screen and (max-width: 2560px){
    
#info {
      width: 100px;
                height: 100px;
                font-size: 16px;
                text-align: center;
                border-radius: 50%;
                position: fixed;
                bottom: 2% ;
                right: 5.5%;
                background: #FFD100;
                color: #022B22;
                z-index:999999999!important;
                -webkit-transform: translate3d(10px);
                margin-left: 10px;
                display: block;
}
    }

@media only screen and (max-width: 1440px){
#info {
      width: 100px;
                height: 100px;
                font-size: 16px;
                text-align: center;
                border-radius: 50%;
                position: fixed;
                bottom: 3% ;
                right: 3.7%;
                background: #FFD100;
                color: #022B22;
                z-index:999999999!important;
                -webkit-transform: translate3d(10px);
                margin-left: 10px;
                display: block;
}
    }
  #info:hover{

                -webkit-animation: shake 0.90s cubic-bezier(.36,.07,.19,.97) both;

                        animation: shake 0.90s cubic-bezier(.36,.07,.19,.97) both;
            }

  #info a {
                display: block;
                width: 100%;
                height: 100%;
                line-height: 100px;
                position: absolute;
                right: 0;
                left: 0;
                font-family: "at";
                color: black;
                pointer-events: none;
                cursor: crosshair;
                text-decoration: none;
                z-index:999999999!important;


            }


  .menu_info {

                position: fixed;
                overflow-y: scroll

                height: 100%;
                width: 100%;
                top: -100% ;
                left: 0px !important; 
                margin: 0 auto;
                z-index: 1;

                background: #fff055;

            }


            @-webkit-keyframes shake {

                10%, 90% {
                    -webkit-transform: translate3d(0, -1px, 0);
                            transform: translate3d(0, -1px, 0);


                }

                20%, 80% {
                    -webkit-transform: translate3d(0, 2px, 0);
                            transform: translate3d(0, 2px, 0);

                }

                30%, 50%, 70% {
                    -webkit-transform: translate3d(0, -4px, 0);
                            transform: translate3d(0, -4px, 0);

                }

                40%, 60% {
                    -webkit-transform: translate3d(0, 4px, 0);
                            transform: translate3d(0, 4px, 0);

                }

            }


            @keyframes shake {

                10%, 90% {
                    -webkit-transform: translate3d(0, -1px, 0);
                            transform: translate3d(0, -1px, 0);


                }

                20%, 80% {
                    -webkit-transform: translate3d(0, 2px, 0);
                            transform: translate3d(0, 2px, 0);

                }

                30%, 50%, 70% {
                    -webkit-transform: translate3d(0, -4px, 0);
                            transform: translate3d(0, -4px, 0);

                }

                40%, 60% {
                    -webkit-transform: translate3d(0, 4px, 0);
                            transform: translate3d(0, 4px, 0);

                }

            }

            @-webkit-keyframes Easy {
                0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
                20% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); }
                100% { -webkit-transform:  rotate(-360deg); transform:  rotate(-360deg); }
            }

            @keyframes Easy {
                0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
                20% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); }
                100% { -webkit-transform:  rotate(-360deg); transform:  rotate(-360deg); }
            }



            .v-middle {

                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                -webkit-transform: translateY(-50%);
                -moz-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                -o--ms-transform: translateY(-50%);



            }





            @-webkit-keyframes colorchange {
                0% {

                    color: black;


                }

                10% {

                    color: #0D92DD;

                }

                20% {

                    color: #FFD100;

                }

                30% {

                    color: #008945;

                }

                40% {

                    color: #EF3D0B;

                }

                50% {

                    color: #F36994;

                }

                60% {

                    color: black;

                }

                70% {

                    color: #0D92DD;

                }
                80% {

                    color: #FFD100;

                }

                90% {

                    color: #008945;

                }

                100% {

                    color:#F36994;

                }
            }


            @media only screen and (max-width: 927px){

                #abouttime {
                    display: none;
                }

                #info {
                    width: 100px;
                    height: 100px;
                    font-size: 14px;
                    left: calc(100% - 125px);



                }



                #info a {


                    line-height: 100px;
                }


            }    

            @media only screen and (max-width: 527px){

                #abouttime {
                    display: none;
                }

                #info {
                    width: 70px;
                    height: 70px;
                    font-size: 12px;
                    left: calc(100% - 83px);
                }

                #info a {


                    line-height: 70px;
                }
            }




            .bigtype {
                Font-family: "at2";

                padding: 25px 0px 15px 0px;

                margin: 0px;
                text-align: 
            }



            hr {
                border: 0;
                height: 0;
                border-top: 5px solid black;
            }

 #intro {
                    
                       font-family: "at2";
                  
                }

            @media only screen and (max-width:2560px) {

                #intro {
                    font-size: 28px;
                    line-height: 41px;
                       font-family: "at2";
                    margin: 0px 0px 0px 0px !important;
                }
               

                .about
                {

                    text-transform: uppercase; 
                    display: block; 
                    padding-bottom: 15px;
                    font-family: "at";
                    font-size: 72px;

                }
            }

            @media only screen and (max-width:2100px) {

                #intro {
                    font-size: 30px;
                    line-height: 35px;
                    margin: 0px 0px 0px 0px !important;
                }

                .about
                {

                    text-transform: uppercase; 
                    display: block; 
                    padding-bottom: 15px;
                    font-family: "at";
                    font-size: 42px;

                }
            }
            @media only screen and (max-width:1024px) {

                #intro {
                    font-size: 22px;
                    line-height: 27px;
                    margin: 0px 0px 0px 0px !important;
                }
                .about
                {

                    text-transform: uppercase; 
                    display: block; 
                    padding-bottom: 15px;
                    font-family: "at";
                    font-size: 34px;

                }
            }
            @media only screen and (max-width:650px) {


             

                #intro {
                    font-size: 20px;
                    line-height: 25px;
                    margin: 0px 0px 0px 0px !important;
                }
                .about
                {

                    text-transform: uppercase; 
                    display: block; 
                    padding-bottom: 15px;
                    font-family: "at";
                    font-size: 32px;
                     line-height: 24px;

                }
            }

            @media only screen and (max-width: 425px)  {



                #intro {
                    font-size: 16px;
                    line-height: 21px;
                    margin: 0px 0px 0px 0px !important;
                }
                .about
                {

                    text-transform: uppercase; 
                    display: block; 
                    padding-bottom: 15px;
                    font-family: "at";
                    font-size: 28px;
                     line-height: 24px;


                }
            } 

            @media only screen and (max-width: 320px)  {

                .logo a {
                    color: #000;
                    font-size: 30px;
                    text-decoration: none;
                }

                nav ul li a {

                    display: inline-block;
                    outline: none;
                    color: white;
                    text-decoration: none;
                    font-size: 52px;


                }

                #intro {
                    font-size: 14px;
                    line-height: 19px;
                    margin: 0px 0px 0px 0px !important;
                }
                .about
                {

                    text-transform: uppercase; 
                    display: block; 
                    padding-bottom: 15px;
                    font-family: "at";
                    font-size: 24px;
                    line-height: 22px;

                }
            }


.blocker
{
    display: none;
}
@media  (max-width: 650px){
    .blocker
{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: block;
}

.header
{
    z-index: 2;
}
}


.credits
{
  font-family: "at";
    font-size: 23px;
    
}

.director
{
    font-family: "at2";
     font-size: 18px;
    font-kerning: auto;
   line-height: 18px;
}

.text_light
{
    font-family: "at3";
     font-size: 14px;
    font-kerning: auto;
   line-height: 18px;
}
.text_thin
{
    font-family: "at4";
     font-size: 12px;
    font-kerning: auto;
   line-height: 22px;
}

   @media only screen and (max-width: 1440px)  {
.director
{
    font-family: "at2";
     font-size: 18px;
    font-kerning: auto;
   line-height: 18px;
}

.text_light
{
    font-family: "at3";
     font-size: 14px;
    font-kerning: auto;
   line-height: 8px;
}
.text_thin
{
    font-family: "at4";
     font-size: 12px;
    font-kerning: auto;
   line-height: 8px;
}
         .infoCell_2 {
                position: relative;
                width:50%;
                height: auto;
                padding: 0px 0px 0px 0px;
                margin: -45px 0px 0px 0px;
                float: left;
                
                
                visibility: visible;
            }
           
            }



#rotate {
    
    display: none !important;
}
 

  
     
   @media (max-width: 820px) and (orientation: landscape)   

{
#rotate {
    display: block !important;
    position: fixed;
    left: 0;
    top: 0;
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index:999 !important;
    color: #fff;
    font-family: "at2";
    font-size: 8vh;
    line-height: 8vh;
    text-align: center;
    text-transform: uppercase;
    padding-top: 46vh;
    background-size: cover;
    font-weight: bold;
}

}

     .texto_full
            {
                font-size: 28px;
                line-height: 30px;
                font-family: "at2";
                margin: 0px 0px 0px 0px !important;  text-decoration-color: black;
                color: black;
                padding: 20px;
                 
            } 

     .pad
            {
                
                padding: 20px;
                 
            } 
            
            .info-nick {
                    overflow: hidden;
                    display: block;
                    margin-bottom: 0%;
                }
                


            @media only screen and (max-width: 650px)
            {
                .info-nick {
                 
                    margin-bottom: 0%;
                }
                
                
            .texto_full
            {
                font-size: 20px;
                line-height: 25px;
                font-family: "at2";
                margin: 0px 0px 0px 0px !important;  text-decoration-color: black;
                color: black;
                padding: 3.5%;
            }  
         .pad
            {
               
                padding: 3.5%;
            }

            }


 
    
    .hvrbox-text-Mid_mobile {
                vertical-align: top;
                text-align: left;
                font-size: 14px;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                position: relative;
                opacity: 1;
                cursor: default;
                line-height: 16px;
                font-family: "at3";
            }  

            .hvrbox-text-Thin_mobile {
                vertical-align: top;
                text-align: left;
                font-size: 12px;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                position: relative;
                opacity: 1;
                cursor: default;
                line-height: 15px;
                font-family: "at4";
            }  

            .hvrbox-text-Light_mobile {
                vertical-align: top;
                text-align: left;
                font-size: 13px;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                position: relative;
                opacity: 1;
                cursor: default;
                line-height: 16px;
                font-family: "at3";
            }

 .scrollUp{
            -webkit-transform: translateY(-80px);
                -ms-transform: translateY(-80px);
                transform: translateY(-80px);
                -webkit-transition: all 0.5s;
                -o-transition: all 0.5s;
                transition: all 0.5s
            }


.magico
{
    
}