/****************
 * Default HTML *
 ****************/

body {
  font-family: 'PT Sans';
}


a.link-blue,
a.link-blue:hover,
a.link-blue:active {
  color: rgb(0, 173, 187);
}

a.link-rose,
a.link-rose:hover,
a.link-rose:active {
  color: rgb(255, 62, 101);
}

a.link-white,
a.link-white:hover,
a.link-white:active {
  color: white;
}

a.link-discover,
a.link-discover:hover,
a.link-discover:active {
  font-size: 90%;
  color: white;
  background-color: #625a96 !important;
  padding: 0 3px 0 3px;
}



/***************************************************************/
/**************************** WRAPPER **************************/
/***************************************************************/

.wrapper-ghosts {
  background-image: url('/images/fond.jpg');
}

#wrapper {
  min-height: 400px;
}

.closed {
  background-color: rgb(0, 173, 187);
  padding: 10px 0 1px 0;
}

.corona {
  background-color: #e9426e;
  color: #fff;
}

.annonce {
  background-color: #625a96;
  color: #fff;
}

/***************************************************************/
/***************************** TITLE ***************************/
/***************************************************************/

.welcome-title {
  margin-top: 30px;
  margin-bottom: 20px;
  font-size: 190%;
}

.title-clutchers {
  margin-top: 30px;
}

.title-search {
  margin-top: 30px;
  margin-bottom: 20px;
}

.title-magazine {
  margin-top: 30px;
  margin-bottom: 20px;
}

/***************************************************************/
/***************************** COLORS **************************/
/***************************************************************/

.text-blue,
.text-blue:hover {
  color: rgb(0, 173, 187);
}

.text-rose,
.text-rose:hover {
  color: rgb(255, 62, 101);
}

.text-violet,
.text-violet:hover {
  color: #625a96;
}

.bc-black {
  background-color: black;
  padding: 0 5px 0 5px;
}

/***************************************************************/
/***************************** SEARCH **************************/
/***************************************************************/

.card-blue {
  border: none;
}

.search-background-blue {
  width: 100%;
  padding: 20px 0 20px 0;
  background: rgb(0, 173, 187);
}

input[type="checkbox"] {
  transform: scale(2, 2);
}

.display-7 {
  font-size: 130%;
}

.display-8 {
  font-size: 110%;
}

#search_form_submit {
  line-height: 0.5;
}

@media (max-width: 768px) {

  .search-background-blue .form-row:nth-of-type(2) .col-md-9 {
    margin-top: 1rem;
  }
}

/***************************************************************/
/**************************** Events ***************************/
/***************************************************************/

/* .card-event
{
  background-color: #F5F4F4;
  font-size: 90%;
}

.card-event a.h3, .card-event a:hover.h3, .card-event a.h6, .card-event a:hover.h5, .card-event a:hover.h6
{
  color: #212529;
  text-decoration: #212529;
}

.card-event-location__link
{
  color:rgb(255, 62, 101);
  font-size: 110%;
  margin: 10px 0px 10px 0px;
}

.card-event .card-img-top
{
  max-height: 277px;
  object-fit: cover;
}

.card-event .card-title
{
  font-family: 'Poppins';
}

.card-body {

} */

/***************************************************************/
/************************** Educations *************************/
/***************************************************************/

.badge-education,
.badge-education a {
  background-color: #625a96;
  color: white;
}

.card-education,
.card-education-clutched {
  background-color: #F5F4F4;
  min-height: 160px;
  font-size: 80%;
  margin-bottom: 10px;
  border: none;
}

.card-education .badge-education,
.card-education .badge .fa,
.card-education-clutched .badge-education,
.card-education-clutched .badge .fa {
  color: #FFF;
}

.card-education .badge,
.card-education-clutched .badge {
  font-size: 90%;
}

.card-education h4 a {
  color: rgb(0, 173, 187);
}


.card-education-clutched h4 a {
  color: #625a96;
}

.card-education h5,
.card-education-clutched h5 {
  font-size: 120%;
}

