.col img {
  max-width: 100%;
}

.panel-rick img{
  display: block;
  margin-inline-start: auto;
}
.rick-img {
  height: 52%;
  right: 6rem;
}

.rick-img img {
  max-width: inherit;
}

.stronger-together img {
  align-self: center;
  justify-self: flex-end;
  margin: auto -2rem -2rem;
  max-width: calc(100% + 4rem);
}

.home-slider-details {
  z-index: 20;
}

[data-modal="video"] { cursor: pointer; transition: all 0.2s ease-in-out; }
img[data-modal="video"]:hover { opacity: 0.8; }

/* Experiences Slider */
.experiences-swiper .swiper-slide {
  opacity: 1;
  text-align: center;
}

.exp-img {
  cursor: pointer;
}

/* Modal */
.modal {
  position: fixed;
  z-index: 999;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
  align-items: center;
  display: flex;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.hide,[hidden] {
  display: none;
}

.modal-content {
  max-height: 90vh;
  overflow: auto;
  overflow-x: hidden;
  background-color: #fefefe;
  margin: 0 auto;
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
  max-width: 90vw;
  position: relative;
}

#modalClose, .exp-close, [data-close] {
  cursor: pointer;
  position: absolute;
  z-index: 100;
  right: 1rem;
  top: 1rem;
  font-size: 20px;
}

.talent-btn {
  cursor: pointer;
}

/* Experiences Modal */
.exp-modal-content {
  background: transparent;
  text-align: center;
  box-shadow: none;
  max-height: 90vh;
  display: flex;
  align-items: center;
}

.exp-swiper .swiper-wrapper {
  align-items: center;
}

.exp-single-img {
  max-width: 100%;
}

.sharing-exp {
  margin-bottom: 4rem;
}

.sharing-exp .swiper-button-next,
.sharing-exp .swiper-button-prev {
  top: 65%;
}

.swiper-button-next, .swiper-button-prev {
  background-color: rgba(0,0,0,0.3);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background-image: url(../svg/arrow-white.svg);
  background-size: 8px;
}

.swiper-button-prev {
  transform: rotate(180deg);
}

.exp-modal-content .swiper-button-next,
.exp-modal-content .swiper-button-prev {
  background-color: rgba(0,0,0,0.6);
  width: 35px;
  height: 35px;
  background-size: 11px;
}

.exp-modal-content .swiper-button-next {
  right: 0;
}

.exp-modal-content .swiper-button-prev {
  left: 0;
}

.orbo-img img {
  max-height: 80vh;
}

.orbo-img .exp-close {
  right: calc(13px - 1vw);
}

.exp-close {
  background: rgba(0,0,0,0.3);
  padding: 7px 9px 4px 9px;
  border-radius: 50%;
}

.exp-close *, #modalClose *, [data-close] * {
  pointer-events: none;
}

/* Ann Arbor Modal */
article .modal-content section {
  padding: 2rem;
}

article .modal-content hr {
  margin: 0;
}

article section p:last-child {
  margin-bottom: 0; /* fixes flow so we dont have to apply .last to each p */
}

body.fixed {
  position: fixed !important;
  left: 0;
  right: 0;
}

.talent-modal img {
  margin-bottom: 3rem;
  min-width: 100%;
}


/* Charts and Numbers */
.progress, .progress *, .cirlce, .circle * {
  transition: all 0.3s ease-in-out;
}

.progress label {
  display: flex;
  align-items: flex-end;
  color: #0c0c12;
}

.progress label h2 {
  flex-shrink: 0;
  margin-right: 1rem;
  line-height: 1;
  display: inline-block;
  margin-bottom: 0;
}
/* IE and EDGE */
progress {
  /* RESETS */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  display: block;

  width: 100%;
  height: 10px;
  border-radius: 0;
  background-color: #e6e6e7;
  color: #41007F;
  margin: 10px 0 20px;
}

/* WEBKIT BROWSERS - CHROME, OPERA AND SAFARI */
progress::-webkit-progress-bar {
  background-color: #e6e6e7;
  border-radius: 0;
}

progress::-webkit-progress-value {
  background-color: #41007F;
  border-radius: 0;
}
/* Firefox */
progress::-moz-progress-bar {
  background-color: #41007F;
  border-radius: 0;
}



.gender-graph-wrapper {
 position: relative; 
 padding-bottom: 100%; 
}


.circle {
  position: absolute;
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
}

.circle {
  border-radius: 50%;
  background: #CC77E6; 
  transform: rotate(-90deg);
}
.circle text {
  fill: white;
}
 
.circle circle {
  fill: none;
  /* This should be the same width as the viewbox/diameter of the circle, 
  but IE11 is doing some funky math that requires this to be just a tad larger */
  stroke-width: 31.95;
}

