.weare{
	font-family: "tt_chocolates_trlbold";
    font-size: 3.5rem;
	color: #ffffff;
	text-align: center;
	line-height: 5rem;
}

.valuablestroke{
	font-family: 'tt_chocolates_trllight_italic';
	border: solid 1px #E1AEE7;
	border-radius: 2rem;
}

.brandw{
	font-family: 'tt_chocolates_trllight_italic';
	margin-right: 5px;
}

.folowertitle{
	font-family: "tt_chocolates_trlregular";
    font-size: 10rem;
	color: #ffffff;
}

.imgbrands{
	width: 100%;
    opacity: 60%;
}

.brandwrap{
	display: flex;
  	justify-content: center;
  	align-items: center;
	text-align: center;
}

.followsvgwrap{
	height: 9.5rem;
	display: inline-block;
	position: relative;
}

.followsvgwrap img{
	height: 100%;
	width: auto;
}

.edge {
	position: absolute;
	background-color: #ffffff;
	transition: all 1s ease;
}

.left {
	left: 0;
	bottom: 0;
	height: 0;
	width: 1px;
}

.top {
	left: 0;
	top: 0;
	width: 0;
	height: 1px;
}

.right {
	right: 0;
	height: 0;
	width: 1px;
	top:0px;
}

.bottom {
	bottom: 0;
	width: 0;
	right: 0;
	height: 1px;
}

.ab-padd{
    padding: 5rem 0;
}

@keyframes drawleft {
	0% { height: 0; width: 1; }
   
	100% { width: 1px; height: 100%; } /* Bottom edge */
}

 @keyframes drawtop {
	0% { height: 1; width: 0; }
   
	100% { width: 100%; height: 1px; } /* Bottom edge */
}

 @keyframes drawrigth {
	0% { height: 0; width: 1; }
   
	100% { width: 1px; height: 100%; } /* Bottom edge */
}

 @keyframes drawbottom {
	0% { height: 1; width: 0; }
   
	100% { width: 100%; height: 1px; } /* Bottom edge */
}

.animate .left {
	animation: drawleft 1s linear forwards;
}

.animate .top {
	animation: drawtop 1s linear forwards 1s;
}

.animate .right {
	animation: drawrigth 1s linear forwards 2s;
}

.animate .bottom {
	animation: drawbottom 1s linear forwards 3s;
}

#followerdoll{
    position: absolute;
    top: 0;
    right: -83px;
    height: 50%;
    bottom: 0;
    margin: auto;
}

#followerdoll #dollf{
	filter:invert(1);
    height: 100%;
	top: 0;
    right: 0;
}

#followerdoll #hey{
	position: absolute;
	top: 61px;
    left: 65px;
    width: 0px;
	transition: ease-in all 2s;
}

#followerdoll #hey.animatehey{
    top: -62px;
    left: -164px;
    width: 200px;
}


#linesvg line {
	stroke: #ffffff;
	stroke-width: 2;
	fill: none;

    /* Set the initial dash array and offset */
    stroke-dasharray: 255; /* This should be the length of your line */
    stroke-dashoffset: 255;
    /*animation: drawline 3s ease forwards;*/
	  
}

@keyframes drawline {
	0% {
		stroke-dashoffset: 255;
	  }
	  100% {
		stroke-dashoffset: 0;
	  }
}


.oval {
	fill: none;
	stroke: #E1AEE7;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 800; /* Total length of the path */
	stroke-dashoffset: 800; /* Start the offset to hide the path initially */
	/*animation: drawcircle 4s forwards;*/
}

@keyframes drawcircle {
	from {
		stroke-dashoffset: 800; /* Start hidden */
	}
	to {
		stroke-dashoffset: 0; /* End fully drawn */
	}
}



/*XX-Large devices (larger desktops, 1400px and down)*/
@media (max-width: 1400px) {
	.followsvgwrap {
		height: 8rem;
	}
}

/*X-Large devices (large desktops, 1200px and down)*/
@media (max-width: 1200px) {
	
}

/*Large devices (desktops, 992px and down)*/
@media (max-width: 992px) {
	.followsvgwrap {
		height: 6rem;
	}
	#followerdoll{
		display: none;
	}

	.imgbrands{
		width: 80%;
	}
}
/*Medium devices (tablets, 768px and down)*/
@media (max-width: 768px) {
	.wearecreative{
		padding-top: 4rem;
	}

	.smalltext {
		font-size: 2rem;
	}
}

/*Small devices (landscape phones, 576px and down)*/
@media (max-width: 576px) { 
	.followsvgwrap {
		height: 5rem;
	}

	.weare{
		text-align: center;
	}

	
}

/*Small devices (landscape phones, 576px and down)*/
@media (max-width: 375px) { 
	.followsvgwrap {
		height: 4rem;
	}
}