* {box-sizing: border-box; }

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; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); }
header:after { content: "";  visibility: hidden; display: block; height: 0; clear: both; }
header h1 { float: left; width: 50%; 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; }
header ul { float: right; margin: 0; padding: 0; list-style: none; font-size: 0; white-space: nowrap; }
header ul li { display: inline-block; position: relative; }
header ul li a { display: inline-block; padding: 0 24px; font-size: 20px; line-height: 56px; color: #fff; text-decoration: none; }
header ul li:hover a { background-color: #0ae; color: #fff; }
header ul li a:hover { background-color: #0ae; color: #fff; }

header 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; }
header ul li ul.right { left: auto; width: 120px; right: 0; }
header ul li ul li { display: block; }
header ul li ul li a { display: block; line-height: 48px; }
header ul li:hover ul { display: block; }
header ul li ul li a:hover { background-color: #fff; color: #0ae; }

section { position: relative; max-width: 1024px; margin: 0 auto; padding: 24px 20px; overflow: auto; zoom: 1; }
.secondary section { padding: 48px 20px 0 20px; }
.secondary section:last-child { padding-bottom: 48px; }
section .left { float: left; width: 33.333%; }
section .left.half { width: 48%; }
section .left.fouty { width: 38%; }
section .left.sixty { width: 58%; }
section .left img { width: 100%; }
section .right { float: right; width: 66.666%; }
section .right.half { width: 48%; }
.img img { display: block; width: 100%; position: relative; }
.img.right { float: right; width: 31.333%; margin-left: 4%; }
.img.right.fourty { width: 38%; }
.img.right.half { width: 48%; }
.img.left { float: left; width: 31.333%; margin-right: 4%; }
.img.left.fourty { width: 38%; }
.img.left.half { width: 48%; }
.img .caption { display: none; }
.play { display: block; position: relative; cursor: pointer; }
.play::before { display: block; z-index: 1; content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0); transition: background-color .2s; }
.play:hover::before { background-color: rgba(0, 0, 0, 0.2); }
.play::after { display: block; z-index: 1; content: ""; position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 32px; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5); background: #07b url(../img/play-arrow.png) 26px center no-repeat; opacity: 0.8; transition: background-color .2s, opacity .2s; }
.play:hover::after { background-color: #0bf; opacity: 1; }
.home section p,
.home section li
{ font-size: 26px; line-height: 34px; text-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); }
section a { color: #08c; text-decoration: none; text-shadow: 0 4px 16px rgba(0, 119, 187, 0.2); }
section a:hover { text-decoration: underline; }

section p,
section li { line-height: 150%; }
section h1,
section p { margin: 0 0 12px 0; }
section h1,
section strong { color: #07b; text-shadow: 0 0 16px rgba(0, 119, 187, 0.2); }
section ul { margin: 0; padding: 0 0 0 20px; }
section ul li { margin: 0 0 12px 0; }
section .container { max-width: 1024px; margin: 0 auto; }

section.hero { position: relative; max-width: none; padding: 6% 4%; background-color: #08c; color: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); }
section.hero .img { position: relative; left: -10px; float: right; width: 50%; }
section.hero img { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); }
section.hero .content { float: left; position: relative; left: -20px; width: 50%; padding: 0 2%; text-align: center; }
section.hero a.button { display: inline-block; outline: none; border-radius: 8px; padding: 0 6%; background-color: #0ae; color: #fff; font-size: 2vw; line-height: 320%; text-decoration: none; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); transition: background-color 0.2s, color 0.2s; }
section.hero a.button:focus { outline: none; }
section.hero a.button:hover { background-color: #0bf; }

.home h2 { position: relative; margin: 0; padding: 3% 0 6%; font-family: 'Yantramanav', sans-serif; font-size: 5vw; line-height: 140%; font-weight: 300; text-align: center; text-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); }
.home h2 .dynamic, 
.home h2 .dynamic2 { font-family: sans-serif; font-size: 4vw; padding: 3% 0 3% 0; font-weight: normal; font-style: normal; color: #fff; }
.home h2 .dynamic2 { position: absolute; left: 0; right: 0; display: none; }
/*.home h2 div:last-child { font-size: 22px; line-height: 52px; }*/

section.feature { margin-top: 4%; font-family: 'Yantramanav', sans-serif; }
section.feature h1 { font-size: 4.3vw; font-weight: 300; }

section.promos { clear: both; padding: 2% 0; }
section.promos:after { content: "";  visibility: hidden; display: block; height: 0; clear: both; }

.promo { display: block; float: left; position: relative; width: 30.666%; margin-left: 2%; background-color: #f8f8f8; overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); transition: background-color 0.2s; }
.promo img { display: block; width: 100%; padding-bottom: 16%; }
.promo h3 { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 4%; font-size: 2.5vw; font-weight: normal; background-color: #0ae; color: #fff; text-align: center; transition: background-color .2s; }
.promo:hover { background-color: #fff; }
.promo:hover h3 { background-color: #0bf; }

section.promo .more { display: block; clear: both; padding: 24px 2% 0 0; text-align: center; }
section.promo .more > a { display: inline-block; border-radius: 4px; padding: 16px 64px; background-color: #08c; color: #fff; text-decoration: none; opacity: 0.7; transition: opacity .2s; }
section.promo .more > a:hover { opacity: 1; }
section.promo .content { display: none; }

section.apps { clear: both; padding: 24px 0 24px 0; }
section.apps:after { content: "";  visibility: hidden; display: block; height: 0; clear: both; }

.app { display: block; float: left; position: relative; width: 30.666%; margin: 0 0 16px 2%; border: 1px solid #08c; border-radius: 4px; overflow: hidden; }
.app img { display: block; width: 100%; }
.app h3 { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 8px 16px; background-color: rgba(0,136,204,.9); color: #fff; text-align: center; transition: background-color .2s; }
.app:hover h3 { background-color: rgba(0,136,204,1); }

section.apps .more { display: block; clear: both; padding: 24px 2% 0 0; text-align: center; }
section.apps .more > a { display: inline-block; border-radius: 4px; padding: 16px 64px; background-color: #08c; color: #fff; text-decoration: none; opacity: 0.7; transition: opacity .2s; }
section.apps .more > a:hover { opacity: 1; }
section.apps .content { display: none; }

section .partners { margin: 24px 0 48px 0; padding: 0; border-collapse: collapse; }
section .partners tr:hover { background-color: #eee; }
section .partners td { padding: 4px 12px; }
section .partners td a { }
section .partners td img { display: inline-block; max-width: 200px; }
section .partners td { font-size: 12px; line-height: 110%; }

form { width: 48%; }
form.left { width: 64.66%; }
form .message { display: none; margin-bottom: 12px; border: 1px solid #0c0; border-radius: 4px; padding: 12px; background: #efe; color: #0c0; }
form .message.error { border-color: #c00; background: #fee; color: #c00; }
form .message.error strong { color: #c00; }
form .message.show { display: block; }
form .message.waiting { padding-right: 44px; border-color: #c90; color: #c90; background: #ffe url(../img/spinner.gif) right 12px center no-repeat; }
form .message p:last-child { margin-bottom: 0; }
form .field { margin: 0 0 16px 0; }
form .field label { display: block; padding: 4px 0 0; font-weight: bold; color: #07b; }
form .field label:hover { cursor: pointer; }

/* Checkbox styling based on: https://codepen.io/CreativeJuiz/pen/BiHzp */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked { position: absolute; left: -9999px; }
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label { position: relative; display: table-cell; box-sizing: border-box; height: 32px; padding: 0 0 0 42px; font-weight: normal; font-size: 16px; line-height: 22px; color: #000; vertical-align: middle; cursor: pointer; }
/* checkbox */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before { content: ''; position: absolute; left:0; top: 50%; width: 32px; height: 32px; border: 1px solid #000; transform: translateY(-50%); }
/* checked mark */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after { content: '✔'; position: absolute; top: 50%; left: 4px; font-size: 32px; line-height: 0.8; color: #09ad7e; transition: all .2s; }
/* checked mark changes */
[type="checkbox"]:not(:checked) + label:after { opacity: 0; transform: scale(0) translateY(0); top: 0; }
[type="checkbox"]:checked + label:after { opacity: 1; transform: scale(1) translateY(-50%); }
/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before { box-shadow: none; border-color: #bbb; background-color: #ddd; }
[type="checkbox"]:disabled:checked + label:after { color: #999; }
[type="checkbox"]:disabled + label { color: #aaa; }
/* accessibility */
[type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not(:checked):focus + label:before { border: 1px solid #07b; }
/* hover style just for information */
label:hover:before { border: 1px solid #07b!important; }

form .field .price { float: right; }
form input {}
form input[type="text"],
form input[type="email"],
form input[type="password"]{ width: 100%; border: 1px solid #000; padding: 8px 12px; font-size: 24px; }
form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="password"]:focus{ border-color: #07b; }
form input[type="submit"] { display: inline-block; border-radius: 8px; border: none; padding: 0 24px; background-color: #0ae; color: #fff; font-size: 20px; line-height: 64px; text-decoration: none; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); transition: background-color .2s, color .2s; cursor: pointer; -webkit-appearance: none; }
form input[type="submit"]:hover { background-color: #0bf; }

form input[type="text"].checking { padding-right: 44px; background-image: url(../img/spinner.gif); background-position: right 12px center; background-repeat: no-repeat; }


a.help { display: inline-block; vertical-align: middle; border-radius: 8px; width: 16px; height: 16px; padding: 0 2px; background-color: #07b; color: #fff; text-align: center; font-size: 10px; line-height: 16px; }
a.help:hover { background-color: #08c; text-decoration: none; }

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 { display: inline-block; }
footer ul li a { position: relative; display: inline-block; padding: 0 24px; font-size: 14px; line-height: 32px; }
footer ul li a: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; }

@media (min-width: 1024px) {
    /* disable font scaling */
    section.hero { padding: 32px 48px; }
    section.hero a.button { font-size: 20.5px; }
    .home h2 { font-size: 52px; /*line-height: 40px;*/ }
    .home h2 .dynamic, 
    .home h2 .dynamic2 { font-size: 51px; }
    
    section.promos { padding: 20px 0; }
    .promo h3 { font-size: 25px; }

    section.feature h1 { font-size: 44px; }
}

@media (max-width: 768px) {
    header h1 { position: absolute; height: 100%; }
    header h1 a { height: 100%; }
    header > ul { width: 50%; text-align: right; }
    header > ul > li { text-align: left; }
    header > ul > li > a { padding: 0 16px; } /* WebKit Bug: "padding: 0 16%;" doesn't work */
    header > ul > li a { font-size: 2.6vw; /*line-height: 260%;*/ }
    header ul li ul li a { line-height: 300%; }
}

@media (max-width: 480px) {
    header h1 { position: relative; float: none; width: auto; height: auto; }
    header h1 a { max-width: none; height: auto; padding: 4% 0; background-size: 88%; background-position: center center; }
    header > ul { display: table; width: 100%; float: none; text-align: left; }
    header > ul > li { display: table-cell; width: 33.33%; }
    header > ul > li > a { display: block; padding: 0; text-align: center; }
    header > ul > li a { font-size: 5vw; line-height: 250%; }
    header ul li ul li a { line-height: 250%; }
    header ul li ul { width: 150%; }
    section.hero { padding: 8%; }
    section.hero .content { float: none; width: auto; left: 0; padding: 0 0 8% 0; }
    section.hero .img { float: none; width: auto; left: 0; }
    section.hero a.button { font-size: 5vw; }
    .home h2 { font-size: 10vw; }
    .home h2 .dynamic, 
    .home h2 .dynamic2 { font-size: 8vw; }
    section.promos { padding: 0; }
    .promo { float: left; width: 46%; margin: 3% 2% 0; }
    .promo h3 { font-size: 4vw; }
    form,
    form.left { clear: both; width: 100%; }
    
    footer { margin: 3% auto; }
    footer ul li { display: block; }
    footer ul li a:after { display: none; }
}

@media (max-width: 320px) {
    .promo { float: none; width: auto; margin: 4%; }
    .promo h3 { font-size: 8vw; }
}