h2, h3 {font-family: 'Big Shoulders Display'!important;}
p, li{font-family: 'Nunito Sans', sans-serif!important; font-size: 18px;}
.bg {
	background-image: url('../img/bgs/1.jpg');
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.bg-6 {
	background-image: url('../img/bgs/6.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.bg-7 {
	background-image: url('../img/bgs/7.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.cc-preload{
	width: 100%; height: 100vh; z-index: 1000; display: flex; background-image: radial-gradient(#f07728, #150404);
}


.bouncing-ball {
  width: 50px;
  height: 50px;
  border-radius: 50%; /* Makes it a circle */
  position: relative; /* Essential for 'top' property in animation */
  animation: bounce 2s infinite; /* Apply the 'bounce' animation */
}

@keyframes bounce {
  0%, 100% {
    top: 0; /* Starting and ending position (at the top) */
    animation-timing-function: ease-in; /* Slow start to the drop */
  }
  50% {
    top: 100px; /* Midpoint of the bounce (at the bottom) */
    animation-timing-function: ease-out; /* Fast start to the rise */
  }
}


/*
Extra small devices (portrait phones, less than 576px)
*/
@media (max-width: 575.98px) {

	.header{
		margin-top: -2px;
		margin-bottom: 2%;
		padding: 20px;
		/*
			background-color: #6F1854;
		*/
	}

	.footer{
		
		margin-top: 10%;
		padding: 20px;
		background-color: transparent;
	}

	.footer .copyright p{
		
		display: inline-block;
		margin: 0px!important;
		padding: 10px!important;
	}

	.footer .link a{
		
		text-decoration: none;
		display: inline-block;
		padding: 10px;
	}

	.footer .copyright{
		
		padding: 2px!important;
		text-align: center;
	}

	.footer .link{
		
		padding: 2px;
		text-align: center;
	}

	.page_title {
		color: #FFFFFF; 
/*
		margin-top: 8%;
*/
		font-size: 26px;
	}

	.password_reset{
		width: 100%; 
		height: 250px;
		padding: 10px;
		margin-top: 30%;
		margin-left: auto;
		margin-right: auto;
		border-radius: 25px 25px 25px 25px;
		background: #6f1854;
	/*
		background-image: url('../img/clear-black.png');
	*/
		color: #FFFFFF;
	}

	.password_reset .header{
		width: 100%;
		float: left; 
	}

	.password_reset .header img{
		width: 80px;
		float: left; 
		margin-left: 35%;
	}

	.password_reset .lock{
		width: 30%;
		float: left; 
		border-radius: 25px;
		background: transparent;
		height: 200px;
	}

	.password_reset .lock img{
		width: 32px;
		margin-top: 100%;
		margin-left: 25%;
		margin-right: auto;
	}

	.password_reset .input{
		width: 100%;
		float: left;
		margin-top: 10px; 
	}

	.password_reset .input input{
		width: 100%;
		float: left;
		color: 6f1854;
		padding: 14px;
		margin-bottom: 14px;
		border-radius: 10px;
		border: 0px;
	}

	.password_reset .input button{
		color: #ffffff;
		margin-top: 5%;
		border: 0px;
		background: transparent;
	}

	.password_reset .login_box{
		color: #ffffff;
		margin-top: 5%;
		width: 100%;
		float: left;
		padding: 10px;
	}

	.password_reset .login_box a{
		color: #ffffff;
	}

	.login{
		width: 100%; 
		height: 280px;
		padding: 10px;
		margin-top: 8%;
		margin-left: auto;
		margin-right: auto;
		border-radius: 25px 25px;
		background: #6f1854;
	/*
		background-image: url('../img/clear-black.png');
	*/
		color: #FFFFFF;
	}

	.login .header{
		width: 100%;
		float: left; 
	}

	.login .header img{
		width: 80px;
		float: left; 
		margin-left: 35%;
	}

	.login .lock{
		width: 30%;
		float: left; 
		border-radius: 25px;
		background: transparent;
		height: 200px;
	}

	.login .lock img{
		width: 32px;
		margin-top: 100%;
		margin-left: 25%;
		margin-right: auto;
	}

	.login .input{
		width: 100%;
		float: left;
		margin-top: 10px; 
	}

	.login .input input{
		width: 100%;
		float: left;
		color: 6f1854;
		padding: 14px;
		margin-bottom: 14px;
		border-radius: 10px;
		border: 0px;
	}

	.login .input button{
		color: #ffffff;
		border: 0px;
		background: transparent;
	}

	.login .password_reset{
		color: #ffffff;
	}

	.btn-register {color: #ffffff;}
	
	/* 	Profile */
	.profile-box {width: 80px; overflow: hidden; margin-right: 3px;}
	.profile-box .img {width: 80px; height: 80px; overflow: hidden;}
	.profile-box .nickname {display:block; font-size: 12px; padding: 1px 0px; margin: 0px;}
	.profile-box .area {display:block; font-size: 9px; padding: 1px 0px; margin: 0px;}
}

/*
// Small devices (landscape phones, less than 768px)
*/

/*
// Small devices (landscape phones, less than 768px)
*/
@media (min-width: 576px) and (max-width: 767.98px)  {
	.header{
		margin-top: -2px;
		margin-bottom: 2%;
		padding: 20px;
		/*
			background-color: #6F1854;
		*/
	}

	.footer{
		
		margin-top: 2%;
		padding: 20px;
		background-color: transparent;
	}

	.footer .copyright p{
		
		display: inline-block;
		margin: 0px!important;
		padding: 10px!important;
	}

	.footer .link a{
		
		text-decoration: none;
		display: inline-block;
		padding: 10px;
	}

	.footer .copyright{
		
		text-align: center;
	}

	.footer .link{
		
		text-align: center;
	}

	.page_title {
		color: #FFFFFF; 
/*
		margin-top: 48%;
*/
		font-size: 28px;
	}

	.password_reset{
		width: 300px; 
		height: 250px;
		padding: 10px;
		margin-top: 30%;
		margin-left: auto;
		margin-right: auto;
		border-radius: 25px 25px 25px 25px;
		background: #6f1854;
	/*
		background-image: url('../img/clear-black.png');
	*/
		color: #FFFFFF;
	}

	.password_reset .header{
		width: 100%;
		float: left; 
	}

	.password_reset .header img{
		width: 80px;
		float: left; 
		margin-left: 35%;
	}

	.password_reset .lock{
		width: 30%;
		float: left; 
		border-radius: 25px;
		background: transparent;
		height: 200px;
	}

	.password_reset .lock img{
		width: 32px;
		margin-top: 100%;
		margin-left: 25%;
		margin-right: auto;
	}

	.password_reset .input{
		width: 100%;
		float: left;
		margin-top: 10px; 
	}

	.password_reset .input input{
		width: 100%;
		float: left;
		color: 6f1854;
		padding: 14px;
		margin-bottom: 14px;
		border-radius: 10px;
		border: 0px;
	}

	.password_reset .input button{
		color: #ffffff;
		margin-top: 5%;
		border: 0px;
		background: transparent;
	}

	.password_reset .login_box{
		color: #ffffff;
		margin-top: 5%;
		width: 100%;
		float: left;
		padding: 10px;
	}

	.password_reset .login_box a{
		color: #ffffff;
	}

	.login{
		width: 100%; 
		height: 280px;
		padding: 10px;
		margin-top: 30%;
		margin-left: auto;
		margin-right: auto;
		border-radius: 25px 25px;
		background: #6f1854;
	/*
		background-image: url('../img/clear-black.png');
	*/
		color: #FFFFFF;
	}

	.login .header{
		width: 100%;
		float: left; 
	}

	.login .header img{
		width: 80px;
		float: left; 
		margin-left: 35%;
	}

	.login .lock{
		width: 30%;
		float: left; 
		border-radius: 25px;
		background: transparent;
		height: 200px;
	}

	.login .lock img{
		width: 32px;
		margin-top: 100%;
		margin-left: 25%;
		margin-right: auto;
	}

	.login .input{
		width: 100%;
		float: left;
		margin-top: 10px; 
	}

	.login .input input{
		width: 100%;
		float: left;
		color: 6f1854;
		padding: 14px;
		margin-bottom: 14px;
		border-radius: 10px;
		border: 0px;
	}

	.login .input button{
		color: #ffffff;
		border: 0px;
		background: transparent;
	}

	.login .password_reset{
		color: #ffffff;
	}

	.btn-register {color: #ffffff;}
	
	/* 	Profile */
	.profile-box {width: 90px; overflow: hidden; margin-right: 10px;}
	.profile-box .img {width: 90px; height: 90px; overflow: hidden;}
	.profile-box .nickname {display:block; font-size: 12px; padding: 1px 0px; margin: 0px;}
	.profile-box .area {display:block; font-size: 9px; padding: 1px 0px; margin: 0px;}
}

/*
// Medium devices (tablets, less than 992px)
*/
@media (min-width: 768px) and (max-width: 991.98px) {
	.header{
		margin-top: -2px;
		margin-bottom: 2%;
		padding: 20px;
		/*
			background-color: #6F1854;
		*/
	}

	.footer{
		
		margin-top: 2%;
		padding: 20px;
		background-color: transparent;
	}

	.footer .copyright p{
		
		display: inline-block;
		margin: 0px!important;
		padding: 10px!important;
	}

	.footer .link a{
		
		text-decoration: none;
		display: inline-block;
		padding: 10px;
	}

	.footer .copyright{
		
		text-align: center;
	}

	.footer .link{
		
		text-align: center;
	}

	.page_title {
		color: #FFFFFF; 
/*
		margin-top: 48%;
*/
		font-size: 28px;
	}

	.password_reset{
		width: 300px; 
		height: 250px;
		padding: 10px;
		margin-top: 30%;
		margin-left: auto;
		margin-right: auto;
		border-radius: 25px 25px 25px 25px;
		background: #6f1854;
	/*
		background-image: url('../img/clear-black.png');
	*/
		color: #FFFFFF;
	}

	.password_reset .header{
		width: 100%;
		float: left; 
	}

	.password_reset .header img{
		width: 80px;
		float: left; 
		margin-left: 35%;
	}

	.password_reset .lock{
		width: 30%;
		float: left; 
		border-radius: 25px;
		background: transparent;
		height: 200px;
	}

	.password_reset .lock img{
		width: 32px;
		margin-top: 100%;
		margin-left: 25%;
		margin-right: auto;
	}

	.password_reset .input{
		width: 100%;
		float: left;
		margin-top: 10px; 
	}

	.password_reset .input input{
		width: 100%;
		float: left;
		color: 6f1854;
		padding: 14px;
		margin-bottom: 14px;
		border-radius: 10px;
		border: 0px;
	}

	.password_reset .input button{
		color: #ffffff;
		margin-top: 5%;
		border: 0px;
		background: transparent;
	}

	.password_reset .login_box{
		color: #ffffff;
		margin-top: 5%;
		width: 100%;
		float: left;
		padding: 10px;
	}

	.password_reset .login_box a{
		color: #ffffff;
	}

	.login{
		width: 300px; 
		height: 280px;
		padding: 10px;
		margin-top: 30%;
		margin-left: auto;
		margin-right: auto;
		border-radius: 25px 25px;
		background: #6f1854;
	/*
		background-image: url('../img/clear-black.png');
	*/
		color: #FFFFFF;
	}

	.login .header{
		width: 100%;
		float: left; 
	}

	.login .header img{
		width: 80px;
		float: left; 
		margin-left: 35%;
	}

	.login .lock{
		width: 30%;
		float: left; 
		border-radius: 25px;
		background: transparent;
		height: 200px;
	}

	.login .lock img{
		width: 32px;
		margin-top: 100%;
		margin-left: 25%;
		margin-right: auto;
	}

	.login .input{
		width: 100%;
		float: left;
		margin-top: 10px; 
	}

	.login .input input{
		width: 100%;
		float: left;
		color: 6f1854;
		padding: 14px;
		margin-bottom: 14px;
		border-radius: 10px;
		border: 0px;
	}

	.login .input button{
		color: #ffffff;
		border: 0px;
		background: transparent;
	}

	.login .password_reset{
		color: #ffffff;
	}

	.btn-register {color: #ffffff;}
	
	/* 	Profile */
	.profile-box {width: 90px; overflow: hidden; margin-right: 10px;}
	.profile-box .img {width: 90px; height: 90px; overflow: hidden;}
	.profile-box .nickname {display:block; font-size: 14px; padding: 1px 0px; margin: 0px;}
	.profile-box .area {display:block; font-size: 9px; padding: 1px 0px; margin: 0px;}
}

/*
// Large devices (desktops, less than 1200px)
*/
@media (min-width: 992px) and (max-width: 1199.98px) {
	.header{
		margin-top: -2px;
		margin-bottom: 2%;
		padding: 20px;
		/*
			background-color: #6F1854;
		*/
	}

	.footer{
		
		margin-top: 2%;
		padding: 20px;
		background-color: transparent;
	}

	.footer .copyright p{
		
		display: inline-block;
		margin: 0px!important;
		padding: 10px!important;
	}

	.footer .link a{
		
		text-decoration: none;
		display: inline-block;
		padding: 10px;
	}

	.footer .copyright{
		
		text-align: right;
	}

	.footer .link{
		
		text-align: left;
	}

	.page_title {
		color: #FFFFFF; 
/*
		margin-top: 30%;
*/
	}

	.password_reset{
		width: 300px; 
		height: 250px;
		padding: 10px;
		margin-top: 30%;
		margin-left: auto;
		margin-right: auto;
		border-radius: 25px 25px 25px 25px;
		background: #6f1854;
	/*
		background-image: url('../img/clear-black.png');
	*/
		color: #FFFFFF;
	}

	.password_reset .header{
		width: 100%;
		float: left; 
	}

	.password_reset .header img{
		width: 80px;
		float: left; 
		margin-left: 35%;
	}

	.password_reset .lock{
		width: 30%;
		float: left; 
		border-radius: 25px;
		background: transparent;
		height: 200px;
	}

	.password_reset .lock img{
		width: 32px;
		margin-top: 100%;
		margin-left: 25%;
		margin-right: auto;
	}

	.password_reset .input{
		width: 100%;
		float: left;
		margin-top: 10px; 
	}

	.password_reset .input input{
		width: 100%;
		float: left;
		color: 6f1854;
		padding: 14px;
		margin-bottom: 14px;
		border-radius: 10px;
		border: 0px;
	}

	.password_reset .input button{
		color: #ffffff;
		margin-top: 5%;
		border: 0px;
		background: transparent;
	}

	.password_reset .login_box{
		color: #ffffff;
		margin-top: 5%;
		width: 100%;
		float: left;
		padding: 10px;
	}

	.password_reset .login_box a{
		color: #ffffff;
	}

	.login{
		width: 300px; 
		height: 280px;
		padding: 10px;
		margin-top: 30%;
		margin-left: auto;
		margin-right: auto;
		border-radius: 25px 25px;
		background: #6f1854;
	/*
		background-image: url('../img/clear-black.png');
	*/
		color: #FFFFFF;
	}

	.login .header{
		width: 100%;
		float: left; 
	}

	.login .header img{
		width: 80px;
		float: left; 
		margin-left: 35%;
	}

	.login .lock{
		width: 30%;
		float: left; 
		border-radius: 25px;
		background: transparent;
		height: 200px;
	}

	.login .lock img{
		width: 32px;
		margin-top: 100%;
		margin-left: 25%;
		margin-right: auto;
	}

	.login .input{
		width: 100%;
		float: left;
		margin-top: 10px; 
	}

	.login .input input{
		width: 100%;
		float: left;
		color: 6f1854;
		padding: 14px;
		margin-bottom: 14px;
		border-radius: 10px;
		border: 0px;
	}

	.login .input button{
		color: #ffffff;
		border: 0px;
		background: transparent;
	}

	.login .password_reset{
		color: #ffffff;
	}

	.btn-register {color: #ffffff;}
	
	/* 	Profile */
	.profile-box {width: 100px; overflow: hidden;}
	.profile-box .img {width: 100px; height: 100px; overflow: hidden;}
	.profile-box .nickname {display:block; font-size: 14px; padding: 1px 0px; margin: 0px;}
	.profile-box .age {display:block; font-size: 13px; padding: 1px 0px; margin: 0px;}
	.profile-box .area {display:block; font-size: 9px; padding: 1px 0px; margin: 0px;}
}

/*
// Extra large devices (large desktops, 1200px and up)
*/

@media (min-width: 1200px) and (max-width: 1399.98px) {
	.header{
		margin-top: -2px;
		margin-bottom: 2%;
		padding: 20px;
		/*
			background-color: #6F1854;
		*/
	}

	.footer{
		
		margin-top: 2%;
		padding: 20px;
		background-color: transparent;
	}

	.footer .copyright p{
		
		display: inline-block;
		margin: 0px!important;
		padding: 10px!important;
	}

	.footer .link a{
		
		text-decoration: none;
		display: inline-block;
		padding: 10px;
	}

	.footer .copyright{
		
		text-align: right;
	}

	.footer .link{
		
		text-align: left;
	}

	.page_title {
		color: #FFFFFF; 
/*
		margin-top: 30%;
*/
	}

	.password_reset{
		width: 300px; 
		height: 250px;
		padding: 10px;
		margin-top: 30%;
		margin-left: auto;
		margin-right: auto;
		border-radius: 25px 25px 25px 25px;
		background: #6f1854;
	/*
		background-image: url('../img/clear-black.png');
	*/
		color: #FFFFFF;
	}

	.password_reset .header{
		width: 100%;
		float: left; 
	}

	.password_reset .header img{
		width: 80px;
		float: left; 
		margin-left: 35%;
	}

	.password_reset .lock{
		width: 30%;
		float: left; 
		border-radius: 25px;
		background: transparent;
		height: 200px;
	}

	.password_reset .lock img{
		width: 32px;
		margin-top: 100%;
		margin-left: 25%;
		margin-right: auto;
	}

	.password_reset .input{
		width: 100%;
		float: left;
		margin-top: 10px; 
	}

	.password_reset .input input{
		width: 100%;
		float: left;
		color: 6f1854;
		padding: 14px;
		margin-bottom: 14px;
		border-radius: 10px;
		border: 0px;
	}

	.password_reset .input button{
		color: #ffffff;
		margin-top: 5%;
		border: 0px;
		background: transparent;
	}

	.password_reset .login_box{
		color: #ffffff;
		margin-top: 5%;
		width: 100%;
		float: left;
		padding: 10px;
	}

	.password_reset .login_box a{
		color: #ffffff;
	}

	.login{
		width: 300px; 
		height: 280px;
		padding: 10px;
		margin-top: 30%;
		margin-left: auto;
		margin-right: auto;
		border-radius: 25px 25px;
		background: #6f1854;
	/*
		background-image: url('../img/clear-black.png');
	*/
		color: #FFFFFF;
	}

	.login .header{
		width: 100%;
		float: left; 
	}

	.login .header img{
		width: 80px;
		float: left; 
		margin-left: 35%;
	}

	.login .lock{
		width: 30%;
		float: left; 
		border-radius: 25px;
		background: transparent;
		height: 200px;
	}

	.login .lock img{
		width: 32px;
		margin-top: 100%;
		margin-left: 25%;
		margin-right: auto;
	}

	.login .input{
		width: 100%;
		float: left;
		margin-top: 10px; 
	}

	.login .input input{
		width: 100%;
		float: left;
		color: 6f1854;
		padding: 14px;
		margin-bottom: 14px;
		border-radius: 10px;
		border: 0px;
	}

	.login .input button{
		color: #ffffff;
		border: 0px;
		background: transparent;
	}

	.login .password_reset{
		color: #ffffff;
	}

	.btn-register {color: #ffffff;}
	
	/* 	Profile */
	.profile-box {width: 100px; overflow: hidden; margin-right: 10px;}
	.profile-box .img {width: 100px; height: 100px; overflow: hidden;}
	.profile-box .nickname {display:block; font-size: 14px; padding: 1px 0px; margin: 0px;}
	.profile-box .age {display:block; font-size: 13px; padding: 1px 0px; margin: 0px;}
	.profile-box .area {display:block; font-size: 9px; padding: 1px 0px; margin: 0px;}
}

@media (min-width: 1400px) {
	
	.header{
		margin-top: -2px;
		margin-bottom: 2%;
		padding: 20px;
		/*
			background-color: #6F1854;
		*/
	}

	.footer{
		
		margin-top: 3%;
		padding: 20px;
		background-color: transparent;
	}

	.footer .copyright p{
		
		display: inline-block;
		margin: 0px!important;
		padding: 10px!important;
	}

	.footer .link a{
		
		text-decoration: none;
		display: inline-block;
		padding: 10px;
	}

	.footer .copyright{
		
		text-align: right;
	}

	.footer .link{
		
		text-align: left;
	}

	.page_title {
		color: #FFFFFF; 
/*
		margin-top: 30%;
*/
	}

	.password_reset{
		width: 300px; 
		height: 250px;
		padding: 10px;
		margin-top: 30%;
		margin-left: auto;
		margin-right: auto;
		border-radius: 25px 25px 25px 25px;
		background: #6f1854;
	/*
		background-image: url('../img/clear-black.png');
	*/
		color: #FFFFFF;
	}

	.password_reset .header{
		width: 100%;
		float: left; 
	}

	.password_reset .header img{
		width: 80px;
		float: left; 
		margin-left: 35%;
	}

	.password_reset .lock{
		width: 30%;
		float: left; 
		border-radius: 25px;
		background: transparent;
		height: 200px;
	}

	.password_reset .lock img{
		width: 32px;
		margin-top: 100%;
		margin-left: 25%;
		margin-right: auto;
	}

	.password_reset .input{
		width: 100%;
		float: left;
		margin-top: 10px; 
	}

	.password_reset .input input{
		width: 100%;
		float: left;
		color: 6f1854;
		padding: 14px;
		margin-bottom: 14px;
		border-radius: 10px;
		border: 0px;
	}

	.password_reset .input button{
		color: #ffffff;
		margin-top: 5%;
		border: 0px;
		background: transparent;
	}

	.password_reset .login_box{
		color: #ffffff;
		margin-top: 5%;
		width: 100%;
		float: left;
		padding: 10px;
	}

	.password_reset .login_box a{
		color: #ffffff;
	}

	.login{
		width: 300px; 
		height: 280px;
		padding: 10px;
		margin-top: 30%;
		margin-left: auto;
		margin-right: auto;
		border-radius: 25px 25px;
		background: #6f1854;
	/*
		background-image: url('../img/clear-black.png');
	*/
		color: #FFFFFF;
	}

	.login .header{
		width: 100%;
		float: left; 
	}

	.login .header img{
		width: 80px;
		float: left; 
		margin-left: 35%;
	}

	.login .lock{
		width: 30%;
		float: left; 
		border-radius: 25px;
		background: transparent;
		height: 200px;
	}

	.login .lock img{
		width: 32px;
		margin-top: 100%;
		margin-left: 25%;
		margin-right: auto;
	}

	.login .input{
		width: 100%;
		float: left;
		margin-top: 10px; 
	}

	.login .input input{
		width: 100%;
		float: left;
		color: 6f1854;
		padding: 14px;
		margin-bottom: 14px;
		border-radius: 10px;
		border: 0px;
	}

	.login .input button{
		color: #ffffff;
		border: 0px;
		background: transparent;
	}

	.login .password_reset{
		color: #ffffff;
	}

	.btn-register {color: #ffffff;}
	
	/* 	Profile */
	.profile-box {width: 100px; overflow: hidden; margin-right: 10px;}
	.profile-box .img {width: 100px; height: 100px; overflow: hidden;}
	.profile-box .nickname {display:block; font-size: 13px; padding: 1px 0px; margin: 0px;}
	.profile-box .age {display:block; font-size: 13px; padding: 1px 0px; margin: 0px;}
	.profile-box .area {display:block; font-size: 9px; padding: 1px 0px; margin: 0px;}
	
}