@import url('https://fonts.googleapis.com/css2?family=Caveat+Brush&display=swap&subset=latin-ext');
/*general*/
body, html{background:#f7e5d7;height:100%;text-rendering:optimizeLegibility !important;-webkit-font-smoothing:antialiased !important;}
body{background:#f7e5d7;height:auto;color:#231815;font:400 20px 'Caveat Brush',sans-serif;}
body.loading-active{overflow:hidden;}
body.loading-active.load{overflow:auto;overflow-x:hidden;}
ul{margin:0;padding:0;list-style-type:none;}
ul.outside{list-style:outside;padding:0 0 0 30px;}
ul.decimal{list-style:decimal;padding:0 0 0 30px;}
b, strong { font-weight: 400; background: #fcc800; }
a, a:hover{color:#111;}
a, a:hover, a:focus, li:hover > a, button, button:hover, select, select:focus{ outline:0;text-decoration:none;transition:.3s ease;-moz-transition:.3s ease;-webkit-transition:.3s ease;}
.mt-30{margin-top:30px;}
.mt--30{margin-top:-30px;}
.mt-60{margin-top:60px;}
.mt--60{margin-top:-60px;}
.mb-30{margin-bottom:30px;}
.mb--30{margin-bottom:-30px;}
.mb-60{margin-bottom:60px;}
.mb--60{margin-bottom:-60px;}
.pt-30{padding-top:30px;}
.pt-60{padding-top:60px;}
.pb-30{padding-bottom:30px;}
.pb-60{padding-bottom:60px;}
.ptb-30{padding-top:30px !important;padding-bottom:30px !important;}
.ptb-60{padding-top:60px !important;padding-bottom:60px !important;}
.sticky{position: sticky; -webkit-position:sticky; top:15px;}
/*summernote*/
.note-popover.popover,
.form-group.note-group-image-url,
.note-btn-group.btn-group.note-float{ display: none; }
.note-editor.note-frame { border: none; }
.note-editor .note-btn { font-size: 12px; padding: 10px 15px !important; }
.note-editable.panel-body { border: 1px solid #eee; }
.note-popover .popover-content,
.panel-heading.note-toolbar { padding: 0 0 10px; margin: -10px 0 0 0; }
/*selection*/
::-moz-selection{ background-color:#fcc800;color:#231815;}
::selection{ background-color:#fcc800;color:#231815;}
::-o-selection{ background-color:#fcc800;color:#231815;}
::-ms-selection{ background-color:#fcc800;color:#231815;}
::-webkit-selection{ background-color:#fcc800;color:#231815;}
/*bootstrap*/
.btn{border-radius:15px;padding:10px 30px;line-height:1;font-size:20px;font-weight:700;border-width:2px;height:auto;letter-spacing:1px;}
.btn.btn-sm { padding: 10px 15px; height: auto; }
.btn-primary { color: #231815; background-color:#fcc800; border-color: #fcc800; }
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle { color: #231815; background-color:#dbab00; border-color:#dbab00; }
.btn-primary.focus,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show>.btn-primary.dropdown-toggle:focus  {box-shadow: 0 0 0 0.2rem rgba(219,171,0,.5);}
.btn-primary:hover {color: #231815;background-color:#dbab00;border-color: #dbab00;}
.btn-outline-primary{color:#fcc800;border-color:#fcc800;}
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show>.btn-outline-primary.dropdown-toggle {background-color: #fcc800; border-color: #fcc800; }
.btn-outline-primary.focus,
.btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.show>.btn-outline-primary.dropdown-toggle:focus {box-shadow: 0 0 0 0.2rem rgba(219,171,0,.5);}
.btn-outline-primary:hover {background-color:#fcc800;border-color:#fcc800;}
.btn-link,.btn-link:hover { font-weight: 400; color: #231815;}
.form-control{display:block;width:100%;height:35px;padding:7px 15px;line-height:1;color:#111;background-color:#fff;border:2px solid #f7e5d7;border-radius:15px;font-size:20px;font-weight:400;transition:.3s ease;-moz-transition:.3s ease;-webkit-transition:.3s ease;}
.form-control:focus{outline: 0;box-shadow: 0 0 0 0.2rem rgba(0,0,0,0.1);border-color:#ffdc63;transition:.3s ease;-moz-transition:.3s ease;-webkit-transition:.3s ease;}
.form-group { margin-bottom: 30px; }
.custom-checkbox .custom-control-input:checked~.custom-control-label::before { background-color: #fcc800; }
.custom-checkbox .custom-control-input:disabled:checked~.custom-control-label::before{ background-color:rgba(252, 200, 0, 0.5); }
/*swiper*/
.swiper-button-next,
.swiper-button-prev { background: none; outline: none; width: auto; height: auto; margin: 0; }
/*social*/
.social a{ font-size:16px;margin-right:5px;}
.social a,
.social a i,
.social a:hover,
.social a:hover i{transition:.3s ease;-moz-transition:.3s ease;-webkit-transition:.3s ease;}
.social a.fa-facebook:hover, .social a:hover .fa-facebook{ color:#3b5998 !important; }
.social a.fa-twitter:hover, .social a:hover .fa-twitter{ color:#00acee !important; }
.social a.fa-instagram:hover, .social a:hover .fa-instagram{ color:#dc1f62 !important; }
.social a.fa-linkedin:hover, .social a:hover .fa-linkedin{ color:#3272bd !important; }
.social a.fa-pinterest-p:hover, .social a:hover .fa-pinterest-p{ color:#ce1e27 !important; }
.social a.fa-youtube-play:hover, .social a:hover .fa-youtube-play{ color:#ce332d !important; }
.social a.fa-tumblr:hover, .social a:hover .fa-tumblr{ color:#3b5998 !important; }
.social a.fa-flickr:hover, .social a:hover .fa-flickr{ color:#ce332d !important; }
/*alert*/
#alert-wrapper{ cursor: pointer; position: fixed; right: 0; z-index: 9999; top: 0; margin-top: 22px; margin-right: 15px; max-width: 300px; }
/*loading*/
.loading-active #loading { background:#f7e5d7; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 999999999; display:flex; align-items:center; justify-content:center; transition:2s ease;-moz-transition:2s ease;-webkit-transition:2s ease;}
.loading-active #loading.out { opacity:0;transition:2s ease;-moz-transition:2s ease;-webkit-transition:2s ease; }
.loading-active #loading.hide {display:none;}
.loading-active #loading .wrapper {background:url("../img/loading-bg.png") no-repeat; width:204px; height:101px;position:relative;}
.loading-active #loading .wrapper .loader{background:url("../img/loading-img.png") no-repeat center; width:100%; height:100%;position:absolute;top:0;left:0;z-index:-1;animation-name: loading; animation-duration: 6s; animation-iteration-count: infinite;}
/*login*/
#login { display: flex; align-items: center; justify-content: center; height: 100vh;}
#login .login-wrapper { background: #fff; position: relative; padding: 30px;}
#login .login-wrapper:before { content: "";background:url("../img/bg-paper-texture-top.png") repeat-x top left; background-size:cover; height:50px; width:calc(100% + 30px);display:block;position: absolute; left: -15px; top: -50px;z-index:0;user-select:none;pointer-events:none; }
#login .login-wrapper:after { content: ""; background: url("../img/bg-paper-texture-bottom.png") repeat-x top left; background-size: cover; height: 33px; width: calc(100% + 15px); display: block; position: absolute; left: -15px; bottom: -20px; z-index: 0; user-select: none; pointer-events: none; }
#login .login-wrapper > .row:before { content: ""; background: url("../img/bg-paper-texture-left.png") repeat-y top right; background-size: cover; width: 33px; height: 100%; display: block; position: absolute; left: -30px; top: 0; z-index: 0; user-select: none; pointer-events: none; }
#login .login-wrapper > .row:after { content: ""; background: url("../img/bg-paper-texture-right.png") repeat-y top right; background-size: cover; width: 33px; height: 100%; display: block; position: absolute; right: -30px; top: 0; z-index: 0; user-select: none; pointer-events: none; }
#login .login-wrapper .img { margin-top: -122px; display: block;user-select:none;pointer-events:none; }
#login .login-wrapper .title { color: #fcc800; font-size: 50px; }
/*aside*/
#aside{}
#aside.sticky{top:100px;}
#aside .logo { margin: 100px 0 0 0;  }
#aside .logo img{ user-select:none; pointer-events:none; }
#aside .title { font-size: 55px; }
#aside .title span{ color:#fbca4f;-webkit-text-stroke: 1px #231815; }
#aside .menu { padding: 30px 0; }
#aside .menu ul > li > * { padding: 5px 0; display: inline-block; background: none; outline: none; border: none; border-bottom: 1px solid rgba(0,0,0,0.1); cursor: pointer; }
#aside .menu ul > li > *:hover { color:#fbca4f; }
#aside .menu ul > li:last-child > * { border-bottom: none; }
/*fix-buttons*/
#fix-buttons{position:fixed;bottom:90px; right:15px;display:none;}
#fix-buttons.active{display:block;}
#fix-buttons > button,
#fix-buttons > a{outline:none; width: 60px; height: 60px;border-radius: 100%; background: #231815; color: #fbca4f; font-size: 30px; text-align: center; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 2px dashed #231815; line-height: 1; padding-bottom: 3px; margin-top:10px;}
#FixButtonForMenuOpen,
#FixButtonForMenuClose{outline:none; width: 60px; height: 60px; position: fixed; bottom: 15px; right: 15px; z-index: 999; border-radius: 100%; background: #fbca4f; color: #231815; font-size: 30px; text-align: center; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 2px dashed #231815; line-height: 1; padding-bottom: 3px; }
#FixButtonForMenuOpen.collapse,
#FixButtonForMenuClose.collapse{display:none;}
/*update*/
#user-form-avatar{width:110px;height:110px;object-fit:cover;border-radius:100%;cursor:pointer;}
/*article*/
.article-list > .article {position:relative;margin:100px 0;}
.article-list > .article:after { content: ""; background: url("../img/bg-post-brace.png") no-repeat center; width: 100%; height: 90px; display: block; user-select: none; pointer-events: none; margin: 90px 0 -30px; }
.article-list > .article:last-child:after {display:none;}
.article-list > .article .paper{background:#fff;position:relative;}
.article-list > .article .paper:before{content:"";background:url("../img/bg-paper-texture-left-2.png") repeat-y top right; width:38px; height:100%;display:block;position: absolute; left: -35px; top: 0;user-select:none;pointer-events:none;}
.article-list > .article .paper .paper-top{background:url("../img/bg-paper-texture-top.png") repeat-x top left; background-size:cover; height:50px; width:100%;display:block;position: absolute; left: 0; top: -50px;z-index:0;user-select:none;pointer-events:none;}
.article-list > .article .paper .paper-bottom{background:url("../img/bg-paper-texture-bottom.png") repeat-x top left; background-size:cover;height:33px; width:100%;display:block;position: absolute; left: 0; bottom: -33px;z-index:0;user-select:none;pointer-events:none;}
.article-list > .article .paper .paper-bottom:before{content:"";background:url("../img/bg-post-bottom-left.png") no-repeat top left; position:absolute; left:40px; bottom:-10px; height:41px; width:23px;display:block;z-index:1;user-select:none;pointer-events:none;}
.article-list > .article .paper .paper-bottom:after{content:"";background:url("../img/bg-post-bottom-right.png") no-repeat top right;position:absolute; right:30px; bottom:-20px; height:55px; width:160px;display:block;z-index:1;user-select:none;pointer-events:none;}
.article-list > .article .date{position:relative;}
.article-list > .article .date:after{content:"";background:url("../img/bg-post-top-right.png") no-repeat top left; position:absolute; top:0; right:15px; width:75px;height:64px;display:block;z-index:1;user-select:none;pointer-events:none;}
.article-list > .article .avatar {position:relative;text-align:center;margin-top:60px;}
.article-list > .article .avatar .img { position: relative; width: 165px; height: 165px; display: flex; align-items: center; justify-content: center; border: 2px dashed #231815; border-radius: 100%; user-select:none; pointer-events:none;}
.article-list > .article .avatar .img:after { content: ""; background: url("../img/bg-post-avatar-star-1.png") no-repeat #f7e5d7; width: 26px; height: 23px; display: block; position: absolute; bottom: -2px; right: 24px; }
.article-list > .article .avatar .img img{border-radius:100%;width:133px;height:133px;object-fit:cover;}
.article-list > .article .avatar .user { font-size: 30px; margin-top: 15px; }
.article-list > .article .avatar .user:after {content:"";background:url("../img/bg-post-avatar-star-2.png") no-repeat center;width:100%;height:15px;display:block;margin:10px 0 0 0;}
.article-list > .article .content{margin-top:30px;padding: 15px 30px 30px;font-size:25px;}
.article-list > .article .content p:last-child{margin-bottom:0;}
.article-list > .article .content p > br:last-child { display: none; }
.article-list > .article .content img, .note-editable.panel-body img { max-width: 100%; height: auto; display: block; margin: 0 auto 15px; border-radius: 20px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); padding: 10px; }.article-list > .article .mini-img{display:block;user-select:none;pointer-events:none;background-repeat:no-repeat;background-position:top right;float: right;}
.article-list > .article:nth-child(n) .mini-img{background-image:url("../img/bg-post-img-1.png"); width:127px; height:138px;margin-top: -15px;}
.article-list > .article:nth-child(2n) .mini-img{background-image:url("../img/bg-post-img-2.png"); width:63px; height:36px;margin-top: 0;}
.article-list > .article:nth-child(3n) .mini-img{background-image:url("../img/bg-post-img-3.png"); width:57px; height:57px;margin-top: -15px;}
.article-list > .article:nth-child(4n) .mini-img{background-image:url("../img/bg-post-img-4.png"); width:102px; height:61px;}
.article-list > .article .btn-update-article { color: #231815; font-weight: 400; font-size: 20px; opacity: 0; position: sticky; bottom: 0; margin-left: 100%;z-index: 9; }
.article-list > .article:hover .btn-update-article { opacity:1;}
.article-list > .article .btn-update-article:hover { text-decoration:none !important; }
.article-loading .icon { text-align: center; padding: 0 90px 30px 0; font-size: 14px; margin-top: -60px; }
.article-arrows { text-align: center; clear: both; display:block;padding-top: 50px;}
.article-arrows button { border: none; background: none; margin: 5px auto; display: block; padding: 0; cursor: pointer; outline: none; color: #231815; }
/*responsive*/
@media (min-width:1300px){
    .container { max-width: 1400px; }
}
@media (max-width:1440px){
    /*hidpi*/
}
@media (max-width:1366px){
    /*ipadpro*/
}
@media (max-width:1280px){
    /*kindle,mdpi,touch*/
}
@media (max-width:1199px){
    .container { max-width: calc(100% - 60px); }
}
@media (max-width:1100px){
}
@media (max-width:1024px){
    /*bbPlayBook,ipadmini,ipad,ipadpro*/
}
@media (max-width:992px){
}
@media (max-width:991px){
    .list-article > .article .avatar { display: flex; align-items: center; margin-top: 0; }
    .list-article > .article .avatar .user { margin: 0 0 0 15px; }
    .list-article > .article .avatar .img { transform: scale(0.9); }
}
@media (max-width:950px){
    /*touch*/
}
@media (max-width:900px){
    /*hidpi*/
}
@media (max-width:854px){
    /*n9*/
}
@media (max-width:823px){
    /*pixel2*/
}
@media (max-width:812px){
    /*iphonex*/
}
@media (max-width:800px){
    /*kindle,mdpi*/
}
@media (max-width:768px){
    /*ipadmini,ipad*/
}
@media (max-width:767px){
    #aside { display: flex; align-items: center; }
    #aside .logo { margin: 15px 0 0 0; }
    #aside .logo img { height: 160px; margin-right: 15px; object-fit: scale-down;}
    #aside .menu { position: absolute; right: 0; text-align: right; }
    .list-article > .article .mini-img { position: absolute; right: 0; z-index: 1; top: -30px; }
    .list-article > .article:after{margin: 10px 0 -30px;}
    #login .login-wrapper:before{left: -22px;top: -40px;}
    .article-list > .article .btn-update-article { position: relative; margin: 30px 0 0 0; }
    .article-arrows { position: fixed; right: 36px; bottom: 90px; }
}
@media (max-width:736px){
    /*iphone6plus,iphone7plus,iphone8plus*/
}
@media (max-width:732px){
    /*nexus5x,nexus6p*/
}
@media (max-width:731px){
    /*pixel2*/
}
@media (max-width:667px){
    /*iphone6,iphone7,iphone8*/
}
@media (max-width:640px){
    /*bbz30,note3,note2,s3,s5,l70,lumia550,lumia950*/
}
@media (max-width:600px){
    /*bbZ30,bbPlayBook*/
    #aside .menu { right: auto; left: 150px; text-align: left; top: 14px; border-bottom: 1px solid rgba(0,0,0,0.05); padding: 0; width: calc(100% - 150px); }
    #aside .menu ul { display: flex; }
    #aside .menu ul > li > * { border: none; margin-right: 10px; }
}
@media (max-width:575px){
}
@media (max-width:568px){
    /*iphone5*/
}
@media (max-width:559px){
    #aside .menu { left: 0; top: 170px; width:100%; }
}
@media (max-width:533px){
    /*lumia520*/
}
@media (max-width:480px){
    /*n9,iphone4*/
}
@media (max-width:414px){
    /*iphone6plus,iphone7plus,iphone8plus*/
    .container { max-width: calc(100% - 30px); }
    .list-article > .article .paper:before{display:none;}
    .list-article > .article .paper .paper-top{top:-45px;}
    .list-article > .article .paper .paper-bottom{bottom:-30px;}
    #login { margin:40px 15px 0; }
}
@media (max-width:412px){
    /*nexus5x,nexus6p*/
}
@media (max-width:411px){
    /*pixel2*/
}
@media (max-width:384px){
    /*l70*/
    .list-article > .article .content { font-size: 20px; }
}
@media (max-width:375px){
    /*iphone6,iphone7,iphone8,iphonex*/
}
@media (max-width:360px){
    /*note3,note2,s3,s5,lumia550,lumia950*/
}
@media (max-width:320px){
    /*lumia520,iphone4,iphone5*/
}
@keyframes loading {
    0%	 { top: 0; }
    20%	 { top: 10%; }
    50%	 { top: -40%; }
    70%	 { top: 20%; }
    100% { top: 0; }
}