* {
	margin: 0;
	padding: 0;
	outline-width:0;
	outline: none;
	border:0;
	-webkit-appearance:none;
	border-radius: 0;
	box-sizing: border-box;
}

html, body {
	padding-bottom: 1px;
}
body, input, textarea, select {
	font-family: Nunito, Arial, Verdana, sans-serif;
	font-size: 15px;
}
body {
	background: #f0f2f5;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
	line-height: 28px;
}

header {
	height: 40px;	
}

.df-display {
	margin: auto;
	max-width: 1040px;
	
}
a {
	text-decoration:none;
	color: #177e89;
}
.df-intro {
	text-align:center;
	margin-bottom: 20px;
}

.blocks {
}

.klm {
	display:inline-block;
	width: 80px;
	height: 47px;
}
h1 {
	font-size: 28px;
	padding: 0;
	margin: 0;
	font-weight: 300;
}
.blocks h1 {
	color: #00a1de;
}
h2 {
	font-size: 18px;
	margin: 20px 0 0 0;
	line-height: 24px;
}
ul {
	list-style-type: none;
}

.calendars {
	position:relative;
	padding: 0 10px;
}
ul.calendar {
	display:inline-block;
	width: 31.3%;
	vertical-align:top;
	margin: 20px 1% 0 1%;
	background: #fafbfc;
	border-radius: 25px;
	border-bottom: 5px solid #dae0e8;
}
.calendars ul.calendar:first-child {
	background: #fff;
	background-image: linear-gradient(to bottom, #f3f4f6, #fff);
	width: 440px;
	display:block;
	margin: 0 auto;
	font-size: 18px;
}


li.week {
	position: relative;
	z-index: 5;
	top: -32px;
}
li.month-start {
	text-align:right;
}
li.month {
	text-align:center;
	line-height: 54px;
	font-weight: 600;
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
	padding: 2px 0 24px 0;
}
.calendars ul.calendar:first-child li.month {
	background: #fff;
}

.week-note, .day, ul.calendar {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.week-note, .day {
	display:inline-block;
	text-align:center;
}
.week-note {
	width: 9%;
	position:absolute;
	left: -9%;
}
.week .day:first-child {
	margin-left: 8%;
}
.week .day:last-child {
	margin-right: 8%;
}
.day {
	width: 12%;
	color: #4d5561;
	position:relative;
}

.names {
	background: none;
	font-size: 12px;
	text-transform:uppercase;
	padding: 0;
	color: #9baac2;
	margin-bottom: 14px;
}
.calendars ul.calendar:first-child .names {
	color: #bbc5d5;
}

.weekday {
	display:block;
	margin: 3px 0;
	line-height: 32px;
}
.calendars ul.calendar:first-child .weekday {
	margin: 4px 0;
}
.calendars ul.calendar:first-child .weekday, .today-span {
	line-height: 38px;
}

.office-13 .weekday {
	background-color: #ddeee5;
	color: #448a67;
}
.office-24 .weekday {
	background-color: #ffeaec;
	color: #e52e6e;
}


.week .marked:first-child .weekday, .start .weekday {
	border-top-left-radius: 12px;
	border-bottom-left-radius: 12px;
}
.week .marked:nth-child(5) .weekday, .week > .marked:last-child .weekday, .end .weekday {
	border-top-right-radius: 12px;
	border-bottom-right-radius: 12px;

}

.marked .weekday {
}


.today-span {
	position:absolute;
	top: 4px;
	bottom: 4px;
	left: 5px;
	right: 5px;
	z-index: 3;
	border-radius: 12px;
	color: #fff;
	border-bottom: 2px solid #7688a2;
}
.today-span {
	background: #94a2b7;
}
.office-13 .today-span, .office-13-legend {
	background: #78bc9a;
	border-color: #448a67;
}
.office-24 .today-span, .office-24-legend {
	background: #ff347b;
	border-color: #e52e6e;
}


.legend {
	margin: 30px 0;
	line-height: 26px;
}
.legend span {
	display:inline-block;
	vertical-align: middle;
}
.legend span.block {
	width: 19px;
	height: 19px;
	border-radius: 6px;
	margin-right: 8px;
}

@media (max-width:980px) {

	ul.calendar {
		width: 48%;
		font-size: 18px;
	}
	ul.calendar .weekday {
		line-height: 38px;
		margin: 4px 0;
	}


}

@media (max-width:750px) {

	ul.calendar, .calendars ul.calendar:first-child {
		padding: 0;
		width: 98%;
	}

}

@media (max-width:550px) {
	.today-span {
		left: 1px;
		right: 1px;
	}

	.week .day:first-child {
		margin-left: 4.5%;
	}
	.week .day:last-child {
		margin-right: 4.5%;
	}

	.day {
		width: 13%;
	}


}



footer {
	padding: 20px 0;
	text-align:center;
}
footer span {
	display:block;
}

footer svg {
	display:block;
	margin: 40px auto 20px auto;
	fill-rule:evenodd;
	clip-rule:evenodd;
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke-miterlimit:1.5;
}
.path-1 {
fill:none;stroke:rgb(120,188,154);stroke-width:70px;
}
.path-2 {
fill:none;stroke:rgb(255,52,123);stroke-width:70px;
}


.df-copyright-notice {
	font-size: 12px;
	line-height: 16px;
	padding: 20px;
}
.df-copyright-notice, .df-copyright-notice a {
	color: #e1e5ec;
}



input:focus {
	border-color: #177e89;
}