/* start main logo */
.logo-composition { font-size: 15px; color: #000; font-family: 'Open Sans', sans-serif; position: relative; z-index: 5; white-space: nowrap; width: 100%; }
 .logo-composition .angola { display: inline-block; vertical-align: bottom; max-width: 150px; margin: 0 0; }
 .logo-composition .domain-composition { display: inline-block; vertical-align: bottom; position: relative; padding: 0 0 0 10px; margin: 0 0 0 4px; width: 83%; overflow: hidden; }
 .logo-composition .domain-composition::before { content: ''; display: block; clear: both; position: absolute; bottom: 0; left: 0; width: 1px; height: 73%; background-color: #000; }
 .logo-composition .domain-name { font-size: 1.8em; font-weight: 700; letter-spacing: -0.15rem; line-height: normal; display: inline-block; }
 .logo-composition .domain-top-level { font-size: 1.8em; color: #ed1c24; font-weight: 300; letter-spacing: -0.1rem; line-height: 1; position: relative; top: -3px; margin-left: 2px; }
 .logo-composition .domain-full-title { font-size: 0.65em; font-weight: 400; display: block; text-transform: uppercase; line-height: normal; 
	line-height: 1; width: 100%; max-width: 200px; min-width: 186px; position: relative; top: -1px; white-space: normal; }
@media all and (max-width: 767px) {
	 .container { max-width: none; }
	 .navbar { padding-left: 0; padding-right: 0; }
	 .navbar-brand { width: 72%; }
	 .logo-composition { font-size: 14px; }
	 .logo-composition .angola { width: 40%; }
	 .logo-composition .domain-composition::before { height: 70%; }
}
@media(max-width: 575px) {
	 .navbar-brand { width: 72%; }
}

@media(max-width: 544px) {
		
	 .navbar { padding-left: 0; padding-right: 0; }
	 .navbar-brand { width: 70%; }
	 .logo-composition { font-size: 11px; }
	 .logo-composition .angola { width: 35%; }
	 .logo-composition .domain-full-title { max-width: 200px; }
}

.logo-composition.light * {
	filter: contrast(0) brightness(2);
}
.logo-composition.dark * {
	filter: brightness(0);
}

/* end main logo */




/* start main logo */
.logo2-composition { font-size: 22px; color: #FFF; font-family: 'Open Sans', sans-serif; position: relative; z-index: 5; white-space: nowrap; width: 100%; }
 .logo2-composition .angola { display: inline-block; vertical-align: top; max-width: 150px; margin: 0 0; }
 .logo2-composition .domain-composition { display: inline-block; vertical-align: middle; position: relative; padding: 30px 0 0 10px; margin: 0 0 0 4px; width: 83%; overflow: hidden; }

 .logo2-composition .domain-name { font-size: 1.8em; font-weight: 700;  line-height: normal; display: inline-block; }
 .logo2-composition .domain-top-level { font-size: 1.8em; color: #ed1c24; font-weight: 300; line-height: 20px; position: relative; top: -3px; margin-left: 2px; }
 .logo2-composition .domain-full-title { font-size: 0.65em; font-weight: 400; display: block; text-transform: uppercase;  line-height: normal; width: 100%; max-width: 268px; min-width: 186px; position: relative; top: -1px; white-space: normal; }
@media all and (max-width: 767px) {
	 .container { max-width: none; }
	 .navbar { padding-left: 0; padding-right: 0; }
	 .navbar-brand { width: 72%; }
	 .logo2-composition { font-size: 14px; }
	 .logo2-composition .angola { width: 40%; }
	 .logo2-composition .domain-composition::before { height: 70%; }
}
@media(max-width: 575px) {
	 .navbar-brand { width: 72%; }
}

@media(max-width: 544px) {
		
	 .navbar { padding-left: 0; padding-right: 0; }
	 .navbar-brand { width: 70%; }
	 .logo2-composition { font-size: 11px; }
	 .logo2-composition .angola { width: 35%; }
	 .logo2-composition .domain-full-title { max-width: 240px; }
}

.logo2-composition.light * {
	filter: contrast(0) brightness(2);
}
.logo2-composition.dark * {
	filter: brightness(0);
}

/* end main logo */