.text-education {
  color: #625a96;
}

/***************************************************************/
/**************************** LOCATION *************************/
/***************************************************************/

.badge-location,
.badge-location a {
  background-color: rgb(255, 62, 101);
  color: white;
}

.card-location,
.card-location-clutched {
  background-color: #F5F4F4;
  min-height: 200px;
  font-size: 80%;
  margin-bottom: 10px;
  border: none;
}

.card-location .badge-location,
.card-location .badge .fa,
.card-location-clutched .badge-location,
.card-location-clutched .badge .fa {
  color: #FFF;
}

.card-location .badge,
.card-location-clutched .badge {
  font-size: 90%;
}

.card-location h4 a {
  color: rgb(0, 173, 187);
}

.card-location-clutched h4 a {
  color: rgb(255, 62, 101);
}

.card-location h5,
.card-location-clutched h5 {
  font-size: 120%;
}

/***************************************************************/
/************************* Magazines ***************************/
/***************************************************************/

.col-magazine a {
  color: rgb(0, 173, 187);
}

.col-magazine img {
  max-height: 229px;
}

/***************************************************************/
/***************************** HEADER **************************/
/***************************************************************/

.welcome-header {
  padding-bottom: 40px;
  width: 100%;
  min-height: 200px;
  background: url('/images/clutch-banner-fantome.jpg') no-repeat;
  background-size: cover;
  background-position: top center;
  color: #FFF;
}

.welcome-header h1 {
  margin-top: 180px;
  margin-bottom: 80px;
  display: block;
  text-align: center;
}

.welcome-header .btn {
  font-size: 32px;
  padding-left: 40px;
  padding-right: 40px;
}

.notfound-header {
  margin-bottom: -40px;
  padding-bottom: 40px;
  width: 100%;
  min-height: calc(100vh - 60px);
  background: url('/images/clutch-fond-beton5.jpg') no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  color: #FFF;
  text-align: center;
  display: block;
}

.clutchfactory-separator {
  margin-top: 40px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  width: 100%;
  background: #CCC;
  color: #FFF;
  text-align: center;
  display: block;
}

.contact-header {
  padding-bottom: 40px;
  width: 100%;
  height: 284px;
  background: url('/images/clutch-fond-beton4.jpg') no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  color: #FFF;
}

.clutchfactory-header {
  padding-bottom: 40px;
  width: 100%;
  height: 284px;
  background: url('/images/clutch-fond-beton3.jpg') no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  color: #FFF;
}


/***************************************************************/

.form-group .invalid-feedback {
  display: block;
}

.clutchfactory-grey {
  width: 100%;
  margin-top: -21px;
  margin-bottom: -40px;
  padding: 0 60px 40px 60px;
  background: #EEE;
}

.event-background-grey {
  width: 100%;
  padding: 20px 0 20px 0;
  background: #EEE;
}

.event-background-blue {
  width: 100%;
  padding: 20px 0 20px 0;
  background: rgb(0, 173, 187);
}

.notfound-header h1 {
  margin-top: 18%;
  margin-bottom: 80px;
  display: block;
}

.clutchfactory-header h1,
.contact-header h1 {
  margin-top: 110px;
}

/***************************************************************/
/**************************** HEADERS **************************/
/***************************************************************/

.header-main,
.header-main a {
  color: rgb(0, 173, 187);
  margin: 30px 0px 20px 0px;
}



h1.text-primary,
.text-primary,
.text-primary:hover,
.text-primary a,
.text-primary a:hover {
  color: rgb(0, 173, 187);
}

.text-location,
.text-location:hover,
.text-location a,
.text-location a:hover {
  color: rgb(255, 62, 101);
}

.text-dark,
.text-dark a,
.text-dark a:hover {
  color: rgb(43, 47, 49);
}

.text-black,
.text-black a,
.text-black a:hover,
.text-black i,
.text-black i:hover {
  color: #000;
}

.text-violet {
  color: #6a5e9c;
}

