@font-face {
    font-family: 'beon';
    src: url('fonts/beon-webfont.woff') format('woff2');
    font-weight: normal;
    font-style: normal;
}
.bgwhite {background-color:#fff;}
.fbeon {font-family: 'beon';}
.colgreen {color:#c1e2c0;}
.f20 {font-size:2.0rem;}
.f18 {font-size:1.8rem;}
.f15 {font-size:1.5rem;}
.f12 {font-size:1.2rem;}
.f11 {font-size:1.1rem;}
.f10 {font-size:1.0rem;}
.f09 {font-size:0.9rem;}
.f08 {font-size:0.8rem;}
.f07 {font-size:0.7rem;}
.f06 {font-size:0.6rem;}
.f05 {font-size:0.5rem;}
.lspace01 {letter-spacing:0.1rem;}
.lspace02 {letter-spacing:0.2rem;}
.lspace03 {letter-spacing:0.3rem;}
.fill-100 {min-height:100vh;height:100vh;}

html, body {font-size:1.2vw !important;}
body {font-family: 'Raleway', Arial, Tahoma, Verdana, serif;position:relative;background-color:#223067;height:100%;}

#sidebar-burger {position:fixed;top:1em;left:1em;z-index:20;}
#sidebar-burger img {height:2rem;}
.gradient1 {
background: rgb(18,25,53);
background: -moz-linear-gradient(0deg, rgba(18,25,53,1) 0%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(0deg, rgba(18,25,53,1) 0%, rgba(0,0,0,0) 100%);
background: linear-gradient(0deg, rgba(18,25,53,1) 0%, rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#121935",endColorstr="#000000",GradientType=1);
}

#sidebar {width:17rem;height:100%;z-index:15;position:fixed;top:0;left:-13rem;background-color:rgba(34,48,103,0.9);transition: all 0.5s ease;}
#sidebar .arrow {position:absolute;right:1rem;top:50%;transform:translateY(-50%);}
#sidebar .arrow img {height:2rem;}
#sidebar .arrow .right {display:block;}
#sidebar .arrow .left {display:none;}
#sidebar.show {left:0;}
#sidebar.show .arrow .right {display:none;}
#sidebar.show .arrow .left {display:block;}
#sidebar .menu {height:80vh;margin-top:10vh;margin-left:3em;width:4rem;}
#sidebar.show .menu {width:14rem;}
#sidebar .menu > li {height:17%;}
#sidebar .menu > li.pro {height:35%;}
#sidebar .menu li a {color:#fff;text-decoration:none;padding:0.2rem 0.2rem 0.2rem 0.5rem;border:0;font-family: 'beon';letter-spacing:0.3em;display:block;white-space:nowrap;}
#sidebar .menu li a:hover {color:#c0e3bf;background-color:#000;}
#sidebar .menu ul.sub {font-size:0.8rem;margin-left:1em;}
#sidebar .menu ul.sub li {margin-top:1.5rem;}

#footer {background-color:#223067;color:#fff;padding:2rem 2rem 2rem 6rem;}
#footer .menu ul li {padding-top:0.5rem;padding-bottom:0.5rem;text-align:center;font-family:'beon';letter-spacing:0.2rem;font-size:0.6rem;}
#footer .menu ul li a {color:#fff;text-decoration:none;}
#footer .menu ul li a:hover {color:#ccc;}
#footer .menu-desktop {display:block;}
#footer .menu-mobile {display:none;}
#footer img.logo-footer {width:15rem;}
#footer .copyright {font-family:'beon';letter-spacing:0.2rem;font-size:0.6rem;}

.content-body {padding-left:5rem;}

@media only screen and (min-device-width: 320px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
	html, body {font-size:5vw !important;}
	#footer .menu ul li {text-align:left;}
	#sidebar .menu ul.sub li {margin-top:0.8rem;}
	#sidebar-burger {right:1rem;left:auto;}
	#sidebar {left:-100%;background-color:rgba(34,48,103,1);}
	#sidebar.show {width:100%;}
	.content-body {padding-left:0;}
	#footer {padding:2rem;}
}
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
	html, body {font-size:2vw !important;}
	#sidebar.show {width:14rem;}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
	html, body {font-size:2vw !important;}
	#sidebar.show {width:14rem;}
}