html {
  scroll-behavior: smooth;
}

body {
  font-family: "Muli", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  background-color: #343a40;
}

.header {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 20%;
}

.content {
  margin-left: 20%;
}
@media (max-width: 575px) {
  .content {
    margin-left: 0;
  }
}

.noresize {
  resize: none;
}

.avatar img {
  max-width: 100px;
  max-height: 100px;
}
@media screen and (max-device-width: 576px) {
  .avatar img {
    max-width: 50px;
  }
}

/* typography */
.text-justify {
  text-align: justify;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  margin-bottom: 0.5rem;
  font-family: "Saira Extra Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 700;
  line-height: 1.2;
}

h1,
.h1 {
  font-size: 6rem;
}
@media (max-width: 768px) {
  h1,
.h1 {
    font-size: 4rem;
  }
}
@media (max-width: 576px) {
  h1,
.h1 {
    font-size: 3rem;
  }
}

h2,
.h2 {
  font-size: 3.5rem;
}
@media (max-width: 768px) {
  h2,
.h2 {
    font-size: 2.5rem;
  }
}
@media (max-width: 576px) {
  h2,
.h2 {
    font-size: 2rem;
  }
}

h3,
.h3 {
  font-size: 2rem;
}
@media (max-width: 768px) {
  h3,
.h3 {
    font-size: 2.1rem;
  }
}
@media (max-width: 576px) {
  h3,
.h3 {
    font-size: 1.8rem;
  }
}

h4,
.h4 {
  font-size: 1.5rem;
}

h5,
.h5 {
  font-size: 1.25rem;
}
@media screen and (max-device-width: 767.98px) {
  h5,
.h5 {
    font-size: 0.8rem;
  }
}

h6,
.h6 {
  font-size: 1rem;
}

h7,
.h7 {
  font-size: 0.865rem;
  line-height: 1.2;
}
@media screen and (max-device-width: 767.98px) {
  h7,
.h7 {
    font-size: 0.65rem;
  }
}

.ls02 {
  letter-spacing: 0.2rem;
}

.ls04 {
  letter-spacing: 0.4rem;
}

.text-black {
  color: #000;
}

/* Background colors */
.bg-gray {
  background-color: #ccc;
}

.bg-gray300 {
  background-color: #dee2e6;
}

.color--bg-light07 {
  background-color: rgba(255, 255, 255, 0.7);
}

.bg-white {
  background-color: #ffffff;
}

.bg-blue {
  background-color: #9aedff;
}

.bg-grey {
  background-color: #aaaaaa;
}

.bg-yellow {
  background-color: #ffffac;
}

.bg-red {
  background-color: #ffac9a;
}

.bg-pink {
  background-color: #f2b0ec;
}

.bg-green {
  background-color: #b0f2b6;
}

.bg-purple {
  background-color: #acacff;
}

.accordion-button:hover {
  background-color: rgba(13, 110, 253, 0.1);
}

.accueil {
  font-size: 0.8rem;
}
.accueil img {
  -webkit-transform: scale(0.97);
  transform: scale(0.97);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  opacity: 1;
}
.accueil img:hover {
  cursor: zoom-in;
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 0.8;
}
@media screen and (max-device-width: 1200px) {
  .accueil ul {
    font-size: 0.7rem;
  }
}
@media screen and (max-device-width: 991.98px) {
  .accueil ul {
    font-size: 0.9rem;
  }
}
@media screen and (max-device-width: 767.98px) {
  .accueil ul {
    font-size: 0.7rem;
  }
}

.btnAnim {
  transition: all 0.1s linear;
}
.btnAnim:active {
  transform: translateY(3px);
}

.btn-group-xs > .btn,
.btn-xs {
  padding: 0.25rem 0.25rem;
  font-size: 0.875rem;
  line-height: 0.5;
  border-radius: 0.2rem;
}

