/*============================================

OpenMes jQuery by SONHLAB.com - version 1.0
Website: http://sonhlab.com
Documentation: http://docs.sonhlab.com/openmes-jquery-open-animation-messages/

Build - 0038
============================================*/


/*========== START OPENMESSAGE ==========*/
#mes-frame {
	height:100%;
	width:100%;
	position:fixed;
	top:0;
	left:0;
	display:none;
}

.mes-openbt {
	cursor:pointer;
}


.mes-container {
	display:none;
	position:fixed;
	z-index:9997;
	overflow:hidden;
}

.mes-contentholder {
	position:relative;
	display:block;
	width:100%;
	height:100%;
	
}

.mes-content {
	-webkit-animation-fill-mode:both;
	-moz-animation-fill-mode:both;
	-ms-animation-fill-mode:both;
	-o-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	-ms-animation-duration:1s;
	-o-animation-duration:1s;
	animation-duration:1s;
	
	position:absolute;
	display:none;
}

.mes-replaybt, .mes-closebt {
	cursor:pointer;
}






/*===== START MESSAGE STYLE =====*/


/*===== Start Message 1 =====*/
.mes-demo-1 {
	height:153px;
	width:300px;
	overflow:hidden;
}
.item-mes-ctrl-1 > .item-ctrlbar {
	height:32px;
}

.mes-demo-1 .item-replaybt,
.mes-demo-1 .item-closebt {
	width:32px;
	height:32px;
}
.mes-demo-1 .item-replaybt > img,
.mes-demo1 .item-closebt > img {
	width:32px;
	height:32px;
}

.item-small-banner {
	width:300px;
	height:153px;
}

.pos-BottomRight {
	bottom:0px;
	right:0px;
}

.item-mes-ctrl-1 {
	width:100%;
}
/*===== End Message 1 =====*/



/*===== Start Message 2 =====*/
.mes-demo-2 {
	width:100%;
	height:100%;
	top:0;
	left:0;
	pointer-events:none;
}

.item-message-2 {
	display:table;
	width:100%;
	height:100%;
	
}

.item-largeFrame {
	width:100%;
	height:100%;
	display: table-cell;
    vertical-align: middle;
	position:relative;
	pointer-events:none;
}
	
.item-message-2 .mes-contentholder {
	overflow:hidden;
	position:relative;
	/*border:5px #999 solid;	*/
	box-shadow:0px 0px 30px 3px #333;
	-webkit-box-shadow:0px 0px 30px 3px #333;
	-moz-box-shadow:0px 0px 30px 3px #333;
	-o-box-shadow:0px 0px 30px 3px #333;
	-ms-box-shadow:0px 0px 30px 3px #333;
	
	border: 1px solid #111;
	
	height:300px;
	width:600px;
	margin:0 auto;
}

.item-laptop {
	font-size:250px;
	width:300px;
	height:300px;
	position:absolute;
	margin:0;
}
.item-laptop > i {
	position:relative;
	display:block;
	width:250px;
	height:250px;
	margin:25px auto;
	padding:0;
	line-height:1;
}

.item-brand {
	width:100px;
	height:100px;
	position:absolute;
	top:50px;
	left:115px;
}

.item-brand > i {
	position:relative;
	display:block;
	font-size:100px;
	line-height:1;
	padding:0;
}

.item-text {
	width:200px;
	position:relative;
	left:350px;
	top:30px;
	font-size:20px;
}

.item-button {
	margin-top:30px;
	pointer-events:auto;
}
.item-button > span {
	padding:6px 12px;
	cursor:pointer;
	display:inline-block;
	border-radius:5px;
}

.item-social {
	right:0px;
	position:relative;
}

.item-email,
.item-facebook,
.item-twitter,
.item-rss {
	width:307px;
	height:75px;
	right:0px;
	position:absolute;
}

.item-email {}
.item-facebook {top:75px;}
.item-twitter {top:150px;}
.item-rss {top:225px;}

.item-email > a,
.item-facebook > a,
.item-twitter > a,
.item-rss > a {
	margin:auto;
	display:block;
	height:73px;
	width:auto;
	position:relative;
	top:1px;
	pointer-events:auto;
}


.item-leftholder {
	height:296px;
	width:290px;
	position:relative;
	top:2px;
	left:2px;
	pointer-events:auto;
}
.item-buy {
	width:290px;
	height:148px;
	position:relative;
	display:block;
	pointer-events:auto;
}
.item-replay,
.item-exit {
	width:144px;
	height:146px;
	position:relative;
	float:left;
	cursor:pointer;
	pointer-events:auto;
	margin-top:2px;
}
.item-exit { margin-left:2px;}
.item-replay > span,
.item-exit > span {
	font-size:24px;
	display:block;
	text-align:center;
	position:relative;
	bottom:10px;
}
.item-replay > i {
	font-size: 74px;
	display:block;
	margin:30px 0 0 35px;
	
}
.item-exit > img {
	height:74px;
	width:74px;
	margin:30px 0 0 35px;;
}
.item-buy > i {
	display:block;
	float:left;
	height:74px;
	line-height:148px;
	font-size:74px;
	margin-left:35px;
}
.item-buy > span {
	height:74px;
	line-height:148px;
	display:block;
	float:left;
	font-size:60px;
	margin-left:10px;
}

