/* main #dp transition animation */
#dp { transition: transform .2s ease-in-out; transform: translateZ(0); }


/* colors */
td:hover i { background: #eee; }
.fromTo, #dp #sel1 i, td.range i {
	*background: #42A5F5;
	*background: #3bb;
	*background: hotpink;
	*background: #0c0;
	*background: #f60;
	*background: orange;
	*background: #222;
	background: #2196f3;
}

td.range i { opacity:.5; }
#sel1 i { opacity:1; }
#sel2 i { background: #FF4081; background: hotpink; opacity:1; }

/* PERF */
#r_cals:after,
#dp,
#fromTo,
.dateBox
{ backface-visibility: hidden; }

#cal #r_nav .nav { opacity:1 !important; }



/* OTHER */

.clear { clear: both; }
#cal { width: 640px; margin-top:60px; }
#cal {
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#cal *, #cal *:before, #cal *:after { box-sizing: border-box;  }
#dp table { border-collapse: collapse; cursor: default; width:100%; }

#dp .r_month { width:50%; display:inline-block; box-sizing: border-box; }
#r_nav { z-index: 1; }

#dp:after { clear:both; display:block; content:''; } /* temp clear */

#r_cals { white-space: nowrap; overflow-x: hidden; }
#r_cals { border:1px solid #ddd; border-top: 0; }

/* temp -- add line to center */
#r_cals:after {
	content:'';
	display:block;
	height:100%;
	background: #ddd;
	position:absolute;
	left:50%;
	width:1px;
	margin-left:-1px;
	top:0;
}


#cal em, #cal i { font-style:normal; }

#dp td { text-align:center; vertical-align:middle; }
#dp td i {
	font-weight:300; 
	display:inline-block;
	width: 36px;
	height: 36px;
	line-height: 36px;
	border-radius:50%;
}


/* MONTH TITLE */
.r_title {
	display:block;
	text-align: center;
	font-size: 14px;
	text-transform: uppercase;
	line-height:100%;
	font-weight:400;
	background: #fafafa;
	color:#666;
}

.r_title span {
	font-weight: 300;
	color:#aaa;
}


/* PADDINGS / MARGINS */

.fromTo { padding:20px 0; }
#r_nav i { padding:0 15px; padding-bottom:3px;  }
.r_title { padding: 15px 0; }
.days .r_days em { margin:0 8px; }

#dp td { padding: 4px; }
#dp thead td { padding-top:10px; padding-bottom:10px; }
#cal td:first-child { padding-left: 7px; }
#cal td:last-child { padding-right: 7px; }



/* SPECIAL td stuff */
.notCurMonth { color: #aaa; }
#sel1, #sel2, .range { color:#fff; }

#dp thead td { 
	background:#fff;
	color:#aaa;
	font-size:12px;
	font-weight: 300; 
	text-transform: uppercase;
}

#cal td:last-child { border-right:1px solid #ddd; }
#cal table:last-child td { border:0; }

#cal td.notCurMonth { background: #fafafa; }

/*
td.disabled { opacity: 0.4; }
td.disabled:hover i { background: none; }
*/


/* TEMP */

.fromTo {
	width: 100%;
	color: #fff;
	
}

.fromTo .dateBox {
	width:50%;
	display: inline-block;
	text-align: center;
	font-size:14px;
	line-height:150%;
}

.dateBox.off { opacity: 0.5; }

.r_head {
	display: block;
	font-weight:300;
	color: rgba(255,255,255,0.7);
}

.r_date, .r_days {
	font-size: 16px;
	font-weight: 300;
}

.r_date {
	animation: fadeInOut 1s ease-in-out infinite;
}


.dateBox.off .r_date { animation: none; }
.dateBox.active .r_date { animation: none; }

.fromTo { position: relative; }
.fromTo .dateBox.days {
	width: 120px;
	position: absolute; 
	left:50%;
	margin-left:-60px;

	z-index: 2;
	display: inline-block;
}

.r_dots {
	font-size: 32px;
	color: rgba(255,255,255,0.7);
	letter-spacing: 1px;
	vertical-align: middle;
}

@keyframes fadeInOut {
	0% { opacity:0; }
	50% { opacity: 1; }
	100% { opacity:0; }
}

