Responsive

css/base.css

@@ -3,19 +3,11 @@
    License: none (public domain)
 */
 
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
+html, body, div, span,
+h1, p, a, img,
+ul, li,
+footer, header,
+nav, section {
   margin: 0;
   padding: 0;
   border: 0;
@@ -24,29 +16,19 @@ time, mark, audio, video {
   font-family: 'Raleway', sans-serif;
   vertical-align: baseline;
 }
+
 /* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
+article, footer, header, nav, section {
   display: block;
 }
+
 body {
   line-height: 1;
 }
-ol, ul {
+
+ul {
   list-style: none;
 }
-blockquote, q {
-  quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-  content: '';
-  content: none;
-}
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
 
 img {
   max-width: 100%;

css/layout.css

@@ -1,29 +1,23 @@
-.titlePosition {
-  position: absolute;
-  right: 2%;
-  bottom: 10px;
-}
-
 .centerContent {
   margin: 0 auto;
   display: block;
 }
 
-.coverImage {
-  position: relative;
+.infoList li {
+  padding: 2%;
 }
 
-.ribbonPosition {
-  position: absolute;
-  bottom: 0;
-  height: 5em;
-  width: 100%;
+.titlePosition {
+  text-align: center;
 }
 
-.contact li {
-  padding: 2%;
+.bottomMargin {
+  margin-bottom: .7em;
 }
 
+.logoPosition {
+  display: none;
+}
 
 
 /* ============================================ */
@@ -1035,3 +1029,37 @@
     width: 100%;
   }
 }
+
+/*Tablet
+****************************************/
+
+@media (min-width: 64em) {
+
+  .titlePosition {
+    position: absolute;
+    left: 2%;
+    bottom: 10px;
+  }
+
+  .eventTitlePosition {
+    position: static;
+  }
+
+  .ribbonPosition {
+    position: absolute;
+    bottom: 0;
+    height: 5em;
+    width: 100%;
+  }
+
+  .eventContent {
+    margin: 1em 0 0 4em;
+  }
+
+  .logoPosition {
+    display: block;
+    position: absolute;
+    top: 1em;
+    right: 1em;
+  }
+}

css/module.css

@@ -2,7 +2,21 @@
   color: #fff;
   font-size: 3em;
   font-family: 'Raleway', sans-serif;
-  background-color:
+}
+
+.subTitle {
+  font-size: 2em;
+  color: #fff;
+  margin-bottom: .7em;
+}
+
+.coverImage {
+  position: relative;
+  background-color: rgb(120, 120, 120);
+}
+
+.fullWidth {
+  width: 100%;
 }
 
 .greenSection {
@@ -11,18 +25,24 @@
   text-align: center;
 }
 
-.link {
+.bigLink {
   color: #fff;
   font-size: 1.5em;
   display: block;
+  margin-bottom: 1.5em;
+  text-decoration: underline;
 }
 
 .sectionPadding {
   padding: 10%;
 }
 
-.ribbonStyle {
-  background-color: rgba(120, 120, 120, .65);
+.topBottomPadding {
+  padding: 10% 0;
+}
+
+.orangeSection {
+  background-color: #CF7019;
 }
 
 strong {
@@ -38,6 +58,94 @@ footer {
 }
 
 .icon {
-  max-width: 30%;
+  width: 5em;
   margin: 1%;
 }
+
+.infoList {
+  font-size: 1.3em;
+}
+
+.flexContainer {
+    display:flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+}
+
+.hideMobile {
+  display: none;
+}
+
+.event img {
+  margin: 1em 0 .5em 0;
+}
+
+.eventText {
+  font-size: 1.1em;
+  color: #fff;
+  line-height: 1.2em;
+}
+
+.smallLink {
+  display: block;
+  background-color: rgb(0, 160, 165);
+  text-align: center;
+  color: #FFF;
+  margin: .5em 0;
+  padding: .3em 0;
+  text-decoration: underline;
+}
+
+ .event img {
+    max-width: 22.5em;
+  }
+
+
+/*Tablet & Desktop
+****************************************/
+
+@media (min-width: 64em) {
+
+  .titleStyle {
+  color: #fff;
+  font-size: 3em;
+  font-family: 'Raleway', sans-serif;
+  }
+
+  .ribbonStyle {
+  background-color: rgba(120, 120, 120, .65);
+  }
+
+  .hideMobile {
+    display: inline;
+  }
+
+  .bigLink {
+    text-decoration: none;
+  }
+
+  .flexContainer {
+    display:flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+  }
+
+  .orangeSection {
+    padding: 10%;
+  }
+
+  .eventText {
+    line-height: 1.3em;
+  }
+
+  .smallLink {
+    text-decoration: none;
+  }
+
+}

css/state.css

@@ -1,3 +1,8 @@
-.link:hover {
+.bigLink:hover {
   color: #aaa;
 }
+
+.smallLink:hover {
+  background-color: rgb(0, 121, 125);
+  transition: .5s;
+}