/* modal outer stuff */
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  overflow-y: scroll;
}
.fixed::-webkit-scrollbar {
  width: 3px;
}
.fixed::-webkit-scrollbar-track {
  background:white;
}
.fixed::-webkit-scrollbar-thumb {
  background: black;
}
.fixed::-moz-scrollbar {
  width: 3px;  
}
.fixed::-moz-scrollbar-track {
  background: white;
}
.fixed::-moz-scrollbar-thumb{
  background: black;
}
.animate {
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}
.mediaDrawer {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  background: white;
  text-align: center;
  overflow-x: hidden;
  display:table;
}
.mediaDrawer.active {
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
}

/* modal innards */
.box {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
}
button {
  padding: 8px;
  float: right;
  font-weight: 500;
  width: 100%;
	font-size:14px;
}

/* confirm modal yes/no buttons & flicker effect on "yes" */
.confirm button {
	float: auto;
	width: 200px;
	margin: 10px;
}
.confirm button.yes {
	color: red;	
}
.confirm button.yes:hover {
	animation: flicker 0.1s infinite;
	background: white;
}
@keyframes flicker {
	49% { background: white; color: red; }
	50% { background: red; color: white; }
}


/* errors should come back in a standard format from the server */
.errors {
	display: none;
	width: 100%;
	text-align: center;
	background: #f8f8f8;
	padding: 10px;
	margin:5px 0 10px 0;
	border-radius: 3px;
}
.errorList {
	font-weight: 300;
}
.errors div, form .errors div, form .errorList div {
	float: none;
}

/* close button */

.close {
	font-weight: 100;
	font-size: 70px;
	float: right;
	cursor: pointer;
	position: fixed;
	right: 20px;
	top: 20px;
	z-index: 20;
	background: white;
	width: 75px;
	color: black;
	border: 1px solid black;
	box-shadow: -3px 4px black;
	line-height: 75px;
	text-align: center;
}
#fixed_close {
	display: none;
	-webkit-transform: translateY(-200px) translateZ(0);
	transform: translateY(-200px) translateZ(0);
}
#fixed_close.active {
	-webkit-transition: 0.2s -webkit-transform linear 1s;
	transition: 0.2s transform linear 1s;
	display: block;
	-webkit-transform: translateY(0px) translateZ(0);
	transform: translateY(0px) translateZ(0);
}
.desktop .close:hover {
  background:black;
	color:white;
}