/*
 * Version: 2.1.3
 * File Description: Custom styling for JDC Website
 */

/* -----------------------------------------------------
               Navbar Colours
------------------------------------------------------- */
 .jdc-head {
  font-weight: 500 !important;
  font-family: 'Open Sans Condensed', sans-serif !important;
  font-size: 4rem !important;
  color: green !important;
}

.jdc-phrase {
  font-size: 2rem !important;
  font-family: 'Courgette', cursive !important;
  color: grey !important;
}

.nav-link-1:hover {
  color: white !important;
  background-color: #24a828 !important; /* Green */
}

.nav-link-2:hover {
  color: white !important;
  background-color: #008cc1 !important; /*Blue */
}

.nav-link-3:hover {
  color: white !important;
  background-color: #603f99 !important; /* Purple */
}

.nav-link-4:hover {
  color: white !important;
  background-color: #e11837 !important; /* Red */
}

.nav-link-5:hover {
  color: white !important;
  background-color: #f37021 !important; /* Orange */
}

.nav-link-6:hover {
  color: white !important;
  /* background-color: #e8b909 !important;*/ /* Yellow */
  background-color: #dedc54 !important;
}

.nav-link-7:hover {
  color: white !important;
  background-color: #ffa700  !important; /* Gold */
}

.header .navbar-nav li .nav-link {
 font-size: 14px !important;
}

/* -----------------------------------------------------
       Page Banners
-------------------------------------------------------- */
.banner.default-2-bg {
  min-height: 250px;
  padding-top: 60px;
  padding-bottom: 20px;
  background-color: #008cc1; /* Blue */
}

.banner.default-3-bg {
  min-height: 250px;
  padding-top: 60px;
  padding-bottom: 20px;
  background-color: #603f99; /* Purple */
}

.banner.default-4-bg {
  min-height: 250px;
  padding-top: 60px;
  padding-bottom: 20px;
  background-color: #e11837; /* Red */
}

.banner.default-5-bg {
  min-height: 250px;
  padding-top: 60px;
  padding-bottom: 20px;
  background-color: #f37021; /* Orange */
}

.banner.default-6-bg {
  min-height: 250px;
  padding-top: 60px;
  padding-bottom: 20px;
  background-color: #dedc54; /* Yellow */
}

.banner.default-7-bg {
  min-height: 250px;
  padding-top: 60px;
  padding-bottom: 20px;
  background-color: #ffa700 /* Gold */
}

/* -----------------------------------------------------
        Home Page Box hover
------------------------------------------------------- */
.circle-purple {
    border-radius: 100% !important;
    border-top-left-radius: 100%;
    border-top-right-radius: 100%;
    border-bottom-right-radius: 100%;
    border-bottom-left-radius: 100%;
    background-color: #603f99;
}

.circle-red {
  border-radius: 100% !important;
  border-top-left-radius: 100%;
  border-top-right-radius: 100%;
  border-bottom-right-radius: 100%;
  border-bottom-left-radius: 100%;
  background-color: #e11837;
}

.circle-orange {
  border-radius: 100% !important;
  border-top-left-radius: 100%;
  border-top-right-radius: 100%;
  border-bottom-right-radius: 100%;
  border-bottom-left-radius: 100%;
  background-color: #f37021;
}

.btn-purple {
  background-color: #603f99;
  color: #fff;
}

.btn-purple:hover {
  color: #fff;
}

.btn-purple:focus {
  box-shadow: 0 0 0 0.2rem rgba(96, 63, 153, 0.25);
}

.btn-red {
  background-color: #e11837;
  color: #fff;
}

.btn-pink {
  background-color: #ffa700;
  color: #fff;
}

.btn-red:hover,
.btn-yellow:hover,
.btn-pink:hover {
  color: #fff;
}

.btn-red:focus {
  box-shadow: 0 0 0 0.2rem rgba(225, 24, 55, 0.25);
}

.btn-orange {
  background-color: #f37021;
  color: #fff;
}

.btn-orange:focus {
  box-shadow: 0 0 0 0.2rem rgba(243, 112, 33, 0.25);
}

.btn-outline-orange:focus {
  color: #f37021;
  box-shadow: 0 0 0 0.2rem rgba(243, 112, 33, 0.25);
}

.btn-gold {
  background-color: #ffa700;
  color: #fff;
}

.btn-gold:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 167, 0, 0.25);
}

.btn-outline-gold:focus {
  color: #ffa700;
  box-shadow: 0 0 0 0.2rem rgba(255, 167, 0, 0.25);
}


.btn-yellow {
  background-color: #dedc54;/* #e8b909;*/
  color: #fff;
}

.btn-yellow:focus {
  box-shadow: 0 0 0 0.2rem rgba(232, 185, 9, 0.25);
}

.icon-white {
  color: #fff;
}

.hc-shadow-purple h3{
  color: #603f99;         /* Purple */
}

.hc-shadow-red h3 {
  color: #e11837;
}

.hc-shadow-orange h3 {
  color: #f37021;
}

.hc-shadow-purple .separator {
  background: linear-gradient(to right, transparent 0%, rgba(96, 63, 153, 0.09) 35%, rgba(96, 63, 153, 0.09) 70%, transparent 100%);
  background-color: rgba(96, 63, 153, 0);
  background-image: linear-gradient(to right, transparent 0%, rgba(96, 63, 153, 0.09) 35%, rgba(96, 63, 153, 0.09) 70%, transparent 100%);
}

