@import url('https://fonts.googleapis.com/css?family=Raleway');

body{
	padding: 0;
	margin: 0;
	/*background:#f4f4f4;*/
	/*background-image: url('../images/back.jpg');*/
	overflow-x: hidden;
}
html,h1,h2,h3,h4,h5,h6,a,p{
	/*font-family: "MS Georgia",Constantia,serif;*/
	font-family:"Raleway";
}
.icons {
  display:none;
  position: fixed;
  width:50px;
  right:10px;
  bottom: 100px;
  border-radius:8px;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 0 20px 0 rgba(0, 0, 0, 0.19);
  /*
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);*/
}

/* Style the icon bar links */
.icons a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}

.icons a:hover {
  background-color: #000;
}

.tiktok {
  background: #FFCC29;
  color: white;
}

.wa {
  background: #25D366;
  color: white;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}

.ig {
  background: #dd4b39;
  color: white;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
}

#myBtn {
  display: none;
  position: fixed;
  width:50px;
  bottom: 10px;
  right: 10px;
  z-index: 99;
  font-size: 26px;
  border: none;
  outline: none;
  background-color: rgba(255,154,16,0.8);
  color: white;
  cursor: pointer;
  padding-bottom: 0px;
  padding-right: 15px;
  padding-left: 15px;
  border-radius: 8px;

	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 0 20px 0 rgba(0, 0, 0, 0.19);
    /*transition: background-color 3s ease 0s;*/
    /*transition:width 2s linear 1s;;*/
}
#myBtn:hover {
  background-color: #555;
}	

