/*body, html { font-size: 100%; padding: 0; margin: 0; height: 100%;}
#codrops-ad-wrapper {top: auto !important;bottom: 10px;}*/

*,
*:after,
*:before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

.bl-main a {}

.bl-main a:hover {}

/*.container { height: 100%;}*/
#bghightall { height: 711px; width:640px;   display:block;}
.fidxall{position:fixed; left:0px ; right:0px ; top:0px; bottom:0px; z-index:999999; padding:0px; margin:0px; height:100%;}
.bl-main {
	position: absolute;
	width: 640px;
	height: 100%;
	overflow: hidden;
}

.bl-main > section {
	/*position: relative;*/
	position: absolute;
	width: 170px;
	height: 170px;
	z-index: 1;
}

.bl-main > section:first-child { margin: 0px 0px 0px 235px; } /*尼克福瑞*/
.bl-main > section:nth-child(2) { margin: 235px 0px 0px 30px; } /*13號探員*/
.bl-main > section:nth-child(3) { margin: 237px 0px 0px 440px; } /*卡特探員*/
.bl-main > section:nth-child(4) { margin: 485px 0px 0px 160px; width: 320px; height: 320px; } /*美國隊長*/
.bl-main > section:nth-child(5) { margin: 960px 0px 0px 45px; } /*黑豹*/
.bl-main > section:nth-child(6) { margin: 955px 0px 0px 425px; } /*浩克*/
.bl-main > section:nth-child(7) { margin: 1280px 0px 0px 45px; } /*酷寒戰士*/
.bl-main > section:nth-child(8) { margin: 1280px 0px 0px 425px; } /*鋼鐵人*/
.bl-main > section:nth-child(9) { margin: 1590px 0px 0px 45px; } /*黑寡婦*/
.bl-main > section:nth-child(10) { margin: 1590px 0px 0px 235px; } /*戰爭機器*/
.bl-main > section:nth-child(11) { margin: 1590px 0px 0px 425px; } /*蜘蛛人*/
.bl-main > section:nth-child(12) { margin: 1920px 0px 0px 45px; } /*鷹眼*/
.bl-main > section:nth-child(13) { margin: 1920px 0px 0px 235px; } /*獵鷹*/
.bl-main > section:nth-child(14) { margin: 1920px 0px 0px 425px; } /*雷神索爾*/
.bl-main > section:nth-child(15) { margin: 2245px 0px 0px 45px; } /*快銀*/
.bl-main > section:nth-child(16) { margin: 2245px 0px 0px 235px; } /*奇異博士*/
.bl-main > section:nth-child(17) { margin: 2245px 0px 0px 425px; } /*洛基*/
.bl-main > section:nth-child(18) { margin: 2568px 0px 0px 45px; } /*緋紅女巫*/
.bl-main > section:nth-child(19) { margin: 2568px 0px 0px 425px; } /*幻視*/
.bl-main > section:nth-child(20) { margin: 2865px 0px 0px 45px; } /*蟻人*/
.bl-main > section:nth-child(21) { margin: 2865px 0px 0px 425px; } /*黃峰女*/
.bl-main > section:nth-child(22) { margin: 3220px 0px 0px 45px; } /*火箭*/
.bl-main > section:nth-child(23) { margin: 3220px 0px 0px 425px; } /*格魯特*/
.bl-main > section:nth-child(24) { margin: 3450px 0px 0px 215px; width: 220px; height: 220px; } /*星爵*/
.bl-main > section:nth-child(25) { margin: 3700px 0px 0px 45px; } /*德克斯*/
.bl-main > section:nth-child(26) { margin: 3700px 0px 0px 425px; } /*葛摩菈*/
.bl-main > section:nth-child(27) { margin: 3890px 0px 0px 235px; } /*勇度*/
.bl-main > section:nth-child(28) { margin: 4040px 0px 0px 45px; } /*德克斯*/
.bl-main > section:nth-child(29) { margin: 4040px 0px 0px 425px; } /*葛摩菈*/
.bl-main > section:nth-child(30) { margin: 4295px 0px 0px 235px; } /*勇度*/


