/*
colors
---------------------------*/
:root {
--primary:#5283e5;
--accent:#9DBE30;
--gray:#7c7c7c;
--lt-gray:#b2b2b2;
--lt-blue:#c4c4c4;
}

/*
GENERICS
---------------------------*/
body {margin:0px; font-size:1em;}

a {text-decoration:none;}

* { box-sizing: border-box;}

h1, h2, h3, h4 {margin:0; padding:0; line-height:100%;}

img {border:none; vertical-align:top;}

.table {display:table;}

.center-table {
	display:table;
	margin-left:auto;
	margin-right:auto;
}

.cell {
	display:table-cell;
	vertical-align:top;
	}

.block-cell {
	display:table-cell;
	vertical-align:top;
}

.center-cell {
	display:table-cell;
	vertical-align:middle;
}

.bottom-cell {
	display:table-cell;
	vertical-align:bottom;
}

.row {display:table-row}


.margin {margin-bottom:12px;}
.margin-top {margin-top:12px;}
.margin-right {margin-right:12px;}
.margin-left {margin-left:12px; }

.clear {clear:both;}

.hidden {display:none;}

.full {width:100%;}
.half {width:50%;}
.third {width:33%;}
.two-third {width:77%;}
.quarter {width:25%}
.fifth {width:20%;}
.max-full {max-width:100%;}

.small {font-size:90%;}
.smaller {font-size:80%;}
.smallest {font-size:75%;}
.big{font-size:120%;}
.bigger {font-size:150%;}
.bold {font-weight:700;}
.gray {color:var(--lt-gray);}

.center {text-align:center}
.text-left {text-align:left;}
.text-right {text-align:right;}

.right {float:right;}
.left {float:left;}

.inline {display:inline;}

.relative {position:relative}

.pad-left {padding-left:20px;}
.pad-left-10 {padding-left:10px;}
.pad-right {padding-right:20px;}
.pad-right-10 {padding-right:10px;}
.pad-top {padding-top:20px;}
.pad-top-10 {padding-top:10px;}
.pad-bottom {padding-bottom:20px;}
.pad-bottom-10 {padding-bottom:10px;}
.padded {padding:10px;}

.red {color:red}
.text {line-height:140%;}
.text-reader {margin-left:auto; margin-right:auto; width:33em; line-height:140%;display:block;}
.header-title {display:flex; justify-content:space-around; align-items:center; margin-left:20px; margin-right:20px; margin-top:10px;}
.header-title h1{white-space:nowrap;}
.content-container {
	display:table-cell;
	padding-left: 20px;
	padding-right:10px;
	padding-bottom:40px;
}
.content {
	display:table;
	margin-left:auto;
	margin-right:auto;
	max-width:100%;
}

.top-nav {
	display:table;
	margin-left:auto;
	margin-right:auto;
	padding-bottom:12px;
}
.top-nav a {		
	margin-left:10px;
	margin-right:10px;	
}
a.top-nav:hover {
	text-decoration:none;
}
.side-nav {
	display:table-cell;
	width:20%;
	padding-left:10px;
	padding-right:10px;
	vertical-align:top;
}
.site-top a {border:none; text-decoration:none}
.site-top a:hover {text-decoration:none}
.bl-border-box {border:solid 2px var(--primary);}
.attention {background:var(--lt-blue); padding:10px;}
.footer {padding:10px; text-align:center; font-size:85%;}
/*
gallery and home
------------------------------*/
/*
.gallery-wall {display:flex;}
a.gallery-item, div.gallery-item {
	float:left;
	border:solid 1px transparent;
	position:relative;
	width:20%;
	margin:5px;
}

div.gallery-wall img, a.gallery-item img {
	width:100%;
	height:auto;
	display:block;
}
.gallery-caption {
	margin-top:10px;
	margin-bottom:20px;
	padding-left:30px;
	padding-right:30px;
	padding-top:20px;
	padding-bottom:20px;
	text-align:center;
}
*/

.gallery-wall {
	-webkit-column-count: 4; /* Chrome, Safari, Opera */
    -moz-column-count: 4; /* Firefox */
	column-count: 4;

	-webkit-column-gap:10px;
	-moz-column-gap:10px;
	column-gap:10px;

	position:relative;

	padding-right:10px;
}


a.gallery-item, a.gallery-image, a.gallery-block {
	display:inline-table;
	margin-bottom:10px;
	position:relative;
	width:100%
}

a.gallery-item:hover, a.gallery-block {
	text-decoration:none;
}

.gallery-wall img {
	width:100%;
	display:block;
}

.gallery-title {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom:10px;
}

