/* 
Color Scheme:
Teal - 
#e6ffff - Light 
#009999 - Medium 
#008080 - Teal 
#004d4d - Dark

Teal-Grey - 
 #b3cccc - Light
 #5c8a8a - Medium  
 #305050- Dark 

Black - 
#0a0f0f

White - 
#fcfcfc

*/

* {
  box-sizing: border-box;
}

@font-face {
  font-family: lato;
  src: url(Lato-Regular.ttf);
}

.row {
  margin: 0 10px;
}

[class*="col-"] {
  width: 100%;
}

body {
  margin: auto;
  background-color: #ffffff;
  font-size: 1.3em;
  font-family: lato;
  padding: 24px;
}

header {
  padding-top: 30px;
  padding-bottom: 20px;
  margin: 20px 0px;
  background: url(../resources/header.png) repeat-x center;
}

header h1 {
  height: 90px;
  font-size: 2em;
  text-align: center;
  margin: auto;
}

h1 {
  color: #0c1a1a;
}

nav {
  padding-left: 12px; 
}

nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none; 
  font-size: 1.2rem;
  text-align: center;
}

nav li {
  margin-top: 40px;
  font-weight: bolder;
  line-height: 20px;
  padding: 5px;
  display: block;
}

nav a,
a:link,
a:visited,
nav button {
  padding-left: 12px;
  padding-right: 12px;
  color: #295454;
  text-decoration: none;
  width: 100%;
}

nav button {
  border: 3px solid #295454;
  border-radius: 10px;
  background-color: #ffffff;
  font-size: 1.2rem;
  width: 195px;
  font-family: lato;
}

.arrow-nav {
  border: 2px double #295454;
  border-width: 0 4px 4px 0;
  display: inline-block;
  padding: 4.5px;
}

.right {
  transform: rotate(-45deg);
}

nav .flyout-content {
  display: none;
}

nav .flyout-nav:hover .flyout-content {
  margin-top: 5px;
  display: block;
}

