<!--

fable 
by me

-->

@keyframes fadein {from {opacity:0;}to {opacity:1;}}
@-moz-keyframes fadein {from {opacity:0;}to {opacity:1;}}
@-webkit-keyframes fadein {from {opacity:0;}to {opacity:1;}}
@-o-keyframes fadein {from {opacity:0;}to {opacity: 1;}}

/*-- scrollbar --*/
::-webkit-scrollbar {
    width:6px;
    background:#fafafa; /* scrollbar bg color - i recommend making it the same as the desc bg */
}

::-webkit-scrollbar-thumb {
    background:#ede1cf; /* scrollbar color */
}

::-webkit-scrollbar,::-webkit-scrollbar-thumb {
    border:5px solid #fafafa; /* make this same as desc bg if you change that color */
    border-left:none;
}

/*-- selection --*/
::-moz-selection { background:#eaeaea; color:#222; }
::selection { background:#eaeaea; color:#222; }


/*-- tooltips --*/
#s-m-t-tooltip {
    position:absolute;
    padding:0px 5px 0px 5px;
    margin-top:30px;
    color:#444;
    background-color:#fafafa; 
    font-family:'Fira Sans', sans-serif;
    font-size:9.5px;
    font-style:italic;
    text-transform:lowercase;
    text-align:center;
    border:1px solid #eee;
    letter-spacing:0.5px;
    z-index:999999;
}

/*--general--*/
body {
    background-color:#fff;
    font-family:'Fira Sans', sans-serif;
    font-size:11px;
    font-weight:400;
    line-height:190%;
    text-decoration:none;
    color:#555;
    -moz-osx-font-smoothing:grayscale;
    -webkit-font-smoothing:antialiased;
    font-smoothing:antialiased;
    animation: fadein 2s;
    -moz-animation: fadein 2s; 
    -webkit-animation: fadein 2s; 
    -o-animation: fadein 2s; 
}

body, * {
    cursor:auto; 
}

a {
    text-decoration:none;
    color:#999; /* link color */
    -webkit-transition:0.4s ease-in;
    -moz-transition:0.4s ease-in;
    -o-transition:0.4s ease-in;
}

a:hover {
    color:#ede1cf; /* link hover color */
    text-decoration:none;
    cursor:pointer;
    -webkit-transition:0.4s ease-in;
    -moz-transition:0.4s ease-in;
    -o-transition:0.4s ease-in;
}

b, strong {
    font-weight:700;
    color:#222;
}

i, em {
    font-style:italic;
}

blockquote {
    padding:10px;
    border-left:0px solid #ccc;
    margin:0px;
}

/*-- credit // no touch you mortal (except the hover color) --*/
.c {
    position:fixed;
    bottom:15px;
    right:20px;
    font-size:8px;
    -webkit-transition:0.7s ease-in;
    -moz-transition:0.7s ease-in;
    -o-transition:0.7s ease-in;
}

.c a {
    color:#555;
}

.c a:hover {
    color:#ede1cf; /* you can change this */
}

.c:hover {
    transform:rotate(540deg);
    -webkit-transition:0.7s ease-in;
    -moz-transition:0.7s ease-in;
    -o-transition:0.7s ease-in;
}

.c i:hover {
    cursor:pointer;
}

/*-- header --*/
#header { 
    width: 500px;
    position:relative;
    margin:60px auto 50px auto;
    text-align:center;

}

#box { 
    width: 500px;
    position:relative;
    margin:30px auto 50px auto;
    text-align:justify;    
    background:#fafafa; 
    border-radius:4px;
    padding: 10px;
    border:1px solid #eee; 

}

#box img { 
    background:#fff;
    border:1px solid #eee;
    padding:3px;
    margin:auto;
    float: center;
    text-align:center;
}

#owned { 
    width: 700px;
    position:relative;
    margin:30px auto 50px auto;
    text-align:justify;    

}

   .aff span { /*section title*/
        background:#fff7f7;
        border:1px solid #f8e4e4;
        color:#515151;
        padding: 5px;
        margin-bottom: 15px;
    }

#header h1 {
    font-family:'Playfair Display', serif;
    font-size:16px;
    letter-spacing:1px;
    text-transform:lowercase;
    font-weight:600;
    font-style:normal;
    text-align:center;
}

#header img {
    width:150px;
    height:150px;
    border-radius:50%;
    background:#fafafa;
    border:1px solid #eee;
    padding:6px;
    margin:auto;
    float: center;
    text-align:center;
}

.links {
    width:366px;
    margin:auto;
}

.links a {
    border-top:1px solid #eee;
    border-bottom:1px solid #eee;
    font-style:italic;
    font-size:12px;
    display:inline-block;
    padding:5px 8px 8px 8px; 
    width:45px;
    line-height:200%;
    margin:-3px;
    text-align:center;
}

