font-family: 'Permanent Marker', cursive;

html {
  font-family: "Rubik", sans-serif;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}
body {
  font-family: "Rubik", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 19px;
  font-weight: 300;
  padding-top: 50px;
  color: #204056;
  background: rgba(0,0,0,0.06);
}

/* PAGE HEADER & NAV */

header {
  height: 100px;

}
.navbar-inverse {
  background-color: #FFD614;
  border-color: #FFD614;
}
.navbar-inverse .navbar-brand {
  color: #D3139C;
}
.navbar-inverse .navbar-nav > li > a {
  color: #D3139C;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
  color: #D3139C;
  background-color: transparent;
}

.btn-primary {
  color: #fff;
  background-color: #d3139c;
  border-color: #d3139c;
  font-size: 18px;	
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  color: #fff;
  background-color: #d3139c;
  border-color: #d3139c;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-image: none;
}


/* RS-PLUGIN  */
.tp-banner-container {
  width:100%;
  position:relative;
  padding:0;
}
.tp-banner {
  width:100%;
  position:relative;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: 'Permanent Marker', cursive;
  font-weight: normal;
  line-height: 1.1;
  color: inherit;
}
.wrapper {
  min-height: 100%;
  margin: 0 auto -360px;
}
.push {
  min-height: 300px;
}
.footer {
  padding-top: 5px;
  padding-bottom: 5px;
  min-height: 200px;
  background-color: rgb(211,19,156);
  background-color: #d3139c;
  color: #fff;
}

.footer a, .footer a:hover {
  color: rgb(255,214,20);
  color: #ffd614;
}
/* GENERAL */
.spacer {
  height: 60px;
}
.withMargin {
  margin-bottom: 60px;
}
.lightGrey {
  background-color: rgb(240,240,240);
}
.violet-bg {
  background-color: rgb(211,19,156);
  color: #fff;
}
.black {
  background-color: rgb(0,0,0);
}
.green {
  color: rgb(94,152,56);
}
.red {
  color: rgb(132,15,0);
}
.violet {
  color: rgb(211,19,156);
  color: #d3139c;
}
.jaune {
  color: rgb(255,214,20);
  color: #ffd614;
}
.white {
  color: rgb(255,255,255);
  color: #fff;
}
.uppercase {
  text-transform: uppercase;
}

.jumbotron-violet {
  color: #ffd614;
  background-color: #d3139c;
  container-type: inline-size;
}
.jumbotron-violet h1 {
  color: #ffd614;
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 5cqw;
}
.jumbotron-texte {
  padding-left:15px;
}
.jumbotron-violet img {
  width:70px;
}
@media screen and (min-width: 768px) {
  .jumbotron-violet img {
    width:90px;
  }  
}

.inner{padding-top:120px;padding-bottom:120px;}
.inner-md{padding-top:100px;padding-bottom:100px;}
.inner-sm{padding-top:80px;padding-bottom:80px;}
.inner-xs{padding-top:40px;padding-bottom:40px;}
.inner-xxs{padding-top:15px;padding-bottom:15px;}
.inner-top{padding-top:120px;}
.inner-top-md{padding-top:100px;}
.inner-top-sm{padding-top:80px;}
.inner-top-xs{padding-top:40px;}
.inner-bottom{padding-bottom:120px;}
.inner-bottom-md{padding-bottom:100px;}
.inner-bottom-sm{padding-bottom:80px;}
.inner-bottom-xs{padding-bottom:40px;}
.inner-left{padding-left:75px;}
.inner-left-md{padding-left:60px;}
.inner-left-sm{padding-left:45px;}
.inner-left-xs{padding-left:30px;}
.inner-right{padding-right:75px;}
.inner-right-md{padding-right:60px;}
.inner-right-sm{padding-right:45px;}
.inner-right-xs{padding-right:30px;}

/* Sponsors */
.minispacer {
  height: 15px;
}
.sponsors {
  padding-top: 5px;
  min-height: 250px;
  background-color: #FFD614;
}
.sponsor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  padding: 20px;
  width: 90%;
  height: auto;
  background-color: white;
  margin-left: auto;
  margin-right: auto;
}

