@import url('https://fonts.googleapis.com/css2?family=Kanit&family=Roboto:wght@100;400&display=swap');
/* https://fonts.google.com/share?selection.family=Kanit%7CRoboto:wght@100;400  */

html, body {
    margin:  0;
    padding:  0;
    text-align:  center;
    font-size:  16px;
    line-height:  1.6;
    color:  #020202;
    font-family: 'Roboto', sans-serif;
}

html {

}

body {

}

div, p, ul, li {
    display:  block;
    box-sizing:  border-box;
    margin:  0 auto;
}

.website {

}

.website a {
    color:  #8e2625;
    text-decoration: none;
}
.website a:hover {
    color:  #b9312f;
    text-decoration: underline;
}
.website a .fa {
    transform:  scale(1, 1) translate(0, 0);
    transition:  transform 0.3s;
}
.website a:hover .fa {
    transform:  scale(1.3, 1.3) translate(-2px, 0);
}

.website .header,
.website .footer {
    display:  block;
    margin:  0 auto;
    height:  50px;
    background-color:  #b9312f;
    border-color:  #090909;
    border-style:  solid;
    border-width:  0;
    position:  relative;
    z-index:  2;
}
.website .header {
    border-bottom-width:  2px;
    box-shadow:  0 2px 4px rgb(0 0 0 / 20%);
}
.website .footer {
    border-top-width:  2px;
    box-shadow:  0 -2px 4px rgb(0 0 0 / 20%);
}
.website .header:after,
.website .footer:after {
    content:  "";
    display:  block;
    position:  absolute;
    pointer-events:  none;
    top:  0;
    left:  0;
    right:  0;
    bottom:  0;
    background-color:  transparent;
    background-image:  url("../images/stripe-texture_black-trans.png");
    background-position:  0 0;
    background-repeat:  repeat;
    opacity:  0.3;
}

.website .content {
    display:  block;
    padding:  50px;
    min-height:  calc(100vh - (50px * 2));
    color:  #363636;
    background-color:  #fafafa;
    text-shadow:  1px 1px 1px rgb(0 0 0 / 10%);
    position:  relative;
    z-index:  1;
}
.website .content:before {
    content:  "";
    display:  block;
    position:  absolute;
    z-index:  1;
    top: 0;
    left:  0;
    right:  0;
    bottom:  0;
    pointer-events:  none;
    background-color:  transparent;
    background-image:  url("../images/paper-texture.jpg");
    background-repeat:  repeat;
    background-position:  center center;
    background-size:  100% auto;
    background-size:  cover;
    opacity:  0.2;
}
.website .content .wrapper {
    position:  relative;
    z-index:  2;
}

.website .content .avatar {
    display:  block;
    margin:  0 auto 20px;
}
.website .content .avatar .wrap {
    display:  block;
    margin:  0 auto;
    width:  auto;
    max-width:  200px;
    overflow:  hidden;
    border-radius:  50%;
    box-shadow:  2px 2px 0px rgb(0 0 0);
}
.website .content .avatar .wrap img {
    display:  block;
    width:  100%;
    height:  auto;
}

.website .content .details {
    display:  block;
    margin:  0 auto 20px;
    font-size:  100%;
    line-height:  1;
}
.website .content .details .name {
    display:  block;
    margin:  0 auto 12px;
    font-size:  300%;
    text-transform:  uppercase;
    font-weight:  bold;
    font-family: 'Kanit', sans-serif;
    color:  #020202;
}
.website .content .details .titles {
    display:  block;
    margin:  0 auto 9px;
    font-size:  110%;
    font-weight:  bold;
    color:  #262626;
}
.website .content .details .location {
    display:  block;
    margin:  0 auto;
    font-size:  90%;
    font-weight:  bold;

    display:  none;
}
.website .content .details .contact {
    display:  block;
    margin:  12px auto 0;
    font-size:  100%;
    font-weight:  normal;
}
.website .content .details .contact a {
    display:  inline-block;
    text-decoration: none;
    color:  inherit;
}
.website .content .details .contact a:hover {
    text-decoration: none;
    color:  inherit;
}
.website .content .details .contact a .fa {
    color:  #8e2625;
}
.website .content .details .contact a .fa:hover {
    color:  #b9312f;
}
.website .content .details .contact a .txt {
    margin-left:  3px;
}
.website .content .details .contact a .txt:hover {
    text-decoration: underline;
}

.website .content .links {
    display:  block;
    margin:  40px auto 0;
    font-size:  100%;
    max-width: 900px;
    line-height:  1.2;
}
.website .content .links ul {
    display:  block;
    margin:  0 auto;
    padding:  0;
    list-style-type:  none;
}
.website .content .links ul:after {
    content:  "";
    display:  block;
    clear:  both;
}
.website .content .links ul li {
    display:  block;
    margin:  0 auto;
    padding:  0 20px;
    width:  auto;
    float:  left;
}
.website .content .links ul[data-count="3"] li {
    width:  calc(100% / 3);
}
.website .content .links .link,
.website .content .links .name,
.website .content .links .desc {
    display:  block;
    margin:  0 auto;
}
.website .content .links .link img {
    display:  block;
    margin:  0 auto;
    width:  100%;
    height:  auto;
}
.website .content .links .link {
    margin-bottom:  10px;
}
.website .content .links .name {
    margin-bottom:  3px;
    font-weight:  bold;
    font-size:  110%;
    font-family: 'Kanit', sans-serif;
    color:  #020202;
}
.website .content .links .desc {
    font-size:  80%;
}


.website .content .social {
    display:  block;
    margin:  0 auto;
}
.website .content .social a {
    color:  inherit;
    text-decoration: none;
    font-size: 90%;
}
.website .content .social a:hover {
    text-decoration: underline;
}
.website .content .social a.social {
    display: inline-block;
    text-decoration: none;
    padding: 0;
    margin: 0 6px;
}
.website .content .social a.social:hover {
    text-decoration: none;
}
.website .content .social a.social .fa {
    font-size: 130%;
    vertical-align: middle;
    color:  #8e2625;
}
.website .content .social a.social:hover .fa {
    color:  #b9312f;
}
.website .content .social a.social .name {
    display: inline-block;
    margin-left: 3px;
    vertical-align: middle;
}
.website .content .social a.social:hover .name {
    text-decoration: underline;
}



@media screen and (max-width:  950px) {

    .website .content .links {
        font-size:  80%;
    }
    .website .content .links ul li {
        padding:  0 5px;
    }
}
@media screen and (max-width:  768px) {

    .website .content .links {
        font-size:  100%;
    }
    .website .content .links ul li,
    .website .content .links ul[data-count] li {
        display:  block;
        float:  none;
        clear:  both;
        width:  auto;
        max-width:  250px;
        margin-bottom: 20px;
    }

}
@media screen and (max-width:  600px) {

    .website .content .social .wap-br {
        display:  block;
        clear:  both;
    }

}