/****************************************************/
/* OVERALL RESET STYLES */
/*****************************************************************************/

/* RESET */

@import url(http://fonts.googleapis.com/css?family=Lato:700italic);
a {
	text-decoration: none;
	color: inherit;
}
h1, h2, h3, h4, h5, p, div {
	margin: 0;
	padding: 0;
}
/* CONTENT */

#container {
	text-align: center;
	width: 600px;
	margin: 100px auto;
}
#container h3 {
	font-family: 'Lato', sans-serif;
	font-size: 30px;
	color: #555;
}
.envato {
	margin: 0 10px;
	outline: none;
	border: none;
	background-color: #A81010;
	color: #fff;
	font-family: 'Lato', sans-serif;
	height: 50px;
	width: 135px;
	cursor: pointer;
}
.rate {
	font-size: 15px;
}
/****************************************************/
/* OVERALL MENUS STYLES */
/*****************************************************************************/

/* BODY */



/* OVERALL MENUS */

.srl_menu {
	margin-top: 153px;
	height: 100%;
	z-index: 100000000;
}
.prl_menu {
	margin-top: 450px;
	height: 100%;
}
.list_menu {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 183px;
}
.list_menu2 {
	list-style: none;
	padding: 0;
	margin: 0px;
	/*margin-left: 5px;*/
	width: 180px;
}
.list_menu h2 {
	color: #f5f5f5;
	padding: 12px 0 0 20px;
	height: 32px;
	font-size: 19px;
}
.list_menu li {
	color: #f5f5f5;
	font-weight: 600;
	width: 159px;
	padding: 14px 0 14px 0px;
}
/* BUTTONS */

.button {
	border: none;
	outline: none;
	width: 55px;
	height: 206px; 
	/* padding: 0; */
	cursor: pointer;
}
/*.button img{
    margin-right:2px;
    margin-top:4px;
}*/

.sbutton {
	/*background-color:#e74c3c;
    border-bottom:solid 1px #c0392b;*/
	background: none
}
.pbutton {
	background-color: #3498db;
	border-bottom: solid 1px #2980b9;
}
/* TRANSITIONS */

.slide_left_open, .slide_left_close, .slide_right_open, .slide_right_close, .slide_top_open, .slide_top_close, .push_left_open, .push_left_close, .body_close, .body_open_left, .body_open_right, .push_right_open, .push_right_close {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

/* MEDIA QUERIE EXAMPLES */

@media only screen and (max-width : 480px) {
#slide_top > nav a {
	padding: 20px 0 25px 0;
}
}
/* SLIDE LEFT MENU */

.slide_left_close {
	position: fixed;
	left: -183px;
}
.slide_left_open {
	left: -20px;
}
button#button_left img {
	background: #3d0a08;
	border-left: 1px solid #521b19;
}
#slide_left > ul {
	float: left;
	background: #3d0a08;
	/* border-bottom: 1px solid #A81010; */
	/* border-top: 1px solid #A81010; */
	/* border-right: 1px solid #A81010; */
}
#slide_left > ul > h2 {
	border-bottom: solid 1px #c0392b;
}
#slide_left ul li {
}
#slide_left ul li:hover {
}
/* SLIDE RIGHT MENU */

.slide_right_close {
	position: fixed;
	right: -200px;
}
.slide_right_open {
	right: 0px;
}
#slide_right > ul {
	float: right;
	background: #000000;
	color: #ffffff;
}
#slide_right > ul > h2 {
	border-bottom: solid 1px #c0392b;
}
#slide_right ul {
	margin-right: 20px;
	border: 1px solid #b4822f;
}
#slide_right ul li {
	background: url(../images/common/s-bg.png)repeat;
}
#slide_right ul li:hover {
}
/* SLIDE TOP MENU */

#slide_top {
	position: absolute;
	width: 100%;
	text-align: center;
}
.slide_top_close {
	top: -236px;
}
.slide_top_open {
	top: -100px;
}
#slide_top > nav {
	padding: 0;
	margin: 0;
	background-color: #f46354;
	height: 100%;
	overflow: hidden;
}
#slide_top > h2 {
	color: #f5f5f5;
	width: 100%;
	padding: 10px 0;
	background-color: #e74c3c;
}
#slide_top > nav a {
	float: left;
	color: #f5f5f5;
	font-weight: 600;
	width: 20%;
	padding: 36px 0;
}
#slide_top > nav a:hover {
	background-color: #f35a4a;
}
/* PUSH RIGHT MENU */

.push_right_close {
	position: fixed;
	right: -220px;
}
.push_right_open {
	right: 0px;
}
#push_right > ul {
	float: right;
	background-color: #3498db;
}
#push_right > ul > h2 {
	border-bottom: solid 1px #2980b9;
}
#push_right ul li {
	background-color: #6badda;
}
#push_right ul li:hover {
	background-color: #4fa3dc;
}
/* PUSH LEFT MENU */