.links a:before {
    content:'';
    display:block;
    width:0;
    float:right;
    height:2px;
    margin-top:-6px;
    background:#ede1cf; /* header link hover top border */
    transition: width .5s;
}

.links a:after {
    content:'';
    display:block;
    width:0;
    height:2px;
    margin-bottom:-9px;
    background:#ede1cf; /* header link hover bottom border */
    transition: width .5s;
}

.links a:hover:before, .links a:hover:after {
    width: 100%;
}

.hdesc {
    margin:0 auto 15px auto;
    width:330px; /* you may want to change according to the number of links 
                    (link width + 16px - 6px) * # of links */
}

/*-- members --*/
#members {
    position:relative;
    width:calc((280px + 60px) * 3); /* (box width + margin*2) * # of columns */
    margin:0 auto;
}

.member {
    float:left;
    width:280px;
    height:150px;
    margin:30px;
}

.member:nth-last-child(1) {
    margin-bottom:250px; /* increase/decrease this depending on the longest length of a desc in the last row */
}

.left {
    float:left;
    width:110px;
    height:110px;
    margin-top:5px;
    display:inline;
}

.left img {
    width:110px;
    height:110px;
    border-radius:100px;
    display:inline;
    margin-right:15px;
    background:#fafafa;
    border:0px solid #eee;
    padding:5px;
}

h1 {
    margin-top:6px;
    text-align:center;
    font-family:'Karla', sans-serif;
    font-weight:500;
    font-style:italic;
    font-size:15px;
    letter-spacing:0.5px;
}

.desc {
    float:right;
    width:125px;
    height:88px; /* change max-height to the same value */
    max-height:88px; /* and if you change go down to the media queries and follow instructions */
    padding:10px;
    margin-top:5px;
    background:#fafafa; /* desc backgound color */
    border-radius:4px;
    border:1px solid #eee; /* desc box border color */
    text-align:justify;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:5; /* if you do change the height of the desc change this to whatever new number of lines there are */
    -webkit-box-orient:vertical; 
    transition: max-height 0.25s ease-out; /* don't change this! */
}

.desc a {
    border-bottom:1px solid #eee; /* desc link border bottom color */
}

.desc a:hover {
    border-bottom:1px solid #ede1cf; /* desc link border bottom hover color */
}

.member:hover .desc {
    height:auto;
    display:-webkit-box;
    -webkit-line-clamp:99999999;
    -webkit-box-orient:vertical; 
    min-height:88px;
    max-height:5000px;
    transition: max-height 3.5s ease-in;
    opacity:0.99;
} 

.url {
    text-align:center;
    margin-top:4px;
}

.url a {
    font-size:11px;
    font-style:italic;
    letter-spacing:0.3px;
    border-top:1px solid #eee;
    border-bottom:1px solid #eee;
    display:inline-block;
}

.url a:hover {
    color:#999;
}

.url a:before, .url a:after {
    content:'';
    display:block;
    width:0;
    height:1px;
    background:#ede1cf; /* url hover border top and bottom color */
    transition:width .5s;
}

.url a:before {
    margin-top:-1px;
}

.url a:after {
    float:right;
    margin-bottom:-1px;
}

.url a:hover:before, .url a:hover:after {
    width: 100%;
}

/*-- media queries --*/
@media only screen 
and (max-width: 960px){
html, body {
  overflow-x: hidden;
  max-width:100vw;
}
body {
  position: relative;
}
}

@media only screen 
and (max-width : 600px){
#members {
    width:100vw;
}
}

@media only screen 
and (max-width: 960px) 
and (min-width: 601px) {
#members {
    width:calc((280px + 60px) * 2);
}
}

@media only screen 
and (min-width: 1700px) {
#members {
    width:calc((280px + 60px) * 4);
}
}

@media only screen 
and (max-width : 600px) {
.member:nth-last-child {
    margin-bottom:60px; 
}
.member {
    float:none;
    position:relative;
    margin:60px auto;
}
}

@media only screen 
and (max-width : 960px) {
.desc {
    overflow:auto;
    display: -webkit-box;
    -webkit-line-clamp:9999999999;
    -webkit-box-orient:vertical; 
}
/* change height and max-height to the same value as you did above */
.member:hover .desc {
    height:88px; 
    max-height:88px;
    overflow:auto;
}
}

@media only screen 
and (max-width: 960px) 
and (min-width: 601px) {
.member:nth-last-child {
    margin-bottom:30px; 
}
}

@media only screen 
and (min-width: 961px) {
.member:hover, .left img:hover, .desc:hover, .member h1:hover {
    cursor:help;
}
}