body,
html {
    background: white;
}
#primary {
/*     top: -120px; */
	transform: translateY(-120px);
    transition: all 0.7s;
}

#primary.loaded {
/*     top: 0; */
	transform: translateY(0px);
}

.hero h1 {
    text-align: right;
    position: relative;
    z-index: 44;
    font-size: 6vw;
    color: #f0f0f0;
}

@media (min-width: 1440px) {
	.hero h1 {
		font-size: 90px;
	}
}

@media (max-width: 640px) {
	.hero h1 {
		font-size: 7vw;
	}
}


.site-header {
    overflow: hidden;
}

span.test {
    position: relative;
    z-index: 44;
    transition: all 0.4s;
}

	/*
	span.hero-content:hover {
		transform: rotate3d(2, 2, 0, 20deg);
	}
	*/

	span.hero-content span {
	    text-shadow: 1px 3px 51px rgba(0, 0, 0, 0);
	    transition: all 0.4s;
	}
	
		span.hero-content:hover span {
		    text-shadow: 1px 3px 51px rgba(0, 0, 0, 0.35);
		}
		
		span.hero-content span.top {
			font-size: 26px;
			font-size: .3em;
		}

			@media (max-width: 768px) {
				span.hero-content span.top {
					font-size: .5em;
				}
			}

.one {
    animation-delay: 0.4s;
}
.two {
    animation-delay: 0.8s;
}
.three {
    animation-delay: 1.2s;
}

.hero.wide {
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100vh;
    position: relative;
    background-color: #ff0e41;
    transition: border-radius 0.9s, height 0.4s;
}
.hero-background {
    background: linear-gradient(-45deg, #e0992b, #ff0e41, #ff0e41, #dc0017);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    width: 0px;
    height: 0px;
    border-radius: 50%;
    transition: all 0.4s;
    background-position: center center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: gradient 15s ease infinite;
}

.hero-background.loaded {
    width: 220%;
    height: 220%;
    border-radius: 0;
}

.hero.wide {
    background: transparent;
    margin: 0 auto;
    overflow: hidden;
    z-index: 44;
}

.hero-wrapper {
    position: absolute;
    left: 60%;
    top: 65%;
    color: white;
    font-size: 40px;
    transform: translate(-50%, -50%);
    content: "";
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 640px) {
	.hero-wrapper {
		left: 0;
		transform: translate(5%, -50%);
	}
}

.large-icon {
    position: absolute;
    left: -40%;
    bottom: 0;
    width: 65%;
}

#logos {
    min-height: 176px;
    height: auto;
    background: white;
    width: 85%;
    margin: 0 auto;
    padding: 50px 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 170px;
    justify-items: center;
    justify-content: space-between;
    align-items: center;
    transition: all 1.5s;
    transform: scale(1.1);
    z-index: 33;
    max-width: 100vw;
}

#logos img {
	width: 90%;
}

@media (max-width: 640px) {
	#logos {
		display: none;
	}
}

#logos.scrolled {
    transform: scale(1);
}

.logos-wrapper {
    overflow: hidden;
    max-width: 100vw;
}

#what_we_do {
    min-height: calc(100vh - 60px);
    width: 100%;
    background: white;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 50px;
    overflow: hidden;
}

.what-we-do-wrapper,
.services-wrapper {
    max-width: 500px;
    transition: 0.7s;
}

#what_we_do .what-we-do-wrapper {
	padding: 0 20px 60px;
}

#services .grid-50 {
    overflow: hidden;
}


#service_list {
    position: relative;
    min-width: 400px;
    overflow: hidden;
    padding-bottom: 30px;
    list-style: none;
}

#service_list ul {
    list-style: none;
    font-size: 20px;
    margin-bottom: 0;
}

#service_list ul {
    margin: 0;
    padding: 0;
}

#service_list ul li {
    line-height: 1.6;
    color: black;
}

#service_list ul {
    position: absolute;
    left: 1000px;
    transition: all 0.9s;
    opacity: 0;
}

@media (max-width: 768px) {
	.services-wrapper {
		width: 100%;
	}

		#service_list {
			padding: 0 0 30px;
		}

			#service_list ul {
				left: 12px;
			    position: relative;
			    margin-bottom: 30px;
			    opacity: 1;
			}
}

