@charset "utf-8";

.cocoen {
 box-sizing: border-box;
 cursor: pointer;
 line-height: 0;
 margin: 0;
 overflow: hidden;
 padding: 0;
 position: relative;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select:none
}

.cocoen:after,
.cocoen:before {
 box-sizing:inherit
}

.cocoen img,
.cocoen picture > img {
 max-width:none
}

.cocoen > img,
.cocoen > picture > img {
 display: block;
 width:100%
}

.cocoen > div:first-child,
picture .cocoen > div {
 height: 100%;
 left: 0;
 overflow: hidden;
 position: absolute;
 top: 0;
 width:50%
}

.cocoen-drag {
 position: absolute;
 bottom: 0;
 left: 50%;
 top: 0;
}

.cocoen-drag:before {
 background: url(../img/cocoen-drag.png) #cb9e68 no-repeat center / 50% auto;
 content: '';
 line-height: 60px;
 border-radius: 60px;
 height: 60px;
 width: 60px;
 transform: translate3d(-50%, -50%, 0);
 position: absolute;
 left: 50%;
 top: 50%;
 box-sizing: inherit;
}


/* ------------------------------------------------------------------------------------------------
 * RESPONSIVE
 * ------------------------------------------------------------------------------------------------ */
@media screen and (max-width:767px) {
 .cocoen-drag:before {
  line-height: 40px;
  border-radius: 40px;
  height: 40px;
  width: 40px;
 }
 
}