@media (min-width: 483px) and (max-width: 1019px) {

body {
  font-family: sans-serif;
  line-height: 1.4;
  font-size: 18px;
  padding-left: 20px;
  padding-right: 20px;
  max-width: 800px;
  margin: 0 auto;
}



.features-video {
  
  padding:20px;
  padding-top: 120px;
  position: relative;
  z-index: 10;
}



.label-size {
    line-height: 1;
    color: #fff;
}
.label-size-4 {
    font-size: 90%;
}
.label-size-3 {
    font-size: 80%;
}
.label-size-5 {
    font-size: 100%;
}
.label-size-1 {
    font-size: 60%;
}
.label-size-2 {
    font-size: 70%;
}




.rotate {
    -webkit-transform: rotate(90deg); /* Safari and Chrome */
    -moz-transform: rotate(90deg);   /* Firefox */
    -ms-transform: rotate(90deg);   /* IE 9 */
    -o-transform: rotate(90deg);   /* Opera */
    transform: rotate(90deg);
    height:800;
    width: 800;
    transform-origin: center center;
} 

.downloadapp{
  position: absolute;
  margin-top: 280px;
  width:80%;
  align-items: center;
  left: 50%;
  transform: translate(-50%, -50%);
}


.grid {
  max-width: 1020px;
  margin-top: 460px;
}

/* reveal grid after images loaded */
.grid.are-images-unloaded {
  opacity: 0;
}

.grid__item,
.grid__col-sizer {
  width: 32%;
}

.grid__gutter-sizer { width: 1%; }

/* hide by default */
.grid.are-images-unloaded .image-grid__item {
  opacity: 0;
}

.grid__item {
  margin-bottom: 10px;
  float: left;
}

.grid__item--height0 { height: 0px; background: #EA0; }
.grid__item--height1 { height: 140px; background: #EA0; }
.grid__item--height2 { height: 220px; background: #C25; }
.grid__item--height3 { height: 300px; background: #19F; }

.grid__item--width2 { width: 66%; }
.grid__item--width3 { width: 100%; }
.grid__item img {
  display: block;
  max-width: 100%;
}


.page-load-status {
  display: none; /* hidden by default */
  padding-top: 20px;
  border-top: 1px solid #DDD;
  text-align: center;
  color: #777;
}


.playerbox {
  height:0;
}

.rotatebox{
  -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

/* loader ellips in separate pen CSS */

/* external css: flickity.css */
.headline-bg {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: 400px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


.headline-bg2 {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: 400px;
  background: #253340 url('../img/header/bg-footer.jpg') no-repeat 50% top;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}



.idolname {
  visibility: hidden;
  width:0px;
  height:0px;
}





* { box-sizing: border-box; }

body { font-family: sans-serif; }

.carousel {
  background: #EEE;

}

.carousel-cell {
  margin-right: 4px;
  width:240px;
  background: #FFF;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-cell img{
  height: 400px;
  align: middle;
}



/* loader ellips in separate pen CSS */
.column {
  float: left;
  width: 50%;
  padding: 15px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}


.itemvideo
{
  transition: .5s ease;
  background: #888;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}



.search {
  width: 100%;
  position: relative;
  display: flex;
}

.searchTerm {
  width: 100%;
  border: 3px solid #ec6952;
  border-right: none;
  padding: 5px;
  height: 36px;
  border-radius: 5px 0 0 5px;
  outline: none;
  color: #ec6952;
}

.searchTerm:focus{
  color: #ec6952;
}

.searchButton {
  width: 40px;
  height: 36px;
  border: 1px solid #ec6952;
  background: #ec6952;
  text-align: center;
  color: #fff;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  font-size: 20px;
}

/*Resize the wrap to see the search bar change!*/
.wrap{
  top: 250px;
  width: 60%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}



.modal-content{

    margin-top: 120px;

}




}