html,
body{
  padding:0;
  margin:0;
  font-family:'IBM Plex Mono',Arial,Helvetica,sans-serif;
}

h1,h2,p{
  margin:0;
  padding:0;
}

.mobile-only{
  display:none;
}
@media (max-width: 768px) {
  .mobile-only{
    display:block;
  }
}

.alt{
  position:absolute;
  height:1px;
  width:1px;
  opacity:0;
  overflow:hidden;
}

/* Top bar with language selector */
.options-bar{
  width:100%;
  background:#2c2d2e;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  box-sizing:border-box;
}
@media (max-width: 768px) {
  .options-bar{
    
  }
}
.lang-select{
  font-family:Arial,Helvetica,sans-serif;
  font-size:14px;
  line-height:40px;
  padding:0 28px 0 15px;
  border:none;
  color:rgba(255,255,255,.8);
  cursor:pointer;
  transition:all .5s ease;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-color:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:12px;
}
.lang-select option{
  background:#fff;
  color:#000;
}
.lang-select:hover{
  color:#fff;
  background-color:rgba(255,255,255,.2);
}
.lang-select:focus{
  outline:none;
}
@media (max-width: 768px) {
  .lang-select{
    font-size:12px;
    line-height:34px;
    padding:0 25px 0 15px;
    background-size:10px;
  }
}

.header,
.standards,
.assessment,
.site-footer{
  max-width:1200px;
  margin:0 auto;
  box-sizing:border-box;
}

/* Header */

.header{
  position:relative;
  padding:60px;
  padding-left:145px;
}
.header a:link{
  text-decoration:none;
}
@media (max-width: 768px) {
  .header{
    padding:30px;
    padding-left:85px;
  }
}
.logo-icon{
  width:50px;
  height:auto;
}
.header .logo-icon{
  position:absolute;
  left:55px;
  top:50%;
  transform:translateY(-50%);
  
  width:75px;
  height:auto;
}
@media (max-width: 768px) {
  .header .logo-icon{
    left:25px;
    width:50px;
  }
}
.logo-title{
  font-size:35px;
  font-weight:700;
  color:#000;
  margin:0;
}
@media (max-width: 768px) {
  .logo-title{
    font-size:25px;
  }
}
.logo-subtitle{
  font-size:20px;
  font-weight:500;
  color:rgba(0,0,0,.4);
}
@media (max-width: 768px) {
  .logo-subtitle{
    font-size:11px;
  }
}

/* Home */

.home{
  background:rgba(0,0,0,.05);
  text-align:center;
}

.home .logo-badge{
  height:90px;
  width:auto;
}
.home .logo-icon{
  margin-right:8px;
  width:42px;
  vertical-align:middle;
  position:relative;
  top:-5px;
}
.home .logo-title{
  font-size:50px;
  margin-top:10px;
  vertical-align:middle;
  line-height:0;
}

@media (max-width: 768px) {
  .home .logo-badge{
    height:60px;
    width:auto;
  }
  .home .logo-title{
    font-size:40px;
  }
  .home .logo-icon{
    margin-right:5px;
    width:32px;
    top:-5px;
  }
}

.home-content{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:80%;
  max-width:800px;
}
.home .logo-subtitle{
  font-size:18px;
  margin-top:10px;
}
@media (max-width: 768px) {
  .home .logo-subtitle{
    font-size:11px;
  }
}

.home-intro{
  font-size:21px;
  font-weight:400;
  line-height:40px;
  color:#000;
  margin-top:20px;
}
.home-intro u{
  text-decoration-thickness:4px;
  text-underline-offset:4px;
  text-decoration-color:rgba(0,0,0,.2);
}
@media (max-width: 768px) {
  .home-intro{
    font-size:15px;
    line-height:27px;
  }
  .home-intro u{
    text-decoration-thickness:3px;
    text-underline-offset:3px;
  }
}

.home-actions{
  margin-top:15px;
}
.btn{
  position:relative;
  display:inline-block;
  padding:14px 50px 14px 28px;
  margin-top:20px;
  font-size:15px;
  font-weight:500;
  font-family:'IBM Plex Mono',Arial,Helvetica,sans-serif;
  color:#000;
  background:#fff;
  box-shadow:0 10px 20px rgba(0,0,0,.1);
  border-radius:5px;
  text-decoration:none;
  transition:all .15s ease;
}
.btn.main{
  font-size:20px;
  padding:20px 70px 20px 50px;
}
.btn:not(.main){
  background:rgba(0,0,0,.07);
  color:#000;
  box-shadow:none;
}
.btn:before{
  content:"\00bb";
  position:absolute;
  right:20px;
  top:50%;
  margin-top:-1px;
  transform:translateY(-50%);
  font-size:20px;
  line-height:15px;
  font-weight:700;
  color:rgba(0,0,0,.3);
  transition:all .15s ease;
}
.btn.main:before{
  right:30px;
  font-size:23px;
}

.btn:hover{
  background:#000;
  color:#fff;
}
.btn:hover:before{
  color:rgba(255,255,255,.6);
}

@media (max-width: 768px) {
  .home-actions{
    margin-top:5px;
  }
  .btn{
    font-size:12px;
    padding:14px 40px 14px 20px;
  }
  .btn:before{
    right:15px;
    font-size:18px;
  }
  .btn.main{
    font-size:16px;
    padding:18px 60px 18px 40px;
  }
  .btn.main:before{
    right:25px;
  }
}

