/* 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")
			} 

			/* 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;


				}
			}


			.hvrbox-text-tittle{

				cursor: pointer !important;
			}

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


			.header {
				position: fixed;
				top: 0 !important;
				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;
				-webkit-transition: all 0.5s;
				-o-transition: all 0.5s;
				transition: all 0.5s

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

			.hover1:hover { 
				color: white !important; ;

				-webkit-transition: all 0.6s ease;
				-o-transition: all 0.6s ease;
				transition: all 0.6s ease;

			}
			.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 6s infinite alternate;
				animation:colorchange4 6s 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 !important;
				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 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%;
				opacity: 1;


			}



			#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%;
				transition: opacity 0.6s;
				&:hover {
					opacity: 0.9;
				}

			} 

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

	.novisible
			{
				display: block !important;
			}



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

				.content-wrapper {
					left: 0;
					right: 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_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;
				}
.novisible
			{
				display:none!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;

				}
				.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;
			}
			.content-wrapper:after {
				content: '';
				display: block;
				clear: both;
			}
			#projects-wrapped:after {
				content: '';
				display: block;
				clear: both;
				margin: 0 auto;
			}



			/* 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: 0%;
				-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: 19px;
				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: 19px;
				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: 2560px)
			{
				.hvrbox-text {
					vertical-align: top;
					text-align: left;
					font-size: 1.1vw !important;
					display: -webkit-box;
					display: -ms-flexbox;
					display: flex;
					position: relative;
					opacity: 1;
					line-height: 1.5vw;
				}
				.hvrbox-text-tittle {
					vertical-align: top;
					text-align: left;
					font-size: 55px;
					display: -webkit-box;
					display: -ms-flexbox;
					display: flex;
					position: relative;
					opacity: 1;

					line-height: 55px;

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

					display: -webkit-box;

					display: -ms-flexbox;

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

				}

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

				.hvrbox-layer_top {


					padding-left: 15px;
					padding-right: 15px;
					padding-top: 10px;

				}
				.hvrbox-text {
					vertical-align: top;
					text-align: left;
					/* font-size: 21px; */
					display: -webkit-box;
					display: -ms-flexbox;
					display: flex;
					position: relative;
					opacity: 1;
					line-height: 24px;
				}
				.hvrbox-text-tittle {
					vertical-align: top;
					text-align: left;
					font-size: 30px;
					display: -webkit-box;
					display: -ms-flexbox;
					display: flex;
					position: relative;
					opacity: 1;

					line-height: 34px;

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

					display: -webkit-box;

					display: -ms-flexbox;

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

				}

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

				.hvrbox-layer_top {


					padding-left: 10px;
					padding-right: 10px;
					padding-top: 8px;

				}
				.hvrbox-text {
					vertical-align: top;
					text-align: left;
					font-size: 14px;
					display: -webkit-box;
					display: -ms-flexbox;
					display: flex;
					position: relative;
					opacity: 1;

					line-height: 16px;

				}
				.hvrbox-text-tittle {
					vertical-align: top;
					text-align: left;
					font-size: 22px;
					display: -webkit-box;
					display: -ms-flexbox;
					display: flex;
					position: relative;
					opacity: 1;

					line-height: 22px;

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

					display: -webkit-box;

					display: -ms-flexbox;

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

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

				.hvrbox-layer_top {


					padding-left: 10px;
					padding-right: 10px;
					padding-top: 8px;

				}
				.hvrbox-text {
					vertical-align: top;
					text-align: left;
					font-size: 14px;
					display: -webkit-box;
					display: -ms-flexbox;
					display: flex;
					position: relative;
					opacity: 1;

					line-height: 14px;

				}
				.hvrbox-text-tittle {
					vertical-align: top;
					text-align: left;
					font-size: 22px;
					display: -webkit-box;
					display: -ms-flexbox;
					display: flex;
					position: relative;
					opacity: 1;

					line-height: 22px;

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

					display: -webkit-box;

					display: -ms-flexbox;

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

				}
			}

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


					display: none;

				}
				.hvrbox-text {
					vertical-align: top;
					text-align: left;
					font-size: 24px;
					display: -webkit-box;
					display: -ms-flexbox;
					display: flex;
					position: relative;
					opacity: 1;

					line-height: 28px;

				}
				.hvrbox-text-tittle {
					vertical-align: top;
					text-align: left;
					font-size: 42px;
					display: -webkit-box;
					display: -ms-flexbox;
					display: flex;
					position: relative;
					opacity: 1;

					line-height: 42px;

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

					display: -webkit-box;

					display: -ms-flexbox;

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

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

				.hvrbox-layer_top {


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

				}
		          .hvrbox-text {
             vertical-align: top;
             text-align: left;
             font-size: 20px !important;
             display: -webkit-box !important;
             display: -ms-flexbox;
             display: flex !important;
             position: relative;
             line-height: auto;
            }

            .hvrbox-text-tittle {
                vertical-align: top;
                text-align: left;
                font-size: 32px;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                position: relative;
                opacity: 1;
                cursor: default;
                line-height: 34px;
                font-family: "at";
            }
				#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_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;
			}