.card-header__bg {
  background: linear-gradient(-45deg, #6c757d, #FFFFFF, #6c757d, #FFFFFF, #6c757d);
  background-size: 300% 100%;
  animation: gradient 20s ease infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.carousel-indicators li {
  background-color: #343a40;
}

.copied1 {
  opacity: 0;
  color: #0d6efd;
  font-weight: 700;
}

.copied2 {
  opacity: 0;
  color: #0d6efd;
  font-weight: 700;
}

.floating-btn {
  position: fixed;
  bottom: 6%;
  right: 10px;
  width: 60px;
  height: 60px;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  background: linear-gradient(45deg, #ffc1c1, #ff0000);
  z-index: 3000;
}
@media screen and (max-device-width: 767.98px) {
  .floating-btn {
    width: 30px;
    height: 30px;
  }
}

.introduction {
  background-image: url("/public/images/intro.jpg");
}
.introduction .intro__title1 {
  font-family: "Saira Extra Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 2.5rem;
  letter-spacing: 0.3rem;
}
@media screen and (max-device-width: 1200px) {
  .introduction .intro__title1 {
    font-size: 2.2rem;
  }
}
@media screen and (max-device-width: 767.98px) {
  .introduction .intro__title1 {
    font-size: 2rem;
  }
}
@media (max-width: 576px) {
  .introduction .intro__title1 {
    font-size: 1.8rem;
  }
}
.introduction .intro__title2 {
  font-family: "Saira Extra Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1.8rem;
  letter-spacing: 0.1rem;
}
@media screen and (max-device-width: 1200px) {
  .introduction .intro__title2 {
    font-size: 1.6em;
  }
}
@media screen and (max-device-width: 767.98px) {
  .introduction .intro__title2 {
    font-size: 1.2rem;
  }
}
@media (max-width: 576px) {
  .introduction .intro__title2 {
    font-size: 1rem;
  }
}

.matchgala {
  background-image: url("/public/images/matchgala.png");
  background-position: center;
  background-repeat: no-repeat;
}

.photoAnim {
  color: #f8f9fa;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.photoAnim:hover {
  cursor: pointer;
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

section.resume-section {
  display: flex;
}
section.resume-section .resume-section-content {
  width: 100%;
}
@media (min-width: 768px) {
  section.resume-section {
    min-height: 100vh;
  }
}
@media (min-width: 992px) {
  section.resume-section {
    padding-left: 3rem;
    padding-right: 3rem;
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

.name {
  opacity: 0.2;
}

.rotating:hover {
  -webkit-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}
.rotating:hover + .name {
  opacity: 1;
  transition: all ease-in 0.5s;
}

@-webkit-keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* ****************************** sidenav ****************************** */
.sidenav {
  z-index: 1000;
  height: 100%;
  width: 0;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #000;
  overflow-x: hidden;
  transition: 0.3s;
  padding-top: 60px;
}
.sidenav a {
  padding: 0 8px 0 32px;
  text-decoration: none;
  font-size: 1rem;
  color: #f8f9fa;
  display: block;
  transition: 0.3s;
}
.sidenav a:hover {
  color: #bbb;
}
@media screen and (max-device-width: 767.98px) {
  .sidenav a {
    font-size: 0.9rem;
  }
}
.sidenav ul {
  list-style-type: none;
  margin: 0;
}
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
.sidenav hr {
  margin: 10px 32px;
  border: 0;
  border-top: 1px solid #bbb;
}
@media screen and (max-device-width: 767.98px) {
  .sidenav {
    padding-top: 15px;
  }
}

.social-icons .social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3.5rem;
  width: 3.5rem;
  background-color: #495057;
  color: #fff;
  border-radius: 100%;
  font-size: 1.5rem;
  margin-right: 1.5rem;
}

.social-icons .social-icon:last-child {
  margin-right: 0;
}

.social-icons .social-icon:hover {
  background-color: #007bff;
}

@media screen and (max-device-width: 1200px) {
  .standard {
    font-size: 0.8rem;
  }
}
@media screen and (max-device-width: 991.98px) {
  .standard {
    font-size: 0.6rem;
  }
}
@media screen and (max-device-width: 576px) {
  .standard {
    font-size: 0.5rem;
  }
}

.textAnim {
  background-color: #f8f9fa;
  transition: all 0.3s linear;
}
.textAnim:hover {
  background-color: rgba(13, 110, 253, 0.1);
}

#header {
  background: linear-gradient(to bottom, black, #212529);
}
#header .header__title1 {
  font-size: 2.1rem;
  letter-spacing: 0.2rem;
}
@media screen and (max-device-width: 1200px) {
  #header .header__title1 {
    font-size: 1.6rem;
  }
}
@media screen and (max-device-width: 767.98px) {
  #header .header__title1 {
    font-size: 1.2rem;
  }
}
@media (max-width: 576px) {
  #header .header__title1 {
    font-size: 1rem;
  }
}
#header .header__title2 {
  font-size: 1.4rem;
  letter-spacing: 0.1rem;
}
@media screen and (max-device-width: 1200px) {
  #header .header__title2 {
    font-size: 1rem;
  }
}
@media screen and (max-device-width: 767.98px) {
  #header .header__title2 {
    font-size: 0.8rem;
  }
}
@media (max-width: 576px) {
  #header .header__title2 {
    font-size: 0.6rem;
  }
}

