/*
 * Project: CirclePlayer
 * http://www.jplayer.org
 *
 * Copyright (c) 2012 Happyworm Ltd
 *
 * Author: Silvia Benvenuti
 * Edited by: Mark J Panaghiston
 * Date: 2nd October 2012
 * Artwork inspired by: http://forrst.com/posts/Untitled-CJz
 */

.cp-container {
	position:absolute;
	width:60px; /* 200 - (2 * 48) */
	height:60px;
	background:url("images/record.svg") 0 0 no-repeat;
	padding:0px;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	top: 0;
	left: 0;
	z-index: 18;
}

.cp-container :focus {
	border:none;
	outline:0;
}

.cp-buffer-1,
.cp-buffer-2,
.cp-progress-1,
.cp-progress-2 {
	position:absolute;
	top:0;
	left:0;
	width:60px;
	height:60px;
	clip:rect(0px,30px,60px,0px);

	-moz-border-radius:30px;
	-webkit-border-radius:30px;
	border-radius:30px;
}

.cp-buffer-1,
.cp-buffer-2 {
	background:url("images/buffer.png") 0 0 no-repeat;
}


/* FALLBACK for .progress
 * (24 steps starting from 1hr filled progress, Decrease second value by 104px for next step)
 * (It needs the container selector to work. Or use div)
 */

.cp-container .cp-fallback {
	background:url("progress-sprite.png") no-repeat;
	background-position:0 60px; 
}

.cp-progress-1,
.cp-progress-2 {
	background:url("images/progress.png") 0 0 no-repeat;
}

.cp-buffer-holder,
.cp-progress-holder,
.cp-circle-control {
	position:absolute;
	width:60px;
	height:60px;
} 

.cp-circle-control {
	cursor:pointer;
}

.cp-buffer-holder,
.cp-progress-holder {
	clip:rect(0px,60px,60px,30px);
	display:none;
}


/* This is needed when progress is greater than 50% or for fallback */

.cp-buffer-holder.cp-gt50,
.cp-progress-holder.cp-gt50,
.cp-progress-1.cp-fallback{
	clip:rect(auto, auto, auto, auto);
}

.cp-controls {
	margin:0;
	padding:20px 22px;
}

.cp-controls li{
	list-style-type:none;
	display:block;

	/*IE Fix*/
	position:absolute;
}

.cp-controls li a{
	position:relative;
	display:block;
	font-size: 1.4rem;
	text-shadow: -1px 1px 2px rgba(20,20,20,0.9);
	color: #fb2e01;
	z-index:1;
	cursor:pointer;
}

.cp-controls .cp-play {
	padding-left: 2px;
}

.cp-controls .cp-play:hover {
	transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
}

.cp-controls .cp-pause {
	padding-left: 0px;
	margin-left: -1.5px;
}

.cp-controls .cp-pause:hover {
	transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
}

.cp-jplayer {
	width:0;
	height:0;
}

