/* ====================================================
 * Company: Unity Technologies
 * Author:  Rickard Andersson, rickard@unity3d.com
 *
   TABLE OF CONTENTS
   1. Reset
   2. Typography
   3. Buttons
   4. Form elements
   5. Grid
   6. Core layout
   7. Header (layout, language switcher, login, hero, background)
   8. Navigation (1st, 2nd, 3rd)
   9. Footer
  10. UI (ui elements, breadcrums, paging, tabs, tooltips, messages)
  11. Layout elements (sidebar, bottombar)
  12. Colors & backgrounds
  13. Layout helpers
  14. Random elements
  15. Local typo
 *
======================================================= */

/****************************************
  ==== 1. RESET
****************************************/

html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,abbr,article,aside,command,details,figcaption,figure,footer,header,hgroup,mark,meter,nav,output,progress,section,summary,time,video { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,th,figcaption { font-size: 1em; font-weight: normal; font-style: normal; }
fieldset,iframe { border: none; } caption,th { text-align: left; } table { border-collapse: collapse; border-spacing: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, video, canvas { display: block; }
img, img a, img a:hover { border: 0; display: block; max-width: 100%; -ms-interpolation-mode: bicubic; }
object, embed, iframe { border: 0; display: block; max-width: 100%; }
::-moz-selection { background: #fff600; color: #222c37; text-shadow: none; }
::selection { background: #fff600; color: #222c37; text-shadow: none; }
.clear:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clear { display: inline-table; clear: both; }
/* Hides from IE-mac \*/ * html .clear { height: 1%; } .clear { display: block; } /* End hide from IE-mac */

/****************************************
  ==== 2. TYPOGRAPHY
****************************************/

@font-face {
  font-family: 'avalon';
  src: url('//unity3d.com/unity-fonts/Avalon-Book-webfont.eot');
  src: url('//unity3d.com/unity-fonts/Avalon-Book-webfont.eot?#iefix') format('embedded-opentype'),
       url('//unity3d.com/unity-fonts/Avalon-Book-webfont.woff') format('woff'),
       url('//unity3d.com/unity-fonts/Avalon-Book-webfont.ttf') format('truetype'),
       url('//unity3d.com/unity-fonts/Avalon-Book-webfont.svg#avalon') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'avalonbold';
  src: url('//unity3d.com/unity-fonts/Avalon-Bold-webfont.eot');
  src: url('//unity3d.com/unity-fonts/Avalon-Bold-webfont.eot?#iefix') format('embedded-opentype'),
       url('//unity3d.com/unity-fonts/Avalon-Bold-webfont.woff') format('woff'),
       url('//unity3d.com/unity-fonts/Avalon-Bold-webfont.ttf') format('truetype'),
       url('//unity3d.com/unity-fonts/Avalon-Bold-webfont.svg#avalonbold') format('svg');
  font-weight: normal;
  font-style: normal;
}

body { font: 16px/135% 'Open Sans',sans-serif; font-style: normal; font-weight: normal; color: #455463; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-font-smoothing: antialiased; }
h1 { font-size: 3em; line-height: 1em; color: #222c37; font-weight: normal; margin: 0 0 20px 0; text-transform: uppercase; font-family: 'avalonbold',sans-serif; }
h1.smaller { font-size: 2.25em; }
h2 { font-size: 1.6875em; line-height: 1.2em; color: #222c37; margin: 0 0 20px 0; font-family: 'avalonbold','Open Sans',sans-serif; text-transform: uppercase; }
h3 { font-size: 1.375em; line-height: 1.2em; margin: 0 0 15px 0; color: #222c37; font-family: 'avalon','Open Sans',sans-serif; }
h4 { font-size: 1.0625em; line-height: 1.3em; margin: 0 0 10px 0; color: #455463; font-weight: bold; }
h1.arrow { position: relative; }
h1.arrow:after { content: ''; display: block; width: 33px; height: 28px; margin: -15px 0 0 0; position: absolute; top: 50%; right: 0; z-index: 10; background: url(../images/assets/layout/core-sprites.png) -130px -135px no-repeat; }
h2.arrow, h3.arrow, h4.arrow { position: relative; }
h2.arrow:after, h3.arrow:after { content: ''; display: inline-block; width: 24px; height: 19px; margin: 0 0 0 10px; background: url(../images/assets/layout/core-sprites.png) -41px -77px no-repeat; -webkit-transition: margin .2s; -moz-transition: margin .2s; transition: margin .2s; }
h3.arrow:after { margin: 0 0 -3px 10px; }
h4.arrow:after { content: ''; display: inline-block; width: 16px; height: 14px; margin: 0 0 0 10px; background: url(../images/assets/layout/core-sprites.png) -92px -121px no-repeat; -webkit-transition: margin .2s; -moz-transition: margin .2s; transition: margin .2s; }
a:hover h2.arrow:after { margin: 0 0 0 15px; }
h3 small { font-size: 0.675em; line-height: 2em; margin: 0; display: block; }
.avalon { font-family: 'avalon','Open Sans',sans-serif; }
.avalonbold { font-family: 'avalonbold','Open Sans',sans-serif; }

p { font-size: 0.9375em; line-height: 1.5em; margin: 0 0 15px 0; word-break: break-word; }
small { font-size: 0.8125em; line-height: 1.3em; margin: 0 0 10px 0; display: block; }
.figcap { font-size: 0.9375em; color: #99a0a7; }

ul.l { list-style-type: none; margin: 0 0 15px 0; }
ul.l li { padding: 0 0 4px 20px; background: none; position: relative; font-size: 0.9375em; }
ul.l li:before { content: "\2022"; font-size: 1.75em; position: absolute; top: 1px; left: 0; color: #455463; }
ul.l ul { list-style-type: none; padding: 6px 0 0 0; }
ul.l ul li { font-size: 1em; }
ol { padding: 0 0 0 23px; margin: 0 0 15px 0; list-style-type: decimal; }
ol li { padding: 0 0 4px 0; font-size: 0.9375em; }
ol li ol { padding: 6px 0 0 23px; margin: 0; }
ol li ol li {font-size: 1em !important;}
ol.roman { list-style-type: lower-roman; }
ol.alpha { list-style-type:lower-alpha; }
ol ul { list-style-type: none; padding: 6px 0 0 0; margin: 0; }
ol ul li { padding: 0 0 4px 20px; background: none; position: relative; font-size: 0.9375em; }
ol ul li:before { content: "\2022"; font-size: 2.125em; position: absolute; top: 0; left: 0; color: #455463; }
ul.l ol { padding: 6px 0 0 23px; margin: 0; }
ul.l ol li { padding: 0 0 4px 0; }
ul.l ol li:before { display: none; }
ul.checkmarks { list-style-type: none; margin: 0 0 15px 0; }
ul.checkmarks li { padding: 0 0 0 25px; margin: 0 0 10px 0; font-size: 0.9375em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: url(../images/assets/icons/check-green.png) 0 3px no-repeat; }

a { color: #ff0066; text-decoration: underline; outline: none; cursor: pointer; }
a:hover { color: #ff0066; text-decoration: none; outline: none; }
a:focus { color: #ff0066; text-decoration: none; outline: none; }
a:active { color: #222c37; text-decoration: none; outline: none; }
a.more:after {content: " \BB";}
a.tdn { text-decoration: none; }
a.tdn:hover { text-decoration: none; }

pre { padding: 25px; font-size: 0.9375em; margin: 0 0 15px 0; overflow: auto; background: #f0f0f0; }
blockquote { padding: 25px; margin: 0 0 15px 0; background: #e4eaed; position: relative; }
blockquote:before { content: "\0022"; display: block; position: absolute; bottom: 0; right: 10px; z-index: 1; font-size: 15em; height: 1px; color: rgba(255,255,255,0.5); }
blockquote p { position: relative; z-index: 2; }

/****************************************
  ==== 3. BUTTONS
****************************************/

.blue-btn, .gray-btn { line-height: 20px; display: block; float: left; padding: 11px 20px; color: #fff; font-size: 0.8125em; text-align: center; cursor: pointer; text-decoration: none; border: 0; font-family: 'avalonbold','Open Sans',sans-serif; text-transform: uppercase; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
input.blue-btn, input.gray-btn { padding: 11px 20px; border: 0; outline: 0; border-image-width: 0; }

.blue-btn { background-color: #00cccc; }
.blue-btn:hover, .blue-btn:focus { color: #fff; background-color: #00cccc; }
.blue-btn:active { color: #fff; background-color: #00c1c2; }

.gray-btn { background-color: #222c37; }
.gray-btn:hover, .gray-btn:focus { color: #fff; background-color: #222c37; }
.gray-btn:active { color: #fff; background-color: #2c3640; }

.bbtn { padding: 15px 40px !important; font-size: 1.0em; }
.sbtn { padding: 5px 15px !important; font-size: 0.8125em; }
.dbtn, .dbtn:hover, .dbtn:focus, .dbtn:active { cursor: default; background-color: #ccc; color: #f0f0f0; }
.textbtn { height: 21px; line-height: 21px; background: none; float: none; display: inline; text-shadow: none; text-decoration: underline; color: #ff0066; padding: 0 !important; font-size: 0.875em; }
.textbtn:hover { background: none; text-decoration: none; color: #ff0066; }
.centerbtn { float: none; display: inline-block; margin: 0; }

.playbtn { padding: 15px 25px 15px 54px !important; background: url(../images/assets/layout/core-sprites.png) -374px -63px no-repeat; }

/****************************************
  ==== 4. FORM ELEMENTS
****************************************/

/* The basics */
input, select, textarea { font-family: 'Open Sans',sans-serif; outline: none; margin: 0 0 20px 0; -webkit-appearance: none; }
button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner { padding: 0px; }
input[type="text"], input[type="tel"], input[type="email"], input[type="url"], input[type="password"], select, textarea { width: 100%; font-size: 0.9375em; display: block; outline-width: 0; border: #00cccc 1px solid; line-height: 18px; padding: 10px 13px; color: #455463 !important; resize: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
input[type="text"]:focus, input[type="tel"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, select:focus, textarea:focus { border-color: #455463 !important; }
textarea { height: 150px; }
label { display: inline-block; font-size: 0.9375em; margin: 0 0 7px 0; font-weight: bold; cursor: pointer; text-transform: uppercase; }
label span.r { color: #00cccc; }
.label span { font-weight: normal; font-size: 0.75em; float: right; color: #99a0a7; }

/* Fancy select plugin */
div.fancy-select { position: relative; }
div.fancy-select.disabled { opacity: 0.5; }
div.fancy-select select:focus + div.trigger, div.fancy-select select:focus + div.trigger.open, div.fancy-select div.trigger.open { border-color: #455463; }
div.fancy-select div.trigger { width: 100%; padding: 10px 15px 9px 13px; position: relative; margin: 0 0 15px 0; color: #455463; font-size: 0.9375em; white-space: nowrap; text-overflow: ellipsis; border: 1px solid #00cccc; background: #fff; cursor: pointer; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
div.fancy-select div.trigger:after { content: ""; width: 19px; height: 42px; display: block; position: absolute; top: 0; right: 41px; z-index: 8;}
div.fancy-select div.trigger:before { content: ""; width: 42px; height: 42px; display: block; position: absolute; top: -1px; right: -1px; z-index: 9; -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; background: #222c37 url(../images/assets/layout/core-sprites.png) 16px -158px no-repeat; }
div.fancy-select div.trigger.open:before { -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); transform: rotateX(180deg); }
div.fancy-select div.trigger.error:after { width: 30px; background: url(../images/assets/icons/error-red.png) 6px 13px no-repeat; }
div.fancy-select div.trigger.ok:after { width: 30px; background: url(../images/assets/icons/check-green.png) 6px 13px no-repeat; }
div.fancy-select div.trigger.warning:after { width: 30px; background: url(../images/assets/icons/warning-orange.png) 6px 12px no-repeat; }
div.fancy-select ul.options { width: 100%; max-height: 300px; list-style: none; overflow: auto; visibility: hidden; opacity: 0; padding: 10px 0 9px 0; background: #222c37; position: absolute; top: 50px; left: 0; z-index: 1003; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: #222c37 1px solid; }
div.fancy-select ul.options.open { visibility: visible; opacity: 1; }
div.fancy-select ul.options.overflowing { top: auto; bottom: 40px; }
div.fancy-select ul.options.overflowing.open { top: auto; bottom: 50px; }
div.fancy-select ul.options li { cursor: pointer; font-size: 0.9375em; margin: 0 10px 1px 10px; display: block; padding: 5px 13px; color: #fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
div.fancy-select ul.options li a { display: block; color: #fff; text-decoration: none; }
div.fancy-select ul.options li:hover { background: #00cccc; background: rgba(0,204,204,0.1); color: #fff; text-decoration: none; }
div.fancy-select ul.options li.hover { background: #00cccc; background: rgba(0,204,204,0.3); color: #fff; text-decoration: none; }
div.fancy-select ul.options li.selected { background: #00cccc; color: #fff; text-decoration: none; }

/* Custom select */
div.select-box div.trigger { width: 100%; padding: 10px 50px 9px 13px; position: relative; color: #455463; font-size: 0.9375em; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; border: #00cccc 1px solid; background: #fff; cursor: pointer; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
div.select-box div.trigger:before { content: ""; width: 42px; height: 42px; display: block; position: absolute; top: -1px; right: -1px; z-index: 9; -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; background: #222c37 url(../images/assets/layout/core-sprites.png) 16px -158px no-repeat; }
div.select-box div.trigger.open:before { -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); transform: rotateX(180deg); }
div.select-box ul.options { width: 100%; max-height: 300px; list-style: none; overflow: auto; visibility: hidden; opacity: 0; background: #222c37; padding: 10px 0 9px 0; position: absolute; top: 50px; left: 0; z-index: 1003; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: #222c37 1px solid; }
div.select-box ul.options.open { visibility: visible; opacity: 1; }
div.select-box ul.options li { color: #fff; cursor: pointer; font-size: 0.9375em; margin: 0 10px 1px 10px; }
div.select-box ul.options li a { display: block; padding: 5px 13px; color: #fff; text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
div.select-box ul.options li a:hover, div.select-box ul.options li.selected a { background: #00cccc; color: #fff; text-decoration: none; }
div.select-box.small div.trigger { width: 100%; min-width: 90px; height: 30px; line-height: 30px; padding: 0 30px 0 10px; font-size: 0.875em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
div.select-box.small div.trigger:before { width: 26px; height: 30px; top: -1px; right: -1px; background: #222c37 url(../images/assets/layout/core-sprites.png) 8px -164px no-repeat; }
div.select-box.small ul.options { width: auto; min-width: 90px; top: 32px; }
div.select-box.small ul.options li { font-size: 0.875em; }
div.select-box.small ul.options li a { padding: 4px 10px; }

div.select-box.light div.trigger { border: #e6e6e6 1px solid; }
div.select-box.light div.trigger:before { display: none; }
div.select-box div.trigger:after { content: ""; display: block; position: absolute; top: 18px; right: 16px; z-index: 9; border: transparent 4px solid; border-top-color: #222c37; }
div.select-box div.trigger.open:after { top: 14px; border: transparent 4px solid; border-bottom-color: #222c37; }
div.select-box ul.options { width: 300px; background: #222c37; }

/* Radio buttons */
.radiobtn label { display: inline-block; cursor: pointer; position: relative; padding: 0 0 0 27px; margin: 0; font-size: 0.9375em; font-weight: normal; line-height: 20px; text-transform: none; }
.radiobtn input[type=radio] { display: none; }
.radiobtn label:before { content: ""; display: inline-block; width: 18px; height: 18px; border: #00cccc 1px solid; position: absolute; left: 0; top: 0; background-color: #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }
.radiobtn label:hover:after, .radiobtn input[type=radio]:checked + label:after { content: ""; display: block; width: 10px; height: 10px; position: absolute; left: 5px; top: 5px; background-color: #00cccc; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; opacity: 1; }
.radiobtn label:hover:after { opacity: 0.25; }

/* Checkboxes */
.checkbox { position: relative; }
.checkbox label { display: inline-block; cursor: pointer; position: relative; padding: 0 0 0 28px; margin: 0; font-size: 0.9375em; font-weight: normal; line-height: 20px; text-transform: none; }
.checkbox input[type=checkbox] { display: none; }
.checkbox label:before { content: ""; display: inline-block; width: 18px; height: 18px; border: #00cccc 1px solid; position: absolute; left: 0; top: 0; background-color: #fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.checkbox input[type=checkbox]:checked + label:after { content: ""; display: block; width: 20px; height: 20px; position: absolute; left: 0; top: 0; background: #00cccc url(../images/assets/layout/core-sprites.png) 4px -227px no-repeat !important; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.checkbox.error:before { content: ""; display: block; width: 20px; height: 20px; position: absolute; left: 25px; top: 1px; background: url(../images/assets/icons/error-red.png) 2px 4px no-repeat; }
.checkbox.error label { padding: 0 0 0 50px; }

/* File */
.field-file { width: 100%; padding: 0 0 40px 0; position: relative; }
.field-file input[type=file] { width: 100%; height: 42px; margin: 0; opacity: 0; filter: alpha(opacity=0); position: absolute; left: 0; top: 0; z-index: 5; cursor: pointer; }
.field-file .file-input { width: 100%; height: 42px; line-height: 42px; padding: 0 13px; font-size: 0.9375em; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; background: #fff; border: #ccc 1px solid; color: #455463; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.field-file input[type=file]:hover + .file-input { border-color: #bbb; }
.field-file .file-btn { height: 42px; line-height: 42px; padding: 0 20px; color: #fff; font-size: 0.9375em; font-weight: 300; background: #222c37; position: absolute; right: 0; top: 0; z-index: 4; cursor: pointer; -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; }
.field-file .file-input.ok { padding: 0 13px 0 38px; }
.field-file .file-input.ok:after { content: ''; display: block; width: 28px; height: 40px; position: absolute; top: 1px; left: 12px; background: #fff url(../images/assets/icons/check-green.png) right 12px no-repeat; }
.field-file .file-input.error { padding: 0 13px 0 38px; }
.field-file .file-input.error:after { content: ''; display: block; width: 28px; height: 40px; position: absolute; top: 1px; left: 12px; z-index: 6; background: #fff url(../images/assets/icons/error-red.png) right 12px no-repeat; }
.field-file input.form-submit { padding: 5px 15px !important; margin: 0 !important; color: #fff; font-size: 0.8125em !important; background: #00cccc !important; text-align: center; cursor: pointer; text-decoration: none; border: 0; font-family: 'avalonbold','Open Sans',sans-serif; text-transform: uppercase; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; position: absolute; top: 52px; left: 0px; }

/* States */
input[type="text"].ok, input[type="tel"].ok, input[type="email"].ok, input[type="password"].ok, textarea.ok { padding: 10px 45px 10px 13px; background: #fff url(../images/assets/icons/check-green.png) right 13px no-repeat; }
input[type="text"].error, input[type="tel"].error, input[type="email"].error, input[type="password"].error, textarea.error { padding: 10px 45px 10px 13px; margin: 0 0 5px 0; background: #fff url(../images/assets/icons/error-red.png) right 13px no-repeat; }
input[type="text"].warning, input[type="tel"].warning, input[type="email"].warning, input[type="password"].warning, textarea.warning { padding: 10px 45px 10px 13px; margin: 0 0 5px 0; background: #fff url(../images/assets/icons/warning-orange.png) right 12px no-repeat; }
input.help, select.help, textarea.help { margin: 0 0 5px 0; }
p.error { font-size: 0.8125em; color: #d10000; margin: 5px 0 0 0; }
p.warning { font-size: 0.8125em; color: #d58700; }
p.help { font-size: 0.8125em; color: #99a0a7; }
label.error { color: #d10000 !important; }
.success { background: #ebffce !important; }

/****************************************
  ==== 5. GRID
****************************************/

.gw { width: 100%; max-width: 1200px; margin: 0 auto; }
.g1,.g2,.g1-5,.g3,.g4,.g5,.g6,.g7,.g8,.g9,.g10,.g11,.g12 { padding: 20px; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.g1 { width: 8.33333333333% }
.g2 { width: 16.6666666667% }
.g1-5 { width: 20% }
.g3 { width: 25% }
.g4 { width: 33.3333333334% }
.g5 { width: 41.6666666667% }
.g6 { width: 50% }
.g7 { width: 58.3333333333% }
.g8 { width: 66.6666666667% }
.g9 { width: 75% }
.g10 { width: 83.333333333% }
.g11 { width: 91.666666667% }
.g12 { width: 100% }
.nest { padding: 0 !important; }
.g-center { float: none; margin: 0 auto; }

/****************************************
  ==== 6. CORE LAYOUT
****************************************/

html, body { height: 100%; }
body { text-align: center; background: #fff; }
div#master-wrapper { width: 100%; height: 100%; margin: 0 auto; text-align: center; }
div.page { min-height: 100%; position: relative; overflow: hidden; }
section.section-content { width: 100%; min-height: 100%; }
section.content-wrapper { width: 100%; max-width: 1240px; text-align: left; padding: 30px 20px 100px 20px; margin: 0 auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/****************************************
  ==== 7. HEADER
****************************************/

/* Layout */
header.section-header { width: 100%; height: 110px; margin: 0 auto 15px auto; position: relative; z-index: 10; }
header.section-header div.wrap { width: 100%; max-width: 1240px; padding: 0 40px; margin: 0 auto; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
header.section-header div.shard { width: 100%; height: 70px; position: absolute; z-index: 15; right: 100%; top: 0; margin: 0 -161px 0 0; }
header.section-header div.shard:before { content: ''; width: 562px; height: 140px; display: block; position: absolute; right: 0; background: url(../images/assets/layout/shard.png) 0 0 no-repeat; }
header.section-header div.logo { width: 88px; height: 32px; float: left; position: relative; z-index: 16; margin: 30px 0 0 0; background: url(../images/assets/layout/core-sprites.png) 0 0 no-repeat; }
header.section-header div.logo a { width: 88px; height: 32px; display: block; }
header.section-header div.top-fill { width: 100%; height: 70px; overflow: hidden; position: absolute; top: 0; left: 0; }
header.section-header div.top-fill div.fill { width: 200%; height: 70px; background: rgba(34,44,55,0.9); position: absolute; z-index: 14; left: 100px; top: 0; }

/* Search */
nav.top-nav div.search-wrapper { width: 0px; height: 50px; overflow: hidden; background: #fff; position: absolute; top: 10px; right: 40px; z-index: 17; -webkit-transition: width 0.15s; -moz-transition: width 0.15s; transition: width 0.15s; }
nav.top-nav div.search-wrapper .g-search-icon { background: #222c37 url(../images/assets/layout/core-sprites.png) -187px 9px no-repeat !important; }
nav.top-nav div.search-expanded { width: 435px; }
nav.top-nav div.gsc-control-searchbox-only { padding: 0 8px 0 0 !important; }
nav.top-nav div.gsc-control-cse, nav.top-nav form.gsc-search-box, nav.top-nav table.gsc-search-box, nav.top-nav td.gsc-input, nav.top-nav td.gsib_a { padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; }
nav.top-nav div.gsc-input-box { font: 16px/135% 'Open Sans',sans-serif !important; background: #fff; height: 49px; border: 0; border: 0 !important; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
nav.top-nav input.gsc-input { width: 98% !important; height: 53px !important; font-size: 0.9375em !important; text-indent: 15px; padding: 0 !important; margin: 0 !important; border: none; background: #fff none 0 0 no-repeat !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; }
nav.top-nav input.gsc-search-button { margin: 7px 0 0 7px !important; padding: 11px 11px 12px 11px !important; outline: none; border: 0 !important; background: #222c37 !important; -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; }
nav.top-nav div.gsc-clear-button { display: none; } a.gsst_a { padding: 0 5px !important; } span.gscb_a { line-height: 34px; color: #99a0a7 !important; } td.gssb_e { -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; }
nav.top-nav table.gsc-completion-container { border: #e6e6e6 1px solid !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; font-size: 0.9375em; } table.gstl_50, table.gssb_c { z-index: 9999 !important; }
nav.top-nav .gsc-completion-container { font-family: 'Open Sans',sans-serif !important; }

/* User menu */
nav.top-nav div.user-wrapper { width: 300px; height: 0; overflow: hidden; background: #fff; text-align: left; position: absolute; top: 65px; right: 40px; z-index: 17; -webkit-box-shadow: 0 1px 20px rgba(34,44,55,0.3); -moz-box-shadow: 0 1px 20px rgba(34,44,55,0.3); box-shadow: 0 1px 20px rgba(34,44,55,0.3); }
nav.top-nav div.user-expanded { height: auto; overflow: visible; border-top: #29e5b7 5px solid; }
nav.top-nav div.user-expanded:before { content: ''; display: block; position: absolute; top: -20px; right: 37px; border: transparent 8px solid; border-bottom-color: #29e5b7;  }
nav.top-nav div.user-wrapper .content { padding: 15px; }
nav.top-nav div.user-wrapper h2 { font-size: 1.125em; border-bottom: #e6e6e6 1px solid; padding: 0 0 10px 0; margin: 0 0 15px 0; }
nav.top-nav div.user-wrapper h2 .nb { font-family: 'avalon','Open Sans',sans-serif; }

/* Mobile */
header.m-header, nav.mobile-menu, div.m-shard { display: none; }

/* Other */
div.background { width: 100%; position: absolute; top: 0; left: 0; z-index: -1; background: 50% 0 no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
div.hero { width: 100%; margin: 0 auto; text-align: left; }

/****************************************
  ==== 8. NAVIGATION
****************************************/

/* 1st level */
nav.top-nav { width: 100%; height: 70px; }
nav.top-nav ul { list-style-type: none; padding: 0 71px 0 125px; position: relative; z-index: 16; }
nav.top-nav ul li { height: 70px; float: left; }
nav.top-nav ul li a { height: 70px; line-height: 90px; float: left; margin: 0 15px; text-decoration: none; color: #fff; font-size: 1em; font-family: 'avalon','Open Sans',sans-serif; }
nav.top-nav ul li a:hover { color: #fff; text-decoration: underline; }
nav.top-nav ul li a.active-trail { position: relative; font-family: 'avalonbold','Open Sans',sans-serif; line-height: 92px; color: #00cccc; }
nav.top-nav ul li a.active-trail:after { content: ''; display: block; width: 100%; height: 1px; position: absolute; bottom: 17px; left: 0; background: #00cccc; }
nav.top-nav ul li.first { margin: 0 1px 0 0; display: none; }
nav.top-nav ul li.last, nav.top-nav ul li.menu-365, nav.top-nav ul li.menu-368, nav.top-nav ul li.menu-858, nav.top-nav ul li.menu-901, nav.top-nav ul li.menu-366, nav.top-nav ul li.menu-954, nav.top-nav ul li.menu-547, nav.top-nav ul li.menu-916, nav.top-nav ul li.menu-1110 { float: right; }
nav.top-nav div.search-icon { width: 30px; height: 70px; position: absolute; top: 0; right: 40px; z-index: 16; cursor: pointer; background: url(../images/assets/layout/core-sprites.png) -189px 36px no-repeat; }
nav.top-nav div.user-icon { width: 30px; height: 70px; position: absolute; top: 0; right: 70px; z-index: 16; cursor: pointer; background: url(../images/assets/layout/core-sprites.png) -237px 36px no-repeat; }
nav.top-nav div.close-icon { right: 10px; background: url(../images/assets/layout/core-sprites.png) -284px 10px no-repeat; }

/* 2nd level */
nav.sub-nav { width: 100%; overflow: hidden; }
nav.sub-nav div.sub-fill { width: 200%; height: 34px; background: rgba(0,204,204,0.9); position: absolute; z-index: 14; left: 100px; top: 0; }
nav.sub-nav ul { list-style-type: none; height: 34px; padding: 0 0 0 140px; position: relative; z-index: 16; }
nav.sub-nav ul li { float: left; font-family: 'avalon','Open Sans',sans-serif; letter-spacing: 0.4px; }
nav.sub-nav ul li a { height: 34px; line-height: 34px; margin: 0 20px 0 0; display: block; float: left; color: #222c37; text-decoration: none; font-size: 0.875em; }
nav.sub-nav ul li a:hover, nav.sub-nav ul li a.active-trail { text-decoration: underline; color: #222c37; }
nav.sub-nav ul li.more a { padding: 0 12px 0 0; margin: 0; }
nav.sub-nav ul li.more a:after { content: ""; display: block; position: absolute; top: 15px; right: 0; font-size: 0; line-height: 0%; width: 0px; border: transparent 4px solid; border-top-color: #fff; }
nav.sub-nav ul li.open a:after { top: 10px; border: transparent 4px solid; border-top-color: transparent; border-bottom-color: #fff; }
body.i18n-ja .menu-629 { display: none !important; }

.section-header .subnav-dropdown { background: #fff; position: absolute; top: 104px; left: -9999em; z-index: 20; text-align: left; border-top: #222c37 5px solid; -webkit-box-shadow: 0 1px 20px rgba(34,44,55,0.3); -moz-box-shadow: 0 1px 20px rgba(34,44,55,0.3); box-shadow: 0 1px 20px rgba(34,44,55,0.3); }
.section-header .subnav-dropdown:before { content: ""; display: block; position: absolute; top: -20px; left: 50%; font-size: 0px; line-height: 0%; width: 0; margin: 0 0 0 -5px; border: transparent 8px solid; border-bottom-color: #222c37; }
.section-header .subnav-dropdown ul { list-style: none;  }
.section-header .subnav-dropdown ul li a { display: block; color: #455463; padding: 5px 10px; border-bottom: #e6e6e6 1px solid; font-size: 0.875em; font-family: 'avalon','Open Sans',sans-serif; text-decoration: none; }
.section-header .subnav-dropdown ul li a:hover { text-decoration: underline; }
.section-header .subnav-dropdown ul li:last-child a { border-bottom: 0; }

/* 3rd level */
nav.tertiary-nav { width: 100%; max-width: 1240px; height: 60px; margin: 0 auto; position: relative; }
nav.tertiary-nav div.g12 { padding: 25px 20px 0 20px; }
nav.tertiary-nav div.wrap { background: #f0f0f0; margin: 0 20px; position: relative; }
nav.tertiary-nav ul { list-style-type: none; }
nav.tertiary-nav ul.hidden { visibility: hidden; position: absolute; top: -9999em; }
nav.tertiary-nav ul.tabbed li { float: left; border-right: #fff 1px solid; }
nav.tertiary-nav ul.tabbed li a { height: 40px; line-height: 40px; padding: 0 20px; display: block; float: left; color: #455463; text-decoration: none; font-size: 0.875em; background: #f0f0f0; }
nav.tertiary-nav ul.tabbed li a:hover, nav.tertiary-nav ul.tabbed li a.active-trail, nav.tertiary-nav ul.tabbed li a.active-trail:hover { background: #222c37; color: #fff; text-decoration: none; }
nav.tertiary-nav h2, nav.tertiary-nav .top { display: none; }

/* 3rd level stuck */
nav.navstuck div.g12 { width: 100%; height: 50px; background: #222c37; padding: 0; position: fixed; top: 0; left: 0; z-index: 1003; }
nav.navstuck div.wrap { width: 100%; max-width: 1240px; background: transparent; margin: 0 auto; }
nav.navstuck h2 { display: block; line-height: 50px; float: left; color: #fff; padding: 0 0 0 40px; font-size: 1.375em; }
nav.navstuck ul.tabbed { float: right; margin: 0 40px 0 0; }
nav.navstuck ul.tabbed li { border: 0; }
nav.navstuck ul.tabbed li a { height: 50px; line-height: 50px; padding: 0 13px; font-size: 0.875em; background: transparent; color: #fff; }
nav.navstuck ul.tabbed li a:hover { background: #222c37; }
nav.navstuck ul.tabbed li a.active-trail, nav.navstuck ul.tabbed li a.active-trail:hover { background: #00cccc; }

/* 3rd level dropdown */
nav.tertiary-nav div.dropdown-lbl { width: 100%; line-height: 40px; position: relative; font-size: 0.9375em; padding: 0 15px; cursor: pointer; border: #e6e6e6 1px solid; background: #fff; text-align: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
nav.tertiary-nav div.dropdown-lbl:after { content: ""; display: block; width: 42px; height: 42px; position: absolute; top: -1px; right: -1px; background: #222c37 url(../images/assets/layout/core-sprites.png) 16px -158px no-repeat; -webkit-transition: -webkit-transform 300ms ease; -moz-transition: -moz-transform 500ms ease; -ms-transition: -ms-transform 500ms ease; transition: transform 300ms ease; -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; }
nav.tertiary-nav div.dropdown-lbl:hover { border-color: #bbb; }

nav.tertiary-nav ul.dropdown { width: 100%; max-height: 200px; list-style: none; overflow: auto; display: none; position: absolute; top: 44px; left: 0; z-index: 50; background: #fff; border: #e6e6e6 1px solid; text-align: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
nav.tertiary-nav ul.dropdown li a { display: block; padding: 7px 15px; color: #555; cursor: pointer; border-bottom: #e6e6e6 1px solid; font-size: 0.875em; }
nav.tertiary-nav ul.dropdown li a:hover { background: #f0f0f0; }
nav.tertiary-nav ul.dropdown li a.active-trail, nav.tertiary-nav ul.dropdown li a.active-trail:hover { background: #f0f0f0; }

/****************************************
  ==== 9. FOOTER
****************************************/

.footer-shards { width: 100%; position: absolute; bottom: 0; right: 0; z-index: -1; }
.no-csstransforms .footer-shards { height: 579px; background: url(../images/assets/layout/footer-shards.png) right 0 no-repeat; }
.csstransforms .footer-shards div.colored { width: 200px; height: 200px; position: absolute; bottom: -140px; right: -35px; z-index: 12; background: #29e5b7; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
.csstransforms .footer-shards div.dark { width: 2000px; height: 2000px; position: absolute; bottom: -899px; right: -2349px; z-index: 12; background: #222c37; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
.csstransforms .footer-shards div.light { width: 6000px; height: 1200px; position: absolute; bottom: -362px; right: -105px; z-index: 12; background: #f0f0f0; -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg); }

footer { width: 100%; min-height: 1px; position: absolute; bottom: 0; left: 0; }
footer div.primary { width: 100%; }
footer div.wrap { max-width: 1240px; margin: 0 auto; text-align: left; padding: 0 20px; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

footer h3 { color: #222c37; font-size: 1.25em; font-family: 'avalonbold','Open Sans',sans-serif; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
footer p { font-size: 0.875em; margin: 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
footer p a { color: #455463; text-decoration: none; }
footer p a:hover { color: #455463; text-decoration: underline; }

footer div.newsletter label { font-size: 0.8125em; }
footer div.newsletter input.email { border-color: #455463; }
footer div.newsletter input.blue-btn { width: 33px; height: 38px; position: absolute; top: 1px; right: 1px; text-indent: -9999em; padding: 0; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background: #fff url(../images/assets/layout/core-sprites.png) 0 -64px no-repeat; }
footer div.newsletter .checkbox label:before { border: #455463 1px solid; }
footer div.newsletter .checkbox input[type=checkbox]:checked + label:after { background-color: #455463 !important; }
footer div.newsletter div.loading { width: 60px; height: 12px; margin: 0; top: 0; left: 0; }
footer div.newsletter div.loading div { width: 12px; height: 12px; background-color: #29e5b7; }
footer div.newsletter div.success, footer div.newsletter div.failed { width: 100%; position: absolute; top: 0; left: 0; background: none !important; }
footer div.newsletter div.success h3, footer div.newsletter div.failed h3 { font-family: 'avalon','Open Sans',sans-serif; text-transform: none; }
footer div.newsletter div.success p, footer div.newsletter div.failed p { text-overflow: none; white-space: normal; overflow: visible; }

footer div.partner { float: left; margin: 0 20px 10px 0; }
footer div.partner a    { height: 26px; display: block; background: url(../images/assets/layout/partners-sprite.png) 0 0 no-repeat; }
footer div.microsoft a  { width: 93px; background-position: 0 0; }
footer div.sony a       { width: 77px; background-position: -93px 0; }
footer div.qualcomm a   { width: 94px; background-position: -170px 0; }
footer div.blackberry a { width: 115px; background-position: -264px 0; }
footer div.samsung a    { width: 75px; background-position: -379px 0; }
footer div.nintendo a   { width: 89px; background-position: -454px 0; }
footer div.intel a      { width: 41px; height: 38px; background-position: -543px 0; }
footer div.oculus a     { width: 85px; background-position: -584px 0; }

footer div.social a.icon { width: 24px; height: 24px; float: left; margin: 0 5px 0 0; display: block; text-indent: -9999em; background: url(../images/assets/layout/core-sprites.png) 50% 0 no-repeat; }
footer div.social a.facebook { background-position: 0 -376px; }
footer div.social a.twitter { background-position: -24px -376px; }
footer div.social a.googleplus { background-position: -48px -376px; }
footer div.social a.linkedin { background-position: -72px -376px; }
footer div.social a.youtube { background-position: -96px -376px; }

footer div.lang { background: url(../images/assets/layout/world-small.png) right bottom no-repeat; }
footer div.lang ul { list-style: none; }
footer div.lang ul li { width: 33.333333333334%; display: block; float: left; font-size: 0.875em; margin: 0 0 2px 0; }
footer div.lang ul a { color: #455463; }

footer div.copy p { line-height: 18px; float: left; margin: 0 20px 0 0; font-size: 0.8125em; color: #455463; }
footer div.copy ul { list-style-type: none; float: left; }
footer div.copy ul li { float: left; line-height: 18px; margin: 0 10px 0 0; font-size: 0.8125em; }
footer div.copy ul li a { color: #455463; }

/****************************************
  ==== 10. UI
****************************************/

/* Breadcrums */
div.breadcrumbs ul { list-style: none; }
div.breadcrumbs ul li { float: left; margin: 0 25px 0 0; padding: 0 0 0 0; font-size: 0.875em; position: relative; }
div.breadcrumbs ul li:after { content: '/'; display: block; position: absolute; top: 0; right: -15px; color: #99a0a7; }
div.breadcrumbs ul li:last-child:after { display: none; }
div.breadcrumbs ul li a { display: block; float: left; color: #99a0a7; }

/* Tabs */
div.tabs h3 { float: left; margin: 0; line-height: 40px; padding: 0 0 0 10px; }
div.tabs ul { list-style-type: none; }
div.tabs ul li { float: left; font-size: 0.9375em; border-right: #fff 1px solid; }
div.tabs ul.right li { border-left: #fff 1px solid; border-right: 0; }
div.tabs ul li a { height: 40px; line-height: 40px; float: left; display: block; position: relative; padding: 0 15px; text-decoration: none; color: #455463; cursor: pointer; background: #f0f0f0; }
div.tabs ul li a.selected, div.tabs ul li a.active { background: #222c37; color: #fff; }
div.tabs div.arrow { height: 40px; line-height: 40px; float: right; padding: 0 28px 0 15px; color: #fff; cursor: pointer; background: #222c37; position: relative; }
div.tabs div.arrow:after { content: ""; width: 0; height: 0; position: absolute; right: 12px; top: 19px; z-index: 10; border: transparent 4px solid; border-top-color: #fff; }
div.tabs ul.drop { position: absolute; top: 45px; right: 0; background: #fff; -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.3); -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.3); box-shadow: 0 1px 5px rgba(0,0,0,0.3); }
div.tabs ul.drop li { float: none; border: 0; border-bottom: #e6e6e6 1px solid; }
div.tabs ul.drop li:last-child { border: 0; }
div.tabs ul.drop li a { min-width: 31px; height: auto; line-height: 1em; float: none; color: #555; padding: 10px 10px; text-align: center; background: #fff; border: 0; }
div.tabs ul.drop li a:hover, div.tabs ul.drop li a.selected { background: #f0f0f0; color: #555; }
div.tabs.inv ul li a { color: #fff; background: #222c37; }
div.tabs.inv ul li a.selected { background: #f0f0f0; color: #455463; }
div.tabs.wide ul li a { padding: 0 30px; }
div.tabs.center ul { text-align: center; font-size: 0; letter-spacing: 0; word-spacing: 0; }
div.tabs.center ul li { display: inline-block; float: none; font-size: 15px; word-spacing: normal; vertical-align: top; }
div.tabs.arrow ul li a.selected:after { content: ""; width: 0; height: 0; position: absolute; left: 50%; bottom: -12px; z-index: 10; margin: 0 0 0 -6px; border: transparent 6px solid; border-top-color: #222c37; }

/* Tool tips */
.tt { position: relative; }
.tt div.tip { height: 24px; line-height: 24px; position: absolute; left: -100000px; z-index: 9999; background: #222c37; color: #fff; border: 0; font-size: 0.75em; font-weight: normal; padding: 0 7px; white-space: nowrap; text-align: center; }
.tt div.b:after { content: ""; display: block; position: absolute; top: -8px; left: 50%; font-size: 0px; line-height: 0%; width: 0px; margin: 0 0 0 -3px; border: transparent 4px solid; border-bottom-color: #222c37; }
.tt div.t:after { content: ""; display: block; position: absolute; bottom: -8px; left: 50%; font-size: 0px; line-height: 0%; width: 0px; margin: 0 0 0 -4px; border: transparent 4px solid; border-top-color: #222c37; }
.tt div.tip-visible { left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); }

/* Paging */
div.paging ul { width: 100%; }
div.paging ul li { min-width: 42px; height: 42px; line-height: 42px; margin: 0 3px 6px 0; display: inline-block; text-align: center; font-size: 0.9375em; }
div.paging ul li.selected { padding: 0 5px; color: #fff; background: #00cccc; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }
div.paging ul li .current { display: block; padding: 0 5px; color: #fff; background: #00cccc; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }
div.paging ul li a { min-width: 30px; padding: 0 5px; height: 40px; line-height: 40px; display: block; color: #455463; text-decoration: none; border: #e6e6e6 1px solid; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }
div.paging ul li a:hover { color: #455463; border-color: #00cccc; }
div.paging ul li a.selected { color: #fff; background: #00cccc; border-color: #00cccc; }
div.paging ul li.prev-page a, div.paging ul li.next-page a { text-indent: -9999em; border-color: #222c37; background: #222c37 url(../images/assets/layout/core-sprites.png) -33px -108px no-repeat; }
div.paging ul li.next-page a { background-position: 12px -108px; }
div.paging ul li.prev-page a:hover, div.paging ul li.next-page a:hover { border-color: #222c37; background-color: #222c37; }
div.paging ul li a.prev, div.paging ul li a.next { text-indent: -9999em; border-color: #222c37; background: #222c37 url(../images/assets/layout/core-sprites.png) -33px -108px no-repeat; }
div.paging ul li a.next { background-position: 12px -108px; }
div.paging ul li a.prev:hover, div.paging ul li a.next:hover { border-color: #222c37; background-color: #222c37; }

/* Icons */
div.prev, div.next, div.plus, div.down, div.up { width: 50px; height: 50px; position: absolute; z-index: 1002; cursor: pointer; background: rgba(0,204,204,0.7) url(../images/assets/layout/media-icons-sprite.png) 0 0 no-repeat; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }
div.prev a, div.next a, div.plus a, div.down a, div.up a { width: 50px; height: 50px; display: block; }
div.prev { left: 20px; bottom: 20px; background-position: 0 -88px; }
div.next { right: 20px; bottom: 20px; background-position: -50px -88px; }
div.plus { left: 50%; top: 50%; background-position: -100px -88px; -webkit-transform: translateY(-50%) translateX(-50%); -moz-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); }
div.down { left: 50%; bottom: 20px; background-position: -150px -88px; margin: 0 0 0 -25px; }
div.up { left: 50%; bottom: 20px; background-position: -200px -88px; margin: 0 0 0 -25px; }
div.prev.small, div.next.small, div.plus.small { width: 32px; height: 32px; }
div.prev.small a, div.next.small a, div.plus.small a { width: 32px; height: 32px; }
div.prev.small { left: 40px; background-position: 0 -138px; }
div.next.small { right: 40px; background-position: -32px -138px; }
div.plus.small { background-position: -64px -138px; }
div.prev.green, div.next.green, div.plus.green, div.down.green, div.up.green { background-color: rgba(25,227,177,0.7); }
div.prev.yellow, div.next.yellow, div.plus.yellow, div.down.yellow, div.up.yellow { background-color: rgba(255,246,0,0.7); }
div.prev.red, div.next.red, div.plus.red, div.down.red, div.up.red { background-color: rgba(255,0,102,0.7); }
div.prev.purple, div.next.purple, div.plus.purple, div.down.purple, div.up.purple { background-color: rgba(209,11,146,0.7); }
div.prev.dark, div.next.dark, div.plus.dark, div.down.dark, div.up.dark { background-color: rgba(34,44,55,0.7); }

div.play { width: 80px; height: 54px; position: absolute; top: 50%; left: 50%; z-index: 1002; cursor: pointer; background: url(../images/assets/layout/media-icons-sprite.png) 0 0 no-repeat; -webkit-transform: translateY(-50%) translateX(-50%); -moz-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); }
div.play.green { background-position: -80px 0; }
div.play.yellow { background-position: -160px 0; }
div.play.red { background-position: -240px 0; }
div.play.purple { background-position: -320px 0; }
div.play.dark { background-position: -400px 0; }
div.play.small { width: 50px; height: 34px; background-position: 0 -54px; }
div.play.small.green { background-position: -50px -54px; }
div.play.small.yellow { background-position: -100px -54px; }
div.play.small.red { background-position: -150px -54px; }
div.play.small.purple { background-position: -200px -54px; }
div.play.small.dark { background-position: -250px -54px; }

div.icon { width: 40px; height: 39px; float: left; }
div.icon a { width: 40px; height: 39px; display: block; }
div.icon span { width: 40px; height: 39px; display: block; background: #222c37 url(../images/assets/layout/core-sprites.png) 0 0 no-repeat; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
div.icon span.disabled { background-color: #ccc; }
div.icon span.prev { background-position: -34px -109px; }
div.icon span.next {  background-position: 12px -109px; }

/* Loading */
.loading { width: 60px; height: 18px; position: absolute; left: 50%; top: 50%; margin: -9px 0 0 -30px; }
.loading div { width: 18px; height: 18px; display: block; float: left; margin: 0 1px; background-color: #fff; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -webkit-box-shadow: 0px 20px 20px rgba(255,255,255,0.2); -moz-box-shadow: 0px 20px 20px rgba(255,255,255,0.2); box-shadow: 0px 20px 20px rgba(255,255,255,0.2); -webkit-animation: bouncedelay 1.4s infinite ease-in-out; -moz-animation: bouncedelay 1.4s infinite ease-in-out; -o-animation: bouncedelay 1.4s infinite ease-in-out; animation: bouncedelay 1.4s infinite ease-in-out; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; }
.loading div:nth-child(1){ -webkit-animation-delay: -0.32s; -moz-animation-delay: -0.32s; -o-animation-delay: -0.32s; animation-delay: -0.32s; }
.loading div:nth-child(2){ -webkit-animation-delay: -0.16s; -moz-animation-delay: -0.16s; -o-animation-delay: -0.16s; animation-delay: -0.16s; }
.loading.inv div { background-color: #29e5b7; }
div.unity-loading { width: 48px; height: 50px; position: absolute; left: 50%; top: 50%; margin: -25px 0 0 -24px; background: url(../images/assets/elements/loading-cube.png) 0 0 no-repeat; }
div.unity-loading:after { content: ''; width: 78px; height: 78px; display: block; border: 2px solid transparent; border-top-color: #fff600; -webkit-border-radius: 50%; moz-border-radius: 50%; border-radius: 50%; position: absolute; top: -15px; left: -13px; -webkit-animation: spin 1s infinite cubic-bezier(0.25,0.1,0.25,1); -moz-animation: spin 1s infinite cubic-bezier(0.25,0.1,0.25,1); -o-animation: spin 1s infinite cubic-bezier(0.25,0.1,0.25,1); animation: spin 1s infinite cubic-bezier(0.25,0.1,0.25,1); }

/* Expand/collapse */
a.expand { display: block; float: left; color: #455463; font-size: 1em; text-decoration: none; padding: 0 0 0 30px; position: relative; }
a.expanded { font-weight: bold; }
a.expand:before, a.expanded:before { content: ''; display: block; width: 18px; height: 18px; position: absolute; top: 2px; left: 0; background: #19e3b1 url(../images/assets/layout/core-sprites.png) 4px -280px no-repeat; }
a.expanded:before { background-position: 4px -254px; }

/* Messages */
div#messages { width: 940px; margin: 0 auto 20px auto; text-align: left; }
div#messages div.messages { padding: 15px; }
div#messages div.error { background: #ffe2d7; }
div#messages div.warning { background: #fff9d7; }
div#messages div.status { background: #ebffce; }
div#messages ul { padding: 0 0 0 27px; }
div#messages ul li { font-size: 0.75em; }
div#messages h2 { display: none; }

/* MISC Icons */
.rss-icon { width: 42px; height: 42px; display: block; background: #ff7f33 url(../images/assets/icons/rss-large.png) 50% 50% no-repeat; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }

/****************************************
  ==== 11. LAYOUT ELEMENTS
****************************************/

div.sidebar h3 { border-bottom: #222c37 1px solid; padding: 0 0 15px 0; }
div.bottombar h3 { border-bottom: #222c37 1px solid; padding: 0 0 15px 0; }

/****************************************
  ==== 12. COLORS & BACKGROUND COLORS
****************************************/

.cd { color: #222c37 !important; }
.cn { color: #455463 !important; }
.cr { color: red !important; }
.cl { color: #99a0a7 !important; }
.cw { color: #fff !important; }
.cg { color: green !important; }
.cud { color: #222c37 !important; }
.cur { color: #ff0066 !important; }
.cub { color: #00cccc !important; }
.cug { color: #19e3b1 !important; }
.cuy { color: #fff600 !important; }
.cup { color: #b83c82 !important; }
.cuo { color: #ff7f33 !important; }

.bg-ud { background-color: #222c37 !important; }
.bg-ub { background-color: #00cccc !important; }
.bg-ug { background-color: #19e3b1 !important; }
.bg-uy { background-color: #fff600 !important; }
.bg-ur { background-color: #ff0066 !important; }
.bg-up { background-color: #b83c82 !important; }
.bg-uo { background-color: #ff7f33 !important; }

.bg-w { background-color: #fff !important; }
.bg-lg { background-color: #f0f0f0 !important; }
.bg-ly { background-color: #fff9d7 !important; }
.bg-lgr { background-color: #e3f3e2 !important; }
.bg-lr { background-color: #ffe2d7 !important; }

/****************************************
  ==== 13. LAYOUT HELPERS
****************************************/

.m0a { margin: 0 auto !important; }
.ma0 { margin: 0 !important; }

.mb0 { margin-bottom: 0 !important; }
.mb1 { margin-bottom: 1px !important; }
.mb5 { margin-bottom: 5px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb15 { margin-bottom: 15px !important; }
.mb17 { margin-bottom: 17px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb40 { margin-bottom: 40px !important; }
.mb80 { margin-bottom: 80px !important; }

.mt0 { margin-top: 0 !important; }
.mt5 { margin-top: 5px !important; }
.mt10 { margin-top: 10px !important; }
.mt15 { margin-top: 15px !important; }
.mt20 { margin-top: 20px !important; }
.mt30 { margin-top: 30px !important; }
.mt40 { margin-top: 40px !important; }

.mr0 { margin-right: 0 !important; }
.mr1 { margin-right: 1px !important; }
.mr5 { margin-right: 5px !important; }
.mr10 { margin-right: 10px !important; }
.mr15 { margin-right: 15px !important; }
.mr20 { margin-right: 20px !important; }
.mr40 { margin-right: 40px !important; }

.ml0 { margin-left: 0 !important; }
.ml5 { margin-left: 5px !important; }
.ml10 { margin-left: 10px !important; }
.ml15 { margin-left: 15px !important; }
.ml20 { margin-left: 20px !important; }

.pa0 { padding: 0 !important; }
.pa5 { padding: 5px !important; }
.pa10 { padding: 10px !important; }
.pa15 { padding: 15px !important; }
.pa20 { padding: 20px !important; }
.pa30 { padding: 30px !important; }

.p0110 { padding: 0 1px 1px 0 !important; }

.pr0 { padding-right: 0 !important; }
.pr1 { padding-right: 1px !important; }
.pr5 { padding-right: 5px !important; }
.pr10 { padding-right: 10px !important; }
.pr20 { padding-right: 20px !important; }
.pr30 { padding-right: 30px !important; }

.pl0 { padding-left: 0 !important; }
.pl1 { padding-left: 1px !important; }
.pl5 { padding-left: 5px !important; }
.pl10 { padding-left: 10px !important; }
.pl15 { padding-left: 15px !important; }
.pl20 { padding-left: 20px !important; }
.pl30 { padding-left: 30px !important; }
.pl50 { padding-left: 50px !important; }

.pb0 { padding-bottom: 0 !important; }
.pb1 { padding-bottom: 1px !important; }
.pb5 { padding-bottom: 5px !important; }
.pb10 { padding-bottom: 10px !important; }
.pb15 { padding-bottom: 15px !important; }
.pb20 { padding-bottom: 20px !important; }
.pb30 { padding-bottom: 30px !important; }
.pb40 { padding-bottom: 40px !important; }
.pb50 { padding-bottom: 50px !important; }
.pb60 { padding-bottom: 60px !important; }
.pb70 { padding-bottom: 70px !important; }
.pb80 { padding-bottom: 80px !important; }

.pt0 { padding-top: 0 !important; }
.pt2 { padding-top: 2px !important; }
.pt5 { padding-top: 5px !important; }
.pt10 { padding-top: 10px !important; }
.pt15 { padding-top: 15px !important; }
.pt18 { padding-top: 18px !important; }
.pt20 { padding-top: 20px !important; }
.pt30 { padding-top: 30px !important; }
.pt40 { padding-top: 40px !important; }
.pt50 { padding-top: 50px !important; }
.pt60 { padding-top: 60px !important; }
.pt70 { padding-top: 70px !important; }
.pt80 { padding-top: 80px !important; }
.pt90 { padding-top: 90px !important; }

.p46 { padding: 4px 6px; }

.left { float: left !important; }
.right { float: right !important; }
.inbl { display: inline-block; }
.hide {display: none !important;}
.hidden { opacity: 0; visibility: hidden; }
.rel { position: relative;}
.box { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.flex-wrap { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.flex-column { display: -webkit-flex; display: -ms-flexbox; display: flex; }

.ellipsis { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.tr { text-align: right; }
.tl { text-align:left; }
.tc { text-align: center; }
.b, b, strong { font-weight: bold; }
.nb { font-weight: normal; }
.i, i, em { font-style: italic; }
.upper { text-transform: uppercase; }
.noupper { text-transform: none; }
.lh24 { line-height: 24px; }
.lh30 { line-height: 30px; }
.lh36 { line-height: 36px; }
.lh40 { line-height: 40px; }
.lh42 { line-height: 42px; }
.lh46 { line-height: 46px; }
.lh50 { line-height: 50px; }
.lh60 { line-height: 60px; }
.w100 { width: 100% !important; }

.ir { float: right; margin: 0 0 10px 10px; }
.il { float: left; margin: 0 10px 10px 0; }
.ic, .ir, .il { -webkit-box-shadow: 0 0 10px rgba(34,44,55,0.3); -moz-box-shadow: 0 0 10px rgba(34,44,55,0.3); box-shadow: 0 0 10px rgba(34,44,55,0.3); }
.br50, .ibr50 { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }

.bb { border-bottom: #e6e6e6 1px solid; padding-bottom: 15px; margin-bottom: 15px; }
.bt { border-top: #e6e6e6 1px solid !important; padding-top: 10px; margin-top: 10px; }
.bl { border-left: #e6e6e6 1px solid; }
.bbw { border-bottom: #fff 1px solid; padding-bottom: 15px; margin-bottom: 15px; }
.bbd { border-bottom: #222c37 1px solid; padding-bottom: 15px; margin-bottom: 15px; }
.ba { border: #e6e6e6 1px solid; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.bb0 { border-bottom: 0; }

.z10 { z-index: 10 !important; }
.z15 { z-index: 15 !important; }

.element-hidden { display: none; }
.element-invisible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); overflow: hidden; height: 1px; }

/****************************************
  ==== 14. RANDOM ELEMENTS
****************************************/

div#demo-webplayer, div#unityplayer { width: 1160px; height: 679px; }
.share-icons iframe { max-width: none !important; z-index: 999; }
div.view-empty { margin: 0 10px; font-size: 0.875em; font-style: italic; }
.printonly { display: none; }

/**************************************************
  ==== 15. LOCAL TYPO
**************************************************/

/* Japan */
body.i18n-ja, body.i18n-ja div.world-map div.info-window, body.i18n-ja div.gsc-input-box, body.i18n-ja div.gsc-tabsArea, body.i18n-ja div.gsc-results, body.i18n-ja table.gsc-table-result { font: 16px/135% 'Hiragino Kaku Gothic Pro',Meiryo,'MS PGothic',sans-serif; text-transform: none !important; }
body.i18n-ja h1, body.i18n-ja h2, body.i18n-ja h3, body.i18n-ja .avalon, body.i18n-ja .avalonbold, body.i18n-ja .blue-btn, body.i18n-ja .gray-btn, body.i18n-ja nav.top-nav ul li a.active-trail,
body.i18n-ja footer h3, body.i18n-ja .fancybox-title-float-wrap .child, body.i18n-ja div.step div.nr, body.i18n-ja div.next-session div.time-block div.digit, body.i18n-ja div.next-session div.separator,
body.i18n-ja div.next-session div.live-message div, body.i18n-ja div.not-started div.time-block div.digit, body.i18n-ja div.not-started div.separator,
body.i18n-ja .full-release h3, body.i18n-ja .node-webform input[type=submit], body.i18n-ja fieldset.step legend { font-family: 'Hiragino Kaku Gothic Pro',Meiryo,'MS PGothic',sans-serif !important; font-weight: bold; text-transform: none !important; }
body.i18n-ja input, body.i18n-ja select, body.i18n-ja textarea, body.i18n-ja nav.top-nav .gsc-completion-container, body.i18n-ja nav.top-nav div.user-wrapper h2 .nb, body.i18n-ja nav.top-nav ul li a,
body.i18n-ja nav.sub-nav ul li, body.i18n-ja .section-header .subnav-dropdown ul li a, body.i18n-ja footer div.newsletter div.success h3, body.i18n-ja footer div.newsletter div.failed h3,
body.i18n-ja div.background-slider div.caption h1 span, body.i18n-ja .mejs-container, body.i18n-ja .showcase-case-story h4, body.i18n-ja .full-release h4 { font-family: 'Hiragino Kaku Gothic Pro',Meiryo,'MS PGothic',sans-serif !important; font-weight: normal; text-transform: none !important; }

/* Korea */
body.i18n-ko, body.i18n-ko div.world-map div.info-window, body.i18n-ko div.gsc-input-box, body.i18n-ko div.gsc-tabsArea, body.i18n-ko div.gsc-results, body.i18n-ko table.gsc-table-result { font: 16px/135% 'Nanum Gothic',sans-serif; }
body.i18n-ko h1, body.i18n-ko h2, body.i18n-ko h3, body.i18n-ko .avalon, body.i18n-ko .avalonbold, body.i18n-ko .blue-btn, body.i18n-ko .gray-btn, body.i18n-ko nav.top-nav ul li a.active-trail,
body.i18n-ko footer h3, body.i18n-ko .fancybox-title-float-wrap .child, body.i18n-ko div.step div.nr, body.i18n-ko div.next-session div.time-block div.digit, body.i18n-ko div.next-session div.separator,
body.i18n-ko div.next-session div.live-message div, body.i18n-ko div.not-started div.time-block div.digit, body.i18n-ko div.not-started div.separator,
body.i18n-ko .full-release h3, body.i18n-ko .node-webform input[type=submit], body.i18n-ko fieldset.step legend { font-family: 'Nanum Gothic',sans-serif !important; font-weight: bold; }
body.i18n-ko input, body.i18n-ko select, body.i18n-ko textarea, body.i18n-ko nav.top-nav .gsc-completion-container, body.i18n-ko nav.top-nav div.user-wrapper h2 .nb, body.i18n-ko nav.top-nav ul li a,
body.i18n-ko nav.sub-nav ul li, body.i18n-ko .section-header .subnav-dropdown ul li a, body.i18n-ko footer div.newsletter div.success h3, body.i18n-ko footer div.newsletter div.failed h3,
body.i18n-ko div.background-slider div.caption h1 span, body.i18n-ko .mejs-container, body.i18n-ko .showcase-case-story h4, body.i18n-ko .full-release h4 { font-family: 'Nanum Gothic',sans-serif !important; font-weight: normal; }

/* Russia */
body.i18n-ru h1, body.i18n-ru h2, body.i18n-ru .avalonbold, body.i18n-ru .blue-btn, body.i18n-ru .gray-btn, body.i18n-ru nav.top-nav ul li a.active-trail, body.i18n-ru footer h3, body.i18n-ru .fancybox-title-float-wrap .child,
body.i18n-ru div.step div.nr, body.i18n-ru div.next-session div.time-block div.digit, body.i18n-ru div.next-session div.separator, body.i18n-ru div.next-session div.live-message div, body.i18n-ru div.not-started div.time-block div.digit,
body.i18n-ru div.not-started div.separator, body.i18n-ru .showcase-case-story h4, body.i18n-ru .full-release h3, body.i18n-ru .node-webform input[type=submit],
body.i18n-ru fieldset.step legend { font-family: 'Open Sans',sans-serif !important; font-weight: bold; }
body.i18n-ru h3, body.i18n-ru .avalon, body.i18n-ru nav.top-nav ul li a, body.i18n-ru nav.top-nav div.user-wrapper h2 .nb, body.i18n-ru nav.sub-nav ul li, body.i18n-ru .section-header .subnav-dropdown ul li a,
body.i18n-ru footer div.newsletter div.success h3, body.i18n-ru footer div.newsletter div.failed h3, body.i18n-ru div.background-slider div.caption h1 span, body.i18n-ru .mejs-container, body.i18n-ko .full-release h4 { font-family: 'Open Sans',sans-serif !important; font-weight: normal; }

@media only screen and (min-width: 150px) and (max-width: 980px){
body.i18n-ja nav.mobile-menu .gsc-completion-container { font-family: 'Hiragino Kaku Gothic Pro',Meiryo,'MS PGothic',sans-serif !important; font-weight: normal; text-transform: none !important; }
body.i18n-ko nav.mobile-menu .gsc-completion-container { font-family: 'Nanum Gothic',sans-serif !important; font-weight: normal; }
}
@media only screen and (max-width: 767px) {
body.i18n-ja footer .g8 .links h3, body.i18n-ja footer .g8 .partners h3, body.i18n-ja div.next-session div.time-block div.digit, body.i18n-ja div.next-session div.separator { font-family: 'Hiragino Kaku Gothic Pro',Meiryo,'MS PGothic',sans-serif !important; font-weight: normal; text-transform: none !important; }
body.i18n-ko footer .g8 .links h3, body.i18n-ko footer .g8 .partners h3, body.i18n-ko div.next-session div.time-block div.digit, body.i18n-ko div.next-session div.separator { font-family: 'Nanum Gothic',sans-serif !important; font-weight: normal; }
body.i18n-ru div.next-session div.time-block div.digit, body.i18n-ru div.next-session div.separator { font-family: 'Open Sans',sans-serif !important; font-weight: normal; }

}
@media only screen and (min-width: 480px) and (max-width: 766px) {
body.i18n-ja div.gsc-input-box, body.i18n-ja div.gsc-tabsArea, body.i18n-ja div.gsc-results { font: 16px/135% 'Hiragino Kaku Gothic Pro',Meiryo,'MS PGothic',sans-serif !important; text-transform: none !important; }
body.i18n-ko div.gsc-input-box, body.i18n-ko div.gsc-tabsArea, body.i18n-ko div.gsc-results { font: 16px/135% 'Nanum Gothic',sans-serif !important; }
}
@media only screen and (max-width: 479px) {
body.i18n-ja div.gsc-input-box, body.i18n-ja div.gsc-tabsArea, body.i18n-ja div.gsc-results { font: 16px/135% 'Hiragino Kaku Gothic Pro',Meiryo,'MS PGothic',sans-serif !important; text-transform: none !important; }
body.i18n-ko div.gsc-input-box, body.i18n-ko div.gsc-tabsArea, body.i18n-ko div.gsc-results { font: 16px/135% 'Nanum Gothic',sans-serif !important; }
}