/* Style the page in general */
* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  margin: 0;
  padding: 30px 10px;
}

#language-selector {
    margin-bottom: 10px;
    margin-right: 5px;
    display: block;
    background: none;
    border: 2px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    float: right;
}

#language-selector > option {
    background: none;
    color: black;
}

#account-box > [type="button"] {
  margin-bottom: 10px;
  margin-right: 5px;
  display: block;
  background: none;
  border: 2px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
  float: right;
}

#account-box > [type="button"]:hover {
    cursor: pointer;
}

#account-box > [type="button"]:active {
    /*color: #ffffff;*/
    text-shadow:
        0 0 7px #ffffff,
        0 0 10px #ffffff,
        0 0 21px #ffffff,
        0 0 42px #b60ab6,
        0 0 82px #b60ab6,
        0 0 92px #b60ab6,
        0 0 102px #b60ab6,
        0 0 151px #b60ab6;
}

h1 {
  margin: 0;
  clear: right;
  font-size: 120%;
}

/* Style the navigation menu */
/*ul {*/
#navigation-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  white-space: nowrap;
  background-image: linear-gradient(180deg, #F22B00 10%, #D52600 50%);
  background-color: #D52600;
}

/*li {
  /*float: left;*
  display: inline-block;
}*/

/*li a {*/
#navigation-menu > a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

/*li a:hover {*/
#navigation-menu > a:hover {
  background-color: #F22B00;
  cursor: pointer;
}

/*li a:active {*/
#navigation-menu > a:active {
  /*border: 3px inset rgba(255, 255, 255, 0.3);*/
  text-shadow:
    0 0 7px #ffffff,
    0 0 10px #ffffff,
    0 0 21px #ffffff,
    0 0 42px #b60ab6,
    0 0 82px #b60ab6,
    0 0 92px #b60ab6,
    0 0 102px #b60ab6,
    0 0 151px #b60ab6;
}

/* Make the body's main content responsive */
#body-main {
  padding: 15px 10px;
  display: -webkit-flex;
  display: -ms-flex;
  display: -moz-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -o-box;
  display: -o-flexbox;
  display: flex;
  flex-wrap: wrap;
}

#body-left-fixed {
  padding: 15px 10px;
  -webkit-flex: 100%;
  -ms-flex: 100%;
  -moz-flex: 100%;
  -o-flex: 100%;
  -webkit-box: 100%;
  -moz-box: 100%;
  -ms-flexbox: 100%;
  -o-box: 100%;
  -o-flexbox: 100%;
  flex: 100%;
  position: -webkit-sticky; /* Safari */
  position: -ms-sticky;
  position: -moz-sticky;
  position: -o-sticky;
  position: sticky;
  top: 0;
  height: 100px;
  overflow: hidden;
  z-index: 2;
}

#body-left-fixed img {
  max-width: 100%;
  position: absolute;
  top: 0;
  /*margin-top: -60%;*/
  /*content: url('images/Advertise-1-Mobile.jpg');*/ /* How to set image size with this method */
}

#body-scroll {
  -webkit-flex: 100%;
  -ms-flex: 100%;
  -moz-flex: 100%;
  -o-flex: 100%;
  -webkit-box: 100%;
  -moz-box: 100%;
  -ms-flexbox: 100%;
  -o-box: 100%;
  -o-flexbox: 100%;
  flex: 100%;
  display: -webkit-flex;
  display: -ms-flex;
  display: -moz-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -o-box;
  display: -o-flexbox;
  display: flex;
  flex-wrap: wrap;
}

#body-top-list {
  padding: 15px 10px;
  -webkit-flex: 100%;
  -ms-flex: 100%;
  -moz-flex: 100%;
  -o-flex: 100%;
  -webkit-box: 100%;
  -moz-box: 100%;
  -ms-flexbox: 100%;
  -o-box: 100%;
  -o-flexbox: 100%;
  flex: 100%;
}

#body-content {
  padding: 15px 10px;
  -webkit-flex: 100%;
  -ms-flex: 100%;
  -moz-flex: 100%;
  -o-flex: 100%;
  -webkit-box: 100%;
  -moz-box: 100%;
  -ms-flexbox: 100%;
  -o-box: 100%;
  -o-flexbox: 100%;
  flex: 100%;
}

