@charset "utf-8";
/* CSS Document */

#navbar { padding:1em 4em;}

.quicklinks-1 { display:none;}
.quicklinks-2 { display:block;}

.ql-icons a { width:70px; height:70px; display:block; margin-left:1.25em;}
.ql-icons li:nth-child(odd) a { background:url(../img/skyfu-maid.png) no-repeat; background-size:63px 70px;}
.ql-icons li:nth-child(odd) a:hover { background:url(../img/skyfu-maid.png) no-repeat; background-size:63px 70px;}
.ql-icons li:nth-child(even) a { background:url(../img/icon-fb.png) no-repeat; background-size:70px 70px;}
.ql-icons li:nth-child(even) a:hover { background:url(../img/icon-fb.png) no-repeat; background-size:70px 70px;}

.navbar-brand img { max-height:70px;}

.bg-top {background:#e1e1e1;}

.nav-item a.nav-link { 
	font-family: 'Inter', sans-serif; 
	margin-left:1em; 
	margin-right:1em; 
	font-size:1.05em; 
	text-transform:uppercase; 
	text-align:center; 
	border:0;
	font-weight:600;
	color:#4b4b4b !important;
}
.nav-item a.nav-link:hover { color:#3781b5 !important;}


@media only screen and ( max-width: 86em ) /* 1376 */
{
	.nav-link { font-size:0.9em; line-height:1.35em;}
}

@media only screen and ( max-width: 80em ) /* 1280 */
{
	.nav-item a.nav-link { margin-left:0.25em; margin-right:0.25em;}
}

@media only screen and ( max-width: 64em ) /* 1024 */
{
	.ql-icons a { width:50px; height:50px; margin-left:0.5em;}
	.ql-icons li:nth-child(odd) a { background:url(../img/skyfu-maid.png) no-repeat; background-size:45px 50px;}
	.ql-icons li:nth-child(odd) a:hover { background:url(../img/skyfu-maid.png) no-repeat; background-size:45px 50px;}
	.ql-icons li:nth-child(even) a { background:url(../img/icon-fb.png) no-repeat; background-size:50px 50px;}
	.ql-icons li:nth-child(even) a:hover { background:url(../img/icon-fb.png) no-repeat; background-size:50px 50px;}
	
	.navbar-brand img { max-height:40px;}
	
	.nav-link { font-size:0.7em;}
	.nav-item a.nav-link { margin-left:0.25em; margin-right:0.25em;}
}

@media only screen and ( max-width: 62em ) /* 992 */
{
	#navbar { padding:1em;}
	/*
	.fixed-top {position: inherit;}
	
	.quicklinks-1 { display:block;}
	.quicklinks-2 { display:none;}
	*/
	.ql-icons a { width:60px; height:60px; margin-left:0.5em;}
	.ql-icons li:nth-child(odd) a { background:url(../img/skyfu-maid.png) no-repeat; background-size:54px 60px;}
	.ql-icons li:nth-child(odd) a:hover { background:url(../img/skyfu-maid.png) no-repeat; background-size:54px 60px;}
	.ql-icons li:nth-child(even) a { background:url(../img/icon-fb.png) no-repeat; background-size:60px 60px;}
	.ql-icons li:nth-child(even) a:hover { background:url(../img/icon-fb.png) no-repeat; background-size:60px 60px;}
	
	.navbar-brand img { max-height:50px;}
}

@media screen and (max-width: 56em) /* 896 */
{
	.ql-icons a { width:50px; height:50px; margin-left:0.5em;}
	.ql-icons li:nth-child(odd) a { background:url(../img/skyfu-maid.png) no-repeat; background-size:45px 50px;}
	.ql-icons li:nth-child(odd) a:hover { background:url(../img/skyfu-maid.png) no-repeat; background-size:45px 50px;}
	.ql-icons li:nth-child(even) a { background:url(../img/icon-fb.png) no-repeat; background-size:50px 50px;}
	.ql-icons li:nth-child(even) a:hover { background:url(../img/icon-fb.png) no-repeat; background-size:50px 50px;}
	
	.navbar-brand img { max-height:40px;}
	
	.nav-item a.nav-link {  margin-left:0.15em; margin-right:0.15em; font-size:0.9em; font-weight:400;}
}

@media screen and (max-width: 51em) /* 816 */
{
	.nav-link { font-size:0.5em;}
	.nav-item a.nav-link { margin-left:0; margin-right:0; font-size:0.8em; font-weight:400;}
}

@media screen and (max-width: 46.25em) /* 740 */
{
	.quicklinks-1 { display:block;}
	.quicklinks-2 { display:none;}
	
	.ql-icons a { width:40px; height:40px;}
	.ql-icons li:nth-child(odd) a { background:url(../img/skyfu-maid.png) no-repeat; background-size:36px 40px;}
	.ql-icons li:nth-child(odd) a:hover { background:url(../img/skyfu-maid.png) no-repeat; background-size:36px 40px;}
	.ql-icons li:nth-child(even) a { background:url(../img/icon-fb.png) no-repeat; background-size:40px 40px;}
	.ql-icons li:nth-child(even) a:hover { background:url(../img/icon-fb.png) no-repeat; background-size:40px 40px;}
	
	.navbar-brand img { max-height:50px;}
}

@media screen and (max-width: 40em) /* 640 */
{
	.nav-link { text-align:left;}
}

@media screen and (max-width: 26em) /* 416 */
{
	.ql-icons a { width:40px; height:40px;}
	.ql-icons li:nth-child(odd) a { background:url(../img/skyfu-maid.png) no-repeat; background-size:36px 40px;}
	.ql-icons li:nth-child(odd) a:hover { background:url(../img/skyfu-maid.png) no-repeat; background-size:36px 40px;}
	.ql-icons li:nth-child(even) a { background:url(../img/icon-fb.png) no-repeat; background-size:40px 40px;}
	.ql-icons li:nth-child(even) a:hover { background:url(../img/icon-fb.png) no-repeat; background-size:40px 40px;}
	
	.navbar-brand img { max-height:30px;}
}

@media screen and (max-width: 23.5em) /* 376 */
{
	.ql-icons a { width:30px; height:30px; margin-left:0.25em;}
	.ql-icons li:nth-child(odd) a { background:url(../img/skyfu-maid.png) no-repeat; background-size:27px 30px;}
	.ql-icons li:nth-child(odd) a:hover { background:url(../img/skyfu-maid.png) no-repeat; background-size:27px 30px;}
	.ql-icons li:nth-child(even) a { background:url(../img/icon-fb.png) no-repeat; background-size:30px 30px;}
	.ql-icons li:nth-child(even) a:hover { background:url(../img/icon-fb.png) no-repeat; background-size:30px 30px;}
	
	.navbar-brand img { max-height:30px;}
}

@media screen and (max-width: 20em) /* 320 */
{
	.navbar-brand img { max-height:25px;}
}