.slider {
  position:relative;
}

.frame {
    /**
     * (optional) wrapper width, specifies width of the slider frame.
     */

    position: relative;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    white-space: nowrap;
}

.frame * {
  font-size:initial;
  line-height: initial;
}

.slides {
    display: inline-block;
}

ul.js_slides {
	width:100%;
}

li.slide {
    position: relative;
    display: inline-block;
    width:100%;
    height:calc(100vh - 52px);
    background-repeat: no-repeat;
    background-size:cover;
    background-position: center center;
}

@media(min-width:1600px) {
  li.slide {
    height:600px;
  }
}

/*
li.slide::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.5);
}
*/

li.slide div.content {
  top: 15%;
  left: 10%;
  margin-left:16px;
  white-space: initial;
  width:70%;
  position:absolute;
}

@media(min-width:440px) {
  li.slide div.content {
    top:30%;
    width:75%;
    left:5%;
  }
}

li.slide div.content * {
  text-transform: none;
}

li.slide div.content p {
  font-size:13px;
}

li.slide div.content h1,
li.slide div.content h1 span {
  font-size:18px;
}

li.slide p.slide-ordinal {
  position:absolute;
  top: 30%;
  left: calc(12% - 50px);
  font-size:48px;
  line-height: 50px;
  height:50px;
  width:50px;
  font-weight: 600;
  border-right: 1px solid #f0f0f0;
  text-align:center;
}

@media(min-width:750px) {

  li.slide div.content,
  li.slide p.slide-ordinal {
    top:65%;
  }

  li.slide div.content {
    width:90%;
  }

  li.slide div.content h1,
  li.slide div.content h1 span {
    font-size:46px;
  }

  li.slide p.slide-ordinal {
    left: calc(10% - 50px);
  }
}

.prev, .next {
   position: absolute;
   top: 50%;
   margin-top: -25px;
   display: block;
   cursor: pointer;
}

.next {
   right: 0;
}

.prev {
   left: 0;
}

.next svg, .prev svg {
   width: 50px;
}