/* Custom Stylesheet */


/**
 * Use this file to override Materialize files so you can update
 * the core Materialize files in the future
 *
 * Made By MaterializeCSS.com
 */

.icon-block {
	padding: 0 15px;
}

.icon-block .material-icons {
	font-size: inherit;
}

body {
	background-color: bisque;
	width: 100%;
	margin: 0;
	padding: 0;
}

#fixed {
	width: 100%;
	position: fixed;
	z-index: 7000;
	top: 0;
}

.move-fixed {
	margin-top: 80px;
}

.light-blue.lighten-1 {
	background-color: darkgrey!important;
	height: 70px;
}

.right {
	float: right !important;
	margin-right: 130px;
}

h1 {
	text-align: center;
	font-family: "baskerville";
}

.info {
	text-align: justify;
}

a:link,
a:visited {
	color: white;
	font-size: 15px;
}


/*CALENDAR 1 JANUARY*/

.section1 {
	background-color: darkgrey!important;
	height: 80px;
	width: 100%;
	margin-top: -530px;
	text-align: center;
	font-family: roboto;
	color: black;
	padding: 1px;
	
}

.calendar1 {
	margin-top: 30px;
	width: 100%;
	max-width: 500px;
	margin-left: 1px;
}


.content1{
	
}

.row2 {
	background-image: url(../images/fireworks.png);
	width: 100%;
	height: 915px;
	margin-left: -1px;
}


/*CALENDAR 2 FEBRUARY*/

.section2 {
	background-color: hotpink! important;
	height: 80px;
	width: 100%;
	margin-top: -15px;
	text-align: center;
	font-family: roboto;
	color: black;
	padding: 1px;
}

.calendar2 {
	margin-top: 30px;
	width: 100%;
	max-width: 500px;
	margin-left: 1px;
}

.row {
	background-image: url();
	width: 100%;
	height: 900px;
	margin-left: -1px;
}

.row3 {
	background-image: url(../images/hearts.png);
	width: 100%;
	height: 1180px;
	margin-left: -1px;
}


/*CALENDAR 3 MARCH*/

.section3 {
	background-color: green!important;
	height: 80px;
	width: 100%;
	margin-top: 280px;
	text-align: center;
	font-family: roboto;
	color: black;
	padding: 1px;
}

.row4 {
	background-image: url(../images/clovers.png);
	width: 100%;
	height: 1100px;
	margin-left: -1px;
}

.calendar3 {
	margin-top: 30px;
	margin-left: -1px;
	width: 100%;
	max-width: 500px;
}


/*CALENDAR 4 APRIl*/

.section4 {
	background-color: skyblue!important;
	height: 80px;
	width: 100%;
	margin-top: 200px;
	text-align: center;
	font-family: roboto;
	color: black;
	padding: 1px;
}

.row5 {
	background-image: url(../images/easter.png);
	width: 100%;
	height: 1020px;
	margin-left: -1px;
}

.calendar4 {
	margin-top: 30px;
	margin-left: -1px;
	width: 100%;
	max-width: 500px;
}


/*CALENDAR 5 MAY*/

.section5 {
	background-color: #FFB6C1!important;
	height: 80px;
	width: 100%;
	margin-top: 120px;
	text-align: center;
	font-family: roboto;
	color: black;
	padding: 1px;
}

.row6 {
	background-image: url(../images/flower.png);
	width: 100%;
	height: 1030px;
	margin-left: -1px;
}

.calendar5 {
	margin-top: 30px;
	margin-left: -1px;
	width: 100%;
	max-width: 500px;
}


/*CALENDAR 6 JUNE*/

.section6 {
	background-color: #FFD300!important;
	height: 80px;
	width: 100%;
	margin-top: 120px;
	text-align: center;
	font-family: roboto;
	color: black;
	padding: 1px;
}

.row7 {
	background-image: url(../images/star.png);
	width: 100%;
	height: 1030px;
	margin-left: -1px;
}

.calendar6 {
	margin-top: 30px;
	margin-left: -1px;
	width: 100%;
	max-width: 500px;
}


/*CALENDAR 7 JULY*/