.text-grey {
  color: grey;
}

.text-short {
  font-size: 130%;
}

/***************************************************************/
/*********************** BUTTONs AND LABELS ********************/
/***************************************************************/

.btn-primary {
  background-color: rgb(0, 173, 187);
  border-color: rgb(0, 173, 187);
  color: #FFF;
}

.btn-black {
  background-color: black;
  border-color: black;
  color: #FFF;
}

.badge-dark {
  background-color: #1B1B19;
}

.badge-success {
  background-color: #6A5E9C;
}

.badge-primary {
  background-color: rgb(0, 173, 187);
  max-width: 150px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.badge-default {
  background-color: #9B9393;
}

.card {
  background-color: #F5F4F4;
}

.card-rose {
  background-color: rgb(255, 62, 101);
  color: #FFF;
}

.card-violet {
  background-color: #6A5E9C;
  color: #FFF;
}

.card-blue {
  background-color: rgb(0, 173, 187);
  color: #FFF;
}

.card-bluegreen {
  background-color: #65b3c0;
  color: #000;
}


.card-dark {
  background-color: rgb(43, 47, 49);
  color: #FFF;
}

.card-dark a {
  color: rgb(0, 173, 187);
}

.card-dark a.btn {
  color: #FFF;
}



/***************************************************************/
/***************************** FROMS ***************************/
/***************************************************************/

.btn-location {
  background-color: var(--yellow);
  color: var(--grey);
}

.btn-violet {
  background-color: #6A5E9C;
}

.caption-custom {
  background-color: #FFF;
  color: #000;
  width: 215px;
  display: block;
  margin: auto;
}



.card .fa-4x {
  color: #000;
}



.footer-small {
  font-size: 80%;
}

.img-ad {
  width: 80%;
  display: block;
  margin: auto;
}

h2.bordered {
  border-bottom: 1px #000 solid;
}

.badge-advanced {
  font-size: 150%;
}

.badge {
  margin-right: 3px;
}

.badge a {
  color: white;
}


.row-bordered {
  border-top: 1px solid #FFF;
  padding-top: 20px;
  margin-top: 20px;
}

.form-group-bordered {
  border-top: 1px solid #FFF;
  padding-top: 10px;
}

.alert-info {
  background-color: rgb(0, 173, 187);
  border-color: rgb(0, 173, 187);
}




/************************ NAVBAR ************************/

.ext-link,
a.ext-link {
  color: #000;
}

a.ext-link:hover {
  color: rgb(0, 173, 187);
}

/* ------------------------ Margin ------------------------ */

.margin-40-top {
  margin-top: 40px;
}

.margin-40-bottom {
  margin-bottom: 40px;
}

.margin-40-left {
  margin-left: 40px;
}

.margin-20-bottom {
  margin-bottom: 20px;
}

.margin-20-top {
  margin-top: 20px;
}

.margin-10-top {
  margin-top: 10px;
}

.margin-10-bottom {
  margin-bottom: 10px;
}

.no-margin-top {
  margin-top: 0;
}

.no-margin-bottom {
  margin-bottom: 0;
}


.text-white {
  color: white;
}

/***************************************************************/
/***************************** CARDS ***************************/
/***************************************************************/

.card-clutched {
  background-color: #7764a0;
}

.card-clutchorama {
  background-image: url('/images/clutchorama.png');
  background-position: calc(100% - 5px) 5px;
  background-repeat: no-repeat;
  background-color: rgb(0, 173, 187);
  background-size: 15px;
}

.card-clutchorama .media .media-body .media-heading a,
.card-clutchorama-welcome .media .media-body .media-heading a,
.card-clutchorama .media .media-body time {
  color: white;
}

.media-body h4 {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.media-body h5 {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.card-boost-low,
.card-boost-medium,
.card-boost-high {
  background-color: rgba(101, 179, 192, 0.3);
}

.form-check-input {
  width: 0.60em;
}

.contact-info {
  padding-top: 40px;
}