html {
    width: 100%; height: 100%; margin: 0;

    font-family: 'Open Sans', sans-serif;
    -webkit-font-smoothing: antialiased; /* only works on mac-os */
}

body {
    margin: 0px;
    background-color: #F9F8F4; /*#F4F6F6;*/
}

.header   { grid-area: header; }
    .header-left   { grid-area: header-left; }
          .menu1  { grid-area: menu1; }
          .menu2  { grid-area: menu2; }
          .menu3  { grid-area: menu3; }
    .header-right  { grid-area: header-right; }
.heroic  { grid-area: heroic; }
.content  { grid-area: content; }
    .subject1       { grid-area: subject1; }
    .subject2       { grid-area: subject2; }
    .content1-left  { grid-area: content1-left; }
    .content1-right { grid-area: content1-right; }
    .content2-left  { grid-area: content2-left; }
    .content2-right { grid-area: content2-right; }
    .content3       { grid-area: content3; }
.sidebar  { grid-area: sidebar; }
.footer   { grid-area: footer; }
  .footer-left   { grid-area: footer-left; }
  .footer-right  { grid-area: footer-right; }

/* MOBILE VIEW */
@media screen and (max-width: 458px) {
    .wrapper {
        display: grid;
        grid-gap: 1em; /* Spacing among "header", "footer", "sidebar", "content" */
        grid-template-areas:
            "header"
            "heroic"
            "content"
            "sidebar"
            "footer";
        max-width: 458px;
    }
}

/* DESKTOP-TABLET VIEW */
@media screen and (min-width: 459px) {
    .wrapper {
        display: grid;
        grid-gap: 0em; /* Spacing among "header", "footer", "sidebar", "content" */
        grid-template-columns:  42.5% 42.5% auto;
        grid-template-areas:
            "header     header      header"
            "heroic    heroic     heroic"
            "content    content     sidebar"
            "footer     footer      footer";
            max-width: 1000px;
            margin: auto;
    }
}


.sidebar {

    padding: 20px;
    text-align: center;
    font-size: 100%;
    color: #fff;

    background-color: #F3F3F5; /* #525252; */
}

.header-right {
    text-align: center;
    font-size: 36px;
    color: #fff;
    outline: 2rem solid #0A0A0A;
    outline-offset: 14px;
    z-index: 3;
    margin-top:25px;
    padding-right: -30px;
    margin-right: -30px;
}


.menu1, .menu2, .menu3 {
    text-align: center;
    font-size: 20px;
    color: #fff;
    text-decoration: none;
    font-weight: bolder;
}

.header-left a:link, .header-left a:visited {
  text-decoration: none;
}

.header-left a:hover, .header-left a:active {
  background-color: #525252;
  color: white;
  text-decoration: underline !important;

}

.footer-right a:link, .footer-right a:visited {
  text-decoration: none;
  color: white;
  font-weight: bold;
}

.footer-right a:hover, .footer-right a:active {
  color: white;
  text-decoration: underline !important;

}


/* MOBILE VIEW */
@media screen and (max-width: 458px) {

  .header {
      display: grid;
      grid-gap: 2em;
      grid-template-rows: 40px auto;
      grid-template-areas:
          "header-right"
          "header-left";

      padding: 20px;

      background-color: #0A0A0A;
  }

  .header-right{
      margin-bottom: -20px;
  }

    .header-left {
        display: grid;
        grid-gap: 1em;
        grid-template-rows: 40px 40px 40px;
        grid-template-areas:
            "menu1"
            "menu2"
            "menu3";

        align-items: center; /* VERTICALLY aligns all "grid-template-rows" */
        padding: 20px;
        margin-top: 5px;
        background-color: #0A0A0A; /* #F3F3F5; /* #525252; /*#34495E;*/
        /*border-right : 1px solid  #E5E8E8;*/

        /*min-width: 125px;
        max-width: 125px;*/

        text-align: center;
        font-size: 100%;
        color: #fff;
    }

    .heroic {

        padding: 20px;
        text-align: center;
        background-color: #F3F3F3;
    }

    .heroic img{
        max-width: 99%;

    }

    .content {
        display: grid;
        grid-gap: 1em;
        grid-template-areas:
            "subject1"
            "subject2"
            "content1-left"
            "content1-right"
            "content2-left"
            "content2-right"
            "content3";

        max-width: 458px;
        justify-content: center;  /* HORIZONTALLY aligns all "grid-template-columns" */
        padding: 20px;

        background-color: #F3F3F3;
    }

    .footer {
        display: grid;
        grid-gap: 2em;
        grid-template-rows: 40px 40px;
        grid-template-areas:
            "footer-left"
            "footer-right";

        padding: 20px;
        background-color: #433852; /*#a2a2a2;*/

        text-align: center;
        font-size: 100%;
        color: #fff;
    }

}