#body-right {
  padding: 15px 10px;
  -webkit-flex: 100%;
  -ms-flex: 100%;
  -moz-flex: 100%;
  -o-flex: 100%;
  -webkit-box: 100%;
  -moz-box: 100%;
  -ms-flexbox: 100%;
  -o-box: 100%;
  -o-flexbox: 100%;
  flex: 100%;
}

#body-right img {
  max-width: 100%;
  margin: auto;
}

/*#body-content figure {*/
#body-content figcaption {
  font-style: italic;
  text-align: center;
  /*width: 100%;*/
}

#body-content img {
  display: block;
  max-width: 100%;
  margin: auto;
}

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */
}

@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
  
}

@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
  h1 {
    font-size: 125%;
  }

  #body-left-fixed {
    -webkit-flex: 20%;
    -ms-flex: 20%;
    -moz-flex: 20%;
    -o-flex: 20%;
    -webkit-box: 20%;
    -moz-box: 20%;
    -ms-flexbox: 20%;
    -o-box: 20%;
    -o-flexbox: 20%;
    flex: 20%;
    position: static;
    height: initial;
    overflow: initial;
  }
  
  #body-left-fixed img {
    position: -webkit-sticky; /* Safari */
    position: -ms-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: sticky;
    top: 0;
    margin-top: initial;
    /*content: url('images/Advertise-1-Desktop.png');*/
    /*width: 100%;*/
  }

  #body-scroll {
    -webkit-flex: 80%;
    -ms-flex: 80%;
    -moz-flex: 80%;
    -o-flex: 80%;
    -webkit-box: 80%;
    -moz-box: 80%;
    -ms-flexbox: 80%;
    -o-box: 80%;
    -o-flexbox: 80%;
    flex: 80%;
  }
}

@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */
  h1 {
    font-size: 150%;
  }
  
  #body-top-list {
    -webkit-flex: 25%;
    -ms-flex: 25%;
    -moz-flex: 25%;
    -o-flex: 25%;
    -webkit-box: 25%;
    -moz-box: 25%;
    -ms-flexbox: 25%;
    -o-box: 25%;
    -o-flexbox: 25%;
    flex: 25%;
  }
  
  #body-content {
    -webkit-flex: 75%;
    -ms-flex: 75%;
    -moz-flex: 75%;
    -o-flex: 75%;
    -webkit-box: 75%;
    -moz-box: 75%;
    -ms-flexbox: 75%;
    -o-box: 75%;
    -o-flexbox: 75%;
    flex: 75%;
  }
  
  #body-right {
    -webkit-flex: 100%;
    -ms-flex: 100%;
    -moz-flex: 100%;
    -o-flex: 100%;
    -webkit-box: 100%;
    -moz-box: 100%;
    -ms-flexbox: 100%;
    -o-box: 100%;
    -o-flexbox: 100%;
    flex: 100%;
  }
}

@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */
  
}

@media (min-width:1281px) { /* hi-res laptops and desktops */
  h1 {
    font-size: 200%;
  }
  
  #body-top-list {
    -webkit-flex: 20%;
    -ms-flex: 20%;
    -moz-flex: 20%;
    -o-flex: 20%;
    -webkit-box: 20%;
    -moz-box: 20%;
    -ms-flexbox: 20%;
    -o-box: 20%;
    -o-flexbox: 20%;
    flex: 20%;
  }
  
  #body-content {
    -webkit-flex: 60%;
    -ms-flex: 60%;
    -moz-flex: 60%;
    -o-flex: 60%;
    -webkit-box: 60%;
    -moz-box: 60%;
    -ms-flexbox: 60%;
    -o-box: 60%;
    -o-flexbox: 60%;
    flex: 60%;
  }
  
  #body-right {
    -webkit-flex: 20%;
    -ms-flex: 20%;
    -moz-flex: 20%;
    -o-flex: 20%;
    -webkit-box: 20%;
    -moz-box: 20%;
    -ms-flexbox: 20%;
    -o-box: 20%;
    -o-flexbox: 20%;
    flex: 20%;
  }
}

/* Style the top list */

#body-top-list {
  padding: 10px 15px;
  background: none;
  font-weight: 500;
}

/* Style the footer */

footer {
  background-image: linear-gradient(180deg, #F22B00 10%, #D52600 50%);
  background-color: #D52600;
  color: white;
  text-align: center;
  padding: 5px;
  font-size: 12px;
}