/* ==========================
   FONTS
========================== */
@font-face {
	font-family: 'Museo Sans';
	src: url('../fonts/museo-sans-300-webfont.eot');
	src: url('../fonts/museo-sans-300-webfont.eot?#iefix') format('embedded-opentype'),
	     url('../fonts/museo-sans-300-webfont.woff') format('woff'),
	     url('../fonts/museo-sans-300-webfont.ttf') format('truetype'),
	     url('../fonts/museo-sans-300-webfont.svg#museo-sans-300-webfont') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Museo Sans';
	src: url('../fonts/museo-sans-300-italic-webfont.eot');
	src: url('../fonts/museo-sans-300-italic-webfont.eot?#iefix') format('embedded-opentype'),
	     url('../fonts/museo-sans-300-italic-webfont.woff') format('woff'),
	     url('../fonts/museo-sans-300-italic-webfont.ttf') format('truetype'),
	     url('../fonts/museo-sans-300-italic-webfont.svg#museo-sans-300-italic-webfont') format('svg');
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family: 'Museo Sans';
	src: url('../fonts/museo-sans-700-webfont.eot');
	src: url('../fonts/museo-sans-700-webfont.eot?#iefix') format('embedded-opentype'),
	     url('../fonts/museo-sans-700-webfont.woff') format('woff'),
	     url('../fonts/museo-sans-700-webfont.ttf') format('truetype'),
	     url('../fonts/museo-sans-700-webfont.svg#museo-sans-700-webfont') format('svg');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'Museo Sans';
	src: url('../fonts/museo-sans-700-italic-webfont.eot');
	src: url('../fonts/museo-sans-700-italic-webfont.eot?#iefix') format('embedded-opentype'),
	     url('../fonts/museo-sans-700-italic-webfont.woff') format('woff'),
	     url('../fonts/museo-sans-700-italic-webfont.ttf') format('truetype'),
	     url('../fonts/museo-sans-700-italic-webfont.svg#museo-sans-700-italic-webfont') format('svg');
	font-weight: bold;
	font-style: italic;
}

