/* Y'S GEAR : db-wish.css */


.mfpWish.mfp-bg {
	background: #fff;
}
.mfpWish .mfp-content {
	max-width: 500px !important;
	height: 60vh;
	background: #fff;
}

.mfpWish .mfp-iframe-scaler .mfp-close {
	top: 0;
	right: 0;
	width: 40px;
	padding: 0;
	color: #333;
	text-align: center;
}

.mfpWish .mfp-iframe {
	border: 1px solid #ccc;
	background: #fff;
	box-shadow: none;
}


/*======================================================================*
 *  [ addWish | ほしいものリストに追加 ]
 *======================================================================*/

.addWish {
	padding: 20px;
	/* border: 1px solid #ccc; */
	background: #fff;
	font-size: 13px;
	font-size: 1.3rem;
	line-height: 1.4;
}

/* [ タイトル ] */
.addWish .title {
	margin-bottom: 15px;
	padding-bottom: 10px;
	color: #000;
	border-bottom: 3px solid #000;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1.2;
}

/* [ 追加 ] */
.addWish .add p { margin: 15px 0; }
.addWish .add > b {
	display: block;
	margin: 15px 0 5px;
}
.modalWishButton {
	display: block;
	width: 100%;
	max-width: 280px;
	margin: 0 auto;
	padding: 10px;
	border: 3px solid #71af2d;
	border-radius: 5px;
	box-sizing: border-box;
	background: #fff;
	color: #333;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1.3;
	text-align: center;
	cursor: pointer;
}
.modalWishButton:hover, 
.modalWishButton:active {
	background: #eaf3e0;
}
.modalWishButton::before {
	display: inline-block;
	margin-right: 5px;
	width: 24px;
	height: 24px;
	background: url(/app/shared/svg/wishlist/icon_wish_green.svg) center center no-repeat;
	background-size: contain;
	vertical-align: text-bottom;
	content: "";
}
.modalCartButton {
	display: block;
	width: 100%;
	max-width: 280px;
	margin: 0 auto;
	padding: 10px;
	border: 3px solid #ee7400;
	border-radius: 5px;
	box-sizing: border-box;
	background: #fff;
	color: #333;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1.3;
	text-align: center;
	cursor: pointer;
}
.modalCartButton:hover, 
.modalCartButton:active {
	background: #fdf1e5;
}
.modalCartButton::before {
	display: inline-block;
	margin-right: 5px;
	width: 24px;
	height: 24px;
	background: url(/app/shared/svg/wishlist/icon_cart_orange.svg) center center no-repeat;
	background-size: contain;
	vertical-align: text-bottom;
	content: "";
}
.modalWishButton[disabled], 
.modalCartButton[disabled] {
	border-color: #ccc;
	color: #ccc;
	cursor: default;
}
.modalWishButton[disabled]:hover, 
.modalWishButton[disabled]:active, 
.modalCartButton[disabled]:hover, 
.modalCartButton[disabled]:active {
	background: #fff;
}
.modalWishButton[disabled]::before {
	background: url(/app/shared/svg/wishlist/icon_wish_gray.svg) center center no-repeat;
}
.modalCartButton[disabled]::before {
	background: url(/app/shared/svg/wishlist/icon_cart_gray.svg) center center no-repeat;
}

/* [ ログイン ] */
.addWish .login > div, 
.addWish .login > form > div { padding: 10px 15px; }
.addWish .login .in {
	margin-top: 15px;
	background: #f7f7f7;
}
.addWish .login .no {
	margin-top: 5px;
	background: #f0f1f8;
}
.addWish .login .stitle {
	margin-bottom: 10px;
	font-size: 1.6rem;
	line-height: 1.2;
}
.addWish .login .stitle b, 
.addWish .login .stitle span {
	display: inline-block;
	vertical-align: middle;
}
.addWish .login .stitle b { margin-right: 10px; }
.addWish .login .stitle span {
	padding: 2px 3px;
	border-radius: 3px;
	background: #363a90;
	color: #fff;
	font-size: 1.1rem;
	line-height: 1;
}
.addWish .login p a {
	display: inline-block;
	color: #363a90;
	text-decoration: underline;
}
.addWish .login p a:hover, 
.addWish .login p a:active { text-decoration: none; }
.addWish .login .remind {
	margin: 5px 0;
	font-size: 1.1rem;
	text-align: right;
}
.addWish .login input[type="text"], 
.addWish .login input[type="password"] {
	display: block;
	width: 100%;
}
.addWish .login input + input { margin-top: 5px; }

