@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@900&display=swap");
.logo-netbuilder-brushed,
.logo-netbuilder-brushed-gold,
.logo-netbuilder-brushed-silver {
  background-image: var(--bg-image);
  background-size: cover;
  background-position: 50%;
  --logo-color: #047;
  --schevron-color: #f40;
  --w: var(--size, 300px);
  --bw: calc(var(--w) / 40);
  --sw: calc(var(--w) / 40);
  --schevron-size: calc(var(--w) / 13);
  position: relative;
  color: var(--logo-color);
  width: var(--w);
  min-width: var(--w);
  height: var(--w);
  font-size: calc(var(--w) / 2.4);
  font-weight: 900;
  border-radius: calc(var(--bw) *2);
  text-align: center;
  font-family: "Nunito", sans-serif;
  text-indent: -9999px;
  box-shadow: var(--bw) var(--bw) var(--bw) var(--bw) var(--b1) inset, calc(var(--bw) * -1) calc(var(--bw) * -1) var(--bw) var(--bw) var(--b2) inset;
}
.logo-netbuilder-brushed-gold,
.logo-netbuilder-brushed-gold-gold,
.logo-netbuilder-brushed-silver-gold {
  --b1: rgba(255, 228, 153, 0.8);
  --b2: rgba(102, 75, 0, 0.8);
  --b3: rgba(255, 187, 0, 0.8);
  --bg-image: url("logo_bg_gold.jpg") !important;
}
.logo-netbuilder-brushed-silver,
.logo-netbuilder-brushed-gold-silver,
.logo-netbuilder-brushed-silver-silver {
  --b1: rgba(247, 247, 247, 0.8);
  --b2: rgba(94, 94, 94, 0.8);
  --b3: rgba(170, 170, 170, 0.8);
  --bg-image: url("logo_bg_silver.jpg") !important;
}
.logo-netbuilder-brushed.glow,
.logo-netbuilder-brushed-gold.glow,
.logo-netbuilder-brushed-silver.glow {
  filter: drop-shadow(0px 0px 50px var(--b3));
}
.logo-netbuilder-brushed::before, .logo-netbuilder-brushed::after,
.logo-netbuilder-brushed-gold::before,
.logo-netbuilder-brushed-gold::after,
.logo-netbuilder-brushed-silver::before,
.logo-netbuilder-brushed-silver::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-indent: 0;
}
.logo-netbuilder-brushed::before,
.logo-netbuilder-brushed-gold::before,
.logo-netbuilder-brushed-silver::before {
  content: "NB";
  width: 0px;
  font-size: 1.3em;
  border-color: var(--schevron-color) transparent transparent transparent;
  border-width: var(--schevron-size);
  border-style: solid;
  left: calc(50% - var(--schevron-size));
  right: calc(50% + var(--schevron-size));
  text-shadow: 0px var(--sw) var(--sw) var(--b1), var(--sw) 0px var(--sw) var(--b1), calc(var(--sw) * -1) 0px var(--sw) var(--b2), 0px calc(var(--sw) * -1) var(--sw) var(--b2), 0px 0px calc(var(--sw) * 2) var(--b3);
}