@media (max-width: 640px) {
	#service_list {
		min-width: auto;
		width: 100%;
	}
}

#service_list li.activated ul {
    left: 12px;
    position: relative;
    opacity: 1;
}

.service-wrapper {
    width: 400px;
}

#service_list h2 {
    position: relative;
    display: inline-block;
    z-index: 44;
    padding: 0 12px;
    margin: 20px 0;
    cursor: pointer;
}

#service_list li.activated h2 {
    margin: 22px 0;
}

h2 span {
    position: relative;
    z-index: 44;
    cursor: pointer;
}

#service_list li.service h2:before {
    background: #fff;
    width: 0%;
    bottom: 0;
    height: 13px;
    content: "";
    bottom: 0;
    left: 0;
    position: absolute;
    z-index: 1;
    transition: all 0.9s;
}

#service_list li.service.activated h2:before {
    width: 100%;
}

.what-we-do-wrapper:hover {
/*     transform: rotate3d(2, 2, 0, 15deg); */
}

.what-we-do-wrapper h2,
#services h2 {
    color: black;
    font-size: 40px;
    margin-bottom: 0;
}

.what-we-do-wrapper p {
    color: black;
    font-size: 20px;
    line-height: 2;
}

.what-we-do-wrapper p strong {
    font-weight: 600;
}

#what_we_do .grid-50.right {
    position: relative;
    overflow: hidden;
    min-height: 850px;
    height: auto;
}

	@media (max-width: 768px) {
		#what_we_do .grid-50.right {
		    position: relative;
		    overflow: hidden;
		    min-height: 750px;
		    height: auto;
		}
	}

	@media (max-width: 650px) {
		#what_we_do .grid-50.right {
		    position: relative;
		    overflow: hidden;
		    min-height: 510px;
		    height: auto;
		}
	}

	@media (max-width: 450px) {
		#what_we_do .grid-50.right {
		    position: relative;
		    overflow: hidden;
		    min-height: 400px;
		    height: auto;
		}
	}

#what_we_do .background {
    width: 300px;
    height: 300px;
    transition: all 0.7s;
    border-radius: 50% 50% 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 40px;
    top: 100px;
    right: unset;
    transform: unset;
    transition: all 0.9s;
}

@media (max-width: 768px) {
	#what_we_do .background {
	    right: 0px;
	    bottom: 0;
	}
}

#what_we_do .background.inView {
    width: 600px;
    height: 600px;
}

	@media (max-width: 1200px) {
		#what_we_do .background.inView {
		    width: 400px;
		    height: 400px;
		}	
	}

	@media (max-width: 850px) {
		#what_we_do .background.inView {
		    width: 350px;
		    height: 350px;
		}	
	}

	@media (max-width: 768px) {
		#what_we_do .background.inView {
		    width: 600px;
		    height: 600px;
		}	
	}


	@media (max-width: 650px) {
		#what_we_do .background.inView {
		    width: 400px;
		    height: 400px;
		}	
	}

	@media (max-width: 450px) {
		#what_we_do .background.inView {
		    width: 300px;
		    height: 300px;
		}	
	}

		#what_we_do .background div {
		    width: 100%;
		    height: auto;
		}

			#what_we_do .background div:before {
				content: "";
				position: relative;
			    width: 100%;
			    height: 0;
			    padding-top: 100%;
			    display: block
			}
/*
		#what_we_do .background div {
		    width: 600px;
		    height: 600px;
		}
*/



#services {
    min-height: calc(100vh - 60px);
    height: auto;
    width: 100%;
    background: white;
    overflow: hidden;
    transition: background 6.5s;
    position: relative;
    padding: 30px 17px;
}

#services.inView {
    background: #00feb7;
}

#services_a {
    position: relative;
    width: 570px;
    height: 570px;
    left: unset;
    transform: unset;
}

	#services_a:hover {
	    width: 600px;
	    height: 600px;
	}

	@media (max-width: 1000px) {
		#services_a {
			width: 400px;
			height: 400px;
		}

			#services_a:hover {
				width: 430px;
				height: 430px;
			}
	}