/* Formulaires: Contact, Membre amis */

.col-centered{
    float: none;
    margin: 0 auto;
}
.contact-row{
	background-position-y: center; 
	background-position-x: center; 
	border-radius: 8px; 
}
.contact-backcolor{
	 background-color: rgba(100,100,100,0.45);  
}
.contact-desc{
  color: white;
  padding-top:15px;
  padding-bottom: 15px;
} 
.contact-form{
  border-radius: 8px;
  padding-top:15px;
  padding-bottom: 15px;
  color: white;
  label{
    text-align: left;
    font-weight: 300;
    }
  input, textarea, select, optgroup, option {
    font-weight: 500;
    color: black;
    }
}
.message {
	color: white;
	text-align: center;
}
.error {
	background-color: #ff5f5f;
}
.errors {
	color: #ff5f5f;
}

/* 02.11.2024/rc Eléments pour la nouvelle page d'accueil et le nouvel affichage des sponsors */

hr{  
  border: 0;
  height: 1px;
  width: 50%;
  position: relative;
  margin: 30px auto;
  /* Accueil */
  &.center-soc{
    background: #d3139c;
    &:before{
      content: ""; 
      display: inline-block;
      position: absolute;
      top: -12px;
      left: 50%;
      height: 25px;
      width: 32px;
      background: url('/assets/img/divers/Logo_32.png');
      margin: 0 0 0 -3px;
      font-size: 15px;
    }
  }
   /* Footer */
  &.center-footer{
    background: #fff;
    width: 100%;
    margin: 0 0 0 0;
  }	
  /* Sponsors */
  &.center-platine{
    background: #d3139c;
    width: 30%;
    &:before{
      content: "OR"; 
      align-items: center;
      display: inline-block;
      position: absolute;
      top: -10px;
      left: 40%;
      margin: 0 0 0 -3px;
      padding: 0 10px 0px 10px;
      font-size: 15px;
      font-weight: 700;
      background: #ffd614;
      color: #d3139c;
    }
  }
  &.center-gold{
    background: #d3139c;
    width: 30%;
    &:before{
      content: "ARGENT"; 
      display: inline-block;
      position: absolute;
      top: -10px;
      left: 45%;
      margin: 0 0 0 -3px;
      padding: 0 10px 0px 10px;
      font-size: 15px;
      font-weight: 700;
      background: #ffd614;
      color: #d3139c;
    }
  }
  &.center-silver{
    background: #d3139c;
    width: 30%;
    &:before{
      content: "BRONZE"; 
      display: inline-block;
      position: absolute;
      top: -10px;
      left: 40%;
      margin: 0 0 0 -3px;
      padding: 0 10px 0px 10px;
      font-size: 15px;
      font-weight: 700;
      background: #ffd614;
      color: #d3139c;
    }
  }  
  &.center-bronze{
    background: #d3139c;
    width: 30%;
    &:before{
      content: "BRONZE"; 
      display: inline-block;
      position: absolute;
      top: -10px;
      left: 40%;
      margin: 0 0 0 -3px;
      padding: 0 10px 0px 10px;
      font-size: 15px;
      font-weight: 700;
      background: #ffd614;
      color: #d3139c;
    }
  }    
}

/* 04.11.2018/rc 	Permet de forcer la version Mobile des menus (collapse) si la largeur de la fenêtre
					est inférieure à 818px (au lieu de 768px)
*/
/*
@media (max-width: 818px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
		top: 0;
		border-width: 0 0 1px;
	}
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
		margin-top: 7.5px;
	}
	.navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
  		display:block !important;
	}
}
*/
/* Empêche le menu de se mettre sur 2 lignes.
	Avec une taille de police standard, il a besoin de 800px, alors que le container est défini par défaut à 750px jusqu'à une taille d'écran de 992px.
	En dessous de 992px, réduction de la taille de la police du menu à 75%
*/
@media (min-width: 818px) {
  .container {
    width: 800px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
  .jumbotron-violet img {
    width:110px;
  }  	
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
@media (max-width: 992px) {
	.cMenus {
		font-size:75%;
	}
}