.navbar{
	background:black;
	padding-top:0px;
    /*height: 55px;*/
}
.navbar-brand{
	margin-left: 2%;
}
.nav-link , .navbar-brand{
	color: #f4f4f4;
	cursor: pointer;
}
.nav-link{
	margin-top:6px;
	margin-right: 1em !important;	
	/*background:black;*/
}
.nav-link:hover{
	background: #f4f4f4;
	color: #0896d4;

}
.navbar-collapse{
 	justify-content: flex-end;
	/*background:black;*/
}
.navbar-toggler{
	margin-top:6px;
	height:40px;
  	background:#fff !important;
}
.navbar-toggler-icon{
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(8,150,212, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");  
}

/*header style*/
.opaque-navbar {
    background-color: black;
  /* Transparent = rgba(0,0,0,0) / Translucent = (0,0,0,0.5)  */
    /*height: 55px;*/
    border-bottom: 0px;
    transition: background-color 3s ease 0s;
}

.opaque-navbar.opaque {
    background-color: rgba(54,103,130,1);
    /*height: 55px;*/
    transition: background-color 1s ease 0s;
}

.header{
	position: relative;

	background-image: url('../images/kecilbackground.png');
	/*background: #366782;*/
	background-size: cover;
	/*background-position: left;*/
	/*background-attachment: fixed;*/
	background-repeat: no-repeat;
  background-attachment: fixed; 
  background-size: 100% 100%;
	/*height:100%;*/
	/*width:100%;*/
}

@media only screen and (min-width: 900px){
    .header{
    	background-image: url('../images/besarbackground.png');
    }
}

.headerMenu{
	text-align: center;
	margin-bottom: 40px;
	color:#10828C;
	font-size: 30px;
}
.headerMenu2{
	text-align: center;
	margin-bottom: 40px;
	color:orange;
	font-size: 24px;
}

@media only screen and (max-height: 500px){
	.description{
	    position: relative;
	    padding-top: 1.5%;
	    width:100%;
	    /*left:40%;*/
	    /*margin: auto;*/
	    text-align: center;
	    /*padding: 2em;*/
	}
	.description h1{
		/*color:#F97300;*/
		/*color:yellow;*/
		font-size:24px;
		text-align: center;
	}
}
@media only screen and (max-width: 780px) and (min-height: 501px){
	.description{
	    position: relative;
	    padding-top: 5%;
	    width:100%;
	    /*left:40%;*/
	    /*margin: auto;*/
	    text-align: center;
	    /*padding: 2em;*/
	}
	.description h1{
		/*color:#F97300;*/
		/*color:yellow;*/
		font-size:30px;
		text-align: center;
	}
}

@media only screen and (min-width: 781px){
	.description{
	    position: relative;
	    padding-top: 8%;
	    padding-left:30%;
	    width:100%;
	    /*left:40%;*/
	    /*margin: auto;*/
	    text-align: center;
	    /*padding: 2em;*/
	}
	.description h1{
		/*color:#F97300;*/
		/*color:yellow;*/
		font-size:35px;

		text-align: center;
	}
 }	
  @media only screen and (max-width: 480px){
	.description2{
		display:none;
	    position: relative;
	    padding-top: 5%;
	    width:100%;
	    /*left:40%;*/
	    /*margin: auto;*/
	    text-align: center;
	    /*padding: 2em;*/
	}
	.description2 h1{
		display:none;
		/*color:#F97300;*/
		/*color:white;*/
		font-size:20px;
		text-align: center;
	}
	.header img{
		position:absolute;
		top:25%;
		/*
		bottom:2%;
		left:2%;*/
		width:380px;
	}
	.headerMenu{
	text-align: center;
	margin-bottom: 40px;
	color:#10828C;
	font-size: 26px;
	}
	.headerMenu2{
		text-align: center;
		margin-bottom: 40px;
		color:orange;
		font-size: 20px;
	}
}
@media only screen and (max-width: 780px) and (min-width: 481px) and (min-height: 501px){
	.description2{
		display:none;
	    position: relative;
	    padding-top: 5%;
	    width:100%;
	    /*left:40%;*/
	    /*margin: auto;*/
	    text-align: center;
	    /*padding: 2em;*/
	}
	.description2 h1{
		display:none;
		/*color:#F97300;*/
		/*color:white;*/
		font-size:20px;
		text-align: center;
	}
	.header img{
		position:absolute;
		top:25%;
		/*
		bottom:2%;
		left:2%;*/
		width:470px;
	}
	.headerMenu{
	text-align: center;
	margin-bottom: 40px;
	color:#10828C;
	font-size: 26px;
	}
	.headerMenu2{
		text-align: center;
		margin-bottom: 40px;
		color:orange;
		font-size: 20px;
	}
}
 @media only screen and (max-width: 940px) and (min-width: 481px) and (max-height: 500px){
	.description2{
		/*display:none;*/
	    position: relative;
	    padding-top: 1.5%;
	    width:100%;
	    left:20%;
	    /*margin: auto;*/
	    text-align: center;
	    /*padding: 2em;*/
	}
	.description2 h1{
		/*display:none;*/
		/*color:#F97300;*/
		/*color:white;*/
		font-size:14px;
		text-align: center;
	}
	.header img{
		position:absolute;
		top:25%;
		
		bottom:2%;
		left:5%;
		width:200px;
	}
	.headerMenu{
	text-align: center;
	margin-bottom: 40px;
	color:#10828C;
	font-size: 26px;
	}
	.headerMenu2{
		text-align: center;
		margin-bottom: 40px;
		color:orange;
		font-size: 20px;
	}
}
@media only screen and (min-width: 781px) and (max-width: 940px) and (min-height: 501px){
	.description2{
		/*display:none;*/
	    position: relative;
	    padding-top: 8%;
	    padding-left:55%;
	    width:100%;
	    /*left:40%;*/
	    /*margin: auto;*/
	    text-align: center;
	    /*padding: 2em;*/
	}
	.description2 h1{
		/*display:none;*/
		/*color:#F97300;*/
		/*color:white;*/
		font-size:16px;
		text-align: center;
	}
	.header img{
		position:absolute;
		top:25%;
		/*
		bottom:2%;
		left:2%;*/
		width:470px;
	}
}
@media only screen and (min-width: 941px){
 	.description2{
	    position: relative;
	    padding-top: 8%;
	    padding-left:30%;
	    width:100%;
	    /*left:40%;*/
	    /*margin: auto;*/
	    text-align: center;
	    /*padding: 2em;*/
	}
	.description2 h1{
		/*color:#F97300;*/
		/*color:white;*/
		font-size:21px;

		text-align: center;
	}
	.header img{
		position:absolute;
		top:25%;
		/*
		bottom:2%;
		left:2%;*/
		width:470px;
	}
 }
@media only screen and (min-width: 1250px){
	.header img{
		position:absolute;
		top:16%;
		/*
		bottom:2%;
		left:2%;*/
		left:4%;
		width:500px;
	}
}
.description h1{
	color:yellow;
  	text-shadow: 0px 0px 4px #000000, 0 0 10px white;
  }
.description2 h1{
	color:yellow;
  	text-shadow: 0px 0px 4px #000000, 0 0 10px white;
}
.description h1 p{
	/*color:#F97300;*/
	color:yellow;
  	text-shadow: 0px 0px 4px #000000, 0 0 10px white;
	font-size: 80%;
	/*width: 50%;*/
	line-height: 1.5;
	/*text-align: center;*/
}
.description button{
	border:1px  solid #F97300;
	background:#F97300;
	color:#fff;
	margin-left: 50%;
}
.btnNext{
	border:1px  solid #F97300;
	background:#F97300;
	color:#fff;
	margin-right: 5%;
	margin-bottom: 5%;
	position: absolute;
	right:2%;
	bottom:2%;
}

.about{
	/*margin: 4em 0;*/
	/*padding: 1em;*/
	position: relative;
}
.about h1{
	color:#F97300;
	/*color: #FFCC00;*/
	text-align: center;
	margin-top: 2em;
	margin-bottom: 2em;
}
.about h1 p{
	margin-top:3%;
	line-height:2;
	color:#888;
	text-align: center;
	font-size: 20px;
}
.about img{
	height: 100%;
    width: 100%;
    border-radius: 50%
}
.about span{
	display: block;
	color: #888;
	position: absolute;
	left: 115px;
}
.about .desc{
	padding: 2em;
	border-left:4px solid #10828C;
}
.about .desc h3{
	color: #10828C;
}
.about .desc p{
	line-height:2;
	color:#888;
}



.about2{
	/*margin: 4em 0;*/
	/*padding: 1em;*/
	position: relative;
}
.about2 h1{
	color:#F97300;	
	/*color: #FFCC00;*/
	margin: 70px;
	margin-top: 80px;
}
.about2 h1 p{
	margin-top:1%;
	line-height:2;
	color:#888;
	text-align: center;
	font-size: 45%;
}
.about2 img{
	/*height: 100%;*/
    /*width: 300px;*/
    /*border-radius: 30%;*/
    /*align-items:center;*/
	display: block;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
}
@media only screen and (max-width: 800px){
	.about2 img{
	    padding-bottom: 5%;
	}
}
.about2 span{
	display: block;
	color: #888;
	position: absolute;
	left: 115px;
}
.about2 .desc{
	padding-left: 2em;
	border-left:4px solid #10828C;
}
.about2 .desc h3{
	color: #10828C;
}
.about2 .desc p{
	line-height:2;
	color:#888;
	/*font-size: 100%;*/
	text-align: justify;

	font-size: 19px;
}

.membership{
	/*margin-top: 4%;*/
	/*padding:3%;*/
	/*padding-bottom: 6%;*/
}
.membership h1{
	text-align: center;
	/*color: #FFCC00;*/
	color:#f97300;
	font-size: 50px;
	line-height:1.5;
	margin-bottom: 3%;
}
.membership h1 p{
	line-height:1.5;
	color:#888;
	text-align: center;
	font-size:20px;
	margin-bottom: 2%;
}
.membership img{
	/*height: 100%;*/
    /*width: 300px;*/
    /*border-radius: 30%;*/
    /*align-items:center;*/
	display: block;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    box-shadow: 0 12px 30px 0 rgba(0, 0, 0, 0.2), 0 12px 30px 0 rgba(0, 0, 0, 0.19);
}

.winner{
		position: relative;

	/*background-image: url('../images/back4.png');*/
	background: black;
	background-size: cover;
	background-position: left;
	background-attachment: fixed;
	height:100%;
	width:100%;
	margin-top: 6%;
	padding:3%;
	padding-bottom: 6%;
}
.winner h1{
	text-align: center;
	color: #FFCC00;
	/*color:#f97300;*/
	line-height:1.5;
}
.winner h1 p{
	line-height:1.5;
	color:white;
	text-align: center;
	font-size:22px;
	margin-bottom: 3%;
}
.winner img{
	/*height: 100%;*/
    /*width: 300px;*/
    /*border-radius: 30%;*/
    /*align-items:center;*/
	display: block;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    box-shadow: 0 12px 30px 0 rgba(0, 0, 0, 0.2), 0 12px 30px 0 rgba(0, 0, 0, 0.19);
}

.endBar{
		position: relative;
	background: black;
	padding-top:3%;
	padding-bottom: 3%;
}
.endBar h1{
	text-align: center;
	color: white;
	/*color:#f97300;*/
	line-height:1.5;
	font-size: 24px;
}
.endBar h1 p{
	text-align: center;
		color: white;
	/*color:#f97300;*/
	line-height:1.5;
	font-size: 14px;
	font-family:monospace;
}

hr { 
  display: block;
  margin-top: 40px;
  margin-bottom: 40px;
  margin-left: auto;
  margin-right: auto;
  /*border-style: inset;*/
  border-width: 6px;
  width:70%;
}

.loginArea{
	width: 320px;
	margin-top: 5%;
	margin-bottom: auto;
	vertical-align: middle;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 0 12px 30px 0 rgba(0, 0, 0, 0.2), 0 12px 30px 0 rgba(0, 0, 0, 0.19);
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    border-top-right-radius: 30px;
    border-top-left-radius: 30px;
	/*background-color: #fff;*/
}
.headerLogin{
	padding-top: 17px;
	/*height:100px;*/
	text-align: center;
	color: #fff;
	font-size: 20px;
	height: 35px;
	background-color: black;
	border-top-right-radius: 30px;
	border-top-left-radius: 30px;
	border-bottom: 2px solid #FB6705;
}
#brandLogin{
	width:180px;
}
.demo-content {
	padding-top: 10px;
    background-color: rgba(255,255,255,0.5);
    /*border: #efe3d8 1px solid;*/
    /*display: inline-block;*/
    /*border-top:#997300 10px solid;*/
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
/*    border-top-right-radius: 20px;
    border-top-left-radius: 20px;*/
    position: relative;
    /*margin-left: auto;*/
    /*margin-right: auto;*/
    /*margin-top: 5%;*/
}

