@charset "utf-8";
/* CSS Document */
* {
  box-sizing: border-box;
}
/*Images*/
/*If the width property is set to a percentage and the height property is set to "auto", the image will be responsive and scale up and down*/
/*If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size*/
img {
  width: 100%;
  height: auto;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}

html {
  font-family: "Lucida Sans", sans-serif;
}

/* Headings */

.header {
  background-color: #17BEBB;
  color: #2E282A;
  padding: 15px;
  text-align: center;
}

/* Navigation */
/* Add a background color to the top navigation */
.topnav {
  overflow: hidden;
  background-color: #fff;
}
/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #2E282A;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #17BEBB;
  color: #2E282A;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}
/* Media Queries */
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/* Menu or Left Aside */

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: #FFDE70;
  color: #2E282A;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
  background-color: #F2A792;
}

/* Aside */

.aside {
  background-color: #F2A792;
  padding: 15px;
  color: #2E282A;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

ol {
    list-style-type: none;
    font-size: 14px;
    text-align: center;
}

/* Footer */

.footer {
  background-color: #17BEBB;
  color: #2E282A;
  text-align: center;
  font-size: 12px;
  padding: 15px;
}

/* Media Queries */

/*Instead of changing styles when the width gets smaller than 768px, we should change the design when the width gets larger than 768px. This will make our design Mobile First*/
/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}
/*We do this by adding one more media query (at 600px), and a set of new classes for devices larger than 600px (but smaller than 768px)*/
@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

/* Media Queries */

/*The web page will have a Platinum background if the orientation is in landscape mode*/
body {
  background-color: #EBEBEB;
}
@media only screen and (orientation: landscape) {
  body {
    background-color: #fff;
  }
}

/* If the screen size is 601px or more, set the font-size of <div> to 80px */
@media only screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}

/* If the screen size is 600px or less, set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}