.footer {
	font-family: 'Montserrat', sans-serif !important;
    font-size: 0.8em;
}
#twitter-widget-0{
	    border: 3px solid #00000030 !important;
    border-radius: 5px !important;
    width: 80% !important;
}
body{
font-family: 'Comic Neue', cursive;
 }


 /* accessibility  */

 #skip-nav {
     position: absolute;
     transform: TranslateY(-120%);
     transition: 0.3s;
     padding: 1em;
     background-color: black;
     color: white !important;
 }

 #skip-nav:focus {
     transform: TranslateY(0%);
 }


 .container {
     width: 100%;
     margin-right: auto;
     margin-left: auto;
	 padding-bottom:30px;
 }

 .animated {
     -webkit-animation-duration: 0.5s;
     animation-duration: 0.5s;
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
 }

 .fadeIn {
     -webkit-animation-name: fadeIn;
     animation-name: fadeIn;
 }

 .delay-1s {
     -webkit-animation-delay: 1s;
     animation-delay: 1s;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 #floor {
     background-image: url("https://assets.actrand.com/mcps/background/floor_and_wall.png");
     /*background-size: 100% 100%;*/
     position: relative;
     top: 0;
     left: 0;
     z-index: -999
 }

 #classroom-homepage {
     text-align: center;
     background: url("https://assets.actrand.com/mcps/classroom/background.png") center top no-repeat;
 }

 #classroom-page {
     text-align: center;
     background: url("https://assets.actrand.com/mcps/classroom/background.png") center top no-repeat;
 }








 .dropdown-item,
 .dropdown-menu {
     font-size: 1em !important;
 }

 .hue1 {
     filter: hue-rotate(0deg);
 }

 .hue2 {
     filter: hue-rotate(60deg) brightness(1.3);
 }

 .hue3 {
     filter: hue-rotate(120deg);
 }

 .hue4 {
     filter: hue-rotate(180deg);
 }

 .hue5 {
     filter: hue-rotate(240deg);
 }

 .hue6 {
     filter: hue-rotate(300deg);
 }

#img-map{
	width: 130px;
    position: absolute;
    top: -6px;
    left: -420px;
	    transform: rotate(357deg);

}

 #clock {
     position: absolute;
