html,body{
    font-family:system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial,
    sans-serif;
    overflow:hidden;
}

.center{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:100%;

    padding:30px 0;
    box-sizing:border-box;
    max-height:100%;
    overflow:auto;
}
.center > DIV{
    width:80%;
    max-width:400px;
    margin:auto;
}
IMG.logo{
    width:100%;
    height:auto;
    margin-bottom:15px;
}

H1,H2,P{
    margin:0;
    padding:0;
}

DIV > a:link,
DIV > a:visited{
    color:#000;
    text-decoration:none;
}
P > a:link,
P > a:visited{
    color:#1d70b8;
    text-decoration:none;
}
a.box-link:link,
a.box-link:visited{
    display:block;
    position:relative;
    padding:20px 0;
    padding-left:60px !important;
    box-sizing:border-box;

    font-size:14px;
    line-height:20px;
    color:#000;
    text-decoration:none;
    border-radius:6px;
    background:rgba(0,0,0,.05);
}
a.box-link:after{
    content:'\279C';
    position:absolute;
    top:50%;
    right:25px;
    transform:translateY(-50%);
    font-size:16px;
    color:#000;
    opacity:.1;
}
a.box-link:not(:last-child){
    margin-bottom:10px;
}
a.box-link.double:link,
a.box-link.double:visited,
.info-box-header.double{
    line-height:18px;
    padding:12px 0;
}
.info-box-header.double H1{
    line-height:18px;
}
a.box-link IMG,
.info-box-header IMG{
    position:absolute;
    top:50%;
    left:10px;
    height:40px;
    width:auto;
    transform:translateY(-50%);
    border-radius:100px;
}

.info-box{
    border-radius:6px;
    background:rgba(0,0,0,.05);
    color:#000;
    padding-bottom:5px;
}
.info-box-header{
    position:relative;
    padding:20px 0;
    padding-left:60px !important;
    box-sizing:border-box;
}
H1{
    font-size:14px;
    line-height:20px;
    font-weight:normal;
}

.info-box-content{
    margin:0 5px;
    padding:20px;
    border-radius:4px;
    background:#FFF;
}
.info-box-content > H2{
    font-size:10px;
    letter-spacing:2px;
    text-transform:uppercase;
    font-weight:700;
    margin-bottom:5px;
}
.info-box-content > H2:not(:first-child){
    margin-top:20px;
}

.info-box-content > P{
    font-size:14px;
}

.footer{
    position:relative;
    margin:0 3px;
}
.footer P{
    margin-top:20px;
    font-size:11px;
    font-weight:500;
    color:rgba(0,0,0,.2);
    text-align:left;
}
.footer P SPAN{
    opacity:.6;
}
.info-box + .footer P{
    margin-top:10px;
}
.lang-select{
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    border:none;
    background:none;
    font-family:inherit;
    font-size:11px;
    font-weight:500;
    color:rgba(0,0,0,.2);
    cursor:pointer;
    padding:8px 14px 8px 0;
    text-align-last:right;
    outline:none;
    appearance:none;
    -webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='rgba(0,0,0,0.2)'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 0 center;
}
.lang-select.open{
    color:rgba(0,0,0,.5);
}
.lang-select option{
    color:rgba(0,0,0,.5);
}


@keyframes anim-in{
    0%  {opacity:0; transform:translateY(100px);}
    100%{opacity:1; transform:translateY(0);}
}
@keyframes anim-in-2{
    0%  {opacity:0; transform:translateY(30px);}
    100%{opacity:1; transform:translateY(0);}
}
body.anim-active .anim-in{
    animation:anim-in 2s cubic-bezier(.1,.86,.11,.99) both;
}
body.anim-active .anim-2{
    animation:anim-in-2 3s cubic-bezier(.1,.86,.11,.99) both;
}
body.anim-active .anim-1{animation-delay:0s;}
body.anim-active .anim-2{animation-delay:1s;}
body.anim-active .anim-3{animation-delay:2.3s;}
body.anim-active .anim-4{animation-delay:2.4s;}
body.anim-active .anim-5{animation-delay:2.5s;}
body.anim-active .anim-6{animation-delay:2.7s;}

@keyframes anim-scroll-lock{
    0%  {overflow:visible;}
    99% {overflow:visible;}
    100%{overflow:auto;}
}
body.anim-active .anim-scroll-lock{
    animation:anim-scroll-lock 4s linear both;
}


@keyframes extend-in{
    0%  {padding-bottom:0;}
    100%{padding-bottom:30px;}
}
.extend-in{
    animation:extend-in 1s cubic-bezier(.1,.86,.11,.99) both;
}