#footer {
  background: linear-gradient(to top, black, #212529);
}

#base_height {
  min-height: 100vh;
}

.calendar_table {
  width: 100%;
  height: 100vh;
  background-color: #f8f9fa;
}
.calendar_table td {
  padding: 5px;
  border: 1px solid #000;
  vertical-align: top;
  width: 14.29%;
  height: 16%;
  transition-property: background-color;
  transition-duration: 0.25s;
}
.calendar_table td:hover {
  background-color: #aaa;
}
@media screen and (max-device-width: 991.98px) {
  .calendar_table td {
    padding: 5px;
  }
}
@media screen and (max-device-width: 767.98px) {
  .calendar_table td {
    padding: 2px;
  }
}
.calendar_table .calendar_table--6weeks td {
  height: 16.66%;
}

.calendar_weekday {
  font-size: 0.8em;
}
@media screen and (max-device-width: 991.98px) {
  .calendar_weekday {
    font-size: 0.7em;
  }
}
@media screen and (max-device-width: 767.98px) {
  .calendar_weekday {
    font-size: 0.4em;
  }
}

.calendar_day {
  font-size: 1em;
  color: #000000;
}
@media screen and (max-device-width: 767.98px) {
  .calendar_day {
    font-size: 0.7em;
  }
}

.calendar_othermonth .calendar_day {
  opacity: 0.4;
}

.calendar_event {
  cursor: help;
  font-size: 0.6em;
}
.calendar_event a {
  color: #000;
  text-decoration: none;
}
@media screen and (max-device-width: 991.98px) {
  .calendar_event {
    font-size: 0.5em;
  }
}
@media screen and (max-device-width: 767.98px) {
  .calendar_event {
    font-size: 0.3em;
  }
}

.calendar_today {
  background-color: #bbb;
  color: #fff;
}

@media screen and (max-device-width: 767.98px) {
  #calendar h5 {
    font-size: 1em;
  }
}

@media screen and (max-device-width: 767.98px) {
  .smNoDisplay {
    display: none;
  }
}

#contact {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/public/images/saintpabu01.jpg");
}

#contact iframe {
  width: 100%;
  height: 470px;
}

.events {
  min-height: calc(100vh - 200px);
  font-size: 1em;
}
.events td {
  border: none;
}
@media screen and (max-device-width: 991.98px) {
  .events {
    font-size: 0.9em;
  }
}
@media screen and (max-device-width: 767.98px) {
  .events {
    font-size: 0.6em;
  }
}

#guestbook {
  background-image: url("/public/images/myguestbook_background.jpg");
  min-height: 100vh;
}
#guestbook .card:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

#index {
  background-color: rgba(255, 255, 255, 0.2);
  min-height: 100vh;
}

#myarticle {
  background-color: rgba(12, 79, 70, 0.8);
  min-height: 100vh;
}

#myastro {
  background-color: rgba(25, 25, 112, 0.3);
  min-height: 100vh;
}

