/*
Styles for the homepage slider, template-parts/content-slider.php
*/

/*--------------------------------------------------------------
## #SLIDER AREA
--------------------------------------------------------------*/
#hero-container {
  height: auto;
  margin: 0 auto;
  max-height: 500px;
  position: relative;
  width: 100%;
}
#hero-container .content-area {
  margin: 0;
  max-width: 100%;
  padding: 0 16px;
  color: #ffffff;
  background-color: #001E44;
  background: linear-gradient(to right, #001e44, #1e407c);
  position: relative;
  z-index: 1;
}
#hero-container .content-area:before {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0px;
  bottom: 0;
  background: url(/wp-content/plugins/ooe-slider-picker/images/psu-shield-bg-white.svg) 0px 0px no-repeat;
  z-index: -1;
  opacity: .05;
  background-position-x: calc(100% + 90px);
  background-position-y: calc(100% + 1035px);
  background-position: calc(0% - 20px) calc(100% + 960px);
}
#hero-list {
  padding: 0;
  margin: 0;
  position: static;
}
#hero-list li {
  background-color: #001e44;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: contain;
  margin: 0;
  padding: 0;
  width: 100%;
  list-style: none;
  float: left;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: visibility ease 0.65s, opacity ease 0.65s;
  -moz-transition: visibility ease 0.65s, opacity ease 0.65s;
  -o-transition: visibility ease 0.65s, opacity ease 0.65s;
  transition: visibility ease 0.65s, opacity ease 0.65s;
}
#hero-list li.current-hero {
  position:relative;
  visibility: visible;
  opacity: 1;
  -webkit-transition: visibility ease 0.65s, opacity ease 0.65s;
  -moz-transition: visibility ease 0.65s, opacity ease 0.65s;
  -o-transition: visibility ease 0.65s, opacity ease 0.65s;
  transition: visibility ease 0.65s, opacity ease 0.65s;
}
.hero-pager a {
  display: inline-block;
  width: 17px;
  height: 17px;
  font-size: .1em;
  text-indent: -9999px;
  background: transparent url("../images/slider-nav-dots.png") no-repeat 0 -17px;
  margin: 0 5px;
  background-size: 16px 33px;
}
.hero-pager a.current-pager {
  background-position: 0 0px;
}
.hero-content-container {
  display: block;
  margin: 0px auto;
  max-width: 1232px;
  position: relative;
  width: 100%;
}
.slider-nav-container {
  background-color: transparent;
  padding: 0;
  position: absolute;
  top: 20px;
  width: 100%;
  z-index: 99;
}
.slider-readmore {
  display: block;
  padding: 16px 0 0;
}
.slider-nav {
  display: flex;
  max-width: 1232px;
  margin: 0 auto;
  padding: 0 16px;
}
.slider-nav .hero-pager {
  display: flex;
}
.slider-nav .hero-activator {
  margin: 0 12px;
}
.slider-nav .hero-activator img {
  margin-top: 2px;
  max-width: 16px;
  display: none;
}
.slider-nav .hero-left {
  margin-left: 0;
  background: transparent url(../images/slider-arrow-left.png) no-repeat 0 0;
  display: inline-block;
  width: 17px;
  height: 17px;
  background-size: 17px;
}
.slider-nav .hero-right {
  margin-right: 0;
  background: transparent url(../images/slider-arrow-right.png) no-repeat 0 0;
  display: inline-block;
  width: 17px;
  height: 17px;
  background-size: 17px;
}
.slider-title {
  margin-top: 0;
}
h3.slider-title {
  color: #ffffff;
  font-family: "Open Sans";
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 10px 0;
  position:relative;
}
.slider-title a {
  text-decoration:none;
}
.slider-content {
  padding: 32px 6% 30px 0;
  z-index: 1;
  width: 100%;
}
.has-slider-nav .slider-content {
  padding-top: 60px;
}
a.slider-sliderbutton:visited {
  color: #ffffff;
}
.slider-description {
  color: #ffffff;
  font-size: 1rem;
  line-height: normal;
}
.slider-description p {
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
.slider-description h2,
.slider-description h3 {
  color: #ffffff;
  font-size: 1.625rem;
  font-weight: 600;
  margin: 8px 0;
}
.slider-description a,
.slider-description a:visited {
  color: #ffffff !important;
  text-decoration: none;
  border-bottom: 1px dotted #ffffff;
}
.slider-description a:hover,
.slider-description a:focus {
  color: #ffffff !important;
  border-bottom: 1px solid #ffffff;
}
.slider-readmore a.slider-sliderbutton,
.slider-readmore a.slider-sliderbutton:visited {
  background-color: #005FA9;
  border-radius: 32px;
  box-shadow: 1px 1px 0px rgba(0,0,0,0.2);
  color: #ffffff;
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  min-width: 210px;
  padding: 19px 32px;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  -webkit-transition: background-color .25s ease-out;
  -moz-transition: background-color .25s ease-out;
  -o-transition: background-color .25s ease-out;
  transition: background-color .25s ease-out;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}
.slider-readmore a.slider-sliderbutton:hover {
  background-color:#FFD100;
  color: #001e44;
}
.slider-image {
  background-color: #001e44;
  display: grid;
  overflow: hidden;
  position: relative;
}
.slider-image.image-only {
  background-color: transparent;
}
.slider-image img {
  margin: auto;
}
.slider-content .slider-title a, .slider-content .slider-title a:visited {
  color: #ffffff;
}
.slider-title a {
  border-bottom: 1px solid rgba(255,255,255,.2);
}
.slider-title a:hover {
  border-bottom: 1px solid rgba(255,255,255,1);
}

@media screen and (min-width: 810px) {
  .hero-content-container {
    height: 500px;
  }
  #hero-container .content-area {
    background-color: transparent;
    background-image: none;
    display: table;
    height: 500px;
  }
  #hero-container .content-area:before {
    background: none;
  }
  .hero-content-container .content-area,
  .hero-content-container .slider-image {
    display: block;
    position: relative;
  }
  h3.slider-title {
    font-size: 3rem;
    letter-spacing: -1px;
    line-height: normal;
    max-width: 600px;
    padding: 0;
    position:relative;
    text-shadow: 1px 1px 0px rgba(0,0,0,0.7);
  }
  .slider-description p {
    font-size: 0.9375rem;
    margin: 8px 0;
  }
  .slider-image {
    vertical-align: middle;
  }
  .slider-readmore {
    float: none;
  }
  .slider-nav-background {
    background-color: #001e44;
    height: 40px;
    width: 100%;
  }
  .slider-nav-container {
    background-color: transparent;
    padding: 0;
    bottom: -29px;
    top: auto;
    width: auto;
  }
  #hero-list li {
    background-size: cover;
    height: 500px;
  }
  .slider-content {
    background-color: transparent;
    display: table-cell;
    padding-right: 0;
    vertical-align: bottom;
  }
  .slider-image img {
    display: none;
  }
  .slider-description {
    background-color: rgba(0, 30, 68, .85);
    border-radius: 2px;
    display: block;
    padding: 10px 20px;
    margin: 20px 0;
    max-width: 600px;
  }
}

@media screen and (min-width: 1024px) {
  #hero-container {
    height: auto;
  }
}

@media screen and (min-width: 1232px) {
  .hero-content-container .content-area {
    z-index: 1;
  }
}