.item-buy:hover,
.item-replay:hover,
.item-exit:hover,
.item-email:hover,
.item-facebook:hover,
.item-twitter:hover,
.item-rss:hover {
	opacity:0.7;
}


.item-message-2 .item-chart {
	height:30px;
	width:300px;
	position:relative;
	left:50px;
	top:50px;
}
.item-chart > .item-bar-1 {
	position:absolute;
	width:200px;
	height:30px;
}
.item-chart > .item-bar-2 {
	position:absolute;
	width:150px;
	height:30px;
}
.item-chart > .item-bar-3 {
	position:absolute;
	width:250px;
	height:30px;
}

.item-message-2 .item-chart-v {
	height:300px;
	width:30px;
	left:100px;
	top:200px;
	position:relative;
	float:left;
}
.item-chart-v > .item-bar-v1 {
	width:30px;
	height: 100px;
	position:absolute;
}
.item-chart-v > .item-bar-v2 {
	width:30px;
	height:150px;
	position:absolute;
}
.item-chart-v > .item-bar-v3 {
	width:30px;
	height:180px;
	position:absolute;
}
.item-chart-v > .item-bar-v4 {
	width:30px;
	height:120px;
	position:absolute;
}

.item-message-2 .item-chart-v2 {
	height:300px;
	width:30px;
	left:250px;
	top:200px;
	position:relative;
	float:left;
}
.item-chart-v2 > .item-bar-v1 {
	width:30px;
	height: 120px;
	position:absolute;
}
.item-chart-v2 > .item-bar-v2 {
	width:30px;
	height:180px;
	position:absolute;
}
.item-chart-v2 > .item-bar-v3 {
	width:30px;
	height:150px;
	position:absolute;
}
.item-chart-v2 > .item-bar-v4 {
	width:30px;
	height:170px;
	position:absolute;
}

.item-chartdescription {
	position:absolute;
	width:100%;
	height:50px;
}
.item-chartdescription > div {
	text-align:center;
	font-size:20px;
}

