@charset "UTF-8";
/* ==========================================================================
Table of Contents
========================================================================== */
/* 
(∞)


___ ___
. \ \ \ \ 
/ \ \ \ \ \ 
/ / \ \ \ \
/__/ \__\ \__\


1. Includes
2. General
3. Utility 
4. Icons
5. Header
6. Pages
7. Forms
8. Tables
9. Footer
10. Other
11. Media Queries

*/
/* ==========================================================================
1. Includes
========================================================================== */
/*! normalize.css 2012-07-07T09:50 UTC - http://github.com/necolas/normalize.css */
/* ==========================================================================
HTML5 display definitions
========================================================================== */
/*
* Corrects `block` display not defined in IE6/7/8/9 & FF3.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
display: block; }

/*
* Corrects `inline-block` display not defined in IE6/7/8/9 & FF3.
*/
audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1; }

/*
* Prevents modern browsers from displaying `audio` without controls.
* Remove excess height in iOS5 devices.
*/
audio:not([controls]) {
display: none;
height: 0; }

/*
* Addresses styling for `hidden` attribute not present in IE7/8/9, FF3, S4.
* Known issue: no IE6 support.
*/
[hidden] {
display: none; }

/* ==========================================================================
Base
========================================================================== */
/*
* 1. Corrects text resizing oddly in IE6/7 when body `font-size` is set using
* `em` units.
* 2. Prevents iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-size: 100%;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
-ms-text-size-adjust: 100%;
/* 2 */ }

/*
* Addresses `font-family` inconsistency between `textarea` and other form
* elements.
*/
html,
button,
input,
select,
textarea {
font-family: sans-serif; }

/*
* Addresses margins handled incorrectly in IE6/7.
*/
body {
margin: 0; }

/* ==========================================================================
Links
========================================================================== */
/*
* Addresses `outline` inconsistency between Chrome and other browsers.
*/
a:focus {
outline: thin dotted; }

/*
* Improves readability when focused and also mouse hovered in all browsers.
* people.opera.com/patrickl/experiments/keyboard/test
*/
a:active,
a:hover {
outline: 0; }

/* ==========================================================================
Typography
========================================================================== */
/*
* Addresses font sizes and margins set differently in IE6/7.
* Addresses font sizes within `section` and `article` in FF4+, Chrome, S5.
*/
h1 {
font-size: 2em;
margin: 0.67em 0; }

h2 {
font-size: 1.5em;
margin: 0.83em 0; }

h3 {
font-size: 1.17em;
margin: 1em 0; }

h4 {
font-size: 1em;
margin: 1.33em 0; }

h5 {
font-size: 0.83em;
margin: 1.67em 0; }

h6 {
font-size: 0.75em;
margin: 2.33em 0; }

/*
* Addresses styling not present in IE7/8/9, S5, Chrome.
*/
abbr[title] {
border-bottom: 1px dotted; }

/*
* Addresses style set to `bolder` in FF3+, S4/5, Chrome.
*/
b,
strong {
font-weight: bold; }

blockquote {
margin: 1em 40px; }

/*
* Addresses styling not present in S5, Chrome.
*/
dfn {
font-style: italic; }

/*
* Addresses styling not present in IE6/7/8/9.
*/
mark {
background: #ff0;
color: #000; }

/*
* Addresses margins set differently in IE6/7.
*/
p,
pre {
margin: 1em 0; }

/*
* Corrects font family set oddly in IE6, S4/5, Chrome.
* en.wikipedia.org/wiki/User:Davidgothberg/Test59
*/
code,
kbd,
pre,
samp {
font-family: monospace, serif;
_font-family: 'courier new', monospace;
font-size: 1em; }

/*
* Improves readability of pre-formatted text in all browsers.
*/
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word; }

/*
* Addresses CSS quotes not supported in IE6/7.
*/
q {
quotes: none; }

/*
* Addresses `quotes` property not supported in S4.
*/
q:before,
q:after {
content: '';
content: none; }

small {
font-size: 75%; }

/*
* Prevents `sub` and `sup` affecting `line-height` in all browsers.
* gist.github.com/413930
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline; }

sup {
top: -0.5em; }

sub {
bottom: -0.25em; }

/* ==========================================================================
Lists
========================================================================== */
/*
* Addresses margins set differently in IE6/7.
*/
dl,
menu,
ol,
ul {
margin: 1em 0; }

dd {
margin: 0 0 0 40px; }

/*
* Addresses paddings set differently in IE6/7.
*/
menu,
ol,
ul {
padding: 0 0 0 40px; }

/*
* Corrects list images handled incorrectly in IE7.
*/
nav ul,
nav ol {
list-style: none;
list-style-image: none; }

/* ==========================================================================
Embedded content
========================================================================== */
/*
* 1. Removes border when inside `a` element in IE6/7/8/9, FF3.
* 2. Improves image quality when scaled in IE7.
* code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
*/
img {
border: 0;
/* 1 */
-ms-interpolation-mode: bicubic;
/* 2 */ }

/*
* Corrects overflow displayed oddly in IE9.
*/
svg:not(:root) {
overflow: hidden; }

/* ==========================================================================
Figures
========================================================================== */
/*
* Addresses margin not present in IE6/7/8/9, S5, O11.
*/
figure {
margin: 0; }

/* ==========================================================================
Forms
========================================================================== */
/*
* Corrects margin displayed oddly in IE6/7.
*/
form {
margin: 0; }

/*
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em; }

/*
* 1. Corrects color not being inherited in IE6/7/8/9.
* 2. Corrects text not wrapping in FF3.
* 3. Corrects alignment displayed oddly in IE6/7.
*/
legend {
border: 0;
/* 1 */
padding: 0;
white-space: normal;
/* 2 */
*margin-left: -7px;
/* 3 */ }

/*
* 1. Corrects font size not being inherited in all browsers.
* 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome.
* 3. Improves appearance and consistency in all browsers.
*/
button,
input,
select,
textarea {
font-size: 100%;
/* 1 */
margin: 0;
/* 2 */
vertical-align: baseline;
/* 3 */
*vertical-align: middle;
/* 3 */ }

/*
* Addresses FF3/4 setting `line-height` on `input` using `!important` in the
* UA stylesheet.
*/
button,
input {
line-height: normal; }

/*
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Corrects inability to style clickable `input` types in iOS.
* 3. Improves usability and consistency of cursor style between image-type
* `input` and others.
* 4. Removes inner spacing in IE7 without affecting normal text inputs.
* Known issue: inner spacing remains in IE6.
*/
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
/* 2 */
cursor: pointer;
/* 3 */
*overflow: visible;
/* 4 */ }

/*
* Re-set default cursor for disabled elements.
*/
button[disabled],
input[disabled] {
cursor: default; }

/*
* 1. Addresses box sizing set to content-box in IE8/9.
* 2. Removes excess padding in IE8/9.
* 3. Removes excess padding in IE7.
* Known issue: excess padding remains in IE6.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
*height: 13px;
/* 3 */
*width: 13px;
/* 3 */ }

/*
* 1. Addresses `appearance` set to `searchfield` in S5, Chrome.
* 2. Addresses `box-sizing` set to `border-box` in S5, Chrome (include `-moz`
* to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield;
/* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
/* 2 */
box-sizing: content-box; }

/*
* Removes inner padding and search cancel button in S5, Chrome on OS X.
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; }

/*
* Removes inner padding and border in FF3+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0; }

/*
* 1. Removes default vertical scrollbar in IE6/7/8/9.
* 2. Improves readability and alignment in all browsers.
*/
textarea {
overflow: auto;
/* 1 */
vertical-align: top;
/* 2 */ }

/* ==========================================================================
Tables
========================================================================== */
/*
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0; }

/******************************************************************
CUSTOMIZED RESET VALUES
I added these extra styles as a more personalized reset. Feel free
to remove them if you like or add your own. If you want to update
the normalize styles, make sure to edit from this point up.
******************************************************************/
p {
-webkit-hyphens: auto;
-epub-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto; }

b, strong, .strong {
font-weight: bold; }

dfn, em, .em {
font-style: italic; }

small, .small {
font-size: 75%; }

ul  {
padding: 0;
list-style-type: none; }

ol li {
padding-top:5px;
padding-bottom:5px;
list-style-type: decimal; }

dd {
margin: 0; }

.sidebar ul,
.sidebar ol,
.commentlist {
list-style: none;
}

/******************************************************************
Stylesheet: Mixins & Constants Stylesheet
******************************************************************/
/*********************
CLEARFIXIN'
*********************/
.clearfix:before, .clearfix:after {
content: "";
display: table; }
.clearfix:after {
clear: both; }

/*********************
TOOLS
*********************/
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }

.image-replacement {
text-indent: 100%;
white-space: nowrap;
overflow: hidden; }

