/* ----------------------------------------------------------------
Copyright (c) Demosphere International Inc.
No permission is granted for any purpose without prior
written consent from Demosphere International Inc.
-------------------------------------------------------------------*/

body .main-sport #design-container-5 { padding-left: 30px; padding-right: 30px; }
body .main-sport #design-container-5 .dii-content-header { margin: 0 0 15px 0; text-align: center; }
body .main-sport #design-container-5 .dii-content-header:after { position: relative; bottom: -5px; margin-left: calc(50% - 25px); }
body .main-sport #design-container-5 .dii-content-header h2 { font-size: 45px; text-align: center; }

body .main-sport .dii-content .dii-content-story a { font-family: 'univia-pro', sans-serif; font-size: 15px; color: #ce0e2d; }
body .main-sport .dii-content .dii-content-story a { font-weight: 700; }
body .main-sport #design-container-5 .dii-content .dii-content-story,
body .main-sport #design-container-5 .dii-content .dii-content-story * { font-size: 16px; }

/* Images */
#design-sport-images { margin-bottom: 15px; }
#design-sport-images .dii-content-title-photo img { max-height: 280px; }
#design-sport-images .dii-content-image h2 {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 280px;
  padding: 0;
  padding-top: 18%;
  font-family: 'agency-fb', sans-serif;
  font-size: 40px;
  font-weight: 900;
  color: #fff;
  line-height: 0.9;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0px 0px 8px rgba(0,0,0,0.5);
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
}
#design-sport-images .dii-content-image { position: relative; height: 280px; padding: 0; margin-bottom: 15px; }
#design-sport-images .dii-content-image h2::before { position: absolute; z-index: -1; content: ''; display: block; height: 280px; width: 100%; top: 0; background: #000; opacity: .3; transition: all .3s ease-in-out; }
#design-sport-images .dii-content-image:hover h2::before { opacity: .2; }
#design-sport-images .dii-content-image > a { position: absolute; z-index: 2; display: block; width: 100%; height: 280px; }
#design-sport-images .dii-content-image > a img { display: none; }
#design-hover-images .dii-content .dii-content-title-photo { margin: 0; padding: 0; border: none; }

/* MOBILE */
@media screen and (max-width: 1400px) {

  #design-sport-images .dii-content-image h2 { height: 250px; font-size: 38px; }
  #design-sport-images .dii-content-image h2::before,
  #design-sport-images .dii-content-image,
  #design-sport-images .dii-content-image > a { height: 250px; }

}

@media screen and (max-width: 1200px) {

  #design-sport-images .dii-content-image h2 { height: 210px; font-size: 34px; }
  #design-sport-images .dii-content-image h2::before,
  #design-sport-images .dii-content-image,
  #design-sport-images .dii-content-image > a { height: 210px; }

}

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

  #design-sport-images .dii-content-image h2 { height: 220px; font-size: 32px; line-height: 0.8; }
  #design-sport-images .dii-content-image h2::before,
  #design-sport-images .dii-content-image,
  #design-sport-images .dii-content-image > a { height: 220px; }

}

@media screen and (max-width: 850px) {

  #design-sport-images .dii-content-image h2 { height: 270px; font-size: 38px; }
  #design-sport-images .dii-content-image h2::before,
  #design-sport-images .dii-content-image,
  #design-sport-images .dii-content-image > a { height: 270px; }

}

@media screen and (max-width: 768px) {

  #design-sport-images .dii-content-image h2 { height: 250px; font-size: 36px; }
  #design-sport-images .dii-content-image h2::before,
  #design-sport-images .dii-content-image,
  #design-sport-images .dii-content-image > a { height: 250px; }

}

@media screen and (max-width: 667px) {

  #design-sport-images .dii-content-image h2 { height: 350px; font-size: 60px; }
  #design-sport-images .dii-content-image h2::before,
  #design-sport-images .dii-content-image,
  #design-sport-images .dii-content-image > a { height: 350px; }

}

@media screen and (max-width: 480px) {

  #design-sport-images .dii-content-image h2 { height: 300px; font-size: 40px; }
  #design-sport-images .dii-content-image h2::before,
  #design-sport-images .dii-content-image,
  #design-sport-images .dii-content-image > a { height: 300px; }

}

@media screen and (max-width: 375px) {

  #design-sport-images .dii-content-image h2 { height: 300px; font-size: 40px; }
  #design-sport-images .dii-content-image h2::before,
  #design-sport-images .dii-content-image,
  #design-sport-images .dii-content-image > a { height: 300px; }

}