#mybetsse .nav-link {
  color: #f8f9fa;
}
#mybetsse .nav-link:hover {
  color: #6c757d;
}
#mybetsse .logo {
  width: 20px;
  height: auto;
}
#mybetsse .logo2 {
  width: 40px;
  height: auto;
}
@media screen and (max-device-width: 1200px) {
  #mybetsse {
    font-size: 90%;
  }
}
@media screen and (max-device-width: 991.98px) {
  #mybetsse {
    font-size: 70%;
  }
}
@media screen and (max-device-width: 767.98px) {
  #mybetsse {
    font-size: 0.7rem;
  }
}
@media screen and (max-device-width: 767.98px) {
  #mybetsse .hidden-sm {
    display: none;
  }
}
@media screen and (max-device-width: 767.98px) {
  #mybetsse h4 {
    font-size: 1.2rem;
  }
}
@media screen and (max-device-width: 576px) {
  #mybetsse h4 {
    font-size: 1rem;
  }
}
@media screen and (max-device-width: 576px) {
  #mybetsse h6 {
    font-size: 0.75rem;
  }
}
@media screen and (max-device-width: 767.98px) {
  #mybetsse .btn-team {
    font-size: 0.7rem;
  }
}
@media screen and (max-device-width: 576px) {
  #mybetsse .btn-team {
    font-size: 0.35rem;
  }
}
#mybetsse .btn-menu:hover {
  color: #ffc107;
}
#mybetsse .bg-hover:hover {
  background: linear-gradient(0.25turn, #63ffff, #f0ffff, #63ffff);
}
#mybetsse .bg-stripped {
  background-color: rgba(0, 0, 0, 0.05);
}

#logoImg,
#logoLadder {
  width: 64px;
  height: auto;
}

#mybetsseResults .nav-link {
  color: #f8f9fa;
}
#mybetsseResults .nav-link:hover {
  color: #6c757d;
}
#mybetsseResults .logo {
  width: 20px;
  height: auto;
}
@media screen and (max-device-width: 1200px) {
  #mybetsseResults {
    font-size: 90%;
  }
}
@media screen and (max-device-width: 991.98px) {
  #mybetsseResults {
    font-size: 65%;
  }
}
@media screen and (max-device-width: 767.98px) {
  #mybetsseResults {
    font-size: 0.65rem;
  }
}
@media screen and (max-device-width: 576px) {
  #mybetsseResults {
    font-size: 0.4rem;
  }
}
@media screen and (max-device-width: 767.98px) {
  #mybetsseResults .hidden-sm {
    display: none;
  }
}
@media screen and (max-device-width: 767.98px) {
  #mybetsseResults h4 {
    font-size: 1.2rem;
  }
}
@media screen and (max-device-width: 576px) {
  #mybetsseResults h4 {
    font-size: 1rem;
  }
}
@media screen and (max-device-width: 576px) {
  #mybetsseResults h6 {
    font-size: 0.75rem;
  }
}
@media screen and (max-device-width: 767.98px) {
  #mybetsseResults .btn-team {
    font-size: 0.7rem;
  }
}
@media screen and (max-device-width: 576px) {
  #mybetsseResults .btn-team {
    font-size: 0.35rem;
  }
}
#mybetsseResults .btn-menu:hover {
  color: #ffc107;
}
#mybetsseResults .bg-hover:hover {
  background: linear-gradient(0.25turn, #63ffff, #f0ffff, #63ffff);
}
#mybetsseResults .bg-stripped {
  background-color: rgba(0, 0, 0, 0.05);
}

#logoImg,
#logoLadder {
  width: 64px;
  height: auto;
}

#myforum,
#myforumManagement {
  font-size: 0.8rem;
}
@media screen and (max-device-width: 767.98px) {
  #myforum .hidden-sm,
#myforumManagement .hidden-sm {
    display: none;
  }
}
@media screen and (max-device-width: 1200px) {
  #myforum,
#myforumManagement {
    font-size: 0.7rem;
  }
}
@media screen and (max-device-width: 991.98px) {
  #myforum,
#myforumManagement {
    font-size: 0.6rem;
  }
}
@media screen and (max-device-width: 767.98px) {
  #myforum,
#myforumManagement {
    font-size: 0.5rem;
  }
}
@media screen and (max-device-width: 576px) {
  #myforum,
#myforumManagement {
    font-size: 0.4rem;
  }
}
#myforum .wysibb .wysibb-text,
#myforumManagement .wysibb .wysibb-text {
  min-height: 350px !important;
}
#myforum .wysibb-text-editor,
#myforumManagement .wysibb-text-editor {
  min-height: 350px !important;
}
#myforum blockquote,
#myforumManagement blockquote {
  background-color: rgba(0, 255, 0, 0.1);
  padding: 0 0 0 5px;
  border-left: 5px solid #888;
  margin: 0;
}
#myforum aside:hover,
#myforumManagement aside:hover {
  background-color: rgba(255, 0, 0, 0.05);
}

