@charset "utf-8";
body {
	font-family: "Trebuchet MS", Verdana, sans-serif;
	background: #373737;
	color: #dddddd;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	/* font-size: 10.5pt; */
}

.oneColLiqCtr #container {
	width: 100%;  /* this will create a container 80% of the browser width */
	max-width: 1000px;
	background-color: #373737;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	/* border: 1px solid #000000; */
	text-align: left; /* this overrides the text-align: center on the body element. */
}

.oneColLiqCtr #mainContent {
	padding: 30px 3%; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	line-height: 150%;
}

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}


#photo {
	float: left;
	width: auto;
	padding-right: 35px;
}

#title {
	float: left;
}

#SocNets {
	vertical-align:bottom;
	float: left;
}


.twin_col_l {
	float: left;
	width: auto;
	padding-right: 10%;
/*
	margin: 0px 0px 0px 0px; 
	padding: 0px 0px 0px 0px;
*/
}

.twin_col_r {
	float: right;
	width: auto;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px; 
}


.flex_size { max-width: 100%; height:auto; }


.NoSpaceAfterH {
	margin-bottom: 0;
}



/* NEW SCHEME */

/* Add 2 to div. max-width to accommodate border */

div.PhotoContHoriz,
div.PhotoContHoriz720,
div.PhotoContHoriz750,
div.PhotoContHoriz650,
div.PhotoContHoriz640,
div.PhotoContHoriz600,
div.PhotoContHoriz700,
div.PhotoContHoriz550,
div.PhotoContHoriz500,
div.PhotoContHoriz400,
div.PhotoContHoriz300
{
	height: auto;
	text-align: right;
	margin-bottom: 40%;
	margin-right: 0;
	margin-left: 0;
	margin-top: 0;
	padding: 0;
}

div.PhotoContHoriz        { max-width: 802px; }
div.PhotoContHoriz700     { max-width: 702px; }
div.PhotoContHoriz720	  { max-width: 722px; }
div.PhotoContHoriz750	  { max-width: 752px; }
div.PhotoContHoriz650     { max-width: 652px; }
div.PhotoContHoriz640     { max-width: 642px; }
div.PhotoContHoriz600     { max-width: 602px; }
div.PhotoContHoriz550     { max-width: 552px; }
div.PhotoContHoriz500     { max-width: 502px; }
div.PhotoContHoriz400     { max-width: 402px; }
div.PhotoContHoriz300     { max-width: 302px; }

div.PhotoContVert,
div.PhotoContVert425,
div.PhotoContVert450,
div.PhotoContVert475
{
	height: auto;
	text-align: right;
	margin-bottom: 250px;
	margin-right: 0;
	margin-left: 0;
	margin-top: 0;
	padding: 0;
}

div.PhotoContVert    { max-width: 502px; }
div.PhotoContVert425 { max-width: 427px; }
div.PhotoContVert450 { max-width: 452px; }
div.PhotoContVert475 { max-width: 477px; }


/* Replace with "img inside div.horiz" etc */

img.PhotoContHoriz {
	max-width: 100%;
	height: auto;
	border-width: 1px;
	border-style:solid;
	border-color: #dddddd;
	margin: 0;
	padding: 0;
}

img.PhotoContVert {
	max-width: 100%;
	height: auto;
	border-width: 1px;
	border-style:solid;
	border-color: #dddddd;
	margin: 0;
	padding: 0;
}

/*
img:hover
{
	transform: scale(2.5);
    -ms-transform: scale(2.5);
    -webkit-transform: scale(2.5);
	
	-webkit-transition: all .3s ease-in;
	-moz-transition: all .3s ease-in;
	-ms-transition: all .3s ease-in;
	-o-transition: all .3s ease-in;
	transition: all .3s ease-in;
}
*/

div.PhotoContHoriz       img,
div.PhotoContHoriz       iframe,
a.PhotoContHoriz          img,
div.PhotoContHoriz600 img,
div.PhotoContHoriz750 img,
div.PhotoContHoriz720 img,
div.PhotoContHoriz700 img,
div.PhotoContHoriz650 img,
div.PhotoContHoriz640 img,
div.PhotoContHoriz550 img,
div.PhotoContHoriz500 img,
div.PhotoContHoriz400 img,
div.PhotoContHoriz300 img,
div.PhotoContVert    img,
div.PhotoContVert425 img,
div.PhotoContVert450 img,
div.PhotoContVert475 img
{
	max-width: 100%;
	height: auto;
	border-width: 1px;
	border-style:solid;
	border-color: #dddddd;
	margin: auto;
	padding: 0;
    transition: 0.1s;	/* For zooming */
}