.logo-netbuilder {
  --logo-color: #047;
  --logo-bg1: #0070c4;
  --schevron-color: #f40;
  --w: var(--size, 300px);
  --bw: calc(var(--w) / 30);
  --font-shadow-w: calc(var(--w) / 50);
  --schevron-size: calc(var(--w) / 15);
  position: relative;
  color: var(--logo-color);
  width: var(--w);
  min-width: var(--w);
  height: var(--w);
  border: var(--bw) solid;
  border-radius: calc(var(--bw) *2);
  text-align: center;
  font-family: "Nunito", sans-serif;
  font-weight: 900;
  background: linear-gradient(to bottom, white 50%, var(--logo-color) 50%, var(--logo-color) 51.5%, var(--logo-bg1) 51.5%);
  font-size: calc(var(--w) / 4);
  text-indent: -9999px;
}
.logo-netbuilder:before, .logo-netbuilder:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-indent: 0;
}
.logo-netbuilder:before {
  content: "NET";
  font-size: 1.3em;
  height: 70%;
  width: 0;
  border-width: var(--schevron-size);
  border-style: solid;
  border-color: var(--schevron-color) transparent transparent transparent;
  left: calc(50% - var(--schevron-size));
  right: calc(50% + var(--schevron-size));
  text-shadow: 0 0 var(--font-shadow-w) var(--logo-bg1), 0 0 var(--font-shadow-w) var(--logo-bg1), 0 0 var(--font-shadow-w) var(--logo-bg1);
}
.logo-netbuilder:after {
  content: "Builder";
  font-size: 0.95em;
  top: 50%;
  color: white;
  text-shadow: 0 0 var(--font-shadow-w) var(--logo-color), 0 0 var(--font-shadow-w) var(--logo-color), 0 0 var(--font-shadow-w) var(--logo-color), 0 0 var(--font-shadow-w) var(--logo-color), 0 0 var(--font-shadow-w) var(--logo-color), 0 0 var(--font-shadow-w) var(--logo-color);
}
.logo-netbuilder.logo-landscape {
  --bw: calc(var(--w) / 60);
  --font-shadow-w: calc(var(--w) / 80);
  --schevron-size: calc(var(--w) / 30);
  height: calc(var(--w) / 4);
  background: linear-gradient(to right, white 44%, var(--logo-color) 43%, var(--logo-color) 45%, var(--logo-bg1) 45%);
  font-size: calc(var(--w) / 7.5);
}
.logo-netbuilder.logo-landscape:before {
  left: -0.1px;
  top: calc(50% - var(--schevron-size));
  bottom: calc(50% + var(--schevron-size));
  width: 46%;
  height: 0;
  align-items: center;
  border-color: transparent transparent transparent var(--schevron-color);
}
.logo-netbuilder.logo-landscape:after {
  top: 0;
  left: 45%;
}
.logo-netbuilder.logo-mini {
  width: calc(var(--w));
  height: calc(var(--w) / 1.618);
  background: white;
  font-size: calc(var(--w) / 3.15);
  --font-shadow-w: calc(var(--w) / 30);
  --schevron-size: calc(var(--w) / 12);
}
.logo-netbuilder.logo-mini:before {
  bottom: -8%;
  width: 0;
  height: 110%;
}
.logo-netbuilder.logo-mini:after {
  content: none;
}
.logo-netbuilder.logo-simple, .logo-netbuilder.logo-simple-full, .logo-netbuilder.logo-simple-flat {
  --font-shadow-w: calc(var(--w) / 30 );
  --box-sh-o: calc(var(--w) / 50);
  --box-sh-s: calc(var(--w) / 80);
  --box-sh-w: calc(var(--w) / 50);
  width: calc(var(--w));
  height: calc(var(--w));
  font-size: calc(var(--w) / 2.4);
  background: radial-gradient(calc(var(--w) * 2) calc(var(--w) / 2) ellipse at 50% 81%, #047 30%, #004172 45%, #007edd 45%, #047 80%);
  color: #fff;
  border: 2px outset #008df7;
  border: none;
  box-shadow: var(--box-sh-o) var(--box-sh-o) var(--box-sh-s) var(--box-sh-w) rgba(0, 113, 197, 0.5) inset, calc(var(--box-sh-o) * -1) calc(var(--box-sh-o) * -1) var(--box-sh-s) var(--box-sh-w) rgba(0, 54, 95, 0.5) inset;
}
.logo-netbuilder.logo-simple:before, .logo-netbuilder.logo-simple-full:before, .logo-netbuilder.logo-simple-flat:before {
  content: "NB";
  height: 105%;
}
.logo-netbuilder.logo-simple:after, .logo-netbuilder.logo-simple-full:after, .logo-netbuilder.logo-simple-flat:after {
  content: none;
}
.logo-netbuilder.logo-simple-full, .logo-netbuilder.logo-simple-full-full, .logo-netbuilder.logo-simple-flat-full {
  --logo-bg1: white;
  color: var(--logo-color);
}
.logo-netbuilder.logo-simple-full:afterx, .logo-netbuilder.logo-simple-full-full:afterx, .logo-netbuilder.logo-simple-flat-full:afterx {
  content: attr(data-title);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 300px;
  border: 1px solid red;
  font-size: 1.1em;
  background: #fff;
  color: var(--logo-color);
  text-shadow: none;
}
.logo-netbuilder.logo-simple-flat, .logo-netbuilder.logo-simple-full-flat, .logo-netbuilder.logo-simple-flat-flat {
  background: #047;
  box-shadow: unset;
  border-radius: 0;
}
.logo-netbuilder.logo-simple-flat::before, .logo-netbuilder.logo-simple-full-flat::before, .logo-netbuilder.logo-simple-flat-flat::before {
  text-shadow: unset;
}
.logo-netbuilder.logo-dark {
  --schevron-size: calc(var(--w) / 15);
  --font-shadow-w: calc(var(--w) / 50 );
  --logo-bg1: #999;
  --logo-bg2: #fff;
  --box-sh-w: calc(var(--w) / 100);
  --sh-darken: #000a11;
  --sh-lighten: #007edd;
  background: var(--logo-color);
  border: none;
  box-shadow: var(--box-sh-w) var(--box-sh-w) 5px var(--box-sh-w) var(--sh-lighten) inset, calc(var(--box-sh-w) * -1) calc(var(--box-sh-w) * -1) 5px var(--box-sh-w) var(--sh-darken) inset;
}
.logo-netbuilder.logo-dark:before {
  text-shadow: 0 0 var(--font-shadow-w) var(--logo-bg1), 0 0 var(--font-shadow-w) var(--logo-bg1), 0 0 var(--font-shadow-w) var(--logo-bg1), 0 0 var(--font-shadow-w) var(--logo-bg1);
  color: white;
}
.logo-netbuilder.logo-dark:after {
  color: var(--logo-color);
  height: 30%;
  text-shadow: 0 0 var(--font-shadow-w) var(--logo-bg2), 0 0 var(--font-shadow-w) var(--logo-bg2), 0 0 var(--font-shadow-w) var(--logo-bg2);
}

.logo-container {
  position: relative;
  background: white;
  width: 220px;
  height: 264px;
  padding: 5px 5px;
  text-align: center;
  color: #047;
  font-family: "xRoboto", serif;
  font-weight: 900;
  font-size: 2em;
  line-height: 1.6;
  border: 5px solid;
  box-shadow: 0 0 0 50px white;
  margin: 60px auto;
}
.logo-container .bf {
  font-size: 1.4em;
}

.logo-round {
  border-radius: 50%;
  overflow: hidden;
}
.logo-round:before {
  top: 0px;
}
.logo-round:after {
  height: 20%;
}

.logo-oval {
  border-radius: 25%;
}

.logo-leef {
  --bw: calc(var(--w) / 20);
  border-radius: 12% 40%;
}
.logo-leef::before {
  position: absolute;
  top: 5%;
  left: 5%;
  right: unset;
  bottom: unset;
  width: var(--bw);
  height: var(--bw);
  border: var(--bw) solid red;
  border-radius: 50%;
  font-size: 155%;
  line-height: 130%;
  display: block;
}
.logo-leef::after {
  height: 25%;
}

.logo-bg-white {
  background-color: #fff;
  width: 250px;
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-indent: 0;
}

.logo-bg-dark {
  width: 250px;
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-indent: 0;
  justify-content: start;
}

.logo-netbuilder-v01 {
  --logo-color: #047;
  --w: var(--size, 200px);
  --bw: calc(var(--w) / 50);
  color: var(--logo-color);
  width: var(--w);
  height: var(--w);
  font-size: calc(var(--w) / 7);
  font-weight: 700;
  position: relative;
  font-family: "Roboto", sans-serif;
  background-color: #fff;
  height: calc(var(--w) / 2.5);
  font-family: "Times New Roman", serif;
  border: var(--bw) solid;
}
.logo-netbuilder-v01:before, .logo-netbuilder-v01:after {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  text-indent: 0;
}
.logo-netbuilder-v01:before {
  content: "NET-Builder";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.logo-netbuilder-v02 {
  --logo-color: #047;
  --w: var(--size, 200px);
  --bw: calc(var(--w) / 50);
  color: var(--logo-color);
  width: var(--w);
  height: var(--w);
  font-size: calc(var(--w) / 7);
  font-weight: 700;
  position: relative;
  font-family: "Roboto", sans-serif;
  background-color: #fff;
  height: calc(var(--w) / 1);
  font-family: "Times New Roman", serif;
  border: var(--bw) solid;
}
.logo-netbuilder-v02:before, .logo-netbuilder-v02:after {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  text-indent: 0;
}
.logo-netbuilder-v02:before {
  content: "NET";
  font-size: calc(var(--w) / 2.6);
  height: calc(var(--w) / 1.5);
  top: 0;
  right: 0;
  left: 0;
}
.logo-netbuilder-v02:after {
  content: "Builder";
  font-size: calc(var(--w) / 3.9);
  height: calc(var(--w) / 1.6);
  right: 0;
  bottom: 0;
  left: 0;
}

.logo-netbuilder-str {
  --b1: rgba(196, 196, 196, 0.8);
  --b2: rgba(145, 145, 145, 0.8);
  --w: var(--size, 300px);
  --bw: calc(var(--w) / 40);
  --schevron-size: calc(var(--w) / 13);
  background-color: white;
  background-color: #047;
  width: var(--w);
  height: var(--w);
  border-radius: calc(var(--bw) * 2);
  box-shadow: var(--bw) var(--bw) var(--bw) var(--bw) var(--b1) inset, calc(var(--bw) * -1) calc(var(--bw) * -1) var(--bw) var(--bw) var(--b2) inset;
  --bg-image: url("logo_bg_silver.jpg");
  background-image: var(--bg-image);
}
.logo-netbuilder-str::before {
  position: absolute;
  content: "";
  width: 0%;
  height: 100%;
  border-width: var(--schevron-size);
  border-style: solid;
  border-color: red transparent transparent transparent;
  left: calc(50% - var(--schevron-size));
}
.logo-netbuilder-str::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' stroke-width='3' stroke='%23047' fill='%2307c'%3e 		%3cpath d='M 30 20 v 40 h 20 m -20 -20 h 20' fill='%230000' stroke='%2307c' /%3e 		%3ccircle cx='30' cy='20' r='8' /%3e 		%3ccircle cx='50' cy='40' r='8' /%3e 		%3ccircle cx='50' cy='60' r='8' /%3e 	%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
}

.logo-netbuilder-svg-v0 {
  --w: var(--size, 300px);
  --bw: calc(var(--w) / 40);
  width: var(--w);
  height: var(--w);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' stroke-width='3' stroke='%23047' fill='%2307c'%3e 		%3crect x='2' y='2' rx='6' ry='6' width='96' height='96' style=' fill:silver; stroke:%23047; stroke-width:4; opacity:1.0;' /%3e 		// schevron 		%3cpath d='M 43 4 l 8 8 l 8 -8 Z' fill='%23f00' stroke='%23f00' stroke-width='0' /%3e 		// str lines 		%3cpath d='M 40 25 v 50 h 30 m -30 -25 h 30' fill='%230000' stroke='%2307c' /%3e 		%3ccircle cx='40' cy='25' r='10' /%3e 		%3ccircle cx='60' cy='50' r='10' /%3e 		%3ccircle cx='60' cy='75' r='10' /%3e 	%3c/svg%3e");
}

.logo-netbuilder-svg,
.logo-netbuilder-svg-v1,
.logo-netbuilder-svg-v2,
.logo-netbuilder-svg-v3,
.logo-netbuilder-svg-v4 {
  --w: var(--size, 300px);
  --bw: calc(var(--w) / 30);
  width: var(--w);
  height: var(--w);
  border: var(--bw) solid #047;
  border-radius: calc(var(--bw) * 2);
  background-color: #fff;
  position: relative;
  font-size: calc(var(--w) / 4);
  font-family: "Nunito";
  font-weight: 900;
  color: #fff;
  text-indent: -9999px;
}
.logo-netbuilder-svg-v1::before,
.logo-netbuilder-svg-v1-v1::before,
.logo-netbuilder-svg-v2-v1::before,
.logo-netbuilder-svg-v3-v1::before,
.logo-netbuilder-svg-v4-v1::before {
  content: "";
  position: absolute;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' stroke-width='4' stroke='%23047' fill='%2307c' xtransform='rotate(30)'%3e 		// str lines 		%3cpath d='M 35 20 v 60 h 30 M 35 50 h 30' fill='%230000' stroke='%2307c6' /%3e 		%3ccircle cx='35' cy='20' r='12' fill='%23f00' /%3e 		%3ccircle cx='65' cy='50' r='12' fill='%23f00' /%3e 		%3ccircle cx='65' cy='80' r='12' fill='%23f00' /%3e 	%3c/svg%3e") center center no-repeat;
  background-size: 100%;
  transform: rotate(30deg);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.logo-netbuilder-svg-v1.ani::before,
.logo-netbuilder-svg-v1-v1.ani::before,
.logo-netbuilder-svg-v2-v1.ani::before,
.logo-netbuilder-svg-v3-v1.ani::before,
.logo-netbuilder-svg-v4-v1.ani::before {
  animation: ani_before_01 1s ease-in-out;
}
@keyframes ani_before_01 {
  from {
    transform: rotate(-30deg);
    background-size: 80%;
  }
  to {
    transform: rotate(30deg);
    background-size: 100%;
  }
}
.logo-netbuilder-svg-v2,
.logo-netbuilder-svg-v1-v2,
.logo-netbuilder-svg-v2-v2,
.logo-netbuilder-svg-v3-v2,
.logo-netbuilder-svg-v4-v2 {
  background: linear-gradient(#fff 0%, #fff 68%, #047 50%, #047 100%);
}
.logo-netbuilder-svg-v2::before,
.logo-netbuilder-svg-v1-v2::before,
.logo-netbuilder-svg-v2-v2::before,
.logo-netbuilder-svg-v3-v2::before,
.logo-netbuilder-svg-v4-v2::before {
  content: "";
  position: absolute;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' stroke-width='4' stroke='%23047' fill='%2307c' xtransform='rotate(30)'%3e 		// str lines 		%3cpath d='M 35 20 v 60 h 30 M 35 50 h 30' fill='%230000' stroke='%2307c6' /%3e 		%3ccircle cx='35' cy='20' r='12' fill='%23f00' /%3e 		%3ccircle cx='65' cy='50' r='12' fill='%23f00' /%3e 		%3ccircle cx='65' cy='80' r='12' fill='%23f00' /%3e 	%3c/svg%3e") center center/68% no-repeat;
  transform: rotate(0deg);
  top: 0;
  right: 0;
  bottom: 32%;
  left: 0;
}
.logo-netbuilder-svg-v2::after,
.logo-netbuilder-svg-v1-v2::after,
.logo-netbuilder-svg-v2-v2::after,
.logo-netbuilder-svg-v3-v2::after,
.logo-netbuilder-svg-v4-v2::after {
  content: "NET-Builder";
  position: absolute;
  top: 71%;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-indent: 0;
  font-size: 0.6em;
  white-space: nowrap;
}
.logo-netbuilder-svg-v2.ani::before,
.logo-netbuilder-svg-v1-v2.ani::before,
.logo-netbuilder-svg-v2-v2.ani::before,
.logo-netbuilder-svg-v3-v2.ani::before,
.logo-netbuilder-svg-v4-v2.ani::before {
  animation: ani_before_v2 2s ease-in-out;
}
.logo-netbuilder-svg-v2.ani::after,
.logo-netbuilder-svg-v1-v2.ani::after,
.logo-netbuilder-svg-v2-v2.ani::after,
.logo-netbuilder-svg-v3-v2.ani::after,
.logo-netbuilder-svg-v4-v2.ani::after {
  animation: ani_after_v2 1s ease-in-out;
}
@keyframes ani_before_v2 {
  0% {
    transform: rotate(0deg);
    background-size: 43%;
  }
  40% {
    transform: rotate(-30deg);
    background-size: 53%;
  }
  80% {
    transform: rotate(30deg);
    background-size: 63%;
  }
  100% {
    transform: rotate(0deg);
    background-size: 68%;
  }
}
@keyframes ani_after_v2 {
  from {
    font-size: 0.2em;
  }
  to {
    font-size: 0.6em;
  }
}
.logo-netbuilder-svg.glow,
.logo-netbuilder-svg-v1.glow,
.logo-netbuilder-svg-v2.glow,
.logo-netbuilder-svg-v3.glow,
.logo-netbuilder-svg-v4.glow {
  --b3: rgba(255, 136, 255, 0.8);
  filter: drop-shadow(0px 0px 50px var(--b3));
}