/*

RESPONSTABLE 2.0 by jordyvanraaij
  Designed mobile first!

If you like this solution, you might also want to check out the 1.0 version:
  https://gist.github.com/jordyvanraaij/9069194

 

*/


.responstable {
  margin: 0em 0;
  width: 1000px;
  overflow: hidden;
  background: #fff;
  color: #024457;
  border-radius: 5px;
  border: 1px solid #167F92;
}
.responstable tr {
  border: 1px solid #D9E4E6;
}
.responstable tr:nth-child(odd) {
  background-color: #e5fdff;
}
.responstable th {
  display: none;
  border: 1px solid #FFF;
  background-color: #296a86;
  color: #FFF;
  padding: 1em;
}
.responstable th:first-child {
  display: table-cell;
  text-align: center;
}
.responstable th:nth-child(2) {
  display: table-cell;
}
.responstable th:nth-child(2) span {
  display: none;
}
.responstable th:nth-child(2):after {
  content: attr(data-th);
}
@media (min-width: 480px) {
  .responstable th:nth-child(2) span {
    display: block;
  }
  .responstable th:nth-child(2):after {
    display: none;
  }
}
.responstable td {
  display: block;
  word-wrap: break-word;
  max-width: 5.5em;
}
.responstable td:first-child {
  display: table-cell;
  text-align: center;
  border-right: 1px solid #D9E4E6;
}
@media (min-width: 480px) {
  .responstable td {
    border: 1px solid #D9E4E6;
  }
}
.responstable th, .responstable td {
  text-align: left;
  margin: .4em .4em;
}
@media (min-width: 480px) {
  .responstable th, .responstable td {
    display: table-cell;
    padding: 0.7em;
  }

@media (min-width: 480px) {
  .responstable th {
    display: table-cell;
    padding: 0.5em;
  }

}

body {
  padding: 0 0em;
  font-size: 14px;
  font-family: Arial, sans-serif;
   background: #eaeaea
}

h1 {
  font-weight: bold;
  color: #062b4f;
  font-size: 16px;
}

h2 {
  font-weight: bold;
  color: #062b4f;
  font-size: 13px;
}

h3 {
  font-weight: bold;
  color: #062b4f;
  font-size: 22px;
}

h4 {
  font-weight: bold;
  color: #062b4f;
  font-size: 16px;
}

h5 {
  font-weight: bold;
  color: #fff;
  font-size: 22px;
}


.loginBtn {
  box-sizing: border-box;
  position: relative;
  /* width: 13em;  - apply for fixed size */
  margin: 0.2em;
  padding: 0 15px 0 46px;
  border: none;
  text-align: left;
  line-height: 34px;
  white-space: nowrap;
  border-radius: 0.2em;
  font-size: 16px;
  color: #FFF;
}
.loginBtn:before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 100%;
}
.loginBtn:focus {
  outline: none;
}
.loginBtn:active {
  box-shadow: inset 0 0 0 32px rgba(0,0,0,0.1);
}


/* Facebook */
.loginBtn--facebook {
  background-color: #4C69BA;
  background-image: linear-gradient(#4C69BA, #3B55A0);
  /*font-family: "Helvetica neue", Helvetica Neue, Helvetica, Arial, sans-serif;*/
  text-shadow: 0 -1px 0 #354C8C;
}
.loginBtn--facebook:before {
  border-right: #364e92 1px solid;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_facebook.png') 6px 6px no-repeat;
}
.loginBtn--facebook:hover,
.loginBtn--facebook:focus {
  background-color: #5B7BD5;
  background-image: linear-gradient(#5B7BD5, #4864B1);
}


/* Google */
.loginBtn--google {
  /*font-family: "Roboto", Roboto, arial, sans-serif;*/
  background: #DD4B39;
}
.loginBtn--google:before {
  border-right: #BB3F30 1px solid;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_google.png') 6px 6px no-repeat;
}
.loginBtn--google:hover,
.loginBtn--google:focus {
  background: #E74B37;
}
.hidden { display: none; }



.login__header {
  background-color: #062b4f;
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
  padding: 1.5em;
  text-align: center;
  text-transform: uppercase;
}

.login__title {
  font-size: 16px;
  margin: 0;
}

.login__body {
  background-color: #fff;
  padding: 1.5em;
  text-align: center;
}


.login__footer {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #fff;
  border-bottom-left-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
  display: -webkit-box;
  display: -ms-flexbox;
  padding-bottom: 1.5em;
  padding-left: 70px;
  padding-right: 0;
  text-align: center;
  margin: 0;
}