@import 'reset.css';
@import 'font.css';
@import 'icon.css';


/* ************************************************** */
/* ********** BASIC ********************************* */
/* ************************************************** */
*, :after, :before {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; outline:0}
::selection {background:#B3D4FC; text-shadow:none}
::-moz-selection {background:#B3D4FC; text-shadow:none}
body {background-color:#FAFAFA; font:15px/18px 'proxima-nova', 'Helvetica Neue', Arial, Helvetica, sans-serif;}
input, button {font:15px 'proxima-nova', 'Helvetica Neue', Arial, Helvetica, sans-serif;}
.content-holder {width:calc(100% - 20px); max-width:1200px; margin:0 auto;}
.left {float:left;}
.right {float:right;}
a {color:inherit;}

header:after, .app-options:after, .content-holder:after, .posts:after, .posts li .post-info:after, form .item:after, .editor .col1 .post-content .post-content-header:after, .editor .col1 .post-content .post-content-holder:after, .gallery .gallery-container:after, .gallery .gallery-images:after, .clearfix:after, .list-item:after, .manage-categories:after, .category-list li:after, .mode-exhibit:after {content:''; display:block; clear:both;}

.restricted {text-align:center; color:#9E9E9E; line-height:200px; text-transform:uppercase; font-size:16px;}

.error-404 {text-align:center;}
.error-404 h1 {font-size:36px; line-height:48px; font-weight:bold;}


/* ************************************************** */
/* ********** BUTTONS ******************************* */
/* ************************************************** */
.button {display:inline-block; border:0; background-color:#BDBDBD; height:36px; line-height:36px; padding-right:10px; border-radius:2px; color:#FFF !important; font-weight:600;}
.button .icon {margin:0 5px;}
.button:hover {background-color:#9E9E9E;}


/* ************************************************** */
/* ********** MODAL ********************************* */
/* ************************************************** */
.modal-wrapper {position:fixed; top:0; left:0; bottom:0; right:0;}
.modal-wrapper.overlay {background:rgba(200,200,200,.75); z-index:1000;}
.modal-outer {display:table; width:100%; height:100%;}
.modal-inner {display:table-cell; width:100%; height:100%; vertical-align:middle; text-align:center;}
.modal .message {border-bottom:1px solid #EDEEEE; padding:10px; color:#FFF; background-color:#999; border-radius:2px 2px 0 0;}
.modal {display:inline-block; text-align:left; background-color:#FFF; border:1px solid #EDEEEE; border-radius:3px; min-width:300px;}
.modal input[type='text'], .modal input[type='password'] {border:none; width:100%; padding:15px;}
.modal .controls {border-top:1px solid #EDEEEE;}
.modal .controls input[type='submit'] {border:0; background-color:#D81B60; font-weight:600; color:#FFF; font-size:14px; text-transform:uppercase; height:36px; padding:0 8px; min-width:64px; border-radius:2px; cursor:pointer; float:right; margin:10px;}


/* ************************************************** */
/* ********** HEADER ******************************** */
/* ************************************************** */
header {background:#D81B60; position:fixed; top:0; left:0; width:100%; z-index:1;}
header .active-user {float:left; margin:10px 0;}
header .active-user img {width:30px; height:30px; border-radius:50%; float:left;}
header .active-user span {line-height:30px; color:#FFF; margin-left:10px; font-weight:600;}
header .logo {display:block; width:73px; height:24px; background:url('../img/logo.png') center no-repeat; background-size:73px 24px; position:absolute; top:13px; left:50%; margin-left:-36.5px;}
header .menu {float:right;}
header .menu a {float:left; padding:13px; opacity:.5;}
header .menu a:hover {opacity:.75;}
header .menu a.active {opacity:1;}


/* ************************************************** */
/* ********** HEADER ******************************** */
/* ************************************************** */
.nav-links {text-align:center; margin-top:20px}
.nav-links a, .nav-links span {display:inline-block; background-color:#FFF; line-height:30px; min-width:30px; padding:0 10px; border:1px solid #EDEEEE; border-left-width:0;}
.nav-links a:first-child, .nav-links span:first-child {border-radius:2px 0 0 2px; border-left-width:1px;}
.nav-links a:last-child, .nav-links span:last-child {border-radius:0 2px 2px 0;}
.nav-links a {color:#212121; font-weight:500;}
.nav-links span {cursor:default; background-color:#EDEEEE;}


/* ************************************************** */
/* ********** APP *********************************** */
/* ************************************************** */
.app {margin-top:80px;}
.app-title {font-size:30px; line-height:30px; font-weight:300; margin-bottom:20px;}
.app-options {margin-bottom:20px;}
.app-options a {float:left; color:#9E9E9E; line-height:36px;}
.app-options a + a {margin-left:15px;}
.app-options a:hover {color:#757575;}
.app-options a.active {font-weight:bold; color:#616161; cursor:pointer; pointer-events:none;}


/* ************************************************** */
/* ********** POSTS ********************************* */
/* ************************************************** */
.posts {width:calc(100% + 10px);}
.posts li {float:left; width:calc(20% - 10px); background-color:#FFF; border:1px solid #EDEEEE; border-radius:3px; margin:0 10px 10px 0;}
.posts li .post-card {display:block; width:100%; position:relative; border-radius:2px 2px 0 0; background-position:center; background-size:cover; background-repeat:no-repeat;}
.posts li .post-card:after {content:''; display:block; padding-top:100%;}
.posts li .post-card .post-title {position:absolute; bottom:0; left:0; width:100%; background:linear-gradient(transparent, rgba(0,0,0,.9)); padding:60px 20px 20px; color:#FFF;}
.posts li .post-card .post-title .post-status {display:inline-block; font-size:12px; text-transform:uppercase; margin-bottom:5px; font-weight:600; padding:1px 4px; border-radius:2px; text-shadow:none;}
.posts li .post-card .post-title .post-status.draft {background-color:#9E9E9E;}
.posts li .post-card .post-title .post-status.posted {background-color:#F44336;}
.posts li .post-card .post-title .post-status.revised {background-color:#8BC34A;}
.posts li .post-info {padding:10px;}
.posts li .post-info img {width:30px; height:30px; border-radius:50%; float:left;}
.posts li .post-info .post-date {line-height:30px; margin-left:10px; font-size:14px; color:#9E9E9E;}
.posts li .post-action {float:right;}
.posts li .post-action a {line-height:30px; text-transform:uppercase; font-size:13px; font-weight:600; float:left; color:#757575;}
.posts li .post-action a:hover {color:#424242;}
.posts li .post-action a + a {margin-left:10px;}
.posts .empty {text-align:center; color:#9E9E9E; line-height:200px;}


/* ************************************************** */
/* ********** EDITOR ******************************** */
/* ************************************************** */
.editor .col1 {width:70%; float:left;}
.editor .col1 .post {background-color:#FFF; border:1px solid #EDEEEE; border-radius:3px;}
.editor .col1 .post-basic input {border:none; width:100%; padding:15px;}
.editor .col1 .post-basic input[name='post_title'] {font-size:20px; padding:18px 15px; font-weight:600;}
.editor .col1 .post-content {width:100%; border-top:1px solid #EDEEEE; position:relative;}
.editor .col1 .post-content .post-content-header button {border:0; background-color:#FFF; display:block; width:50%; float:left; text-align:left; padding:15px; font-size:11px; text-transform:uppercase; color:#BBB; pointer-events:none;}
.editor .col1 .post-content .post-content-header button + button {border-left:1px solid #EDEEEE;}
.editor .col1 .post-content .post-content-holder > div {display:block; width:50%; float:left; position:relative;}
.editor .col1 .post-content .post-content-holder > div + div {border-left:1px solid #EDEEEE;}
.editor .col1 .post-content .post-content-holder textarea {border:0; resize:none; font:13px monospace; padding:15px; width:100%; min-height:400px; display:block;}
.editor .col1 .post-content .post-content-holder .post-content-preview {position:absolute; right:0; padding:15px; font-size:13px; overflow-y:auto; overflow-x:hidden;}
.editor .col2 {width:calc(30% - 20px); float:right;}

.editor #delete_post {display:inline-block; margin-top:30px; color:#BEBEBE;}

.post-content-preview {text-align:justify;}
.post-content-preview center {text-align:center;}
.post-content-preview p:empty {display:none;}
.post-content-preview p, .post-content-preview h1, .post-content-preview h2, .post-content-preview h3, .post-content-preview hr, .post-content-preview ul, .post-content-preview ol, .post-content-preview pre, .post-content-preview blockquote, .post-content-preview iframe {margin:15px 0;}
.post-content-preview p:first-child, .post-content-preview h1:first-child, .post-content-preview h2:first-child, .post-content-preview h3:first-child, .post-content-preview hr:first-child, .post-content-preview ul:first-child, .post-content-preview ol:first-child, .post-content-preview pre:first-child, .post-content-preview blockquote:first-child, .post-content-preview iframe:first-child {margin-top:0;}
.post-content-preview p:last-child, .post-content-preview h1:last-child, .post-content-preview h2:last-child, .post-content-preview h3:last-child, .post-content-preview hr:last-child, .post-content-preview ul:last-child, .post-content-preview ol:last-child, .post-content-preview pre:last-child, .post-content-preview blockquote:last-child, .post-content-preview iframe:last-child {margin-bottom:0;}
.post-content-preview img, .post-content-preview iframe {width:100%; display:block;}
.post-content-preview b, .post-content-preview strong {font-weight:600;}
.post-content-preview i, .post-content-preview em {font-style:italic;}
.post-content-preview a {color:#D81B60; text-decoration:underline; font-weight:600;}
.post-content-preview h1 {font-size:20px; font-weight:bold;}
.post-content-preview h2 {font-size:16px; font-weight:bold;}
.post-content-preview h3 {font-size:14px; font-weight:bold;}
.post-content-preview hr {border:0; width:100%; height:1px; background-color:#DDD;}
.post-content-preview ul {list-style-type:disc; margin-right:30px; margin-left:30px;}
.post-content-preview ol {list-style-type:decimal; margin-right:30px; margin-left:30px;}
.post-content-preview pre {background-color:#444; border-radius:2px; color:#EEE; padding:10px; font-size:11px;}
.post-content-preview blockquote {margin-left:15px; border-left:2px solid #DDD; padding-left:10px;}
.post-content-preview .editor-upload {background-color:#F9F8F5; border:1px solid #EDECE4; color:#AAA9A2; text-align:center; padding:20px 15px; border-radius:2px; cursor:pointer;}
.post-content-preview .editor-upload b {display:block; font-size:16px; margin-top:5px;}
.post-content-preview .editor-upload .loading-bar {background-color:#EDECE4; height:10px; width:75%; border-radius:5px; margin:4px auto;}
.post-content-preview .editor-upload .loading-bar span {display:block; width:0%; height:10px; border-radius:5px; background-color:#D81B60;}

.gallery {background-color:#FFF; border-radius:2px; border:1px solid #EDECE4; margin-top:20px; position:relative;}
.gallery.hover {box-shadow:0 0 0 5px #EDECE4;}
.gallery > h1 {padding:15px; font-size:11px; text-transform:uppercase; color:#757575;}
.gallery .gallery-uploading {width:100%; height:48px; top:0; left:0; line-height:48px; border-bottom:1px solid #EDECE4; position:absolute; background-color:#FFF; display:none;}
.gallery .gallery-uploading .preview {width:47px; height:47px; background-color:#EEE; background-position:center; background-repeat:no-repeat; background-size:cover; float:left;}
.gallery .gallery-uploading h2 {float:left; margin:0 10px; color:#757575;}
.gallery .gallery-uploading .loading-bar {width:0%; height:2px; background-color:#D81B60; position:absolute; bottom:0; left:0;}
.gallery .gallery-empty {color:#BBB; border:0; background:none; width:100%; height:100px;}
.gallery .gallery-images {padding:15px 20px 10px  15px; display:none;}
.gallery .gallery-images li {float:left; width:calc(10% - 5px); position:relative; margin:0 5px 5px 0;}
.gallery .gallery-images li img {width:100%; height:auto; display:block; border-radius:2px;}
.gallery .gallery-images li button {position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.5) url('../svg/icon-delete.svg') center no-repeat; background-size:50% 50%; border:none; opacity:0; transition:.2s; border-radius:2px; cursor:pointer;}
.gallery .gallery-images li:hover button {opacity:1;}

.categories {background-color:#FFF; border-radius:2px; border:1px solid #EDECE4; margin-top:20px; padding:4px 0; height:262px; overflow-x:hidden; overflow-y:auto;}
.categories li label {display:block; height:36px; line-height:36px; padding:0 12px; cursor:pointer;}
.categories li label input {margin-right:8px;}
.categories li label:hover input {box-shadow:0 0 0 3px #F0F0F0;}
.categories li ul {margin-left:26px;}

.mode-exhibit {background-color:#FFF; border-radius:2px; border:1px solid #EDECE4; margin-top:20px;}
.mode-exhibit h1 {padding:15px; font-size:11px; text-transform:uppercase; color:#757575;}
.mode-exhibit select {border:0; width:100%; height:48px; padding:0 15px; font-family:inherit;}

.post-options {margin-top:20px;}
.post-options .left {float:left;}
.post-options label {display:block; cursor:pointer;}
.post-options label + label {margin-top:10px;}
.post-options label input {margin-right:5px;}
.post-options input[type='submit'] {border:0; background-color:#D81B60; font-weight:600; color:#FFF; font-size:14px; text-transform:uppercase; height:36px; padding:0 8px; min-width:64px; border-radius:2px; cursor:pointer;}


/* ************************************************** */
/* ********** FORM ********************************** */
/* ************************************************** */
form .item {display:block;}
form .item + .item {border-top:1px solid #EDEEEE;}
form input[type='checkbox'] {-webkit-appearance:none; width:16px; height:16px; background-color:#FFF; border:1px solid #CCC; border-radius:2px; vertical-align:middle; cursor:pointer; text-align:center;}
form input[type='checkbox']:checked {background-color:#D81B60; border-color:#D81B60;}
form input[type='checkbox']:checked:before {content:'✓'; font-weight:bold; line-height:12px; font-size:13px; color:#FFF; position:relative; top:-1px;}
form .error {position:relative;}
form .error:after {content:''; display:block; position:absolute; background-color:transparent; top:0; left:0; right:0; bottom:0; box-shadow:inset 0 0 3px 1px #C00; pointer-events:none;}
form .card {padding:10px; color:#FFF; background-color:#689F38;}
form #post_date {width:100%; border:0; padding:15px;}


/* ************************************************** */
/* ********** CATEGORIES **************************** */
/* ************************************************** */
.manage-categories {position:relative;}

.manage-categories.mode-edit .new-category {width:100%;}
.manage-categories.mode-edit .category-list {display:none;}

.new-category {width:calc(50% - 15px); background-color:#FFF; border:1px solid #EDECE4; border-radius:3px; float:left;}
.new-category h1 {padding:15px; font-size:18px; font-weight:600;}
.new-category input[type='text'] {border:none; width:100%; padding:15px; border-top:1px solid #EDECE4;}
.new-category select {width:100%; font:inherit; border:0; padding:15px; border-bottom:1px solid #EDECE4;}
.new-category input[type='submit'] {border:0; background-color:#9E9E9E; font-weight:600; color:#FFF; font-size:14px; text-transform:uppercase; height:36px; padding:0 8px; min-width:64px; border-radius:2px; cursor:pointer; float:right; margin:10px;}

.category-list {width:calc(50% - 15px); background-color:#FFF; border:1px solid #EDECE4; border-radius:3px; float:right;}
.category-list li {border-bottom:1px solid #EDECE4; padding:15px;}
.category-list li:last-child {border:0;}
.category-list li span {float:left;}
.category-list li .options {float:right;}
.category-list li .options a {float:left; margin-left:10px; text-transform:uppercase; font-weight:600; color:#D81B60; font-size:13px;}


/* ************************************************** */
/* ********** PROFILE ******************************* */
/* ************************************************** */
.profile {width:500px; margin:0 auto; padding-top:75px;}
.profile .avatar {width:150px; height:150px; margin:-75px auto 0; position:relative;}
.profile .avatar img {width:150px; height:150px; border-radius:50%; pointer-events:none;}
.profile .avatar .avatar-button {border:0; background:rgba(0,0,0,.5); width:36px; height:36px; border-radius:50%; position:absolute; bottom:0; right:0; cursor:pointer;}
.profile .avatar .avatar-button:disabled {cursor:default;}
.profile .avatar .avatar-button:disabled span {animation:2s rotate infinite linear reverse;}

.profile.pass {padding-top:0;}
.profile.pass .profile-form {padding-top:0; margin-top:0;}
.profile.pass .profile-form .item:first-child {border-top:0;}

.profile-form {background-color:#FFF; border:1px solid #EDECE4; border-radius:3px; margin-top:-75px; padding-top:100px;}
.profile-form .item:first-child {border-top:1px solid #EDECE4;}
.profile-form input[type='text'] {border:none; width:100%; padding:15px;}
.profile-form input[type='password'] {border:none; width:100%; padding:15px;}
.profile-form textarea {border:none; width:100%; padding:15px; font:inherit; display:block; resize:none; min-height:105px;}
.profile-form a {float:left; margin:15px 0; line-height:36px; text-transform:uppercase; font-weight:600; color:#9E9E9E; font-size:13px;}
.profile-form input[type='submit'] {border:0; background-color:#D81B60; font-weight:600; color:#FFF; font-size:14px; text-transform:uppercase; height:36px; padding:0 8px; min-width:64px; border-radius:2px; cursor:pointer; float:right; margin:15px 0;}
.profile-form select {width:100%; font:inherit; border:0; padding:15px;}
.profile-form .controls {float:right;}
.profile-form .controls button {border:0; background-color:transparent; font-weight:600; color:#D81B60; font-size:14px; text-transform:uppercase; height:36px; padding:0 8px; min-width:64px; border-radius:2px; cursor:pointer; float:left; margin:15px 15px 0 0;}

@keyframes rotate {
	0% {transform:rotate(0deg);}
	100% {transform:rotate(359deg);}
}


/* ************************************************** */
/* ********** LIST ********************************** */
/* ************************************************** */
.list {background-color:#FFF; border:1px solid #EDECE4; border-radius:3px;}
.list-item {border-bottom:1px solid #EDECE4; line-height:20px;}
.list-item:last-child {border:0;}
.list-item:hover {background-color:#FAFAFA;}
.list-item a {display:block;}
.list-item .main-collumn, .list-item .sec-collumn {float:left; margin:0 24px; padding:14px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.list-item .main-collumn {width:calc(50% - 48px); font-weight:600;}
.list-item .sec-collumn {width:calc(25% - 48px);}


/* ************************************************** */
/* ********** CROPZONE ****************************** */
/* ************************************************** */
.cropzone {position:relative; width:100%; background-color:#FFF; border-radius:2px; overflow:hidden; border:1px solid #EDECE4;}
.cropzone button {font:14px/24px 'proxima-nova', 'Helvetica Neue', Arial, Helvetica, sans-serif; border:0; background-color:transparent; cursor:pointer; outline:0; color:#9E9E9E;}
.cropzone .cz-initial, .cropzone .cz-image-holder {width:100%; height:100%;}
.cropzone .cz-cropping, .cropzone .cz-done {width:100%; height:calc(100% - 48px);}
.cropzone .cz-initial button {width:100%; height:100%;}
.cropzone .cz-controls {position:absolute; width:100%; bottom:0; left:0; height:48px; background-color:#FFF; display:flex; padding:6px;}
.cropzone .cz-controls .cz-actions {flex-shrink:0; flex-grow:0;}
.cropzone .cz-controls button {height:36px; padding:0 4px; font-weight:600 !important; color:#D81B60; font-weight:500; float:left;}
.cropzone .cz-controls button + button {margin-left:8px;}
.cropzone .cz-success {flex-grow:1; line-height:36px; padding-left:10px;}
.cropzone .cz-cropping #cz-cropper {cursor:move;}
.cropzone .cz-loading, .cropzone .cz-drag {width:100%; height:100%; position:absolute; top:0; left:0; z-index:1; background:rgba(255,255,255,.95); font-size:16px; color:#757575; display:flex; align-items:center; justify-content:center; visibility:hidden; opacity:0; transition:.36s cubic-bezier(.4,0,.2,1);}
.cropzone .cz-drag {background:rgba(18,86,136,.95); color:#FFF; border-radius:2px;}
.cropzone .cz-done img {width:100%; height:100%; pointer-events:none;}
.cropzone.loading .cz-loading, .cropzone.drag-over .cz-drag {visibility:visible; opacity:1;}
.cropzone[data-state='initial'] .cz-initial, .cropzone[data-state='cropping'] .cz-cropping, .cropzone[data-state='done'] .cz-done {display:block;}
.cropzone[data-state='initial'] .cz-cropping, .cropzone[data-state='initial'] .cz-done, .cropzone[data-state='cropping'] .cz-initial, .cropzone[data-state='cropping'] .cz-done, .cropzone[data-state='done'] .cz-initial, .cropzone[data-state='done'] .cz-cropping {display:none;}
.cropzone .ui-slider {height:28px; flex-grow:1; position:relative; cursor:pointer; margin:4px 16px 4px 16px;}
.cropzone .ui-slider.invisible {visibility:hidden;}
.cropzone .ui-slider:after {content:''; display:block; height:2px; background-color:#E0E0E0; margin:13px 0;}
.cropzone .ui-slider-handle {width:12px; height:12px; background-color:#D81B60; position:absolute; margin:8px 0 8px -8px; border-radius:50%; cursor:pointer; transition:transform .18s cubic-bezier(.4,0,.2,1);}
.cropzone .ui-slider-handle.ui-state-active {transform:scale(1.5,1.5);}
.cropzone .ui-slider-range {height:2px; background-color:#D81B60; position:absolute; margin:13px 0;}
.cropzone .ui-slider-beggining .ui-slider-handle {background-color:#FFF; border:2px solid #E0E0E0;}


/* ************************************************** */
/* ********** FOOTER ******************************** */
/* ************************************************** */
footer {text-align:center; margin:50px 0 15px; font-size:13px; color:#E0E0E0;}


/* ************************************************** */
/* ********** MEDIA QUERIES ************************* */
/* ************************************************** */
@media screen and (max-width:1220px){
	.posts li {width:calc(25% - 10px);}
}

@media screen and (max-width:920px){
	.posts li {width:calc(33.333333% - 10px);}

	.editor .col1, .editor .col2 {width:600px; margin:0 auto; float:none;}
	.editor .col2 {margin-top:20px;}

	.editor .col1 .post-content .post-content-header button {background-color:#FAFAFA; border-bottom:1px solid #EEE; pointer-events:auto; cursor:pointer; color:#9E9E9E;}
	.editor .col1 .post-content[data-show='markdown'] .post-content-header button[data-button='markdown'], .editor .col1 .post-content[data-show='preview'] .post-content-header button[data-button='preview'] {background-color:#FFF; border-bottom-color:#FFF;}
	.editor .col1 .post-content .post-content-holder > div {width:100% !important; position:static !important; float:none !important; border:none !important;}
	.editor .col1 .post-content .post-content-holder .post-content-preview {display:none;}
	.editor .col1 .post-content[data-show='preview'] .post-content-markdown {display:none;}
	.editor .col1 .post-content[data-show='preview'] .post-content-preview {display:block; height:auto !important;}

	.gallery .gallery-images li {width:calc(20% - 5px);}
	.gallery .gallery-images li button {opacity:1; width:36px; height:36px; background-size:24px 24px; bottom:0 !important; right:0 !important; border-radius:2px 0 2px 0;}
}

@media screen and (max-width:680px){
	header {background-position:10px 13px;}
	header .active-user {float:right; margin-left:10px;}
	header .active-user span {display:none;}
	header .menu a {padding:13px 5px;}
	/*header .menu a span {background-size:18px 18px;}*/

	.app-options .left, .app-options .right {width:100%;}
	.app-options .right {text-align:center; margin-top:10px;}
	.app-options .button {display:inline-block; float:none;}

	.posts li {width:calc(50% - 10px);}

	.editor .col1, .editor .col2 {width:100%;}

	.list-item a {padding:12px 0;}
	.list-item .main-collumn, .list-item .sec-collumn {width:calc(100% - 24px); margin:0 12px; padding:0; float:none;}
}

@media screen and (max-width:480px){
	.posts li {width:calc(100% - 10px);}
}