.push_left_close {
	position: fixed;
	left: -220px;
}
.push_left_open {
	left: 0px;
}
#push_left > ul {
	float: left;
	background-color: #3498db;
}
#push_left > ul > h2 {
	border-bottom: solid 1px #2980b9;
}
#push_left ul li {
	background-color: #6badda;
}
#push_left ul li:hover {
	background-color: #4fa3dc;
}
/*------------*/
.side-bg-pc {
	background: url(../images/common/btn_side-p.png) no-repeat;
	width: 157px;
	height: 62px;
	display: block;
	margin-right: auto;
	margin-bottom: 10px;
}
.side-bg {
	background: #1a0202;
	width: 161px;
	height: 114px;
	display: block;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: 9px;
}
.side-bg-p {
	background: url(../images/common/btn_side-p.png)no-repeat;
	width: 157px;
	height: 61px;
	display: block;
	margin-right: auto;
	margin-bottom: 5px;
}
.side-bg-ios {
	background: url(../images/common/btn_side-a.png) no-repeat;
	width: 157px;
	height: 61px;
	display: block;
	margin-right: auto;
}
.side1-bg {
	width: 180px;
	height: 80px;
	padding: 0px 10px;
	margin-bottom: 5px;
}
.side2-bg {
	width: 180px;
	height: 221px;
	padding: 0px 10px;
}
.side3-bg {
	width: 180px;
	height: 145px;
	border-bottom: 1px solid #ff4343;
}
.side-bg h3 {
	font-size: 20px;
	padding-top: 10px;
	font-family: 'Lato', sans-serif;
	font-weight: bold;
	text-align: center;
	color: #fff;
	text-shadow: 1px 1px #000;
}
.side-bg p {
	font-size: 14px;
	text-align: center;
	padding-top: 10px;
	font-family: 'Lato', sans-serif;
}
.side-bg-p h3 {
	font-size: 15px;
	margin-left: 65px;
	padding-top: 18px;
	font-family: 'Lato', sans-serif;
	font-weight: bold;
}
.side-bg-p p {
	font-size: 14px;
	margin-left: 65px;
	font-family: 'Lato', sans-serif;
}
.side-bg-ios h3 {
	font-size: 15px;
	margin-left: 65px;
	padding-top: 18px;
	font-family: 'Lato', sans-serif;
	font-weight: bold;
}
.side-bg-ios p {
	font-size: 14px;
	margin-left: 65px;
	font-family: 'Lato', sans-serif;
}
.list_menu2 p {
	font-size: 12px;
	padding-top: 1px;
	}
.list_menu2 p1 {
	font-size: 11px;
	font-weight: bold;
	}	
.side1-bg h3 {
	font-size: 15px;
	font-weight: 100;
}
.side2-bg h3 {
	font-size: 15px;
}
.side3-bg h3 {
	font-size: 15px;
}
ul.list_menu2 h4 {
	margin-bottom: 10px;
	font-size: 22px;
	margin-top: 10px;
	font-family: 'Lato', sans-serif;
	margin-left: 5px;
}
#slide_left > ul > li > a {
	cursor: pointer;
}
#slide_left > ul > li > a:hover {
	color: #fff;
}
#holder {
	border: 1px solid #000;
	height: 200px;
	width: 200px;
	position: relative;
	margin: 10px;
}
#mask {
	position: absolute;
	top: -1px;
	left: 1px;
	width: 50%;
	height: 1px;
	background-color: #fff;
}
/*-- if want auto --*/
#slide_left {
	height: 200px;
}
#slide_left:hover {
	left: 0px;
	z-index: 99;
}
#slide_left:after {
	position: fixed;
	left: -158px;
	z-index: 99;
}
/*--- right side auto */
#slide_right {
	height: 200px;
}
#slide_right:hover {
	right: -20px;
	z-index: 99;
}
#slide_right:after {
	position: fixed;
	right: -260px;/* ok */
	z-index: 99;
}
.join {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f8b500+74,fecb00+100 */
	background: #ffffff;/* Old browsers */
	background: -moz-linear-gradient(top, #ffffff 0%, #f8b500 74%, #fecb00 100%);/* FF3.6-15 */
	background: #880302;/* Chrome10-25,Safari5.1-6 */
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	/* IE6-9 */
	text-align: center;
	padding: 3px 11px;
	width: 146px;
	display: block;
	margin: auto;
	border-radius: 1px;
	margin-top: 10px;
	color: #fff;
	font-weight: 100;
}
.join:hover {background: #a22222;}
button#button_right img {
	background: #000000;
	border-right: 1px solid #521b19;
}
.side-ico {
	float: left;
	width: 40px;
	padding: 10px 9px 7px 9px;
	font-size: 10px;
}
.side-info {
	float: left;
	padding-top: 15px;
	/* text-align: center; */
	width: 120px;
	/* height: 20px; */
}
.side-ico img {
    width: 30px;
}
ul.list_menu2 img {
    display: block;
    margin: auto;
}
.side-info-box {
    text-align: center;
    background: #1a0202;
    padding: 9px 10px;
    display: inline-block;
    font-size: 11px;
    color: #fff;
    width: 100%;
}

a.chat-btn {
    background: #880302;
    padding: 7px 10px;
    display: block;
    color: #ffffff;
    font-weight: bolder !important;
    text-align: center;
    font-size: 16px;
    margin-top: 8px;
}
a.chat-btn:hover {
    background: #ea0b0a;
    color: #ffffff;
}
.border-line {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.8, #b4822f), color-stop(0.1, rgb(244, 244, 182)));
    background-image: -moz-linear-gradient(center bottom, #b4822f 33%, rgb(244, 244, 182) 67% );
    padding: 1px;
    border: none;
}
.border-line > div { background: #000; }