.demo-content label {
    font-size:12px;
}

.demo-content span {
    color: #ff7d06;
    text-align: center;
    font-size: 12px;
    margin-left:10px; 
    
}

.demo-content form {
    width: auto;
    display:inline-block;
    text-align:left;

}

.demo-content input {
    /*margin: 5px 0px 20px 0px;*/
    padding:10px;
    padding-left:15px;
    width:250px;
    border-bottom-left-radius: 20px;
    border-top-right-radius: 20px;
    border:none;
    margin-bottom: 5px;
}

.demo-content button {
    margin-bottom:20px;
}
#response {
    padding:15px 0px;
    margin-top:10px;
    margin-bottom: 10px;
}

.error {
    color: #de1414;
}

.success {
    color: #4cde14;
}

.btn {
    /*padding-top:auto;*/
    width: 100%;
    color: #FFF;
    font-size: 12px;
    background: #333;
    /*border: #252525 1px solid;*/
}

.login {
    background: #787878;
    /*border: #09f 1px solid;*/
    width:50px;
    height:50px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;
    border:none;
    float:left;
    margin-top: 15px;
    font-weight: bold;
}
.home {
    background: #787878;
    /*border: #09f 1px solid;*/
    width:50px;
    height:50px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;
    border:none;
    float:right;
    margin-top: 15px;
    font-weight: bold;

}


