body {
	height: 100vh;
	width:100%;
	background-color: #00192d;
	position:absolute;
	top:0;
	left:0;
}

.loadingCover {
	background: rgba(0, 0, 0, 0.2);
	position: fixed;
	top: 0;
	height: 100%;
	width: 100%;
	z-index: 1000;
}

#wrapper-out {
	z-index: 1050;
	background-color:black !important;
}

.row_full {
	max-width: 100%;
}

.tooltip-inner {
  /*!important is not necessary if you place custom.css at the end of your css calls. For the purpose of this demo, it seems to be required in SO snippet*/
  color: #fff;
}

#paymentModal > div > div > div.modal-header > button {
	color: white;
	padding: 3px;
}

/*Admin*/

.tableImg {
	max-height: 66px;
}

table.table td.imgTd {
	padding: .25rem;
}

#tmahlmannSearch {
	width: 300px;
	position: absolute;
	left: 0;
	margin-top: 5px;
	margin-left: 10px;
	z-index: 500;
	border-color:whitesmoke;
	color:black;
	display: none;
}

#tmahlmannSearch::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: black;
    opacity: 1; /* Firefox */
}

.tooltip {
	z-index: 950 !important;
}

.modal-content {
	background-color:#1e1e1e;
	color:white;
}

.modal {
    position: fixed;
    right: 0;
    bottom: 0;
    top:auto;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    outline: 0;
}

.modal-dialog {
	margin-bottom: 0;
}



.swal2-container.swal2-center.swal2-shown {
	z-index: 100000;
}

.swal2-popup {
	position: fixed;
	bottom:0px;
	transition:all .1s ease-in;
}

.loadingCoverMessage {
	font-size: 50px;
	font-weight: 600;
	top: 40%;
	display: block;
	width: 100%;
	color: white;
	margin: auto;
	text-align: center;
	position: fixed;
}

.hide {
	display: none;
}

/* Navbar */

nav.navbar-dark.navbar {
	background-color: #f96854;
}

header #navigation > ul {
	margin-bottom: 0;
}

/* Empty State */

#tmahlmannEmptyState {
	width: 100%;
	text-align: center;
	font-size: 30px;
	padding-top: 100px;
	color: white;
}

/* Breadcrumbs */

ol.breadcrumb {
	border-radius: 0px;
	margin: auto;
}
ol.breadcrumb a {
	color: white;
}
#breadcrumbNav ol.breadcrumb{
	background-color: #1e1e1e;
	color: white;
}

/* User Info */

#userInfo {
	width: 100%;
	display: block;
	background-color:grey;
	min-height: 50px;
	height:auto;
	text-align: right;
}

#userInfo .item {
	padding-top:2px;
	padding-bottom:2px;
	position: relative;
	right:0;
	color:white;
	padding-right: 20px;
	text-align: right;
}

#recalcAlbumButton {
	margin-top:3px;
}

/* Cards */

.card-click {
	cursor: pointer;
}

.card-body {
	padding-bottom: 0.4rem;
	padding-top: 0.4rem;
	border-radius: 0px;
	background-color:#1e1e1e;
	color: #e0e0e0;
}

.card.grid-item {
	width: calc( ( 100% - 30px) / 4);
	float: left;
	border: 0;
	margin-bottom: 10px;
	padding: 0;
	border-radius: 0px;
}

.container {
	padding-left:10px;
	padding-right:10px;
}


h5.card-title {
	margin-bottom:3px;
}

.container-fluid {
	padding-left:0;
	padding-right:0;
}

.card-columns {
	opacity: 1;
	transition: all .3s ease-in;
}

.loading {
	opacity: 0;
	min-height: 500px;
}

.card.card-click {
	background-color: #616161;
	transition: all .2s ease-in;
}

.card:hover {
	opacity: .8;
}

.card.imageCoverBody:hover {
	opacity: 1;
}

.card {
	transition: .2s;
}

/* Image Popup */

.imageCover {
	background: rgba(0, 0, 0, 1);
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100%;
	z-index: 800;
	overflow-y: scroll;
}

.imageCoverBody {
	background-color: transparent;
	border: 0;
	height: 100vh;
}

.imageCardMain,
.imageCoverBody .list-group {
	padding: .75rem 1.25rem;
	max-width: 50%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	background-color: grey;
	border: 0;
	width: 250px;
}

.imageFooter {
	height: 50px;
	width:100%;
	bottom:0;
	position:fixed;
	display: block;
}

#cardBuyLink {
	float: right;
	display: inline-block;
	background-color:grey;
	border-color:grey;
	color:white;
	border-radius:0;
	padding-left:30px;
	padding-right:30px;
	text-transform: uppercase;
	margin-right:10px;
}


.tmahlmannIcon {
	color:grey;
	float:right;
	display: inline-block;
	margin-right:10px;
	font-size:25px;
	cursor: pointer;
	padding-right: 7px;
}

.tmahlmannIcon i.material-icons {
	position: relative;
	top: 5px;
	display: inline-block;
	font-weight:800;
	padding-right:3px;
}

.downloaded {
	/*border: 1px solid #4caf50;*/
}

#downloadIcon {
	border-bottom: 2px solid grey;
}

i.downloadedIcon {
	bottom: 1rem;
    right: 1rem;
    position: absolute;
    color: white;
    background-color: black;
    padding: .4rem;
    border-radius: 50%;
}

.tmahlmannIcon:hover {
	color:grey;
}

#tmahlmannImages {
	min-height: 200px;
}

