/****************
 * 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;
}

/**********
 * Footer *
 **********/

footer
{
  padding-top: 30px;
  padding-bottom: 30px;
  margin-top: 40px;
  background-color: #3e3f3a;
  color: #FFF;
}

footer a, footer a:active, footer a:focus, footer a:hover
{
  color: rgb(0, 173, 187);
}

/**********
 * Navbar *
 **********/

.navbar
{
  background-color: #000;
  border-color: #000;
  margin-bottom: 0px;
}

.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:active, .navbar-dark .navbar-nav .nav-link:focus
{
  color: rgb(0, 173, 187);
}

/***************************************************************/
/**************************** 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%;
}

/***************************************************************/
/**************************** 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';
}

/***************************************************************/
/************************** 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('/assets/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;
}

.team-header
{
  margin-bottom: -40px;
  width: 100%;
  min-height: 400px;
  background: #CCC;
  color: #FFF;
  text-align: center;
  display: block;
}

.team-header h2
{
  color: #333;
  padding-bottom: 40px;
}

.team-header img
{
  border-radius: 50%;
}

.team-header b, .team-header i
{
  color: #333;
}


/***************************************************************/
/**************************** 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: rgb(255, 62, 101);
  color: #FFF;
}

.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;
}