@media screen and (max-device-width: 800px) and (orientation: landscape) {
	html {
		/* Rotate the content container */
		transform: rotate(-90deg);
		transform-origin: left top;
		/* Set content width to viewport height */
		width: 100vh;
		/* Set content height to viewport width */
		height: 100vw;
		overflow-x: hidden;
		position: absolute;
		top: 100%;
		left: 0;
	}
}

/* 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: 375px) and (max-height: 667px) {
	/****************************************/
	/************ TIMER *********************/
	/****************************************/

	.timer-time {
	    position: absolute;
	    top: 220px;
	    width: 250px;
	    height: 250px;
	    line-height: 110px;
	    font-size: 22px;
	}
	
	.circle {
	    position: absolute;
	    top: 220px;
	    left: 50%;
	    width: 250px;
	    height: 250px;
	}
	
	.circle:before {
	    width: 250px;
	    height: 250px;
	}
	
	.circle-sub-txt {
	    width: 250px;
	    height: 250px;
	    line-height: 235px;
	}
	
	.timer-paid-hours-div {
	    margin-top: 360px;
	}
	
	.history {
	    margin-top: 10px;
	}

	/****************************************/
	/************ Calendar ******************/
	/****************************************/
	
	.elegant-calendar .head-day-div {
	    height: 100px;
	}
	
	.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;
	}

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

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

/* 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 */
}