/*footer*/

.badge-footer {
  width: 20%; 
  margin-top: -3%;
  transition:1s;
}



/*dropdown menu*/
.open>.dropdown-menu {
	display: inline-grid;
	left: 0px;
	padding-left: 20px;
	padding-right: 15px;
	padding-top: 10px;
	padding-bottom: 10px;
	border:none;
	background: #fff;
	line-height: 43px;
}

.navbar-nav>li>.dropdown-menu {
	margin-top: 10px;
	border-radius: 3px;
}

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
	color: #fff;
	opacity: 0.8;
	margin-top: 15px;
  	background: none;
	padding:0px 15px 0px 15px;
}


/*buttons styles*/

#portfolio-btn2 {
	margin-top: 25px;
	border-width: 2px;
	border-color: white;
	color: white;
	background: transparent;
	min-width: 230px;
}

#portfolio-btn2:hover, #portfolio-btn3:hover {
	background-color: white;
	color: #26306b;
}

#portfolio-btn2:hover, #portfolio-btn3:hover {
	background-color: white;
	color: #26306b;
}

.btn-small-size {
	margin-top: 5%;
	border-width: 2px;
	min-width: 0px;
	text-align: center;
}
#portfolio-btn3 {
	border-color: white;
	color: white;
	background: transparent;
}

#portfolio-btn4 {
	border-color: #26306b;
	color: #26306b;
	background: transparent;
}

#portfolio-btn4:hover {
	background: #26306b;
	color: white;
}

/*Needs home section*/

.margin-needs {
	margin-top: 4%;
}

.icon-animation #overflow-svg {
	overflow: visible !important;
}

#ruler, #pencil, .h3-needs, #st6, #st7, #st8, #st9 {
	transition: 1s;
}

.st0 {
	transition: 1s 1s;
}

.icon-animation:hover .st0 {
	transform-origin: 100% 100%;
    transform: translate(25px, -17px) rotate(-45deg);
    transition: 1s;
}

#XMLID_1_ {
    transform-origin: 100% 100%;
    animation:pencilbackwards 1s 0s linear backwards;
}

.icon-animation:hover #XMLID_1_ {
	animation: pencil 1s 1s linear forwards;
}

@keyframes pencilbackwards {
	0% {
		transform: rotate(-85deg) translate(146px, 3px);
	}
	50% {
		transform: rotate(-42.5deg) translate(46px, -48px) scale(.7);
	}
	100%{
		transform: translate(0px, 3px)
	}
}

@keyframes pencil {
	0%{
		transform: translate(0px, 3px)
	}

	50% {
		transform: rotate(-42.5deg) translate(46px, -48px) scale(.7);
	}
	100% {
		transform: rotate(-85deg) translate(146px, 3px);
	}
}

#circle-svg {
	overflow: hidden;
    position: absolute !important;
    transform: translate(-157px, 152px);
    z-index: -1;
}

.design-text {
	color: #3b3c3d;
	transition: 1s 0s;
}

.icon-animation:hover .design-text {
	color: #fff;
	transition: 1s 1s;
}

.circle1, .circle2, .circle3 {
	-webkit-transform: translate(0px, -162px);
	-ms-transform: translate(0px, -162px);
	-o-transform: translate(0px, -162px);
	-moz-transform: translate(0px, -162px);
	transform: translate(0px, -162px);
}

.circle1 {
	-webkit-transition: 1s .5s;
	-o-transition: 1s .5s;
	-moz-transition: 1s .5s;
	transition: 1s .5s;
}

.circle2 {
	-webkit-transition: 1s .25s;
	-o-transition: 1s .25s;
	-moz-transition: 1s .25s;
	transition: 1s .25s;
}

.circle3 {
	-webkit-transition: 1s .0s;
	-o-transition: 1s .0s;
	transition: 1s .0s;
}

.icon-animation:hover .circle1 {
	-webkit-transform: translate(0px, -64px);
	-ms-transform: translate(0px, -64px);
	-o-transform: translate(0px, -64px);
	transform: translate(0px, -64px);
	-webkit-transition: 1s 1s;
	-o-transition: 1s 1s;
	transition: 1s 1s;
}
.icon-animation:hover .circle2 {
	-webkit-transform: translate(0px, -60px);
	-ms-transform: translate(0px, -60px);
	-o-transform: translate(0px, -60px);
	transform: translate(0px, -60px);
	-webkit-transition: 1s 1.20s;
	-o-transition: 1s 1.20s;
	transition: 1s 1.20s;
}
.icon-animation:hover .circle3 {
	-webkit-transform: translate(0px, -63px);
	-ms-transform: translate(0px, -63px);
	-o-transform: translate(0px, -63px);
	transform: translate(0px, -63px);
	-webkit-transition: 1s 1.45s;
	-o-transition: 1s 1.45s;
	transition: 1s 1.45s;
}

.home-needs-title-overlay {
	overflow: hidden;
}

.h3-needs {
    color: #3b3c3d;
}

.icon-animation:hover .home-needs-title-overlay>.h3-needs {
	color: #6b7ba5;
}

#feather {
	animation:featherbackwards 1.5s linear backwards;
}
#tint {
	-webkit-animation:tintbackwards 1.5s linear backwards;
	-moz-animation:tintbackwards 1.5s linear backwards;
	animation:tintbackwards 1.5s linear backwards;
}
.icon-animation:hover #feather {
	-webkit-animation: feather 1.5s linear forwards;
	-moz-animation: feather 1.5s linear forwards;
	animation: feather 1.5s linear forwards;
}
.st3 {
	transition: 1.5s;
}
.icon-animation:hover .st3 {
	fill:#6b7ba5;
}

.icon-animation:hover #tint {
	-webkit-animation: tint 1.5s forwards;
	-moz-animation: tint 1.5s forwards;
	animation: tint 1.5s forwards;
}

@keyframes featherbackwards {
	0% {
		transform: translate(0,20px) rotate(20deg);
	}
	20% {
		transform: translate(0,-60px) rotate(20deg);
	}
	40% {
		transform: translate(0,12px);
	}
	60% {
		transform: translate(0,0);
	}
	80% {
		transform: translate(0, 12px);
	}
	100% {
		transform: translate(0,0);
	}
}