nav .flyout-nav button {
  border-top-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

nav a:hover {
  font-weight: bolder;
  transition: 1s background-color;
  color: #91bebe;
}

.head {
  text-align: center;
  font-size: 1.8em;
}

h2 {
  font-size: 1.4em;
  margin-top: 20px;
  margin-bottom: 20px;
  color: #2c6767;
  text-align: center;
}

h3,
.color_h2 {
  font-size: 1.4em;
  margin-top: 20px;
  margin-bottom: 20px;
  color: #689090;
  text-align: center;
}

h4,
h5 {
  font-size: 1.3em;
  margin-top: 40px;
  margin-bottom: 40px;
  color: #6a9ba3;
  text-align: center;
}

.icon {
  font-size: 1em;
  margin-top: 40px;
  margin-bottom: 40px;
  color: #6a9ba3;
}

.icon a {
  font-size: 1em;
  margin-top: 40px;
  margin-bottom: 40px;
  color: #b0d2d8;
}

table {
  border-collapse: collapse;
  padding: 40px 40px;
  margin: 0;
  font-size: 1.2rem;
  width: 700px;
  height: 700px;
}

aside h2 {
  text-align: center;
}

td,
tr,
th {
  padding: 6px 8px 14px 14px;
}

main section, aside section { 
  padding-bottom: 12px;
  padding-top: 12px;
  padding-right: 20px; 
  padding-left: 10px; 
  margin-right: 20px; 
}

main section h2,
h3 {
  color: #295454;
  text-align: left;
}

main section p,
ul {
  color: #000000;
  font-size: 1.2rem;
}

main section.url {
  float: left;
  text-align: center;
}

main section img {
  float: left;
  margin-right: 40px;
  margin-bottom: 10px;
  margin-left: 40px;
}

main section.web {
  background-color: #a3c4c4;
  box-shadow: 4px 4px 12px #2c6767;
  margin-top: 20px;
  padding-left: 30px;
  border-radius: 20px;
}

main section.tutorial {
  background-color: #d8e9e9;
  box-shadow: 4px 4px 12px #2c6767;
  margin-top: 20px;
  padding-left: 30px;
  border-radius: 20px;
}

main section.concepts {
  background-image: linear-gradient(
    to right,
    #fefefe,
    #66b1b1
  ); /*Background Gradient*/
  box-shadow: 4px 4px 12px #2c6767;
  margin-top: 20px;
  padding-left: 30px;
  border-radius: 20px;
}

main section.story {
  background-color: #a3c4c4;
  box-shadow: 4px 4px 12px #2c6767;
  margin-top: 20px;
  padding-left: 30px;
  border-radius: 20px;
  padding-bottom: 20px;
}

main section.landmarks {
  background-color: #d8e9e9;
  box-shadow: 4px 4px 12px #2c6767;
  margin-top: 20px;
  padding-left: 30px;
  border-radius: 20px;
}

main section.london {
  background-image: linear-gradient(
    to right,
    #fefefe,
    #66b1b1); 
  box-shadow: 4px 4px 12px #2c6767;
  margin-top: 20px;
  padding-left: 30px;
  border-radius: 20px;
}

main section.animate {
  background-color: #a3c4c4;
  box-shadow: 4px 4px 12px #2c6767;
  margin-top: 20px;
  padding-left: 30px;
  border-radius: 20px;
  margin-bottom: 50px;
}


aside.done {
  box-shadow: 4px 4px 12px #2c6767;
  border-radius: 20px;
  margin-top: 20px;
  margin-bottom: 50px;
}

aside.final {
  box-shadow: 4px 4px 12px #2c6767;
  border-radius: 20px;
  padding-top: 8px;
  margin-bottom: 20px;
}


.aside {
  box-shadow: 4px 4px 12px #2c6767;
  border-radius: 20px;
  padding-top: 8px;
  margin-bottom: 20px; 
  margin-top: 40px;
  font-size: 16px;
  margin-right: 30px; 
  text-align: center;
}

.aside hr {
  width: 200px; 
}
aside h3 {
  text-align: center;
  padding-top: 12px;
}

aside p {
  padding-bottom: 30px;
  padding-left: 30px;
  font-size: 1.2em;
}

aside img {
  float: left;
  margin-right: 40px;
  margin-left: 30px;
}

.info hr {
  width: 800px;
}

main section {
  display: inline-block;
}

button {
  background-color: #c2d6da;
  box-shadow: 4px 4px 12px #93a7ab;
  border: none;
  margin: 12px 10px 10px 12px;
  padding: 10px;
  font-size: 18px;
  display: inline-block;
  border-radius: 10px;
}

.center-img {
  display: block;
  margin-left: 100px;
  margin-right: 100px;
}

.center-button {
  display: inline-block; 
  text-align: center; 
  width: 100%;
  font-size: 24px;
}

.more-info, .list {
  text-align: center;
}


.info p { 
  margin-top: 20px;
  font-size: 1.3rem;
  margin-bottom: 50px;
}

footer {
  text-align: center;
}

footer hr {
  padding-top: 20px;
  width: 80px;
}

/*Tablet View*/
@media only screen and (min-width: 780px) {

  [class*="col-"] {
    width: 100%;
  }
  
  /* Grid System */
  .col-m-1 {
    width: 8.33%;
  }
  .col-m-2 {
    width: 16.66%;
  }
  .col-m-3 {
    width: 25%;
  }
  .col-m-4 {
    width: 33.33%;
  }
  .col-m-5 {
    width: 41.66%;
  }
  .col-m-6 {
    width: 50%;
  }
  .col-m-7 {
    width: 58.33%;
  }
  .col-m-8 {
    width: 66.66%;
  }
  .col-m-9 {
    width: 75%;
  }
  .col-m-10 {
    width: 83.33%;
  }
  .col-m-11 {
    width: 91.66%;
  }
  .col-m-12 {
    width: 100%;
  }

  table {
    width: 800px;
    height: 800px;
  }

  nav ul {
    padding-right: 20px; 
  }

  nav .flyout-nav {
    display: block;
  }

  nav a:link,
  nav a:visited,
  nav button {
    width: 100px; 
  }

  nav .flyout-content {
    position: relative; 
    display: none;
  }

}

/*Desktop View*/
@media only screen and (min-width: 1120px) {
  /*CSS Grid System*/
  .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%;
  }

  main section {
    padding-bottom: 12px;
    margin-left: 80px;
    padding-top: 12px;
  }

  table {
    width: 900px;
    height: 1200px;
  }

  .prop_padding {
    float: left;
  }
  .prop_margin {
    float: right;
  }

  nav .flyout-content {
    display: none;
    position: relative;
    width: 100%;
    left: 100px;
  }

  nav a:link,
  nav a:visited,
  nav button {
    width: 160px;
  }

  .center-button {
    display: inline-block; 
    width: 100%;
    font-size: 24px;
  }

}

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

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