* {box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media screen and (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body { margin: 0; /*background-color: #eee;*/ font-family: Arial, sans-serif; }

.page { margin: 0 auto; background-color: #fff; /*box-shadow: 0px 16px 16px #ddd;*/ }

header { position: relative; z-index: 100; background-color: #09d; }
header:after { content: "";  visibility: hidden; display: block; height: 0; clear: both; }
header h1 { float: left; width: 40%; margin: 0; }
header h1 a { display: block; max-width: 320px; height: 56px; background: url(../img/webcomand-white.png) 13px center no-repeat; background-image: url(../img/webcomand-logo.svg), none; background-size: 88%; text-indent: -9999px; transition: background-color 0.2s; }
header h1 a:hover { background-color: #0ae; }

nav { }
nav #toggle { display: none; }
nav label { display: none; }
nav ul { float: right; margin: 0; padding: 0; list-style: none; font-size: 0; white-space: nowrap; }
nav ul li { display: inline-block; position: relative; }
nav ul li a { display: inline-block; padding: 0 24px; font-size: 20px; line-height: 56px; color: #fff; text-decoration: none; }
nav ul li:hover a { background-color: #0ae; color: #fff; }
nav ul li a:hover { background-color: #0ae; color: #fff; }
nav ul li ul { display: none; position: absolute; left: 0; background-color: #09d; width: 200px; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.5); z-index: -200; }
nav ul li ul.right { left: auto; width: 120px; right: 0; }
nav ul li ul li { display: block; }
nav ul li ul li a { display: block; line-height: 48px; }
nav ul li:hover ul { display: block; }
nav ul li ul li a:hover { background-color: #fff; color: #0ae; }

/*nav > ul > li:last-child { margin-left: 1px; }
nav > ul > li:last-child a { border-radius: 0 0 0 8px; background-color: #51a351; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); transition: background-color 0.2s, color 0.2s; }
nav > ul > li:last-child a:hover { background-color: #5bb75b; }*/

nav ul li a.button { margin-left: 1px; border-radius: 0 0 8px 8px; background-color: #51a351; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.4); transition: background-color 0.2s, color 0.2s; }
nav ul li:last-child a.button { border-radius: 0 0 0 8px; }
nav ul li a.signup { background-color: #51a351; }
nav ul li a.signup:hover { background-color: #5bb75b; }
nav ul li a.demo { background-color: #705697; }
nav ul li a.demo:hover { background-color: #7D60A9; }


footer { clear: both; margin: 0 auto; color: #aaa; font-size: 14px; text-align: center; }
footer a { color: #aaa; text-decoration: none; }
footer a:hover { color: #aaa; text-decoration: underline; }

footer p { display: inline-block; padding: 0 24px; }
footer ul { display: inline-block; margin: 0; padding: 0; list-style: none; font-size: 0; white-space: nowrap; }
footer ul li { position: relative; display: inline-block; font-size: 14px; line-height: 32px; }
footer ul li a { display: inline-block; padding: 0 24px; }
footer ul li:after { content: " | "; position: absolute; right: 0; }

#spinner-overlay { display: none; position: absolute; width: 100%; height: 100%; z-index: 100000; top: 0; left: 0; background-color: rgba(0,0,0,0.25); }
#spinner { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 8px; border: 1px solid #ddd; padding: 48px 12px 12px 12px; background: #fff url(../img/spinner.gif) center 16px no-repeat; text-align:center; overflow: hidden; }
#spinner .message {	padding-top: 12px; }

.graphic.right { clear: both; display: block; float: right; margin-left: 12px; width: 33%; }
.graphic img,
.site section img.graphic { width: 100%; }
.site section img.graphic.shadow { margin-top: 4px; margin-bottom: 16px; box-shadow: 0 0 16px rgba(0,0,0,0.25); }
.site section img.graphic.small { width: 32%; }

/* CLB This is for mock-SQL tables in our blog posts. Corresponds to Blog Rich Text Settings */
table.example-table { border: 1px solid #444; margin-top: 20px; margin-bottom: 20px; }
table.example-table th, table.example-table td { padding: 5px; }
table.example-table thead tr th { background-color: #09d; font-family: 'Courier New'; font-weight: bold; font-size: 20px; color: white; border-bottom: 1px solid #444; }
table.example-table tbody tr th { background-color: #ddd; font-family: 'Courier New'; font-weight: bold; font-size: 18px; color: #444; border-bottom: 1px solid #444; border-right: 1px solid #444; }
table.example-table tbody tr td { font-size:18px; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; }
table.example-table tbody tr td:last-child,
table.example-table tbody tr th:last-child { border-right: none; }

@media (max-width: 924px) {
    nav ul li a { padding: 0 12px; }
    nav ul li a.button { padding: 0 12px; }
}

@media (max-width: 767px) {
    header h1 { position: absolute; height: 100%; }
    header h1 a { height: 100%; }
    nav > ul { width: 60%; text-align: right; }
    nav > ul > li { text-align: left; }
    nav > ul > li > a { padding: 0 12px; }
    nav > ul > li a { font-size: 2.6vw; /*line-height: 260%;*/ }
    nav ul li ul li a { line-height: 300%; }
    nav ul li a.button { padding: 0 12px; }
}

@media (max-width: 639px) {
    header { height: 56px; }
    header h1 { width: 100%; padding-right: 56px; }
    nav { position: absolute; top: 0; right: 0; }
    nav label { display: block; position: absolute; z-index: 1; right: 0; display: block; width: 56px; height: 56px; padding: 11px 12px 12px 12px; cursor: pointer; }
    nav label:hover { background-color: #0ae; }
    nav label hr { width: 28px; height: 3px; border: none; border-radius: 1px; background: #fff; margin: 6px auto; transition: all .25s ease; }
    #toggle:checked ~ label { background-color: #0ae; }
    #toggle:checked ~ label > hr:nth-child(1) { width: 34px; transform: translateY(9px) rotateZ(45deg); }
    #toggle:checked ~ label > hr:nth-child(2) { width: 0; }
    #toggle:checked ~ label > hr:nth-child(3) { width: 34px; transform: translateY(-9px) rotateZ(-45deg); }
    
    nav > ul { display: none; }
    #toggle:checked ~ ul { display: block; }
    nav ul { float: none; position: absolute; top: 56px; right: 0; width: auto; min-width: 200px; background-color: #0ae; box-shadow: 0 0 16px rgba(0, 0, 0, 0.25); }
    nav ul li { display: block; }
    nav ul li a { display: block; font-size: 20px; line-height: 44px; border-top: 1px solid rgba(255,255,255,0.25); }
    nav > ul > li:first-child > a { border-top: none; }
    nav ul li a:hover { background-color: #fff; color: #0ae; }
    nav ul li ul { display: block; position: static; background-color: transparent; box-shadow: none; }
    nav ul li ul li a { padding: 0 16px 0 32px; line-height: 44px; }

    /*nav > ul > li:last-child { margin-left: 0; }
    nav > ul > li:last-child a { border-radius: 0; }
    nav > ul > li:last-child a:hover { color: #fff; }*/
    nav ul li a.button { margin-left: 0px; border-radius: 0; }
    nav ul li a.button:hover { color: #fff; }
}

@media (max-width: 511px) {
    section .left.half,
    section .right.half { width: auto; float: none; margin-top: 2%; }
    section.feature { padding-top: 0; }
    section.feature h1 { font-size: 8.25vw; }
    section.feature .img.left,
    section.feature .img.right { width: auto; margin: 0; }
    
}

@media (max-width: 479px) {

    footer { margin: 3% auto; }
    footer ul li { display: block; }
    footer ul li:after { display: none; }
}