@font-face
{
	font-family: "opensans";
	src: url(bbStatic/fonts/OpenSans/OpenSans-Regular-webfont.woff);
}

@font-face
{
	font-family: "opensans";
	src: url(bbStatic/fonts/OpenSans/OpenSans-Bold-webfont.woff);
	font-weight: bold;
}

@font-face
{
	font-family: "opensans";
	src: url(bbStatic/fonts/OpenSans/OpenSans-Italic-webfont.woff);
	font-style: italic;
}

@font-face
{
	font-family: "mont";
	src: url(bbStatic/fonts/Montserrat/montserrat-bold-webfont.woff);
	font-weight: bold;
}

@font-face
{
	font-family: "julius";
	src: url(bbStatic/fonts/Julius_Sans_One/juliussansone-regular-webfont-english.woff);
}

body
{
	font-family: opensans, "Helvetica Neue", "Helvetica", Arial;
	color: $darkgray;
	text-align: left;
	line-height: 1.5;
	width: 100%;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
}

h1
{
	font-size: 1.9rem;
	font-family: julius;
}

h2 {
	color: $darkgray;
	font-size: 1.7rem;
	font-weight: bold;
	margin: 1em 0;
}

h3 {
	font-size: 1.6rem;
	color: $corpblue;
	font-weight: normal;
	padding: 2px .7em;
	margin-left: -.7em;
	display: inline-block;
}

/* Page Layout Stuff */
#hd { border-bottom: 1px solid #c7bfbf; padding: 1em; }

#bd { border: 0px solid blue; /*padding: 10px 0 30px 0; overflow: hidden; */  padding-bottom: 40px; }
#ft { border: 0px solid green; color: black; z-index: 10; }
html { background-color: white; }
#doc { background-color: white;}
input { border: 1px solid lightgray; }

#main
{
	padding: 20px 20px;
	background-color: white; background:
	url(images/gradient_gold.gif) repeat-x;
}

#hero { height:30vw; background-size: 105% auto; background-position:  0px -4vw; position: relative; }
#heroTop { height: 100%; background: url(images/shinkansenTop.jpg); top: 0;  background-size: 105% 100%; background-position:  0px -4vw; position: absolute; width: 100%; }
#heroBase { height: 17vw; background: url(images/shinkansenBaseAlpha2.png);  background-size: 105% auto; position: absolute; top: 13vw; width: 100%; }
#herofg { height: 30vw; background: url(images/shinkansenfg.png); background-size: 105% auto; background-position:  0px -4vw; position: absolute; width: 100%; transition: transform 500ms;}
#hero .tagline { font-size: 2.7vw; color: white; position: absolute; bottom: 3vw; width: 100%; text-align: center; text-shadow: 0 0 10px black; transform: translateX(2500);  line-height: 1.2em; padding: 0 2em; }
.tagline span { white-space: pre; }
.tagline small { color: rgba(255,255,255,.5); font-size: 50%; }