.novisible
			{
				display:block!important;
			}


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

				.content-wrapper {
					left: 0;
					right: 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;

				}

				#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;



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

.novisible
			{
				display:none!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;


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

			.bigtype {
				Font-family: "at2";

				font-size: 23px;
				line-height: 26px;
				margin: 0px;
			}

			@media screen and (max-width: 991px){
				.main {
					width: 100%;
					max-width: 100%;

				}}


			@media (max-width: 991px) {
				.contact {
					display: none!important;
				}
			}  
			@media only screen and (max-width: 2560px) {

				.bigtype {
					Font-family: "at2";

					font-size: 36px;
					line-height: 42px;
					margin: 0px;
				}

			}    
			@media (max-width: 1440px) {

				.bigtype {
					Font-family: "at2";

					font-size: 30px;
					line-height: 36px;
					margin: 0px;
				}

			}      
			@media (max-width: 425px) {

				.bigtype {
					Font-family: "at2";

					font-size: 23px;
					line-height: 29px;
					margin: 0px;
				}

			}      

			@media (max-width: 375px) {

				.bigtype {
					Font-family: "at2";

					font-size: 19px;
					line-height: 23px;
					margin: 0px;
				}

			}      

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


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

			footer
			{


				position: relative !important;
				margin-top: 0px !important;
				height: 150px !important;
				clear: both !important;
				bottom: 0 !important;
				top: 100 !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;
			}

			.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: 200px !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%;


				}

				.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: 927px){



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



				}



				#info a {


					line-height: 100px;
				}




			}    

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


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

				#info a {


					line-height: 70px;
				}
			}
			@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: 11%;
				right: calc(100% - 50px);
				background: #EF3D0B;
				color: #022B22;
				z-index: 10 !important;

				display: block;

			}
			#info2:hover {
				background: #FFD100;
			}
			#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: 60% ;
				left: calc(100% - 155px);
				background: #FFD100;
				color: #022B22;
				z-index: 10 !important;
				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: hidden ;

				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){


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



				}



				#info a {


					line-height: 100px;
				}


			}    

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



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



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

				#intro {
					font-size: 60px;
					line-height: 65px;
					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 only screen and (max-width: 650px){
				.blocker
				{
					position: absolute;
					width: 100%;
					height: 100%;
					z-index: 1;
					display: block;
				}

				.header
				{
					z-index: 2;
				}
			}


			.pace {
				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%);


			}

			.pace.pace-inactive {
				display: none;
			}

			#preloader{
				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%);
				transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
			}


			#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%);




			}


			.hello
			{
				font-family: "at2";
				position: absolute;
				top: 50%;
				left: 50%;
				-webkit-transform: translate(-50%, -50%);
				-ms-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
				color: #fff;
				font-size: 70px;
				z-index:999999999 !important;
			}

			#projects-wrapped {

				margin: 0 auto;
			}