@keyframes tintbackwards {	
	0% {
		-webkit-transform: translate(20px,0) scale(.75);
		-ms-transform: translate(20px,0) scale(.75);
		-moz-transform: translate(20px,0) scale(.75);
		transform: translate(20px,0) scale(.75);
		-webkit-transform-origin: 100% 100%;
		-moz-transform-origin: 100% 100%;
		-ms-transform-origin: 100% 100%;
		-o-transform-origin: 100% 100%;
		transform-origin: 100% 100%;
	}
	40% {
		-webkit-transform: translate(0,0);
		-ms-transform: translate(0,0);
		-moz-transform: translate(0,0);
		transform: translate(0,0);
	}
	100% {
		-webkit-transform: translate(0,0);
		-ms-transform: translate(0,0);
		-moz-transform: translate(0,0);
		transform: translate(0,0);
	}
}

@keyframes feather {
	0% {
		transform: translate(0,0);
	}
	20% {
		transform: translate(0, 12px);
	}
	40% {
		transform: translate(0,0);
	}
	60% {
		transform: translate(0,12px);
	}
	80% {
		transform: translate(0,-60px) rotate(20deg);
	}
	100% {
		transform: translate(0,20px) rotate(20deg);
	}
}

@keyframes tint {
	0% {
		-webkit-transform: translate(0,0);
		-ms-transform: translate(0,0);
		-moz-transform: translate(0,0);
		transform: translate(0,0);
	}
	60% {
		-webkit-transform: translate(0,0);
		-ms-transform: translate(0,0);
		-moz-transform: translate(0,0);
		transform: translate(0,0);
	}
	100% {
		-webkit-transform: translate(20px,0) scale(.75);
		-ms-transform: translate(20px,0) scale(.75);
		-moz-transform: translate(20px,0) scale(.75);
		transform: translate(20px,0) scale(.75);
		-webkit-transform-origin: 100% 100%;
		-moz-transform-origin: 100% 100%;
		-ms-transform-origin: 100% 100%;
		-o-transform-origin: 100% 100%;
		transform-origin: 100% 100%;
	}
}

.hidden-overflow {
	overflow: hidden !important;
}

.icon-animation:hover #st6 {
	transform: rotate(65deg);
	transform-origin: 70% 40%;
}

.icon-animation:hover #st8 {
	fill: #8F44AD;
    transform: rotate(-26DEG);
}

.icon-animation:hover #st7 {
	transform: rotate(360deg);
	transform-origin: 100% 100%; 
	opacity: 0;
}

.st12 {
	transform-origin: 50% 50%;
    transform: translate(0px, -6px) rotate(10deg);
    transition: 3s;
}

.st13 {
	transform: translate(-20px,36px) rotate(19deg);
    transform-origin: 50% 50%;
    transition: 3s;
}

.icon-animation:hover #st12 {
	transform-origin: 50% 50%;
    transform: translate(0px, -6px) rotate(370deg);
}

.icon-animation:hover #st13 {
	transform-origin: 50% 50%;
    transform: translate(-20px,36px) rotate(-342deg);
}

.icon-animation svg {
	position: relative !important;
	height: 156px;
}

/*the team section*/

.row-team .team-wrapper {
	padding: 0;
	border:1px solid #E2E9ED;
}

.team-image {
	position: absolute;
	width: 100%;
	height: auto;
	-webkit-transform: scale(1.01);
	-ms-transform: scale(1.01);
	-o-transform: scale(1.01);
	transform: scale(1.01);
	-webkit-transition: transform 1s linear;
	-o-transition: transform 1s linear;
	transition: transform 1s linear;
	-webkit-transform-origin: 52% 35%;
	-moz-transform-origin: 52% 35%;
	-ms-transform-origin: 52% 35%;
	-o-transform-origin: 52% 35%;
	transform-origin: 52% 35%;
}

.team-wrapper {
	overflow: hidden !important;
	position: relative;
	-webkit-transition: 2s;
	-o-transition: 2s;
	transition: 2s;
	background: white;
}

.team-wrapper svg {
	-webkit-transform: scale(1.01);
	-ms-transform: scale(1.01);
	-o-transform: scale(1.01);
	transform: scale(1.01);
	-webkit-transition: transform 1s;
	-o-transition: transform 1s;
	transition: transform 1s;
	position: absolute;
}

.team-wrapper:hover {
	z-index: 2;
	-webkit-box-shadow: 2px 2px 8px lightgrey;
	box-shadow: 2px 2px 8px lightgrey;
}

.team-wrapper:hover .letter-team {
	-webkit-transform: scale(22);
	-ms-transform: scale(22);
	-o-transform: scale(22);
	transform: scale(22);
}

.team-wrapper:hover #letter-a, #letter-a {
    -webkit-transform-origin: 52% 35%;
    -moz-transform-origin: 52% 35%;
    -ms-transform-origin: 52% 35%;
    -o-transform-origin: 52% 35%;
    transform-origin: 52% 35%;
}

.team-wrapper:hover #letter-j, #letter-j {
	-webkit-transform-origin: 56% 35%;
	-moz-transform-origin: 56% 35%;
	-ms-transform-origin: 56% 35%;
	-o-transform-origin: 56% 35%;
	transform-origin: 56% 35%;
}

.team-wrapper:hover #letter-n, #letter-n {
	-webkit-transform-origin: 36% 30%;
	-moz-transform-origin: 36% 30%;
	-ms-transform-origin: 36% 30%;
	-o-transform-origin: 36% 30%;
	transform-origin: 36% 30%;
}

.team-wrapper:hover #letter-o, #letter-o {
    -webkit-transform-origin: 33% 44%;
    -moz-transform-origin: 33% 44%;
    -ms-transform-origin: 33% 44%;
    -o-transform-origin: 33% 44%;
    transform-origin: 33% 44%;
}

