/* sortable list styles*/
[data-sortable]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
[data-sortable] [data-handle]{cursor:grab!important;transition: 0.3s;}
[data-sortable] .sortHandle{cursor:grab!important;transition: 0.3s;}
[data-sortable] .isChoosen{opacity:0.8;}
[data-sortable] .sortable-ghost{opacity: 0.5;}
[data-sortable] > li.disabled{opacity:.5}
[data-sortable] > li.highlight{background:#FEE25F}
[data-sortable] > li.sortable-placeholder{border-color:#CCC}
[data-sortable] > li .title{cursor:move;cursor: -webkit-grabbing;}

.sortable-drag{list-style: none;padding: 0 10px;opacity: 0.3;}
.sortable-drag li{list-style: none;}
.sortable-drag i{opacity: 0;}
.sortable-drag .value{opacity: 0;}

[data-sortable] .roundedBox{
	display: inline-block;
	max-width: 150px;
	max-height: 200px;
	margin: 5px;
}
[data-sortable][data-ratio='16x9'] .roundedBox{
	max-width: 125px;
	height: 70px;
	margin: 5px;
}
[data-sortable][data-ratio='1x1'] .roundedBox{
	max-width: 100px;
	height: 100px;
	margin: 5px;
}
[data-sortable] .roundedBox .overlay{
	margin: 0;
}

[data-sortable] .roundedBox.sortable-ghost .overlay:after{
	background: linear-gradient(to bottom, transparent 31%, rgba(0,0,0,0.32) 55%, #9c4f4f 100%)
}

[data-sortable][data-willy] .roundedBox:nth-child(2n) {
  animation-name: willy1;
  animation-iteration-count: infinite;
  transform-origin: 50% 10%;
  animation-delay: -.5s;
  animation-duration: .3s;
}

[data-sortable][data-willy] .roundedBox:nth-child(2n-1) {
  animation-name: willy12;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  transform-origin: 30% 5%;
  animation-delay: -.4s;
  animation-duration: .25s;
}

@keyframes willy1 {
  0% {
    transform: rotate(-1deg);
    animation-timing-function: ease-in;
  }

  50% {
    transform: rotate(1.5deg);
    animation-timing-function: ease-out;
  }
}

@keyframes willy12 {
  0% {
    transform: rotate(1deg);
    animation-timing-function: ease-in;
  }

  50% {
    transform: rotate(-1.5deg);
    animation-timing-function: ease-out;
  }
}