/* DESKTOP-TABLET VIEW */
@media screen and (min-width: 459px) {


  .header {
      display: grid;
      grid-gap: 2em;
      grid-template-columns: 66% auto;
      grid-template-areas:
          "header-left  header-right";

      padding: 20px;

      background-color: #0A0A0A;
  }

    .header-left {
        display: grid;
        grid-gap: 1em;
        grid-template-columns: auto auto auto;
        grid-template-areas:
            "menu1  menu2  menu3";

        padding: 20px;
        background-color: #0A0A0A; /*#F3F3F5; /* #525252; /*#34495E;*/
        /*border-right : 1px solid  #E5E8E8;*/

        /*min-width: 125px;
        max-width: 125px;*/

        text-align: center;
        font-size: 100%;
        color: #fff;
    }


    .heroic {
        justify-content: center;  /* HORIZONTALLY aligns all "grid-template-columns" */

        text-align: center;
        background-color: #F3F3F3;
    }

    .heroic img{
        width: 100%;
    }

    .content {
        display: grid;
        grid-gap: 2em;
        grid-template-columns: 45% 45%;
        grid-template-areas:
            "subject1       subject1"
            "subject2       subject2"
            "content1-left  content1-right"
            "content2-left  content2-right"
            "content3       content3";

        max-width: 100%;
        justify-content: center;  /* HORIZONTALLY aligns all "grid-template-columns" */
        padding: 20px;

        background-color: #F3F3F3;
    }

    .footer {
        display: grid;
        grid-gap: 2em;
        grid-template-columns: 33% auto;
        grid-template-areas:
            "footer-left  footer-right";

        padding: 20px;

        background-color: #433852;

        text-align: center;
        font-size: 100%;
        color: #fff;
    }
    .footer-left {
        text-align: left;
        color: #fff;
        outline: 1.5rem solid #433852;
        outline-offset: 16px;
        z-index: 3;
        padding-left: -16px;
        margin-left: -16px;
    }


}
    .content-inner {
        padding: 10px;

        text-align: center;
        font-size: 80%;
        color: #444;

        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0px 0px 5px -2px #777777;
    }

/* Layout Content */

.laycona {
  text-align: center;
  font-size: 22px;
  color: #0A0A0A;
  font-weight: bold;
}
.layconb {
  text-align: center;
  font-size: 20px;
  color: #433852;
  font-weight: bold;
}
.layconc {
  text-align: left !important;
  font-size: 16px;
  color: #0A0A0A;
  font-weight: normal;
}

.laycond {
  text-align: center;
  font-size: 20px;
  color: green;
  font-weight: bolder;
}
.layconf {
  text-align: center;
  font-size: 20px;
  color: red;
  font-weight: bolder;
}

.button-link {
    height:60px;
    padding: 10px 15px;
    background: #433852;
    color: #FFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #20538D;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    text-decoration: none;

}
.button-link:hover {
    background: #674adc;
    border: solid 1px #2A4E77;
    text-decoration: underline;
}


/* Forms */


.contact_form input[type=text]{
  margin-top:16px;
  padding:10px;
  border:0;
  box-shadow:0 0 15px 4px rgba(0,0,0,0.3);

  width:80%;
  border-radius:10px;
}
.contact_form input[type=email]{
  margin-top:16px;
  padding:10px;
  border:0;
  box-shadow:0 0 15px 4px rgba(0,0,0,0.3);

  width:80%;
  border-radius:10px;
}
#message {
  margin-top:16px;
  padding:10px;
  border:0;
  box-shadow:0 0 15px 4px rgba(0,0,0,0.3);

  width:80%;
  border-radius:10px;
}



.login_form input[type=text]{
  margin-right:16px;
  padding:10px;
  border:0;
  box-shadow:0 0 15px 4px rgba(0,0,0,0.3);

  width:30%;
  border-radius:10px;
}
.login_form input[type=password]{
  padding:10px;
  border:0;
  box-shadow:0 0 15px 4px rgba(0,0,0,0.3);

  width:30%;
  border-radius:10px;
}