.signup {
    background: #FB6705;
    /*border: #379706 1px solid;*/
    width:110px;
    height:34px;
    font-weight: bold;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border:none;
}
#name_error{
	color:black;
	font-weight: bold;
}
#email_error{
	color:black;
	font-weight: bold;
}
#password_error{
	color:black;
	font-weight: bold;
}
#hp_error{
	color:black;
	font-weight: bold;
}
#confirm_password_error{
	color:black;
	font-weight: bold;
}


/** {box-sizing: border-box;}*/
/*body {font-family: Verdana, sans-serif;}*/
.mySlides {display: none;}
/*img {vertical-align: middle;}*/

.mySlides img{
	max-height: 400px;
	height:100%;
	width:100%;
	vertical-align:middle;
	margin-left: auto;
	margin-right: auto;     
	border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    box-shadow: 0 0px 20px 0 rgba(0, 0, 0, 0.2), 0 0px 20px 0 rgba(0, 0, 0, 0.19);
}

/* Slideshow container */
.slideshow-container {
  /*max-width: 1100px;*/
  position: relative;
  margin: auto;
      border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 5s;
  animation-name: fade;
  animation-duration: 5s;
}

@-webkit-keyframes fade {
  from {opacity: 1} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: 1} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}

.menuMateri{
	/*margin-top: 4%;*/
	/*padding:3%;*/
	/*padding-bottom: 6%;*/
	padding-top: 25px;
	padding-bottom: 40px;
}
.menuMateri h1{
	text-align: center;
	/*color: #FFCC00;*/
	color:#f97300;
	font-size: 36px;
	line-height:1.5;
	margin-bottom: 20px;
}
.menuMateri h1 p{
	line-height:1.5;
	color:#888;
	text-align: center;
	font-size:20px;
	margin-bottom: 30px;
}
.menuMateri img{
	/*height: 100%;*/
    /*width: 300px;*/
    /*border-radius: 30%;*/
    /*align-items:center;*/
    margin-top: 30px; width:220px;height:220px;
    margin-bottom:30px;
	display: block;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    box-shadow: 0 12px 30px 0 rgba(0, 0, 0, 0.2), 0 12px 30px 0 rgba(0, 0, 0, 0.19);
}