/* [ ログイン：エラーテキスト ] */
.addWish .login .error {
	margin: 10px 0 0 0 !important;
	color: #ff0000;
}
.addWish .login .error::before {
	margin: 0 7px;
	content: url(/app/shared/svg/icon_error.svg);
	vertical-align: middle;
}

/* [ ログイン：ボタン ] */
.addWish .login .btn { margin: 5px 0; }
.addWish .login .btn a + a, 
.addWish .login .btn button + button { margin-top: 10px; }
.addWish .login .use {
	display: block;
	position: relative;
	width: 100%;
	max-width: 280px;
	margin: 0 auto;
	padding: 13px 15px;
	border: none;
	box-sizing: border-box;
	background: #000; /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(66,66,66,1) 0%, rgba(32,32,32,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(66,66,66,1)), color-stop(100%,rgba(32,32,32,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(66,66,66,1) 0%,rgba(32,32,32,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -ms-linear-gradient(top,  rgba(66,66,66,1) 0%,rgba(32,32,32,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(66,66,66,1) 0%,rgba(32,32,32,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#424242', endColorstr='#202020',GradientType=0 ); /* IE6-9 */
	color: #fff !important;
	font-size: 1.8rem;
	line-height: 1;
	text-align: center;
	cursor: pointer;
}
.addWish .login .use:hover, 
.addWish .login .use:active {
	background: #424242; /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(0,0,0,1) 0%, rgba(66,66,66,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(66,66,66,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(66,66,66,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -ms-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(66,66,66,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(66,66,66,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#424242',GradientType=0 ); /* IE6-9 */
	color: #fff !important;
}
.addWish .login .use:after {
	display: block;
	position: absolute;
	top: 50%;
	right: 10px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	width: 10px;
	height: 10px;
	margin: -7px 0 0 0;
	border-top: 3px solid #969696;
	border-right: 3px solid #969696;
	content: "";
}

/* [ 完了 ] */
.addWish .complete p {
	margin: 50px 0;
	font-size: 1.6rem;
	text-align: center;
}
.addWish .complete p strong span {
	font-size: 2rem;
}

/* [ 完了：ボタン ] */
.addWish .complete .btn a + a { margin-top: 10px; }
.addWish .complete .btn a + button { margin-top: 10px; }
.addWish .complete .btn button + a { margin-top: 10px; }
.addWish .complete .btn button + button { margin-top: 10px; }
.addWish .complete .list, 
.addWish .complete .cart, 
.addWish .complete .delete, 
.addWish .complete .close {
	position: relative;
	display: block;
	width: 100%;
	max-width: 280px;
	margin: 0 auto;
	padding: 10px;
	border-radius: 5px;
	box-sizing: border-box;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1.3;
	text-align: center;
	cursor: pointer;
}
.addWish .complete .cart::before, 
.addWish .complete .delete::before {
	display: inline-block;
	margin-right: 5px;
	width: 24px;
	height: 24px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	vertical-align: text-bottom;
	content: "";
}

/* [ リストを見るボタン ] */
.addWish .complete .list {
	border: 3px solid #71af2d;
	background: #fff;
	color: #333;
}
.addWish .complete .list:hover, 
.addWish .complete .list:active {
	background: #eaf3e0;
}
.addWish .complete .list::after {
	position: absolute;
	top: 50%;
	right: 15px;
	width: 10px;
	height: 10px;
	margin-top: -7px;
	border-top: 3px solid #71af2d;
	border-right: 3px solid #71af2d;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	content: "";
}

