/****************************************************/
/* 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:#666;
    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: 122px;
  height: 100%;
  z-index: 1;
}

.prl_menu{
    margin-top:450px;
    height:100%;
}

.list_menu{
    list-style:none;
    padding:0;
    margin:0;
    width:197px;
}
.list_menu2{
    list-style:none;
    padding:0;
	margin:0px;
	margin-left:5px;
    width:160px;
}
.list_menu h2{
    color:#f5f5f5;
    padding:12px 0 0 20px;
    height:32px;
    font-size:19px;
}

.list_menu li{
    color: #f5f5f5;
    font-weight: 600;
    padding: 0px 0 14px 16px;
}

/* BUTTONS */

.buttons{
    border:none;
    outline:none;
    width:51px;
    height:170px;
    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:-197px;
}

.slide_left_open{
    left:-20px;
}

button#button_left img{ 

-moz-border-radius: 0px 10px 10px 0px;
-webkit-border-radius: 0px 10px 10px 0px;
background: rgba(0,0,0,0.5);
}

button#button_right img{ 

-moz-border-radius: 10px 0px 0px 10px;
-webkit-border-radius: 10px 0px 0px 10px;
background: rgba(0,0,0,0.5);}


#slide_left > ul{
    float:left;
	border:1px solid #dc1111;
	
}

#slide_left > ul > h2{
    border-bottom:solid 1px #c0392b;
}

#slide_left ul li{
   background:#470000;
}

#slide_left ul li:hover{
   
}

/* SLIDE RIGHT MENU */

.slide_right_close{
    position:fixed;
    right:-159px;
}

.slide_right_open{
    right:0px;
}

#slide_right > ul{
    float:right;
   border:1px solid #dc1111;
   background:#470000;
}

#slide_right > ul > h2{
    border-bottom:solid 1px #c0392b;
}
#slide_right ul {/* margin-right:20px;*/}
#slide_right ul li{
    background:#470000;
}

#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{
	background:url(../images/common/btn_side.png) no-repeat;
	width:162px;
	height: 60px;
	display: block;
	margin-left: auto;
	margin-top: 10px;
	margin-right: auto;
	}
.side-bg-p{
	background:url(../images/common/btn_side-p.png)no-repeat;
	width:162px;
	height:73px;
	display: block;
  margin-left: auto;
  margin-right: auto;
 
 } 
.side-bg-ios{
	background:url(../images/common/btn_side-a.png) no-repeat;
	width:162px;
	height:73px;
	display: block;
  margin-left: auto;
  margin-right: auto;
 }
.side-bg-html{
	background:url(../images/common/btn_side-html.png) no-repeat;
	width:162px;
	height:73px;
	display: block;
  margin-left: auto;
  margin-right: auto;
 } 
.side1-bg {
    background: url(../images/common/btns_bbm.png) no-repeat;
    width: 153px;
    height: 53px;
}
 .side2-bg{
	background:url(../images/common/btns_wechat.png) no-repeat;
	width: 153px;
	height: 53px;
	}
 .side3-bg{
	background:url(../images/common/btns_whatapp.png) no-repeat;
	width:153px;
	height: 53px;
	}
 .side4-bg{
	background:url(../images/common/btns_sms.png) no-repeat;
	width:153px;
	height: 53px;
	}
 .side7-bg{
	background:url(../images/common/btns_yahoo.png) no-repeat;
	width:153px;
	height: 53px;
	}
 .side6-bg{
	background:url(../images/common/btns_email.png) no-repeat;
	width:153px;
	height: 53px;
	}
 .side7-bg h3 {
    font-size: 14px;
    padding-top: 5px;
    font-family: 'Lato', sans-serif;
    font-style: italic;
    padding-left: 40px;
}

.side6-bg h3 {
    font-size: 16px;
    padding-top: 5px;
    font-family: 'Lato', sans-serif;
    font-style: italic;
    padding-left: 40px;
}
 
 
 
 .side5-bg {
    background: rgba(0,0,0,0.5) url(../images/common/ico-chat.png) left no-repeat;
    width: 145px;
    height: 47px;
    border: 1px solid #666;
    margin-left: 7px;
    margin-bottom: 10px;
    border-radius: 5px;
  
}
.side5-bg h3 {
    float: right;
    font-size: 15px;
    position: relative;
    top: 14px;
    right: 11px;
	color:#ffca2c;
}


.side-bg p {
  font-size: 12px;
  margin-top: 5px;
  font-family: 'Lato', sans-serif;
  text-align: center;
  color: #FFC92B;
}
.side-bg-html h3 {
  font-size: 17px;
  margin-left: 13px;
  padding-top: 13px;
  font-family: 'Lato', sans-serif;
  color:#ffca2c;
  font-weight:bold;
}
.side-bg-html p {
  font-size: 12px;
  margin-left: 13px;
  font-family: 'Lato', sans-serif;
  margin-top:5px;
  
}
.side-bg-ios h3 {
  font-size: 17px;
  margin-left: 13px;
  padding-top: 13px;
  font-family: 'Lato', sans-serif;
  color:#ffca2c;
  font-weight:bold;
}
.side-bg-ios p {
  font-size: 12px;
  margin-left: 13px;
  font-family: 'Lato', sans-serif;
  margin-top:5px;
  
}
.list_menu2 p {
  font-size: 12px;
  text-align: left;
  padding-top: 2px;
  font-family: 'Lato', sans-serif;
  padding-left: 38px;
  padding-left: 40px;
}
.side1-bg h3 {
    font-size: 14px;
    padding-top: 13px;
    font-family: 'Lato', sans-serif;
    font-style:italic;
    padding-left: 40px;
}
.side2-bg h3 {
    font-size: 16px;
    padding-top: 5px;
    font-family: 'Lato', sans-serif;
    font-style:italic;
    padding-left: 40px;
}
.side2-bg p {

    font-size: 12px;
    text-align: left;
    padding-top: 2px;
    font-family: 'Lato', sans-serif;
    /* padding: 0px; */
}
.side3-bg h3 {
    font-size: 16px;
    /* margin-left: 48px; */
    padding-top: 5px;
    font-family: 'Lato', sans-serif;
    font-style:italic;
    padding-left: 40px;
}
.side4-bg h3 {
    font-size: 16px;
    /* margin-left: 48px; */
    padding-top: 5px;
    font-family: 'Lato', sans-serif;
    font-style:italic;
    padding-left: 40px;
}

.side-bg-p h3 {
    font-size: 17px;
    margin-left: 13px;
    padding-top: 13px;
	font-family: 'Lato', sans-serif;
	color:#ffca2c;
	font-weight:bold
}
.side-bg h3 {
    font-size: 17px;
    /* margin-left: 13px; */
    padding-top: 13px;
    font-family: 'Lato', sans-serif;
    color:#ffca2c;
    font-weight:bold
;
    text-align: center;
}
.side-bg-p p {
  font-size: 12px;
  margin-left: 13px;
  margin-top: 5px;
  font-family: 'Lato', sans-serif;

}


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;
  margin: 0 0 0 10px;
}








#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;
}


.side-top {
    background: url(../images/common/side-top.png)top repeat-x;
    text-align: center;
}




a .btn-joinnow {
    background: url(../images/common/btn-joinnow.jpg) repeat-x;
    font-size: 15px;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    color: #000000;
    text-shadow: 0px 2px 2px rgba(255, 255, 255, 1);
    padding: 13px 25px;
    width: 127px;
    margin-left: 17px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 18px;
}
a .btn-joinnow:hover {
	text-decoration:none;
	color:#F00;
	
}