.home-footer{
  margin-top:50px;
}
.home-footer .standard{
  font-size:18px;
  font-weight:500;
  color:rgba(0,0,0,.4);
  margin-top:10px;
}
.home-footer .steward{
  font-size:14px;
  font-weight:500;
  color:rgba(0,0,0,.3);
  margin-top:10px;
}
.home-footer .steward a{
  color:rgba(0,0,0,.3);
  text-decoration:none;
}
.home-footer .steward a:hover{
  text-decoration:underline;
}

.home-footer .policies{
  font-size:12px;
  font-weight:500;
  letter-spacing:2px;
  color:rgba(0,0,0,.3);
  margin-top:10px;
}
.home-footer .policies a{
  color:rgba(0,0,0,.3);
  text-decoration:none;
}
.home-footer .policies a:hover{
  text-decoration:underline;
}

@media (max-width: 768px) {
  .home-footer{
    margin-top:30px;
  }
  .home-footer .standard{
    font-size:14px;
  }
  .home-footer .steward{
    font-size:12px;
  }
  .home .policies{
    font-size:10px;
    bottom:20px;
  }
}

.site-footer{
  text-align:left;
  padding:70px 60px;
  margin-top:0;
}
.site-footer .standard{
  margin-top:0;
}
@media (max-width: 768px) {
  .site-footer{
    padding:40px 30px;
  }
}

/* Standards */

.standards-wrapper{
  background:rgba(0,0,0,.05);
}
.standards{
  padding:60px;
}
@media (max-width: 768px) {
  .standards{
    padding:30px;
  }
}

.version{
  font-size:42px;
  font-weight:bold;
  color:rgba(0,0,0,.2);
}
@media (max-width: 768px) {
  .version{
    font-size:28px;
  }
}

p.intro,
p.outro{
  font-size:18px;
  font-weight:400;
  line-height:35px;
  color:#000;
  margin-top:20px;
}
@media (max-width: 768px) {
  p.intro,
  p.outro{
    font-size:14px;
    line-height:25px;
  }
}
p.outro{
  margin-top:70px;
}
p.outro:not(:first-child){
  margin-top:20px;
}
p.outro:last-child{
  margin-bottom:20px;
}

.standards .standard{
  position:relative;
  margin-top:80px;
  padding-left:40px;
  padding-top:10px;
  padding-bottom:10px;
}
@media (max-width: 768px) {
  .standards .standard{
    margin-top:50px;
    padding-left:30px;
  }
}
.standards .standard .bar{
  position:absolute;
  left:0;
  top:0;
  width:12px;
  height:100%;
  background:#000;
}
.standards .standard .bar:before,
.standards .standard .bar:after{
  content:"";
  position:absolute;
  top:100%;left:0;
  width:100%;
  margin-top:5px;
  height:5px;
  background:#000;
}
.standards .standard .bar:after{
  margin-top:15px;
}
@media (max-width: 768px) {
  .standards .standard .bar{
    width:10px;
  }
  .standards .standard .bar:before,
  .standards .standard .bar:after{
    height:4px;
  }
  .standards .standard .bar:before{
    margin-top:4px;
  }
  .standards .standard .bar:after{
    margin-top:12px;
  }
}
.standards .standard .n{
  position:absolute;
  left:-3px;
  top:-30px;
  font-size:30px;
  line-height:25px;
  font-weight:700;
  color:#000;
}
@media (max-width: 768px) {
  .standards .standard .n{
    font-size:22px;
    top:-25px;
    left:-2px;
  }
}
.standards .standard .title{
  font-size:30px;
  font-weight:700;
  color:#000;
}
@media (max-width: 768px) {
  .standards .standard .title{
    font-size:22px;
  }
}

.standards .standard p,
.standards .standard ul,
.standards .standard li{
  font-size:18px;
  font-weight:400;
  line-height:30px;
  color:#000;
}
@media (max-width: 768px) {
  .standards .standard p,
  .standards .standard ul,
  .standards .standard li{
    font-size:14px;
    line-height:25px;
  }
}
.standards .standard p{
  margin-top:20px;
}
@media (max-width: 768px) {
  .standards .standard p{
    margin-top:14px;
  }
}
.standards .standard p:last-child{
  margin-top:30px;
}
@media (max-width: 768px) {
  .standards .standard p:last-child{
    margin-top:20px;
  }
}
.standards .standard li{
  margin-top:10px;
}
@media (max-width: 768px) {
  .standards .standard li{
    margin-top:6px;
  }
}

/* Policy / Terms */

.policy .contents{
  max-width:640px;
  margin:0 auto;
  padding:60px 40px 150px;
}
.policy h1{
  font-size:28px;
  font-weight:700;
  margin-bottom:8px;
}
.policy h2{
  font-size:18px;
  font-weight:600;
  margin-top:32px;
  margin-bottom:12px;
}
.policy p,
.policy li{
  font-size:16px;
  line-height:1.6;
  margin-top:12px;
}
.policy ul{
  margin:12px 0 0;
  padding-left:24px;
}
@media (max-width: 768px) {
  .policy .contents{
    padding:48px 20px 100px;
  }
  .policy h1{
    font-size:22px;
  }
  .policy h2{
    font-size:16px;
    margin-top:24px;
  }
  .policy p,
  .policy li{
    font-size:14px;
  }
}