div.PhotoContHoriz img,
div.PhotoContVert img
{
	/* For zooming */
	cursor: zoom-in;
}

div.nozoom img,
div.nozoom img
{
	cursor: auto !important;
}


.video-wrapper {		/* For the div that wraps the div and caption span */
	width: 800px;
	max-width: 100%;
	margin-bottom: 40%;
	text-align: right;
}

.video-container {		/* For the div that wraps the iframe */
	position: relative;
	padding-bottom: 56.25%;	/* For 640 x 360 size, padding is (360 / 640) * 100 = 56.25% */
	height: 0;
	overflow: hidden;
}

.video-container iframe,  		/* For the iframe etc */
.video-container object,  
.video-container embed,
.video-container video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-width: 0px;
	border-style:solid;
}


/* --- Zoom --- */

/* Style the Image Used to Trigger the Modal */

/* #myImg:hover {opacity: 0.7;} */

/* The Modal (background) */
.modal {
    display: none;							/* Hidden by default */
    position: fixed;						/* Stay in place */
    z-index: 1;								/* Sit on top */
/*     padding-top: 100px;						Location of the box */
    left: 0;
    top: 0;
    width: 100%;							/* Full width */
    height: 100%;						/*  Full height */
    overflow: visible;							/*auto Enable scroll if needed */
	background-color: rgb(0,0,0);		/*  	Fallback color */
	justify-content: center;
 }

/* Modal Content (Image) */
.modal-content {
    margin: auto;
    display: block;
    max-width: 100%;
    max-height: 100%;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
    margin: auto;
    display: block;
    max-width: 100%;
    text-align: right;
    padding: 10px 10px;
 /*   height: 150px; */
    color: white;
	text-shadow: 3px 0px 1px black;
	text-shadow: -3px 0px 1px black;
	text-shadow: 0px 3px 1px black;
	
    position: fixed;
	bottom: 10px;
	right: 10px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption { 
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.3s;
    animation-name: zoom;
    animation-duration: 0.3s;
}
/*
@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}
*/
@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}


/* The Close, Next and Previous buttons */
.slideshow {
    position: fixed;
    top: 95%;
	display: flex;
	justify-content: center;
}

/*
Specify the ">" or "<" this way rather than in the HTML.
Use the #id rather than .class. ? Decimal &#10095; and &#10094; must be "\<hex>"
*/
.close {
    position: fixed;
    top: 15px;
    right: 35px;
	/* Hack, until HTML 'X' content is removed */
	visibility: hidden;
	font-size: 1px;
}

.close::after,
#closeX::after {
	content: "\00d7";
	visibility: visible;
}

.next_pic {
    position: fixed;
    top: 50%;
    right: 35px;
	/* Hack, until HTML '>' content is removed */
	visibility: hidden;
	font-size: 1px;
}

.next_pic::after,
#nextPic::after {
	content: "\276f";
	visibility: visible;
}

.prev_pic {
    position: fixed;
    top: 50%;
    left: 35px;
	/* Hack, until HTML '<' content is removed */
	visibility: hidden;
	font-size: 1px;
}

.prev_pic::before,
#prevPic::before {
	content: "\276e";
	visibility: visible;
}

.next_pic,
.prev_pic,
.slideshow,
.close,
#close
{
    color: white;
    font-size: 40px;
	text-shadow: 2px 1px 2px black;
	opacity: 0.7;
}

.slider_label
{
    font-size: 14px;
}

.next_pic:hover,
.prev_pic:hover,
#start:hover,
#stop:hover,
.close:hover,
#slider:hover
 {
    text-decoration: none;
    cursor: pointer;
	opacity: 1;
}

#slider
{
	width: 100px;
}


/* button on slider */
#slider::-webkit-slider-thumb 
{
}

#slider::-moz-range-thumb
{
}


/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px)
{
    .modal-content 
	{
        width: 100%;
    }
}



:link { color: #BFBFFF; } 			/* Unvisited links */
:visited { color: #BFBFFF;  } 		/* Visited links */

/* Remove underline from links except when hovering */
a:link, a:visited, a:active{ text-decoration: none; }
a:hover { text-decoration: underline; }


.credit
{
	font-size: 75%;
	float: left;
	text-align: left;
	line-height: 150%;
}


h1, h2, h3, h4, h5, h6 {
	color: #FFFFFF;
}


ul
{
	margin-top: 0px;
	margin-bottom: 0.5em;	
}

li.restrict
{
	list-style-type: disc;
/*
	list-style-image: url("./padlock2-svgrepo-com.svg");
	max-height:11px;
*/
}

/* https://www.svgrepo.com/vectors/padlock/monocolor/ */
.padlock
{
	display: inline;
	max-height:11px;
	position: relative;
	top: 1px;
}