@media (min-width: 1024px) {

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

.menubox{
  width: 236px;
  height: 360px; 
}


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


.label-size {
    line-height: 1;
    color: #fff;
}
.label-size-4 {
    font-size: 140%;
}
.label-size-3 {
    font-size: 120%;
}
.label-size-5 {
    font-size: 170%;
}
.label-size-1 {
    font-size: 90%;
}
.label-size-2 {
    font-size: 110%;
}






.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:1200;
    width: 1200;
    /*transform-origin: 210px 210px;*/
    transform-origin: 330px 330px;
} 


.grid {
  max-width: 1024px;
  margin-top: 560px;
}

.searchbox{
  position: absolute;
  margin-top: 560px;
  width:60%;
}

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

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

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

.grid__gutter-sizer { width: 1%; }

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

.grid__item {
  margin-bottom: 12px;
  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: 48%; }
.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: 500px;
  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;
}

.headline-bg2 {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: 500px;
  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 {
  float:left;
  margin-left:20px;
  margin-right:20px;

  border-radius: 50%;


}

.idolface {
  float:left;
  margin-left:20px;
  margin-right:20px;
  border-radius: 2%;
}




* { box-sizing: border-box; }

body { font-family: sans-serif; }

.carousel {
  background: #EEE;
 
}

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

.carousel-cell img{
  height: 500px;
  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: 300px;
  width: 30%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}




.modal-content{

    margin-top: 180px;

}







}