#services canvas#canvas2 {
    position: absolute;
    left: -750px;
    transform: rotate(24deg);
    top: -210px;
}

@media (max-width: 640px) {
	#services .blackdots {
		display: none;
	}
}

#portfolio {
    min-height: 100vw;
    height: auto;
    width: 100%;
    background: white;
    overflow: hidden;
}

#portfolio #portfolio-content {
    opacity: 1;
    transition: all 0.9s;
}

#portfolio .what-we-do-wrapper {
    max-width: 600px;
    padding: 30px;
    position: relative;
    z-index: 999;
}



.blobs-wrapper {
    width: 130vw;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0%);
    min-height: 100vw;
    height: auto;
}

	.blobs-wrapper.grid {
		width: 100vw;
		display: grid;
		grid-template-columns: repeat(16, 1fr);
		grid-template-rows: repeat(16, 1fr);
		--row-span: 3;
		--col-span: 3;
		--scale: 1;
	}
	
		.blobs-wrapper.grid .background {
			position: relative;
			grid-area: var(--row-start) / var(--col-start) / calc(var(--row-span) + var(--row-start)) / calc(var(--col-span) + var(--col-start));
			left: unset;
			transform: scale(var(--scale));
		}
		
			@media (max-width: 768px) {
				#portfolio .blobs-wrapper.grid .background {
					--scale: 1;
					transform: none;
					border-radius: 0;
				}

					#portfolio .blobs-wrapper.grid .background .client {
						border-radius: 0;
					}
			}

			@media (max-width: 640px) {
				.blobs-wrapper.grid .background {
					--scale: 1;
				}
			}
		
		.blobs-wrapper.grid .background {
			width: 110%;
			height: 110%;
		}
		
			#portfolio .blobs-wrapper.grid .background:hover {
				--scale: 1.75;
				transform: translate(0, 10%) scale(var(--scale));
				z-index: 1000;
			}

				@media (max-width: 768px) {
					#portfolio .blobs-wrapper.grid .background:hover {
						--scale: 1;
						transform: scale(var(--scale));
					}

						#portfolio .blobs-wrapper.grid .background div.client-content {
							top: 0;
							transform: translate(-50%, 0) scale(1);
						}

						#portfolio .blobs-wrapper.grid .background div.overlay {
							border-radius: 0;
							width: 100%;
							height: 100%;
						}
				}


			.blobs-wrapper.grid .background:nth-child(1) {
				--row-start: 5;
				--col-start: 1;
				--scale: 1.2;

				transform: scale(var(--scale)) translate(-45%, 0);
				transform-origin: bottom left;
			}
			.blobs-wrapper.grid .background:nth-child(2) {
				--row-start: 10;
				--col-start: 1;

				transform: scale(var(--scale)) translate(-45%, 0);
				transform-origin: bottom left;
			}
			.blobs-wrapper.grid .background:nth-child(3) {
				--row-start: 6;
				--col-start: 5;
				--scale: 1.2;
			}
			.blobs-wrapper.grid .background:nth-child(4) {
				--row-start: 11;
				--col-start: 5;
				--scale: .9;
			}
			.blobs-wrapper.grid .background:nth-child(5) {
				--row-start: 2;
				--col-start: 10;
				--scale: 1.5;
			}
			.blobs-wrapper.grid .background:nth-child(6) {
				--row-start: 9;
				--col-start: 10;
				--scale: 1.5;
			}
			.blobs-wrapper.grid .background:nth-child(7) {
				--row-start: 4;
				--col-start: 13;
				--scale: 1.2;
				transform: scale(var(--scale)) translate(60%, 0);
			}
			.blobs-wrapper.grid .background:nth-child(8) {
				--row-start: 12;
				--col-start: 13;
				--scale: 1.2;
				transform: scale(var(--scale)) translate(60%, 0);
			}
			
			.blobs-wrapper.grid .background div {
				width: 110%;
				height: 110%;
			}

				.blobs-wrapper.grid .background .client-content {
					transform: translate(-50%, -50%) scale(calc(var(--scale) / 3));
					width: 100%;
					height: 100%;
				}


.column {
    position: relative;
}

#portfolio .column.one .background:nth-child(1) {
    width: 80%;
    height: 0;
    padding-bottom: 80%;
    top: 16%;
}