/* [ カートを見るボタン ] */
.addWish .complete .cart {
	border: 3px solid #ee7400;
	background: #fff;
	color: #333;
}
.addWish .complete .cart:hover, 
.addWish .complete .cart:active {
	background: #fdf1e5;
}
.addWish .complete .cart::before {
	background-image: url(/app/shared/svg/wishlist/icon_cart_orange.svg);
}

/* [ リストから削除するボタン ] */
.addWish .complete .delete {
	border: 3px solid #909090;
	background: #909090;
	color: #fff;
}
.addWish .complete .delete:hover, 
.addWish .complete .delete:active {
	border-color: #000;
	background: #000;
}
.addWish .complete .delete::before {
	background-image: url(/app/shared/svg/icon_delete.svg);
}

/* [ 閉じるボタン ] */
.addWish .complete .close {
	margin-top: 20px !important;
	max-width: 160px;
	padding: 5px 10px;
	border: 3px solid transparent;
	background: #999;
	color: #fff;
	font-size: 1.4rem;
}
.addWish .complete .close::before {
	display: inline-block;
	margin-right: 5px;
	content: "×";
}
.addWish .complete .close:hover, 
.addWish .complete .close:active { background: #666; }


/*======================================================================*
 *  [ wishColorSelect | 色選択 ]
 *======================================================================*/

.wishColorSelect {
	display: block;
	position: relative;
	margin: 0 0 15px 0;
	border: 1px solid #ccc;
	border-radius: 5px;
	background: #fff; /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(241,241,241,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(241,241,241,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(241,241,241,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(241,241,241,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(241,241,241,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f1f1f1',GradientType=0 ); /* IE6-9 */
	z-index: 1;
}
.wishColorSelect::after {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	padding: 0 10px;
	height: 45px;
	border-left: 1px solid #ccc;
	border-radius: 0 4px 4px 0;
	background: #e4e4e4; /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(241,241,241,1) 0%, rgba(228,228,228,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(241,241,241,1)), color-stop(100%,rgba(228,228,228,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(241,241,241,1) 0%,rgba(228,228,228,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -ms-linear-gradient(top,  rgba(241,241,241,1) 0%,rgba(228,228,228,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(241,241,241,1) 0%,rgba(228,228,228,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#e4e4e4',GradientType=0 ); /* IE6-9 */
	line-height: 45px;
	font-size: 10px;
	content: "▼";
	z-index: 1;
}
.wishColorSelect select {
	display: block;
	position: relative;
	width: 100%;
	height: 45px;
	padding: 10px 40px 10px 10px;
	border: none;
	box-sizing: border-box;
	background: none;
	font-size: 16px;
	font-size: 1.6rem;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	z-index: 2;
}
.wishColorSelect select::-ms-expand {
	display: none;
}

/*======================================================================*
 *  [ wishSizeSelect | サイズ選択  ]
 *======================================================================*/

.wishSizeSelect {
	margin: 0 0 15px 0;
	border-top: 1px dotted #bcbcbc;
}
.wishSizeSelect li {
	list-style-type: none;
	border-bottom: 1px dotted #bcbcbc;
}
.wishSizeSelect label {
	display: table;
	width: 100%;
	padding: 7px 0;
	cursor: pointer;
	-webkit-transition: background 0.2s linear;
	transition: background 0.2s linear;
}
.wishSizeSelect label:hover {
	background: #f0f0f0;
}
.wishSizeSelect strong, 
.wishSizeSelect span {
	display: table-cell;
	position: relative;
	box-sizing: border-box;
	vertical-align: middle;
}
.wishSizeSelect strong {
	/* width: 25%; */
	width: 35%;
	padding: 0 10px 0 28px;
	color: #000;
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: normal;
}
.wishSizeSelect strong::before, 
.wishSizeSelect input[type="checkbox"] + strong::before, 
.wishSizeSelect input[type="checkbox"] + strong::after {
	display: block;
	position: absolute;
	top: 50%;
	left: 5px;
	margin: -12px 0 0 0;
	font-weight: bold;
	content: "";
}

.wishSizeSelect input[type="checkbox"] {
	display: none;
}
.wishSizeSelect input[type="checkbox"] + strong::before, 
.wishSizeSelect input[type="checkbox"] + strong::after {
	content: "" !important;
}
.wishSizeSelect input[type="checkbox"] + strong::before {
	width: 16px;
	height: 16px;
	margin: -9px 0 0 0;
	border: 1px solid #ccc;
	border-radius: 5px;
	background: #fff; /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(241,241,241,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(241,241,241,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(241,241,241,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(241,241,241,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(241,241,241,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f1f1f1',GradientType=0 ); /* IE6-9 */
}
.wishSizeSelect input[type="checkbox"]:disabled + strong::before {
	background: #ddd;
}
.wishSizeSelect input[type="checkbox"] + strong::after {
	width: 6px;
	height: 8px;
	margin: -7px 0 0 5px;
	border-right: 3px solid transparent;
	border-bottom: 3px solid transparent;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transition: border-color 0.2s linear;
	transition: border-color 0.2s linear;
}
.wishSizeSelect input[type="checkbox"]:checked + strong::after {
	border-color: #e95900;
}
.wishSizeSelect input[type="checkbox"]:disabled + strong::after {
	width: 0;
	height: 20px;
	margin: -10px 0 0 8px;
	border-right: 2px solid;
	border-bottom: none;
	border-color: #ff0000;
}
.wishSizeSelect em {
	display: inline-block;
	color: #666;
	font-size: 11px;
	font-size: 1.1rem;
	font-style: normal;
}

/* [ IE10 - IE12 ] */
_:-ms-input-placeholder, :root .wishSizeSelect strong::before, 
_:-ms-input-placeholder, :root .wishSizeSelect input[type="checkbox"] + strong::before, 
_:-ms-input-placeholder, :root .wishSizeSelect input[type="checkbox"] + strong::after  {
	margin-top: -2px;
}
_:-ms-input-placeholder, :root .wishSizeSelect input[type="checkbox"] + strong::after {
	margin-top: 0;
}

/* [ 在庫状況追記 2015.12.22 ] */
.wishSizeSelect span:nth-last-of-type(1) {
	width: 20% !important;
}

/* [ 在庫状況の記号：亡き者 ] */
.noSelect   .stock > span:before, 
.wishSizeSelect .stock strong::before 	{ content: "〇"; }
.noSelect   .order > span:before, 
.wishSizeSelect .order strong::before 	{ content: "▲"; }
.noSelect   .reserve > span:before, 
.wishSizeSelect .reserve strong::before { content: "▲"; }
.noSelect   .inquiry > span:before, 
.wishSizeSelect .inquiry strong::before { content: "▲"; }
.noSelect   .soldout > span:before, 
.wishSizeSelect .soldout strong::before { content: "×"; }
.noSelect   .end > span:before, 
.wishSizeSelect .end strong::before 	{ content: "×"; }

/* [ 在庫状況の色：亡き者 ] */
.noSelect   .stock > span, 
.wishSizeSelect .stock 					{ color: #000; }
.noSelect   .stock > span::before, 
.wishSizeSelect .stock strong::before 	{ color: #118acb; }
.noSelect   .order > span, 
.wishSizeSelect .order 					{ color: #000; }
.noSelect   .order > span::before, 
.wishSizeSelect .order strong::before 	{ color: #118acb; }
.noSelect   .reserve > span, 
.wishSizeSelect .reserve 				{ color: #000; }
.noSelect   .reserve > span::before, 
.wishSizeSelect .reserve strong::before { color: #118acb; }
.noSelect   .inquiry > span, 
.wishSizeSelect .inquiry 				{ color: #118acb; }
.noSelect   .inquiry > span::before, 
.wishSizeSelect .inquiry strong::before { color: #118acb; }
.noSelect   .soldout > span, 
.wishSizeSelect .soldout 				{ color: #ff0000; }
.noSelect   .soldout > span::before, 
.wishSizeSelect .soldout strong::before { color: #ff0000; }
.noSelect   .end > span, 
.wishSizeSelect .end 					{ color: #ff0000; }
.noSelect   .end > span::before, 
.wishSizeSelect .end strong::before 	{ color: #ff0000; }


/*======================================================================*
 *  [ wishLoginForm | ログインフォーム ]
 *======================================================================*/

.wishLoginForm {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 5px 10px;
	border: 1px solid #aeaeae;
	border-radius: 0;
	background: #f3f4f5;
	font-size: 1.6rem;
	line-height: 1.2;
	ime-mode: inactive;
}
.wishLoginForm:focus {
	border-color: #4571b0;
	background: #fff;
	outline: none;
}

.wishLoginForm::-webkit-input-placeholder { color: #bbb; }
.wishLoginForm::-moz-placeholder { color: #bbb; -moz-opacity: 1; opacity: 1; }
.wishLoginForm:-moz-placeholder { color: #bbb; -moz-opacity: 1; opacity: 1; }
.wishLoginForm:-ms-input-placeholder { color: #bbb; }


/*======================================================================*
 *  [ Media Queries 480 ] 
 *======================================================================*/

@media screen and (max-width: 480px) {
	
	/*==================================================================*
	 *  [ addWish | ほしいものリストに追加 ]
	 *==================================================================*/
	
	.addWish {
		padding: 20px 10px;
	}
	
	/* [ ログイン ] */
	.addWish .login > div, 
	.addWish .login > form > div { padding: 10px; }
	
	/* [ ログイン：ボタン ] */
	.addWish .login .use {
		min-width: 100%;
		font-size: 1.6rem;
	}
	
} /* */





====== Zoom effect ======

*/
.mfp-zoom-in {
  /* start state */
  /* animate in */
  /* animate out */
}
.mfp-zoom-in .mfp-with-anim {
  opacity: 0;
  transition: all 0.2s ease-in-out;
  transform: scale(0.8);
}
.mfp-zoom-in.mfp-bg {
  opacity: 0;
  transition: all 0.3s ease-out;
}
.mfp-zoom-in.mfp-ready .mfp-with-anim {
  opacity: 1;
  transform: scale(1);
}
.mfp-zoom-in.mfp-ready.mfp-bg {
  opacity: 0.8;
}
.mfp-zoom-in.mfp-removing .mfp-with-anim {
  transform: scale(0.8);
  opacity: 0;
}
.mfp-zoom-in.mfp-removing.mfp-bg {
  opacity: 0;
}

/* 

====== Newspaper effect ======

*/
.mfp-newspaper {
  /* start state */
  /* animate in */
  /* animate out */
}
.mfp-newspaper .mfp-with-anim {
  opacity: 0;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.5s;
  transform: scale(0) rotate(500deg);
}
.mfp-newspaper.mfp-bg {
  opacity: 0;
  transition: all 0.5s;
}
.mfp-newspaper.mfp-ready .mfp-with-anim {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}
.mfp-newspaper.mfp-ready.mfp-bg {
  opacity: 0.8;
}
.mfp-newspaper.mfp-removing .mfp-with-anim {
  transform: scale(0) rotate(500deg);
  opacity: 0;
}
.mfp-newspaper.mfp-removing.mfp-bg {
  opacity: 0;
}

/* 

====== Move-horizontal effect ======

*/
.mfp-move-horizontal {
  /* start state */
  /* animate in */
  /* animate out */
}
.mfp-move-horizontal .mfp-with-anim {
  opacity: 0;
  transition: all 0.3s;
  transform: translateX(-50px);
}
.mfp-move-horizontal.mfp-bg {
  opacity: 0;
  transition: all 0.3s;
}
.mfp-move-horizontal.mfp-ready .mfp-with-anim {
  opacity: 1;
  transform: translateX(0);
}
.mfp-move-horizontal.mfp-ready.mfp-bg {
  opacity: 0.8;
}
.mfp-move-horizontal.mfp-removing .mfp-with-anim {
  transform: translateX(50px);
  opacity: 0;
}
.mfp-move-horizontal.mfp-removing.mfp-bg {
  opacity: 0;
}

/* 

====== Move-from-top effect ======

*/
.mfp-move-from-top {
  /* start state */
  /* animate in */
  /* animate out */
}
.mfp-move-from-top .mfp-content {
  vertical-align: top;
}
.mfp-move-from-top .mfp-with-anim {
  opacity: 0;
  transition: all 0.2s;
  transform: translateY(-100px);
}
.mfp-move-from-top.mfp-bg {
  opacity: 0;
  transition: all 0.2s;
}
.mfp-move-from-top.mfp-ready .mfp-with-anim {
  opacity: 1;
  transform: translateY(0);
}
.mfp-move-from-top.mfp-ready.mfp-bg {
  opacity: 0.8;
}
.mfp-move-from-top.mfp-removing .mfp-with-anim {
  transform: translateY(-50px);
  opacity: 0;
}
.mfp-move-from-top.mfp-removing.mfp-bg {
  opacity: 0;
}

/* 

====== 3d unfold ======

*/
.mfp-3d-unfold {
  /* start state */
  /* animate in */
  /* animate out */
}
.mfp-3d-unfold .mfp-content {
  perspective: 2000px;
}
.mfp-3d-unfold .mfp-with-anim {
  opacity: 0;
  transition: all 0.3s ease-in-out;
  transform-style: preserve-3d;
  transform: rotateY(-60deg);
}
.mfp-3d-unfold.mfp-bg {
  opacity: 0;
  transition: all 0.5s;
}
.mfp-3d-unfold.mfp-ready .mfp-with-anim {
  opacity: 1;
  transform: rotateY(0deg);
}
.mfp-3d-unfold.mfp-ready.mfp-bg {
  opacity: 0.8;
}
.mfp-3d-unfold.mfp-removing .mfp-with-anim {
  transform: rotateY(60deg);
  opacity: 0;
}
.mfp-3d-unfold.mfp-removing.mfp-bg {
  opacity: 0;
}

/* 

====== Zoom-out effect ======

*/
.mfp-zoom-out {
  /* start state */
  /* animate in */
  /* animate out */
}
.mfp-zoom-out .mfp-with-anim {
  opacity: 0;
  transition: all 0.3s ease-in-out;
  transform: scale(1.3);
}
.mfp-zoom-out.mfp-bg {
  opacity: 0;
  transition: all 0.3s ease-out;
}
.mfp-zoom-out.mfp-ready .mfp-with-anim {
  opacity: 1;
  transform: scale(1);
}
.mfp-zoom-out.mfp-ready.mfp-bg {
  opacity: 0.8;
}
.mfp-zoom-out.mfp-removing .mfp-with-anim {
  transform: scale(1.3);
  opacity: 0;
}
.mfp-zoom-out.mfp-removing.mfp-bg {
  opacity: 0;
}

/* 

====== "Hinge" close effect ======

*/
@keyframes hinge {
  0% {
    transform: rotate(0);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }
  20%, 60% {
    transform: rotate(80deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }
  40% {
    transform: rotate(60deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }
  80% {
    transform: rotate(60deg) translateY(0);
    opacity: 1;
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: translateY(700px);
    opacity: 0;
  }
}
.hinge {
  animation-duration: 1s;
  animation-name: hinge;
}

.mfp-with-fade .mfp-content, .mfp-with-fade.mfp-bg {
  opacity: 0;
  transition: opacity .5s ease-out;
}
.mfp-with-fade.mfp-ready .mfp-content {
  opacity: 1;
}
.mfp-with-fade.mfp-ready.mfp-bg {
  opacity: 0.8;
}
.mfp-with-fade.mfp-removing.mfp-bg {
  opacity: 0;
}