/*

    screen.css

    Colours
    -------
    Orange          #ff8b10 (255,139,16)
    Dark Orange     #c86224 (200,98,36)
    Light Purple    #7352e6 (115,82,230)
    Purple          #5941bf (89,65,191)
    Dark Purple     #2f2f2f (47,47,47)
    Gold            #ffd700 (215,215,0)

*/

/*----------------------------------------------------
  Global Styles
----------------------------------------------------*/

html {
  background-color: #fff;
}
body {
  width: 100%;
  margin: 0 auto;
  background-color: #fff;
  font: Helvetica, sans-serif;
  color: #fff;
}
img {
  width: 100%;
}

/*----------------------------------------------------
  Typography
----------------------------------------------------*/

h1 {
  font-size: 1.5em;
  color: #fff;
  text-align: center;
}
h2 {
  background-color: #ddd;
  color: #000;
  font-size: 1.4em;
  padding: 2%;
  margin: 5% 0 2%;
}
p {
  color: #000;
}
a {
  text-decoration: none;
  color: #ff8b10;
}
ol {
  color: #000;
  text-align: left;
}
table {
  width: 100%;
  padding: 2% 2%;
  color: #000;
  text-align: center;
}
thead  {
  background-color: #ddd;
  opacity: .7;
  font-weight: 700;
}
th, td {
  padding: 1em;
  border: 1px solid #ccc;
  text-align: center;
}
table span {
  display: none;
}

/*----------------------------------------------------
  Navigation
----------------------------------------------------*/

nav {
  width: auto;
  margin: 6% 5% 2% 5%;
  border: 1px dotted #424242;
}
.menu-collapser {
  background-color: #2f2f2f;
  text-align: center;
}
.slimmenu {
  text-align: center;
}
.slimmenu ul > li a {
  display: inline-block;
}
.slimmenu li > ul {
  color: #fff;
}
.reg-text {
  color: #c86224;
}

/*----------------------------------------------------
  Layout
----------------------------------------------------*/

/* Header */

header {
  background-color: #2f2f2f;
  position: relative;
}
#logo {
  font-size: 1.5em;
  position: absolute;
  width: 25%;
  height: 50%;
  background: url("http://toky0.org/images/logo.svg") no-repeat 0 0;
  background-size: contain;
  display: block;
  top: 0px;
  left: 2%;
}
#logo span {
  display: none;
}
.language {
  width: 98%;
  text-align: right;
  margin: 1% 1% 0 0;
  padding: 0;
}
.language a  {
  display: inline-block;
  background-color: #2f2f2f;
  font-size: .8em;
}
.fa {
  margin-left: 5px;
}
.hero {
  position: relative;
  background-color: #fff;
}
.hero h1 {
  position: absolute;
  top: 5%;
  left: 5%;
  font-size: 2em;
}
.announcement {
  text-align: center;
}
.announcement p {
  text-align: center;
  color: #c86224;
  font-size: .9em;
  border: 1px solid #aaa;
  padding: 10px 0px;
}

/* Main Content */

.about-journey {
  line-height: 1.5em;
  margin: 0 0 5%;
  padding: 0 5%;
}
.about-journey h2 {
  text-align: center;
}

/* Gallery */

.feature {
  position: relative;
}
.feature p {
  position: absolute;
  bottom: 5px;
  color: #ff8b10;
  text-align: center;
  width: 100%;
  font-size: 1.5em;
  padding: 2% 0;
  background-color: #2f2f2f;
  opacity: .7;
  filter: alpha(opacity=70);
}
.feature img {
  margin: 2% 0;
}

/* Footer */

footer {
  background-color: #424242;
  padding: 2%;
}
footer ul {
  text-align: center; 
  padding: 10px;
  margin: 1%;
}
footer li {
  display: block;
  padding: 2%;
  margin: 1% 0;
  border: 1px dotted #2f2f2f;
}
footer a {
  display: block;
}

/*----------------------------------------------------
  Break Points
----------------------------------------------------*/

@media screen and (min-width: 800px) {
   h2 {
    color: #fff;
    background-color: inherit;
    font-size: 1.3em;
    padding: 2% 0 1% 0;
    border-bottom: 3px dashed #fff;
    text-align: left;
  }
  p {
    color: #fff;
  }
  ol {
    color: #fff;
  }
  table {
    padding: 2% 2%;
    width: 100%;
    color: #000;
    text-align: center;
  }
  thead  {
    background-color: #ddd;
    opacity: .7;
    font-weight: 700;
  }
  tbody {
    text-align:  justify;
  }
  th, td {
    padding: 1em;
    border: 1px solid #ccc;
    text-align: center;
    width: 33.33%;
  }
  table span {
    display: inline;
  }
  nav {
    margin: 4% 2% 1%;
    padding: 1%;
    border: none;
    border: 1px dotted #424242;
  }
  .slimmenu {
    background-color: #2f2f2f;
  }
  nav li {
    border: none;
    width: 33.33%;
    margin: auto;
  }
  nav li ul li {
    width: 100%;
    display: block;
  }
  .announcement {
    margin: 1%;
  }
  .announcement span {
    display: inline;
  }
  .announcement p {
    width: 100%;
    margin: 0 auto;
  }
  .about-journey {
    background-color: #5941bf;
    text-align: left;
    padding: 0 2% 5%;
  }
  .about-journey h2 {
    text-align:  left;
    padding-top: 2%;
  }
  .about-journey p {
    padding: 0 2%;
  }
  .about-journey ol {
    padding: 0 2%;
  }
  .gallery {
    padding: 0 2% 5% 2%;
    margin: -4% 0;
  }
  .gallery table {
    padding: 0 4% 0 0;
  }
  .feature {
    margin: 2% 2%;
  }
}

@media screen and (min-width: 960px) {
  body {
    max-width: 90%;
    box-shadow: 20px 10px 5px #eee;
  }
}