.linkdaftar{
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	margin-top: 55px;
	font-size: 28px;
	color:red;
}

.membershipPrice{
	/*margin-top: 4%;*/
	/*padding:3%;*/
	/*padding-bottom: 6%;*/
	padding-top: 25px;
	padding-bottom: 40px;
}
.membershipPrice h1{
	text-align: center;
	/*color: #FFCC00;*/
	color:#f97300;
	font-size: 36px;
	line-height:1.5;
	margin-bottom: 20px;
}
.membershipPrice h1 p{
	line-height:1.5;
	color:#888;
	text-align: center;
	font-size:20px;
	margin-bottom: 30px;
}
.membershipPrice img{
	/*height: 100%;*/
    /*width: 300px;*/
    /*border-radius: 30%;*/
    /*align-items:center;*/
    margin-top: 30px; width:220px;height:220px;
    margin-bottom:30px;
	display: block;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    box-shadow: 0 12px 30px 0 rgba(0, 0, 0, 0.2), 0 12px 30px 0 rgba(0, 0, 0, 0.19);
}
.formmember-content {
    margin-left: auto;
    margin-right: auto;
    /*background-color: rgba(255,255,255,0.5);*/
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    position: relative;
}
.formmember-content input {
    width:200px;
    height: 30px;
    padding-left:10px;
    /*padding-left:15px;*/
    margin-bottom: 5px;
    border-bottom-left-radius: 10px;
    border-top-right-radius: 10px;
    /*border:none;*/ 
    text-align:left;
    display:inline-block;
    font-size: 14px;
}
.formmember-content select {
    width:280px;
    height: 30px;
    padding-left:10px;
    /*padding-left:15px;*/
    margin-bottom: 5px;
    border-bottom-left-radius: 10px;
    border-top-right-radius: 10px;
    /*border:none;*/ 
    text-align:left;
    display:inline-block;
    font-size: 14px;
}
.submitMember {
    background: #10828C;
    /*border: #379706 1px solid;*/
    width:110px;
    height:34px;
    font-weight: bold;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border:none;
    color: #FFF;
    margin-top: 20px;
    margin-bottom: 40px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

#paket_error, #metode_error, #bankname_error, #bankowner_error, #banknumber_error
{
	/*color:black;*/
    color:red;
    float:right;
    margin-right: 70px;
    font-size:14px;
}
#bankname2_error, #bankowner2_error, #banknumber2_error
{
	/*color:black;*/
    color:red;
    float:right;
    margin-right: 70px;
    font-size:14px;
}
#bankname3_error, #bankowner3_error, #banknumber3_error
{
	/*color:black;*/
    color:red;
    float:right;
    margin-right: 70px;
    font-size:14px;
}
#provinsi_error, #kabupaten_error, #lengkap_error
{
	/*color:black;*/
    color:red;
    float:right;
    margin-right: 70px;
    font-size:14px;
}

.membershipStatus{
	/*margin-top: 4%;*/
	/*padding:3%;*/
	/*padding-bottom: 6%;*/
	padding-top: 25px;
	padding-bottom: 40px;
}
.membershipStatus h1{
	text-align: center;
	/*color: #FFCC00;*/
	color:#f97300;
	font-size: 36px;
	line-height:1.5;
	margin-bottom: 20px;
}
.membershipStatus h1 p{
	line-height:1.5;
	color:#888;
	text-align: center;
	font-size:20px;
	margin-bottom: 30px;
}
.membershipStatus img{
	/*height: 100%;*/
    /*width: 300px;*/
    /*border-radius: 30%;*/
    /*align-items:center;*/
    margin-top: 30px; width:220px;height:220px;
    margin-bottom:30px;
	display: block;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    box-shadow: 0 12px 30px 0 rgba(0, 0, 0, 0.2), 0 12px 30px 0 rgba(0, 0, 0, 0.19);
}
.memberArea{
	background-color: rgba(230,230,230,0.9);border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    padding-top:30px;
    padding-bottom: 30px;
    padding-right: 50px;
    padding-left:50px;
}

#mytable 
{
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;text-align: center;
    /*margin-left: 5%;*/
    margin-bottom: 1%;
    margin-top: 1%;
    font-size: 14px;

}
#mytable td, #mytable th
{
    border: 2px solid #ddd;padding: 2px;width:80px;
}
#mytable tr:nth-child(even)
{
	/*background-color: #FAFFBD;*/
	# background-color:#F8FFAD;
	background-color: #FFFFFF;
}
#mytable tr:nth-child(odd)
{
	background-color: #FFFFFF;
}
#mytable th 
{
    padding-top: 2px;
    padding-bottom: 2px;
    text-align: center;
    background-color:  #FFFFFF;
    /*color: white;*/
}

.submitPay {
    background: #10828C;
    /*border: #379706 1px solid;*/
    /*width:300px;*/
    /*height:34px;*/
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border:none;
    font-size: 12px;
    padding:10px;
    margin-left: 15px;
    color: #FFF;
}

/*STUDY +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#mySidebar{
  padding-left: 0px;
  padding-right: 0px;
}
.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  /*top: 0;*/
  left: 0;
  /*background-color: #111;*/
  background: #920A0A;
  overflow-x: hidden;
  overflow-y: auto;
  transition-property: width;
  transition-duration: 0.5s;
  padding-top: 10px;
  /*text-align: center;*/
}
#sidebarContent{
  vertical-align: middle !important;
}
#sidebarConten{
	text-align: center;
	width:auto;
}