#myforumAccordion .accordion-button {
  font-size: 0.8rem;
}

.stripped-subcategorie aside:nth-child(4n+1),
.stripped-topic aside:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.05);
}

.signature {
  font-size: 80%;
}

#mynotifications .clipClass {
  clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 15% 80%, 10% 100%, 5% 80%, 0% 80%);
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 15% 80%, 10% 100%, 5% 80%, 0% 80%);
}
@media screen and (max-device-width: 1200px) {
  #mynotifications {
    font-size: 0.7rem;
  }
}
@media screen and (max-device-width: 991.98px) {
  #mynotifications {
    font-size: 0.6rem;
  }
}
@media screen and (max-device-width: 767.98px) {
  #mynotifications {
    font-size: 0.5rem;
  }
}
@media screen and (max-device-width: 576px) {
  #mynotifications {
    font-size: 0.4rem;
  }
}

#mypictures {
  background-color: rgba(255, 255, 255, 0.2);
  min-height: 100vh;
}
#mypictures .card:hover {
  background-color: rgba(255, 255, 255, 0.8);
}
@media screen and (max-device-width: 1200px) {
  #mypictures {
    font-size: 1rem;
  }
}
@media screen and (max-device-width: 991.98px) {
  #mypictures {
    font-size: 0.9rem;
  }
}
@media screen and (max-device-width: 767.98px) {
  #mypictures {
    font-size: 0.8rem;
  }
}
@media screen and (max-device-width: 576px) {
  #mypictures {
    font-size: 0.6rem;
  }
}

.portfolio-item {
  display: block;
  position: relative;
  overflow: hidden;
  max-width: 530px;
  margin: auto auto 1rem;
}
@media (min-width: 992px) {
  .portfolio-item {
    max-width: none;
    margin: 0;
  }
}
@media (min-width: 992px) {
  .portfolio-item:hover .caption {
    background-color: rgba(29, 128, 159, 0.9);
    -webkit-clip-path: inset(2rem);
    clip-path: inset(2rem);
  }
}
@media (min-width: 992px) {
  .portfolio-item:hover img {
    -webkit-clip-path: inset(2rem);
    clip-path: inset(2rem);
  }
}
.portfolio-item .caption {
  display: flex;
  height: 100%;
  width: 100%;
  background-color: rgba(33, 37, 41, 0.4);
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
}
@media (min-width: 992px) {
  .portfolio-item .caption {
    transition: background-color 0.7s, -webkit-clip-path 0.25s ease-out;
    transition: clip-path 0.25s ease-out, background-color 0.7s;
    transition: clip-path 0.25s ease-out, background-color 0.7s, -webkit-clip-path 0.25s ease-out;
    -webkit-clip-path: inset(0px);
    clip-path: inset(0px);
  }
}
.portfolio-item .caption .caption-content {
  color: #f8f9fa;
  margin: auto 2rem 2rem;
}
@media (min-width: 992px) {
  .portfolio-item .caption .caption-content {
    transition: opacity 0.25s;
    margin-left: 5rem;
    margin-right: 5rem;
    margin-bottom: 5rem;
  }
}
.portfolio-item .caption .caption-content p {
  font-weight: 300;
  font-size: 1rem;
}
@media (min-width: 992px) {
  .portfolio-item img {
    transition: -webkit-clip-path 0.25s ease-out;
    transition: clip-path 0.25s ease-out;
    transition: clip-path 0.25s ease-out, -webkit-clip-path 0.25s ease-out;
    -webkit-clip-path: inset(-1px);
    clip-path: inset(-1px);
  }
}

/*# sourceMappingURL=main.css.map */