#portfolio .column.one .background:nth-child(2) {
    width: 63%;
    height: 0;
    padding-bottom: 63%;
    top: 54%;
}

#portfolio .column.two .background:nth-child(1) {
    width: 75%;
    height: 0;
    padding-bottom: 75%;
    top: 29%;
}

#portfolio .column.two .background:nth-child(2) {
    width: 60%;
    height: 0;
    padding-bottom: 60%;
    top: 63%;
}

#portfolio .column.three .background:nth-child(1) {
    width: 90%;
    height: 0;
    padding-bottom: 90%;
    top: 6%;
}

#portfolio .column.three .background:nth-child(2) {
    width: 90%;
    height: 0;
    padding-bottom: 90%;
    top: 45%;
}

#portfolio .column.four .background:nth-child(1) {
    width: 80%;
    height: 0;
    padding-bottom: 80%;
    top: 23%;
}

#portfolio .column.four .background:nth-child(2) {
    width: 90%;
    height: 0;
    padding-bottom: 90%;
    top: 63%;
}

.background {
    transition: all 0.7s;
    border-radius: 50% 50% 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 5;
}

.blackdots {
	position: absolute;
	transform: translate(-50%, -50%);
	top: 50%;
	left: 0;
}



.firstgreendots {
    position: absolute;
    /* transform: translate(-50%, -50%); */
    top: 0px;
    right: 0;
}


.background div {
    width: 600px;
    height: 600px;
    background-position: center center;
    background-size: cover;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    transition: all 0.7s;
}

/*
	.background div:before {
		content: "";
		position: relative;
		width: 100%;
		padding-top: 100%;
		display: block;
	}
*/


.background div.hide {
    opacity: 0;
}

#portfolio .column.one .background:hover,
#portfolio .column.two .background:hover,
#portfolio .column.three .background:hover,
#portfolio .column.four .background:hover {
    width: 115%;
    height: 0;
    padding-bottom: 115%;
    z-index: 999999999;
}

#portfolio .column.one .background:hover {
    left: 103%;
}
#portfolio .column.four .background:hover {
    left: -3%;
}

#portfolio .background div.overlay {
    background: linear-gradient(-45deg, #ff0e41, #eeb60c 0%, #ff0e41 50%, #b80517 100%);
    background-size: 300% 300%;
    opacity: 0;
    transition: 0.9s;
    width: 600px;
    height: 600px;
    animation: gradient 15s ease infinite;
    z-index: 4;
}

#portfolio .background:hover div.overlay {
    opacity: 0.9;
}

#portfolio .background div.client {
    filter: grayscale(0%);
    transition: all 0.7s;
}

#portfolio .background:hover div.client {
    filter: grayscale(100%);
}

#portfolio .background div.client-content {
    opacity: 0;
    transition: all 0.7s;
    left: -1000px;
    color: white;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#portfolio .background div.client-content h3 {
    font-size: 22px;
    color: white;
    margin-bottom: 0;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 3px;
    text-align: center;
}

#portfolio .background div.client-content h3 span {
    font-size: 12px;
    position: relative;
    top: -5px;
}

#portfolio .background div.client-content p {
    font-size: 15px;
    padding-bottom: 30px;
}

#portfolio .background:hover div.client-content {
    opacity: 1;
    left: 50%;
}

canvas.dots {
    position: absolute;
    top: 0;
    left: 0;
}
canvas {
    position: relative;
    left: 10%;
    top: 0;
}


#service_list button span {
    font-size: 12px;
}

#service_list button {
    margin-top: 15px;
    position: relative;
}

#main_div {
    transition: all 0.3s;
}

#portfolio .button--bestia {
	transition-duration: .3s;
}

	#portfolio .button--bestia .button__bg.green {
	    top: 0;
	    left: 0;
	    position: absolute;
	    width: 100%;
	    height: 100%;
	    background: #00feb7;
	    border-radius: 50px;
	    overflow: hidden;
	    transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
	    color: #000;
		/* transform: scale3d(1.2, 1.2, 1); */
	    /* color: white; */
	    
	    transform: none; /* bug in Safari */
	}
	
		 /* bug in Safari */
		#portfolio .button--bestia:hover .button__bg::before {
			transform: translate3d(-50%,-50%,0) scale3d(0,0,1);
		}
		
		#portfolio .button--bestia:hover .button__bg::after {
			transition-duration: .3s;
			transition-delay: 0s;
			border-radius: 50px;
		}