/*********************
COLORS
*********************/
/*********************
TYPOGRAPHY
*********************/
.text-grey {
color: #9daab3; }

.text-dark-grey {
color: #2d4454; }

.text-orange {
color: #e9b41e; }

.text-white {
color: #fff; }

span.amp {
font-family: Baskerville,'Goudy Old Style',Palatino,'Book Antiqua',serif !important;
font-style: italic; }

.text-left {
text-align: left; }

.text-center {
text-align: center; }

.text-right {
text-align: right; }

/*********************
TRANSITION
*********************/
/*********************
EASING
*********************/
/*********************
BUTTONS
*********************/
.button, .button:visited {
position: relative;
z-index: 1;
font-size: 2.4rem;
padding: 22px 38px 25px;
color: #564a2b;
text-decoration: none;
text-shadow: 1px 1px 0px #f1cf5e;
outline: none;
border: 0;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
cursor: pointer;
overflow: hidden;
-webkit-transform: translate3d(0, 0, 0); }
.button:hover, .button:visited:hover {
color: #564a2b; }
.button:hover:before, .button:visited:hover:before {
left: -100%; }
.button:before, .button:visited:before {
content: "";
z-index: -1;
display: block;
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 100%;
background: -webkit-linear-gradient(135deg, #f2cb43 0%, #e9b41e 35%, #e9b41e 65%, #f2cb43 100%);
background: -moz-linear-gradient(135deg, #f2cb43 0%, #e9b41e 35%, #e9b41e 65%, #f2cb43 100%);
background: -o-linear-gradient(135deg, #f2cb43 0%, #e9b41e 35%, #e9b41e 65%, #f2cb43 100%);
background: linear-gradient(135deg, #f2cb43 0%, #e9b41e 35%, #e9b41e 65%, #f2cb43 100%);
-webkit-transition: left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.button:after, .button:visited:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: calc(100% - 2px);
height: calc(100% - 2px);
border: 1px solid #f5de90; }
.button:hover, .button:visited:hover {
/*background: -webkit-linear-gradient(-45deg, #f2cb43 0%, #f2cb43 60%);
background: -moz-linear-gradient(-45deg, #f2cb43 0%, #f2cb43 60%);
background: -o-linear-gradient(-45deg, #f2cb43 0%, #f2cb43 60%);
background: linear-gradient(-45deg, #f2cb43 0%, #f2cb43 60%);*/ }
.button:active, .button:visited:active {
background-color: #f2cb43; }
.button:active:before, .button:visited:active:before {
opacity: 0; }

.b-sm-font {
font-size: 2.2rem; }

a.button, a.button-b {
display: inline-block;
margin: 20px 15px 0; }

.button-b, button-b:visited {
margin: 22px 0 0 20px;
position: relative;
display: block;
padding: 7px 15px 8px;

text-align: center;
text-decoration: none;
color: #11466a;
font-size: 15px;
z-index: 1;
line-height: 100%;
border: 2px solid #e9b41e;
background: none;
outline: none;
cursor: pointer;
-webkit-transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.button-b:after, button-b:visited:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 0;
z-index: -1;
background: #e9b41e;
-webkit-transition: height 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: height 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: height 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: height 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: height 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.button-b:hover, button-b:visited:hover {
color: #fff; }
.button-b:hover:after, button-b:visited:hover:after {
height: 100%; }

.button-b-blue {
border-color: #16c1f3; }
.button-b-blue:after {
background: #16c1f3; }

.button-b-white {
border-color: #fff;
color: #fff; }
.button-b-white:after {
background: #fff; }
.button-b-white:hover {
color: #2d4454; }

.b-set {
width: 180px; }

.b-fluid {
text-align: center;
display: block;
width: 100%; }

.b-dborder:after, .b-dborder:visited:after {
border: 1px solid #caa41c; }

.b-freetrial {
width: 225px;}

/*********************
OTHER VARS
*********************/
.tr-d:after, .tr-w:after {
content: "";
z-index: 999;
position: absolute;
bottom: -10px;
left: calc(50% - 10px);
width: 0;
height: 0;
border-top: 10px solid #2d4454;
border-left: 10px solid transparent;
border-right: 10px solid transparent; }

.tr-w:after {
border-top: 10px solid #fff; }

/*=====================
TIMER
=====================*/
/* ==========================================================================
2. General - Setting up some base styles
========================================================================== */
html {
font-size: 62.5%;
min-height: 100%; }

body {
min-height: 100%;
font-family: "Roboto", Helvetica, Arial, sans-serif;
font-weight: 400;
font-size: 1.5rem;
line-height: 1.4em;
color: #2d4454;
background-color: #fff; }

::-moz-selection {
color: #222;
background: #D6EDFF;
text-shadow: none; }

::selection {
color: #222;
background: #D6EDFF;
text-shadow: none; }

h1, h2, h3,
h4, h5, h6,
.h1, .h2, .h3 {
text-rendering: optimizeLegibility;
line-height: 1.1;
margin-top: 0;
font-family: 'Droid Sans', sans-serif;
font-weight: 700; }

h1, .h1 {
font-size: 3.5rem;
margin: 0; }

.m-h1 {
font-size: inherit; }

h2, .h2 {
font-size: 3.5rem; }

h3, .h3 {
font-family: "Roboto", Helvetica, Arial, sans-serif;
font-size: 2.2rem;
color: #e9b41e;
margin-left: -1px; }

h4, .h4 {
font-size: 1.5rem;
color: #9daab3;
margin: 1em 0 .3em;
font-family: "Roboto", Helvetica, Arial, sans-serif;
font-weight: 400; }

h4 + p, .h4 + p {
margin-top: 0; }

h5 {
font-size: 2.5rem; }

h6 {
font-size: 2rem; }

a {
color: #e9b41e;
-webkit-tap-highlight-color: transparent;
text-decoration: none; }

a:hover {
color: #16c1f3; }

a.white {
color: #ffffff;
}

a.white:hover {
color: #2d4454;
}

h1 a, h2 a, h3 a,
h4 a, h5 a, h6 a {
color: #e9b41e; }

p, ul, ol {
margin: 1.6em 0; }

p.h1 {
max-width: 100%; }

ol ol, ul ul,
ul ol, ol ul {
margin: 0; }

hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #efefef;
margin: 3.2em 0;
padding: 0; }

blockquote {
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 1.6em 0 1.6em -2.2em;
padding: 0 0 0 1.6em;
border-left: #4a4a4a 0.4em solid; }

blockquote p {
margin: 0.8em 0;
font-style: italic; }

blockquote small {
display: inline-block;
margin: 0.8em 0 0.8em 1.5em;
font-size: 0.9em;
color: #ccc; }

blockquote small:before {
content: '\2014 \00A0'; }

blockquote cite {
font-weight: bold; }

blockquote cite a {
font-weight: normal; }

dl {
margin: 1.6em 0; }

dl dt {
float: left;
width: 180px;
overflow: hidden;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: bold;
margin-bottom: 1em; }

dl dd {
margin-left: 200px;
margin-bottom: 1em; }

mark {
background-color: #ffc336; }

code, tt {
padding: 1px 3px;
font-family: Inconsolata, monospace, sans-serif;
font-size: 0.85em;
white-space: pre;
border: 1px solid #E3EDF3;
background: #F7FAFB;
border-radius: 2px; }

pre {
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 1.6em 0;
border: 1px solid #E3EDF3;
width: 100%;
padding: 10px;
font-family: Inconsolata, monospace, sans-serif;
font-size: 0.9em;
white-space: pre;
overflow: auto;
background: #F7FAFB;
border-radius: 3px; }

pre code, tt {
font-size: inherit;
white-space: -moz-pre-wrap;
white-space: pre-wrap;
background: transparent;
border: none;
padding: 0; }

kbd {
display: inline-block;
margin-bottom: 0.4em;
padding: 1px 8px;
border: #ccc 1px solid;
color: #666;
text-shadow: #fff 0 1px 0;
font-size: 0.9em;
font-weight: bold;
background: #f4f4f4;
border-radius: 4px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 1px 0 0 white inset; }

table {
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 1.6em 0;
width: 100%;
max-width: 100%;
background-color: transparent; }

table th,
table td {
padding: 8px 0;
line-height: 20px;
text-align: left;
vertical-align: top; }

table th {
color: #000; }

table caption + thead tr:first-child th,
table caption + thead tr:first-child td,
table colgroup + thead tr:first-child th,
table colgroup + thead tr:first-child td,
table thead:first-child tr:first-child th,
table thead:first-child tr:first-child td {
border-top: 0; }

table tbody + tbody {
/*border-top: 2px solid #efefef;*/ }

table table table {
background-color: #fff; }

/* ==========================================================================
3. Utils
========================================================================== */
.clearfix:before, .clearfix:after {
content: "";
display: table; }
.clearfix:after {
clear: both; }

.hidden {
text-indent: -9999px;
visibility: hidden;
display: none; }

.invisible {
visibility: hidden;
overflow: hidden;
width: 0;
height: 0; }

.m-hidden {
display: none !important; }

/* Creates a responsive wrapper that makes our content scale nicely */
.inner {
position: relative;
width: 90%;
max-width: 1140px;
margin: 0 auto; }

/* Centres vertically yo. (IE8+) */
.vertical {
display: table-cell;
vertical-align: middle;
text-align: center; }

.no-margin {
margin: 0 !important; }

.center {
display: block !important;
margin-left: auto !important;
margin-right: auto !important; }

.text-center {
text-align: center; }

.big {
font-size: 2.2rem;
line-height: 1.25em; }

.small {
font-size: 1.2rem; }

.super-small {
font-size: 1rem; }

.fat {
font-weight: 700; }

.flex {
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;
/* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;
/* TWEENER - IE 10 */
display: -webkit-flex;
/* NEW - Chrome */
display: flex; }

.dark-color {
color: #2d4454; }

.img-full {
margin: 0 0 4rem; }
.img-full img {
width: 100%;
height: auto; }

.full-width {
max-width: 100%;
width: 100%;
height: auto; }

.el-scroller {
width: 100%;
overflow-x: scroll; }

.centered-content {
max-width: 720px;
margin: 0 auto; }

.outer {
position: relative;
padding-right: 11px; }
.outer:after {
content: "";
position: absolute;
top: 7px;
right: 2px;
width: 4px;
height: 4px;
border: 1px solid #e9b41e;
-webkit-transition: border-color 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-ms-transition: border-color 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-o-transition: border-color 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-transition: border-color 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: border-color 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955); }
.outer:before {
content: "";
position: absolute;
top: 5px;
right: 0px;
width: 4px;
height: 4px;
border-top: 1px solid #e9b41e;
border-right: 1px solid #e9b41e;
-webkit-transition: border-color 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-ms-transition: border-color 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-o-transition: border-color 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-transition: border-color 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: border-color 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955); }
.outer:hover:after, .outer:hover:before {
border-color: #16c1f3; }

.anchor {
display: block;
position: relative;
top: -65px;
visibility: hidden; }

/* GRID */
.grid-row {
margin: 0; }
.grid-row:before, .grid-row:after {
content: "";
display: table; }
.grid-row:after {
clear: both; }

.col-full {
width: 100%; }

.col-2-3 {
width: 100%; }

.col-1-3 {
width: 100%; }

.col-1-2 {
width: 100%; }

.col-1-4 {
width: 100%; }

.col-3-4 {
width: 100%; }

.col-1-8 {
width: 100%; }

/* ==========================================================================
4. Icons
========================================================================== */
.icons:first-of-type {
margin-top: 20px; }
.icons div[class*="col-"] {
max-width: 300px;
margin: 0 auto 20px;
height: 70px;
overflow: hidden;
-webkit-transform: translate3d(0, 0, 0); }
.icons div[class*="col-"] p {
text-align: left;
margin: 10px 0 15px;
font-size: 1.2rem; }
.icons *[class*="icon-"] {
display: table;
width: 100%;
height: 70px;
padding: 0 0 0 110px;
line-height: 1.2;
text-align: left;
cursor: pointer; }
.icons *[class*="icon-"] span {
display: table-cell;
height: 100%;
vertical-align: middle;
color: #e9b41e;
-webkit-transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.icons *[class*="icon-"]:hover span {
color: #16c1f3; }

.lonely-icon {
display: block;
margin: 2rem auto 0;
width: 100px;
height: 70px; }

.icon-login {
background: url(../../images/1/vs/icons_home.png) 0 0 no-repeat; }

.icon-free-calls {
background: url(../../images/1/vs/icons_home.png) 0 -70px no-repeat; }

.icon-reduced-rates {
background: url(../../images/1/vs/icons_home.png) 0 -140px no-repeat; }

.icon-hosted-system {
background: url(../../images/1/vs/icons_home.png) 0 -210px no-repeat; }

.icon-virtual-numbers {
background: url(../../images/1/vs/icons_home.png) 0 -280px no-repeat; }

.icon-web-portal {
background: url(../../images/1/vs/icons_home.png) 0 -350px no-repeat; }

.icon-multipoint {
background: url(../../images/1/vs/icons_home.png) 0 -420px no-repeat; }

.icon-pdf {
background: url(../../images/1/vs/icons_home.png) 0 -490px no-repeat; }

.icon-free-calls-light {
background: url(../../images/1/vs/icons_light.png) 0 0 no-repeat; }

.icon-sms {
background: url(../../images/1/vs/icons_light.png) 0 -70px no-repeat; }

.icon-web-calls {
background: url(../../images/1/vs/icons_light.png) 0 -140px no-repeat; }

.icon-how-trial {
background: url(../../images/1/vs/icons_light.png) 0 -210px no-repeat; }

.icon-credit-card {
background: url(../../images/1/vs/icons_light.png) 0 -280px no-repeat; }

.icon-cancel-trial {
background: url(../../images/1/vs/icons_light.png) 0 -350px no-repeat; }

.icon-pay-as-you-grow {
background: url(../../images/1/vs/icons_features.png) 0 0 no-repeat; }

.icon-instant-deployment {
background: url(../../images/1/vs/icons_features.png) 0 -70px no-repeat; }

.icon-no-contract {
background: url(../../images/1/vs/icons_features.png) 0 -140px no-repeat; }

.icon-data-centers {
background: url(../../images/1/vs/icons_features.png) 0 -210px no-repeat; }

.icon-one-second-billing {
background: url(../../images/1/vs/icons_features.png) 0 -280px no-repeat; }

.icon-numbers-porting {
background: url(../../images/1/vs/icons_features.png) 0 -350px no-repeat; }

.icon-remote-office {
background: url(../../images/1/vs/icons_features.png) 0 -420px no-repeat; }

.icon-mobile-client {
background: url(../../images/1/vs/icons_features.png) 0 -490px no-repeat; }

.icon-failover-protection {
background: url(../../images/1/vs/icons_features.png) 0 -560px no-repeat; }

.icon-call-transfer {
background: url(../../images/1/vs/icons_features.png) 0 -630px no-repeat; }

.icon-music-on-hold {
background: url(../../images/1/vs/icons_features.png) 0 -700px no-repeat; }

.icon-conference-calling {
background: url(../../images/1/vs/icons_features.png) 0 -770px no-repeat; }

.icon-reception-console {
background: url(../../images/1/vs/icons_features.png) 0 -840px no-repeat; }

.icon-follow-me {
background: url(../../images/1/vs/icons_features.png) 0 -910px no-repeat; }

.icon-voice-response {
background: url(../../images/1/vs/icons_features.png) 0 -980px no-repeat; }

.icon-voicemail {
background: url(../../images/1/vs/icons_features.png) 0 -1050px no-repeat; }

.icon-call-waiting {
background: url(../../images/1/vs/icons_features.png) 0 -1120px no-repeat; }

.icon-contacts-directory {
background: url(../../images/1/vs/icons_features.png) 0 -1190px no-repeat; }

.icon-ring-groups {
background: url(../../images/1/vs/icons_features.png) 0 -1260px no-repeat; }

.icon-extension-dialing {
background: url(../../images/1/vs/icons_features.png) 0 -1330px no-repeat; }

.icon-call-pickup {
background: url(../../images/1/vs/icons_features.png) 0 -1400px no-repeat; }

.icon-acd-queues {
background: url(../../images/1/vs/icons_features.png) 0 -1470px no-repeat; }

.icon-call-parking {
background: url(../../images/1/vs/icons_features.png) 0 -1540px no-repeat; }

.icon-click-to-call {
background: url(../../images/1/vs/icons_features.png) 0 -1610px no-repeat; }

.icon-provisioning {
background: url(../../images/1/vs/icons_features.png) 0 -1680px no-repeat; }

.icon-call-recording {
background: url(../../images/1/vs/icons_features.png) 0 -1750px no-repeat; }

.icon-time-based-routing {
background: url(../../images/1/vs/icons_features.png) 0 -1820px no-repeat; }

.icon-company-directory {
background: url(../../images/1/vs/icons_features.png) 0 -1890px no-repeat; }

.icon-fax2email {
background: url(../../images/1/vs/icons_features.png) 0 -1960px no-repeat; }

.icon-unlimited-storage {
background: url(../../images/1/vs/icons_features.png) 0 -2030px no-repeat; }

.icon-emergency-service-calling {
background: url(../../images/1/vs/icons_features.png) 0 -2100px no-repeat; }

.icon-sms-gateway {
background: url(../../images/1/vs/icons_features.png) 0 -2510px no-repeat; }

.icon-dynamic-cli {
background: url(../../images/1/vs/icons_features.png) 0 -2585px no-repeat; }

.icon-sales-force {
background: url(../../images/1/vs/icons_features.png) 0 -2170px no-repeat; }

.icon-crm {
background: url(../../images/1/vs/icons_features.png) 0 -2240px no-repeat; }

.icon-sage-act {
background: url(../../images/1/vs/icons_features.png) 0 -2310px no-repeat; }

.icon-avaya {
background: url(../../images/1/vs/icons_features.png) 0 -2380px no-repeat; }

.icon-cisco {
background: url(../../images/1/vs/icons_features.png) 0 -2450px no-repeat; }

.big-icon-expensive {
background: url(../../images/1/vs/icons_big.png) 0 0 no-repeat; }

.big-icon-dedicated {
background: url(../../images/1/vs/icons_big.png) 0 -140px no-repeat; }

.big-icon-time {
background: url(../../images/1/vs/icons_big.png) 0 -280px no-repeat; }

.big-icon-wallet {
background: url(../../images/1/vs/icons_big.png) 0 -420px no-repeat; }

.big-icon-monitor {
background: url(../../images/1/vs/icons_big.png) 0 -560px no-repeat; }

.big-icon-cloud {
background: url(../../images/1/vs/icons_big.png) 0 -700px no-repeat;
width: 100%;
max-width: 170px;
height: 140px; }

.big-icon-hq {
background: url(../../images/1/vs/icons_big.png) 0 -840px no-repeat;
width: 100%;
max-width: 140px;
height: 140px; }

.big-icon-world {
background: url(../../images/1/vs/icon_world.png) 0 0 no-repeat;
width: 100%;
max-width: 783px;
height: 108px;
background-size: cover;
background-size: 100%; }

.big-icon-world-dark {
width: 100%;
max-width: 783px; }
.big-icon-world-dark img {
width: 100%; }

.system-icon-windows {
background: url(../../images/1/vs/icons_system.png) 0 0px no-repeat; }

.system-icon-mac {
background: url(../../images/1/vs/icons_system.png) 0 -40px no-repeat; }

.system-icon-linux {
background: url(../../images/1/vs/icons_system.png) 0 -80px no-repeat; }

.system-icon-android {
background: url(../../images/1/vs/icons_system.png) 0 -120px no-repeat; }

.system-icon-iphone {
background: url(../../images/1/vs/icons_system.png) 0 -160px no-repeat; }

.system-icon-ipad {
background: url(../../images/1/vs/icons_system.png) 0 -200px no-repeat; }

*[class*="system-icon-"] {
display: inline-block;
width: 40px;
height: 40px;
margin-right: 10px; }

#icon-svg-support {
display: block;
margin: 0 auto 5rem; }

/* ==========================================================================
5. Header
========================================================================== */
/*.home .header {
position: absolute;
top: calc(100% - 80px);
left: 0;
}*/
.wizard {
display: none; }

/*.home {
.header {
.quick-menu {
display: none;
}
}
}*/
.header {
z-index: 9999;
position: relative;
min-height: 50px;
width: 100%;
background-color: #fff;
-moz-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
.header .quick-menu {
display: none; }

#logo {
float: left;
display: block;
width: 163px;
height: 26px;
margin: 12px;
background: url(../../images/1/vs/logo2x.png) no-repeat;
background-size: 100%; }

.top-nav {
position: absolute;
top: 50px;
right: 0;
width: 100%; }
.top-nav:before, .top-nav:after {
content: "";
display: table; }
.top-nav:after {
clear: both; }
.top-nav > ul.active {
border-bottom: 1px solid #e3e5e6; }
.top-nav ul {
left: 0;
display: block;
margin: 0;
width: 100%;
height: 0;
overflow: hidden;
-webkit-transition: height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.top-nav ul li {
position: relative;
display: block;
padding: 0;
width: 100%; }
.top-nav ul li a {
display: block;
text-decoration: none;
position: relative;
width: 100%;
padding: 9px 0 9px 5%;
cursor: pointer;
color: #2d4454;
border-top: 1px solid #e3e5e6;
background: #fff;
-webkit-tap-highlight-color: rgba(45, 68, 84, 0.1); }
.top-nav ul li > ul {
position: relative;
top: 0; }
.top-nav ul li > ul li a {
padding: 9px 0 9px 10%;
background: #faf9f8; }

.nav-button {
position: relative;
float: right;
width: 50px;
height: 50px;
cursor: pointer; }
.nav-button:after {
content: "";
position: absolute;
margin: 16px 0 0 14px;
width: 22px;
height: 14px;
border-top: 2px solid #2d4454;
border-bottom: 2px solid #2d4454; }
.nav-button:before {
content: "";
position: absolute;
margin: 24px 0 0 14px;
width: 22px;
height: 2px;
background-color: #2d4454; }

.login-button, .myaccount-button {
float: right;
display: block;
width: 50px;
height: 50px;
border-left: 1px solid #e3e5e6;
text-indent: -9999px;
background: url(../../images/1/vs/icons_home.png) 0 0 no-repeat;
cursor: pointer; }

.login-support {
cursor: pointer; }

.wizard-home {
margin: 0 0 80px 0;
height: calc(100% - 80px);
width: 100%; }

.modal {
display: none;
position: absolute;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.modal .bg {
width: 100%;
height: 100%;
background-color: rgba(45, 68, 84, 0.6); }
.modal .close {
width: 40px;
height: 40px;
position: absolute;
right: 0;
top: 0;
cursor: pointer; }
.modal .close:after {
content: "";
display: block;
position: absolute;
width: 2px;
height: 26px;
top: 8px;
left: 20px;
background-color: #9daab3;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg); }
.modal .close:before {
content: "";
display: block;
position: absolute;
width: 26px;
height: 2px;
top: 20px;
left: 8px;
background-color: #9daab3;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg); }

.login-modal {
position: absolute;
display: none;
top: 20px;
width: 95%;
max-width: 480px;
height: auto;
padding: 40px 40px 20px 40px;
background-color: #fff; }

.media-modal {
position: absolute;
display: none;
width: 95%;
max-width: 800px;
top: 20px;
height: auto;
padding: 0;
background-color: transparent; }
.media-modal img {
max-width: 100%;
height: auto; }

.ft-button {
display: block;
position: fixed;
z-index: 9999;
top: 50%;
left: 0;
width: 50px;
height: 200px;
margin-top: -120px; }

.ft-button-twitter {
display: block;
position: fixed;
z-index: 9999;
top: 50%;
left: 0;
width: 50px;
height: 42px;
margin-top: 82px;
background: url(../../images/1/vs/sidebar-twitter.png); }

.ft-button-facebook {
display: block;
position: fixed;
z-index: 9999;
top: 50%;
left: 0;
width: 50px;
height: 42px;
margin-top: 126px;
background: url(../../images/1/vs/sidebar-fb.png); }

/* ==========================================================================
6. Pages
========================================================================== */
.main {
width: 100%; }
.main > section {
position: relative;
padding: 4rem 0; }
.main > section.text-center p {
margin-right: auto;
margin-left: auto; }
.main > section.home-testimonials {
padding: 0; }

p {
margin: 1.5em 0 1.5em;
max-width: 720px;
-webkit-transform: translate3d(0, 0, 0); }
p:first-child {
margin-top: 0; }
p:last-child {
margin-bottom: 0; }

.content h2, .product-content h2, .content-overwrite h2 {
font-family: "Roboto", Helvetica, Arial, sans-serif;
font-size: 2.2rem;
color: #2d4454;
margin-left: -1px;
margin: 2em 0 .3em; }
.content h2:first-child, .content h2:first-of-type, .product-content h2:first-child, .product-content h2:first-of-type, .content-overwrite h2:first-child, .content-overwrite h2:first-of-type {
margin-top: 0; }
.content h2 + p, .product-content h2 + p, .content-overwrite h2 + p {
margin-top: 0; }
.content h3, .product-content h3, .content-overwrite h3 {
font-size: 1.5rem;
color: #9daab3;
margin: 1em 0 .3em;
font-family: "Roboto", Helvetica, Arial, sans-serif;
font-weight: 400; }
.content h3 + p, .product-content h3 + p, .content-overwrite h3 + p {
margin-top: .3em; }
.content p, .product-content p, .content-overwrite p {
max-width: 100% !important; }
.content ul, .product-content ul, .content-overwrite ul {
margin: 15px 0 40px 25px; }
.content ul li, .product-content ul li, .content-overwrite ul li {
position: relative;
margin: 18px 0; }
.content ul li:after, .product-content ul li:after, .content-overwrite ul li:after {
content: "";
position: absolute;
top: 7px;
left: -25px;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #e9b41e; }
.content img, .product-content img, .content-overwrite img {
max-width: 100%; }

.chapters {
margin-bottom: 4rem; }
.chapters ol {
max-width: 280px;
border-top: 1px solid #abb4bb; }
.chapters ol > li {
list-style-type: decimal;
list-style-position: inside;
display: list-item;
border-bottom: 1px solid #abb4bb;
padding: 8px 0 8px;
font-size: 1.2rem;
color: #e9b41e; }
.chapters ol > li.active {
height: auto;
color: #9daab3; }
.chapters ol > li.active > a {
color: #9daab3; }
.chapters ol > li ul li {
display: block;
padding-left: 20px;
line-height: 21px; }

.sections, .recent-posts, .categories, .sitemap {
margin-bottom: 4rem;
max-width: 280px;
border-top: 1px solid #abb4bb; }

.recent-posts-main {
margin-bottom: 4rem;
max-width: 1140px;
text-align:center;}

.sections > li, .recent-posts > li, .categories > li, .sitemap > li {
display: list-item;
border-bottom: 1px solid #abb4bb;
padding: 8px 0 8px;
font-size: 1.2rem;
color: #e9b41e; }

.recent-posts-main > li {
display: list-item;
border-bottom: 1px solid #e8eef3;
padding: 12px 0 12px;
font-size: 14px;
color: #2d4454;
text-align:center; }

.sections > li.active, .recent-posts > li.active, .categories > li.active, .sitemap > li.active {
height: auto;
color: #2d4454; }

.recent-posts-main > li.active {
height: auto;
color: #2d4454; }

.sections > li.active > a, .recent-posts > li.active > a, .categories > li.active > a, .sitemap > li.active > a {
color: #9daab3; }

.recent-posts-main > li.active > a {
color: #2d4454; }

.recent-posts-main a {
color: #2d4454; }

.recent-posts-main a:hover {
color: #e6b121; }

.sections > li ul li, .recent-posts > li ul li, .recent-posts-main > li ul li, .categories > li ul li, .sitemap > li ul li {
display: block;
padding-left: 20px;
line-height: 21px; }

.main-image {
position: relative;
height: 220px;
width: 100%;
margin-bottom: 0;
color: #fff;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
display: table; }
.main-image.home-image {
background-image: url(../../images/1/vs/home_sm.jpg); }
.main-image.home-image a.button {
margin: 0; }
.main-image.about-image {
background-image: url(../../images/1/vs/about_sm.jpg); }
.main-image.contact-image {
background-image: url(../../images/1/vs/contact_sm.jpg); }
.main-image.pricing-image {
background-image: url(../../images/1/vs/pricing_sm.jpg); }
.main-image.features-image {
background-image: url(../../images/1/vs/features_sm.jpg); }
.main-image.faq-image {
background-image: url(../../images/1/vs/faq_sm.jpg); }
.main-image.softphone-image {
background-image: url(../../images/1/vs/softphone_sm.jpg); }
.main-image.hardware-image {
background-image: url(../../images/1/vs/hardware_sm.jpg); }
.main-image.terms-image {
background-image: url(../../images/1/vs/terms_sm.jpg); }
.main-image.registration-image {
background-image: url(../../images/1/vs/registration_sm.jpg); }
.main-image.support-image {
background-image: url(../../images/1/vs/support_sm.jpg); }
.main-image.sitemap-image {
background-image: url(../../images/1/vs/sitemap_sm.jpg); }
.main-image.blog-image {
background-image: url(../../images/1/vs/blog_sm.jpg); }
.main-image.landing-image {
background-image: url(../../images/1/vs/landing_sm.jpg); }
.main-image.networking-image {
background-image: url(../../images/1/vs/pounds_sm.jpg); }

.page-header {
position: relative;
padding: 4rem 0;
text-align: center; }

h1 .byline {
display: block;
margin: .5rem 0 0; }

.byline {
font-family: "Droid Sans", sans-serif;
font-weight: 700;
font-size: 2.2rem;
line-height: 1.25em;
color: #fff;
margin: .5rem 0 0;
max-width: 100%; }
.byline.by-footer {
margin-bottom: 1rem; }
.byline + p {
margin-top: 3rem; }
.byline + .button-b, .byline + .button {
margin-top: 3rem; }

.light-bg {
background-color: #faf9f8;
border-top: 1px solid #e3e5e6;
border-bottom: 1px solid #e3e5e6; }

.dark-bg {
background: url(../../images/1/vs/dot.png) repeat #2d4454;
color: #fff; }
.dark-bg h1, .dark-bg h2, .dark-bg h3, .dark-bg h4, .dark-bg h5, .dark-bg p {
color: #fff; }

.carousel {
margin: 0 auto;
padding: 4rem 0;
overflow: hidden; }
.carousel blockquote {
margin: 0 auto;
padding: 0 5%;
border: 0;
max-width: 900px; }
.carousel blockquote p {
margin: 1em 0 1.5em;
padding: 0 30px;
position: relative;
font-family: "Noticia Text", Cambria, Times New Roman, Times, serif;
font-style: italic;
font-size: 2.4rem;
line-height: 1.2;
max-width: 1240px; }
.carousel blockquote p:before {
content: """;
position: absolute;
top: -18px;
left: -5px;
color: #9daab3;
font-size: 5rem; }
.carousel blockquote p:after {
content: """;
position: absolute;
bottom: -40px;
right: 5px;
color: #9daab3;
font-size: 5rem; }
.carousel cite {
font-weight: normal; }
.carousel .slides {
margin-top: 0;
width: 1000%;
-webkit-transition: -webkit-transform 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-ms-transition: -webkit-transform 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-o-transition: -webkit-transform 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-transition: -webkit-transform 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: -webkit-transform 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-webkit-transition: transform 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-ms-transition: transform 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-o-transition: transform 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-transition: transform 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: transform 1s cubic-bezier(0.455, 0.03, 0.515, 0.955); }
.carousel .slides li {
display: block;
float: left;
width: 360px; }
.carousel .slider-nav {
display: inline-block;
margin: 0 auto; }
.carousel .slider-nav li {
display: inline-block;
width: 7px;
height: 7px;
border: 1px solid #9daab3;
border-radius: 50%;
cursor: pointer; }
.carousel .slider-nav li.active {
background-color: #e9b41e;
border-color: #e9b41e; }

.features-page .h3 {
color: #2d4454;
text-align: center; }

.hidden-features {
height: 0;
overflow: hidden;
-webkit-transform: translate3d(0, 0, 0); }
.hidden-features .icons:first-of-type {
margin: 0; }

.border-column {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
padding-top: 30px;
padding-bottom: 30px;
text-align: left;
height: 100%; }
.border-column:first-of-type {
border-bottom: 0; }
.border-column:last-of-type {
border-top: 0; }
.border-column h3 {
color: #e9b41e; }
.border-column.dark-border {
border-color: #2d4454; }

.support-columns .border-column {
border-color: #2d4454;
text-align: center; }
.support-columns .border-column:last-of-type, .support-columns .border-column:first-of-type {
border-color: #2d4454; }

.list ul {
margin: 25px 0 40px 25px; }
.list ul li {
position: relative;
margin: 19px 0; }
.list ul li:after {
content: "";
position: absolute;
top: 7px;
left: -25px;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #e9b41e; }

.download-center {
margin: 0 0 4rem 0;
padding: 30px;
border: 1px solid #e3e5e6; }
.download-center h3 {
margin: 2rem 0 1.2rem; }
.download-center h3:first-of-type {
margin: 0 0 1.2rem; }

.gallery {
margin: 0 auto;
width: 90%;
max-width: 1140px; }
.gallery:before, .gallery:after {
content: "";
display: table; }
.gallery:after {
clear: both; }
.gallery li {
position: relative;
float: left;
display: block;
width: 100%;
margin-bottom: 10%; }
.gallery li .text-over {
position: absolute;
display: block;
top: 50%;
font-size: 2rem;
font-weight: 700;
margin: -10px 0 0;
width: 100%;
text-align: center;
color: #fff;
-webkit-transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.gallery li figure {
position: relative;
width: 100%;
max-width: 270px;
margin: 0 auto;
border: 2px solid #fff;
-webkit-transition: border-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: border-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: border-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: border-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: border-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.gallery li figure:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #e9b41e;
opacity: 0.85;
-webkit-transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.gallery li figure img {
display: block;
width: 100%;
height: auto; }
.gallery li:hover .text-over {
top: 70%;
opacity: 0; }
.gallery li:hover figure {
border: 2px solid #e9b41e; }
.gallery li:hover figure:after {
opacity: 0; }

.gallery-screencasts li .desc {
display: block;
font-size: 1.2rem;
min-height: 42px;
margin: 0 auto;
font-weight: 400;
text-align: left;
color: #2d4454;
position: relative;
max-width: 270px; }
.gallery-screencasts li h3 {
margin: 15px 0 10px;
font-size: 2.0rem;
line-height: 1.2;
color: #2d4454; }
.gallery-screencasts li figure {
position: relative;
width: 100%;
max-width: 270px;
margin: 0 auto;
border: 2px solid #fff;
-webkit-transition: border-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: border-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: border-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: border-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: border-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.gallery-screencasts li figure:before {
content: "";
position: absolute;
z-index: 5;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("../../images/1/vs/icons_screencasts.png");
background-position: 30px 25px;
background-repeat: no-repeat;
opacity: 0.7;
-webkit-transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.gallery-screencasts li:nth-child(2) figure:before {
background-position: 30px -175px; }
.gallery-screencasts li:nth-child(3) figure:before {
background-position: 30px -375px; }
.gallery-screencasts li:nth-child(4) figure:before {
background-position: 30px -575px; }
.gallery-screencasts li:nth-child(5) figure:before {
background-position: 30px -775px; }
.gallery-screencasts li:nth-child(6) figure:before {
background-position: 30px -975px; }
.gallery-screencasts li:nth-child(7) figure:before {
background-position: 30px -1175px; }
.gallery-screencasts li:nth-child(8) figure:before {
background-position: 30px -1374px; }
.gallery-screencasts li:nth-child(9) figure:before {
background-position: 30px -375px; }
.gallery-screencasts li:nth-child(10) figure:before {
background-position: 30px -175px; }
.gallery-screencasts li .play-btn {
position: absolute;
margin: -30px 0 0 -30px;
left: 50%;
top: 50%;
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #fff;
-webkit-transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.gallery-screencasts li .play-btn:after {
content: "";
position: absolute;
top: 21px;
left: 26px;
border-top: 10px solid transparent;
border-left: 15px solid #e9b41e;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
-webkit-transition: border-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: border-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: border-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: border-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: border-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.gallery-screencasts li a {
position: relative;
cursor: pointer;
display: block;
margin: 0 auto;
max-width: 270px; }
.gallery-screencasts li:hover figure:before {
opacity: 0; }
.gallery-screencasts li:hover .play-btn {
background-color: #e9b41e; }
.gallery-screencasts li:hover .play-btn:after {
border-left: 15px solid #fff; }


.gallery-screencasts2 li .desc {
display: block;
font-size: 1.2rem;
min-height: 42px;
margin: 0 auto;
font-weight: 400;
text-align: left;
color: #2d4454;
position: relative;
max-width: 270px; }
.gallery-screencasts2 li h3 {
margin: 15px 0 10px;
font-size: 2.0rem;
line-height: 1.2;
color: #2d4454; }
.gallery-screencasts2 li figure {
position: relative;
width: 100%;
max-width: 270px;
margin: 0 auto;
border: 2px solid #fff;
-webkit-transition: border-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: border-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: border-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: border-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: border-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.gallery-screencasts2 li figure:before {
content: "";
position: absolute;
z-index: 5;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("../../images/1/vs/icons_screencasts.png");
background-position: 30px -375px;
background-repeat: no-repeat;
opacity: 0.7;
-webkit-transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.gallery-screencasts2 li:nth-child(2) figure:before {
background-position: 30px -175px; }
.gallery-screencasts2 li:nth-child(3) figure:before {
background-position: 30px -375px; }
.gallery-screencasts2 li .play-btn {
position: absolute;
margin: -30px 0 0 -30px;
left: 50%;
top: 50%;
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #fff;
-webkit-transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.gallery-screencasts2 li .play-btn:after {
content: "";
position: absolute;
top: 21px;
left: 26px;
border-top: 10px solid transparent;
border-left: 15px solid #e9b41e;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
-webkit-transition: border-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: border-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: border-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: border-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: border-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.gallery-screencasts2 li a {
position: relative;
cursor: pointer;
display: block;
margin: 0 auto;
max-width: 270px; }
.gallery-screencasts2 li:hover figure:before {
opacity: 0; }
.gallery-screencasts2 li:hover .play-btn {
background-color: #e9b41e; }
.gallery-screencasts2 li:hover .play-btn:after {
border-left: 15px solid #fff; }

.hardware-page .col-1-2 p {
clear: both; }

.float-h-b h2 {
float: left;
display: block;
margin: 3px 30px 40px 0; }
.float-h-b .button-b {
float: left;
margin: 0 0 40px 0;
display: block; }
.float-h-b p {
clear: both; }

.img-hw {
position: absolute;
bottom: 0;
max-width: 380px; }
.img-hw img {
display: block; }

.r .img-hw {
float: right; }

.product-nav {
margin: 0 0 40px 2px; }
.product-nav:before, .product-nav:after {
content: "";
display: table; }
.product-nav:after {
clear: both; }
.product-nav li {
position: relative;
float: left;
display: block;
margin: -2px 0 0 -2px; }
.product-nav li a {
display: block;
padding: 7px 15px 8px;
padding-right: 15px;
text-align: center;
text-decoration: none;
color: #11466a;
font-size: 15px;
z-index: 1;
line-height: 100%;
border: 2px solid #e9b41e;
background: none;
-webkit-transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.product-nav li a:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 0;
z-index: -1;
background: #e9b41e;
-webkit-transition: height 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: height 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: height 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: height 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: height 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.product-nav li a:hover {
color: #fff; }
.product-nav li a:hover:after {
height: 100%; }

.product-list {
margin: 3rem 0 0; }
.product-list .head, .product-list .desc {
float: left;
width: 100%; }
.product-list .desc p:first-of-type {
min-height: 85px; }
.product-list .desc p:last-of-type {
min-height: 34px; }
.product-list .head {
margin-bottom: 2rem; }
.product-list li {
display: block;
width: 100%;
margin: 0 auto 5%;
padding: 25px;
border: 1px solid #e3e5e6;
background-color: #faf9f8; }
.product-list figure {
width: 100%; }
.product-list figure img {
display: block;
margin: 0 auto;
width: 100%;
max-width: 200px; }
.product-list .button-b {
margin: 0 0 0 15px;
width: 100px; }

.product h1, .product h2 {
margin: 0 0 1rem; }
.product h1 a, .product h2 a {
color: #e9b41e; }
.product h1 a:hover, .product h2 a:hover {
color: #16c1f3; }
.product .price {
display: block;
margin: 0 0 2rem;
font-size: 2.5rem;
font-weight: 700;
color: #82919b; }

.product-head figure {
margin: 4rem 0 4rem; }
.product-head figure img {
display: block;
width: 100%;
max-width: 400px;
margin: 0 auto; }

.product-content {
margin-top: 30px;
padding: 4% 4.5%;
background-color: #faf9f8;
border: 1px solid #e3e5e6; }

.plans-page .plans-wrap {
padding-top: 0; }

.plans {
text-align: center; }
.plans .plan {
margin-bottom: 2rem; }
.plans .plan .inner {
width: 100%;
padding: 4rem 5%; }
.plans:nth-child(2) h2 {
background-color: #e29e1a; }
.plans h2 {
color: #fff;
margin: 0;
padding: 3rem 0;
background-color: #e9b41e; }
.plans .price {
font-size: 3.5rem;
color: #e9b41e;
font-weight: 700; }
.plans ul {
margin: 0 0 3rem; }
.plans ul li {
padding: .7rem 0; }
.plans ul li:first-child {
margin-bottom: 1.5rem; }

.tooltipsy {
padding: 15px 20px;
margin: 10px;
font-size: 1.2rem;
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
background-color: #fff;
max-width: 480px; }

.excerpt, .post {
padding-bottom: 5rem;
margin-bottom: 5rem;
border-bottom: 1px solid #abb4bb; }

.pagination {
margin: 4rem 0 0 !important;
width: 100%;
text-align: center; }
.pagination li {
list-style-type: none;
display: inline-block;
padding: 5px; }
.pagination li:after {
display: none; }

.comment {
position: relative;
margin-top: 30px;
padding-left: 60px; }
.comment:last-of-type {
margin-bottom: 60px; }
.comment .comment-meta {
font-size: 1.2rem; }
.comment p {
margin-top: 5px;
font-style: italic; }
.comment img {
position: absolute;
left: 0;
width: 40px; }

.state-list {
margin-bottom: 4rem;
display: block; }
.state-list:before, .state-list:after {
content: "";
display: table; }
.state-list:after {
clear: both; }
.state-list li {
display: block;
float: left;
width: 25%; }
.state-list li a {
display: block;
padding: 10px;
min-width: 140px;
border: 1px solid #fff; }
.state-list li:hover a {
background-color: #faf9f8;
border: 1px solid #e3e5e6; }

/* ==========================================================================
7. Forms
========================================================================== */
.c-wrap {
margin: 3rem 0 0 1rem;
position: relative;
display: inline-block; }
.c-wrap .select {
z-index: 2;
position: relative;
display: block;
width: 90px;
height: 40px;
padding: 7px 15px;
text-align: left;
border: 2px solid #fff;
-webkit-transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.c-wrap .select:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 0;
z-index: -1;
background: #fff;
-webkit-transition: height 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: height 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: height 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: height 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: height 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.c-wrap .select:after {
content: "";
position: absolute;
top: 15px;
z-index: 2;
right: 15px;
width: 0;
height: 0;
border-top: 6px solid #fff;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid transparent;
-webkit-transition: border-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: border-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: border-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: border-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: border-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.c-wrap .select:hover, .c-wrap .select.active {
color: #2d4454; }
.c-wrap .select:hover:before, .c-wrap .select.active:before {
height: 100%; }
.c-wrap .select:hover:after, .c-wrap .select.active:after {
border-top: 6px solid #2d4454; }
.c-wrap .select-options {
text-align: left;
z-index: 9995; }
.c-wrap .select-options.active:after {
border-top: 6px solid #2d4454; }
.c-wrap .select-options ul {
z-index: 2;
overflow: auto;
border: 1px solid #e3e5e6;
max-height: 100%;
height: auto; }
.c-wrap .select-options:after {
border: 0; }

.contact-form, .register-form, .comment-form {
padding: 10% 10%;
margin-bottom: 40px;
background-color: #faf9f8;
border: 1px solid #e3e5e6; }

.contact-form-blue, .register-form-blue, .comment-form-blue {
padding: 10% 10%;
margin-bottom: 40px;
background-color: #20c0f1;
border: 1px solid #20c0f1; }

.register-form, .comment-form {
margin-bottom: 0; }
.register-form .grid-row, .comment-form .grid-row {
margin: 32px 0 32px; }
.register-form .grid-row:first-of-type, .comment-form .grid-row:first-of-type {
margin-top: 0;
margin-bottom: 32px; }
.register-form .grid-row:last-of-type, .comment-form .grid-row:last-of-type {
margin-bottom: 0; }
.register-form .form-row:last-of-type, .comment-form .form-row:last-of-type {
margin-top: 16px;
margin-bottom: 0; }

.plan-routes {
visibility: hidden; }

.comment-form {
margin-top: 30px; }
.comment-form textarea {
max-width: 100%; }

.newsletter-form {
display: block;
width: 250px;
margin: 5rem auto 0; }
.newsletter-form:before, .newsletter-form:after {
content: "";
display: table; }
.newsletter-form:after {
clear: both; }

#newsletter_email {
float: left;
display: block;
width: 200px;
height: 40px; }

.newsletter-button {
position: relative;
float: left;
width: 50px;
height: 40px;
margin: 0 0 0 -2px; }
.newsletter-button:after {
content: "";
display: block;
position: absolute;
width: 2px;
height: 13px;
top: 7px;
left: 24px;
background-color: #fff;
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
-webkit-transition: left 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: left 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: left 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: left 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: left 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.newsletter-button:before {
content: "";
display: block;
position: absolute;
width: 13px;
height: 2px;
top: 21px;
left: 18px;
background-color: #fff;
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
-webkit-transition: left 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: left 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: left 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: left 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: left 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.newsletter-button:hover {
background-color: #e9b41e; }
.newsletter-button:hover:after {
height: 13px; }

.login-form-s, .recovery-form {
display: block;
margin: 0 auto;
width: 95%;
max-width: 480px;
padding: 40px;
background-color: #faf9f8;
border: 1px solid #e3e5e6; }

#login-button {
margin-top: 12px; }

.submit {
margin-top: 32px; }

.form-row {
position: relative;
margin: 32px 0 32px 0; }
.form-row:first-of-type {
margin:32px 0 32px; }

.placeholder {
visibility: hidden;
position: absolute;
top: 8px;
left: 2px;
opacity: 0;
color: #9daab3;
-webkit-transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.placeholder.active {
visibility: visible;
opacity: 1;
top: -23px; }

label {
cursor: pointer;
font-size: 1.2rem; }

.select {
cursor: pointer; }

.select-options {
position: absolute;
top: 40px;
left: 0;
width: 100%;
z-index: 900; }
.select-options:after {
content: "";
display: block;
position: absolute;
top: -21px;
z-index: 2;
right: 15px;
width: 0;
height: 0;
border-top: 6px solid #9daab3;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid transparent;
pointer-events: none; }
.select-options.active ul {
display: block; }
.select-options ul {
display: none;
margin: 0;
width: 100%;
max-height: 90px;
overflow-y: scroll;
background-color: #fff; }
.select-options ul li {
display: block;
height: 30px;
padding: 5px 0 5px 12px;
line-height: 20px;
color: #2d4454;
cursor: pointer;
overflow: hidden; }
.select-options ul li:hover {
background-color: #e9b41e; }
.select-options.select-currency ul {
max-height: 150px; }

input[type=text], input[type=password], input[type=email], input[type=tel], input[type=number], textarea, select, .input-inactive, .combobox-input {
font-family: "Roboto", Helvetica, Arial, sans-serif;
font-style: italic;
width: 100%;
max-width: 520px;
margin: 0;
border: 2px solid #e9b41e;
border-radius: 0;
background-color: #fff;
padding: 8px 12px;
color: #2d4454;
outline: none; }
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=tel]:focus, input[type=number]:focus, textarea:focus, select:focus, .input-inactive:focus, .combobox-input:focus {
outline-color: #fff; }

.input-inactive {
display: block;
border: 2px solid #9daab3;
background-color: #fff;
cursor: default; }

select {
background-image: none;
border-radius: 0; }

input[type=checkbox] {
display: none; }

input[type=checkbox] + label {
display: block;
margin-top: 32px;
margin-bottom: 20px; }

input[type=checkbox] + label span {
display: inline-block;
position: relative;
width: 19px;
height: 19px;
margin: -2px 15px 0 0;
vertical-align: middle;
background-color: #fff !important;
border: 2px solid #e9b41e;
cursor: pointer; }
input[type=checkbox] + label span:before {
content: "";
position: absolute;
top: 6px;
left: 5px;
height: 5px;
width: 2px;
background-color: #fff;
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
-webkit-transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
input[type=checkbox] + label span:after {
content: "";
position: absolute;
top: 3px;
left: 9px;
height: 8px;
width: 2px;
background-color: #fff;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
-webkit-transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

input[type=checkbox]:checked + label span:before, input[type=checkbox]:checked + label span:after {
background-color: #9daab3; }

[class*="error-"] {
color: #e74c3c;
margin: 6px 0 0 2px; }

::-webkit-input-placeholder {
color: #8aa2a6; }

:-moz-placeholder {
/* Firefox 18- */
color: #8aa2a6; }

::-moz-placeholder {
/* Firefox 19+ */
color: #8aa2a6; }

:-ms-input-placeholder {
color: #8aa2a6; }

.currency-form label {
position: relative;
font-size: 1.5rem; }

#currency {
display: inline-block;
width: auto;
margin: 3rem 0 0 1rem;
padding: 3px 18px 4px 15px;
font-style: normal;
cursor: pointer; }
#currency:focus {
outline: none; }
#currency:hover {
color: #fff; }

.combobox-holder {
display: inline-block;
width: 100%; }

.combobox {
width: 100%;
position: relative;
display: inline-block; }

.combobox-toggle {
position: absolute;
right: 2px;
top: 2px;
display: block;
width: 36px;
height: 36px;
background-color: white;
cursor: pointer; }
.combobox-toggle:after {
content: "";
display: block;
position: absolute;
top: 15px;
z-index: 2;
right: 15px;
width: 0;
height: 0;
border-top: 6px solid #9daab3;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid transparent;
pointer-events: none; }

.ui-autocomplete {
position: absolute;
display: none;
z-index: 999;
margin: 0;
max-height: 90px;
overflow-y: scroll;
overflow-x: hidden;
background-color: #fff; }
.ui-autocomplete li {
display: block;
height: 30px;
padding: 5px 0 5px 12px;
line-height: 20px;
cursor: pointer;
overflow: hidden; }
.ui-autocomplete li a {
color: #2d4454; }
.ui-autocomplete li:hover {
background-color: #e9b41e; }

.ui-helper-hidden-accessible {
display: none; }

/* ==========================================================================
8. Tables
========================================================================== */
.quote-form table {
position: relative;
font-size: 1.2rem;
margin: 30px 0 20px 0; }
.quote-form table strong {
font-size: 1.5rem; }
.quote-form table thead tr td {
padding-bottom: 15px;
text-align: center; }
.quote-form table tbody tr:nth-child(odd) {
background-color: rgba(0, 0, 0, 0.12); }
.quote-form table tbody tr td {
min-height: 38px;
text-align: center;
padding-left: 5px; }
.quote-form table thead tr, .quote-form table tbody tr {
width: 20%; }
.quote-form table thead tr td:first-child, .quote-form table tbody tr td:first-child {
width: 40%;
text-align: left; }

.content table {
position: relative;
font-size: 1.2rem;
margin: 50px 0 50px 0; }
.content table strong {
font-size: 1.5rem; }
.content table thead tr td {
padding-bottom: 15px;
text-align: center; }
.content table tbody tr {
border-top: 1px solid #abb4b9; }
.content table tbody tr:nth-child(odd) {
background-color: #faf9f8; }
.content table tbody tr td {
min-height: 38px;
text-align: center; }
.content table tbody tr:last-of-type {
border-bottom: 1px solid #abb4b9; }
.content table.shipping-costs td {
width: 22%; }
.content table.shipping-costs td:first-child {
width: 34%;
text-align: left; }
.content table.product-return {
min-width: 600px; }
.content table.product-return tbody tr td, .content table.product-return thead tr td {
width: 25%;
text-align: left;
padding-left: 2%; }
.content table.product-return tbody tr td:first-child, .content table.product-return thead tr td:first-child {
padding-left: 0; }

.table {
position: relative;
font-size: 1.2rem;
margin: 0 0 50px 0; }
.table p {
font-size: 1.5rem; }
.table thead strong {
font-size: 1.5rem; }
.table thead tr {
position: relative;
display: block;
margin: 0 auto 0;
width: 90%;
max-width: 1140px; }
.table thead tr:before, .table thead tr:after {
content: "";
display: table; }
.table thead tr:after {
clear: both; }
.table thead tr:first-child {
padding: 0 !important; }
.table thead tr:first-child td {
width: 100% !important;
padding: 0 !important; }
.table thead tr td {
float: left;
display: block;
width: 30%;
text-align: center;
padding-bottom: 15px; }
.table thead tr td:first-child {
width: 40%;
text-align: left; }
.table tbody {
display: block;
width: 100%;
position: relative; }
.table tbody .letter {
display: none;
position: absolute;
top: 50%;
left: 50%;
margin: -13px 0 0 -45%;
padding: 0;
width: 70px;
height: auto;
font-size: 24px;
font-weight: 700;
border: 0; }
.table tbody .letter td {
text-align: center !important;
width: 100% !important;
padding: 0 !important;
border: 0 !important; }
.table tbody:nth-child(even) {
background-color: #faf9f8;
z-index: 0; }
.table tbody:nth-child(even):after {
content: "";
position: absolute;
z-index: 1;
top: 0;
left: 0;
height: 1px;
background-color: #e3e5e6;
width: 100%; }
.table tbody:nth-child(even):before {
content: "";
position: absolute;
bottom: -1px;
left: 0;
height: 1px;
background-color: #e3e5e6;
width: 100%; }
.table tbody tr {
position: relative;
display: block;
z-index: 2;
margin: 0 auto 0;
width: 90%;
max-width: 1140px; }
.table tbody tr:before, .table tbody tr:after {
content: "";
display: table; }
.table tbody tr:after {
clear: both; }
.table tbody tr td {
float: left;
display: block;
width: 30%;
min-height: 38px;
text-align: center;
border-top: 1px solid #abb4b9; }
.table tbody tr td:first-child {
width: 40%;
text-align: left; }
.table tbody:last-child tr:last-child td {
margin-bottom: -1px;
border-bottom: 1px solid #abb4b9; }
.table tfoot tr {
position: relative;
display: block;
margin: -1px auto 0;
width: 90%;
max-width: 1140px; }
.table tfoot tr td {
display: block;
width: 100%;
border-top: 1px solid #abb4b9; }
.table tfoot p {
font-size: 1.2rem; }

.alphabet:before, .alphabet:after {
content: "";
display: table; }
.alphabet:after {
clear: both; }
.alphabet li {
float: left;
display: block; }
.alphabet li a {
display: block;
width: 28px;
height: 28px;
padding-bottom: 2px;
line-height: 26px;
text-align: center;
font-size: 16px;
font-weight: 700;
border: 1px solid #fff; }
.alphabet li a:hover {
background-color: #faf9f8;
border: 1px solid #e3e5e6; }

.voip-calls tbody tr td, .voip-calls thead tr td {
width: 40%; }
.voip-calls tbody tr td:first-child, .voip-calls thead tr td:first-child {
width: 60%; }

.int-calls tbody tr:nth-child(2) td, .v-countries tbody tr:nth-child(2) td {
border-top: 1px solid #abb4b9; }
.int-calls tr td:nth-child(2), .v-countries tr td:nth-child(2) {
display: none; }

.v-numbers tbody tr td, .v-numbers thead tr td {
width: 23%; }
.v-numbers tbody tr td:first-child, .v-numbers thead tr td:first-child {
width: 31%; }

.v-countries {
margin-bottom: 0; }

.int-calls-single tbody tr td, .int-calls-single thead tr td {
width: 40%;
text-align: left; }
.int-calls-single tbody tr td:first-child, .int-calls-single thead tr td:first-child {
width: 35%; }
.int-calls-single tbody tr td:last-child, .int-calls-single thead tr td:last-child {
width: 25%;
text-align: center; }

.v-numbers-single button, .v-toll-free button {
display: inline-block;
margin: 0;
font-size: 1.2rem; }
.v-numbers-single tbody tr td, .v-numbers-single thead tr td, .v-toll-free tbody tr td, .v-toll-free thead tr td {
width: 18%; }
.v-numbers-single tbody tr td:first-child, .v-numbers-single thead tr td:first-child, .v-toll-free tbody tr td:first-child, .v-toll-free thead tr td:first-child {
width: 28%; }
.v-numbers-single tbody tr td:last-child, .v-numbers-single thead tr td:last-child, .v-toll-free tbody tr td:last-child, .v-toll-free thead tr td:last-child {
padding: 3px 0 0;
text-align: right; }

.v-toll-free tbody tr td, .v-toll-free thead tr td {
width: 17%; }
.v-toll-free tbody tr td:first-child, .v-toll-free thead tr td:first-child {
width: 15%; }

/* ==========================================================================
9. Footer
========================================================================== */
.site-footer {
padding: 4rem 0 2rem; }

.footer-nav {
display: block;
margin: 0;
width: 100%; }
.footer-nav li {
float: left;
position: relative;
display: block;
padding: 0;
width: 50%; }
.footer-nav li a {
display: block;
text-decoration: none;
position: relative;
width: 100%;
padding: 9px 0 9px 5%;
cursor: pointer;
color: #2d4454;
font-size: 1.5rem;
background: #fff;
-webkit-tap-highlight-color: rgba(45, 68, 84, 0.1); }
.footer-nav li a:hover {
color: #2d4454; }

.editors-choice {
display: inline-block;
width: 64px;
height: 40px;
margin-top: 10px;
background-image: url(../../images/1/vs/editors-choice-voip.png);
background-repeat: no-repeat;
background-size: 64px 40px; }

.copy {
font-size: 1.2rem;
color: #abb1b6;
text-align: center; }
.copy span {
position: relative; }

/* ==========================================================================
10. Other
========================================================================== */
*[class*="f-msg-"] {
position: relative;
margin-bottom: 50px;
width: 100%;
border: 1px solid #e3e5e6;
background-color: #faf9f8;
padding: 20px 20px 20px 85px; }
*[class*="f-msg-"]:before {
content: "";
position: absolute;
top: -1px;
left: -1px;
width: 60px;
height: calc(100% + 2px);
background-color: #e74c3c; }
*[class*="f-msg-"]:after {
content: "";
position: absolute;
top: 16px;
left: 15px;
width: 30px;
height: 30px;
background: url(../../images/1/vs/icons_home.png) -64px -10px no-repeat; }
*[class*="f-msg-"] ul {
margin: 10px 0; }
*[class*="f-msg-"] ul li {
list-style-type: disc;
list-style-position: inside;
color: #e74c3c; }
*[class*="f-msg-"] img {
display: none; }

.f-msg-info:before {
background-color: #e9b41e; }
.f-msg-info ul li {
color: #e9b41e; }

/* ==========================================================================
11. Media Queries
========================================================================== */
@media only screen and (min-width: 480px) {
.login-modal {
padding: 60px 60px 30px 60px; }

/* ==========================================================================
5. Pages
========================================================================== */
.product-list .head, .product-list .desc {
width: 47%; }
.product-list .head {
margin-bottom: 0;
margin-right: 3%; }
.product-list .desc {
margin-left: 3%; }

/* ==========================================================================
7. Tables
========================================================================== */
.table tbody tr td, .table thead tr td {
width: 24%; }
.table tbody tr td:first-child, .table thead tr td:first-child {
width: 28%; }

.voip-calls tbody tr, .voip-calls thead tr {
padding-right: 27%; }
.voip-calls tbody tr td, .voip-calls thead tr td {
width: 43%; }
.voip-calls tbody tr td:first-child, .voip-calls thead tr td:first-child {
width: 57%; }

.int-calls tr td:nth-child(2), .v-countries tr td:nth-child(2) {
display: block; }

.dom-calls tbody tr td, .dom-calls thead tr td {
width: 30%; }
.dom-calls tbody tr td:first-child, .dom-calls thead tr td:first-child {
width: 40%; }

.int-calls-single tbody tr td, .int-calls-single thead tr td {
width: 50%; }
.int-calls-single tbody tr td:first-child, .int-calls-single thead tr td:first-child {
width: 30%; }
.int-calls-single tbody tr td:last-child, .int-calls-single thead tr td:last-child {
width: 20%; }

.v-numbers-single tbody tr td, .v-numbers-single thead tr td, .v-toll-free tbody tr td, .v-toll-free thead tr td {
width: 18%; }
.v-numbers-single tbody tr td:first-child, .v-numbers-single thead tr td:first-child, .v-toll-free tbody tr td:first-child, .v-toll-free thead tr td:first-child {
width: 36%; }
.v-numbers-single tbody tr td:last-child, .v-numbers-single thead tr td:last-child, .v-toll-free tbody tr td:last-child, .v-toll-free thead tr td:last-child {
width: 10%; }

.v-toll-free tbody tr td, .v-toll-free thead tr td {
width: 18%; }
.v-toll-free tbody tr td:first-child, .v-toll-free thead tr td:first-child {
width: 18%; }
.v-toll-free tbody tr td:last-child, .v-toll-free thead tr td:last-child {
width: 10%; } }
@media only screen and (min-width: 760px) {
.m-h1 {
font-size: 3.5rem;
line-height: 1.4; }

.m-hidden {
display: block !important; }

/* ==========================================================================
4. Header
========================================================================== */
.home .header {
position: relative; }
.home .main {
padding-top: 0; }

.header {
height: 50px; }
.header .quick-menu {
display: block;
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 100%;
color: #fff;
font-size: 1.4rem;
background-color: #16c1f3;
text-align: center;
cursor: pointer;
-webkit-transition: background-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: background-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: background-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: background-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: background-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.header .quick-menu:hover {
color: #fff;
background-color: #e9b41e; }

.vs-page .main {
padding-top: 50px; }
.vs-page .header {
position: fixed;
top: 0;
left: 0; }

.wizard {
display: block;
position: relative;
width: 100%;
height: 1200px;
color: #fff;
background: url(../../images/1/vs/bg.jpg) #2d4454 no-repeat top left;
background-attachment: fixed;
background-size: cover;
visibility: hidden;
opacity: 0;
overflow: hidden;
-webkit-transition: height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.wizard.start {
visibility: visible;
opacity: 1; }
.wizard.start .welcome {
height: auto; }
.wizard.start .wiz-title {
height: 65px; }
.wizard.start .wiz-options li h3 {
opacity: 1; }
.wizard .vertical-wrap {
position: relative;
display: table;
width: 200%;
height: 100%;
-webkit-transition: -webkit-transform 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-ms-transition: -webkit-transform 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-o-transition: -webkit-transform 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-transition: -webkit-transform 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: -webkit-transform 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-webkit-transition: transform 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-ms-transition: transform 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-o-transition: transform 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-transition: transform 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: transform 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955); }
.wizard .vertical-wrap.screen {
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0); }
.wizard .vertical {
background-image: url(../../images/1/vs/dot.png);
width: 50%; }

/*.vs-page {
.wizard {
display: none;
}
}*/
.browse-button {
position: absolute;
bottom: -8%;
left: 50%;
z-index: 999;
border: 0;
margin-left: -70px;
padding: 5px 0 15px;
background-color: transparent;
color: #fff;
outline: 0;
cursor: pointer;
opacity: .4;
-webkit-transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.browse-button:after {
content: "";
display: block;
position: absolute;
width: 2px;
height: 13px;
top: 30px;
left: 50%;
margin-right: 8px;
background-color: #fff;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
-webkit-transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.browse-button:before {
content: "";
display: block;
position: absolute;
width: 2px;
height: 13px;
top: 30px;
left: 50%;
margin-left: -8px;
background-color: #fff;
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
-webkit-transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.browse-button:hover {
opacity: 1; }
.browse-button:hover:after, .browse-button:hover:before {
top: 35px; }

.welcome {
margin: 20px auto 0;
width: 90%;
height: 0;
max-width: 1060px;
position: relative;
background-color: rgba(12, 14, 15, 0.5);
-webkit-transition: height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition-delay: .5s; }

.wiz-title {
margin: -33px auto 0;
width: 80%;
height: 0;
overflow: hidden;
zoom: 1;
-webkit-transition: height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition-delay: .5s; }
.wiz-title:before, .wiz-title:after {
content: "";
display: table; }
.wiz-title:after {
clear: both; }

.wt-left, .wt-right {
float: left;
display: block;
width: 50%;
max-width: 760px;
height: 100%;
padding: 0;
line-height: 65px;
font-family: "Droid Sans", sans-serif;
font-weight: 700;
font-size: 1.8rem; }

.wt-left {
font-size: 3rem;
color: #9daab3;
padding-bottom: 2px;
line-height: 63px;
background-color: #2d4454; }

.wt-right {
color: #fff;
background-color: #e9b41e; }
.wt-right span {
color: #ad871d; }

.wiz-options {
margin: 50px auto 0;
padding-bottom: 20px;
width: 460px; }
.wiz-options li {
display: block;
margin-bottom: 50px;
cursor: pointer;
zoom: 1; }
.wiz-options li:before, .wiz-options li:after {
content: "";
display: table; }
.wiz-options li:after {
clear: both; }
.wiz-options li svg {
float: left; }
.wiz-options li h3 {
float: left;
margin: 8px 0 0 35px;
font-size: 3.3rem;
font-weight: 400;
line-height: 1.3;
color: #fff;
text-align: left;
opacity: 0;
-webkit-transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition-delay: .9s; }
.wiz-options li:nth-of-type(2) h3 {
transition-delay: 1s; }
.wiz-options li:nth-of-type(3) h3 {
transition-delay: 1.1s; }
.wiz-options li:nth-of-type(4) h3 {
transition-delay: 1.2s; }

.wiz-screens {
text-align: left; }
.wiz-screens a {
color: #fff;
display: inline-block;
border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
.wiz-screens a:hover {
border-bottom: 1px solid transparent; }
.wiz-screens *[class*="screen-"] {
position: relative;
display: none;
margin: 0 auto;
width: 90%;
max-width: 1060px;
position: relative;
padding: 60px 55px;
background-color: rgba(12, 14, 15, 0.5); }
.wiz-screens *[class*="screen-"] .big {
margin-bottom: 0; }
.wiz-screens *[class*="screen-"] .col {
width: 100%;
max-width: 500px;
margin-left: auto;
margin-right: auto; }
.wiz-screens *[class*="screen-"] .col:first-of-type {
margin-bottom: 4rem; }

.screen-understand {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
max-width: 100% !important;
overflow: hidden; }
.screen-understand .understand-wrap {
width: 100%;
height: 800%;
-webkit-transition: -webkit-transform 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-ms-transition: -webkit-transform 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-o-transition: -webkit-transform 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-transition: -webkit-transform 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: -webkit-transform 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-webkit-transition: transform 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-ms-transition: transform 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-o-transition: transform 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-transition: transform 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: transform 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955); }
.screen-understand .vert-wrap {
display: table;
width: 100%;
height: 100%;
background-color: #2d4454; }
.screen-understand .vert-wrap .vert {
background-image: url(../../images/1/vs/dot.png);
display: table-cell;
width: 100%;
vertical-align: middle;
text-align: center;
padding: 0 60px; }
.screen-understand .byline {
max-width: 1000px;
margin: 0 auto; }
.screen-understand figure {
margin: 3rem auto; }
.screen-understand .button {
color: #564a2b;
border: 0; }

.understand-4 {
background: url(../../images/1/vs/u_screen_4.jpg) #2d4454 no-repeat top left;
background-size: cover;
background-position: 50% 50%; }

.understand-8 {
background: url(../../images/1/vs/u_screen_8.jpg) #2d4454 no-repeat top left;
background-size: cover;
background-position: 50% 50%; }

.u-nav {
position: absolute;
top: 50%;
right: 0;
margin: -100px 0 0;
padding: 65px 25px 65px 25px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
background-color: #293d4c; }
.u-nav li {
display: block;
position: relative;
margin: 8px 0;
width: 16px;
height: 16px;
border-radius: 50%;
cursor: pointer;
background-color: #293d4c; }
.u-nav li.active:after {
background-color: #e9b41e;
border: 0;
top: 3px;
left: 3px; }
.u-nav li:after {
content: "";
position: absolute;
top: -1px;
left: -1px;
z-index: 500;
display: block;
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
border: 4px solid #293d4c; }

.u-nav li {
width: 16px;
height: 16px; }

.u-nav li .pie {
width: 50%;
height: 100%;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
position: absolute;
background: #7a6f39;
border: 0px solid rgba(0,0,0,0.5); }

.u-nav li .spinner {
border-radius: 100% 0 0 100% / 50% 0 0 50%;
z-index: 200;
border-right: none; }

.u-nav li:hover .spinner,
.u-nav li:hover .filler,
.u-nav li:hover .mask {
animation-play-state: running; }

.u-nav li .filler {
border-radius: 0 100% 100% 0 / 0 50% 50% 0;
left: 50%;
opacity: 0;
z-index: 100;
border-left: none; }

.u-nav li .mask {
width: 50%;
height: 100%;
position: absolute;
background: inherit;
opacity: 1;
z-index: 300; }

/*@keyframes rota {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}*/
/*@keyframes opa {
0% { opacity: 1; }
50%, 100% { opacity: 0; }
}*/
.u-row {
display: table;
margin: 50px auto 20px;
width: 100%; }
.u-row:before, .u-row:after {
content: "";
display: table; }
.u-row:after {
clear: both; }

.u-col {
display: table-cell;
width: 50%;
height: 140px;
padding-left: 170px;
text-align: left;
vertical-align: middle; }
.u-col span {
font-size: 1.8rem;
font-weight: 700;
color: #e9b41e; }

.screen-test .register-form {
display: block;
margin-top: 4rem;
padding: 0;
border: 0;
background-color: transparent; }
.screen-test .register-form label {
color: #9daab3; }

.screen-quote {
max-height: 100%;
-webkit-transition: height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.screen-quote .quote-head p {
max-width: 100%; }
.screen-quote .quote-head p:nth-of-type(2) {
margin: 1.5em 0; }
.screen-quote input.error {
border-color: #e74c3c; }
.screen-quote .q-wrap {
position: relative;
float: left;
display: block;
width: 45%;
max-width: 300px; }
.screen-quote .q-r {
margin-left: 10%; }
.screen-quote .minutes, .screen-quote .quantity {
width: 70px; }
.screen-quote .minutes {
margin-left: 32px; }
.screen-quote .form-row:before, .screen-quote .form-row:after {
content: "";
display: table; }
.screen-quote .form-row:after {
clear: both; }
.screen-quote .step {
position: relative;
display: block;
margin: 2rem 0 3rem;
font-size: 2.5rem;
font-weight: 700;
line-height: 1;
color: #9daab3;
opacity: 0.8;
overflow: hidden; }
.screen-quote .step:after {
content: "";
position: absolute;
display: block;
top: 50%;
left: 0;
width: 100%;
height: 1px;
margin-left: 140px;
background-color: #9daab3; }
.screen-quote .step-4 {
padding-right: 20px; }
.screen-quote .add, .screen-quote .remove, .screen-quote .help {
position: relative;
display: block;
margin: 0 0 30px 0;
width: 34px;
height: 34px;
border: 2px solid #e9b41e;
border-radius: 50%;
cursor: pointer;
line-height: 30px;
color: #e9b41e;
text-indent: 40px;
-webkit-transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.screen-quote .add:after, .screen-quote .remove:after, .screen-quote .help:after {
content: "";
position: absolute;
display: block;
top: 8px;
left: 14px;
width: 2px;
height: 14px;
background-color: #e9b41e;
-webkit-transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.screen-quote .add:before, .screen-quote .remove:before, .screen-quote .help:before {
content: "";
position: absolute;
display: block;
top: 14px;
left: 8px;
width: 14px;
height: 2px;
background-color: #e9b41e;
-webkit-transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.screen-quote .add:hover, .screen-quote .remove:hover, .screen-quote .help:hover {
color: #fff;
border-color: #fff; }
.screen-quote .add:hover:after, .screen-quote .add:hover:before, .screen-quote .remove:hover:after, .screen-quote .remove:hover:before, .screen-quote .help:hover:after, .screen-quote .help:hover:before {
background-color: #fff; }
.screen-quote .remove {
float: left;
margin: 3px 0 0 30px;
text-indent: -9999px; }
.screen-quote .remove:after {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg); }
.screen-quote .remove:before {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg); }
.screen-quote .help {
float: left;
margin: 3px 0 0 30px;
text-indent: 0; }
.screen-quote .help:after {
content: "?";
top: -2px;
left: -2px;
width: 34px;
height: 34px;
font-size: 2.2rem;
text-align: center;
line-height: 34px;
background-color: transparent; }
.screen-quote .help:before {
display: none; }
.screen-quote .help:hover {
color: #fff;
border-color: #fff; }
.screen-quote .help:hover:after, .screen-quote .help:hover:before {
background-color: transparent; }
.screen-quote table .title {
color: #9daab3;
font-size: 18px;
font-weight: 700; }
.screen-quote .total {
color: #e9b41e;
font-size: 18px;
font-weight: 700;
float: right; }

.q-form-inner {
width: 100%; }
.q-form-inner:before, .q-form-inner:after {
content: "";
display: table; }
.q-form-inner:after {
clear: both; }
.q-form-inner *[class*="step-"] {
display: none;
float: left;
width: 100%;
padding-bottom: 80px;
min-height: 250px;
-webkit-transition: height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.q-form-inner *[class*="step-"] p {
margin-bottom: 20px; }
.q-form-inner .step-1 {
display: block; }

.control-btns {
margin-top: 10px;
min-height: 68px; }
.control-btns:before, .control-btns:after {
content: "";
display: table; }
.control-btns:after {
clear: both; }
.control-btns .next {
float: right; }

#q-submit {
float: right;
display: none; }

#q-back {
float: left;
display: none;
color: #fff;
margin-left: 0; }

#q-reset {
float: right;
display: none;
color: #fff; }

.back-button {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 40px;
border: 0;
background: transparent;
font-family: "Roboto", Helvetica, Arial, sans-serif;
font-size: 1.7rem;
color: #fff;
outline: none;
cursor: pointer;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
.back-button:after {
content: "";
display: block;
position: absolute;
width: 2px;
height: 13px;
top: 15px;
left: 21px;
background-color: #fff;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
-webkit-transition: left 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: left 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: left 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: left 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: left 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.back-button:before {
content: "";
display: block;
position: absolute;
width: 13px;
height: 2px;
top: 29px;
left: 15px;
background-color: #fff;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
-webkit-transition: left 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: left 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: left 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: left 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: left 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.back-button:hover {
background-color: rgba(0, 0, 0, 0.1); }
.back-button:hover:after {
left: 15px; }
.back-button:hover:before {
left: 9px; }

.top-nav ul li > ul li a {
padding: 9px 0 9px 7.5%; }

/* ==========================================================================
5. Pages
========================================================================== */
.main {
padding: 50px 0 0 0; }

.main-image {
height: 240px; }
.main-image.home-image {
background-image: url(../../images/1/vs/home.jpg); }
.main-image.home-image a.button {
margin: 0; }
.main-image.about-image {
background-image: url(../../images/1/vs/about.jpg); }
.main-image.contact-image {
background-image: url(../../images/1/vs/contact.jpg); }
.main-image.pricing-image {
background-image: url(../../images/1/vs/pricing.jpg); }
.main-image.features-image {
background-image: url(../../images/1/vs/features.jpg); }
.main-image.faq-image {
background-image: url(../../images/1/vs/faq.jpg); }
.main-image.softphone-image {
background-image: url(../../images/1/vs/softphone.jpg); }
.main-image.hardware-image {
background-image: url(../../images/1/vs/hardware.jpg); }
.main-image.terms-image {
background-image: url(../../images/1/vs/terms.jpg); }
.main-image.registration-image {
background-image: url(../../images/1/vs/registration.jpg); }
.main-image.support-image {
background-image: url(../../images/1/vs/support.jpg); }
.main-image.sitemap-image {
background-image: url(../../images/1/vs/sitemap.jpg); }
.main-image.blog-image {
background-image: url(../../images/1/vs/blog.jpg); }
.main-image.landing-image {
background-image: url(../../images/1/vs/landing.jpg); }
.main-image.networking-image {
background-image: url(../../images/1/vs/pounds.jpg); }

.m-hidden {
display: block; }

/* GRID */
.grid-row {
margin: 4rem 0 0 0; }
.grid-row:first-child {
margin: 0; }

*[class*="col-"] {
float: left; }
.grid *[class*="col-"]:last-of-type {
padding-right: 0; }
*[class*="col-"].r {
float: right;
margin-left: 3.5%;
margin-right: 0 !important; }
*[class*="col-"].l {
margin-right: 3.5%;
margin-left: 0 !important; }

.col-2-3 {
width: 65%; }
.col-2-3:last-of-type {
margin-left: 0; }
.col-2-3:first-of-type {
margin-right: 5%; }

.col-1-3 {
width: 30%;
margin-right: 5%; }
.col-1-3:last-of-type, .col-1-3:last-child {
margin-right: 0; }

.col-1-2 {
width: 46.5%; }
.col-1-2:last-of-type {
margin-left: 3.5%; }
.col-1-2:first-of-type {
margin-right: 3.5%; }

.col-1-4 {
width: 22.5%; }

.col-3-4 {
width: 72.5%; }
.col-3-4:last-of-type {
margin-left: 0; }
.col-3-4:first-of-type {
margin-right: 5%; }

.col-1-8 {
width: 12.5%; }

/* Opt-in outside padding */
.grid-row-pad {
padding: 0 0 0 0; }
.grid-row-pad [class*="col-"]:last-of-type {
padding-right: 0; }

.carousel blockquote p {
font-size: 3.2rem; }
.carousel blockquote p:before {
top: -26px;
font-size: 8rem; }
.carousel blockquote p:after {
bottom: -70px;
font-size: 8rem; }

.features-page .h3 {
text-align: left; }

.hidden-features {
-webkit-transition: height 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-ms-transition: height 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-o-transition: height 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-transition: height 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: height 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955); }
.hidden-features .icons:first-of-type {
margin-top: 4rem; }

.border-column:first-of-type {
border-bottom: 1px solid #fff; }
.border-column:last-of-type {
border-top: 1px solid #fff; }

.gallery li {
width: 50%;
margin-bottom: 5%; }

.list ul {
margin: 25px 0 0 25px; }

.icons:first-of-type {
margin-top: 40px; }
.icons div[class*="col-"] {
margin: 0 5% 20px 0;
max-width: 100%;
-webkit-transition: height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.icons div[class*="col-"]:last-of-type {
padding-right: 0;
margin-right: 0; }

.img-hw {
margin: 0 0 -4rem 0; }

.product-list {
margin-left: -5%; }
.product-list .head, .product-list .desc {
width: 100%;
margin-left: 0;
margin-right: 0; }
.product-list .head {
margin-bottom: 2rem; }
.product-list li {
float: left;
width: 45%;
margin: 0 0 5% 5%; }

.product-content {
margin-top: 0; }

.plans ul {
max-width: 380px;
margin-left: auto;
margin-right: auto; }
.plans .plan {
padding-right: 0; }

/* ==========================================================================
6. Forms
========================================================================== */
.register-form, .comment-form {
padding: 5% 5%; }
.register-form .form-row, .register-form .form-row:last-of-type, .comment-form .form-row, .comment-form .form-row:last-of-type {
margin-top: 0;
margin-bottom: 0; }

/* ==========================================================================
7. Tables
========================================================================== */
.pricing-columns .col-1-2 {
width: 100%;
margin: 0; }

.table tbody .letter {
display: block; }

.int-calls tr {
padding-left: 70px; }

.v-numbers tr {
padding-right: 25%; }

/* ==========================================================================
8. Footer
========================================================================== */
.site-footer {
padding: 5rem 0 4rem; }

.footer-nav {
display: block;
margin: 0 auto;
width: 100%;
max-width: 1140px; }
.footer-nav li {
float: none;
display: inline-block;
padding: 0 15px 0 0;
width: auto; }
.footer-nav li a {
display: inline;
text-decoration: none;
position: relative;
width: auto;
padding: 0;
cursor: pointer;
color: #2d4454;
font-size: 1.2rem;
background: #fff; }
.footer-nav li a:hover {
color: #16c1f3; }

.editors-choice {
position: absolute;
right: -74px;
top: -12px;
margin: 0;
display: block; }

.copy {
text-align: left; } }
@media only screen and (min-width: 1020px) {
.welcome {
padding: 0 7%; }

.wiz-options {
margin: 50px auto 0;
padding-bottom: 20px;
width: 100%; }
.wiz-options:before, .wiz-options:after {
content: "";
display: table; }
.wiz-options:after {
clear: both; }
.wiz-options li {
float: left;
margin: 0 0 50px 0;
padding: 0 0 0 50px;
width: 50%; }
.wiz-options li h3 {
margin: 8px 0 0 25px;
font-size: 2.5rem; }
.wiz-options li:nth-child(odd) {
padding: 0 30px 0 0; }

.screen-quote .remove {
text-indent: 40px; }

.wiz-screens *[class*="screen-"] {
padding: 40px 60px; }
.wiz-screens *[class*="screen-"]:before, .wiz-screens *[class*="screen-"]:after {
content: "";
display: table; }
.wiz-screens *[class*="screen-"]:after {
clear: both; }
.wiz-screens *[class*="screen-"] .col {
float: left;
width: 45%;
margin: 0 0 0 5%; }
.wiz-screens *[class*="screen-"] .col:first-of-type {
margin: 0 5% 0 0; }

.u-row {
width: 840px; }

.browse-button {
bottom: -12%; }

.screen-test .register-form {
margin-top: 0; }

.screen-quote .quote-head p:nth-of-type(2) {
margin: 1em 0; }
.screen-quote .step {
margin: 1.5rem 0 2rem; }

.back-button:after {
top: 22px; }
.back-button:before {
top: 36px; }

.state-list li {
width: 20%; } }
@media only screen and (min-width: 1030px) {
/* ==========================================================================
2. General - Setting up some base styles
========================================================================== */
h1, .h1, .m-h1 {
font-size: 4.2rem;
margin: 0; }

h2, .h2 {
font-size: 4.2rem; }

h3, .h3 {
font-size: 2.5rem; }

a {
-webkit-transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

/* ==========================================================================
3. Utils
========================================================================== */
.big {
font-size: 2.5rem; }

/* ==========================================================================
4. Header
========================================================================== */
.wiz-screens *[class*="screen-"] {
padding: 40px 80px; }

.back-button {
width: 60px; }
.back-button:after {
left: 31px; }
.back-button:before {
left: 25px; }
.back-button:hover:after {
left: 26px; }
.back-button:hover:before {
left: 20px; }

/*.home .header {
height: 80px;
}*/
.header {
height: 60px;
-webkit-transition: height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
/*&.thin {
height: 55px;

#logo {
margin: 11px 0 0 40px;
}

.login-button {
margin: 10px 40px 0 20px;
}

.top-nav {

ul {

li {
padding: 16px 15px 0;
}
}
}
}*/ }
.header:before, .header:after {
content: "";
display: table; }
.header:after {
clear: both; }

#logo {
margin: 18px 12px 0 20px; }

.top-nav {
position: relative;
top: 0;
float: right;
width: auto;
height: 100%; }
.top-nav > ul {
border-bottom: 0; }
.top-nav ul {
margin: 0;
float: right;
height: 100%;
overflow: visible; }
.top-nav ul li {
display: inline-block;
position: relative;
padding: 19px 15px 0;
height: 100%;
width: auto; }
.top-nav ul li:hover > a {
color: #16c1f3; }
.top-nav ul li:hover ul {
display: block; }
.top-nav ul li a {
font-size: 15px;
text-decoration: none;
position: relative;
padding: 0 0 7px 0;
cursor: pointer;
color: #11466a;
border: 0; }
.top-nav ul li a:after {
content: "";
display: block;
position: absolute;
width: 0;
height: 2px;
top: 22px;
background-color: #16c1f3;
-webkit-transition: width 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: width 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: width 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: width 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: width 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.top-nav ul li a:hover, .top-nav ul li a:focus {
color: #16c1f3;
padding-left: 0; }
.top-nav ul li a:hover:after, .top-nav ul li a:focus:after {
width: 100%; }
.top-nav ul li > ul {
display: none;
position: absolute;
width: 210px;
top: 60px;
left: -15px;
height: auto;
background-color: #fff;
margin: 0;
padding: 10px 30px;
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); }
.top-nav ul li > ul li {
display: block;
width: 100%;
padding: 10px 0;
background-color: transparent; }
.top-nav ul li > ul li a {
display: inline-block;
width: auto;
padding: 0 0 7px 0;
background-color: transparent; }

.nav-button {
display: none; }

.login-button, .myaccount-button {
margin: 13px 20px 0 20px;
position: relative;
display: block;
float: right;
height: auto;
width: auto;
padding: 7px 15px 8px;
padding-right: 15px;
text-align: center;
text-decoration: none;
color: #11466a;
font-size: 15px;
z-index: 1;
text-indent: 0;
line-height: 100%;
border: 2px solid #16c1f3;
background: none;
-webkit-transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.login-button:after, .myaccount-button:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 0;
z-index: -1;
background: #16c1f3;
-webkit-transition: height 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: height 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: height 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: height 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: height 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.login-button:hover, .myaccount-button:hover {
color: #fff; }
.login-button:hover:after, .myaccount-button:hover:after {
height: 100%; }

.ft-button {
display: block; }

/* ==========================================================================
5. Pages
========================================================================== */
.main {
padding: 60px 0 0 0; }
.main > section {
position: relative;
padding: 5rem 0; }

.main-image {
height: 310px; }

.byline {
font-size: 2.5rem; }

.carousel {
padding: 6rem 0 5rem; }
.carousel blockquote {
max-width: 1100px; }
.carousel blockquote p {
font-size: 4.2rem; }
.carousel blockquote p:before {
top: -55px;
left: -60px;
font-size: 15rem; }
.carousel blockquote p:after {
bottom: -130px;
right: -60px;
font-size: 15rem; }

.icons {
margin-left: auto;
margin-right: auto;
max-width: 1140px; }
.icons div[class*="col-"] span {
-webkit-transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.icons .home-page .icons div[class*="col-"] {
width: 30%; }

.img-hw {
margin: 0 0 -5rem 0; }

.gallery li {
width: 33.33%; }

.product-list {
margin-left: -3.33%; }
.product-list li {
float: left;
width: 30%;
margin: 0 0 3.33% 3.33%; }

.plans-page .page-header {
padding-bottom: 12.7rem; }
.plans-page .plans-wrap {
margin-top: -87px; }

.plans {
max-width: 1140px;
margin: 0 auto !important; }
.plans:before, .plans:after {
content: "";
display: table; }
.plans:after {
clear: both; }
.plans .plan {
width: 33.33%;
float: left; }
.plans .plan a.button {
position: absolute;
bottom: 6rem;
left: 50%;
margin-left: -114px; }
.plans .plan h2 {
background-color: #e29e1a; }
.plans .plan .inner {
position: relative;
border-bottom: 1px solid #e3e5e6;
padding: 4rem 19.5% 6rem; }
.plans .plan:first-of-type h2 {
background-color: #e9b41e; }
.plans .plan:first-of-type .inner {
border-left: 1px solid #e3e5e6;
background-color: #faf9f8; }
.plans .plan:last-of-type h2 {
background-color: #e9b41e; }
.plans .plan:last-of-type .inner {
border-right: 1px solid #e3e5e6;
background-color: #faf9f8; }
.plans ul {
max-width: 380px;
margin-left: 0;
margin-right: 0; }
.plans .plan {
padding-right: 0; }

/* ==========================================================================
7. Tables
========================================================================== */
.pricing-columns .col-1-2 {
width: 50%; }
.pricing-columns .col-1-2 .inner {
margin-left: 0;
max-width: 570px; }
.pricing-columns .col-1-2:first-of-type .inner {
margin-right: 0;
margin-left: auto; }

.table thead td {
min-height: 64px; }
.table tbody tr td, .table thead tr td {
width: 22%; }
.table tbody tr td:first-child, .table thead tr td:first-child {
width: 34%; }

.voip-calls tbody tr, .voip-calls thead tr {
margin-right: 0;
padding-right: 20%;
max-width: 570px; }
.voip-calls tbody tr td, .voip-calls thead tr td {
width: 40%; }
.voip-calls tbody tr td:first-child, .voip-calls thead tr td:first-child {
width: 60%; }

.dom-calls tbody tr, .dom-calls thead tr {
margin-left: 0;
max-width: 570px; }
.dom-calls tbody tr td, .dom-calls thead tr td {
width: 33.33%; }
.dom-calls tbody tr td:first-child, .dom-calls thead tr td:first-child {
width: 33.33%; }

.int-calls-single tbody tr td, .int-calls-single thead tr td {
width: 60%; }
.int-calls-single tbody tr td:first-child, .int-calls-single thead tr td:first-child {
width: 25%; }
.int-calls-single tbody tr td:last-child, .int-calls-single thead tr td:last-child {
width: 15%; }

.v-numbers-single tbody tr td, .v-numbers-single thead tr td, .v-toll-free tbody tr td, .v-toll-free thead tr td {
width: 18%; }
.v-numbers-single tbody tr td:first-child, .v-numbers-single thead tr td:first-child, .v-toll-free tbody tr td:first-child, .v-toll-free thead tr td:first-child {
width: 36%; }
.v-numbers-single tbody tr td:last-child, .v-numbers-single thead tr td:last-child, .v-toll-free tbody tr td:last-child, .v-toll-free thead tr td:last-child {
width: 10%; }

.v-toll-free tbody tr td, .v-toll-free thead tr td {
width: 18%; }
.v-toll-free tbody tr td:first-child, .v-toll-free thead tr td:first-child {
width: 18%; }
.v-toll-free tbody tr td:last-child, .v-toll-free thead tr td:last-child {
width: 10%; } }
@media only screen and (min-width: 1281px) {
.wizard.start .wiz-title {
height: 85px; }
.wizard .vertical-wrap {
-webkit-transition: -webkit-transform 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-ms-transition: -webkit-transform 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-o-transition: -webkit-transform 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-transition: -webkit-transform 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: -webkit-transform 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-webkit-transition: transform 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-ms-transition: transform 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-o-transition: transform 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-transition: transform 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: transform 1s cubic-bezier(0.455, 0.03, 0.515, 0.955); }

.welcome {
padding: 0 90px; }

.wiz-title {
margin: -43px auto 0;
width: 85%; }

.wt-left, .wt-right {
font-size: 2.5rem;
line-height: 85px; }

.wt-left {
font-size: 4.5rem;
line-height: 83px; }

.wiz-options {
margin: 80px auto 0;
padding-bottom: 50px; }
.wiz-options li {
margin: 0 0 50px 0;
padding: 0 0 0 60px;
width: 50%; }
.wiz-options li h3 {
margin: 8px 0 0 25px;
font-size: 3.3rem; }
.wiz-options li:nth-child(odd) {
padding: 0; }

.wiz-screens *[class*="screen-"] {
padding: 60px 80px; }

.screen-test .big {
margin-bottom: 3rem; }
.screen-test .register-form {
margin-top: 4rem; }

.q-form-inner {
width: 100%; }
.q-form-inner:before, .q-form-inner:after {
content: "";
display: table; }
.q-form-inner:after {
clear: both; }

/* ==========================================================================
Header
========================================================================== */
/*.home .header {
height: 95px;
}*/
.header {
height: 75px; }

#logo {
float: left;
display: block;
width: 216px;
height: 32px;
margin: 21px 0 0 40px;
background: url(../../images/1/vs/logo.png) no-repeat;
background-size: 100%; }

.top-nav ul li {
padding: 26px 15px 0; }
.top-nav ul li > ul {
display: none;
position: absolute;
width: 220px;
top: 75px; }

.login-button, .myaccount-button {
margin: 20px 40px 0 20px; }

.anchor {
top: -80px; }

/* ==========================================================================
Pages
========================================================================== */
.main {
padding: 75px 0 0 0; }

.comment {
padding-left: 120px;
min-height: 80px; }
.comment img {
width: 80px; }

/* ==========================================================================
Tables
========================================================================== */
.table tbody .letter {
left: 50%;
margin: -13px 0 0 -570px; }

.voip-calls tbody tr, .voip-calls thead tr {
padding-right: 124px; }

.v-numbers tr {
padding-right: 285px; } }
@media only screen and (min-width: 1900px) {
/* ==========================================================================
5. Pages
========================================================================== */
.main-image {
height: 350px; }

.wiz-screens *[class*="screen-"] {
padding: 80px 100px; }

.screen-test .register-form {
margin-top: 4rem; }

.screen-quote .quote-head p:nth-of-type(2) {
margin: 1.5em 0; }
.screen-quote .step {
margin: 2rem 0 4rem; } }


p.notice { background-color: #faf9f8; border: 2px solid #e9b41e; padding: 10px;}