.left { float:left; }
.right { float:right; }

.clearfix:after { content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0; }
.clearfix { display:inline-block; box-sizing:content-box; }
html[xmlns] .clearfix { display:block; }
* html .clearfix { height:1%; }


.fancywhip { text-align:left; margin:0 auto; position:relative; }

.fancywhip-pattern { z-index:10; width:40%; position:relative; margin:0 auto; }
.fancywhip-pattern .row { position:absolute; }
.fancywhip-pattern .left .row { right:-14%; transform:rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); }
.fancywhip-pattern .right .row { left:-14%; transform:rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }

.fancywhip-pattern .side { position:relative; width:50%; }
.fancywhip-pattern .left .block { float:left; }
.fancywhip-pattern .right .block { float:right; }
.fancywhip-pattern .block { cursor:pointer; box-sizing:border-box; border:1px solid #666; }

.fancywhip-sequence { z-index:5; position:relative;  }
.fancywhip-sequence .row { text-align:right; position: relative; border-bottom:1px solid #000; }
.fancywhip-sequence .row.hilight, .fancywhip-sequence .row.current { background-color:rgba(255,255,255,0.5);}
.fancywhip-sequence .right .row { text-align:left; }
.fancywhip-sequence .side { position:relative; width:35%;}

.fancywhip-control .current, .fancywhip-control .controls { display:none; }