.section7 {
	background-color: red!important;
	height: 80px;
	width: 100%;
	margin-top: 120px;
	text-align: center;
	font-family: roboto;
	color: black;
	padding: 1px;
}

.row8 {
	background-image: url(../images/leaf.png);
	width: 100%;
	height: 1020px;
	margin-left: -1px;
}

.calendar7 {
	margin-top: 30px;
	margin-left: -1px;
	width: 100%;
	max-width: 500px;
}


/*CALENDAR 8 AUGUST*/

.section8 {
	background-color: coral!important;
	height: 80px;
	width: 100%;
	margin-top: 120px;
	text-align: center;
	font-family: roboto;
	color: black;
	padding: 1px;
}

.row9 {
	background-image: url(../images/sunflower.png);
	width: 100%;
	height: 1020px;
	margin-left: -1px;
}

.calendar8 {
	margin-top: 30px;
	margin-left: -1px;
	width: 100%;
	max-width: 500px;
}


/*CALENDAR 9 SEPTEMBER*/

.section9 {
	background-color: saddlebrown;
	height: 80px;
	width: 100%;
	margin-top: 120px;
	text-align: center;
	font-family: roboto;
	color: black;
	padding: 1px;
}

.row10 {
	background-image: url(../images/school.png);
	width: 100%;
	height: 1020px;
	margin-left: -1px;
}

.calendar9 {
	margin-top: 30px;
	margin-left: -1px;
	width: 100%;
	max-width: 500px;
}


/*CALENDAR 10 OCTOBER*/

.section10 {
	background-color: darkorange;
	height: 80px;
	width: 100%;
	margin-top: 120px;
	text-align: center;
	font-family: roboto;
	color: black;
	padding: 1px;
}

.row11 {
	background-image: url(../images/pumpkin.png);
	width: 100%;
	height: 1020px;
	margin-left: -1px;
}

.calendar10 {
	margin-top: 30px;
	margin-left: -1px;
	width: 100%;
	max-width: 500px;
}


/*CALENDAR 11 NOVEMBER*/

.section11 {
	background-color: crimson;
	height: 80px;
	width: 100%;
	margin-top: 120px;
	text-align: center;
	font-family: roboto;
	color: black;
	padding: 1px;
}

.row12 {
	background-image: url(../images/poppy.png);
	width: 100%;
	height: 1020px;
	margin-left: -1px;
}

.calendar11 {
	margin-top: 30px;
	margin-left: -1px;
	width: 100%;
	max-width: 500px;
}


/*CALENDAR 12 DECEMBER*/

.section12 {
	background-color: darkseagreen;
	height: 80px;
	width: 100%;
	margin-top: 120px;
	text-align: center;
	font-family: roboto;
	color: black;
	padding: 1px;
}

.row13 {
	background-image: url(../images/christmas.png);
	width: 100%;
	height: 1020px;
	margin-left: -1px;
}

.calendar12 {
	margin-top: 30px;
	margin-left: -1px;
	width: 100%;
	max-width: 500px;
}

@media only screen and (max-width: 601px) {
	#fixed {
		position: static;
	}
}

@media only screen and (min-width: 993px) {
	.container {
		width: 130%;
	}
}

@media only screen and (min-width: 1200px) {
	html {
		font-size: 15px;
	}
}

html {
	line-height: 1.5;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-weight: normal;
	color: rgba(0, 0, 0, 0.87);
}


/* Style the button that is used to open and close the collapsible content */

.collapsible {
	background-color: red;
	color: white;
	cursor: pointer;
	padding: 1px;
	border: none;
	text-align: center;
	outline: none;
	font-size: 20px;
	width: 8%;
	margin-left: 15px;
	
	
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */

.active,
.collapsible:hover {
	background-color: #ccc;
	opacity: 10px;
	max-width: 100%;
	width: 8%;
}


/* Style the collapsible content. Note: hidden by default */

.content {
	/*padding: 0 18px;*/
	display: none;
	overflow: hidden;
	background-color: #f1f1f1;
	width: 100%;
	max-width: 100%;
	padding: 5px;
	text-align: justify;
	box-sizing: border-box;
	float: left;
	padding-right: 5px;
	margin-bottom: 5px;


}