.item-cd-1 { color:#E51400; }
.item-cd-2 { color:#00CE9B; }
.item-cd-3 { color:#2C84EE; }
.item-cd-v1 { color:#FF6600; }
.item-cd-v2 { color:#781766; }
.item-cd-v3 { color:#F7D100; }
.item-cd-v4 { color:#67B239; }

.item-timeline {
	top:200px;
	width:100%;
	height:10px;
}
.item-timeline > div {
	margin:auto;
	position:relative;
	width:90%;
	height:10px;
	border-top:1px solid #111;
	font-size:12px;
}
.item-timeline .text-2014 {
	position:absolute; left:120px;
}
.item-timeline .text-2015 {
	position:absolute; left:400px;
}
/*===== End Message 2 =====*/






/*===== Start Message 3 =====*/
.mes-demo-3 {
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	pointer-events:none;
}

.mes-demo-3 > .mes-contentholder {
	top:0px;
	height:100%;
	width:100%;
	overflow:hidden;
}
.item-board {
	width:100%;
	height:100px;
	
	/*pointer-events:auto;*/
}

.item-woodboard {
	width:800px;
	height:60px;
	margin:20px auto;
	position:relative;
	padding:0 20px;
	overflow:hidden;
	
	/*pointer-events:auto;*/
}

.mes-demo-3 .text-news {
	width:800px;
	height:60px;
	margin:20px auto;
	padding:0 20px;
	overflow:hidden;
	position:relative;
	z-index:9998;
}


.text-news > .item-textblock  {
	text-shadow: 0px 1px 1px #4d4d4d;
	color: #222;
	font-size:20px;
	line-height:60px;
	pointer-events:auto;
}

.item-closebt-demo3 {
	position:relative;
	z-index:9999;
	width:32px;
	height:32px;
	margin:20px auto;
	left:-400px;
	top:-30px;

}
.item-closebt-demo3 > img {
	position:absolute;
	z-index:9999;
	left:-16px;
	bottom:-16px;
	pointer-events:auto;
}

/*===== End Message 3 =====*/





/*===== Start Message 4 =====*/
.demo-mes-4 {
	width:100%;
	height:100%;
	top:0;
	left:0;
}

.item-message-4 {
	display:table;
	width:100%;
	height:100%;
	position:relative;
	pointer-events:auto;
}

.item-message-4 .mes-contentholder {
	overflow:hidden;
	position:relative;
	height:100%;
	width:100%;
	pointer-events:auto;
}

.item-message-4 .item-exitbt {
	top:0px;
	z-index:99999;
}

/*===== End Message 4 =====*/




/*===== Start Message 5 =====*/
.item-profileview {
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	pointer-events:none;
	/*overflow:hidden;*/
}

.item-profilebody {
	width:320px;
	height:100%;
	padding-right:0px;
	position:relative;
	pointer-events:auto;
	overflow-y:auto;
}

.item-profilebg {
	/*background:#f5f5f5;*/
	position:fixed;
	width:300px;
	height:100%;
}
.item-ctrlbar-5 {
	width:100%;
	z-index:99999;
	height:32px;
	width:300px;
}
.item-ctrlbar-5 div {
	padding:6px;
}
.item-ctrlbar-5 i {
	font-size:32px;
}

.item-headerphoto {
	position:relative;
	height:200px;
	width:300px;
}


.item-pfconnect {
	position:relative;
	height: 40px;
	width:300px;
	text-align:center;
}
.social-badges {
	height:40px;
	position:relative;
	margin:auto;
	display:inline-block;
}
.social-badges > i {
	position:relative;
	display:block;
	font-size:40px;
	width:40px;
	height:40px;
	line-height:1;
	padding:0;
	pointer-events:auto;
	cursor:pointer;
	float:left;
}


.fa-facebook-square {
	color:#044E94;
}
.fa-twitter-square {
	color:#00BBE2;
}
.fa-google-plus-square {
	color:#E51400;
}

.fa-facebook-square:hover,
.fa-twitter-square:hover,
.fa-google-plus-square:hover {
	opacity:0.2;
}

.item-textblock-5 {
	position:relative;
	width:260px;
	padding:0 20px;
	margin-bottom:20px;
}
/*===== End Message 5 =====*/




/*===== Start Error Message =====*/
.item-error-message {
	width:100%;
	height:100%;
	top:0;
	left:0;
	pointer-events:none;
}

.item-errorholder {
	width:300px;
	height:50px;
	padding:10px;
	margin:auto;
	pointer-events:auto;
}
.item-error-content {
	height:50px;
	line-height:1;
}

.item-error-icon {
	width:32px;
	height:32px;
	padding:9px;
	float:left;
}
.item-error-text {
	font-size:18px;
	height:50px;
	line-height:50px;
	float:left;
}
.item-closeholder {
	position:absolute;
	bottom:-16px;
	left:-16px;	
}
/*===== End Error Message =====*/




/*===== Start Auto Message =====*/
.item-auto-holder {
	pointer-events:auto;
	top:0px;
	left:0px;
	position:fixed;
}

.autoitem-background {
	width:100%;
	height:100%;
	position:fixed;
	top:0px;
	left:0px;
}

.autoitem-number {
	width:100%;
	height:100%;
	text-align:center;
	position:absolute;
}
.autoitem-holder {
	display:table;
	width:100%;
	height:100%;
	position:relative;
}
.autoitem-holder > div {
	display:table-cell;
	vertical-align:middle;
}

.autoitem-number span {
	font-size:100px;
}

.autoitem-content {
	width:100%;
	height:100%;
	text-align:center;
	position:absolute;
}

.autoitem-company-name {
	font-size:50px;
	font-family: Orbitron, sans-serif;
	font-weight:bold;
}
.autoitem-sub-text {
	font-size:30px;
	font-family: 'Roboto', sans-serif;
	margin-top:100px;
	display:block;
}
.autoitem-product-icon {
	margin-left:-250px;
}
.autoitem-product-icon > img {
	width:100px;
	height:100px;
}

.autoitem-product-name {
	font-size:100px;
	height:100px;
	line-height:100px;
	font-family: 'Wire one', sans-serif;
	font-weight:bold;
	color:#627b95;
	display:block;
	margin-left:100px;
	pointer-events:auto;
}

.autoitem-social {
	pointer-events:none;
}
.autoitem-social i {
	pointer-events:auto;
}
.autoitem-fbicon {
	font-size:50px;
	margin-top:200px;
	margin-left:-100px;
	display:block;
}
.autoitem-ggicon {
	font-size:50px;
	margin-top:200px;
	display:block;
}
.autoitem-tticon {
	font-size:50px;
	margin-top:200px;
	margin-left:100px;
	display:block;
}
/*===== End Auto Message =====*/


/*===== END MESSAGE STYLE =====*/






/* Loading Icon */
#mes-loadingholder {
	width:48px;
	height:48px;
	position:fixed;
	top:50%;
	left:50%;
	z-index:9999;
	margin-top:-24px;
	margin-left:-24px;
	display:none;
}
#mes-loadingholder > #mes-loadingicon {
	background:url(../images/loading.gif) no-repeat;
	width:48px;
	height:48px;
}
/* End Loading Icon */

/*========== END OPENMES ==========*/