top: 20px;
    left: 270px;
     background-image: url('https://assets.actrand.com/mcps/classroom/clock/background.png');
     width: 150px;
     height: 150px;
 }

 #secondhand {
     position: relative;
     top: 0;
     left: 0;
 }

 #minutehand {
     position: absolute;
     top: 0;
     left: 0;
 }

 #hourhand {
     position: absolute;
     top: 0;
     left: 0;
 }


 @media screen and (min-width: 1260px) {

     /*this is on a desktop*/

     /*Homepage specific*/
     #clock {
         display: block;
         z-index: 99;
     }
	#img-map {
         display: block;
         z-index: 99;
     }
     #middle-anchor {
         position: absolute;
         margin-left: auto;
         margin-right: auto;
         left: 0;
         right: 0;
         width: 0px;
         height: 0px;
         background-color: red;
         text-align: center;
     }

     #left-notice {
         position: absolute;
    top: 180px;
    left: -646px;
    width: 366px;
    height: 307px;
    padding: 47px 46px;
    background-image: url("https://assets.actrand.com/mcps/classroom/left_noticeboard-sm.png");
     }

     #middle-notice {
                position: absolute;
    top: 198px;
    left: -245px;
    width: 490px;
    height: 270px;
    background-image: url("https://assets.actrand.com/mcps/classroom/middle_noticeboard-sm.png");
    /* padding: 31px; */
     }

     #right-notice {
         
    position: absolute;
    top: 180px;
    left: 272px;
    width: 366px;
    height: 306px;
    padding: 47px 46px;
    background-image: url("https://assets.actrand.com/mcps/classroom/right_noticeboard-sm.png");

     }

     #bottom-graphic {
         position: absolute;
         top: 790px;
         left: -697px;
         width: 1394px;
         height: 518px;
         background-image: url("https://assets.actrand.com/mcps/classroom/bottom_graphic.png");
         z-index: 0;
     }
     /*every page */
     body {
        background-color: #bcd3be;
        margin: 0;
    background-image: url("https://assets.actrand.com/mcps/classroom/floor_texture.png");
    }
   
    /*jank to make absolute potisioning work*/
    html,
    body {
        height: 100%;
    }
   
     #main-content {

            margin: auto;
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 80px;
    background-color: white;
    border-radius: 5px;
    position: absolute;
    top: 260px;
    padding: 20px;
    width: 1400px;
    left: -700px;
	font-size:1.2em;
    }
   
   
     #footer {
         bottom:0;
     }

     #floor {
         height: 1000px;
     }

     /* end of page design... beginning of navbar design*/
     .navbar-brand{
		     position: absolute;
    top: 12px;
    left: -141px;
	 }
	 
	 #homepage-mainmenu {
    width: 1266px;
    position: absolute;
    top: 537px;
    left: -633px;
    margin: 0;
    padding: 0;
    background-image: url("https://assets.actrand.com/mcps/classroom/unit.png");
    padding: 32px 11px 687px 23px;
    z-index: 0;
}

     #homepage-mainmenu>li {

         font-size: 20px !important;

         font-weight: 600;
         display: inline-block;
         height: 53px !important;
		 width: 203px !important;
         padding: 0;
         margin: 0;
         color: black;
         text-align: center;

         background: url("https://assets.actrand.com/mcps/classroom/trays/tray.png") center top no-repeat;
         margin: 0;
         z-index: 9;

     }

     #homepage-mainmenu>li>a {
         display: block;
         height: 53px !important;
         width: 205px !important;
         padding-top: 20px;

         color: #fff;
         text-decoration: none;

         text-shadow: 0px 0px 7px #8c0000;

     }

     #homepage-mainmenu>li>* {
         z-index: 9;
     }

     .dropdown-menu>* {
         z-index: 9;
     }

	#page-mainmenu {
		width: 1364px;
		height: 120px;
		position: absolute;
		top: 130px;
		left: -682px;
		margin: 0;
		padding-left: 24px;
		padding-top: 42px;
		z-index: 9999999;
		background-image: url(https://assets.actrand.com/mcps/classroom/unit-sm.png);
	}
     #page-mainmenu>li {

        font-size: 30px !important;
   
        font-weight: 600;
        display: inline-block;
        height: 53px !important;
        width: 219px !important;
        padding: 0;
        margin: 0;
        color: black;
        text-align: center;
   
        background: url("https://assets.actrand.com/mcps/classroom/trays/tray.png") center top no-repeat;
        margin: 0;
   
    }
   
    #page-mainmenu>li>a {
        display: block;
        height: 53px !important;
        width: 227px !important;
        padding-top: 15px;
   
        color: #fff;
        text-decoration: none;
   
        text-shadow: 0px 0px 7px #8c0000;
    }
 }

 @media screen and (max-width: 1259px) {

     /*this is on a phone*/
         body {
        background: url(https://assets.actrand.com/mcps/background/floor_and_wall.png) center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    /* background-attachment: scroll; */
    background-repeat-x: repeat;
    background-repeat-y: repeat;
    }


     #clock {
         display: none;
     }
		#img-map {
         display: none;
     }

     #middle-anchor {
         display: flex;
         flex-direction: column;
     }

     #left-notice {
         background-color: #4f71c7;
         flex: auto;
		 border: 5px solid #1c18da;
             margin: 0.4em;
     }

     #middle-notice {
         background-color: #3c3c3c;
         flex: auto;
         order: -1;
		  border: 5px solid #252525;
              margin: 0.4em;
     }
	 #right-notice {
         background-color: #c7a54f;
         flex: auto;
		  border: 5px solid #d6da18;
              margin: 0.4em;
     }

     #main-content{
         flex:auto;
         background-color:white;
		 font-size:1.2em;
             margin: 0.4em;

     }

     .navbar {
         order: -1;
         /*this makes it so the navbar is first, and then the "middle" noticeboard*/
     }

    
     #bottom-graphic {
         background-color: blueviolet;
         flex: auto;
         height: 518px;
         background: url("https://assets.actrand.com/mcps/classroom/bottom_graphic.png") center top no-repeat;
		 order: 99;
     }

     #footer {
         background-color: aliceblue;
         flex: auto;
     }


     #floor {
         height: 0px;
     }

     /* end of page design... beginning of navbar design*/
     #homepage-mainmenu, #page-mainmenu {

         z-index: 1;
         display: inline-flex;
         flex-direction: column;
         gap: 10px;
     }
     #homepage-mainmenu, #page-mainmenu >* {
        z-index: 1;
        display: inline-flex;
        gap: 10px;
        flex-direction: column;
    }

     #homepage-mainmenu>li, #page-mainmenu>li {

         font-size: 20px !important;

         font-weight: 600;
         /*display: inline-block;*/
         /*height: 53px !important;
         width: 227px !important;*/
         padding: 0;
         margin: 0;
         color: black;
         text-align: center;

         background: url("https://assets.actrand.com/mcps/classroom/trays/tray.png") center top no-repeat;
         margin: 0;

     }

     #homepage-mainmenu>li>a, #page-mainmenu>li>a {
         /*display: block;*/
         height: 53px !important;
         width: 227px !important;
         padding-top: 15px;

         color: #fff;
         text-decoration: none;

         text-shadow: 0px 0px 7px #8c0000;
     }

    
     .navbar-expand-xxl .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
        flex-direction: row;
    }
     .navbar-collapse {
            /* overflow-x: auto; */
    background-color: #c17a38;
    border: 0.3em solid black;
    padding-top: 0.5em;
     }
     .dropdown-menu.show {
        display: flex !important;
        flex-direction: column !important;
    }
    .navbar-nav .dropdown-menu {
        position: relative !important;
    }
 }

 .on-black {
     color: white;
 }






/* CALENDAR DATE HOLDER */
.calendar-date{
    background-color: #fff;
    color: black;
    width: 5em;
    border-radius: 0.5em;
}

.calendar-date-month {
background-color: #f55;
    color: white;
    /* border-radius: 5px; */
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    font-size: 1em;
}
.calendar-date-day {
    font-size: 1.5em;
    font-weight: 500;
}
.calendar-date-year {
border-top: 1px #80808070 solid;
    font-size: 0.9em;
}