.circle .border {
  stroke-width: 1;
  stroke: #AA1DD5;
}

.circle .primary {
  stroke: #D9CCE5;
}

.circle .primary--border {
  stroke: #41007F;
}

.circle .text-purple {
  fill: #41007F;
}



.trending-upward * {
  color: white;
}

.trending-upward svg {
  display: block;
  margin: 0 auto;
}

.trending-upward h2 {
  margin-bottom: 0;
}

.number-item {
  text-align: center    
}

.number-row {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.hr-full-width {
  margin-left: -2rem;
  margin-right: -2rem;
}


#diversity-snapshot h3 {
  margin-bottom: 3rem;
}

#diversity-snapshot nav, .modal-ann-arbor nav {
  color: #e6e6e7;
  text-align: center;
  margin: 3rem auto;
}

#diversity-snapshot nav label, .modal-ann-arbor nav label {
  cursor: pointer;
}

#diversity-snapshot nav:last-of-type label,
.modal-ann-arbor nav:last-of-type label {
  padding: 0 0.75ch;
}

[for^="region-"] {
  padding: 1rem;
  font-size: 1.8rem;
}

[for^="gender-"],
[for^="region-"],
[for^="race-"] {
  color: #007BC6;
}

#gender-all:checked ~ nav [for="gender-all"],
#gender-tech:checked ~ nav [for="gender-tech"],
#gender-nontech:checked ~ nav [for="gender-nontech"],
#gender-leadership:checked ~ nav [for="gender-leadership"],
#region-global:checked ~ nav [for="region-global"],
#region-us:checked ~ nav [for="region-us"],
#race-all:checked ~ nav [for="race-all"],
#race-tech:checked ~ nav [for="race-tech"],
#race-nontech:checked ~ nav [for="race-nontech"],
#race-leadership:checked ~ nav [for="race-leadership"] {
  color: #41007F;
}

#gender-all-ann:checked ~ nav [for="gender-all-ann"],
#gender-tech-ann:checked ~ nav [for="gender-tech-ann"],
#gender-nontech-ann:checked ~ nav [for="gender-nontech-ann"],
#gender-leadership-ann:checked ~ nav [for="gender-leadership-ann"],
#region-global-ann:checked ~ nav [for="region-global-ann"],
#region-us-ann:checked ~ nav [for="region-us-ann"],
#race-all-ann:checked ~ nav [for="race-all-ann"],
#race-tech-ann:checked ~ nav [for="race-tech-ann"],
#race-nontech-ann:checked ~ nav [for="race-nontech-ann"],
#race-leadership-ann:checked ~ nav [for="race-leadership-ann"] {
  color: #41007F;
}

#region-global:checked ~ nav [for="region-global"],
#region-us:checked ~ nav [for="region-us"] {
  border-bottom: 6px solid #D395E8;
}

#region-global-ann:checked ~ nav [for="region-global-ann"],
#region-us-ann:checked ~ nav [for="region-us-ann"] {
  border-bottom: 6px solid #D395E8;
}

/* Override the other 'hacked' styles */
.swiper-pagination {
  position: relative;
  margin-bottom: 1rem !important;
  bottom: 0 !important;
  top: 0 !important;
  height: auto !important;
}


.modal-ann-arbor section:not(.bg--gradient) h3 {
  margin-bottom: 2rem;
}


@media only screen and (min-width: 768px) {
  .panel-rick img{
    position: absolute;
    bottom: 0;
  }
  .rick-img {
    right: 6rem;
  }
  .stronger-together img {
    margin: auto -3rem -3rem;
    max-width: calc(100% + 6rem);
  }

  .number-row {
    margin-left: 50px;
  }

  #modalClose, [data-close] {
   right: 2rem;
   top: 2rem;
  }

  .modal-content {
    width: 690px;
  }

  .experiences-swiper {
    width: 620px;
  }

  .exp-swiper {
    margin: 0 50px;
  }

  .orbo-img .exp-close {
    right: calc(50% - 141px);
  }

  .hero.card {
    min-height: 400px;
  }

  #company_banner {
    margin-left: -3rem;
    width: calc(65px + 41vw);
  }

  .sharing-exp {
    margin-bottom: 1rem;
  }

  article .modal-content section {
    padding: 3rem;
  }

  .talent-modal img {
    margin-bottom: 4.5rem;
  }

  .hr-full-width {
    margin-left: -3rem;
    margin-right: -3rem;
  }

  .modal-ann-arbor section:not(.bg--gradient) h3 {
    margin-bottom: 4rem;
  }
}

