*, *:before, *:after { box-sizing: border-box; }
* { margin: 0; padding: 0; font-family: "Universal Sans Display"; font-weight: 200; }

html, body { width: 100%; overflow: auto; }

h1, h2, h3, h4, h5, h6 { font-weight: 200; font-size: 2rem; margin: 15px 0 15px 0; }
a { color: #c00; cursor: pointer; font-weight: 400; }
a:hover { color: #f00; }

hr { margin: 25px 0 25px 0; border: 1px solid #ccc; }
button { cursor: pointer; padding: 5px 15px 5px 15px; text-transform: uppercase; background-color: transparent; border: 1px solid #eee; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05), 0 6px 20px 0 rgba(0, 0, 0, 0.009); }
textarea { width: 100%; }

ul {}
li { margin: 0 0 10px 0; }

.has-valigned { display: flex;  flex-direction: column; }
.is-valigned { flex: 1;  display: flex;  align-items: center; min-height: -moz-min-content; min-height: -webkit-min-content; min-height: min-content; }
.input:focus, .textarea:focus { border-color: #666; }

#response { width: 100%; overflow: scroll; }
.preformatted { padding: 25px; }
.background-spokes { background: #333 url(/images/login-spokes.jpg) no-repeat center center fixed; background: radial-gradient(transparent, hsl(0, 50%, 2%)), #333 url(/images/login-spokes.jpg) no-repeat center center fixed; background-size: cover; }
.corner-ribbon{ width: 200px; background: #cc0; position: absolute; top: 25px; left: -50px; text-align: center; line-height: 50px; letter-spacing: 1px; color: #fff; font-weight: bold; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); position: fixed; box-shadow: 0 0 3px rgba(0,0,0,.3); z-index: 2; }

.main { margin: 0 auto 50px auto; width: 980px; padding: 25px; }
.banner { height: 20px; background: #c00; }
.description { font-size: 0.75rem; }
.layout-header { padding: 7px; }

.header-topmargin { height: 10px; background: #c00; }
.header-flag { position: absolute; right: 40px; z-index: 1; }
.headernav {}
.headernav li { display: inline-block; background: #900; font-weight: bold; margin: 0 0 4px 0; }
.headernav li:hover { background: #c00; cursor: pointer; }
.headernav li a { color: #fff; font-weight: 500; padding: 10px 20px 10px 20px; display: block; }

.control.username, .control.phone { display: none; }

.locale-selector {  position: fixed; top: 0; bottom: 0; left: 0; right: 0; display: flex; align-items: center; min-height: -moz-min-content; min-height: -webkit-min-content; min-height: min-content;  -webkit-transition: opacity 0.15s ease-in-out; -moz-transition: opacity 0.15s ease-in-out; -ms-transition: opacity 0.15s ease-in-out; -o-transition: opacity 0.15s ease-in-out;  visibility: visible; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; opacity: 1; z-index: 1; }
.locale-selector .innerwrapper { width: 980px; margin: 0 auto 0 auto; background: #000; position: relative; }
.locale-selector iframe { width: 100%; height: 600px; margin: 0 auto 0 auto; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 px 20px 0 rgba(255, 255, 255, 0.1); z-index: 1111; overflow-y: scroll; -webkit-overflow-scrolling: touch; }
.closed {  opacity: 0; -webkit-transition: visibility 0s 0.15s, opacity 0.15s ease-in-out; -moz-transition: visibility 0s 0.15s, opacity 0.15s ease-in-out; -ms-transition: visibility 0s 0.15s, opacity 0.15s ease-in-out; -o-transition: visibility 0s 0.15s, opacity 0.15s ease-in-out; visibility: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; z-index: -1; }
.close-modal { display: inline-block; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url(/images/icons/close.svg); position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; }
.locale-selector-flag { position: relative; background-repeat: no-repeat; background-position: top left; background-size: contain; overflow: hidden; background-image: url(/images/i18n/flag-us.svg); display: inline-block; height: 12px; width: 18px; }
.locale-selector-flag span { visibility: hidden; }
.layout-footer { padding: 7px; position: fixed; bottom: 0; left: 0; right: 0; }

@media (max-width: 780px) {
  .header-flag {
		right: 10px;
		text-align: right;
  }
	.header-flag img {
		width: 75%;
	}
}