@keyframes tilt {
    0% {
        transform: rotate3d(2, 2, 0, 0deg);
    }
    50% {
        transform: rotate3d(2, 2, 0, 20deg);
    }
    100% {
        transform: rotate3d(2, 2, 0, 0deg);
    }
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}


@media (max-width:768px) {
	.blackdots {
	    position: absolute;
	    transform: translate(-90%,-50%);
	    top: 0%;
	    left: 0;
	}

	#services_a {
		display: none;
	}
	
	.blobs-wrapper {
		flex-direction: row;
	}
}

.blobs-wrapper .green-dots {
    position: absolute;
    bottom: -251px;
    right: 215px;
    z-index: 4;
}

@media (max-width: 1024px) {
	.blobs-wrapper {
	    width: 130vw;
	    position: relative;
	    left: 50%;
	    top: -50px;
	    transform: translate(-50%,0%);
	    min-height: 100vw;
	    height: auto;
	}
	
		.blobs-wrapper.grid {
			width: 100vw;
		}

			#portfolio .button--bestia {
				font-size: 8pt;
			}

}

@media (max-width: 768px) {
	div.blobs-wrapper.grid {
		display: flex;
	}
	
	.blobs-wrapper {
		flex-direction: column;
		top: 0px;
	}
	
	#logos {
		flex-direction: row;
	}
	
	div.blobs-wrapper .background, 
	#portfolio .column.one .background:nth-child(1),
	#portfolio .column.one .background:nth-child(2),
	#portfolio .column.one .background:nth-child(3),
	#portfolio .column.one .background:nth-child(4),
	#portfolio .column.one .background:nth-child(5),
	#portfolio .column.one .background:nth-child(6),
	#portfolio .column.one .background:nth-child(7),
	#portfolio .column.one .background:nth-child(8),
	#portfolio .column.two .background:nth-child(1),
	#portfolio .column.two .background:nth-child(2),
	#portfolio .column.three .background:nth-child(1),
	#portfolio .column.three .background:nth-child(2),
	#portfolio .column.four .background:nth-child(1),
	#portfolio .column.four .background:nth-child(2) {
		position: relative;
		width: 100%;
		padding-bottom: 70%;
		border-radius: 50% 50% 0;
		border: 2.5px solid white;
	}

	#portfolio .column.one .background:hover,
	#portfolio .column.four .background:hover {
	    left: 0;
	    transform: none;
	}
	
	.client {
		border-radius: 50% 50% 0;
	}
	
	.background .overlay {
		border-radius: 50% 50% 0;
	}
}

@media (max-width: 640px) {
	div.blobs-wrapper .background, 
	#portfolio .column.one .background:nth-child(1),
	#portfolio .column.one .background:nth-child(2),
	#portfolio .column.one .background:nth-child(3),
	#portfolio .column.one .background:nth-child(4),
	#portfolio .column.one .background:nth-child(5),
	#portfolio .column.one .background:nth-child(6),
	#portfolio .column.one .background:nth-child(7),
	#portfolio .column.one .background:nth-child(8),
	#portfolio .column.two .background:nth-child(1),
	#portfolio .column.two .background:nth-child(2),
	#portfolio .column.three .background:nth-child(1),
	#portfolio .column.three .background:nth-child(2),
	#portfolio .column.four .background:nth-child(1),
	#portfolio .column.four .background:nth-child(2) {
		position: relative;
		width: 100%;
		padding-bottom: 70%;
		border-radius: 0;
		border: 2.5px solid white;
	}
	
	.client {
		border-radius: 0;
	}
}

@media (max-width:768px) {
	#logos img {
	    width: 30%;
	}
	
	#logos {
		display: none;
		flex-wrap: wrap;
	}
	
	#logos img.first {
		display: none;
	}
#footer img.white-icon {
    position: absolute;
    left: -60px;
    top: 50%;
    transform: translate(-50%,-50%);
    height: 205px;
    width: auto;
}
}