@font-face {
    font-family: "museo-sans-rounded";
    src: url("../../_global/fonts/MuseoSansRoundedLight-Regular.otf") format("opentype");
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: "museo-sans-rounded";
    src: url("../../_global/fonts/MuseoSansRoundedBold-Regular.otf") format("opentype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

*{margin:0;padding:0;}
html {font: inherit;vertical-align: baseline;}
html.busy, html.busy * {cursor: wait !important;}
body {font:100%/1.333em "museo-sans-rounded", sans-serif;color: #232931;background:#edf1f3;}
h1, h2, h3, h4 {line-height:1.333em;margin-bottom:1em;font-size: 2em;font-weight:700;color:#232931;text-shadow:0 1px 0 #fff;}
h1 {margin:0;}
h2 {font-size: 1.5em;letter-spacing:-0.05em;line-height:1em;}
h3 {font-size: 1.5em;}
h4 {font-size: 1.2em;margin-bottom:0;}

b, strong {font-weight:700;}

p {margin-bottom:1em;}
img {border:0 none;-ms-interpolation-mode: bicubic;}
img, object, embed {max-width: 100%;height: auto;}
ol, ul {list-style: none;margin-bottom: 1em;}
ul {list-style: none outside;}
ul, ol {margin-bottom: 1em;}
li {margin-bottom: 1em;}
a {color: #0067C3;text-decoration: none;line-height: inherit;}
	h4 a:hover, p a:hover, li a:hover {background-color:#ffff99;}
iframe {display:block}
form p.hp {display:none;} /* honeypot in forms to prevent bots form submiting */

.button, div.form .button {display:inline-block;font-weight:700;font-size:1em;text-align:center;border:1px solid #505154;padding:0.35em 1em;background:#666669 url(../images/button-back.png) repeat-x left center;color:#fff;border-radius:0.2em;-moz-border-radius:0.2em;}
.button:hover, div.form .button:hover {text-decoration:none;background-color:#0067C3;cursor:pointer;}
.button.blue {background-color:#1e82eb;text-shadow:0 -1px 0 #0f57a3;}
	.button.blue:hover {background-color:#00a3ff;color:#fff;}
.button.green {background-color:#50a707;text-shadow:0 -1px 0 #428f00;}
	.button.green:hover {background-color:#5dc307;color:#fff;}
.button.white {background-color:#e9eef0;text-shadow:0 1px 0 #fff;color:#7c8187;border-color:#93999d;font-weight:normal;}
	.button.white:hover {background-color:#e9eef0;color:#424547;}

.container {padding: 0 2em;font: inherit;vertical-align: baseline;}
.row {width: 100%;max-width: 960px;min-width: 720px;margin:0 auto;padding:2em 0;zoom: 1;border-top:1px solid #d3dee3;clear:left;}
div.trio {width:30%;margin-left:5%;float:left;}
div.trio.first {margin:0;padding:0;}

div.header {background:#fff url(../images/back2.png) repeat-x center 3px;margin:0 -2em;padding:0 2em;border-bottom:1px solid #d3dee3;}
	div.header div.row {border:0;position:relative;}
	div.header div.login {position:absolute;right:0;top:4em;}
		div.header div.login a, div.create-site-buttons a, div.create-site-buttons button {display:inline-block;margin-left:1em;}
		div.header div.login a span.usr, div.create-site-buttons a span.usr {display:inline-block;padding-left:24px;background:url(../images/usr.png) left center no-repeat;margin-left:-4px;font-weight:normal;}
	div.header p {margin:0;}
	p.logo {position:absolute;right:0;top:2.5em;}

div.promo {background:url(../images/tien.png) repeat-x center top;margin:0 -2em;padding:0 2em;}
div.promo div.row {position:relative;border:0;}
	div.promo-text {width:31%;}
	div.video {width:65%;height:380px;position:absolute;top:2em;right:0;overflow:hidden;}
    div.video iframe, div.modal-video iframe {border:0 none;}
    div.video iframe {width:100%;height:100%}
	p.try {margin-top:2em;}
		p.try span.pointer {display:inline-block;white-space:nowrap;padding-left:0.3em;font-size:0.80em;}
			p.try span.pointer span {color:#75838a;position:relative;top:0.15em;font-size:1.25em}

div.features img {float:left;}
div.features h4 {padding-left:80px;line-height:64px;white-space:nowrap;margin-bottom:1em;}

div.showroom {border-bottom:1px solid #eee;}
	h3.title {margin-bottom:1.25em;}
	div.showroom a img {display:block;margin-bottom:1em;}
	div.showroom h4 {font-size:1em;}
	div.showroom p {font-size:0.80em;}

div.faq dl {margin-bottom:1.333em;}
	div.faq dt {line-height:1.333em;margin:1.333em 0 0 0;font-size: 1.2em;font-weight:700;color:#232931;text-shadow:0 1px 0 #fff;}
div.pr div.trio p {font-size:0.80em;}
	div.pr div.trio {margin-top:2em;}

div.footer {height:3em;}
	ul.bottomnav li {float:left;padding:0 2em 0 0;}


form {position:relative;color:#fff;}
	div.modal-box-content form {padding:3em 2em 3em 2em}
form h4 {padding:1em 2em 1em 30%;}
form p {clear:left;margin-bottom:1em;position:relative;}
	form p label {float:left;width:28%;text-transform:lowercase;padding-top:0.35em;text-align:right;margin-right:2%;color:#666669;}
	form p.uppercase label {text-transform: uppercase;}
	form p span.helptext {display:block;font-size:.8em;color:#666669;margin-left:30%;}
	form p input, form p textarea {width:32%;margin-right:2%;line-height:1.2em;padding:0.3em;font-size:1em;color:#232931;font-family:"museo-sans-rounded", sans-serif;}
		form p input::-webkit-input-placeholder, div.form form p input::-moz-placeholder {font-weight:normal;}
	form p textarea {font-family:Consolas,Monaco,monospace;}
	form p input.button, form p a {width:33%;margin-left:30%;margin-right:0;}
		form p input.button.inline {margin-left:2%; padding-top:12px;}
form ul.errorlist {list-style: none;color: #F65;text-align:left;padding: 0.7em 0 0.3em 30%;margin:0;}
	form ul.errorlist li {margin:0;}
form img.typocaptcha {vertical-align:middle;}

.create-site {width:40em;background:url(../images/back2.png) repeat-x center 3px;border-radius:8px;-moz-border-radius:8px;}
	.create-site h4 {padding:0 0 1em 6.7em;}
	div.modal-box-content .create-site form {padding-bottom:1em;}
	.create-site label {width:7em;margin-right:1em;}
	.create-site input {width:15em;margin-right:1em;}
	.create-site input.button {margin:0;width:9em;padding:0.35em 0;}
	.create-site p.note {padding:2em 9em 3em 12.5em;font-size:0.8em;background:#edf1f3 url(../images/tien.png) repeat-x center top;border-radius:0 0 8px 8px;-moz-border-radius:0 0 8px 8px;}
    div.create-site-buttons {padding-bottom: 10px;text-align: center;}

table.pricelist {background:#fff;border-collapse:collapse;width:100%;border-radius:8px;margin:2em 0;}
	table.pricelist th, table.pricelist td {padding:1em;border-bottom:1px solid #EDF1F3;}
	table.pricelist th {vertical-align:center;padding-left:68px;text-align:left;color:#666669;border-right:1px solid #EDF1F3;}
		table.pricelist th.base {border-right:0;padding:2em 2em 2em 68px;background:url(../images/ico-base.png) no-repeat 24px center;}
		table.pricelist th.themes {background:url(../images/ico-themes.png) no-repeat 24px center;}
		table.pricelist th.modules {background:url(../images/ico-modules.png) no-repeat 24px center;}
	table.pricelist td.price {text-align:right;padding:1em 2em;}
		table.pricelist td.price span.free {color:#50A707;}
		table.pricelist td.price span.type {font-size:0.8em;}

hr.cleaner {visibility:hidden;clear:both;}

/* modal dialog */
div.modal-overlay {z-index:3200;position:fixed; top:0;left:0;width:100%;height:100%;background:#000;opacity:0.5;filter:alpha(opacity=50);}
div.modal-box {position:fixed;z-index:9999;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
div.modal-box-content {border-radius:8px;-moz-border-radius:8px;background:#fff;color:#424547;box-shadow:0 4px 16px #000;-moz-box-shadow:0 4px 16px #000;}
div.modal-box.fullscreen {position: fixed;left:3em; right:3em;top:2em; bottom:0;}
div.modal-box.fullscreen div.modal-box-content {border-radius:8px 8px 0 0;-moz-border-radius:8px 8px 0 0;}
	div.modal-box.fullscreen.modal-video div.modal-box-content {background-color: transparent;border-radius:0;-moz-border-radius:0;box-shadow:none;-moz-box-shadow:none;}
	div.modal-box.fullscreen.modal-video div.modal-box-content iframe {margin: auto;}
.modal-close {position:absolute;background:url(../images/x.png) 0 0 no-repeat;width:24px;height:27px;display:block;text-indent:-9999px;top:-12px;right:-12px;cursor:pointer;}

/* shared vanilla modal used by public site and home pages */
body.site-modal-open {overflow:hidden;}
.site-modal-overlay {z-index:3200;position:fixed;inset:0;background:#000;opacity:0.85;}
.site-modal {z-index:3201;position:fixed;inset:1rem;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.site-modal-content {position:relative;max-width:min(760px, calc(100vw - 4rem));max-height:calc(100vh - 4rem);overflow:auto;background:#fff;color:#424547;border-radius:8px;box-shadow:0 4px 16px #000;pointer-events:auto;}
.site-modal-close {position:absolute;background:url(../images/x.png) 0 0 no-repeat;width:24px;height:27px;display:block;text-indent:-9999px;top:12px;right:12px;cursor:pointer;}
.site-modal-create-site .site-modal-content {max-width:min(40em, calc(100vw - 4rem));}
.site-modal-create-site .create-site {max-width:100%;}
.site-modal-create-site .create-site form {padding:3em 2em 1em;}
.site-modal-video .site-modal-content {max-width:none;max-height:none;overflow:visible;background:transparent;border-radius:0;box-shadow:none;}
.site-modal-video iframe {display:block;width:min(1024px, calc(100vw - 8rem), calc((100vh - 6rem) * 1.777));height:auto;aspect-ratio:16 / 9;border:0;}
.site-modal-video .site-modal-close {top:-12px;right:-32px;}

/* loader */
div.loader {padding:4em 2em;text-align:center;}
div.loader span {display:block;margin:0 auto;width:128px;height:128px;background:#fff url(../images/loader.gif) no-repeat;border-radius:64px;}
div.loader p {padding-top:1em;}

/* tipsy */
.tipsy { font-size: 13px; position: absolute; padding: 5px; z-index: 100000; }
.tipsy-inner { background-color: #000; color: #FFF; max-width: 200px; padding: 10px 8px 8px 8px; text-align: center; }
/* Rounded corners */
.tipsy-inner { border-radius: 3px; -moz-border-radius: 3px;}
.tipsy-inner em {display:block;color:#f33;}
/* Uncomment for shadow */
/*.tipsy-inner { box-shadow: 0 0 5px #000000; -webkit-box-shadow: 0 0 5px #000000; -moz-box-shadow: 0 0 5px #000000; }*/

.tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #000; }

/* Rules to colour arrows */
.tipsy-arrow-n { border-bottom-color: #000; }
.tipsy-arrow-s { border-top-color: #000; }
.tipsy-arrow-e { border-left-color: #000; }
.tipsy-arrow-w { border-right-color: #000; }

.tipsy-n .tipsy-arrow { top: 0; left: 50%; margin-left: -5px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; }
.tipsy-nw .tipsy-arrow { top: 0; left: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;}
.tipsy-ne .tipsy-arrow { top: 0; right: 10px; border-bottom-style: solid; border-top: none;  border-left-color: transparent; border-right-color: transparent;}
.tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -5px; border-top-style: solid; border-bottom: none;  border-left-color: transparent; border-right-color: transparent; }
.tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; border-top-style: solid; border-bottom: none;  border-left-color: transparent; border-right-color: transparent; }
.tipsy-se .tipsy-arrow { bottom: 0; right: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
.tipsy-e .tipsy-arrow { right: 0; top: 50%; margin-top: -5px; border-left-style: solid; border-right: none; border-top-color: transparent; border-bottom-color: transparent; }
.tipsy-w .tipsy-arrow { left: 0; top: 50%; margin-top: -5px; border-right-style: solid; border-left: none; border-top-color: transparent; border-bottom-color: transparent; }

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
	body {font-size:130%;width:100%;padding:0;}
	.container {padding:0;width:640px;}
	.row {padding:2em;width:auto;}
	div.header {margin:0;padding:0;width:100%;background:none;}
		div.header div.row {width:100%;background:#fff url(../images/back2.png) repeat-x center 3px;border-bottom:1px solid #d3dee3;font-size:0.8em;padding:2em 2.5em;}
		div.header div.login, p.logo {right:2em;}
	div.promo {background:none;}
	div.video {position:static;width:100%;margin-bottom:2em;}
	div.promo-text {width:100%;}
	div.trio {float:none;clear:left;margin:0;padding-top:2em;width:auto;}
	div.showroom a img {float:left;margin:0 12px 0 0;width:288px;height:192px;}
	div.showroom p {margin-left:300px;}
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
	.container {width:1024px}
}