#cardTitle {
	display: inline-block;
    max-width: 50%;
    color: grey;
    padding: 10px;
    height: auto;
    position: fixed;
    bottom: 0px;
}

.list-group {
	margin-bottom: 2rem;
}

.card-body.imageCardMain {
	margin-top: 1.5rem;
}

.card-body.imageCardMain p {
	margin: 0;
}

.imageCardMetadata {
	margin: auto;
	display: block;
	position: fixed;
	bottom: 0;
	margin-bottom: 0;
	display: none;
}

#metadataBody {
	bottom: -10vh;
	display: block;
	background-color: black;
	position: absolute;
	left: calc(50% - 200px);
	width: 400px;
	transition: all 0.1s ease-in;
	color:white;
}

#agreementBody {
	bottom: 0;
	top: 0;
	left: 0;
	display: block;
	background-color: black;
	position: fixed;
	width: 100%;
	height: 100%;
	transition: all 0.1s ease-in;
	color: white;
	overflow: scroll;
	z-index: 900;
}

#agreement {
	width: auto;
	top: 100px;
	position: relative;
	max-width: 80%;
	display: block;
	margin: auto;
	overflow: scroll;
	padding-bottom: 50px;
}

#inputName {
	background:whitesmoke;
	color:black;
}

#submitAgreement,#cancelAgreement {
	margin-top: 4rem;
}

.metadataList {
	padding:10px;
}

.metadataList .list-group-item {
	background-color:#000;
}

#metadataBody .metadataHeader {
	height: 20px;
}

#metadataBody .metadataClose {
	display: none;
	float:right;
	color:white;
	z-index: 950;
}

#metadataBody.show .metadataClose {
	display: inline-block;
}

#metadataBody.show {
	bottom:0;
	background-color: black;
}

#buyPrintsCard {
	position: fixed;
	right: 0;
	bottom: 0;
}

.imageCover .card-header {
	max-width: 50%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	position: fixed;
	left: 0;
	bottom: 0;
	background-color: grey;
	color: white;
	margin-top: 20px;
}

.additional_icons {
	display: none;
}

.imageCoverBody img {
	max-height: 80%;
	max-width: 100%;
	width: auto;
	height: auto;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

img.card-img:hover {
	transform: scale(1.0);
	-webkit-transform: scale(1.0);
	-moz-transform: scale(1.0);
	-ms-transform: scale(1.0);
	-o-transform: scale(1.0);
}

img.card-img {
	border-radius: 0;
}



.imageCoverClose.btn.btn-link i {
	font-size: 3rem;
	cursor: pointer;
}

.imageCoverClose.btn.btn-link {
	position: fixed;
  top: 6%;
	color: white;
	right: 2%;
	cursor: pointer;
	z-index:950;
}

/* Jumbotron */

.jumbotron {
	background-color:black;
	background-position: center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	border-radius: 0px;
	margin-bottom: 0;
}

.jumbotron-heading,
	#albumMessage {
		text-shadow: 3px 3px 3px #000;
		color: white;
	}

.jumbotron .container {
	background-color: transparent !important;
}
.jumbotron {
	min-height: 200px;
}

#container {
	width: 100% !important;
	max-width: 100%;
}

@media only screen and (max-width: 600px) {
	.card.grid-item {
		width: calc( ( 100% - 10px) / 2);
	}
	.container {
		padding-left:0;
		padding-right:0;
	}
	#cardTitle {
		display: inline-block;
		max-width: 100%;
		font-size:12px;
		color: grey;
		padding: 10px;
		height: auto;
		position: fixed;
		bottom: 70px;
	}
	.imageFooter a.tmahlmannIcon { 
		font-size:13px;
	}
	
	#tmahlmannSearch {
		width: 90%;
		position: relative;
		left: 0;
		margin: auto;
		top:5px;
	}
	
	#userInfo .item {
		text-align:center;
	}
	
	.imageCoverBody img {
		max-height: 80%;
		top:-10%;
	}

}

/* Main Section */

div.album {
	min-height: 500px;
}

#accountPage,#adminPage {
	min-height: 400px;
	color: white;
	padding-top: 2rem;
	display: none;
}

#adminMain {
	min-height: 400px;
	color: white;
	padding:2rem;
}


#userImage {
	float: right;
}

/* Spinner */

.spinner {
	margin: 50px auto 0;
	width: 100%;
	text-align: center;
	margin-top:200px;
}

.spinner>div {
	width: 25px;
	height: 25px;
	background-color: #fff;
	border-radius: 100%;
	display: inline-block;
	-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
	animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}

.spinner .bounce2 {
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}

#wpadminbar {
	display: none;
}

.header_area.sticky_h .second_navi{
	top:50px;
}

.header_area.sticky_h {
	top:0px;
}


/*Mobile*/

@media only screen and (max-width: 600px) {
	.imageFooter {
		height: 80px;
	}
	.tmahlmannIcon {
		color: grey;
     	float: none; 
	    margin: auto;
	    display: block;
	    margin-right: 10px;
	    font-size: 25px;
	    cursor: pointer;
	    padding-right: 7px;
	    margin-left: 10px;
	}
}

@-webkit-keyframes sk-bouncedelay {
	0%,
	80%,
	100% {
		-webkit-transform: scale(0)
	}
	40% {
		-webkit-transform: scale(1.0)
	}
}

@keyframes sk-bouncedelay {
	0%,
	80%,
	100% {
		-webkit-transform: scale(0);
		transform: scale(0);
	}
	40% {
		-webkit-transform: scale(1.0);
		transform: scale(1.0);
	}
}