@media only screen and (max-width: 420px) {
	/****************************************/
	/************ TIMER *********************/
	/****************************************/

	.timer-time {
	    top: 275px;
	    width: 275px;
	    height: 275px;
	    line-height: 140px;
	    font-size: 22px;
	}
	
	.circle {
	    top: 275px;
	    width: 275px;
	    height: 275px;
	}
	
	.circle:before {
	    width: 275px;
	    height: 275px;
	}
	
	.circle-sub-txt {
	    width: 275px;
	    height: 275px;
	    line-height: 275px;
	}
}

@media only screen and (max-width: 390px) {
	/****************************************/
	/************ TIMER *********************/
	/****************************************/

	.timer-time {
	    top: 275px;
	    width: 250px;
	    height: 250px;
	    line-height: 120px;
	    font-size: 22px;
	}
	
	.circle {
	    top: 275px;
	    width: 250px;
	    height: 250px;
	}
	
	.circle:before {
	    width: 250px;
	    height: 250px;
	}
	
	.circle-sub-txt {
	    width: 250px;
	    height: 250px;
	    line-height: 250px;
	}
}

@media only screen and (max-width: 359px) {
	/****************************************/
	/************ TIMER *********************/
	/****************************************/

	.timer-time {
	    top: 220px;
	    width: 200px;
	    height: 200px;
	    line-height: 105px;
	    font-size: 18px;
	}
	
	.circle {
	    top: 220px;
	    width: 200px;
	    height: 200px;
	}
	
	.circle:before {
	    width: 200px;
	    height: 200px;
	}
	
	.circle-sub-txt {
	    width: 200px;
	    height: 200px;
	    line-height: 180px;
	}
	
	.circle.running i.fa-5x {
		font-size: 3.5em;
	}
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width: 320px) { 
	/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-width: 320px) and (max-width: 480px) {
	/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-width: 320px) and (max-height: 568px) {
	/* Styles */
}

/* iPhone 6, 7, 8 ----------- */
@media only screen and (min-width: 320px) and (max-height: 667px) {
	/****************************************/
	/************ TIMER *********************/
	/****************************************/

	.timer-time {
	    position: absolute;
	    top: 200px;
	    width: 225px;
	    height: 225px;
	    line-height: 110px;
	    font-size: 22px;
	}
	
	.circle {
	    position: absolute;
	    top: 200px;
	    left: 50%;
	    width: 225px;
	    height: 225px;
	}
	
	.circle:before {
	    width: 225px;
	    height: 225px;
	}
	
	.circle-sub-txt {
	    width: 225px;
	    height: 225px;
	    line-height: 225px;
	}
	
	.timer-paid-hours-div {
	    margin-top: 330px;
	}
	
	.history {
	    margin-top: 10px;
	}
	
	.circle.running i.fa-5x {
		font-size: 4.5em;
	}

	/****************************************/
	/************ Calendar ******************/
	/****************************************/
	
	#calendar {
		font-size: 0.8rem;
	}
	
	.elegant-calendar .head-day-div {
	    height: 80px;
	}
	
	.elegant-calendar .head-day {
	    font-size: 5em;
	}
	
	.elegant-calendar .head-info-content p {
	    font-size: 1.2em;
	}
	
	.elegant-calendar .head-day.head-day-plus-content {
	    width: 180px;
	}
	
	.elegant-calendar .head-info-content p.head-info-details {
	    font-size: 1em;
	    width: 100px;
	}
	
	.elegant-calendar .calendar-wrap {
	    padding: 10px 20px 0px 20px;
	}
	
	.elegant-calendar tbody td:after {
	    width: 34px;
	    height: 34px;
	}

	/****************************************/
	/************ Day Detail ****************/
	/****************************************/
	
	.day-detail-table {
	    font-size: 1em;
	}
	
	.day-detail-table th, .day-detail-table td {
	    padding: 4px 15px;
	}
	
	.paid-hours-table {
	    margin: 15px 0 0 0;
	    font-size: 1em;
	}

	/****************************************/
	/************ TODAY *********************/
	/****************************************/
	
	.header-margin {
	    margin-top: 100px;
	}
	
	.today-table {
	    font-size: 1em;
	    margin: 10px 0 10px 0;
	}

	/****************************************/
	/************ Year Vacation *************/
	/****************************************/
	
	.year-vacation-table {
	    font-size: 1em;
	}

	/****************************************/
	/************ Year Sickness *************/
	/****************************************/
	
	.year-sickness-table {
	    font-size: 1em;
	}
}

/* iPhone 6+, 7+, 8+ ----------- */
@media only screen and (min-width: 414px) and (max-height: 736px) {
	/* Styles */
}

/* iPhone X ----------- */
@media only screen and (min-width: 375px) and (max-height: 812px) {
	/* Styles */
}

/* iPhone XS Max, XR ----------- */
@media only screen and (min-width: 414px) and (max-height: 896px) {
	/* Styles */
}

/* Desktop ----------- */
@media only screen and (min-width: 1200px) {
	.elegant-calendar {
    	max-width: 1100px;
	}
}