body, input, select, textarea {
	font-family: Calibri, Verdana, helvetica, sans-serif;
}

body {
	margin: 0;
	padding: 0;
}

body.light {
	background-color: #f0f0f0;
}

em {
	text-decoration: underline;
}

.hidden, .prototype {
	display: none !important;
}

.uppercase {
	text-transform: uppercase;
}

.clickable {
	cursor: pointer;
}

#login-background,
#browse-background,
#shared-background {
	background-image: url(background/cliffmania-bg.jpg); 
}

#login-form-container {
	position: absolute;
	margin: 0;
	padding: 0;
	left: 0;
	top: 20vh;
	width: 100vw;
	min-height: 30vh;
	background-image: url(white-dim.png); 
	background-image: radial-gradient(circle farthest-side, rgba(255, 255, 255, .8), rgba(255, 255, 255, .4));
	background-image: -webkit-radial-gradient(circle farthest-side, rgba(255, 255, 255, .8), rgba(255, 255, 255, .4));
	text-align: center;
	border-top: solid rgba(0, 0, 0, .25) 1px;
	border-bottom: solid rgba(0, 0, 0, .25) 1px;
}

#login-form-container .links {
	margin-top: 1em;
}

#login-form-container .links a {
  font-size: 1.1rem;
  color: #333;
  font-weight: bold;
  text-decoration: none;
}

#login-form-container .call-to-action {
	margin-top: 1em;
}

#login-form-container > form {
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	align-items: center;
	-webkit-align-items: center;
	width: 100vw;
	padding: 3em 0;
}

#login-form-container > form > label {
	font-size: 1.2rem;
	margin: .5ex;
	font-weight: bold;
}

#login-form-container > form > input[type='text'] {     
	width: 12em;
	font-size: 1.5rem;
	margin: .5ex;
	padding: 1ex 1em;
	text-align: center;
	background-color: #fff;
	border: solid #aaa 1px;
}

#login-form-container > form > button {
	width: 12em;
	font-size: 1.2rem;
	margin: 1em;
	padding: 1ex 1em;
	text-align: center;
	border-style: none;
	color: rgba(255, 255, 255, .95);
	background-color: #eb5c14;
	font-weight: bold;
}

#login-form-container > form > button[disabled] {
	background-color: #bbb;
}

@media only screen and (max-width:1023px) {
  
  #login-form-container {
    top: 10vh;
  }
  
  #login-form-container > form > input[type='text'] {
    font-size: 1.2rem;
  }
  
  #login-form-container > form > button {
    font-size: 1.1rem;
  }
  
}

.msg {
	max-width: 40em;	
}

.msg.error {
	color: #b00;
	font-weight: bold;
}

.msg.success {
	color: #080;
	font-weight: bold;
}

#header {
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	line-height: 0;
	background-color: #fff;
	color: #000;
	border-bottom: solid #bbb 1px;
	display: flex;
	display: -webkit-flex;
	flex-flow: row nowrap;
	-webkit-flex-flow: row nowrap;
	align-items: center; 
	-webkit-align-items: center;
	padding: .5em 0;
	overflow: hidden;
}

#header.shared {
	position: absolute;
}

#header .logo {
	width: 13em;
	height: 3em;
	background-image: url(logo/cliff-logo.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 0% 50%; 
}

#header .customer-logo {
  width: auto;
	height: 3em;
  margin-right: 2em;
}

#header h1 {
	flex: 1;
	-webkit-flex: 1;
	padding: 0;
	margin: 0;
	font-size: 1.6rem;
	font-weight: bold;
}

#header .right {
	font-size: 1rem;
	text-align: right;
	margin-right: 2em;
}


#footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100vw;
	background-color: rgba(0, 0, 0, .5);
	color: #ccc;
	border-top: solid rgba(0, 0, 0, 0.25) 1px;
	padding: .5em;
	overflow: hidden;
	box-sizing: border-box;
	text-align: center;
}

#footer .links a {
  color: #fff;
  text-decoration: none;
}

#main-content {
	margin-top: 6em;
	margin-bottom: 4em;
}

#main-content .call-to-action {
  text-align: center;
}

#main-content .call-to-action-top {
	margin-bottom: 1em;
}

#main-content .call-to-action-bottom {
  margin-top: 1em;
}

#main-content.shared {
  text-align: center;
}

#main-content.shared img {
	max-width: 90%;
}

#main-content > p {
	text-align: center;
}

form button {
	cursor: pointer;
}


@media only screen and (max-width:1023px) {
	
	#header .logo {
		width: 13em;
	}
	
	#header h1 {
		display: none;
	}
	
	#header .right {
		flex: 1;
		-webkit-flex: 1;
	}
	
}

@media only screen and (max-width:719px) {
  
  #header .logo.optional {
    display: none;
  }

}

@media only screen and (min-width:480px) {
  
	.icons.overlay {
		display: none;
	}

}