.gallery-deck {
	width:100%;
}
.gallery-title h2 {color:#727272; white-space: nowrap; padding-left:10px; padding-right:10px;}
.gallery-sub {text-align:center; padding-left:10px; padding-right:10px; padding-bottom:10px; margin-bottom:10px; margin-left:20px; margin-right:20px;}
.gallery-title-item {
	background: rgba(73, 73, 73, 0.6);
	display:none;
	text-align:center;
	color:#FFF;
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	z-index:10;
	padding-top:50%;
}
.gallery-title-block {
	text-align:center;
	padding:5px;
}
.image-contribution {font-size:90%; color:var(--dk-gray); margin-bottom:10px;}
.image-details {
	border-top:solid 1px var(--primary);
	border-bottom:solid 1px var(--primary);
	padding:10px;
	margin:10px;
	text-align:center;
}



/*
navigation
-----------------------------------*/


a.side-adv {display:table;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:10px;
	margin-top:10px;
	max-width:90%;
}

.title-top {
	display:none;
	position:absolute;
	top:50%;
	transform: translateY(-50%);
	text-align:center;
	color:#FFF;
	font-size:120%;
	width:100%;
	padding-left:10px
	padding-rightz:10px;
}



img.portfolio-image {max-width:100%; margin-left:auto; margin-right:auto;}

.detail-list {display:flex; flex-wrap:wrap; margin-top:5px;}

.image-detail {
	width:90px;
	height:90px;
	cursor:pointer;
	border:solid 1px transparent;
	background-size: cover; 
	background-repeat: no-repeat; 
	background-position: center;
	margin-right:5px;
	margin-bottom:5px;
}
/*
forms
-----------------------------------*/
.submit input[type="text"],
.submit textarea, 
.contact input[type="text"],
.contact textarea { 
	padding:5px;
	border:solid 1px #35acfc;
	margin-top:5px;
	margin-bottom:10px;
	width:500px;
	display:block;
}
textarea {height:200px;}
.captcha-word input[type="text"] {
	border:transparent;
}

.submit input[type="submit"] {
	background: #075698;
	padding:6px;
	color:#FFF;
	display:inline-table;
	margin-top:10px;
	margin-bottom:10px;
	font-size:120%;
	font-weight:700;
	cursor:pointer;
	border:0;
}

.submit input[type="submit"]:hover {
	background:#000;
}

.save {
	display:inline-table;
	color:#FFF;
	background:#2a85c1;
	padding:5px;
	font-size:130%;
	font-weight:700;
	border-radius:3px;
	cursor:pointer;
}
.save:hover {
	background:#727272;
}
.captcha, .captcha-word, input.captcha-word[type="text"] {background:#727272; color:#FFF; font-family:georgia; font-size:140%; padding:10px;}
.success {padding:10px; text-align:center; display:table; margin-left:auto; margin-right:auto; margin-bottom:10px; background:#bbeaa4;}
.blinker {
  animation: blinker 1s linear infinite;
  font-size:150%;
}
@keyframes blinker {
  50% {
    opacity: 0;
  }
}
/*
submit
----------------------------------*/
.cat-select {
	cursor:pointer;
	border-bottom:solid 1px #CCC;
	width:100%;
	color:#727272;
	background:#FFF;
	padding:5px;
	margin-bottom:5px;
	text-align:left;
}
.cat-select:hover {
	background:#727272;
	color:#FFF;
	text-decoration:none;
}
.cat-selected {
	background:#9aceac;
	cursor:pointer;
	width:100%;
	color:#5d7758;
	padding:5px;
	margin-bottom:5px;
	text-align:left;
}
.cat-selected:hover {background:red; color:#FFF;}
.cat-selected:hover > .cat-choose {background:#FFF; color:red}
.cat-select:hover > .cat-choose {background:#FFF; color:#727272;}
.cat-choose {
	display:inline-block;
	width:20px;
	height:20px;
	line-height:20px;
	border-radius:10px;
	text-align:center;
	background:#727272;
	color:#ececec;
	margin-right:5px;
}

/*
news
-----------------------------------*/
.news-container {
	margin:auto;
	padding-bottom:20px;
}

.news-wall {
	-webkit-column-count: 4; /* Chrome, Safari, Opera */
    -moz-column-count: 4; /* Firefox */
	column-count: 4;

	-webkit-column-gap:10px;
	-moz-column-gap:10px;
	column-gap:10px;

	position:relative;

	padding-right:10px;
}


a.news-item {
	display:inline-table;
	margin-bottom: 10px;
	width:100%;
	position:relative;
	border:solid 1px #000;
	color:#727272;
}

a.news-item:hover {
	text-decoration:none;
	background:#727272;
	color:#ececec;
}
a.news-item:hover h3 {
	color:#ececec;
}

.news-wall img {
	width:100%;
	height:auto;
	display:block;
}
.front-headline, .cat-header {
	margin-top:10px;
	margin-left:10px;
	margin-right:10px;
}
.news-date {
	font-size:90%; 
	font-style:italic;
	margin-left:10px;
	margin-bottom:10px;
	display:block;
	}
.news-short {
	margin:10px;
	display:block;
}

.news-sort {
	display:flex;
	flex-direction:row;
	align-items:flex-end;
	justify-content:flex-end;
	font-weight:600;
	margin-top:10px;
}
.news-cats {
	border-top:solid 1px var(--lt-gray);
	border-bottom: solid 1px var(--lt-gray);
	padding-top:5px;
	padding-bottom:5px;
	text-align:center;
	margin-top:10px;
	font-size:85%;
}

.about {
	width:150px;
}

.img-holder {display:table}

.dropdown {
	cursor:pointer;
	position:relative;
	margin-left:10px;
}

.dropdown > .dropsub {
	display:none;
	z-index:100;
	position:absolute;
	right:5px;

}

.dropdown:hover > .dropsub { display:table; }

.dropsub a {
	display:block;
	padding:10px;
}

.dropsub a:hover { text-decoration:none; }
.comment-box {width:80%; margin:auto;}
.comment-box textarea {
	width:100%;
	height:130px;
}
.comment {background:#ececec; border-radius:5px; padding:10px; margin-bottom:10px; margin-left:10px; margin-right:10px;}
.comment-reply {border-radius:5px; padding:10px; margin-bottom:10px; margin-left:20px; margin-right:10px;}
.comment-add {display:table; margin-left:auto; margin-right:auto; margin-top:10px;}
.comment-front {margin-left:20px; margin-right:20px;margin-bottom:20px; padding-bottom:10px;}
.comment-front i {display:block; margin-bottom:5px; font-size:80%;}
.comment-front .credit{text-align:right; font-weight:700;}
.comment-front a {display:block;font-size:120%; font-weight:700;}
/*
mobile
-----------------------------------*/

.mobile-top, .mobile-social, .title-tag {display:none; position:relative;}

a.mobile-open, a.mobile-close {
	display:table;
	background:#000;
	font-size:150%;
	padding:5px;
	position:absolute;
	top:5px;
	right:5px;
}

a.mobile-open i, a.mobile-close i {color:#FFF;}
.mobile-menu {text-align:center; padding-left:20px; padding-right:20px;}
.mobile-menu a {display:block; margin-bottom:10px; font-size:120%}


@media (max-width: 699px) {
	.top-nav, .side-nav, .contact-info {display:none;}
	.mobile-top, .cell, .mobile-social {display:block;}
	.mobile-nav {display:table; position:absolute; top:10px; right:10px;}
	a.gallery-item, div.gallery-item, .top-cart, .left, .right {float:none;}
	a.gallery-item img { max-width:95%;}
	.product-image img {width:95%; margin:auto; border:none;}
	.gallery-wall {display:inline-block; position:relative; width:100%; margin-left:0px;}
	.title-tag {display:table; width:100%; position:relative; left:-10px; margin-top:10px; margin-bottom:10px; padding-bottom:10px; text-align:center;}
	.center-logo, .nav-logo {max-width:40%}
	.social-top, .social-side{float:none; top:0px; right:0px; text-align:center; padding-top:10px; padding-bottom:10px;}
	.social-right{position:relative; display:table; margin-left:auto; margin-right:auto; right:0px;}
	.third, .half, .two-third {width:100%}
	.text-reader {margin-left:10px; margin-right:10px; width:auto; padding-left:10px; padding-right:10px;}
	.contact-container {margin-left:10px; margin-right:10px;}
	.img-holder {margin-left:auto; margin-right:auto;}
	.img-holder img {max-width:90%;}
	.product-image, .product-description {width:100%; text-align:center; padding-left:0px;}
	.product-description, #product, .table, a.cart, .product-add, .product-checkout, .captcha, .captcha-word, .product-cart-image, .highlight {margin-left:auto; margin-right:auto;}
	.highlight, #checkout-header {text-align:center;}
	.pad-left {padding-left:0px;}
	.pad-right {padding-right:0px;}
	.pad-bottom {padding-bottom:10px;}
	.news-wall, .gallery-wall {
	-webkit-column-count: 1;
    -moz-column-count: 1;
	column-count: 1;
	-webkit-column-gap:0px;
	-moz-column-gap:0px;
	column-gap:0px;
	position:relative;
	padding-right:0px;

	}
	.news-item{margin-bottom:10px;}
	.submit input[type="text"],
	.submit textarea, 
	.contact input[type="text"],
	.contact textarea { 		
		width:100%;
	}
}