.team-wrapper:hover #letter-l, #letter-l {
    -webkit-transform-origin: 43% 30%;
    -moz-transform-origin: 43% 30%;
    -ms-transform-origin: 43% 30%;
    -o-transform-origin: 43% 30%;
    transform-origin: 43% 30%;
}

.team-text {
    position: relative;
    margin-top: -13%;
    -webkit-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    transform: translate(0,-50%);
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
}

.team-wrapper:hover .team-text {
	opacity: 0;
}

.team-name {
	font-size: 18pt;
	font-weight: 400;
}

.team-position {
	font-size: 10pt;
	font-weight: 300;
}

#btn-team-top {
	margin-top: 15px; 
}

/*videodiv*/ 

.leftside {
	grid-area: leftside;
}

.rightside {
	grid-area: rightside;
}

.leftside2 {
	grid-area: leftside2;
}

.rightside2 {
	grid-area: rightside2;
}

.wrapper {
	display: grid;
	grid-template-columns: 30% auto;
	grid-template-areas: "leftside rightside" "leftside2 rightside2";
}

.bg-color0 {
	padding-top: 250px;
	padding-bottom: 50px;
	background: #46b39e;
	background: -moz-linear-gradient(45deg, #46b39e 0%, #8f44ad 100%);
	background: -webkit-linear-gradient(45deg, #46b39e 0%,#8f44ad 100%);
	background: linear-gradient(45deg, #46b39e 0%,#8f44ad 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#46b39e', endColorstr='#8f44ad',GradientType=1 );
}

.bg-size {
	padding-top: 100px;
	padding-bottom: 50px;
}

.bg-color1 {
	background-color: white;
}

.bg-color2 {
	background-color: #ecf0f1;
}

.tittletext {
	margin-top: 15%;
}

.tittleHeader, .textheader {
	color: white;
}

.esto2,.esto4 {
	position: absolute;
	left: 80%;
	top: 77%;
	width: 200px;
	height: 200px;
	border-radius: 100px;
	background-color: #46b39e;
	opacity: 0;
}

.esto3, .esto5 {
	position: absolute;
	background-color: #C9D0E3;
	transform: skewY(-5deg);
	-webkit-transform: skewY(-5deg);
	-moz-transform: skewY(-5deg);
	-o-transform: skewY(-5deg);	
	opacity: 0;
}

.esto3 {
	
	left: 41%;
	top: 200px;
	width: 700px;
	height: 420px;
}

.esto5 {
	left: 41%;
	top: 1728px;
	width: 700px;
	height: 420px;
}

.video1, #video3, #video2, #video4 {
	position: relative;
	width: 900px;
	height: 506.25px;
	z-index: 2;
	box-shadow: 0px 10px 15px rgb(0, 0, 0, .5);
	-webkit-box-shadow: 0px 10px 15px rgb(0, 0, 0, .5);
	-moz-box-shadow: 0px 10px 15px rgb(0, 0, 0, .5);
	-o-box-shadow: 0px 10px 15px rgb(0, 0, 0, .5);
	opacity: 0;
}

.videoPosition1 {
	left: 10%
}

.videoPosition2 {
	left: -25%
}

#video2.animateMe, #video4.animateMe, #video {
	animation: videotwo 2s ease ;
	opacity: 1;
}

#video3.animateMe, #video {
	animation: videone 2s ease;
	opacity: 1;
}


.esto2.animateMe, .esto4.animateMe {
	animation: estotwo 12s ease-in-out ;
	opacity: 1;
}

.esto3.animateMe, .esto {
	animation: esto 12s ease-in-out;
	opacity: 1;
}

.esto5.animateMe {
	animation: estothree 12s ease-in-out;
	opacity: 1;
}


@keyframes videone {
	0% {
		left: 40%;
		transform: rotate3d(-1,1,0, 90deg);
		-webkit-transform: rotate3d(-1,1,0, 90deg);
		-moz-transform: rotate3d(-1,1,0, 90deg);
		-o-transform: rotate3d(-1,1,0, 90deg);
		opacity: 0;
	}
	100%{ 
		left: 10%;
		transform: rotate3d(0,0,2, 0deg);
		-webkit-transform: rotate3d(0,0,2, 0deg);
		-moz-transform: rotate3d(0,0,2, 0deg);
		-o-transform: rotate3d(0,0,2, 0deg);
		opacity: 1;
	}

}

@keyframes videotwo {
	0% {
		left: -40%;
		transform: rotate3d(-1,1,0, 90deg);
		-webkit-transform: rotate3d(-1,1,0, 90deg);
		-moz-transform: rotate3d(-1,1,0, 90deg);
		-o-transform: rotate3d(-1,1,0, 90deg);
		opacity: 0;
	}
	100%{ 
		left: -25%;
		transform: rotate3d(0,0,2, 0deg);
		-webkit-transform: rotate3d(0,0,2, 0deg);
		-moz-transform: rotate3d(0,0,2, 0deg);
		-o-transform: rotate3d(0,0,2, 0deg);
		opacity: 1;
	}
}

@keyframes esto {
	0% {
		top: 350px;
		opacity: 0;
	}
	33%{
		opacity: 1;
	}

	100% {
		top: 200px;
	}
}

@keyframes estothree {
	0% {
		top: 1878px;
		opacity: 0;
	}
	33%{
		opacity: 1;
	}

	100% {
		top: 1728px;
	}
}

@keyframes estotwo {
	0% {
		top: 0%;
		opacity: 0;
	}
	33%{
		opacity: 1;
	}

	100% {
		top: 77%;
	}
}



/* Gallery Configuration - portfolio homesection
*/
.photo-wrapper {
	position: relative;
	overflow: hidden;	
	border-radius: 5px;
	-webkit-transition-duration: .5s;
	-moz-transition-duration: .5s;
	-o-transition-duration: .5s;
	transition-duration: .5s;
}

.overlay {
	position: absolute;
	bottom: 50%;
	left: 0;
	right: 0;
	background-color: #26306b;
	overflow: hidden;
	width: 100%;
	height:0;
}

.project .overlay {
	text-align: center;
	color: #fff;
	-webkit-transition: .7s ease;
	-moz-transition: .7s ease;
	-o-transition: .7s ease;
	transition: .7s ease;
}