/* ==========================
   RESET & BASE
========================== */
* { box-sizing: border-box; }
body {
	min-width: 300px;
	height: 100%;
	margin: 0 auto;
	font-family: 'Museo Sans', Arial, Helvetica, sans-serif;
	font-size: 100%;
	line-height: 1.25;
	color: #6d6e70;
	overflow-x: hidden;
	background: #f2f2f2;
}
a { text-decoration: none; color: #de3723; }
a:hover { text-decoration: underline; }
img { border: 0; }

/* ==========================
   UTILITIES
========================== */
.group:before, .group:after { content:""; display:table; }
.group:after { clear:both; }
.group { zoom:1; }
.center { text-align:center; }
.reset-mt { margin-top:0 !important; }
.reset-mb { margin-bottom:0 !important; }
.margin-bottom { margin-bottom:1em; }

/* ==========================
   TYPOGRAPHY
========================== */
h1 { font-size:2em; line-height:1.125; margin:1.25em 0 0; }
h2,h3,.h2 { font-size:1.5em; margin:1.25em 0 0; font-weight: normal; }
h4,.h4 { font-size:1em; line-height:1.5; margin:2em 0 0.5em; }
p { margin-top:0; line-height:1.5; }

/* ==========================
   WRAPPERS / CONTAINERS
========================== */
.wrapper { max-width:87.5em; padding:0 1.5em; margin:0 auto; }
.header { padding:2em 0 1.5em; border-bottom:2px solid #8cc1c1; }
.logo { font-size:0; text-align:center; }
.logo img { height:28px; }
.logo > div { display:inline-block; margin-right:1em; font-size:14px; color:#999; }
.header-logo {
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 8px;
    
    
}

/* ==========================
   FLEX / GRID
========================== */
.flex { display:flex; flex-flow: row wrap; }
.flex.middle { align-items:center; justify-content:center; }
.flex.first { flex-direction: column-reverse; }
.grid-row.four-fifths { width:100%; }
.aside { width:300px; flex:1 100%; text-align:center; }
.aside img { width:300px; }
.main { flex:1 100%; padding-left:0; }
.main.fix-left { padding-right:0; }
.main-all { flex:1 100%; }
.headline { text-align:center; }
.headline h1 { margin:0.25em 0 0; font-size:1.5em; line-height:1.125; }
.headline h2 { margin:0.25em 0 0; font-size:1.25em; line-height:1.25; }

/* ==========================
   BUTTONS
========================== */
.btn { font-size:1.125em; font-weight:bold; text-align:center; text-decoration:none; color:#fff; padding:0.5em 1em; border-radius:5px; display:inline-block; }
.btn.green { background: linear-gradient(to bottom, #89c1c0 0%, #6d9796 100%); text-shadow:0 -1px 1px #6d9796; }
.btn.green:hover { background: linear-gradient(to bottom, #6b9494 0%, #4d7e7a 100%); text-shadow:0 -1px 1px #4d7e7a; }
.btn.green:active { background: linear-gradient(to bottom, #4d7e7a 0%, #6b9494 100%); }

/* ==========================
   LIVE CHAT / NOTIFICATIONS
========================== */
.live-chat { margin:2em 0 0; padding:1.5em; border-radius:5px; background:#F2F2F2; }
.live-chat .chat-content { flex:1; padding-right:0; }
.live-chat .chat-content p { padding-left:0; line-height:1.5; font-weight:bold; }
.live-chat .chat-btn { flex:1 100%; }
.live-chat .chat-btn p { margin-bottom:0; text-align:right; }
.live-chat .btn { width:100%; margin-top:1em; }
p.help-block { padding-left:2em; line-height:1.5; position:relative; }
.nc-icon { position:absolute; left:0; top:-5px; width:30px; height:30px; }

/* ==========================
   MEDIA QUERIES
========================== */
@media (min-width:480px) {
	.headline h1 { font-size:2em; }
	.headline h2 { font-size:1.5em; }
}
@media (min-width:640px) {
	.live-chat { padding:1.5em 1.125em; }
	.live-chat .chat-content { padding-right:1.5em; }
	.live-chat .chat-content p { padding-left:2em; }
	.nc-icon.icon-info { display:block; }
	.live-chat .chat-btn { flex:0 240px; }
	.live-chat .btn { margin-top:0; }
}
@media (min-width:720px) {
	.grid-row.four-fifths { width:80%; }
}
@media (min-width:800px) {
	.wrapper { padding:0 3em; }
	.flex.first { flex-direction:row; }
	.logo { text-align:right; }
	.grid-row.four-fifths { width:100%; }
	.aside { flex:0; }
	.main { flex:1; padding-left:2em; }
	.main.fix-left { padding-left:0; padding-right:2em; }
	.headline { text-align:left; }
	.headline h1 { margin:1.25em 0 0; }
}
@media (min-width:1180px) {
	.grid-row.four-fifths { width:80%; }
}

.logout { 
    flex: 1 1 45%;
    min-width: 140px;
    text-align: center;
    background: linear-gradient(135deg, #fdff00, #ff000073);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 14px 8px;
    border-radius: 12px;
    box-shadow: 0 6px 0 #000, 0 10px 20px rgb(255, 0, 0);
    transition: all 0.3s ease;
}

.pagination a {
    display: inline-block;
    padding: 6px 12px;
    margin: 2px;
    border-radius: 6px;
    background: #f1f1f1;
    color: #333;
    text-decoration: none;
    transition: 0.2s;
}
.pagination a:hover {
    background: #007BFF;
    color: #fff;
}
.pagination a.active {
    background: #007BFF;
    color: #fff;
    font-weight: bold;
}


.progress-wrap {
    height: 16px;
    background: #eee;
    border-radius: 8px;
    overflow: hidden;
    display: none;
    margin-top: 10px;
}
.progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #4caf50, #81c784);
    border-radius: 8px;
    transition: width 0.3s ease;
    text-align: center;
    color: #fff;
    font-size: 12px;
    line-height: 16px;
    font-weight: bold;
}

.upload-row {
    display: flex;
    align-items: flex-start;
    background: #fff;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: linear-gradient(135deg, hsl(227.08deg 100% 50.43%), hsl(0deg 35.83% 16.92%));
}
.upload-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}
.upload-row .thumb img {
    max-width: 140px;
    border-radius: 8px;
}
.upload-row .info {
    margin-left: 15px;
    flex: 1;
}
.upload-row .info p {
    margin: 5px 0;
    font-size: 13px;
}
.upload-row .info input {
    width: 70%;
    padding: 6px;
    font-size: 13px;
    border: 1px solid #ccc;
    border-radius: 6px;
}
.upload-row .info button {
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    border: none;
    background-color: #007BFF;
    color: #fff;
    margin-left: 5px;
    transition: 0.2s;
}
.upload-row .info button:hover {
    background-color: #0056b3;
}
.deletebtn {
    background-color: #dc3545;
}
.deletebtn:hover {
    background-color: #a71d2a;
}

#uploadForm {
    display: flex;
    flex-direction: column;
}
#previewBox {
    margin-top: 15px;
    padding: 10px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
    background: linear-gradient(135deg, hsl(227.08deg 100% 50.43%), hsl(0deg 35.83% 16.92%));
}
#previewBox img {
    max-width: 100%;
    border-radius: 8px;
    
}
button {
    background: #007BFF;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 10px;
    cursor: pointer;
    transition: 0.3s;
    margin-top: 10px;
}
button:hover {
    background: #0056b3;
}


.card {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    margin-bottom: 25px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: linear-gradient(135deg, #5fde23c2, hsl(193.85deg 98.75% 49.15%));
}
.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}
.card h2 {
    margin-top: 0;
    font-size: 1.5em;
    color: #222;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

/* Mobile */
@media (max-width: 600px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }
}

.upload-item {
    display: flex;
    gap: 10px;
    background: #f9f9f9;
    padding: 10px;
    border-radius: 8px;
    align-items: center;
    background: linear-gradient(135deg, hsl(227.08deg 100% 50.43%), hsl(0deg 35.83% 16.92%));
}

.upload-item .thumb {
    flex: 0 0 120px;
}

.upload-item .info {
    flex: 1;
    font-size: 13px;
}