.bl-box {
	position: relative;
	width: 100%;
	height: 100%;
	cursor: pointer;
	opacity: 1;
	/* Centering with flexbox */
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.bl-box h2 {
	text-align: center;
	margin: 0;
	padding: 20px;
	width: 100%;
	font-size: 1.8em;
	letter-spacing: 2px;
	font-weight: 700;
	text-transform: uppercase;
}

.bl-icon {
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	cursor: pointer;
	-webkit-font-smoothing: antialiased;
}

.bl-icon:before {
	display: block;
	font-size: 2em;
	margin-bottom: 10px;
}

.bl-icon-about:before {
	content: "";
}

.bl-icon-works:before {
	content: "";
}

.bl-icon-blog:before {
	content: "";
}

.bl-icon-contact:before {
	content: "";
}

.bl-main > section .bl-icon-close {
	position: absolute;
	top: 20px;
	right: 20px;
	cursor: pointer;
	z-index: 100;
	opacity: 0;
	pointer-events: none;
	background-image: url(../images/mo/closebtn.png);
	width:46px;
	height:46px
}

.bl-icon-close:before {
	content: "";
}

.bl-content, div.bl-panel-items > div > div {
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	padding: 0px;
	overflow: hidden;
	overflow-y: auto;
}

/* Custom content */

.bl-content p {
	margin: 0 auto;
	padding-bottom: 15px;
	font-size: 1.7em;
	line-height: 1.8;
}

.bl-content h2 {
	font-size: 3em;
	font-weight: 300;
	margin: 0 0 20px 0;
}

.bl-content article {
	padding: 20px 40px 20px 0px;
}

.bl-content article h3 {
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin: 0 0 10px 0;
	padding-top: 20px;
	font-size: 1.4em;
}

.bl-content article a {
	color: rgba(0,0,0,0.2);
}

.bl-content > ul {
	list-style: none;
	padding: 0;
	margin: 0;
} 

/*.bl-content > ul li {
	display: inline-block;
	width: 20%;
	margin: 1%;
}*/

/*.bl-content > ul li a {
	display: block;
	padding: 0;
	border: 8px solid rgba(0,0,0,0.1);
}*/

/*.bl-content > ul li a img {
	display: block;
	max-width: 100%;
}*/

/* Panel Items */

div.bl-panel-items,
div.bl-panel-items > div {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
}



div.bl-panel-items > div {
	background: #3ba5db;
	z-index: 0;
	opacity: 0;
	-webkit-transform: translateY(0);
	-webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0s linear 0.5s;
	-moz-transform: translateY(0);
	-moz-transition: -moz-transform 0.5s ease-in-out, opacity 0s linear 0.5s;
	transform: translateY(0);
	transition: transform 0.5s ease-in-out, opacity 0s linear 0.5s;
	-ms-transform: translateY(0);
}

/* Transition classes and properties */
/* Separated for a better overview and control */

.bl-main > section {
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.bl-main > section.bl-expand { position: fixed; width: 100%; height: 100%; top: 0; left: 0; margin:0px; background-image:none; background: rgba(0,0,0,0.8); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; }

.bl-main > section.bl-expand-top { z-index: 100; }

/*.bl-main > section:first-child.bl-expand { background: rgba(0,0,0,0.8); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; }
.bl-main > section:nth-child(2).bl-expand { background: #579260; }
.bl-main > section:nth-child(3).bl-expand { background: #8e7566; }
.bl-main > section:nth-child(4).bl-expand { background: #d09f8f; }
.bl-main > section:nth-child(5).bl-expand { background: #3f5c62; }
.bl-main > section:nth-child(6).bl-expand { background: #cf5461; }*/
.bl-main.bl-expand-item > section:not(.bl-expand),
.bl-main.bl-expand-item > section.bl-scale-down {
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	-ms-transform: scale(0.5);
	transform: scale(0.5);
	opacity: 0;
}

.bl-box {
	-webkit-transition: opacity 0.2s linear 0.5s;
	-moz-transition: opacity 0.2s linear 0.5s;
	transition: opacity 0.2s linear 0.5s;
}

section.bl-expand .bl-box {
	opacity: 0;
	-webkit-transition: opacity 0s linear;
	-moz-transition: opacity 0s linear;
	transition: opacity 0s linear;
}

.bl-box h2 {
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.no-touch section:not(.bl-expand) .bl-box:hover h2 {
	-webkit-transform: translateY(-15px);
	-moz-transform: translateY(-15px);
	-ms-transform: translateY(-15px);
	transform: translateY(-15px);
}

.bl-content,
.bl-icon-close {
	-webkit-transition: opacity 0.1s linear 0s;
	-moz-transition: opacity 0.1s linear 0s;
	transition: opacity 0.1s linear 0s;
}

section.bl-expand .bl-content,
section.bl-expand .bl-icon-close {
	pointer-events: auto;
	opacity: 1;
	-webkit-transition: opacity 0.3s linear 0.5s;
	-moz-transition: opacity 0.3s linear 0.5s;
	transition: opacity 0.3s linear 0.5s;
}