button {
    padding: 0;
    border: none;
    font: inherit;
    color: inherit;
    background-color: transparent;
    /* show a hand cursor on hover; some argue that we
    should keep the default arrow cursor for buttons */
    cursor: pointer;
  }

  /**
   * Button component
   */
  .btn {
    /* default for <button>, but needed for <a> */
    display: inline-block;
    text-align: center;
    text-decoration: none;

    /* create a small space when buttons wrap on 2 lines */
    margin: 2px 0;

    /* invisible border (will be colored on hover/focus) */
    border: solid 1px transparent;
    border-radius: 4px;

    /* button size comes from text + padding, avoid height */
    padding: 0.5em 1em;

    /* make sure colors have enough contrast! */
    color: #FFFFFF;
    background-color: #4467c3;
  }

  /* old-school "down" effect on clic + color tweak */
  .btn:active {
    transform: translateY(1px);
    filter: saturate(150%);
  }

  /* inverse colors on hover */
  .btn:hover {
      cursor: pointer;
    color: #4467c3;
    border-color: currentColor;
    background-color: white;
  }

  /* Firefox: remove the inner border shown on focus */
  .btn::-moz-focus-inner {
    border: none;
  }

  /* make sure we have a visible focus ring */
  .btn:focus {
    outline: none;
    /* box-shadow: 0 0 0 3px rgba(255, 105, 180, 0.5),
      0 0 0 1.5px rgba(255, 105, 180, 0.5); */
  }

  /* hide focus style if not from keyboard navigation */
  .js-focus-visible .btn:focus:not(.focus-visible) {
    box-shadow: none;
  }

  body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}

h2 {
    margin-top: 0;
}

table,
p {
    /* margin-left: 25px; */
}

td {
    padding-bottom: 15px;
    vertical-align: top;
}

td:first-child {
    padding-right: 15px;
}

.section:nth-child(odd) {
    background-color: #fff;
}

.section {
    border: none;
    padding: 20px 40px;
}

.section>* {
    /* max-width: 1200px; */
}

.imgavatar {
  border-radius: 50%;
  width: 150px;
}

.imgsponsor {
  width: 150px;
}

/* Special */

ul.special {
  list-style: none;
  padding-left: 0;
  cursor: default;
  position: relative;
  margin: -2em 0 4em -2em;
}

  ul.special li {
    -moz-transition: top .15s ease-in-out;
    -webkit-transition: top .15s ease-in-out;
    -ms-transition: top .15s ease-in-out;
    transition: top .15s ease-in-out;
    position: relative;
    display: inline-block;
    top: 0;
    padding: 2em 0 0 2em;
  }

    ul.special li a {
      display: block;
      outline: 0;
    }

      ul.special li a:before {
        -moz-transition: background-color .2s ease-in-out;
        -webkit-transition: background-color .2s ease-in-out;
        -ms-transition: background-color .2s ease-in-out;
        transition: background-color .2s ease-in-out;
        display: block;
        text-align: center;
        background: #c1cac5;
        border-radius: 100%;
        width: 2.25em;
        height: 2.25em;
        line-height: 2.175em;
        font-size: 5em;
        color: #fff;
      }

    ul.special li:hover {
      top: -1em;
    }

      ul.special li:hover a:before {
        background: #b9d2ce;
      }
.center-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.imgBanner {
  position: absolute;
  top: 0px;
  right: 0px;
}

/* Video Container for Youtube Responsive */
.video-container {
  position: relative;
  padding-bottom: 250px;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
  width:480px;
  height:250px;
	/* height:100%; */
}

.topperStyle {
  background-color: #343a40!important;
    color: white;
}

.circleImage {
  border-radius: 100%!important;
  padding: 10%
}
.centerAlign {
  text-align: center
}