@media all and (max-width: 720px) {

	.menu-item, .menu-open-button {
	  width: 40px;
	  height: 40px;
	  border-radius: 100%;
	  top: 6px;
	  line-height: 40px;
	  transition: -webkit-transform ease-out 200ms;
	  transition: transform ease-out 200ms; }

	.hamburger {
	  width: 23px;
	  height: 3px;
	  top: 50%;
	  left: 50%;
	  margin-left: -11.5px;
	  margin-top: -1.5px;
	  transition: -webkit-transform 200ms;
	  transition: transform 200ms; }

	.hamburger-1 {
	  -webkit-transform: translate3d(0, -7px, 0);
	          transform: translate3d(0, -7px, 0); }

	.hamburger-2 {
	  -webkit-transform: translate3d(0, 0, 0);
	          transform: translate3d(0, 0, 0); }

	.hamburger-3 {
	  -webkit-transform: translate3d(0, 7px, 0);
	          transform: translate3d(0, 7px, 0); }

	.menu-open:checked + .menu-open-button {
	  top: 6px; }
	  .menu-open:checked + .menu-open-button .hamburger-1 {
	    -webkit-transform: translate3d(0, 0, 0) rotate(45deg);
	            transform: translate3d(0, 0, 0) rotate(45deg); }
	  .menu-open:checked + .menu-open-button .hamburger-2 {
	    -webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
	            transform: translate3d(0, 0, 0) scale(0.1, 1); }
	  .menu-open:checked + .menu-open-button .hamburger-3 {
	    -webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
	            transform: translate3d(0, 0, 0) rotate(-45deg); }

	.menu {
	  position: fixed;
	  right: 4px;
	  padding-top: 0px;
	  font-size: 22px;
	  width: 40px;
	  height: 40px; }

	.menu-open-button {
	  z-index: 2; }

	.menu-open:checked ~ .menu-item {
	  transition-timing-function: cubic-bezier(0.165, 0.84, 0.45, 1);
	  top: 6px; }
	  .menu-open:checked ~ .menu-item:nth-child(3) {
	    transition-duration: 200ms;
	    -webkit-transform: translate3d(0, 45px, 0);
	            transform: translate3d(0, 45px, 0); }
	  .menu-open:checked ~ .menu-item:nth-child(4) {
	    transition-duration: 310ms;
	    -webkit-transform: translate3d(0, 90px, 0);
	            transform: translate3d(0, 90px, 0); }
	  .menu-open:checked ~ .menu-item:nth-child(5) {
	    transition-duration: 420ms;
	    -webkit-transform: translate3d(0, 135px, 0);
	            transform: translate3d(0, 135px, 0); }
	  .menu-open:checked ~ .menu-item:nth-child(6) {
	    transition-duration: 530ms;
	    -webkit-transform: translate3d(0, 180px, 0);
	            transform: translate3d(0, 180px, 0); }
	  .menu-open:checked ~ .menu-item:nth-child(7) {
	    transition-duration: 640ms;
	    -webkit-transform: translate3d(0, 225px, 0);
	            transform: translate3d(0, 225px, 0); }
	  .menu-open:checked ~ .menu-item:nth-child(8) {
	    transition-duration: 750ms;
	    -webkit-transform: translate3d(0, 270px, 0);
	            transform: translate3d(0, 270px, 0); }

	#fullscreen{
	  position: absolute;
	  width: 39px;
	  height: 39px;
	  top: 15px;
	  right: 85px;
	  z-index: 100;
	  background: url('/folio/css/images/fullscreen.png') 0 0 no-repeat;
	  background-size: contain;
	  display: block;
	  cursor: pointer;
	}

	#reset {
	  width: 28px;
	  height: 28px;
	  right: 50px;
	  top: 14px; }

	.cycle-prev {
	  position: absolute;
	  width: 40px;
	  height: 40px;
	  bottom: 40%;
	  left: -5px;
	  z-index: 3000;
	  background: url("../../../folio/css/images/prev.png") 0px -40px / cover no-repeat;
	  display: inline;
	  cursor: pointer;
	  opacity: 0.5; }

	.cycle-prev:hover {
	  opacity: 1;
	  -ms-transform: scale(1.2);
	      transform: scale(1.2);
	  -webkit-transform: scale(1.2);
	  background: url("../../../folio/css/images/prev.png") 0px 0px / cover no-repeat; }

	.touch .cycle-prev {
	  opacity: 0.9;
	  background: url("../../../folio/css/images/prev.png") 0px 0px / cover no-repeat; }

	.cycle-next {
	  position: absolute;
	  width: 40px;
	  height: 40px;
	  bottom: 40%;
	  right: -5px;
	  z-index: 3001;
	  background-position: 0 -40px;
	  display: inline;
	  cursor: pointer;
	  opacity: 0.5; }

	.cycle-next:hover {
	  opacity: 1;
	  -ms-transform: scale(1.2);
	      transform: scale(1.2);
	  -webkit-transform: scale(1.2);
	  background-position: 0px 0px; }

	.touch .cycle-next {
	  opacity: 0.9;
	  background-position: 0px 0px; }
}

@media all and (max-width: 480px) {
	.cp-container{
		width: 40px;
		height: 40px;
		top: 0px;
		left: 0px;
		background-size: cover;
	}
	.cp-buffer-1,
	.cp-buffer-2,
	.cp-progress-1,
	.cp-progress-2 {
		width:40px;
		height:40px;
		clip:rect(0px,20px,40px,0px);
		background-size: cover;
		-moz-border-radius:20px;
		-webkit-border-radius:20px;
		border-radius:20px;
	}
	.cp-container .cp-fallback {
		background-position:0 20px; 
		background-size: cover;
	}
	.cp-buffer-holder,
	.cp-progress-holder{
		width:40px;
		height:40px;
		background-size: cover;
	}
	.cp-buffer-holder,
	.cp-progress-holder {
		clip:rect(0px,40px,40px,20px);
		display:none;
		background-size: cover;
	} 
	.cp-controls {
	  margin:0;
	  padding:12px 15px;
	}

	.cp-controls li{
	  list-style-type:none;
	  display:block;

	  /*IE Fix*/
	  position:absolute;
	}

	.cp-controls li a{
	  position:relative;
	  display:block;
	  font-size: 1rem;
	  line-height: 1rem;
	  text-shadow: -1px 1px 2px rgba(20,20,20,0.9);
	  color: #fb2e01;
	  z-index:1;
	  cursor:pointer;
	  padding-top: 0.5px;
	}

	.cp-controls .cp-play {
	  padding-left: 0.5px;

	}

	.cp-controls .cp-pause {
		padding-left: 0px;
		margin-left: -2px;
	}

	#reset,
	#fullscreen{
		width: 25px;
		height: 25px;
	}
  #audio {
      top: 14px;
      line-height: 20px;
      right: 50px;
  }

  #hide,
  .isMax,
  #back {
    width: 30px;
    height: 30px;
  }

  #back {
    top: 14px;
    left: 10px;
  }

	.touch .cycle-prev, .touch .cycle-next {
		width: 30px;
		height: 30px;
		background-size: 100% auto;
	}
	.cycle-pager span {
		font-size: 24px;
		width: 8px;
	}
	.custom .tooltipster-content {
	    font-size: 12px;
	    line-height: 14px;
	    padding: 4px 7px;
	}
}