.project .overlay2 {
	position: absolute;
	text-align: center;
	color: #fff;
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transition: opacity 0.4s;
	-moz-transition: opacity 0.4s;
	-o-transition: opacity 0.4s;
	transition: opacity 0.4s;
	height: 0;
	width: 100%;
}

.photo {
	-webkit-transition-duration: 1.5s;
	-moz-transition-duration: 1.5s;
	-o-transition-duration: 1.5s;
	transition-duration: 1.5s;
}



.project:hover .photo-wrapper {
	-moz-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
	-o-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
	box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
	-moz-transform: translate(0px, -4px);
	-webkit-transform: translate(0px, -4px);
	-o-transform: translate(0px, -4px);
	transform: translate(0px, -4px);	
}

.project:hover .photo {
	opacity: 0.6;
	filter: alpha(opacity=40);
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
	-webkit-transition: 1.5s;
	-moz-transition: 1.5s;
	-o-transition: 1.5s;
	transition: 1.5s;

}
.project:hover .overlay {
	opacity: .8;
	filter: alpha(opacity=100);
}

.project:hover .overlay2 {
	opacity: 1;
	filter: alpha(opacity=100);
}

.desc2, .portfolio-btn {
	margin-top: 25px;
}


.imgcenter {
	margin-top: -70%;
}

.imgcenter2 {
	margin-top: -75%;
}

.overlay2 img {
	width: 180px;
}


/*second part of protfolio home section*/

.desc3 {
	position: relative;
	width: 50%;
}

.desc4 {
	position: relative;
	width: 33.33%;
}

.image {
	display: block;
	width: 100%;
	height: auto;
}



.project:hover .overlay, .project:hover .overlay {
	bottom: 0;
	height: 100%;
}

.grey {
	background-color: #ecf0f1;
}


/*portfolio page*/

.marginP {
	padding: 0px;
}

.desc5 {
	width: 25%;
	padding-top: 20%;
	padding-bottom: 20%;
}

.logoP  {
	position: absolute;
	max-width: 60%;
	height: auto;
	transition: .8s;
}

#arttecaLogo {
	top: 36%;
}

.imgP {
	position: absolute;
	opacity: 0;
	z-index: -1;
	transition: .8s;
	width: auto;
}

#imgposition1 {
	top: 4%;
	right: 34%;
	max-height: 83%;
}

#imgposition2 {
	top: 5%;
	right: -15%;
	height: 75%;
}

#imgposition3 {
	top: 20%;
	right: -41%;
	max-height: 63%;
}

#imgposition4 {
	top: 14%;
	right: -70%;
	max-height: 71%;
}

.overlay5 {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;	
	opacity: 0;
	transition: .5s ease;
}

#overlayColor1 {
	background-color: #46b39e88;
}

#overlayColor2 {
	background-color: #e93e5688;
}

#overlayColor3 {
	background-color: #26306b88;
}

#overlayColor4 {
	background-color: #8f44ad88;
}

.overlay-text {
	color: white;
	margin: 0px;
	padding-top: 25px;
}

.overlay-text2 {
	color: white;
	margin-bottom: -25px;
}

.overlay-logo {
	max-width: 35%;
	width: auto;
	margin-bottom: -25px;
}

.overlayInside {
	position: absolute;
	top: 60%;
	left: 5%;
	transition: .8s;
}

.desc5:hover div>.overlayInside {
	margin-top: -100px;
}

.desc5:hover .overlay5{
	opacity: 1;
	filter: saturate(300%);
}

.desc5:hover div>.imgP {
	opacity: 1;
}

.desc5:hover div>a>.logoP {
	opacity: 0;
	margin-top: -100px;
}


#arttecaLogo,#palmaLogo,#pimposLogo {
	top: 40%; 
	width: 60%;
}

#brookeLogo1 {
	max-width: 80%;
}

#brookeLogo2 {
	max-width: 80%;
}

#brookeLogoPortfolio {
	width: 80%;
}

/*PortfolioV2*/

.portdesc {
	padding: 5% 0 5% 0;
}

.port01 {
	text-align: center;
	padding: 5% 5% 0 0;
}

.port01 > img {
	width: 200px;
	height: auto;
}

.port02 {
	text-align: center;
	padding: 5% 0 0 5%;
}

.wrapped {
	position: relative;
	overflow: hidden;	
	border-radius: 5px;
	box-shadow: 0px 8px 15px rgb(0, 0, 0, .3);
	transition: 1s;
}

.photo1 {
	width: 31.25rem;
	height: 24.9813125rem;
	animation: photone 2s ease;
}

.photo2 {
	left: 50%;
	width: 258px;
	height: 551px;
	opacity: 0;
}

.photo3 {
	width: 374.813px;
	height: 500px;
	transform: translateY(-65.5%) rotateX(56deg) rotateY(0deg) rotate(45deg);
    transform-origin: 0% 100%;
	opacity: 0;
}

.photo2.animateMe {
	animation: photwo 2s ease-out;
	opacity: 1;
}

.photo3.animateMe {
	animation: photfive 2s ease-out;
	opacity: 1;
}

.photo1:hover {
	transform: scale(1.2) translate(0, -30px);
}

.photo2:hover, .photo3:hover {
	transform: scale(1.2);
}

.img1 {
	position: absolute;
	top: -1px;
}
.img2 {
	width: 100%;
	height: auto;
	margin-top: 3%;
	animation: upandown 10s ease infinite;
}
.img3 {
	animation: upandowntwo 10s ease infinite;
}

.img4 {
	animation: upandownthree 10s ease infinite;
}

#zacasha {
	animation: zacasha 10s ease infinite;
}
#zacasha2,#pimpos2,#camila2 {
	animation: zacashatwo 10s ease infinite;
}
#zacasha3,#pimpos3 {
	animation: zacashathree 10s ease infinite;
}

#camila_logo_sizing {
	width: 300px !important;
}