.hc-shadow-purple:hover .separator:after,
.hc-shadow-red:hover .separator:after {
  background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.09) 35%, rgba(255, 255, 255, 0.09) 70%, transparent 100%);
  background-color: rgba(255, 255, 255, 0);
  background-image: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.09) 35%, rgba(255, 255, 255, 0.09) 70%, transparent 100%);
}

.hc-shadow-purple:hover {
  background-color: #603f99;
  color: #fff;
}

.hc-shadow-purple:hover:before {
  background-color: #603f99;
  color: #fff;
}

.hc-shadow-red:hover {
  background-color: #e11837;
  color: #fff;
}

.hc-shadow-red:hover:before {
  background-color: #e11837;
  color: #fff;
}

.hc-shadow-orange:hover {
  background-color: #f37021;
  color: #fff;
}

.hc-shadow-orange:hover:before {
  background-color: #f37021;
  color: #fff;
}

.hc-shadow-purple:hover h3,
.hc-shadow-red:hover h3,
.hc-shadow-orange:hover h3 {
  color: #fff;
}

.hc-shadow-purple:hover .icon-white {
  color: #603f99;
}

.hc-shadow-red:hover .icon-white {
  color: #e11837;
}

.hc-shadow-orange:hover .icon-white {
  color: #f37021;
}

.hc-shadow-purple:hover .circle-purple,
.hc-shadow-red:hover .circle-red,
.hc-shadow-orange:hover .circle-orange {
  background-color: #fff;
}

.hc-shadow-purple:hover .btn-purple {
  background-color: #fff;
  color: #603f99;
}

.hc-shadow-red:hover .btn-red {
  background-color: #fff;
  color: #e11837;
}

.hc-shadow-orange:hover .btn-orange {
  background-color: #fff;
  color: #f37021;
}

/* -----------------------------------------------------
      About Page Slider
------------------------------------------------------- */

.u-clients__item {
  border-width: 1px 0 1px 1px;
  border-color: #e6e7e9;
  border-style: solid;
  padding: 3rem 0;
}

.u-clients__image {
  /* width: 7.5rem; */
  margin-left: auto;
  margin-right: auto;
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
  filter: gray;
  -webkit-filter: grayscale(100%);
  opacity: .3;
  transition: all 0.3s ease;
}

.u-clients__image:hover {
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0'/></filter></svg>#grayscale");
  -webkit-filter: grayscale(0%);
  opacity: 1;
}

/* -----------------------------------------------------
         Collections Page
------------------------------------------------------ */
.collect-well {
  background-color: white;
  border: 0px;
  -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px inset;
  margin-bottom: 0px;
  padding: 10px;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 0px;
    padding-left: 10px;
}

.btn-collect {
  background-color: #603f99;
  border-color: #603f99;
  margin: 0px;
}

.accordion .card-header:after {
  font-family: 'FontAwesome';
  /* content:  "\f068"; */
  content: "\f068";
  float: left;
  font-weight: 900;
}
.accordion .card-header.collapsed:after {
  /* symbol for "collapsed" panels */
  content: "\f067";
  font-weight: 900;
}

.row.no-gutter [class*='col-']:not(:first-child):not(:last-child) {
  padding-right:5px;
  padding-left:5px;
}
/* remove right padding from first column */
.row.no-gutter [class*='col-']:first-child {
  padding-left:0px;
  padding-right:5px;
}
/* remove left padding from first column */
.row.no-gutter [class*='col-']:last-child {
  padding-left:5px;
  padding-right:0px;
}

.btn-fill {
  width: 100%;
  white-space: normal;
}

[data-toggle="collapse"] .fa:before {
  float: left;
  /* content: "\f068"; */
  content: "\f067";
}

[aria-expanded="true"] .fa:before {
  content: "\f068";
}

[data-toggle="collapse"].collapsed .fa:before {
  float: left;
  content: "\f067";
}

/* ---------------------------------------
           Careers Page
------------------------------------------ */

.btn-outline-orange {
  color: #f37021;
  border-color: #f37021;
}

.btn-outline-orange:hover {
  background-color: #f37021;
  color: #fff;
}

.btn-outline-gold {
  color: #ffa700;
  border-color: #ffa700;
}

.btn-outline-gold:hover {
  background-color: #ffa700;
  color: #fff;
}

/* -------------------------------------------
         Contact Page
---------------------------------------------- */
.u-icon {
  position: relative;
  z-index: 1;
  line-height: .7;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.125rem;
  border-radius: .25rem;
  transition: .3s ease-in-out;
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
}

.u-icon-yellow {
  background-color: #dedc54; /*#e8b909;*/
  border-color: #dedc54; /*#e8b909;*/
  border-top-color: rgb(232, 184, 9);
  border-right-color: rgb(232, 184, 9);
  border-bottom-color: rgb(232, 184, 9);
  border-left-color: rgb(232, 184, 9);
}

.u-icon-block {
  border-bottom: solid 1px #e6e7e9;
  border-bottom-color: rgb(230, 231, 233);
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.u-icon-block__col {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.u-icon--size--xl {
  width: 5rem;
  height: 5rem;
  font-size: 2.375rem;
}

.u-icon__inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.u-icon-block__col--left-brd {
  border-left: solid 1px #e6e7e9;
  border-left-color: rgb(230, 231, 233);
  border-left-style: solid;
  border-left-width: 1px;
}

.rounded-circle {
  border-radius: 50% !important;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
}