html,
body {
	margin:0;
	padding:0;
	height:100%;
}

#body td {
	min-height:100%;
	position:relative;
}

#head {
	clear:both;
	float: left; 
	width: 100%;
	height: auto;
}

#content {
	padding-left:20px;
}

#foot {
	clear:both;
	float: left; 
	width:100%;
	height:auto;
	bottom:0;
}

#ecd_opt_in_banner {
	width:100%;
	bottom: 0px !important;
	position: fixed !important; 
	right: auto !important;
	top: auto !important;
	border-top: 1px solid #ccc;
	z-index: 99999;
	background-color: #fff;	
}

#ecd_opt_in_banner input[type=checkbox]{
	position: relative;
	margin: 0px;
	padding: 0px;
	top:2px;
	border: 1px inset #666;
}
#ecd-cookie-table {
	margin: 0px;
	padding: 0px;
}
#ecd-cookie-table th {
	text-align: left;
}

#ecd-cookie-table th,
#ecd-cookie-table td {
	padding: 10px;
}
/* end cookies*/

/* aggregated view */
.portfolio-list {
	width: 200px;
	height: 200px;
	margin: 0px;
	margin-bottom: 25px;
	margin-right: 25px;
	background-color:#fff;
	overflow: hidden;
}
.portfolio-list.singlesize,
.portfolio-list.doublesize {
}

.portfolio-list.singlesize iframe {
	position:relative;
	top: -6px;
	left: -12px;
	width: 200px;
	height: 170px;
}

.portfolio-list.doublesize {
	width: 425px;
	height: 300px;
}
.portfolio-list.doublesize iframe {
	width: 425px;
	height: 270px;
}

.portfolio-list .portfolio-image {
	display:block;
	position: relative;
	height: 100%;
	overflow: hidden;
}

.portfolio-list .portfolio-image p {
	padding:0;
	margin:0;
}

.portfolio-list .portfolio-image img,
.portfolio-list .portfolio-image img.size-thumbnail {
	height: auto;
	width:auto;
	min-height: fit-content;
	max-width: 100%;
}

.portfolio-list .portfolio-image img.size-thumbnail.wide {
	max-height: 90%; /* compensate for 36px*/
	height:100%;
	width:auto;
	left:-30%;
}

/* Animation */	
/*.portfolio-list .portfolio-image p,*/
.portfolio-list .portfolio-image img.size-thumbnail {
	transition: transform .2s;
}

/*.portfolio-list .portfolio-image p:hover,*/
.portfolio-list .portfolio-image img:hover {
	transform: scale(1.1); 
}

.portfolio-list .homelink {
	position:relative;
	z-index:10;
	color:#000;
}

.portfolio-list .entry-title {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	font-size: 1.2em;
	margin: 0;
	padding: 10px;
	padding-left: 0px;
	padding-right: 0px;
	line-height: 1;
	text-align:center;
	z-index:10;
	background: rgba(256, 256, 256, 0.9);
	color:#000;
}

.portfolio-list .entry-title .editlink {
	font-size: 12px;
	text-decoration:none;
	color:red;
}

.portfolio-list .top-title {
    width: 100%;
    font-size: 1.2em;
    margin: 0;
    padding: 10px;
    padding-left: 0px;
    padding-right: 0px;
    line-height: 1;
    text-align: center;
    z-index: 1;
    color: silver;
    background-color: darkred;
}

/*
 * animations on home
 */

/*.group:hover */
.group-hover\:scale-105 {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:shadow-xl:hover {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .2), 0 8px 10px -6px rgb(0 0 0 / .2);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.duration-300 {
    transition-duration: .3s;
}
.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s;
}
.transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s;
}
.shadow-lg {
    --tw-shadow: 5px 10px 15px -3px rgb(0 0 0 / .2), 2px 4px 6px -4px rgb(0 0 0 / .2);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.rounded-2xl {
    border-radius: 1rem 16px;
}
.overflow-hidden {
    overflow: hidden;
}

#htmlheader {
	display:table-row;
	max-width: 800px;
}

#trivialogo {
	display:table-cell;
	width:150px;
	margin-right:20px;
}

#htmltitle {
	display:table-cell;
	font-size:18px;
	font-weight:bold;
	vertical-align:middle;
}	


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

	/*
	.portfolio-list {
		width:90%;
		height: 300px;
	}
	*/
	
}