.library-container { padding-top:100px;  width:1060px; margin:0 auto;}

.library h1 { animation-duration: 3s; }

.library-img { float:left; width:410px; }
.library-description { float:left; width:550px; padding:25px 50px 20px 50px; }

.library-img img { transition:0.5s; }
.library-img img:hover { opacity:0.6; }

.library-description span { font-family: 'Ubuntu', sans-serif; font-weight:500; display:block; margin-bottom:20px; font-size:22px; line-height:24px; }

.library-description p { font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; font-size:16px; line-height:18px; }

.article-container { padding-top:30px; width:1200px; margin:0 auto; position:relative;}

.article-content-container {  width:800px; margin-left:-400px; }

.article-content { margin:0 auto; text-align:left; }

.article-img { margin:20px auto; }

.article-content a { color:#81636c; text-decoration:underline!important; transition:0.3s;}
.article-content a:hover { opacity:0.8; text-decoration:none!important;}

.article-nav { position:absolute; width:350px;   right:0; top:118px; margin:0 auto; text-align:left; }

.table-of-contents { font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-size:20px; background:#fdedec; padding:10px 20px; }

.article-top { position:fixed; width:350px; }

.article-top .list { margin:0; height:430px; overflow:auto; padding:20px; }


.article-top ul li { list-style:none; }

.article-top a { color:#ce4c74; font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; font-size:16px; display:block; margin-bottom:10px;  text-decoration:none; transition:0.3s;}
.article-top a:hover { opacity:0.6; }
#article-top-nav-button { position:fixed; top:66px; width:900px; left:50%; margin-left:-450px; text-align:center; padding:15px;  z-index:10; border-bottom:1px solid #ccc; background:#ce4c74; cursor:pointer; transition:0.3s;}

#article-top-nav-button span { font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; font-size:18px; color:#fff; position:relative; margin-left:-10px; }

#article-top-nav-button .down-arrow::after {
    border: solid #fff;
    border-width: 0 1px 1px 0;
    display: inline-block;
    padding: 6px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    position: absolute;
    content: '';
    top: 0;
    right: -25px;
}

#article-top-nav-button .up-arrow::after {
    border: solid #fff;
    border-width: 0 1px 1px 0;
    display: inline-block;
    padding: 6px;
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    position: absolute;
    content: '';
    top: auto;
    bottom:0;
    right: -25px;
}

.tablet { display:none; }
    
/* Tablet */

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

.tablet { display:block; }

.article-content { width:100%; padding:0 20px;}

#article-top-nav-button { width:100%; left:0; margin-left:0; top:50px; }

.article-top { background:#fff; margin-left:0; width:100%; left:0; top:101px; z-index:10; }

.article-container { width:100%; }

.article-content-container {  width:100%; margin-left:0; }


.article-content a { color:#81636c; text-decoration:underline!important; transition:0.3s;}
.article-content a:hover { opacity:0.8; text-decoration:none!important;}

.article-nav {  position:absolute; width:100%; height:auto; overflow:auto; right:0; top:118px; margin:0 auto; text-align:left; }

}


@media only screen and (max-width : 1100px) {
 
.library-container { padding-top:100px;  width:769px; margin:0 auto;}
.library-img { float:left; width:350px; }
.library-description { float:left; width:619px; padding:20px; }

}
    

/* Mobile */

@media only screen and (max-width : 768px) {
 
.library-container { padding-top:60px;  width:100%;}

.article-container { padding-top:60px!important; }
 
.library-img { float:none; width:100%; }
 
.library-description {  float:none; width:100%; padding:20px; }

    
}