/* normalize.css 2012-07-07T09:50 UTC - http://github.com/necolas/normalize.css */


/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined in IE 8/9.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block;
}

/**
 * Correct `inline-block` display not defined in IE 8/9.
 */

audio,
canvas,
video {
    display: inline-block;
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9.
 * Hide the `template` element in IE, Safari, and Firefox < 22.
 */

[hidden],
template {
    display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
    font-family: sans-serif; /* 1 */
    -ms-text-size-adjust: 100%; /* 2 */
    -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
    margin: 0;
}

/* ==========================================================================
   Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
    background: transparent;
}

/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */

a:focus {
    /*outline: thin dotted;*/
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
    outline: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari 5, and Chrome.
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9, Safari 5, and Chrome.
 */

abbr[title] {
    border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */

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

/**
 * Address styling not present in Safari 5 and Chrome.
 */

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

/**
 * Address differences between Firefox and other browsers.
 */

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

/*
 * proper formatting (http://blog.fontdeck.com/post/9037028497/hyphens)
*/

p {
  -webkit-hyphens: auto;
  -epub-hyphens:   auto;
  -moz-hyphens:    auto;
  hyphens:         auto;

}

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

/**
 * Correct font family set oddly in Safari 5 and Chrome.
 */

code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    font-size: 1em;
}

/**
 * Improve readability of pre-formatted text in all browsers.
 */

pre {
    white-space: pre-wrap;
}

/**
 * Set consistent quote types.
 */

q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
q:before,
q:after {
    content: '';
    content: none;
}

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

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

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;
}

/*
 * Addresses paddings set differently in IE6/7.
 */

menu {
    padding: 0 0 0 40px;
}

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

/*
 * Corrects list images handled incorrectly in IE7.
 */

nav ul,
nav ol {
    list-style: none;
    list-style-image: none;
}

/* ==========================================================================
  Embedded content
========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9.
 */

img {
    border: 0;
}

/**
 * Correct overflow displayed oddly in IE 9.
 */

svg:not(:root) {
    overflow: hidden;
}

/* ==========================================================================
   Figures
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari 5.
 */

figure {
    margin: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
    border: 0; /* 1 */
    padding: 0; /* 2 */
}

/**
 * 1. Correct font family not being inherited in all browsers.
 * 2. Correct font size not being inherited in all browsers.
 * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
 */

button,
input,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 2 */
    margin: 0; /* 3 */
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

button,
input {
    line-height: normal;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */

button,
select {
    text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
    cursor: default;
}

/**
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and 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;
}

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/**
 * 1. Remove default vertical scrollbar in IE 8/9.
 * 2. Improve 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;
}


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

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

.clearfix, .cf {
  zoom: 1;
    &:before, &:after { content: ""; display: table; }
    &:after { clear: both; }
}

/*
use the best ampersand
http://simplebits.com/notebook/2008/08/14/ampersands-2/
*/
span.amp {
  font-family: Baskerville,'Goudy Old Style',Palatino,'Book Antiqua',serif !important;
  font-style: italic;
}



/********************************************************************************************************************************************/
/****************************************************************** CUSTOM ******************************************************************/
/********************************************************************************************************************************************/




/* global */
body, html { height: 100%; -webkit-font-smoothing: antialiased; font-family: 'Open Sans', sans-serif; background-color: #fff; }
.overflow-container { overflow-x: hidden; }
.mobile-only { display: none!important; }
.desktop-only { display: inline-block!important; }

/* text */
a { color: #fff; font-weight: 700; }
a:hover { text-decoration: underline; }
a.button { text-decoration: none; }
h1 { color: #fff; font-size: 50px; margin: 40px 0 0 0; font-weight: 300; font-family: 'Raleway', sans-serif; position: relative; padding-bottom: 25px; }
h1:after { content: ""; height: 2px; width: 100px; background-color: #000; opacity: 0.5; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); }

h2 { color: #242321; font-size: 40px; font-weight: 300; margin: 0; }

h3 { color: #242321; font-size: 20px; margin: 0 0 30px 0; text-transform: uppercase; position: relative; }
h3:after { content: ""; height: 2px; width: 100px; background-color: #00c100; opacity: 1; position: absolute; bottom: -14px; }
h3.left:after { left: 0px; }
h3.right:after { right: 0px; }
h3.white { color: #fff; }
h3.white:after { background-color: #fff; }

h4 { color: #00c100; font-size: 30px; margin: 0; font-weight: 400; text-transform: uppercase; position: relative; }
h5 { font-size: 22px; margin: 0; font-weight: 400; position: relative; margin-bottom: 10px; }

p { color: #242321; font-size: 14px; line-height: 24px; }
p.white { color: #fff; }
p.black { color: #242321; margin-bottom: 20px; }

/* header */
header { width: 100%; height: auto; box-shadow: 0 0 6px 0px rgba(0,0,0,0.4); position: fixed; top:0; left: 0; right: 0; z-index: 12; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; }
header p { font-size: 17px; line-height: 28px; color: #fff; max-width: 600px; margin: 30px auto; }
header a { text-decoration: none; }
header {
  background: #fff; /* Old browsers */
  /*background: -moz-radial-gradient(center, ellipse cover,  #00c100 0%, #00c100 50%); /* FF3.6-15 */
  /*background: -webkit-radial-gradient(center, ellipse cover,  #00c100 0%,#00c100 50%); /* Chrome10-25,Safari5.1-6 */
  /*background: radial-gradient(ellipse at center,  #00c100 0%,#00c100 50%);  W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00c100', endColorstr='#fcddd2',GradientType=1 );  IE6-9 fallback on horizontal gradient */
  padding: 20px 0;
}

header .container { padding: 0px; }
header .container a.button { margin: 10px 0; }
header .container a.login { display: inline-block; font-weight: 600; font-size: 14px; }
header .video-container { background: transparent; padding-top: 0px!important; padding-bottom: 0px; max-width: 400px; width: 90%; margin: 0 auto; float: none; }
header .video-container .video { margin-top: 20px; }
header .container-half { display: inline-block; width: 40%; vertical-align: top; padding: 0 30px; margin-bottom: 40px; }
header .container-half .video-container { width: 100%; }
header.error p { color: #242321; max-width: 650px; }
header.error h1 { color: #242321; }

header.demo { margin-bottom: 150px; min-height: 800px; }
header.demo .video-container { padding: 0; background-color: transparent; position: absolute; z-index: 1; bottom: -70px; border: 10px solid #fff; width: 90%; max-width: 600px; margin: 0 auto; left: 50%; transform: translateX(-50%); }
header.demo .video-container section { width: 100%; max-width: 100%; }
header.demo .video-container section .video { margin-top: 0; }
header.personal { min-height: 950px; }
header.error { min-height: 100%; }

nav { width: 100%; position: relative; margin: 0 auto; padding: 0 20px; max-width: 1200px; white-space: nowrap; box-sizing: border-box; }
nav a.button { color: #242321; padding: 6px 10px; position: relative; line-height: 1.15; }
nav a.button:after { content: ""; position: absolute; background: #242321; width: 0%; height: 2px; left: 50%; bottom: 0; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; }
nav a.button.active:after, nav a.button.hover:hover:after { width: 50%; }
nav .left { width: 20%; text-align: left; display: inline-block; vertical-align: middle; }
nav .right { width: 80%; text-align: right; display: inline-block; vertical-align: middle; }
nav .login { font-weight: 600; margin-left: 10px; margin-right: 5px; font-size: 14px; color: #fff !important; }
nav .button-green { color: #fff !important; }
nav .logo { width: 190px; display: block; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s;  }
nav .logo img { width: 100%; vertical-align: middle; }

header.small { padding: 15px 0; }
header.small nav .logo { width: 150px; }

.menu-button { position: absolute; width: 35px; top: 50%; right: 20px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); cursor: pointer; display: none; }
.menu-line { width: 100%; height: 4px; display: block; position: relative; margin: 6px 0; background-color: #242321; }

.mobile-links { position: fixed; bottom: 0; width: 100%; height: 55px; z-index: 9; background: rgba(255,255,255,1); box-shadow: 0 -5px 30px 0px rgba(0,0,0,0.1); }
.mobile-links .button.mobile-only { position: absolute; bottom: 0; width: 44%; text-align: center; margin: 8px 4%; padding: 10px; }
.mobile-links .button.signup.mobile-only { left: 0; background-color: #00c100; color: #fff; }
.mobile-links .button.login.mobile-only { right: 0; background-color: #242321; color: #fff; }

.banner-image-container { width: 973px; position: absolute; bottom: -100px; left: 50%; transform: translateX(-50%); z-index: 1; }
.banner-image-container img { width: 100%; }

.image-header { float: left; width: 100%; position: relative; margin-top: 88px; background: #2c2c2c; }
.image-header:before { z-index: 1; content: ''; position: absolute; top:0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); }
.image-header .container { z-index: 2; }
.image-header.home { background: url(images/home.jpg) no-repeat center right; background-size: cover; min-height: 500px; }
.image-header.pricing { background: url(images/pricing.jpg) no-repeat center right; background-size: cover; min-height: 500px; }
.image-header h1 { margin: 0 0 50px 0; text-shadow: 1px 2px rgba(49, 49, 49, 0.2); }
.image-header h1:after { background-color: #fff; -webkit-transform:none; -moz-transform:none; -ms-transform:none; transform: none; left: 0; }
.image-header p { width: 51%; color: #fff; margin-bottom: 15px; margin-top:0; font-size: 16px;
    line-height: 28px; text-shadow: 1px 2px rgba(49, 49, 49, 0.2); }
.image-header .button { margin:30px 10px 30px 0px; }

.image-header.pricing .button { margin-bottom: 0; }

.image-header.home .left-image, .image-header.home .right-image { width: 50%; float: left; position: relative; min-height: 500px; background-size: cover; }
.image-header.home .left-image img, .image-header.home .right-image img { max-width: 200px; max-height: 100px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

#pricing header { min-height: auto; z-index: 12; }

.hidden { display: none; }

/* structure */
.main { float: left; position: relative; width: 100%; text-align: center; background-color: #efefef; }
.main h2 { margin-bottom: 50px; line-height: 40px; }
.main section { position: relative; margin: 0 auto; max-width: 1260px; background: #fff; height: 360px; box-shadow: 0 0 30px 0px rgba(0,0,0,0.1); margin: 40px 0; }
.main section.primary { background-color: #00c100; }
.main section.dark { background-color: #242321; }
.main section .left-text, .main section .right-text { height: 100%; width: 30%; position: absolute; white-space: nowrap; }
.main section .left-text { text-align: left; left: 5%; }
.main section .right-text { text-align: right; right: 5%; }
.main section .left-text:before, .main section .right-text:before { content: ""; height: 100%; vertical-align: middle; display: inline-block; }

.home .video-container { padding-top: 80px; }
.video-container { float: left; background: #fff; height: auto; width: 100%; padding-top: 200px; padding-bottom: 100px; text-align: center; }
.video-container section { width: 90%; max-width: 600px; margin: 0 auto; }
.video-container .video { width: 100%; position: relative; cursor: pointer; display: block; margin-top: 30px; overflow: hidden; }
.video-container .video img { width: 100%; display: block; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; }
.video-container .video .button { position: absolute; top: 50%; left: 50%; margin-left: -71px; margin-top: -20px; z-index: 2; padding-left: 30px; }
.video-container .video .button:before { content: ""; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid #fff; position: absolute; left: 11px; top: 12px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; }
.video-container .video .bg-overlay { background: rgba(0,0,0,0.5); top: 0; bottom: 0; left: 0; right: 0; z-index: 1; position: absolute; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; }
.video-container .video:hover .button { background-color: #fff; color: #242321; }
.video-container .video:hover .button:before { border-left-color: #242321; }
.video-container .video:hover .bg-overlay { background: rgba(0,0,0,0.6); }
.video-container .video:hover img { transform: scale(1.05); }

.main section .left-text h3, .main section .right-text h3 { position: relative; opacity: 1; }
.main section .left-text p, .main section .right-text p { position: relative; opacity: 0; }
.main section .left-text h3.load, .main section .left-text p.load { animation:left-in 0.45s ease-out; animation-fill-mode:forwards; -webkit-animation:left-in 0.45s ease-out; -webkit-animation-fill-mode:forwards; -moz-animation:left-in 0.45s ease-out; -moz-animation-fill-mode:forwards; }
.main section .right-text h3.load, .main section .right-text p.load { animation:right-in 0.45s ease-out; animation-fill-mode:forwards; -webkit-animation:right-in 0.45s ease-out; -webkit-animation-fill-mode:forwards; -moz-animation:right-in 0.45s ease-out; -moz-animation-fill-mode:forwards; }

.text-center { vertical-align: middle; display: inline-block; white-space: normal; }

.main section .left-image, .main section .right-image  { width: 60%; position: absolute; height: 100%; overflow: hidden; }
.main section .left-image { right: 0; }
.main section .right-image { left: 0; }
.main section .left-image img, .main section .right-image img { width: auto; min-width: 100%; min-height: 100%; display: block; opacity: 1; }
.main section .left-image img.load, .main section .right-image img.load { animation:image-in 0.45s ease-out; animation-fill-mode:forwards; -webkit-animation:image-in 0.45s ease-out; -webkit-animation-fill-mode:forwards; -moz-animation:image-in 0.45s ease-out; -moz-animation-fill-mode:forwards; }

.feature-list { max-width: 1200px; width: 100%; margin: 50px auto 100px auto; }

footer { background: #242321; width: 100%; float: left; position: relative; padding: 10px 0; }
footer .container { padding: 20px; }
footer .container a.login { display: inline-block; font-weight: 600; font-size: 14px; margin-top: 20px; text-decoration: none; }
footer .container a.login:hover { text-decoration: underline; }
footer h2 { color: #efefef; margin: 0 0 30px 0; }
footer p { color: #5a5a5a; font-size: 12px; margin: 0; }

.container { position: relative; margin: 0 auto; padding: 70px 20px; max-width: 1200px; overflow: hidden; }
.full-container-white { position: relative; background-color: #fff; float: left; min-height: 200px; width: 100%; }

/* reusables */
.align-center { text-align: center; }

.button { transition:all 0.2s; font-size: 14px; text-transform: uppercase; padding: 8px 14px; color: #ffffff; font-weight: 600; display: inline-block; border-radius: 2px; }
.button-primary { background: #00c100; border: 2px solid #00c100; }
.button-dark { background: #242321; border: 2px solid #242321; }
.button-green { background-color: #00c000; border:2px solid #00c000; color: #fff; }
.button-green:hover { background-color: #784d28; border-color: #784d28; }
.button-outline-white { border: 2px solid #fff; color: #fff; }
.button-outline-white:hover { background: #fff; color: #242321; }
.button-outline-black { border: 2px solid #242321; color: #242321; }
.button-outline-black:hover { background: #242321; color: #fff!important; }

.button-dark:hover { background: #3c3a38; border-color: #3c3a38; }
.button-primary:hover { background: rgba(245,141,50, .4); }

/* animations */
@-webkit-keyframes left-in {
    0% { left: -20px; opacity: 0; }
    100% { left: 0; opacity: 1; }
}
@keyframes left-in {
    0% { left: -20px; opacity: 0; }
    100% { left: 0; opacity: 1; }
}

@-webkit-keyframes right-in {
    0% { right: -20px; opacity: 0; }
    100% { right: 0; opacity: 1; }
}
@keyframes right-in {
    0% { right: -20px; opacity: 0; }
    100% { right: 0; opacity: 1; }
}

@-webkit-keyframes image-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes image-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* pricing */

.container.price-container { overflow: visible; padding-top: 50px; }

.pricing-list { width: 100%; background: #fff; box-shadow: 0 0 30px 0px rgba(0,0,0,0.1); box-sizing: border-box; }
.pricing-list .row { width: 100%; border-bottom: 1px solid #efefef; }
.pricing-list .row:after { content: ''; display: table; clear: both; }
.pricing-list .row.pricing-heading .price { display: block; color: #242321; font-size: 20px; margin-top: 5px; }
.pricing-list .row.pricing-heading .price-divider { display: block; margin: 7px 0; font-size: 11px; font-style: italic; }
.pricing-list .row.pricing-heading .annual-saving {  }
.pricing-list .row.pricing-heading .billing-info { font-size: 10px; margin-top: 10px; }
.pricing-list .row.pricing-heading .col { padding: 30px 15px; line-height: 1.1; font-size: 15px; font-weight: 400; min-height:183px; }
.pricing-list .row .col { float: left; display: block; min-height: 60px; padding: 0 20px; line-height: 60px; }
.pricing-list .row .feature-name { width: 28%; background-color: #f9f9f9; text-align: left; color: #242321; font-weight: 600; font-size: 15px; }
.pricing-list .row .basic-plan, .pricing-list .row .pro-plan { width: 36%; font-size: 14px; }
.pricing-list .row .basic-plan { color: #8e8e8e; border:1px solid #efefef; border-top: none; border-bottom: none; }
.pricing-list .row .pro-plan { font-weight: 600; }
.pricing-list .col i { width: 30px; height: 30px; margin: 0 10px; border-radius: 30px; display: inline-block; position: relative; }
.pricing-list .col .tick { background-color: #7cc300; top:8px; }
.pricing-list .col .tick:before, .pricing-list .col .tick:after { content: ""; position: absolute; background-color: #fff; }
.pricing-list .col .tick:before { width: 27%; height: 3px; top: 47%; left: 28%; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 0 40%; -moz-transform-origin: 0 40%; -ms-transform-origin: 0 40%; transform-origin: 0 40%; }
.pricing-list .col .tick:after { width: 42%; height: 3px; top: 62%; left: 44%; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 40%; -moz-transform-origin: 0 40%; -ms-transform-origin: 0 40%; transform-origin: 0 40%; }
.pricing-list .col .cross { top:9px; }
.pricing-list .col .cross:before { content: ""; position: absolute; width: 14px; height: 3px; top: 50%; left: 50%; background-color: #acadae; margin-left: -7px; }

.currency-container { text-align: center; margin-bottom: 50px; }
.currency-container .currency { text-align: center; display: inline-block; vertical-align: middle; background-color: #c7c7c7; color: white; width: 50px; position: relative; height: 50px; border-radius: 50px; transition: all 0.3s; cursor: pointer; margin: 10px 15px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.currency-container .currency:hover { background-color: #a7a7a7; }
.currency-container .currency:before { content: ""; width: calc(100% - 8px); height: calc(100% - 8px); position: absolute; border: 2px solid transparent; border-radius: 50%; left: 2px; top: 2px; transition: all 0.3s; }
.currency-container .currency.active { background-color: #676d1a; }
.currency-container .currency.active:before { border-color: #fff; }
.currency-container .currency .currency-symbol { position: absolute; top: calc(50% - 8px); left: 50%; -webkit-transform: translate(-50%, -50%); font-size: 24px; -moz-transform: translate(-50%, -50%); font-size: 24px; -ms-transform: translate(-50%, -50%); font-size: 24px; transform: translate(-50%, -50%); font-size: 24px; }
.currency-container .currency .currency-label { position: absolute; font-size: 10px; font-weight: bold; bottom: 8px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }

.tooltip { color: #3c3f42; position: relative; width: 25px; height: 15px; cursor: pointer; display: inline-block; top: -5px; left: 3px; text-align: left; }
.tooltip .tooltip-text { font-family: 'Open Sans', sans-serif; font-size: 12px; font-weight: 600; padding: 10px 14px; line-height: 1.8; background-color: rgba(60, 63, 66, 1); color: #fff; border-radius: 3px; position: absolute; top: -25px; text-align: left; left: 25px; visibility: hidden; opacity: 0; transition: all .2s; width: 180px; z-index: 8; }
.tooltip .tooltip-text:before { content: ''; width: 0; height: 0; border-style: solid; border-width: 6px 6px 6px 0; border-color: transparent #3c3f42 transparent transparent; position: absolute; left: -5px; top: 16px; }
.tooltip:hover .tooltip-text { visibility: visible; opacity: 1; margin-top: 10px; }


/* media queries */
@media screen and (max-width: 1200px) {

}

@media screen and (max-width: 768px) {
  h3.right:after { left: 0px; right: auto; }

  header .container { padding: 0px 20px; }
  
	.container { padding: 40px 20px; }
	.main { padding: 0; }

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

  nav .logo img { max-width: 150px; }
  
  nav .left { width: auto; }
  nav .right { display: none; background: #242321; position: absolute; top: calc(100% + 20px); box-sizing: border-box; left: 0; width: 100%; z-index: 999; }
  /*nav .right { opacity: 0; visibility: hidden; position: absolute; top: calc(100% + 20px); box-sizing: border-box; right: -20px; width: 100%; z-index: 999; transition: all 0.3s; }*/
  nav .right .button { color: #fff; background: transparent; border:none; }
  nav .right .button:after { display: none; }
  /*nav .right.dark-bg { background: #242321; }*/
  /*nav .right.show { opacity: 1; visibility: visible; right: 0; }*/
  nav .right .button { display: block!important; padding: 10px 20px; text-align: center; margin: 10px; }
  nav .right .button-outline-black { color: #fff; }
  nav a.button:after { bottom: 5px; }
  nav a.button.active:after, nav a.button.hover:hover:after { width: 30%; }

  .main section { height: auto; float: left; width: 100%; margin: 10px 0 40px 0; }
	.main section .left-text, .main section .right-text { width: 100%; float: left; position: relative; margin-bottom: 20px; text-align: left; right: 0; left: 0; padding: 20px; }
  .main section .left-image, .main section .right-image { width: 100%; height: auto; float: left; position: relative; }
	.main section .left-image img, .main section .right-image img { width: 100%; min-height: initial; min-width: initial; }

  .feature-list { padding: 0 20px; }

  .menu-button { display: block; }
  header .container-half { width: 100%; padding: 0px; }

  .image-header { margin-top: 79px; min-height: auto; }
  .image-header:before { background: rgba(0,0,0,0.5); }
  .image-header p { width: 100%; }

  .pricing-list .row .feature-name { width: 28%; }
  .pricing-list .row .basic-plan, .pricing-list .row .pro-plan { width: 36%; }

}

@media screen and (max-width: 767px) {

  .pricing-list { box-shadow: none; background: transparent; }
  .pricing-list .row { margin: 10px 0; background: #fff; }
  .pricing-list .row.pricing-heading .col { padding: 20px 10px; }

  .pricing-list .row.pricing-heading .feature-name { display: none; }
  .pricing-list .row.pricing-heading .col { padding: 20px 10px; }
  .pricing-list .row .col { width: 50%; padding: 0 10px; }
  .pricing-list .row .feature-name { width: 100%; min-height: 30px; line-height: 30px; text-align: center; color: #fff; font-weight: 400; background-color: #464645; }
  .tooltip { color: #fff; width: auto; top: -3px; }
  .tooltip:hover .tooltip-text { margin-top: 0; margin-bottom: 12px; }
  .tooltip .tooltip-text { top: auto; right: -5px; left: auto; bottom:100%; background: #7b7b7b; }
  .tooltip .tooltip-text:before { right: 5px; top:auto; bottom: -6px; left:auto; border-width: 6px 6px 0 6px; border-color: #7b7b7b transparent transparent transparent; }

}

@media screen and (max-width: 450px) {
  .mobile-only { display: inline-block!important; }
  .desktop-only { display: none!important; }


  h1 { font-size: 35px; margin-top: 30px; padding-bottom: 20px; }
  header p { font-size: 16px; margin: 20px auto; }
  .main h2 { font-size: 30px; }
  /*header { min-height: 560px; }*/
  header.personal { min-height: 850px; }
  .banner-image-container { width: 150%; }
  .main section .left-text, .main section .right-text { margin-bottom: 0px; }
  .main section .left-text p, .main section .right-text p { margin-bottom: 0px; }

  .image-header.home { background-position: 80% center; }
  .image-header.pricing { background-position: 83% center; }
  
  .currency-container { margin-bottom: 30px; }
  .currency-container .currency { width: 48px; height: 48px; margin:10px 2px; }

  footer { padding: 10px 0 80px 0; }
  
  .video-container { padding-bottom: 50px; }
  .video-container section .video:before, .video-container section .video:hover:before { border-left: 30px solid #fff; border-top: 20px solid transparent; border-bottom: 20px solid transparent; }
}