.logo { font-size: 4rem;  }
a.logo,a.logo:link,a.logo:visited,a.logo:active { color: #ddd; }

#logoCont img { width: 250px; max-width: 50%; }

a { color: #4e66aa; text-decoration: none; }
a:hover { text-decoration: underline; }

h1 a { color: inherit; }
h2 a { color: inherit; }
h3 a { color: inherit; }

/*  Home Page Styles */
.roles a {
	padding: 2vw;
	display: block;
	text-align: center;
	color: white;
	margin: auto;
	font-family: julius;
	font-size: 100%;
}

.roles a span { white-space: pre; } /* this works with fitText and spans to ensure max size text */
.roles .column { padding: 0; }
.roles .icon { float: left; margin: 24px 14px 14px 0; display: none;  }
/*.roles .column:hover .icon { display: block; } */
.roles p { margin: 15px 10%; color:  #444; line-height: 1.8rem; }
.roles > div > div { margin: auto; text-align: justify;  }
.roles  .icon { float: none; text-align: center;  height: 50px; }

#cpl {  background: #5d9fb4; Xbackground: linear-gradient(to bottom,  #90cadd 0%,#67afc7 5%,#5d9fb4 95%,#4a7e8e 100%); }
#cpl:hover {  background: #64ADC4; Xbackground: linear-gradient(to bottom,  #90cadd 0%,#6EBAD4 5%,#65ABC2 95%,#4a7e8e 100%);  }

#sbo { background: #fec547; Xbackground: linear-gradient(to bottom,  #fcd98d 0%,#fec547 5%,#FAC85A 95%,#aa812f 100%); }
#sbo:hover { background: #FAC85A; Xbackground: linear-gradient(to bottom,  #fcd98d 0%,#FCCF6A 5%,#FCCA5B 95%,#aa812f 100%); }

#e { background: #a2cd4d; Xbackground: linear-gradient(to bottom,  #d4e5b3 0%,#a2cd4d 5%,#98c149 95%,#70912f 100%); }
#e:hover { background: #ABD45B; Xbackground: linear-gradient(to bottom,  #d4e5b3 0%,#ABD45B 5%,#A5C95F 95%,#70912f 100%); }

.roleCorp ul li
{
	list-style-image: url(images/blue_bullets.gif);
	margin-bottom: 6px;
}

#langSwitch { float: right; font-size: 75%; }

.bje { color: #6183BC; }
.roleLeadin { margin-bottom: 10px; }
.roleLeadin h1 { margin: 1em 0; }
.roleLeadin p { text-align: left; }
.roleEntre h1 { color: #a9cd5c; font-size: 28px; }
.roleEntre h2 { color: #a9cd5c; font-size: 20px; }
.roleImg { display: block; float: right; margin: 20px 0px 20px 10px; }
.roleEntre .roleImg { width: 100px; height: 174px; }

.roleFeat { clear: both; background-color: #f2f8db; margin: 0px; margin-bottom: 20px; position: relative; border-radius: 10px; display: flex; align-items: stretch; }
.roleFeat .menu { background-color: #a9cd5c; width: 200px; padding: 0px; font-size: 16px; padding-bottom: 95px; }
.roleFeat .menu .item { margin: 0 0; color: white; font-weight: bold; border-bottom: 1px solid #d3e56f; padding: 15px 10px; cursor: pointer; }
.roleFeat .roleFeatDisplay { padding: 25px; font-size: 92%; flex: 1; }
.roleFeat .roleFeatDisplay p { text-align: left; }
.featm { display: none; background-color: #f2f8db; }
.item:hover { background-color:  #9ab755;}
.item.selected { background-color: #d3e56f; }
#menuSpacer { border-bottom: 1px solid #d3e56f; height: 20px; }

.roleCorp h1 { color: #72b6cb; font-size: 28px; }
.roleCorp h2 { color: #72b6cb; font-size: 20px; }
.roleCorp .menu { background-color: #72b6cb; }
.roleCorp .item.selected { background-color: #b3ddec; }
div.roleCorp .item:hover { background-color: #429fbe;  }
.roleCorp .roleFeat { background-color: #eef9fe; }
.roleCorp .roleFeat { background-color: #eef9fe; }
.roleCorp .featm { background-color: #eef9fe; }  /* ie needs bg set explicitly here */
.roleCorp .menu .item { border-bottom: 1px solid #b3ddec;  }
.roleCorp #menuSpacer { border-bottom: 1px solid #b3ddec; }

.roleSBus h1 { color: #fdba40; font-size: 28px; }
.roleSBus h2 { color: #fdba40; font-size: 20px; }
.roleSBus .menu { background-color: #fdba40; }
.roleSBus .item.selected { background-color: #fedd72; }
div.roleSBus .item:hover { background-color: #f29f38; }
.roleSBus .roleFeat { background-color: #fff8d3; }
.roleSBus .featm { background-color: #fff8d3; }
.roleSBus .menu .item { border-bottom: 1px solid #fedd72;  }
.roleSBus #menuSpacer { border-bottom: 1px solid #fedd72; }
.roleSBus .roleImg { width: 220px; height: 301px; }
}

#ourCompanyInfo { padding: 10px 0 20px 0px; font-size: 70%; }
#ourstory { max-width: 1024px; margin: auto; padding: 0 10px; }

#ft { width: 100%; background-color: #444; position: fixed; bottom: 0; left: 0; color: white; padding: 7px; font-size: 75%; }
#ft a { color: white; text-decoration: none;}
#ft a:hover { color: #fedd72 }

.fieldError { color: red; min-height: 1em; }
.getStarted { position: absolute; bottom: 22px; left: 22px; }
.bigger { color: #808080; font-size: 120%; }
.cform { border-radius: 10px; padding: 20px; position: relative; margin-top: 20px;  }
.cform h1 { color: #606060; font-size: 14px; margin-bottom: 4px; }
.cform input, .cform textarea { width: 100%; border: 0; padding: 2px; border-radius: 4px; }
.roleFeat input[type="image"] { float: right; margin-top: 4px; }

.roleCorp .cform { border: 1px solid #72b6cb; }
.roleCorp .roleImg { width: 260px; height: 217px; }
.roleCorp #ferremail {  background-color: #eef9fe; }
.roleSBus .cform { border: 1px solid #fdba40; }
.roleSBus #ferremail {  background-color: #fff8d3; }
.roleEntre .cform { border: 1px solid #a9cd5c; }
.roleEntre #ferremail {  background-color: #f2f8db; }

.insetPage { max-width: 768px; margin: 0 auto; padding: 0 10px; }

.homeContent p { width: 100%; font-size: 17px; color: #505151; margin-bottom: 1em; line-height: 1.6; letter-spacing: 0.2px; }
.homeContent .leadLine { font-size: 1.3rem; color: $lightred; margin-top: 20px; letter-spacing: 0.9px; font-family: julius;  font-weight: bold;}
.homeContent .q { font-size: 30px; color: #a0a0a0; text-align: right; margin-bottom: 10px; letter-spacing: 1.5px; }

.homeContent.ja p {  }

input#curl { position: fixed; top: -100px; display: none; }

.info { background-color: #E6EFC2; color: #264409; border: 2px solid #C6D880; padding: 8px; text-align: center; }
.error { background-color: #FBE3E4; color: #8A1F11; border: 2px solid #FBC2C4; padding: 8px; text-align: center; }

.blogEntry .formContainer { padding: 0; }

#loginArea { float: right; }
#loginArea input
{
	border: 0;
	border-radius: 4px;
	background: $gray;
	color: white;
	padding: 0 4px;
	width: 60px;
	margin-right: 14px;
}

/*#loginArea input[type=submit]
{
	border: 1px solid lightgray;
}*/

.cd1 { width: 180px; float: left; clear: left; margin-left: 12px; }
.cd2 { font-weight: bold; float: left; }

.menu { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
#agileDiagram { width: 380px; display: block; max-width: 92%; margin: auto; border-radius: 100px; }

#emailForm { background: #FFF8D3; border-radius: 10px; margin-bottom: 20px; }
#emailForm input[type=image] { margin-left: 20px; }

/* used as part of the cssanim function in blue.js */
/* Note: was going to include "animation-fill-mode: forwards;" as part of .cssanim class, but that class is removed after animation, so I think its mute */
.cssanim  { animation-duration: 800ms; animation-timing-function: ease-in-out;}
body .fadeIn { animation-name: fadeIn; }
@keyframes fadeIn {from { opacity: 0; } to { opacity: 1; } }
body .fadeOut { animation-name: fadeOut; }
@keyframes fadeOut {from { opacity: 1; } to { opacity: 0; } }

.callout {
	max-width: 240px;
	float: right;
	font-size: 1.2rem;
	margin: 1em;
	margin-right: 0;
	padding: 1em;
	background: #f1f4f6;
	background: $bgColor2;
	border-radius: 5px;
	font-style: italic;
}

.red { color: red; font-size: 120%; }

.blogEntry
{
	font-size: 110%;
	line-height: 1.7;
	padding: 0;
}

h1.tc { font-size: 40px; margin-top: 1.5em; }

.subscribe .twitter { color: #529FDB; margin-left: 2em; }
.leadin { text-align: center; font-size: 130%;  }
.leadin.sub { font-size: 110%;  padding-top: 30px;}
.subscribe .title { font-size: 110%; padding: 4px; }
.subscribe #email { margin-right: 0; border-radius: 8px 0 0 8px; width: 140px; padding: 2px 10px; }
#emailsub-submit { border-radius: 0 8px 8px 0; padding: 2px 10px; }

.formFerr { color: red; }
.winset { background: white; padding: 10px; border-radius: 10px; }

.blogEntry h1,.blogEntry h2 { font-family: julius; }
.blogEntry h3 { font-family: mont; }

.blogEntry table
{
	width: 100%;
}

.blogEntry table tr:nth-of-type(even)
{
	background: rgba(0,0,50,0.05);
}

.blogEntry img.brc, .blogEntry video.brc { display: block; margin: 1em auto; border-radius: 10px;  }
video.brc { -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); }

.blogEntry .content { margin-top: 30px; max-width: 768px; margin: auto; }
.blogEntry .entryHead { margin: 2em auto; max-width: 768px; }
.blogEntry div[data-script] { margin: 1em 0; }

.tagline { display: inline-block; font-family: julius; }
.tagline div.small { line-height: 20px; color: gray; font-size: 55%; }
.subtagline { font-size: 85%; color: $gray; letter-spacing: 1px; margin: 0; font-family: julius; }

.blogEntryFooter > *
{
	max-width: 768px;
	margin-left: auto;
	margin-right: auto;
}

.blogEntryFooter .sig { border: 0; border-radius: 0; background: $veryLightGray; max-width: none; }
.blogEntryFooter .sig > div { max-width: 768px; margin: auto; }

#commentArea
{
	max-width: 768px;
	margin: auto;
}

blockquote p { margin: 0; } /* blockquotes already have margin - should this be blockquote p:last-child ? */

.entryDescription { padding: 1em; background: $veryLightGray; margin-bottom: 2em; }

.entryDescription > * { max-width: 768px; margin: auto; }

.entryDescription:before
{
	content: "Summary / tl;dr";
	font-size: 120%;
	display: block;
	color: #6d1a24;
	font-variant: small-caps;
	padding: 2px 6px;
	border-bottom: 1px solid #c0c0c0;
	margin: 0.5em auto;
	margin-bottom: .5em;
	max-width: 768px;
}

.formButtons input
{
	border: 0;
	background: $veryLightGray;
	border-radius: 4px;
}

.blogEntry .hljs
{
	box-shadow: inset 0px 0px 4px rgba(0,0,0,.1);
	background: #F8F5F0;
	font-size: 0.9rem;
	line-height: 1.2;
	tab-size: 4;
	border-radius: 4px;
}

#blogIndex { font-family: julius;   }
#blogIndex h2 { margin: 0; font-size: 1.2rem; font-weight: normal; }
#blogIndex h3 { }
#blogIndex h4 { font-weight: normal; font-weight: 14px; color: $gray; margin-top: 0; }
#blogIndex > div { margin: 1em; padding: 1em;}
.dateline { float: left; clear: left; font-size: 1.1rem; width: 3.8em;  text-align: center; margin: 0; margin: 8px 2rem 8px 0;  padding: .8rem; display: none;  }
.dateline .month { font-size: 0.8em; background: $blue; border-radius: 8px 8px 0 0 ; color: $lightgray; padding: 2px 0; }
.dateline .day { font-size: 0.6em; background: $lightgray; border-radius: 0 0 8px 8px; color: $blue; padding: 2px 0; }
.bloggerControls { float: left; background: none; }

.catdate .date { font-size: 16px; }
.row.noCollapse .column.grid6 { clear: none; float: left; width: 50%; } /* Allow a noCollapse row */

.zoomFromRight { animation: zoomFromRight 2s; animation-fill-mode: forwards; }
@keyframes zoomFromRight {from { opacity: 0; } to { opacity: 1; } }
.zoomToLeft { animation: zoomToLeft 2s; animation-fill-mode: forwards; }
@keyframes zoomToLeft {from { opacity: 1; } to { opacity: 0; } }

@media (max-width: 767px) {
	.blogEntry .content, .blogEntryFooter > * { margin-left: 10px; margin-right: 10px; }
	.blogEntry .entryHead { margin: 2em 10px; }
	.blogEntryFooter .sig { margin-left: 0; margin-right: 0; }
	.blogEntryFooter .sig .photo { float: none; text-align: center; }
	.blogEntryFooter .sig .profile { border-left: 0; border-top: 1px solid #ddd; width: auto; margin: 0.5em; text-align: center;  }
	img { max-width: 100%; }
	#compIndicator, .roles .icon,.desktopOnly  { display: none; }
	.newSection { padding-top: 10px; }
	#ourCompanyInfo { font-size: 60%; }
	.roleTop .roleImg { max-height: 140px; width: auto; margin: 20px; }

	.menu { display: none; }
	#bd .roleFeat { background: transparent; height: auto; }
	.roleFeat .roleFeatDisplay { margin: 0; padding: 0; }
	.roleFeat .featm { width: 100%; position: static; display: block; background: transparent; clear: both; height: auto; margin-top: 20px; }
	.roleCorp .cform { background-color: #eef9fe;}
	.roleSBus .cform { background-color: #fff8d3;}
	.roleEntre .cform { background-color: #f2f8db;}
	#compList { margin-bottom: 10px; }
	.insetPage { padding: 0 16px; }
}

@media (max-width: 635px) {
	#loginArea { display: none; }
}

@media (max-width: 440px) {
	h1 { font-size: 1.5rem; }
	h2 { font-size: 1.4rem; }
	h3 { font-size: 1.3rem; }

	#logoCont { text-align: center; }
	#ourCompanyInfo { font-size: 50%; }
	.cd1 { width: 100px; margin-left: 8px; }
	.roleTop .roleImg { float: none; margin: 20px auto;}
	h1.tc { font-size: 33px;}

	.callout { max-width: 180px; font-size: 1.0rem;	margin: 0.8em; }
}

.zoomin
{
	animation: zoomin 300ms forwards ease-in-out;
	backface-visibility: hidden;
	transform: translate3d(0, 0, 0);
	transform-style: preserve-3d;
}

@keyframes zoomin
{
	from {
			opacity: 0;
			transform: scale(0.9);
		}
}

.show { display: block; }

body .notification.show { bottom:  42px; }

.formEdit input[type='text'], .formEdit div[contenteditable] { border: 1px dotted #f0f0f0; }
*:focus { outline: none; } /* looks better when editing blog */

.button {
	box-shadow: none;
	background: $lightgray;
	color: $blackish;
	text-shadow: none;
	font-weight: normal;
}

.fullwidth { display: block; }
.centered { display: inline-block; margin: 1em auto; }

.articleLink
{
	position: fixed;
	font-size: 2rem;
	top: 0;
	left: 100vw;
	width: 100vh;
	background: rgba(0,0,0,0.05);
	color: $gray;
	transform: rotate(90deg);
	transform-origin: left top 0;
	padding: 0 2em;
	white-space: nowrap;
}

.articleLink a, .articleLink a:link,.articleLink a:visited, .articleLink a:active { color: rgba(231, 135, 127, 0.59); }

.prevArticleLink
{
	transform: rotate(270deg);
	left: 0;
	top: 100vh;
	transform-origin: left top 0;
}

@media (max-width: 899px) {
	.articleLink { display: none; }
}