*{
	margin: 0;
	padding:0;
	/*font-family: 'Poppins', sans-serif;*/
	font-family: "Comfortaa", sans-serif;
	box-sizing: border-box;
}
html{
	scroll-behavior: smooth;
	font-size: 62.5%;
}
body{
	background-color: #1c85a1;
	background-size: cover;
	background-attachment: fixed;
}


.mainbox{
	width: 100%;
	min-height:100vh;
	padding-bottom: 3rem;

}


.container{
	width: 100%;
	min-height: 30vh;
	max-height: 40vh;
	background: #eee;
	/*background: linear-gradient(rgba(0, 0, 0,0.0),rgba(0, 0, 0,0.0)),url(images/white.jpg);*/
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	filter: drop-shadow(0px 1px 10px #2f2f2f);	
	position: relative;
}


.navbar{
	width:85%;
	margin: auto;
	padding: 4rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap:wrap;
	/*z-index: 5;*/
}

.navbar h1{
	font-size: 4rem;
	color: #1c85a1;
	filter: drop-shadow(3px 3px 1px #b8b7b7);
	word-spacing: 0.8rem;
	line-height: 5rem;
	letter-spacing: 0.6px;
	font-weight: bold;
	transition: 0.3s ease;

}

.navbar h1:hover{
	cursor: pointer;
	color: #3f3f3f;
	transform: scale(115%);
	/*font-size: 3rem;*/

}


.navbar img, .logo{

	width:	15rem;
	height: 15rem;
	cursor: pointer;
	transition: 0.5s;
	color: #646548;
	border-radius: 50%;
}

.logo:hover{
	transform: scale(105%);
	filter: brightness(300%);
	filter: blur(50);
	filter: drop-shadow(10px 10px 10px #3f3f3f);	
}




.content{
	width: 100%;
	/*position: absolute;*/
	margin-top: 4rem;
	text-align: center;
	color: #fff;
	align-items: center;
	justify-content: space-between;

}
.content p{
	padding: 1.3rem;
	margin: 2rem auto;
	font-size: 1.9rem;
	word-spacing: 0.1rem;
	line-height: 3rem;
	color: #f3f6f6;
}

.content .btnbox{
	width: 90%;
	margin: 1rem auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;

}



.btnbox button{
	width: 17rem;
	padding: 1.3rem 0;
	text-align: center;
	font-size: 1.5rem;
	margin: 3rem 1rem 2rem;
	border:none;
	border-radius: 0.5rem;
	font-weight: bold;
	color: #2f2f2f;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	z-index: 1;
	filter: drop-shadow(0px 6px 4px #2f2f2f);
	transition: 0.4s ease;
}

.btnbox span{
	background: #eee;
	height: 100%;
	width: 100%;
	border-radius: 5px;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: -1;
	transition: 0.3s;

}
.btnbox button:hover span{
	background: #3f3f3f ;
}

.btnbox button:hover{
	border: none;
	background: #3f3f3f;
	color: #fff;
	filter: drop-shadow(0px -5px 1px #999797);

}




.infobox{
	max-width: 35rem;
	height: auto;
	margin: 3rem auto;
	background: transparent;
	border-radius: 5rem;
	border:1px solid #ccc;
}

.visitorbox{
	padding: 1.3rem;
	color: #ccc;
	text-align: center;
	
}

.visitorbox h2{
	text-align: center;	
	font-size: 1.7rem;
	
}



/* ---------------------------------------------------------*/
/* ----------------------tab-----------------------------------*/
/* ---------------media queries-----------------*/

@media screen and (max-width: 909px) {


}

		
/* ---------------------------------------------------------*/
/* ----------------------tab-----------------------------------*/
/* ---------------media queries-----------------*/

@media screen and (max-width: 768px) {


}
		
/* ---------------------------------------------------------*/
/* -----------------------mobile----------------------------------*/
/* ---------------media queries-----------------*/

@media screen and (max-width: 480px) {

		.html{
			font-size: 35%;
		}

		.navbar{
			width:95%;
			align-items: center;
			text-align: center;
			padding: 1rem;
			justify-content: center;
		}

		.navbar h1{
			font-size: 2.7rem;
			line-height: 3.4rem;
			margin: 10px auto;

		}

		.navbar h1:hover{
			transform: scale(105%);
		}

		.content{
			margin: 1rem auto;
		}
		.content p{
			padding: 1rem;
		}
		.content .btnbox{
			justify-content: space-around;

		}

		.btnbox button{
			width: 14rem;
			font-size: 1.3rem;
		}

		.infobox{
			width: 90%;
			margin: 2rem auto;
			
		}

		.visitorbox{
			padding: 1rem 0.2rem;
		}
}