body{padding:0;margin:0;font-size:15px;font-family:arial,sans-serif;text-align:center;}

#page{width:980px;margin:0 auto;text-align:left;background:#f8f8f8;transition:margin 500ms;min-height:500px;}

#header{padding:5px 0;border-bottom:solid 1px #dedede;position:relative;background:#231F20;}

.homeheading{font-size:36px;margin-bottom:5px;color:#333333;}
.homeintro{font-family:'PT Serif',serif;padding-top:20px;line-height:1.6em;font-size:16px;}
.homeintro b{display:block;margin-bottom:5px;font-size:18px;}

.homeleft, .aip_neon{float:left;}
.homeleft{width:55%;margin-right:5%;}
.aip_neon{width:40%;}
.aip_neon img{width:100%;display:block;}

.cta{display:inline-block;margin-top:40px;border:solid 4px #4BB7E9;font-size:28px;padding:8px 20px;border-radius:15px;color:#3E93BA;}

.sectiontitle{padding-top:40px;font-size:28px;color:#333333;font-family:'PT Serif',serif;font-weight:bold;margin-bottom:20px;}
.sectiontitle.mobile{display:none;}

.whotiles{margin-bottom:80px;}
.whotile{float:left;width:26%;margin-left:3%;margin-right:3%;text-align:center;}
.whoimg{width:100%;display:block;border-radius:10px;margin-bottom:10px;background:#dedede;aspect-ratio:1;}
.whotitle{font-size:20px;margin-bottom:10px;color:#000000;}
.whosub{font-size:15px;width:80%;margin:0 auto;color:#444444;line-height:1.4em;}

.featurewall{display:none;border-top_x:solid 2px #dedede;border-bottom:solid 2px #dedede;margin:40px auto;margin-top:60px;width:70%;padding:40px 0;}
.featureitem{float:left;width:48%;margin-right:2%;margin-top:10px;margin-bottom:10px;font-size:18px;}

.plantiles{margin-bottom:20px;display:table;width:100%;}
.plantile{color:#444444;font-size:14px;line-height:1.5em;background:#f6f6f6;text-align:center;display:table-cell;box-sizing:border-box;border:solid 2px #999999;border-radius:10px;padding:10px;width:23%;}
.plantile.popular{border:solid 3px #4BB7E9;}
.plangap{display:table-cell;width:2%;}
.plantitle{font-size:22px;font-weight:bold;margin-bottom:20px;}
.planbar{width:80%;margin:10px auto;border-bottom:solid 2px #dedede;}
.plansubtitle{font-size:12px;text-transform:uppercase;margin-bottom:5px;color:#666666;}
.planprice{font-size:32px;font-weight:bold;padding-top:5px;margin-bottom:20px;}
.planprice span{font-size:16px;}


.planfootnote{font-size:13px;margin-bottom:60px;line-height:1.5em;color:#666666;}

.lion_tamer_{background:#EEE9DE;padding-top:30px;padding-bottom:30px;}
#lion_tamer{}
.lion_tamer_ .sectiontitle{line-height:1.3em;font-size:34px;margin-bottom:40px;}
.tamer_img{width:30%;padding-top:30px;margin-left:15%;margin-right:4%;}
.tamer_img, .tamer_text{float:left;}
.tamer_text{width:35%;line-height:1.6em;font-size:16px;}

#weblogo_light,#weblogo_dark{height:30px;margin-left:10px;}
#weblogo_light{display:inline-block;}
#weblogo_dark{display:none;}

#logo_light,#logo_dark{display:none;}

#menu{position:absolute;top:10px;right:10px;font-size:16px;}
.menuitem{display:block;float:left;margin-right:20px;border-bottom:solid 2px transparent;padding-bottom:3px;transition:color 200ms;}
.menuitem.current{border-color:#dedede;}
.menuitem, .menuitem:link, .menuitem:hover, .menuitem:visited{text-decoration:none;color:#e0e0e0;}
.menuitem:hover{color:#ffffff;}

.cwidth{padding:0 15px;}
.wcwidth{}
.nwidth{width:80%;margin:0 auto;}
.clear{clear:both;}

#web_login{display:table;width:100%;height:100vh;}
#web_login_banner,#web_login_form{display:table-cell;vertical-align:top;}
.web_login_banner_content{text-align:center;padding-top:100px;}
#web_login_banner{width:60%;}
#web_login_form{width:40%;}

#app_tagline{font-size:32px;padding-bottom:60px;font-family:'PT Serif',Georgia,serif;}
#app_cover{width:90%;max-width:700px;margin:0 auto;opacity:0.7;}

#web_login_banner{background:#ffffff;}
#web_login_form{background:#f0f0f0;}

p{line-height:1.5em;}
p.first{padding-top:50px;}
ul{line-height:1.8em;}

#mmenu{
	position:fixed;
	top:0;right:-70%;
	width:70%;
	text-align:left;
	transition:right 500ms;
	background:#111111;
	height:100%;
}

#mmenu_{
	padding:20px 20px;padding-top:40px;
	color:#ffffff;	
}

.mmenuitem{display:block;border-bottom:solid 1px #666666;text-align:center;padding-bottom:10px;margin-bottom:10px;transition:color 320ms;margin-left:10px;margin-right:10px;}
.mmenuitem, .mmenuitem:hover, .mmenuitem:visited, .mmenuitem:link{text-decoration:none;color:#999999;}
.mmenuitem:hover{color:#ffffff;}
.mmenuitem.current{color:#ffffff;}

#mtrigger{position:absolute;top:14px;right:20px;display:none;cursor:pointer;}
#mtrigger img{border:none;width:28px;}

#copyright{text-align:center;padding:10px 0;background:#444444;color:#ffffff;margin-top:40px;}
#logincopyright{padding:10px 0;margin-top:40px;display:none;}

#footerlinks{display:inline-block;margin-left:15px;}

.footerlink, .footerlink:hover, .footerlink:visited{text-decoration:none;}
#copyright .footerlink, #copyright .footerlink:hover, #copyright .footerlink:visited{color:#ffffff;}
#logincopyright .footerlink, #logincopyright .footerlink:hover, #logincopyright .footerlink:visited{color:#444444;}

#yubikeysetup a, #yubikeysetup a:hover, #yubikeysetup a:link, #yubikeysetup a:visited{text-decoration:none;color:#187CA6;}
#yubikeysetup a:hover{text-decoration:underline;}

#loginbox__{margin-top:140px;margin-left:20px;margin-right:20px;}
#loginbox_{padding:10px;}
#loginbox{text-align:left;}
.powered{display:none;}
.loginbutton_,.loginbutton{color:#ffffff;background:#187CA6;padding:8px 20px;border-radius:3px;border:none;cursor:pointer;box-shadow:0px 1px 2px #c9c9c9;-webkit-appearance:none;text-decoration:none;}
.loginbutton_:focus, .loginbutton_:hover{background:#29ABE1;}
.loginbutton_:active, #loginbuttonbutton:active{box-shadow:1px 1px 3px #999999;}

#fingerprint{cursor:pointer;vertical-align:middle;}
#fingerprint img{width:22px;margin-right:-10px;filter:saturate(0.4);}
#fingerprint img:hover{filter:saturate(1);}

#cardlink, #passlink{display:none;text-align:center;padding-top:10px;}
#cardlink{display:none;}
#cardinfo{padding:5px;font-size:12px;padding-left:26px;background:#fcfcdd url(app/imgs/smartcard.png) no-repeat 5px 50%;margin-bottom:10px;display:none;}

.lfinp,.lfsel{border:solid 1px #999999;display:block;margin-bottom:5px;border-radius:3px;}
.lfinp:active, .lfinp:focus, .lfsel:active, .lfsel:focus{outline:0;border:solid 2px #29ABE1;}
.lfinp{font-size:18px;-webkit-appearance:none;}
.lfsel{font-size:15px;}

#lang{padding:5px 0;}

.passtoggle{position:absolute;top:12px;right:8px;width:18px;cursor:pointer;}

.codesnippet{width:100%;height:180px;max-width:600px;}

/* ----------------- */
@media screen and (min-width:20px){
	#page{width:100%;max-width:2000px;}
	.cwidth{padding:0 20px;margin:0 auto;max-width:1240px;}
	.wcwidth{margin:0 auto;max-width:1480px;}
	
	.lfinp{padding:5px;box-sizing:border-box;height:34px;line-height:32px;font-size:15px;}
	
}

@media screen and (max-width:1260px){
	.lion_tamer_ .sectiontitle{font-size:32px;}
	.tamer_img{width:28%;margin-left:10%;}
	.tamer_text{width:40%;font-size:15px;}
}

@media screen and (max-width:1240px){
	#page{margin-left:0;}
}
/* ----------------- */

@media screen and (max-width:1180px){
	.plantiles{display:block;}
	.plangroup{display:table;width:80%;margin-left:10%;margin-bottom:40px;}
	
}

@media screen and (max-width:1110px){
	.lion_tamer_ .sectiontitle{font-size:30px;}
	.tamer_img{width:30%;margin-left:1%;}
	.tamer_text{width:45%;font-size:15px;}
}

@media screen and (max-width:1010px){
	.lion_tamer_ .sectiontitle{font-size:28px;}
	.tamer_img{width:30%;margin-left:0;}
	.tamer_text{width:55%;font-size:15px;}
}

@media screen and (max-width:890px){
	.lion_tamer_ .sectiontitle{display:none;}
	.sectiontitle.mobile{display:block;text-align:center;width:auto;margin-bottom:0;}
	#lion_tamer{text-align:center;}
	.tamer_img, .tamer_text{float:none;}
	.tamer_img{width:40%;margin:0 auto;}
	.tamer_text{width:80%;margin:0 auto;text-align:left;}
	
}

@media screen and (max-width:810px){
	#web_login{display:block;height:auto;}
	#web_login_banner,#web_login_form{display:block;}
	#app_tagline{padding-bottom:80px;}
	#app_cover{display:none;}
	#web_login_banner{width:auto;}
	#web_login_form{width:auto;}
	
	#loginbox__{margin-top:0px;}	
	#loginbox{padding-bottom:120px;}
	#web_login_banner{background:transparent url(images/login_cover.svg) no-repeat 50% 50%;background-size:cover;background-attachment:fixed;}
	.web_login_banner_content{padding-top:60px;background:linear-gradient(to bottom,rgba(255,255,255,1) 0%,rgba(255,255,255,0.75) 90%,rgba(255,255,255,0.5) 100%);}
}

@media screen and (max-width:800px){
	.plangroup{width:90%;margin-left:5%;}
}

@media screen and (max-width:650px){
	.homeleft, .aip_neon{float:none;}
	.homeleft{padding:100px 30px 30px 30px;width:auto;}
	
	.aip_neon{position:absolute;top:40px;left:30px;}
	.aip_neon img{width:auto;height:100px;}
	
	.tamer_img{width:60%;}	
}


@media screen and (max-width:630px){
	/*
	#menu{display:none;}
	#mtrigger{display:inline;}
	*/
	p.first{padding-top:20px;}
	
	.whotile{float:none;width:60%;margin-left:20%;margin-bottom:60px;}
	.whoimg{width:60%;margin-left:20%;}	
}

@media screen and (max-width:620px){
	.plangroup{width:100%;margin-left:0;}
}

@media screen and (max-width:550px){
	.plangroup{display:block;margin:0;}
	.plangroup{width:100%;}
	.plantile{display:block;width:70%;margin-left:15%;margin-bottom:40px;}
	.plangap{display:none;}
	
	.cta{font-size:24px;}
}

@media screen and (max-width:460px){
	.plantile{width:80%;margin-left:10%;}
	
	.whotile{float:none;width:80%;margin-left:10%;margin-bottom:60px;}
	.whoimg{width:50%;margin-left:25%;}		
}

@media screen and (max-width:400px){
	#loginbox__,.powered{width:90%;}
	#weblogo_light,#weblogo_dark{height:40px;}
	.plantile{width:90%;margin-left:5%;}
	
	.cta{font-size:20px;}
	.homeleft{padding-left:20px;padding-right:20px;}
	.homeheading{font-size:32px;}
}

@media screen and (max-width:340px){
	.cta{font-size:18px;}
	.homeheading{font-size:28px;}
}

@media screen and (max-width:320px){
	.plantile{width:100%;margin-left:0;}
}

@media screen and (max-width:300px){
	.loginbutton_{width:auto;padding-left:15px;padding-right:15px;}
}

@media screen and (max-width:260px){
	.powered{text-align:center;}
	.powered span{display:block;padding-top:3px;}
}

@media (prefers-color-scheme:dark_disabled) {
	body{background:#21262D;color:#e0e0e0;}

	#page{background:#0D1117;}
	#header{background:#21262D;border:none;}
	
	#weblogo_light{display:none;}
	#weblogo_dark{display:inline-block;}
	
	#app_cover{filter:invert(1);}

	.menuitem, .menuitem:link, .menuitem:hover, .menuitem:visited{color:#dcdcdc;}
	.menuitem:hover{color:#ffffff;}
	
	#loginbox{background:#0D1117;color:#C9D1D9;}
	input,#lang{background:#0D1117;color:#C2C3C5;}
	.loginbutton_{box-shadow:none;border:solid 1px #388BFD;}
	.loginbutton_:hover{background:#125B7A;}
	.powered{color:#8B949E;}
	#fingerprint,.passtoggle{filter:invert(1) hue-rotate(180deg);}
	.passtoggle{filter:invert(1);}
	#yubikeysetup a, #yubikeysetup a:hover, #yubikeysetup a:link, #yubikeysetup a:visited{text-decoration:none;color:#29ABE1;}	
	
	#web_login_banner{background:#21262D;}
	#web_login_form{background:#0D1117;}
	
	#copyright{background:transparent;border-top:solid 1px #444444;}
	#logincopyright .footerlink, #logincopyright .footerlink:hover, #logincopyright .footerlink:visited{color:#dedede;}
	
	.codesnippet{background:#222222;color:#ffffff;}
}