:root {
  --warning: #f9b837;
  --primary: #003060;
  --danger: #a41830;
  --font1: 'Ubuntu', sans-serif;
}

html {
  width: 100%;
}

body {
font-family: var(--font1);
font-size:1rem;
color:#ddd;
line-height:2.0em;
background:url(../img/bgbody.jpg?v=1) repeat-x center bottom fixed;
/*background-color:#fff !important;*/
}

.container {
  width: 1140px;
}

a {
  color: var(--warning);
}

.d-flex-allctr {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.bg-transparent {
  background:rgba(0,0,0,.5) !important;
}

.bg-warning {
  background-color: var(--warning) !important;
}

.bg-danger {
  background-color: var(--danger) !important;
}

.bg-primary {
  background-color: var(--primary) !important;
}

.text-warning {
  color: var(--warning) !important;
}

.text-danger {
  color: var(--danger) !important;
}

.text-primary {
  color: var(--primary) !important;
}

.bgcontainer {
  background: rgba(0,0,0,0.8);
  padding: 2rem 3rem;
}

.bg-gradient2 {
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.logo {
  width: 150px;
}

.font-custom {
  font-family: var(--font1);
}

.nav-link {
  font-size: 1.2rem;
}

.ball {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  box-sizing: border-box;
  background: -webkit-radial-gradient(90% 12%, ellipse, white, #fdc300, #fdc300);
  background: -moz-radial-gradient(90% 12%, ellipse, white, #fdc300, #fdc300);
  background: -o-radial-gradient(90% 12%, ellipse, white, #fdc300, #fdc300);
  background: -ms-radial-gradient(90% 12%, ellipse, white, #fdc300, #fdc300);
  background: radial-gradient(90% 12%, ellipse, white, #fdc300, #fdc300);
}

.ball-middle {
   width: 45px;
   height: 45px;
   border:3px solid #fff;
}

.ball-inner {
  width: 25px;
  height: 25px;
  background: #fff;
  border-radius: 50%;
  color: #000;
  font-weight: bold;
}