/* UPDATED 3/29/2018 @ 11:23AM */

html { -webkit-text-size-adjust: 100%; }
.Page, .MenuContainer { -webkit-transition: all 0.3s ease;  -moz-transition: all 0.3s ease;  transition: all 0.3s ease; }

/* --------------------------------------------- */

body { margin: 0px; padding: 0px; background-color: #000000; }
div, span, td { font-family: arial, helvetica, sans-serif; color: #333333; font-size: 12px; line-height: 120%; }

.Page { display: block; width: 100%; position: absolute; top: 0px; left: 0px; z-index: 1000; }

.ButtonCover { display: block; width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; z-index: 8000; cursor: pointer; }
#BacktoTop { display: none; width: 40px; height: 40px; position: fixed; cursor: pointer; z-index: 9000; background-image: url(../Images/BacktoTop.svg); background-repeat: no-repeat; background-position: center center; }

/* --------------------------------------------- */

.MastheadContainer { display: block; width: 100%; margin: 0px auto; background-color: #00B8FC; }
.MastheadContent { display: block; width: 100%; }
.Masthead { display: table; width: 100%; margin: 0px auto; }
.Masthead .ButtonMenu { display: table-cell; width: 70px; height: 40px; vertical-align: middle; }
.Masthead .Logo { display: table-cell; width: auto; vertical-align: middle; padding: 10px 70px 10px 0px; text-align: center; }

.Masthead .Logo img { max-width: 100%; max-height: 100%; border: none; }

/* --------------------------------------------- */

.MenuContainer { display: block; width: 250px; height: 100%; position: fixed; left: -250px; top: 0px; z-index: 9000; color: #FFFFFF; background-color: #000000; }
.MenuContent { display: block; padding: 10px; }
.Menu { display: block; }
.Menu div { display: block; margin: 0px auto 10px auto; padding-bottom: 10px; font-size: 18px; line-height: 130%; font-family: 'Roboto'; color: #FFFFFF; text-align: center; border-bottom: solid 1px #333333; font-weight: 900; }
.Menu div a { color: #FFFFFF; text-decoration: none; }
.Menu div:nth-child(3) { font-size: 12px; font-weight: 400; }

.ButtonMenu { display: table-cell; width: 70px; cursor: pointer; background-image: url(../images/Button-Menu.svg); background-repeat: no-repeat; background-position: center center; }
.ButtonClose { background-image: url(../images/Button-Close.svg) !important; }

/* --------------------------------------------- */

.FooterContainer { display: block; }
.FooterContent { display: block; padding: 20px; }
.Footer { display: block; }
.Footer div { display: block; font-size: 14px; line-height: 130%; font-family: 'Roboto'; color: #666666; margin-bottom: 10px; }
.Footer div a { color: #666666; text-decoration: none; }
.Footer div b { color: #FFFFFF; font-size: 18px; font-weight: 900px; }
.Footer div:nth-child(3) { font-size: 11px; }

/* --------------------------------------------- */

.Content { display: block; padding: 20px; background-color: #FFFFFF; }

.CalendarTitle { display: block; width: 100%; max-width: 1200px; margin: 20px auto; font-size: 14px; line-height: 130%; font-family: 'Roboto'; color: #666666; }
.CalendarTitle h1 { font-size: 26px; line-height: 130%; font-family: 'Roboto'; color: #000000; text-transform: uppercase; font-weight: 900; }
.Calendar { display: block; width: 100%; margin: 0px auto 40px auto; }

.Table { display: block; width: 100%; margin: 0px auto; }
.Row { display: block; width: 100%; margin: 0px auto; }

.Post { display: block; width: 100%; margin: 0px auto; padding: 15px 0px; position: relative; }
.Post a { text-decoration: none; }
.Post .Pic { display: block; width: auto; margin: 0px auto 15px 0px; position: relative;}
.Post .Pic img { max-width: 100%; width: 100%; max-height: 100%; }
.Post .Pic .Label { display: block; width: auto; padding: 4px 3px 3px 3px; font-family: 'Roboto'; font-size: 10px; text-transform: uppercase; color: #FFFFFF; background-color: #ff3300; position: absolute; left: 0px; top: 0px; z-index: 7000; }
.Post .Text { display: block; width: auto; margin: 0px auto; }

.Post .Date { display: block; width: auto; margin: 0px auto 5px 0px; font-family: 'Roboto'; font-size: 13px; color: #000000; }
.Post .Title { display: block; width: auto; margin: 0px auto 5px 0px; font-family: 'Roboto'; font-size: 18px; line-height: 21px !important; font-weight: 900; line-height: 130%; color: #000000; }
.Post .Description { display: block; width: auto; margin: 0px auto 10px auto; font-family: 'Roboto'; font-size: 12px; color: #666666; }

.Post .ComingSoon { display: block; width: auto; margin: 0px auto 10px auto; font-family: 'Roboto'; font-size: 12px; color: #666666; }
.Post .LearnMore { display: block; width: auto; margin: 0px auto 10px auto; font-family: 'Roboto'; font-size: 12px; color: #00B8FC; }

.Post .Button { display: block; width: auto; max-width: 120px; padding: 10px; background-color: #ff3300; font-family: 'Roboto'; font-size: 13px; color: #FFFFFF; font-weight: 900; text-align: center; text-transform: uppercase; border-radius: 3px; }

.Ended .Pic { opacity: .3; }
.Ended .Text { opacity: .3; }

.Ended .Pic .Label { background-color: #999999; }


/* --------------------------------------------- */

/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

@media (min-width: 640px) {

.Post { display: table; }
.Post .Pic { display: table-cell; width: 40%; max-width: 300px; vertical-align: top; }
.Post .Text { display: table-cell; width: 60%; vertical-align: top; padding-left: 15px; }
}

@media (min-width: 768px) {

.Masthead .ButtonMenu { display: none; }
.Masthead .Logo { padding-right: 20px; }

/* --------------------------------------------- */

.CalendarTitle { font-size: 16px; text-align: center; margin: 0px auto 30px auto; }
.CalendarTitle h1 { font-size: 50px; margin-bottom: 10px; }

/* --------------------------------------------- */

.MenuContainer { display: block; width:100%; height: auto; position: static; background-color: #ECECEC; border-bottom: solid 1px #CCCCCC; }
.MenuContent { display: block; padding: 10px 0px; }
.Menu { display: table; width: auto; max-width: 1200px; margin: 0px auto; padding: 0px; }
.Menu div { display: table-cell; width: auto; border-bottom: none 0px; padding: 5px; font-size: 12px; font-weight: 700; text-align: left; color: #333333; }
.Menu div a { color: #333333; }
.Menu div a:hover { text-decoration: underline; }
.Menu div:nth-child(1) { padding: 5px 20px; }
.Menu div:nth-child(2) { padding: 5px 20px; border-left: solid 1px #999999; border-right: solid 1px #999999; }
.Menu div:nth-child(3) { padding-left: 20px; text-align: left; }

/* --------------------------------------------- */

.FooterContainer { display: block; background-color: #000000; }
.FooterContent { display: block; max-width: 800px; padding: 0px; margin: 0px auto; }
.Footer { display: table; width: 100%; margin: 0px auto; }
.Footer div { display: table-cell; width:33%; vertical-align: top; padding: 20px; }
.Footer div a:hover { text-decoration: underline; color: #FFFFFF; }
.Footer div:nth-child(1) { padding-left: 0px; }
.Footer div:nth-child(2) { width: auto; }
.Footer div:nth-child(2) { padding-right: 0px; }
.Footer div:nth-child(3) { text-align: center; }

/* --------------------------------------------- */

}

@media (min-width: 800px) {

.Table { display: table; width: 100%; max-width: 1200px; margin: 0px auto; }
.Row { display: table-row; }

.Post { display: table-cell; width: 25%; vertical-align: top; padding: 20px 10px; border-bottom: solid 1px #ECECEC; }
.Post .Pic { display: block; width: auto; }
.Post .Text { display: block; width: auto; padding-left: 0px; }

}


@media (min-width: 1080px) {

.Menu div { font-size: 16px; text-align: center; }
.Menu div:nth-child(1) { text-align: right; }

}