@media only screen and (max-width:479px) {
	
	#header .icons {
		display: none;
	}

  #header .customer-logo {
    padding: 1ex;
    margin-left: 1ex;
  }
  	
	.icons.overlay {
		position: fixed;
		right: 0;
		top: 5em;
		white-space: normal;
		width: 3em;
		background-color: rgba(255, 255, 255, .6);
		border-radius: 1ex 0 0 1ex;
		padding: 1ex 3ex 1ex 1ex;
		z-index: 900;
	}

  #main-content {
		margin-bottom: 0;
  }
  
  #footer {
		position: relative;
		bottom: inherit;
		width: inherit;
		margin: 0;
  }  

}

ul.photos {
	display: block;
	max-width: 1024px; 
	list-style-type: none;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	text-align: center;
}

ul.photos > li {
	margin: 0 1em 1em 0;
	padding: 0;
	display: inline-block;
}

ul.photos > li.break {
	display: table-row;
}

.photo-container {
	display: table-cell;
	width: 250px;
	height: 250px;
	background-color: transparent;
	text-align: center;
	vertical-align: middle;
	margin: 0;
	padding: 0;
}

.photo-container > a {
	cursor: pointer;
}

.photo-container > a > .photo,
.photo-container > video {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-color: rgba(0, 0, 0, .25);
	border: solid rgba(0, 0, 0, .5) 1px;
}

.photo-container > a.thumbnail > .photo > img {
	display: block;
	object-fit: cover;
	object-position: center;
}

.photo-container > a.thumbnail.photo > .photo > img,
.photo-container > a.thumbnail.video > .photo > img {
	width: 250px;
	height: 250px;
}

.photo-container > a.thumbnail.animation > .photo > img {
	max-width: 90vw;
	height: auto;
}

.photo-container .photo-title {
	min-width: 2.5em;
	margin-top: .75ex;
	margin-left: .75ex;
	border-radius: 1.2em;
	padding: .75ex;
	color: #eee;
	background-color: rgba(100, 100, 100, .9);
	font-size: 0.95rem;
	align-items: center;
	-webkit-align-items: center;
	transition: background-color .2s ease;
}

.photo-container .photo-title.clickable {
	background-color: rgba(160, 160, 160, .95);
}

.photo-container .photo-title.inactive {
	background-color: rgba(245, 245, 245, .85);
}

.photo-container .photo-title.inactive.success,
.photo-container .photo-title.success {
	background-color: rgba(20, 80, 20, .75);
}

.photo-container .photo-title.clickable:hover {
	background-color: rgba(200, 200, 200, .95);
}

.photo-container .photo-title:first-child {
	margin-left: 0;
}

.photo-container .photo-title > .photo-title-container {
	display: flex;
	display: -webkit-flex;
	flex-direction: row;
	-webkit-flex-direction: row;
	justify-content: center;
	-webkit-justify-content: center;
	padding-bottom: .2ex;
}

.photo-container .photo-title > .photo-title-container > img {
	height: 1em;
	padding: .25ex 1.5ex 0 1.5ex;
}

.photo-container .photo-title > .photo-title-container > img.leading {
	padding-left: 0;
	padding-right: 1em;
}

.line {
	display: flex;
	display: -webkit-flex;
	flex-direction: row;
	-webkit-flex-direction: row;
}

.line a {
	text-decoration: none;
}

.line .stretch {
	flex: 1;
	-webkit-flex: 1;
}

.line .fix {
  flex: 0;
  -webkit-flex: 0;
}

.fullscreen {
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	padding: 0;
	margin: 0;
}

.background {
	z-index: -1000;
	background-size: cover;
	background-position: 50% 50%;
}

.icons {
	white-space: nowrap;
}

.icons a .icon {
	display: inline-block;
	width: 3.5em;
	height: 3.5em;
	padding: .5em .25em 0 .25em;
	background-size: 3.5em 3.5em;
	box-sizing: border-box;
}

.icons.browse {
	padding: 0 2em;
}

.icons.browse a img {
	max-width: 3em;
	max-height: 3em;
	padding: 0;
}

.icons .icon.facebook {
	background-image: url(icon/icon-facebook.png);
}

.icons .icon.information {
  background-image: url(icon/icon-info.png);
}

.message.overlay {
	z-index: 111111;
	position: fixed;
	left: 0;
	right: 0;
	top: 10em;
}

.message.overlay .message {
	max-width: 20em;
	margin-left: auto;
	margin-right: auto;
	padding: 1em;
	box-sizing: border-box;
	box-shadow: rgba(0, 0, 0, .8) 5px 5px 10px;
	border-radius: 1ex;
	text-align: center;
	font-weight: bold;
	color: rgba(0, 0, 0, 0.9);
}

.message.overlay .message.success {
	background-color: rgb(150, 220, 150);
}

.message.overlay .message.error {
	background-color: rgb(220, 150, 150);
}

.message.overlay .message.information {
	background-color: rgb(240, 240, 150);
}

.message.overlay .message.icon {
	background-size: auto 2.5em;
	background-position: 1.5em 50%;
	background-repeat: no-repeat;
	padding-left: 5em;
}

.message.overlay .message.icon.printer {
	background-image: url(icon/icon-printer.png);
}

.message.overlay .message.icon.error {
	background-image: url(icon/icon-warning.png);
}

.message.overlay .message.icon.information {
	background-image: url(icon/icon-information.png);
}