@keyframes bounce {
	0% { transform: translateY(0); }
	20% { transform: translateY(5px); }
	40% { transform: translateY(-5px); }
	60% { transform: translateY(0); }
	100% { transform: translateY(0); }
}


/* cal nav */
#r_cals { position:relative; }

#r_nav {
	position:absolute;
	top:0px;
	font-size:50px;
	line-height:40px;
	width:100%;
	color:#aaa;
}

#r_nav i { display: block; cursor: default; width:50%; }
#r_nav .prev { float:left; }
#r_nav .next { float:right; text-align:right; }
#r_nav i:hover { color:#333; }
#r_nav i:active { opacity:.5; }
#r_nav i.off { color:#ddd; cursor: not-allowed; }

#dactions { text-align: right; }
.dbtn {
	display: inline-block;
	position: relative;
	border:0;
	padding: 10px 15px;
	line-height: 200%;
	background: none;
	text-transform: uppercase;
	font-weight: 500;
	cursor: pointer;
	color: #03A9F4;
}


/* anim daysNum */
@keyframes tada {
	0% {transform: scale(1);} 
    10%, 20% {transform: scale(0.9) rotate(-3deg);} 
    30%, 50%, 70%, 90% {transform: scale(1.8) rotate(6deg);} 
    40%, 60%, 80% {transform: scale(1.8) rotate(-6deg);} 
    100% {transform: scale(1) rotate(0);} 
}

#daysNum.bounce em {
	animation: tada 1s ease 1;
}







/*
	MEDIA QUERIES
*/

/* desktop / mobile classes */
.hideDesk { display:none; }
.hideSmall {}

/* remove next/prev-months for double calendar view */
@media(min-width:800px){
	
	#cal td.notCurMonth { visibility: hidden; }
	#sel1,#sel2 { animation: push .1s ease-out 1; }
	@keyframes push {
		0% { transform: scale(1); }
		50% { transform: scale(0.8); }
		100% { transform: scale(1); }
	}

}

/* tablet */
@media(max-width: 800px){
	.hideSmall { display:none; }
	.hideDesk { display:inline; }	
	
	body { padding:0; }
	#c { width:100%; padding:0; padding-top:30px; height:auto; min-height:auto; border:0; }
	#cal { width:100%; max-width: 380px; position:relative; margin: 0 auto;  }
	#cal #dateFrom { text-align:left; padding-left:20px; }
	#cal #dateTo { text-align:right; padding-right:20px; }
	#cal .r_month { width:100%; }
	#r_cals:after { display: none; } /* temp middle line */

	.r_date { font-size:14px; }
	.r_head { font-size: 12px; }

	h1, .sub, p, #m span i, #m em em { display:none; }

	#cal .r_dots { width:24px; overflow:hidden; display: inline-block; }
	
	#color { position:relative; margin:0 auto; margin-bottom:40px; top:0; left:0; }

}

/* smaller */
@media(max-width: 600px){

	#cal { width:100%; max-width: 360px; }
	body { overflow:hidden !important; }
	/* days */
	#cal .r_dots {
	width: 14px; letter-spacing: 0px;
	_outline:red solid 1px;
	font-size: 28px;
	}

	_#cal .r_dots { display: none; }
	_.fromTo .dateBox.days { width: auto; line-height:100%; }
	_.dateBox.days em { font-size: 12px; margin:0; margin-right:5px; float:right; display:inline-block; _font-weight: 300; color: rgba(255,255,255,0.7); }
	_.dateBox.days .r_head {  float:right; font-size: 12px; display:inline-block; }
	_#cal .dateBox.days {
		margin:0; left:auto; right: auto;
		left:50%;
		top:10px;
		transform: translateX(-50%);
	}

	/* use native scroll 
	#r_cals { overflow-x: scroll; }
	#cal .nav { display:none; }
	#dp .r_month:nth-child(2n+1) .r_title { background: #f6f6f6; }
	
	#dp { transform: translateZ(0); }
	#color input { float:left; width:30px; margin-left:2px; margin-top:1px;}
	#color { width: 220px }
	#color:after { content:''; clear:both; display:block; }
	*/

}






/* UNRELATED */
@media(max-width: 1200px){
	#c { padding-top:0; padding-bottom: 300px; }
	form, #color { display:none; }
	
}