@media only screen and (min-width: 1024px) {

  .bg--gradient .inner {
    padding: 4rem;
  }

  .inclusion-swiper [class*="-1-3"] { flex: 4; flex-basis: calc((100% / 3) - 4rem); max-width: calc((100% / 3) - 4rem) }
  .inclusion-swiper [class*="-2-3"] { flex: 8; flex-basis: calc((200% / 3) - 4rem); max-width: calc((200% / 3) - 4rem) }

  .panel-rick img{
    right: -20%;
  }
  .rick-img {
    height: 70%;
    right: 12rem;
    bottom: -1rem;
  }

  .rick-img img {
    height: auto;
    width: 288px;
  }

  .stronger-together img {
    margin: auto -4rem -4rem;
    max-width: calc(100% + 8rem);
  }

  .modal-content {
    width: 920px;
  }

  .experiences-swiper {
    width: 858px;
  }

  .exp-img {
    max-width: 190px;
  }

  .exp-modal-content {
    width: 958px;
    overflow: hidden;
  }

  .exp-swiper {
    margin: 0 60px;
  }

  .exp-close {
    right: 3rem;
  }

  #company_banner {
    width: 550px;
    margin-left: -8rem;
  }

  .sharing-exp {
    margin-bottom: 3rem;
  }
  
  article .modal-content section {
    padding: 4rem;
  }

  .talent-modal img {
    margin-bottom: 6rem;
  }

  .hr-full-width {
    margin-left: -4rem;
    margin-right: -4rem;
  }
}

@media only screen and (min-width: 1480px) {

  .number-row {
    margin-left: 0;
  }
  
  .bg--gradient .inner {
    padding: 5rem;
  }

  .inclusion-swiper [class*="-1-3"] { flex: 4; flex-basis: calc((100% / 3) - 5rem); max-width: calc((100% / 3) - 5rem) }
  .inclusion-swiper [class*="-2-3"] { flex: 8; flex-basis: calc((200% / 3) - 5rem); max-width: calc((200% / 3) - 5rem) }

  .panel-rick img{
    right: 0;
  }
  .rick-img {
    height: 75%;
    right: 20rem;
    bottom: -3rem;
  }

  .stronger-together img {
    margin: auto -5rem -5rem;
    max-width: calc(100% + 10rem);
  }

  .talent-btn.btn {
    padding: 1rem 4rem;
  }

  .modal-content {
    width: 1330px;
  }

  #modalClose, [data-close] {
    right: 5rem;
    top: 5rem;
  }

  .exp-img {
    max-width: 285px;
  }

  .experiences-swiper {
    width: 1290px;
  }

  .exp-modal-content {
    width: 1390px;
  }

  .exp-swiper {
    margin: 0 184px;
  }

  .exp-close {
    right: 12rem;
  }
  
  .exp-modal-content .swiper-button-next,
  .exp-modal-content .swiper-button-prev {
    width: 60px;
    height: 60px;
    background-size: 16px;
  }

  article .modal-content section {
    padding: 5rem;
  }

  #company_banner {
    width: 700px;
    margin-left: -5rem;
  }

  .talent-modal img {
    margin-bottom: 7.5rem;
  }

  .hr-full-width {
    margin-left: -5rem;
    margin-right: -5rem;
  }
}

@media only screen and (max-width: 1479px) and (min-width: 1024px) {
  [class*="t-1-2"] { flex: 6; flex-basis: calc((100% / 2) - 2.1rem); max-width: calc((100% / 2) - 2.1rem) }
}

@media only screen and (max-width: 1479px) and (min-width: 768px) {
  .trending-upward { 
    margin-left: 0 !important; 
    margin-top: 3rem !important; 
    display: flex;
    align-items: flex-end;
  }

  .modal-ann-arbor .col-hd-1-3:last-of-type {
    margin-left: 0 !important; 
    margin-top: 10rem !important;
    margin-bottom: 0;
  }

  .trending-upward-title {
    display: flex;
  }

  .trending-upward svg { 
    margin: 0 2rem 2rem 0;
  }

}

@media only screen and (max-width: 767px) {
  .sharing-exp {
    padding: 2rem;
  }

  .experiences-swiper {
    width: 285px;
  }

  .swiper-container-horizontal>.swiper-pagination-bullets {
    bottom: auto;
  }

  body {
    -webkit-text-size-adjust: 100%;
  }

  .home-slider-details {
    margin-top: 2rem;
  }

  .trending-upward { 
    margin-top: 2rem !important; 
  }

  .gender-graph-wrapper {
    padding-bottom: 0;
    width: 340px;
    height: 340px;
    margin: 0 auto;
  }

  .modal-ann-arbor .gender-graph-wrapper {
    margin-bottom: 3rem;
    width: 280px;
    height: 280px;
  }

  .cards > .bg--gradient {
    padding: 2rem;
  }
}