/* BEGIN: COMMON LOGOTYPE /////////////////////////////////////////////////// */

#logotype {

	--lt-h-from: 38;
	--lt-h-to: 52;

	--lt-h: calc( ( 100vw - var( --vw-from ) * 1px )
		* ( var( --lt-h-to ) - var( --lt-h-from ) )
		/ ( 640 - var( --vw-from ) )
		+ var( --lt-h-from ) * 1px );

	height: var( --lt-h );
	margin-left: calc( var(--fbs ) + var( --gap-big ) );
	width: auto;

}

	#logotype > path {
		will-change: fill filter;
	}

	#logotype > path:nth-of-type(1) {
		fill: var( --clr-blue );
	}

	#logotype > path:nth-of-type(2) {
		fill: var( --clr-purple );
	}

	#logotype > path:nth-of-type(3) {
		fill: var( --clr-green );
	}

	#logotype > g:nth-of-type(1) > path:nth-of-type(1) {
		fill: var( --clr-purple );
	}

	#logotype > g:nth-of-type(1) > path:nth-of-type(2) {
		fill: var( --clr-yellow );
	}

	#logotype > path:nth-of-type(4) {
		fill: var( --clr-blue );
	}

	#logotype > path:nth-of-type(5) {
		fill: var( --clr-purple );
	}

	#logotype > path:nth-of-type(6) {
		fill: var( --clr-green );
	}

	#logotype > g:nth-of-type(2) > path:nth-of-type(1) {
		fill: var( --clr-yellow );
	}

	#logotype > g:nth-of-type(2) > path:nth-of-type(2) {
		fill: var( --clr-purple );
	}

	#logotype > path:nth-of-type(7) {
		fill: var( --clr-blue );
	}

@media ( min-width: 640px ) {

	#logotype {

		height: var( --fbs );
		margin-left: 0;

	}

}

/* END: COMMON LOGOTYPE ///////////////////////////////////////////////////// */