@charset "utf-8";
/* CSS Document */
*{ padding:0; margin:0; box-sizing:border-box;}
img{ width:100%;}
.wrapper{ background:url(images/background.jpg) center no-repeat; background-size: cover; height:100vh; width:100%; display:flex; align-items:center; background-size:cover; justify-content:center;}
.wrapper::before { content: ''; position:absolute;top: 0;bottom: 0; width: 100%;left: 0;right: 0;background: rgba(0, 0, 0, 0.38) !important;z-index: -1;}
.maincenter{ width:70%; text-align:center;}
.mainlogo{display: inline-block;margin-bottom: 12px;}
.logo{width: 180px;border-radius: 50%;margin:auto;}
.logo img{float:left;padding: 10px;width: 100%;background: #ffff;border-radius: 50%;}
.menu { text-align:left;}
.menu ul li{ list-style-type: none;background: #FFFFFF;width:48%;display: inline-block; vertical-align: middle;margin: 5px; border-radius:5px;
    box-shadow: rgb(0 0 0 / 16%) 0px 3px 6px;}
.menu ul li span{vertical-align: middle; width:55px;background: #84754e;display: inline-block;padding: 15px;margin-right: 14px;}
.menu ul li span img{filter: brightness(40);}
.menu ul li a{ display:flex; align-items:center; color:#84754e; text-decoration:none; font-size:19px;}
.footer{ position: absolute;bottom: 0;color: #fff;text-align: center;width: 100%;}
.footer p{ font-size:13px; margin:5px auto;text-shadow: 1px 1px 4px #0e0e0e;}
@media (max-width:812px)
{
	.maincenter{ width:350px;}
	.wrapper { flex-wrap: wrap;}
    .footer{ position: static;}
	.wrapper {height: 100%;}
}
@media (max-width:768px)
{	
	.wrapper {height: 100vh;}
}
@media (max-width:750px)
{	
	.wrapper {height: 100%;}
	.menu ul li{ width: 75%;
		margin-left: 32px;}
}
@media (max-width:500px)
{
	.wrapper{background-image: url(images/menu-n.webp); /*background-size: 100%; background-repeat: repeat;*/}
	.maincenter{ width:320px;}
	.menu ul li a {font-size: 14px;}
	.wrapper {height: 100vh;}
    .footer{position: initial;}
}
@media (max-height:500px)
{
	.wrapper{background-image: url(images/menu-n.webp); /*background-size: 100%; background-repeat: repeat;*/}
	.maincenter{ width:320px;}
	.menu ul li a {font-size: 14px;}
	.wrapper {height: 100% !important;}
    .footer{position: initial;}
	.menu ul li {
    width: 100%;
}
}
@media (max-width:340px)
{
	.maincenter{ width:300px;}
}