.quad {
	position: absolute;
	border-radius: 5px;
	background: -moz-linear-gradient(420deg, #46b39e 0%, #8f44ad 100%);
	background: -webkit-linear-gradient(20deg, #46b39e 0%,#8f44ad 100%);
	background: linear-gradient(20deg, #46b39e 0%,#8f44ad 100%);
}

.char1 {
	left: 15%;
	top:35%;
	width: 500px;
	height: 320px;
	padding: 1rem;
}

.char2 {
    left: 56%;
    top: 56%;
    width: 18rem;
    height: 17rem;
}

.char3 {
	width: 374.813px;
	height: 500px;
	transform: translateY(-35.5%) rotateX(56deg) rotateY(0deg) rotate(45deg);
    transform-origin: 0% 100%;
}

.quad > ul > i {
	font-size: 8px;
	opacity: .8;
}
.quad > ul, .quad > a {
	color: white;
	text-align: right;
}

.quad > a:hover {
	color: #26306b;
}

.texton {
	text-align: left;
}

.photoCel {
	position: absolute;
	left: 0%;
    width: 206px;
    opacity: 0;
}

.photoCel.animateMe {
	opacity: 1;
	animation: phothree 1s linear;
}

.ipad {
	position: absolute;
	width: 400px;
	border-radius: 20px;
	box-shadow: 0px 8px 15px rgb(0, 0, 0, .3);
	transform: translateY(-55.5%) rotateX(56deg) rotateY(0deg) rotate(45deg);
    transform-origin: 0% 100%;
    opacity: 0;
}

.ipad.animateMe {
	animation: photfour 1s linear;
	opacity: 1;
}

.btncolleft {
	grid-area: btnleftside;
}

.btncolright {
	grid-area: btnrightside;
}

.btn-wrap {
	display: grid;
	grid-template-columns: 50% auto;
	grid-template-areas: "btnleftside btnrightside";
}

.ulcolleft {
	grid-area: ulleftside;
}

.ulcolright {
	grid-area: ulrightside;
}

.ul-wrap {
	text-align: left;
	padding: 0 5% 0 5%;
	display: grid;
	grid-template-columns: 50%  auto;
	grid-template-areas: "ulleftside ulrightside";
}

@keyframes upandown {
	0% {
		margin-top: 3%;
	}
	20% {
		margin-top: 3%;
	}
	40% {
		margin-top: -50%;
	}
	60% {
		margin-top: -20%;
	}
	80% {
		margin-top: -90%;
	}
	100% {
		margin-top: 3%;
	}
}

@keyframes upandowntwo {
	0% {
		margin-top: 3%;
	}
	20% {
		margin-top: 3%;
	}
	40% {
		margin-top: -200%;
	}
	60% {
		margin-top: -500%;
	}
	80% {
		margin-top: -980%;
	}
	100% {
		margin-top: 3%;
	}
}

@keyframes upandownthree {
	0% {
		margin-top: 3%;
	}
	20% {
		margin-top: 3%;
	}
	40% {
		margin-top: -20%;
	}
	60% {
		margin-top: -10%;
	}
	80% {
		margin-top: -50%;
	}
	100% {
		margin-top: 3%;
	}
}

@keyframes zacasha {
	0% {
		margin-top: 3%;
	}
	80% {
		margin-top: -60%;
	}
	100% {
		margin-top: 3%;
	}
}
@keyframes zacashatwo {
	0% {
		margin-top: 3%;
	}
	80% {
		margin-top: -500%;
	}
	100% {
		margin-top: 3%;
	}
}
@keyframes zacashathree {
	0% {
		margin-top: 3%;
	}
	80% {
		margin-top: -20%;
	}
	100% {
		margin-top: 3%;
	}
}

@keyframes photone {
	0% {
		left: 40%;
		transform: rotate3d(-1,1,0, 90deg);
		-webkit-transform: rotate3d(-1,1,0, 90deg);
		-moz-transform: rotate3d(-1,1,0, 90deg);
		-o-transform: rotate3d(-1,1,0, 90deg);
		opacity: 0;
	}
	100%{ 
		left: 0%;
		transform: rotate3d(0,0,2, 0deg);
		-webkit-transform: rotate3d(0,0,2, 0deg);
		-moz-transform: rotate3d(0,0,2, 0deg);
		-o-transform: rotate3d(0,0,2, 0deg);
		opacity: 1;
	}

}

@keyframes photwo {
	0% {
		left: -10%;
		opacity: 0;
	}
	50%{
		left: -10%;
		transform: scale(.6);
		opacity: 0;
	}
	100%{ 
		left: 50%;
		transform: scale(1);
		opacity: 1;
	}

}

@keyframes phothree {
	0% {
		left: -10%;
		transform: rotate3d(0,1,0, 90deg);
		opacity: 0;
	}
	100%{ 
		left: 0%;
		transform: rotate3d(0,0,0, 0deg);
		opacity: 1;
	}

}

@keyframes photfour {
	0% {
		transform: translateY(-35.5%) rotateX(20deg) rotateY(0deg) rotate(65deg) scale(.5);
    	transform-origin: 100% 0%;
		opacity: 0;
	}
	100%{ 
		transform: translateY(-55.5%) rotateX(56deg) rotateY(0deg) rotate(45deg);
    	transform-origin: 0% 100%;
		opacity: 1;
	}

}

@keyframes photfive {
	0% {
		opacity: 0;
	}
	50% {
		transform: translateY(-45.5%) rotateX(56deg) rotateY(0deg) rotate(45deg);
    	transform-origin: 0% 100%;
		opacity: 0;
	}
	100%{ 
		transform: translateY(-65.5%) rotateX(56deg) rotateY(0deg) rotate(45deg);
    	transform-origin: 0% 100%;
		opacity: 1;
	}

}

/*Services Main*/

.colService {
    padding: .5rem;
}

.wrap-service-marketing {
	position: relative;
	overflow: hidden;
	text-align: center;
	width: 100%;
	height: 302px;
	padding: 4.5rem 1.5rem 1rem 1.5rem;
	transition: 1s linear;
	color: #3b3c3d;
	background:linear-gradient(-45deg, #fff 92%, #AD69C8 54%, #8f44ad 84%);
	background:-webkit-linear-gradient(-45deg, #fff 92%, #AD69C8 54%, #8f44ad 84%);
	background:-moz-linear-gradient(-45deg, #fff 92%, #AD69C8 54%, #8f44ad 84%);
	background:-o-linear-gradient(-45deg, #fff 92%, #AD69C8 54%, #8f44ad 84%);
	opacity: 1;
	z-index: 1;
}
.wrap-service-marketing:hover {
	color: #3b3c3d;
	padding-top: 4.5rem;
	-webkit-transform: scale(1.05);
	-ms-transform: scale(1.05);
	-o-transform: scale(1.05);
	transform: scale(1.05);
	border-radius: 5px;
	box-shadow: 2px 2px 8px #00000020;
}
.wrap-service-marketing:before {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	content: '';
	background: linear-gradient(88deg, #fff 178px, #AD69C8 54%, #8f44ad 84%);
	background:-webkit-linear-gradient(88deg, #fff 178px, #AD69C8 54%, #8f44ad 84%);
	background: -moz-linear-gradient(88deg, #fff 178px, #AD69C8 54%, #8f44ad 84%);
	background: -o-linear-gradient(88deg, #fff 178px, #AD69C8 54%, #8f44ad 84%);
	transition: opacity 1s cubic-bezier(0, 0, 0.91, 0.41);
	opacity: 0;
	z-index: -1;
}
.wrap-service-marketing:hover:before {	
	opacity: 1;
}

.wrap-service-writing {
	position: relative;
	overflow: hidden;
	text-align: center;
	width: 100%;
	height: 302px;
	padding: 4.5rem 1.5rem 1rem 1.5rem;
	transition: 1s linear;
	color: #3b3c3d;
	background:linear-gradient(-45deg, #fff 92%, #99A5C5 54%, #6b7ba5 84%);
	background:-webkit-linear-gradient(-45deg, #fff 92%, #99A5C5 54%, #6b7ba5 84%);
	background:-moz-linear-gradient(-45deg, #fff 92%, #99A5C5 54%, #6b7ba5 84%);
	background:-o-linear-gradient(-45deg, #fff 92%, #99A5C5 54%, #6b7ba5 84%);
	opacity: 1;
	z-index: 1;
}
.wrap-service-writing:hover {
	color: #3b3c3d;
	padding-top: 4.5rem;
	-webkit-transform: scale(1.05);
	-ms-transform: scale(1.05);
	-o-transform: scale(1.05);
	transform: scale(1.05);
	border-radius: 5px;
	box-shadow: 2px 2px 8px #00000020;
}
.wrap-service-writing:before {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	content: '';
	background:linear-gradient(88deg, #fff 178px, #99A5C5 54%, #6b7ba5 84%);
	background:-webkit-linear-gradient(88deg, #fff 178px, #99A5C5 54%, #6b7ba5 84%);
	background:-moz-linear-gradient(88deg, #fff 178px, #99A5C5 54%, #6b7ba5 84%);
	background:-o-linear-gradient(88deg, #fff 178px, #99A5C5 54%, #6b7ba5 84%);
	transition: opacity 1s cubic-bezier(0, 0, 0.91, 0.41);
	opacity: 0;
	z-index: -1;
}
.wrap-service-writing:hover:before {	
	opacity: 1;
}

.wrap-service-design {
	position: relative;
	overflow: hidden;
	text-align: center;
	width: 100%;
	height: 302px;
	padding: 4.5rem 1.5rem 1rem 1.5rem;
	transition: 1s linear;
	color: #3b3c3d;
	background:linear-gradient(-45deg, #fff 92%, #6ECEBB 54%, #46b39e 84%);
	background:-webkit-linear-gradient(-45deg, #fff 92%, #6ECEBB 54%, #46b39e 84%);
	background:-moz-linear-gradient(-45deg, #fff 92%, #6ECEBB 54%, #46b39e 84%);
	background:-o-linear-gradient(-45deg, #fff 92%, #6ECEBB 54%, #46b39e 84%);
	opacity: 1;
	z-index: 1;
}
.wrap-service-design:hover {
	color: #3b3c3d;
	padding-top: 4.5rem;
	-webkit-transform: scale(1.05);
	-ms-transform: scale(1.05);
	-o-transform: scale(1.05);
	transform: scale(1.05);
	border-radius: 5px;
	box-shadow: 2px 2px 8px #00000020;
}
.wrap-service-design:before {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	content: '';
	background:linear-gradient(88deg, #fff 178px, #6ECEBB 54%, #46b39e 84%);
	background:-webkit-linear-gradient(88deg, #fff 178px, #6ECEBB 54%, #46b39e 84%);
	background:-moz-linear-gradient(88deg, #fff 178px, #6ECEBB 54%, #46b39e 84%);
	background:-o-linear-gradient(88deg, #fff 178px, #6ECEBB 54%, #46b39e 84%);
	transition: opacity 1s cubic-bezier(0, 0, 0.91, 0.41);
	opacity: 0;
	z-index: -1;
}
.wrap-service-design:hover:before {	
	opacity: 1;
}

.wrap-service-business {
	position: relative;
	overflow: hidden;
	text-align: center;
	width: 100%;
	height: 302px;
	padding: 4.5rem 1.5rem 1rem 1.5rem;
	transition: 1s linear;
	color: #3b3c3d;
	background:linear-gradient(-45deg, #fff 92%, #414A85 54%, #26306b 84%);
	background:-webkit-linear-gradient(-45deg, #fff 92%, #414A85 54%, #26306b 84%);
	background:-moz-linear-gradient(-45deg, #fff 92%, #414A85 54%, #26306b 84%);
	background:-o-linear-gradient(-45deg, #fff 92%, #414A85 54%, #26306b 84%);
	opacity: 1;
	z-index: 1;
}
.wrap-service-business:hover {
	color: #3b3c3d;
	padding-top: 4.5rem;
	-webkit-transform: scale(1.05);
	-ms-transform: scale(1.05);
	-o-transform: scale(1.05);
	transform: scale(1.05);
	border-radius: 5px;
	box-shadow: 2px 2px 8px #00000020;
}
.wrap-service-business:before {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	content: '';
	background:linear-gradient(88deg, #fff 178px, #414A85 54%, #26306b 84%);
	background:-webkit-linear-gradient(88deg, #fff 178px, #414A85 54%, #26306b 84%);
	background:-moz-linear-gradient(88deg, #fff 178px, #414A85 54%, #26306b 84%);
	background:-o-linear-gradient(88deg, #fff 178px, #414A85 54%, #26306b 84%);
	transition: opacity 1s cubic-bezier(0, 0, 0.91, 0.41);
	opacity: 0;
	z-index: -1;
}
.wrap-service-business:hover:before {	
	opacity: 1;
	border-radius: 5px;
}

.iconS-01 {
	width: 3.5rem;
	height: auto;
	z-index: 1;
}

.iconOverlay {
	opacity: 0;
	position: absolute;
	width: 3.5rem;
	height: auto;
	z-index: 1;
}

.colService:hover .iconS-01 {
	position: absolute;
	opacity: 0;
}

.colService:hover .iconOverlay {
	-webkit-transform: scale(1.4);
	-ms-transform: scale(1.4);
	-o-transform: scale(1.4);
	transform: scale(1.4);
	position: static;
	opacity: 1;	
	transition: 1s .5s linear;
	z-index: 0;
}

.serviceTittle {
	font-size: 16px;
    letter-spacing: -0.01rem;
    margin-bottom: -10px;
    transition: 1s linear;
}
.grid-item {
	width: 25%;
}

.colService hr {
	position: absolute;
    top: 168px;
    left: 25px;
    height: 2px;
    width: calc(100% - 1000px);
    background-color: #3b3c3d;
    transition: 1s ease-in;
}

.colService:hover hr {	
    transition: 1s .5s;
    width: calc(100% - 55px);
}

.colService #services-text {
	font-size: 14px;
	line-height: 20px;
	transition: 1s .5s linear;
	position: relative;
}
.colService:hover #services-text {
	opacity: 0;
	transition: .6s;
	position: absolute;
}

.figure {
	position: absolute;
	display: inline-block;
	width: 5rem;
	height: 5rem;
	border-radius: 100%;
	border-color: #3b3c3d;
	background-color: blue;
}

.wrap2, .iconS-01, .marketing {
	transition: 1s ease-in-out;
}

.colService:hover .wrap2 {
	transform: translate(0px, -35px);
} 

.hidelay {
	position: absolute;
	opacity: 0;
	padding: 0 .5rem 0 .5rem;
	color: transparent;
}

.colService:hover .hidelay {
	position: static;
	opacity: 1;
	transition: 2s;
	padding-bottom: 1rem;
	padding-top: 1rem;
	color: #3b3c3d;
}


/*partner home section*/
.partner-ul li {
	display: inline-block;
    max-width: 200px;
    min-width: 200px;
    padding: 30px;
    margin: 0 10px 0 10px;
    transition: 1s;
}

.partner-ul li:hover {
	transform: translate(0px, -8px);
}

/*responsive*/


@media (max-width: 1600px){

	.tittletext {
		margin-top: 20px;
	} 

	.video1, #video3, #video2, #video4 {
		width: 700px;
		height: 393.75px;
	}

	.videoPosition1 {
		left: 7%
	}

	.videoPosition2 {
		left: -5%
	}

	.esto2, .esto4 {
		left: 77%;
	}

	.esto3 {
		left: 41%;
		top: 20%;
		width: 600px;
		height: 360px;
	}

	.esto5 {
		left: 41%;
		top: 1565px;
		width: 600px;
		height: 360px;
	}

	@keyframes videone {
		0% {
			left: 20%;
			transform: rotate3d(-1,1,0, 90deg);
			opacity: 0;
		}
		100%{ 
			left: 7%;
			transform: rotate3d(0,0,2, 0deg);
			opacity: 1;
		}
	}

	@keyframes videotwo {
		0% {
			left: -25%;
			transform: rotate3d(-1,1,0, 90deg);
			opacity: 0;
		}
		100%{ 
			left: -5%;
			transform: rotate3d(0,0,2, 0deg);
			opacity: 1;
		}
	}

	@keyframes estothree {
		0% {
			top: 1665px;
			opacity: 0;
		}
		33%{
			opacity: 1;
		}

		100% {
			top: 1565px;
		}
	}
}

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

	.tittletext {
		font-size: 3vw;
	}

	.tittletext~p {
		font-size: 1.2vw;
	}

	.video1, #video3, #video2, #video4 {
		width: 650px;
		height: 365.625px;
	}

	.videoPosition1 {
		left: 7%
	}

	.videoPosition2 {
		left: -5%
	}

	.esto2, .esto4 {
		left: 77%;
	}

	.esto3 {
		left: 41%;
		top: 200px;
		width: 500px;
		height: 300px;
	}

	.esto5 {
		left: 41%;
		top: 1490px;
		width: 500px;
		height: 300px;
	}

	.btn-wrap {
		text-align: center;
		display: grid;
		grid-template-columns: 100%;
		grid-template-areas: "btnleftside" "btnrightside";
	}

	@keyframes videone {
		0% {
			left: 20%;
			transform: rotate3d(-1,1,0, 90deg);
			opacity: 0;
		}
		100%{ 
			left: 7%;
			transform: rotate3d(0,0,2, 0deg);
			opacity: 1;
		}

	}

	@keyframes videotwo {
		0% {
			left: -25%;
			transform: rotate3d(-1,1,0, 90deg);
			opacity: 0;
		}
		100%{ 
			left: -5%;
			transform: rotate3d(0,0,2, 0deg);
			opacity: 1;
		}
	}

	@keyframes estothree {
		0% {
			top: 1629px;
			opacity: 0;
		}
		33%{
			opacity: 1;
		}

		100% {
			top: 1490px;
		}
	}
}

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

	.port01, .port02 {
		padding: 0;
	}

	.column01 {
		left: -3%;
		margin-top: -7%;
		transform: scale(.8);
	}
	
	.column02 {
		transform: scale(.8);
		margin-top: -7%;
	}

	.texton2 {
		right: -11%;
	}

	.descPort {
		width: 100%;
	}	

	.tittletext {
		font-size: 4vw;
	}

	.tittletext~p {
		font-size: 2vw;
	}

	.wrapper {
		grid-gap: ;
		grid-template-columns: 100%;
		grid-template-areas: "rightside" "leftside" "rightside2" "leftside2";
	}

	.video1, #video3, #video2, #video4 {
		width: 700px;
		height: 393.75px;
	}

	.videoPosition1, .videoPosition2 {
		left: 0%
	}

	.esto3 {
		left: 13%;
		top: 205px;
		width: 600px;
		height: 360px;
	}
	.esto5 {
		position: absolute;
		left: 13%;
		top: 2010px;
		width: 600px;
		height: 360px;
	}

	.videoPosition1 {
		left: 0%
	}

	@keyframes videone {
		0% {
			left: 25%;
			transform: rotate3d(-1,1,0, 90deg);
			opacity: 0;
		}
		100%{ 
			left: 0%;
			transform: rotate3d(0,0,2, 0deg);
			opacity: 1;
		}

	}

	@keyframes videotwo {
		0% {
			left: -25%;
			transform: rotate3d(-1,1,0, 90deg);
			opacity: 0;
		}
		100%{ 
			left: 0%;
			transform: rotate3d(0,0,2, 0deg);
			opacity: 1;
		}
	}

	@keyframes esto {
		0% {
			top: 305px;
			left: 17%
			opacity: 0;
		}
		33%{
			opacity: 1;
		}

		100% {
			top: 205px;
		}
	}

	@keyframes estothree {
		0% {
			top: 2100px;
			opacity: 0;
		}
		33%{
			opacity: 1;
		}

		100% {
			top: 2010px;
		}
	}
}

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

	.column01 {
		left: 6%;
		margin-top: 7%;
		transform: scale(1);
	}

	.portdesc {
    	padding: 0% 0 7% 0%;
	}

	.texton2 {
		right: 10%;
	}
}

@media screen and  (max-width: 768px){
  
    .badge-footer {
    margin-top: 0%;
    }	

	.photo3:hover {
	transform: translateY(-65.5%) rotateX(56deg) rotateY(0deg) rotate(45deg);
	}

	.tittletext {
		font-size: 41px;
	}

	.tittletext~p {
		font-size: unset;
	}

	.video1, #video3, #video2, #video4 {
		width: 650px;
		height: 365.625px;
	}

	.esto2, .esto4 {
		left:74%;
	}

	.esto3, .esto5 {
		left: 2%;
	}

	.desc3, .desc4 {
		position: relative;
		width: 100%;
	}

	.desc5 {
		width: 50%;
		padding-top: 25%;
		padding-bottom: 25%;
	}

	#imgposition2 {
		right: 9%;
	}

	#imgposition3 {
		right: 11%;
	}

	#imgposition4 {
		right: 6%;
	}

	.overlay-text {
		padding-top: 30px;
		font-size: 20px;
		line-height: 19px;
	}

	.overlay-logo {
		padding-top: 50px;
	}

	#portfolio-btn2 {
		margin-top: 5px;
		min-width: 80px;
		padding: 3px;
	}

	#arttecaLogo, #palmaLogo {
		top: 15%;
	}

	.innerLogo {
		padding-top: 25px;
	}
}

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

	.serviceTittle {
    font-size: 14px;
    line-height: 1rem;
	}

	.colService #services-text, .colService:hover .hidelay {
    font-size: 12px;
    line-height: 1rem;
	}

	.column01 {
    left: 0;
	margin-top: 0;
	transform: scale(0.8);
	}

	.texton2 {
    right: 1%;
	}
}

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

	.column01 {
		left: -13%;
		margin-top: -13%;
		transform: scale(0.65);
	}

	.column02 {
	    transform: scale(.65);
	    margin-top: -22%;
	    left: -8%;
	}

	.texton2 {
	    right: -18%;
	}

	.bg-color0 {
		padding-top: 100px;
	}

	.video1, #video3, #video2, #video4 {
		width: 350px;
		height: 196.87px;
	}

	.esto3 {
		top: 76px;
		width: 300px;
		height: 180px;
	}

	.esto2, .esto4 {
		left: 75%;
		top: 75%;
		width: 100px;
		height: 100px;
	}

	.esto5 {
		top: 1625px;
		width: 300px;
		height: 180px;
	}

	@keyframes esto {
		0% {
			top: 133px;
			opacity: 0;
		}
		33%{
			opacity: 1;
		}

		100% {
			top: 76px;
		}
	}

	@keyframes estothree {
		0% {
			top: 1695px;
			opacity: 0;
		}
		33%{
			opacity: 1;
		}

		100% {
			top: 1625px;
		}
	}
}

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

	.column01 {
	    left: -20%;
	    margin-top: -18%;
	    transform: scale(0.55);
	}

	.texton2 {
	    right: -27%;
	}

	.esto5 {
		top: 1685px;
	}


	@keyframes estothree {
		0% {
			top: 1779px;
			opacity: 0;
		}
		33%{
			opacity: 1;
		}

		100% {
			top: 1685px;
		}
	}
}

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

	.video1, #video3, #video2, #video4 {
		width: 300px;
		height: 168.75px;
	}

	.esto5 {
		top: 1800px;
	}

	@keyframes estothree {
		0% {
			top: 1870px;
			opacity: 0;
		}
		33%{
			opacity: 1;
		}

		100% {
			top: 1800px;
		}
	}
}


@supports (-ms-ime-align:auto) {
    #circle-svg {
        opacity: 0;
    }

    .icon-animation:hover .design-text {
	color: #6b7ba5;
	transition: 1s 0s;
	}

	.icon-animation:hover #st7 { 
	opacity: 1;
	}

	.desc5:hover div>.imgP {
		opacity: 0;
	}

	.desc5:hover div>a>.logoP {
		opacity: 1;
		margin-top: 0;
	}

	.overlay5 {	
	visibility: hidden;
	}
}