#sidebarContent a {
  /*padding: 8px 8px 8px 50px;*/
  margin-bottom: 10px;
  padding-top: 7px;
  height:35px;
  width:auto;
  text-decoration: none;
  font-size: 16px;
  color: #CC3300;
  display:block;
  text-align: center;
  transition-duration: 0.5s;
  background-color: white;
  /*display:table; vertical-align:middle;*/
  /*vertical-align: middle !important;*/
/*     border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;*/
}

.sidebar a:hover {
  color: #f1f1f1;
}

.openbtn {
  font-size: 14px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 15px;
  border: none;
  transition: margin-left .5s;
  margin-bottom: 16px;
}

.openbtn:hover {
  background-color: #444;
}

#main {
	position:relative;
  transition: margin-left .5s;
  padding-top: 35px;
  padding-bottom: 30px;
  padding-left: 70px;
  padding-right: 70px;
  height:100%;
  overflow-y: auto;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
}

#sidebarBrand{
	/*margin-top: 4px;*/
	margin-bottom: 10px;
}
#sidebarBrand a{
	text-align: center;
	font-size: 20px;
  	color: #818181;
  	display: block;
  	transition-duration: 0.5s;
}
#sidebarBrand img{
	/*box-shadow: 0 0 30px 0 rgba(0, 0, 0, 1), 0 0 30px 0 rgba(0, 0, 0, 1);*/
	/*border : 2px solid white;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    width:35px;*/

    width:90px;
}
.cardContent
{
	padding:40px;
	background-color: rgba(250,250,250,0.1);border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1), 0 0 15px 0 rgba(0, 0, 0, 0.09);
}

::-webkit-scrollbar {
    width: 5px;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);     
    background: #E5E5E5;    
}
 
::-webkit-scrollbar-thumb {
    background: #737070;
}

.headContent{
	font-family: sans-serif;
	font-size: 24px;
}

.isiContent{
	font-family: "Century Gothic";
	font-size: 16px;
}

.isiContentMed{
	font-family: "Century Gothic";
	font-size: 18px;
}

.isiContentBig{
	font-family: "Century Gothic";
	font-size: 20px;
}

@media only screen and (max-width: 800px){
	#main {
	  position:relative;
	  transition: margin-left .5s;
	  padding: 20px;
	  height:100%;
	  overflow-y: auto;
	}
}

#register
{
	background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

#register:hover, #regiter:active {
  background-color: red;
}