/*
Theme Name: Droplr Oct 2016
Author: Anonymous
Author URI:
Version: 1
Description: Base theme for Wordpress
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: base
Tags: one-column, two-columns
Theme URI:
*/
/* ---------------------------------------------------------
   1. Embedded fonts styles
   ---------------------------------------------------------*/
@import url("fonts/genericons/genericons.css");
@import url(https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic);
@font-face {
  font-family: 'icomoon';
  src: url("fonts/icomoon.eot?pegj8s");
  src: url("fonts/icomoon.eot?pegj8s#iefix") format("embedded-opentype"), url("fonts/icomoon.ttf?pegj8s") format("truetype"), url("fonts/icomoon.woff?pegj8s") format("woff"), url("fonts/icomoon.svg?pegj8s#icomoon") format("svg");
  font-weight: normal;
  font-style: normal; }

[class^="icon-"], [class*=" icon-"], #main-nav > ul > li.has-drop-down > a:after, #main ul:not([class]) > li:before {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon-instagram:before {
  content: "\e900"; }

.icon-down-arrow:before {
  content: "\e905"; }

.icon-facebook:before {
  content: "\e906"; }

.icon-quote:before {
  content: "\e907"; }

.icon-check:before {
  content: "\e908"; }

.icon-twitter:before {
  content: "\e909"; }

.icon-apple:before {
  content: "\e90a"; }

.icon-chat:before {
  content: "\e90b"; }

.icon-mail:before {
  content: "\e90c"; }

.icon-windows:before {
  content: "\eac2"; }

/* ---------------------------------------------------------
   2. General reset
   ---------------------------------------------------------*/
#main-nav > ul, #main-nav ul ul, #main ul:not([class]), .list-individuals, .list-popup, .carousel .pagination ul {
  margin: 0;
  padding: 0;
  list-style: none; }

.clearfix:after, .widget:after, .search-form:after, .post-password-form p:after, .navigation-single:after {
  content: '';
  display: block;
  clear: both; }

.ellipsis {
  white-space: nowrap;
  /* 1 */
  text-overflow: ellipsis;
  /* 2 */
  overflow: hidden; }

#content {
  margin-bottom: 15px; }
  #content:only-child {
    width: 100% !important; }

#sidebar {
  margin-bottom: 15px; }

img {
  max-width: 100%;
  height: auto; }

.comment-form input[type='text'],
.search-form input[type='text'],
.post-password-form input[type='text'], .comment-form
input[type='tel'],
.search-form
input[type='tel'],
.post-password-form
input[type='tel'], .comment-form
input[type='email'],
.search-form
input[type='email'],
.post-password-form
input[type='email'], .comment-form
input[type='search'],
.search-form
input[type='search'],
.post-password-form
input[type='search'], .comment-form
input[type='password'],
.search-form
input[type='password'],
.post-password-form
input[type='password'], .comment-form
input[type='url'],
.search-form
input[type='url'],
.post-password-form
input[type='url'], .comment-form
input[type='date'],
.search-form
input[type='date'],
.post-password-form
input[type='date'], .comment-form
textarea,
.search-form
textarea,
.post-password-form
textarea {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  border: 1px solid #999;
  padding: .5em .7em;
  transition: border-color .3s; }
  .comment-form input[type='text']:focus,
  .search-form input[type='text']:focus,
  .post-password-form input[type='text']:focus, .comment-form
  input[type='tel']:focus,
  .search-form
  input[type='tel']:focus,
  .post-password-form
  input[type='tel']:focus, .comment-form
  input[type='email']:focus,
  .search-form
  input[type='email']:focus,
  .post-password-form
  input[type='email']:focus, .comment-form
  input[type='search']:focus,
  .search-form
  input[type='search']:focus,
  .post-password-form
  input[type='search']:focus, .comment-form
  input[type='password']:focus,
  .search-form
  input[type='password']:focus,
  .post-password-form
  input[type='password']:focus, .comment-form
  input[type='url']:focus,
  .search-form
  input[type='url']:focus,
  .post-password-form
  input[type='url']:focus, .comment-form
  input[type='date']:focus,
  .search-form
  input[type='date']:focus,
  .post-password-form
  input[type='date']:focus, .comment-form
  textarea:focus,
  .search-form
  textarea:focus,
  .post-password-form
  textarea:focus {
    border-color: #333;
    outline: none;
    box-shadow: none; }
  .comment-form input[type='text']::-webkit-input-placeholder,
  .search-form input[type='text']::-webkit-input-placeholder,
  .post-password-form input[type='text']::-webkit-input-placeholder, .comment-form
  input[type='tel']::-webkit-input-placeholder,
  .search-form
  input[type='tel']::-webkit-input-placeholder,
  .post-password-form
  input[type='tel']::-webkit-input-placeholder, .comment-form
  input[type='email']::-webkit-input-placeholder,
  .search-form
  input[type='email']::-webkit-input-placeholder,
  .post-password-form
  input[type='email']::-webkit-input-placeholder, .comment-form
  input[type='search']::-webkit-input-placeholder,
  .search-form
  input[type='search']::-webkit-input-placeholder,
  .post-password-form
  input[type='search']::-webkit-input-placeholder, .comment-form
  input[type='password']::-webkit-input-placeholder,
  .search-form
  input[type='password']::-webkit-input-placeholder,
  .post-password-form
  input[type='password']::-webkit-input-placeholder, .comment-form
  input[type='url']::-webkit-input-placeholder,
  .search-form
  input[type='url']::-webkit-input-placeholder,
  .post-password-form
  input[type='url']::-webkit-input-placeholder, .comment-form
  input[type='date']::-webkit-input-placeholder,
  .search-form
  input[type='date']::-webkit-input-placeholder,
  .post-password-form
  input[type='date']::-webkit-input-placeholder, .comment-form
  textarea::-webkit-input-placeholder,
  .search-form
  textarea::-webkit-input-placeholder,
  .post-password-form
  textarea::-webkit-input-placeholder {
    color: #ccc; }
  .comment-form input[type='text']::-moz-placeholder,
  .search-form input[type='text']::-moz-placeholder,
  .post-password-form input[type='text']::-moz-placeholder, .comment-form
  input[type='tel']::-moz-placeholder,
  .search-form
  input[type='tel']::-moz-placeholder,
  .post-password-form
  input[type='tel']::-moz-placeholder, .comment-form
  input[type='email']::-moz-placeholder,
  .search-form
  input[type='email']::-moz-placeholder,
  .post-password-form
  input[type='email']::-moz-placeholder, .comment-form
  input[type='search']::-moz-placeholder,
  .search-form
  input[type='search']::-moz-placeholder,
  .post-password-form
  input[type='search']::-moz-placeholder, .comment-form
  input[type='password']::-moz-placeholder,
  .search-form
  input[type='password']::-moz-placeholder,
  .post-password-form
  input[type='password']::-moz-placeholder, .comment-form
  input[type='url']::-moz-placeholder,
  .search-form
  input[type='url']::-moz-placeholder,
  .post-password-form
  input[type='url']::-moz-placeholder, .comment-form
  input[type='date']::-moz-placeholder,
  .search-form
  input[type='date']::-moz-placeholder,
  .post-password-form
  input[type='date']::-moz-placeholder, .comment-form
  textarea::-moz-placeholder,
  .search-form
  textarea::-moz-placeholder,
  .post-password-form
  textarea::-moz-placeholder {
    opacity: 1;
    color: #ccc; }
  .comment-form input[type='text']:-moz-placeholder,
  .search-form input[type='text']:-moz-placeholder,
  .post-password-form input[type='text']:-moz-placeholder, .comment-form
  input[type='tel']:-moz-placeholder,
  .search-form
  input[type='tel']:-moz-placeholder,
  .post-password-form
  input[type='tel']:-moz-placeholder, .comment-form
  input[type='email']:-moz-placeholder,
  .search-form
  input[type='email']:-moz-placeholder,
  .post-password-form
  input[type='email']:-moz-placeholder, .comment-form
  input[type='search']:-moz-placeholder,
  .search-form
  input[type='search']:-moz-placeholder,
  .post-password-form
  input[type='search']:-moz-placeholder, .comment-form
  input[type='password']:-moz-placeholder,
  .search-form
  input[type='password']:-moz-placeholder,
  .post-password-form
  input[type='password']:-moz-placeholder, .comment-form
  input[type='url']:-moz-placeholder,
  .search-form
  input[type='url']:-moz-placeholder,
  .post-password-form
  input[type='url']:-moz-placeholder, .comment-form
  input[type='date']:-moz-placeholder,
  .search-form
  input[type='date']:-moz-placeholder,
  .post-password-form
  input[type='date']:-moz-placeholder, .comment-form
  textarea:-moz-placeholder,
  .search-form
  textarea:-moz-placeholder,
  .post-password-form
  textarea:-moz-placeholder {
    color: #ccc; }
  .comment-form input[type='text']:-ms-input-placeholder,
  .search-form input[type='text']:-ms-input-placeholder,
  .post-password-form input[type='text']:-ms-input-placeholder, .comment-form
  input[type='tel']:-ms-input-placeholder,
  .search-form
  input[type='tel']:-ms-input-placeholder,
  .post-password-form
  input[type='tel']:-ms-input-placeholder, .comment-form
  input[type='email']:-ms-input-placeholder,
  .search-form
  input[type='email']:-ms-input-placeholder,
  .post-password-form
  input[type='email']:-ms-input-placeholder, .comment-form
  input[type='search']:-ms-input-placeholder,
  .search-form
  input[type='search']:-ms-input-placeholder,
  .post-password-form
  input[type='search']:-ms-input-placeholder, .comment-form
  input[type='password']:-ms-input-placeholder,
  .search-form
  input[type='password']:-ms-input-placeholder,
  .post-password-form
  input[type='password']:-ms-input-placeholder, .comment-form
  input[type='url']:-ms-input-placeholder,
  .search-form
  input[type='url']:-ms-input-placeholder,
  .post-password-form
  input[type='url']:-ms-input-placeholder, .comment-form
  input[type='date']:-ms-input-placeholder,
  .search-form
  input[type='date']:-ms-input-placeholder,
  .post-password-form
  input[type='date']:-ms-input-placeholder, .comment-form
  textarea:-ms-input-placeholder,
  .search-form
  textarea:-ms-input-placeholder,
  .post-password-form
  textarea:-ms-input-placeholder {
    color: #ccc; }
  .comment-form input[type='text'].placeholder,
  .search-form input[type='text'].placeholder,
  .post-password-form input[type='text'].placeholder, .comment-form
  input[type='tel'].placeholder,
  .search-form
  input[type='tel'].placeholder,
  .post-password-form
  input[type='tel'].placeholder, .comment-form
  input[type='email'].placeholder,
  .search-form
  input[type='email'].placeholder,
  .post-password-form
  input[type='email'].placeholder, .comment-form
  input[type='search'].placeholder,
  .search-form
  input[type='search'].placeholder,
  .post-password-form
  input[type='search'].placeholder, .comment-form
  input[type='password'].placeholder,
  .search-form
  input[type='password'].placeholder,
  .post-password-form
  input[type='password'].placeholder, .comment-form
  input[type='url'].placeholder,
  .search-form
  input[type='url'].placeholder,
  .post-password-form
  input[type='url'].placeholder, .comment-form
  input[type='date'].placeholder,
  .search-form
  input[type='date'].placeholder,
  .post-password-form
  input[type='date'].placeholder, .comment-form
  textarea.placeholder,
  .search-form
  textarea.placeholder,
  .post-password-form
  textarea.placeholder {
    color: #ccc; }

iframe {
  max-width: 100%; }

.widget {
  margin-bottom: 1.2em; }
  .widget ul {
    padding-left: 1em; }
  .widget select {
    min-width: 150px;
    width: 100%;
    max-width: 300px; }

.comment-form label {
  display: block;
  padding-bottom: 4px; }

.comment-form textarea {
  overflow: auto;
  margin: 0;
  height: 120px;
  min-height: 120px; }

.comment-form textarea,
.comment-form input[type='text'] {
  margin: 0 4px 0 0;
  width: 290px; }

.comment-form input[type='submit'] {
  display: block;
  float: none; }

.post-password-form label {
  display: block; }

.post-password-form input[type='password'] {
  margin: 0 4px 0 0;
  width: 300px; }

.search-form {
  display: flex;
  width: 100%;
  max-width: 100%; }
  .search-form input {
    float: left;
    height: 2.5em; }
    .search-form input[type='search'] {
      margin: 0 4px 0 0;
      min-width: 0;
      flex: 1; }

.post-password-form input {
  float: left;
  height: 2.5em; }
  .post-password-form input[type='password'] {
    width: 150px; }

.comment-form input[type='submit'],
.post-password-form input[type='submit'],
.search-form input[type='submit'] {
  background: #7b4aba;
  color: #fff;
  height: 2.5em;
  border: none;
  border-radius: 3px;
  padding: 0 .5em; }
  .comment-form input[type='submit']:hover,
  .post-password-form input[type='submit']:hover,
  .search-form input[type='submit']:hover {
    opacity: 0.8; }
  .comment-form input[type='submit']:focus,
  .post-password-form input[type='submit']:focus,
  .search-form input[type='submit']:focus {
    outline: none;
    box-shadow: none; }

.commentlist {
  margin: 0 0 1.2em; }
  .commentlist .edit-link {
    margin: 0; }
  .commentlist .avatar-holder {
    float: left;
    margin: 0 1.2em 4px 0; }

.commentlist-item .commentlist-item {
  padding: 0; }
  @media (min-width: 768px) {
    .commentlist-item .commentlist-item {
      padding: 0 0 0 2em; } }

.comment,
.commentlist-holder {
  overflow: hidden; }

.commentlist-item .commentlist-item,
.commentlist-item + .commentlist-item {
  padding-top: 1.2em; }

table {
  border-collapse: collapse;
  margin-bottom: 1em; }
  table th {
    padding: 7px 10px;
    font-weight: bold;
    text-align: center;
    vertical-align: top;
    border: 1px solid #ddd; }
  table td {
    text-align: center;
    padding: 5px 10px;
    vertical-align: middle;
    border: 1px solid #ddd; }

.widget_calendar {
  font-size: .8125em;
  line-height: 1.1; }
  .widget_calendar table {
    table-layout: fixed;
    width: 100%;
    max-width: 300px;
    border-collapse: collapse; }
    .widget_calendar table caption {
      text-align: center; }
  .widget_calendar th, .widget_calendar td {
    padding: 3px;
    text-align: center;
    vertical-align: middle; }
  .widget_calendar #prev {
    text-align: left; }
  .widget_calendar #next {
    text-align: right; }

.gallery-item dt {
  float: none;
  padding: 0; }

.navigation,
.navigation-comments {
  position: relative;
  vertical-align: middle;
  margin-bottom: 1.2em; }
  .navigation .screen-reader-text,
  .navigation-comments .screen-reader-text {
    position: absolute;
    left: -99999px; }
  .navigation .page-numbers,
  .navigation-comments .page-numbers {
    display: inline-block;
    vertical-align: middle;
    padding: 0 .4em; }
    @media (max-width: 767px) {
      .navigation .page-numbers,
      .navigation-comments .page-numbers {
        padding: 0; } }
  .navigation .next,
  .navigation .prev,
  .navigation-comments .next,
  .navigation-comments .prev {
    display: inline-block;
    vertical-align: middle;
    max-width: 50%;
    border-radius: 3px;
    background: #7b4aba;
    color: #fff;
    padding: .4em;
    text-decoration: none;
    transition: background .3s; }
    .navigation .next:hover,
    .navigation .prev:hover,
    .navigation-comments .next:hover,
    .navigation-comments .prev:hover {
      background: #966fc8; }
    @media (max-width: 767px) {
      .navigation .next,
      .navigation .prev,
      .navigation-comments .next,
      .navigation-comments .prev {
        padding: .2em; } }

.navigation-single {
  margin-bottom: 1.2em; }
  .navigation-single .next,
  .navigation-single .prev {
    float: left;
    vertical-align: middle;
    max-width: 50%;
    border-radius: 3px;
    background: #7b4aba;
    color: #fff;
    text-decoration: none;
    transition: background .3s; }
    .navigation-single .next:hover,
    .navigation-single .prev:hover {
      background: #966fc8; }
    .navigation-single .next a,
    .navigation-single .prev a {
      color: inherit;
      text-decoration: none;
      padding: .4em;
      display: block; }
      @media (max-width: 767px) {
        .navigation-single .next a,
        .navigation-single .prev a {
          padding: .2em; } }
  .navigation-single .next {
    float: right; }

.wp-caption {
  max-width: 100%;
  clear: both;
  border: 1px solid #ccc;
  padding: .4em;
  margin-bottom: 1.2em; }
  .wp-caption img {
    margin: 0;
    vertical-align: top; }
  .wp-caption p {
    margin: .4em 0 0; }

div.aligncenter {
  margin: 0 auto 1.2em; }

img.aligncenter {
  display: block;
  margin: 0 auto; }

.alignleft {
  float: left;
  margin: 0 1.2em 4px 0; }

.alignright {
  float: right;
  margin: 0 0 4px 1.2em; }

.mejs-container {
  margin-bottom: 1.2em; }
  @media (min-width: 768px) {
    .mejs-container {
      margin-bottom: 0; } }

.wp-caption-text,
.gallery,
.alignnone,
.gallery-caption,
.sticky,
.bypostauthor {
  height: auto; }

html {
  height: 100%; }

body {
  overflow: auto;
  height: 100%;
  min-width: 320px; }

/* main container styles */
#wrapper {
  position: relative;
  overflow: hidden;
  width: 100%; }

.btn {
  padding: 5px 28px 8px;
  letter-spacing: normal;
  text-align: center;
  transition: background 0.3s ease, color 0.3s ease; }
  .btn.btn-default {
    /* &:focus {
			color: $btn-default-color;
			background: none;
			border-color: #7b4aba;
			box-shadow: none;
		} */ }
    .btn.btn-default:hover {
      background: #7b4aba;
      color: #fff; }
  .btn.btn-lg {
    font-size: 24px;
    min-width: 290px;
    padding: 14px 18px 14px; }
    @media (max-width: 1023px) {
      .btn.btn-lg {
        font-size: 20px;
        padding: 12px 14px;
        min-width: 240px; } }
  .btn [class^="icon-"] {
    margin: 0 12px 0 10px; }
    @media (max-width: 1023px) {
      .btn [class^="icon-"] {
        margin: 0 5px; } }
  .btn.btn-success {
    background: #5e636f;
    border-color: #5e636f; }
    .btn.btn-success:hover {
      background: #7b4aba;
      border-color: #7b4aba; }

h1 {
  font-weight: 300;
  line-height: 1.2;
  margin: 0 0 14px; }
  @media (max-width: 1299px) {
    h1 {
      font-size: 50px; } }
  @media (max-width: 1023px) {
    h1 {
      font-size: 30px; } }
  h1 span {
    font-weight: 700; }

.social-networks {
  display: flex;
  justify-content: space-between;
  font-size: 26px;
  line-height: 1; }
  .social-networks li {
    margin-bottom: 10px; }
  .social-networks a {
    color: #fff;
    transition: color .3s; }
    .social-networks a:hover {
      text-decoration: none;
      color: #7b4aba; }

blockquote {
  border: none;
  padding: 0;
  line-height: 1.5;
  margin: 0 0 25px; }
  blockquote:before {
    content: "\e907";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    font-size: 50px;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: block;
    margin-bottom: 15px; }
    @media (min-width: 768px) {
      blockquote:before {
        font-size: 74px;
        margin-bottom: 24px; } }
  @media (min-width: 768px) {
    blockquote {
      margin-bottom: 35px; } }
  @media (min-width: 1024px) {
    blockquote {
      margin-bottom: 47px; } }
  blockquote p {
    margin-bottom: 5px; }
  blockquote cite {
    font-style: normal;
    display: block;
    font-size: 0.667em; }
    blockquote cite em {
      font-style: italic; }
    blockquote cite a {
      color: inherit;
      font-weight: 700; }
      blockquote cite a:hover {
        color: #e6e6e6; }

.popup-holder {
  position: relative; }

.popup {
  position: absolute;
  top: 100%;
  color: #5e636f;
  background: #fff;
  width: 287px;
  padding: 23px 28px 13px;
  left: 100%;
  z-index: 5;
  border-radius: 5px;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
  display: none; }
  @media (max-width: 1299px) {
    .popup {
      width: 250px; } }
  @media (max-width: 767px) {
    .popup {
      left: 0;
      margin: 10px 0 0;
      padding: 15px; } }
  .popup strong {
    display: block;
    margin: 0 0 10px;
    color: #7b4aba;
    font-weight: 700; }

.inverted {
  background-color: #222;
  color: #fff; }

.bg-logo {
  background-image: url("images/bg-logo-3.png");
  background-repeat: no-repeat;
  background-position: bottom 30% left -20%; }

.auth-embed {
  display: none; }
  .auth-embed iframe {
    width: 400px;
    height: 700px;
    border: 0;
    border-radius: 6px; }

/* header styles */
#header {
  position: relative;
  width: 100%;
  background: #fff;
  box-shadow: 0 2px 8px 0 rgba(48, 51, 57, 0.2);
  padding: 20px 35px 20px;
  z-index: 10; }
  @media (max-width: 1299px) {
    #header {
      padding: 20px 0; } }
  @media (max-width: 767px) {
    #header {
      padding: 15px 0; } }
  #header .container-fluid {
    max-width: 1600px; }
  #header .logo-white {
    display: none; }
  #header .btn-wrap {
    float: right;
    letter-spacing: -5px; }
    @media (max-width: 1023px) {
      #header .btn-wrap {
        width: 100%;
        padding: 10px 0 0;
        text-align: center; } }
    #header .btn-wrap .btn {
      margin: 0 0 0 20px;
      font-size: 14px; }
      @media (max-width: 479px) {
        #header .btn-wrap .btn {
          display: block;
          margin: 10px 0 0; } }
      #header .btn-wrap .btn.btn-default {
        background: none;
        border: 0;
        color: #44484F;
        font-weight: 400; }
        #header .btn-wrap .btn.btn-default:hover {
          color: #8D61DF; }
        #header .btn-wrap .btn.btn-default:active {
          color: #8D61DF;
          box-shadow: none; }
      #header .btn-wrap .btn.btn-primary {
        background-image: linear-gradient(0deg, #713FCD 0%, #8D61DF 100%);
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: 4px;
        color: #fff;
        font-weight: 700;
        padding: 10px 20px; }
        #header .btn-wrap .btn.btn-primary:hover {
          background-image: linear-gradient(-179deg, #713FCD 0%, #8D61DF 100%);
          border: 1px solid rgba(255, 255, 255, 0.8); }
        #header .btn-wrap .btn.btn-primary:active {
          background-image: linear-gradient(-179deg, #6337B3 0%, #8359D0 100%);
          box-shadow: inset 0 1px 2px 1px #552C9F;
          border: 1px solid #fff;
          color: #fff;
          box-shadow: none; }
      #header .btn-wrap .btn:first-child {
        margin: 0; }

header#sub {
  background: #222222;
  padding: 40px 0;
  margin-bottom: 40px;
  text-align: center; }
  header#sub h1 {
    color: white;
    font-size: 24px;
    margin: 15px 0; }
    header#sub h1 a {
      color: white; }

/* page logo styles */
.logo {
  float: left;
  width: 127px; }
  .logo img {
    vertical-align: top; }

/* main informative part styles */
#main-nav {
  position: relative;
  float: left;
  margin: 0 0 0 40px;
  padding: 14px 0 0;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.2; }
  @media (max-width: 1299px) {
    #main-nav {
      margin: 0 0 0 40px; } }
  @media (max-width: 1023px) {
    #main-nav {
      float: none;
      margin: 0; } }
  @media (max-width: 1023px) {
    #main-nav > ul {
      padding: 0 15px; } }
  #main-nav > ul > li {
    margin: 0 0 0 30px;
    float: left; }
    @media (max-width: 1299px) {
      #main-nav > ul > li {
        margin: 0 0 0 20px; } }
    @media (max-width: 1023px) {
      #main-nav > ul > li {
        float: none;
        margin: 0 0 10px; } }
    @media (min-width: 1024px) {
      #main-nav > ul > li:first-child {
        margin: 0; } }
    #main-nav > ul > li.has-drop-down {
      position: relative; }
      #main-nav > ul > li.has-drop-down .item {
        margin: 10px 0; }
        #main-nav > ul > li.has-drop-down .item:first-child {
          margin-top: 0; }
        #main-nav > ul > li.has-drop-down .item:last-child {
          margin-bottom: 0; }
      #main-nav > ul > li.has-drop-down > a {
        position: relative;
        display: block; }
        @media (min-width: 1024px) {
          #main-nav > ul > li.has-drop-down > a {
            padding: 0 17px 0 0; } }
        #main-nav > ul > li.has-drop-down > a:after {
          font-size: 12px;
          content: "\e905";
          right: -3px;
          top: 4px;
          position: absolute; }
          @media (max-width: 1023px) {
            #main-nav > ul > li.has-drop-down > a:after {
              right: 10px; } }
    #main-nav > ul > li > a {
      color: #44484F; }
      @media (max-width: 1023px) {
        #main-nav > ul > li > a {
          display: block;
          padding: 0 15px 0 0; } }
    #main-nav > ul > li.hover > a {
      color: #8D61DF; }
      #main-nav > ul > li.hover > a:active {
        color: #8D61DF; }
    #main-nav > ul > li.hover ul {
      display: block; }
    #main-nav > ul > li.hover:after {
      position: absolute;
      content: '';
      top: 100%;
      height: 10px;
      left: 0;
      right: 0;
      background: rgba(255, 255, 255, 0.001); }
      @media (max-width: 1023px) {
        #main-nav > ul > li.hover:after {
          display: none; } }
  #main-nav ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    font-size: 14px;
    background: #fff; }
    @media (min-width: 1024px) {
      #main-nav ul ul {
        width: 150px;
        margin-top: 10px;
        padding: 10px;
        border-radius: 3px;
        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15); } }
    @media (max-width: 1023px) {
      #main-nav ul ul {
        position: static;
        padding: 0 10px; } }
    @media (max-width: 1023px) {
      #main-nav ul ul li {
        padding-top: 10px; } }
    @media (max-width: 1023px) {
      #main-nav ul ul a {
        display: block; } }

.nav-opener {
  width: 24px;
  height: 13px;
  position: absolute;
  display: none;
  font-size: 0;
  top: 30px;
  right: 15px;
  z-index: 1001; }
  @media (max-width: 1023px) {
    .nav-opener {
      display: block; } }
  .nav-opener:before, .nav-opener:after,
  .nav-opener span {
    background: #7b4aba;
    position: absolute;
    top: 5px;
    border-radius: 3px;
    left: 0;
    right: 0;
    height: 3px;
    transition: all 0.2s linear; }
    .fixed-header .nav-opener:before, .fixed-header .nav-opener:after, .fixed-header
    .nav-opener span {
      background: #3e4d60; }
  .nav-opener:before, .nav-opener:after {
    content: '';
    top: 0; }
  .nav-opener:after {
    top: 10px; }
  .nav-opener:hover {
    opacity: 0.9; }
  .nav-active .nav-opener span {
    opacity: 0; }
  .nav-active .nav-opener:hover {
    opacity: .9; }
  .nav-active .nav-opener .close-btn:after,
  .nav-active .nav-opener .close-btn:before, .nav-active .nav-opener:after, .nav-active .nav-opener:before {
    transform: rotate(45deg);
    top: 5px;
    left: 0;
    right: 0;
    border-radius: 0; }
  .nav-active .nav-opener .close-btn:after, .nav-active .nav-opener:after {
    transform: rotate(-45deg); }

.nav-active {
  overflow: hidden; }

@media (max-width: 1023px) {
  .nav-drop {
    display: none; } }

@media (max-width: 1023px) {
  .nav-active .nav-drop {
    display: block;
    position: absolute;
    top: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
    left: 0;
    right: 0; } }

@media (max-width: 767px) {
  .nav-active .nav-drop {
    bottom: 0;
    position: fixed;
    top: 65px; } }

@media (min-width: 1024px) {
  body.home #header {
    position: fixed;
    top: 0;
    left: 0; }
    body.home #header .logo-purple {
      display: block; }
    body.home #header .logo-white {
      display: none; }
  body.home #header:not(.scrolled) {
    background: none;
    box-shadow: none; }
    body.home #header:not(.scrolled) .logo-purple {
      display: none; }
    body.home #header:not(.scrolled) .logo-white {
      display: block; }
    body.home #header:not(.scrolled) .btn-wrap .btn.btn-default {
      color: #fff; }
      body.home #header:not(.scrolled) .btn-wrap .btn.btn-default:hover {
        color: rgba(255, 255, 255, 0.6); }
      body.home #header:not(.scrolled) .btn-wrap .btn.btn-default:active {
        color: #CDB2FF;
        box-shadow: none; }
    body.home #header:not(.scrolled) .btn-wrap .btn.btn-primary {
      background: rgba(255, 255, 255, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.5); }
      body.home #header:not(.scrolled) .btn-wrap .btn.btn-primary:hover {
        background: rgba(255, 255, 255, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.8); }
      body.home #header:not(.scrolled) .btn-wrap .btn.btn-primary:active {
        background: #fff;
        border: 1px solid #fff;
        color: #875DD4;
        box-shadow: none; }
    body.home #header:not(.scrolled) #main-nav > ul > li > a {
      color: #fff; }
      body.home #header:not(.scrolled) #main-nav > ul > li > a:hover {
        color: rgba(255, 255, 255, 0.6); }
      body.home #header:not(.scrolled) #main-nav > ul > li > a:active {
        color: #CDB2FF; } }

/* main informative part styles */
#main {
  position: relative; }
  #main ul:not([class]) {
    color: #7b4aba;
    padding: 0 0 11px;
    margin-bottom: 5px; }
    #main ul:not([class]) > li {
      position: relative;
      padding: 0 0 0 29px;
      margin: 0 0 16px; }
      #main ul:not([class]) > li:before {
        content: "\e908";
        position: absolute;
        top: 4px;
        left: 0; }
    #main ul:not([class]) li li {
      margin: 0; }
  #main .widget ul:not([class]) li {
    padding-left: 0;
    margin-bottom: 5px; }
    #main .widget ul:not([class]) li:before {
      content: none; }

/* container layouts */
.container article, .container .inside-narrow {
  text-align: center;
  padding-bottom: 40px; }
  .container article p, .container article h2, .container article h3, .container article h4, .container article ul, .container article ol, .container .inside-narrow p, .container .inside-narrow h2, .container .inside-narrow h3, .container .inside-narrow h4, .container .inside-narrow ul, .container .inside-narrow ol {
    margin-left: auto;
    margin-right: auto;
    text-align: left; }

.container .sharedaddy {
  display: none; }

.container article img {
  margin: 20px auto;
  border-radius: 3px; }

.container article iframe {
  margin: 20px auto; }

#nav-below {
  width: 450px;
  text-align: center;
  margin: 40px auto; }
  #nav-below div {
    display: inline-block; }

/* visual block styles */
.visual-section {
  white-space: nowrap;
  text-align: center;
  background-size: cover;
  min-height: 700px;
  position: relative;
  font-size: 24px; }
  .visual-section:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 0;
    min-height: 700px; }
  .visual-section > * {
    white-space: normal;
    display: inline-block;
    vertical-align: middle;
    max-width: 99%; }
  @media (max-width: 1299px) {
    .visual-section {
      min-height: 600px; }
      .visual-section:after {
        min-height: 600px; } }
  .visual-section:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background: url(images/filter.png) no-repeat;
    background-size: cover; }
  @media (max-width: 1023px) {
    .visual-section {
      min-height: 450px; }
      .visual-section:after {
        min-height: 450px; } }
  @media (max-width: 767px) {
    .visual-section {
      min-height: 1px; }
      .visual-section:after {
        display: none; } }
  @media (max-width: 1023px) {
    .visual-section {
      font-size: 16px; } }
  .visual-section .container {
    position: relative;
    z-index: 2; }
  .visual-section .holder {
    color: #fff;
    padding: 27px 0 40px;
    text-align: left;
    display: inline-block;
    width: 100%; }
  .visual-section h1 {
    font-size: 46px;
    line-height: 62px;
    letter-spacing: 0;
    font-weight: 700; }
  .visual-section h2 {
    font-size: 20px;
    line-height: 27px;
    font-weight: 300; }
  .visual-section p, .visual-section h2 {
    margin: 0 10px 40px 0; }
    @media (max-width: 1299px) {
      .visual-section p, .visual-section h2 {
        margin: 0 0 40px; } }
    @media (max-width: 1023px) {
      .visual-section p, .visual-section h2 {
        margin: 0 0 20px; } }
  .visual-section .btn {
    box-shadow: 0 3px 0 0 #542C9C, 0 2px 10px 0 rgba(132, 64, 239, 0.7), inset 0 1px 1px 0 rgba(255, 255, 255, 0.17);
    border-radius: 4px;
    margin: 0;
    padding: 20px 40px;
    min-width: auto;
    color: #fff;
    background: #8D61DF;
    font-size: 16px;
    line-height: 22px;
    border: none;
    outline: 0; }
    .visual-section .btn:hover {
      background: #713FCD; }
    .visual-section .btn:active {
      background: #713FCD;
      box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.17); }
    @media (max-width: 1023px) {
      .visual-section .btn {
        margin: 0; } }
  .visual-section .img {
    text-align: right;
    padding: 28px 0 0;
    margin: 0 -20px 0 0; }
    @media (max-width: 1023px) {
      .visual-section .img {
        padding: 15px 0 0;
        margin: 0; } }
    @media (max-width: 767px) {
      .visual-section .img {
        text-align: center;
        padding: 5px 0 0;
        margin: 0 -15px -15px; } }
    .visual-section .img img {
      vertical-align: top; }
  .visual-section .image {
    margin: 4px -43px -50px; }
    @media (max-width: 1299px) {
      .visual-section .image {
        margin: 0 -20px -20px; } }
    @media (max-width: 767px) {
      .visual-section .image {
        margin: 0 -25px -40px;
        padding-top: 20px; } }
    .visual-section .image img {
      width: 100%;
      vertical-align: top; }
  .visual-section blockquote {
    padding: 10px 80px 20px 0;
    border: none;
    font-size: 24px; }
    .visual-section blockquote:before {
      display: none; }
    @media (max-width: 1023px) {
      .visual-section blockquote {
        font-size: 16px;
        padding: 0; } }
    .visual-section blockquote p {
      margin: 0 0 22px; }
    .visual-section blockquote cite {
      font-style: normal;
      display: block; }
      .visual-section blockquote cite em {
        font-style: italic; }
      .visual-section blockquote cite a {
        color: inherit;
        font-weight: 700; }
        .visual-section blockquote cite a:hover {
          color: #e6e6e6; }

.text-section {
  background: #222;
  color: #fff;
  padding: 30px 0 30px;
  text-align: center; }
  @media (max-width: 1023px) {
    .text-section {
      padding: 20px 0; } }
  .text-section .text {
    line-height: 19px;
    font-size: 14px;
    font-weight: 300;
    display: block;
    position: relative;
    padding: 0 0 0 40px;
    margin: 0 auto; }
    @media (min-width: 768px) {
      .text-section .text {
        width: 710px; } }
    @media (max-width: 767px) {
      .text-section .text {
        padding: 0 0 0 50px; } }
    .text-section .text:before {
      display: block;
      content: '';
      background: url("images/talk-icon.svg");
      width: 25px;
      height: 24px;
      top: -2px;
      left: 0;
      position: absolute; }
    .text-section .text strong {
      font-weight: 700; }
      @media (max-width: 767px) {
        .text-section .text strong {
          font-size: 18px; } }

.tabs-section {
  padding-top: 85px;
  padding-bottom: 66px; }
  .tabs-section .ttl {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2;
    color: #5e636f;
    margin: 0 0 19px;
    display: block;
    text-align: center; }
    .tabs-section .ttl span {
      font-weight: 700; }

/* tab element styles */
.nav-tabs {
  border: none;
  text-align: center;
  font-size: 24px;
  line-height: 1.2;
  margin: 0 0 62px; }
  .nav-tabs > li {
    float: none;
    display: inline-block;
    vertical-align: top;
    margin: 0 14px; }
    .nav-tabs > li > a {
      border: none;
      color: #bfbfbf;
      border-bottom: 2px solid transparent;
      padding: 0px 0 1px;
      font-weight: 700;
      transition: color 0.3s ease, border 0.3s ease; }
      .nav-tabs > li > a:hover {
        background: none;
        color: #7b4aba;
        border-bottom: 2px solid #7b4aba; }

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  border: none;
  border-bottom: 2px solid #7b4aba; }

/* tabs content holder styles */
.list-individuals {
  text-align: center;
  letter-spacing: -5px;
  margin: 0 0 39px; }
  .list-individuals li {
    letter-spacing: normal;
    display: inline-block;
    vertical-align: top;
    width: 20%;
    padding: 0 15px 30px; }
    @media (max-width: 1023px) {
      .list-individuals li {
        width: 25%; } }
    @media (max-width: 767px) {
      .list-individuals li {
        width: 50%;
        padding: 0 10px 30px; } }
  .list-individuals .icon {
    margin: 0 0 13px; }
    .list-individuals .icon img {
      vertical-align: top;
      max-height: 90px; }
  .list-individuals strong {
    color: #7b4aba;
    display: block;
    font-weight: 400; }
    .list-individuals strong.post-name {
      font-weight: 700; }

.list-popup {
  letter-spacing: normal;
  margin: 0 -25px;
  letter-spacing: -5px; }
  @media (max-width: 1023px) {
    .list-popup {
      margin: 0 -10px; } }
  .list-popup li {
    display: inline-block;
    vertical-align: top;
    letter-spacing: normal;
    width: 20%;
    position: relative;
    z-index: 1;
    padding: 0 25px 25px; }
    @media (max-width: 1023px) {
      .list-popup li {
        padding: 0 10px 20px; } }
    @media (max-width: 767px) {
      .list-popup li {
        width: 50%; } }
    .list-popup li:hover {
      z-index: 5; }
    @media (max-width: 1600px) {
      .list-popup li:nth-child(5n) .popup {
        left: 0; } }
    @media (max-width: 1299px) {
      .list-popup li:nth-child(5n) .popup {
        right: 0;
        left: auto; } }
    @media (max-width: 767px) {
      .list-popup li:nth-child(5n) .popup {
        right: auto;
        left: 0; } }
    @media (max-width: 1299px) {
      .list-popup li:nth-child(4n) .popup {
        left: 0; } }
    @media (max-width: 767px) {
      .list-popup li:nth-child(2n) .popup {
        left: auto;
        right: 0; } }
  .list-popup .btn {
    width: 100%;
    padding-left: 5px;
    padding-right: 5px; }
    .list-popup .btn [class^="icon-"] {
      margin: 0 9px 0 -1px; }

.view-section {
  background: #6b35c4;
  color: #fff;
  line-height: 1.5;
  font-size: 24px;
  position: relative;
  overflow: hidden; }
  .view-section:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-53%);
    background: url(images/bg-logo-3.png) no-repeat;
    width: 736px;
    z-index: 1;
    height: 929px; }
  @media (max-width: 767px) {
    .view-section {
      font-size: 16px; } }
  .view-section .container {
    padding-top: 82px;
    position: relative;
    z-index: 2; }
    @media (max-width: 767px) {
      .view-section .container {
        padding-top: 40px; } }
  .view-section .img-01 {
    position: absolute;
    top: 0;
    right: -50px;
    max-width: 440px;
    width: 45%; }
    @media (max-width: 767px) {
      .view-section .img-01 {
        right: -25px; } }
    @media (max-width: 479px) {
      .view-section .img-01 {
        right: 0;
        width: 40%; } }
  .view-section img {
    width: 100%;
    vertical-align: top; }
    .view-section img.app {
      max-width: 364px; }
    .view-section img.browser {
      max-width: 1002px; }
  .view-section .text {
    margin: 0 0 57px;
    width: 59%; }
  .view-section .img-02 {
    max-width: 864px;
    margin: 0 0 0 -42px; }
    @media (max-width: 767px) {
      .view-section .img-02 {
        margin: 0; } }

.post-section {
  padding-top: 102px;
  padding-bottom: 23px; }
  @media (max-width: 767px) {
    .post-section {
      padding: 40px 0; } }
  .post-section h3 {
    font-weight: 700;
    color: #7b4aba;
    margin: 0 15px 17px 0;
    line-height: 1.5; }
  .post-section .post {
    margin-bottom: 112px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    align-content: stretch;
    width: calc(100% + 30px);
    width: calc(100% + 30px); }
    @media (max-width: 767px) {
      .post-section .post {
        display: table;
        table-layout: fixed;
        width: 100%;
        margin: 0 0 15px;
        padding: 0 15px; } }
  .post-section .media {
    text-align: left; }
    @media (max-width: 767px) {
      .post-section .media {
        display: table-footer-group;
        text-align: center;
        margin: 0 15px; } }
    .post-section .media:last-child {
      text-align: right; }
      @media (max-width: 767px) {
        .post-section .media:last-child {
          text-align: center; } }
      @media (min-width: 1024px) {
        .post-section .media:last-child.col-sm-7 {
          padding-left: 62px; } }
    .post-section .media img {
      vertical-align: top;
      margin-top: 9px; }
  .post-section .text-area {
    position: relative;
    padding-bottom: 29px; }
    @media (max-width: 767px) {
      .post-section .text-area {
        margin: 0 0 30px;
        padding: 0; } }
    @media (min-width: 1024px) {
      .post-section .text-area:last-child.col-sm-5 {
        padding-top: 7px;
        padding-left: 68px; }
        .post-section .text-area:last-child.col-sm-5 .btn {
          left: 67px; } }
  .post-section p {
    margin: 0 0 19px; }
  .post-section .btn {
    min-width: 230px;
    position: absolute;
    bottom: 0;
    left: 15px; }
    @media (max-width: 767px) {
      .post-section .btn {
        position: static; } }
  @media (max-width: 1023px) {
    .post-section video {
      width: 100% !important;
      height: auto !important; } }
  .post-section .mejs-layers,
  .post-section .mejs-controls {
    display: none !important; }
  .post-section .mejs-video {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important; }
    @media (max-width: 1023px) {
      .post-section .mejs-video {
        width: 100% !important; } }
    .post-section .mejs-video video,
    .post-section .mejs-video .mejs-mediaelement,
    .post-section .mejs-video .mejs-inner {
      max-width: 100%;
      vertical-align: top; }
    .post-section .mejs-video .me-cannotplay {
      display: block;
      width: 100% !important;
      max-width: 100%; }

.upgrage-section {
  padding-top: 81px;
  padding-bottom: 40px; }
  @media (max-width: 1023px) {
    .upgrage-section {
      padding-top: 40px;
      padding-bottom: 40px; } }
  .upgrage-section .ttl-text {
    font-size: 24px;
    line-height: 1.5;
    font-weight: normal;
    display: block;
    text-align: center;
    margin: 0 0 61px; }
    @media (max-width: 1023px) {
      .upgrage-section .ttl-text {
        margin: 0 0 30px; } }

.post-upgrage {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  align-content: stretch;
  margin: 0 -37px;
  color: #fff; }
  @media (max-width: 1023px) {
    .post-upgrage {
      margin: 0 -25px; } }
  @media (max-width: 767px) {
    .post-upgrage {
      margin: 0; } }
  .post-upgrage .post {
    text-align: center;
    width: 33.33%;
    padding: 0 37px 50px;
    display: flex; }
    @media (max-width: 1023px) {
      .post-upgrage .post {
        padding: 0 15px 40px; } }
    @media (max-width: 767px) {
      .post-upgrage .post {
        width: 100%;
        padding: 0 0 30px;
        display: block; } }
  .post-upgrage .holder {
    position: relative;
    padding: 19px 5px 54px;
    height: 100%;
    width: 100%; }
    .post-upgrage .holder:after {
      background: #6b35c4;
      border-radius: 3px;
      content: '';
      z-index: -1;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 200px; }
  .post-upgrage .image {
    margin: 0 0 20px; }
    .post-upgrage .image img {
      vertical-align: top; }
  .post-upgrage .ttl {
    font-weight: 700;
    width: 100%;
    display: block;
    margin: 0 0 14px; }
  .post-upgrage .btn {
    border-width: 2px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0; }
    .post-upgrage .btn [class^="icon-"] {
      margin: 0 0 0 3px;
      font-size: 12px; }

.section {
  padding: 30px 0; }
  @media (min-width: 768px) {
    .section {
      padding: 50px 0; } }
  @media (min-width: 1024px) {
    .section {
      padding: 64px 0; } }
  .section.inverted {
    background-color: #222;
    color: #fff; }
  .section h2 {
    margin-bottom: 46px; }
    @media (min-width: 768px) {
      .section h2 {
        margin-bottom: 56px; } }

.description-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-left: -10px;
  margin-right: -10px;
  width: calc(100% + 20px);
  font-size: .875em; }
  @media (min-width: 768px) {
    .description-list {
      margin-left: -15px;
      margin-right: -15px;
      width: calc(100% + 30px); } }
  @media (min-width: 1024px) {
    .description-list {
      font-size: 1em; } }
  .description-list li {
    width: 50%;
    padding: 0 10px;
    margin-bottom: 30px; }
    @media (min-width: 768px) {
      .description-list li {
        padding: 0 15px;
        width: 32%;
        margin-bottom: 40px; } }
    @media (min-width: 1300px) {
      .description-list li {
        width: 30%;
        padding: 0 6px; } }
  .description-list .image-holder {
    height: 40px;
    margin-bottom: 15px; }
    @media (min-width: 768px) {
      .description-list .image-holder {
        margin-bottom: 25px;
        height: 50px; } }
    @media (min-width: 1024px) {
      .description-list .image-holder {
        height: 70px;
        margin-bottom: 35px; } }
    @media (min-width: 1300px) {
      .description-list .image-holder {
        height: 90px; } }
  .description-list img {
    height: 100%; }
  .description-list h5 {
    color: #7b4aba;
    font-weight: bold;
    margin: 0 0 26px; }

.tag-list {
  color: #fff;
  padding-top: 15px;
  display: flex;
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap; }
  .tag-list li {
    flex: 1;
    display: inline-block;
    vertical-align: top;
    margin-right: 19px;
    margin-bottom: 19px;
    max-width: 100%; }
    @media (min-width: 1024px) {
      .tag-list li {
        margin-right: 19px; } }
  .tag-list .open {
    padding: 8px;
    display: block;
    background-color: #5e636f;
    border-radius: 3px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
    max-width: 100%;
    color: #fff;
    transition: background-color .3s; }
    .tag-list .open:hover {
      background-color: #7b4aba; }
    @media (min-width: 768px) {
      .tag-list .open {
        padding: 12px 15px; } }
    .tag-list .open [class^="icon-"] {
      margin: 0 9px 0 -1px; }
  @media (min-width: 768px) {
    .tag-list .popup {
      width: 320px;
      left: 0; } }

.promo-section {
  background-repeat: no-repeat;
  background-position: 100% 70px;
  background-size: auto 120%;
  padding: 35px 0;
  position: relative; }
  .promo-section.pricing {
    background-size: cover;
    background-position: center; }
  .promo-section:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.6);
    z-index: 1; }
    @media (min-width: 768px) {
      .promo-section:before {
        content: none;
        display: none; } }
  @media (min-width: 768px) {
    .promo-section {
      padding: 50px 0; } }
  @media (min-width: 1024px) {
    .promo-section {
      padding: 80px 0;
      background-position: 100% 37px; } }
  @media (min-width: 1300px) {
    .promo-section {
      padding: 94px 0 105px; } }
  .promo-section > * {
    position: relative;
    z-index: 2; }
  .promo-section .slogan {
    display: block;
    font-size: 30px;
    line-height: 1.167;
    font-weight: 300;
    color: #7b4aba;
    margin-bottom: 30px; }
    @media (min-width: 1024px) {
      .promo-section .slogan {
        font-size: 50px;
        margin-bottom: 50px; } }
    @media (min-width: 1300px) {
      .promo-section .slogan {
        font-size: 60px;
        margin-bottom: 70px; } }
  .promo-section .btn {
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15); }

.highlight-section {
  padding: 30px 0;
  background-color: #7b4aba;
  color: #fff;
  font-size: 1.25em;
  line-height: 1.5; }
  @media (min-width: 768px) {
    .highlight-section {
      font-size: 1.5em;
      padding: 50px 0; } }
  @media (min-width: 1024px) {
    .highlight-section {
      padding: 75px 0 65px; } }
  @media (min-width: 1300px) {
    .highlight-section {
      padding: 105px 0 90px; } }
  .highlight-section .flex-row {
    flex-wrap: wrap; }
    @media (min-width: 768px) {
      .highlight-section .flex-row {
        flex-direction: row-reverse; } }
  .highlight-section .image-holder {
    width: 100%;
    padding: 0 15px;
    margin-bottom: 25px;
    text-align: center; }
    @media (min-width: 768px) {
      .highlight-section .image-holder {
        width: 70%; } }
    @media (min-width: 1024px) {
      .highlight-section .image-holder {
        width: 62%; } }
    .highlight-section .image-holder img {
      margin: 0 auto; }
  .highlight-section .highlight-text {
    width: 100%;
    padding: 0 20%;
    margin-bottom: 10px; }
    @media (min-width: 768px) {
      .highlight-section .highlight-text {
        width: 30%;
        padding: 0 15px;
        margin-bottom: 35px; } }
    .highlight-section .highlight-text p {
      margin-bottom: 5px; }
  .highlight-section.bg-logo {
    background-position: bottom 30% left 0; }

.flex-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc(100% + 30px);
  margin-left: -15px;
  margin-right: -15px; }

.partner-list {
  padding: 0;
  margin: 25px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 100%; }
  @media (min-width: 768px) {
    .partner-list {
      margin: 50px 0 0; } }
  @media (min-width: 1300px) {
    .partner-list {
      margin-top: 100px;
      margin-bottom: -22px; } }
  .inverted .partner-list {
    margin: 25px 0; }
    @media (min-width: 768px) {
      .inverted .partner-list {
        margin: 40px 0; } }
  .partner-list li {
    padding: 0 3px;
    display: inline-block; }
    @media (min-width: 480px) {
      .partner-list li {
        padding: 0 5px; } }
    @media (min-width: 768px) {
      .partner-list li {
        padding: 0 10px; } }
    .partner-list li img {
      display: block;
      width: 100%; }

.quote-section {
  background-size: cover;
  padding: 40px 0;
  position: relative;
  color: #fff; }
  .quote-section:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background: url(images/filter.png) no-repeat;
    background-size: cover;
    opacity: .8; }
  @media (min-width: 768px) {
    .quote-section {
      padding: 60px 0; } }
  @media (min-width: 1300px) {
    .quote-section {
      padding: 90px 0 100px; } }
  .quote-section > * {
    position: relative;
    z-index: 2; }
  .quote-section .btn-default {
    border: none; }

.flex-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0; }
  .flex-container:before, .flex-container:after {
    content: none;
    display: none; }
  .flex-container .col {
    width: 100%;
    padding: 0 15%;
    margin-bottom: 30px; }
    @media (min-width: 768px) {
      .flex-container .col {
        width: 32%;
        padding: 0 10px;
        margin-bottom: 10px; } }
    @media (min-width: 1300px) {
      .flex-container .col {
        width: 29%; } }
    .flex-container .col .title {
      display: block;
      margin-bottom: 24px;
      padding: 0; }
    .flex-container .col .image-holder {
      padding: 0 10px 20px;
      position: relative;
      margin-bottom: 25px; }
      .flex-container .col .image-holder:before {
        content: "";
        position: absolute;
        top: 100%;
        left: 35%;
        right: 35%;
        height: 2px;
        background-color: #7b4aba; }
      @media (min-width: 1024px) {
        .flex-container .col .image-holder {
          padding: 0 0 30px;
          margin-bottom: 37px; } }
      .flex-container .col .image-holder img {
        margin: 0 auto; }
    .flex-container .col .col-content {
      position: relative;
      transition: color .3s; }
      .flex-container .col .col-content:hover {
        color: rgba(255, 255, 255, 0.1); }

.btn-hover {
  opacity: 0;
  visibility: hidden;
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  transition: all .3s; }
  *:hover > .btn-hover {
    opacity: 1;
    visibility: visible;
    z-index: 2; }

/* slider styles */
.carousel {
  position: relative;
  background: url("images/bg-logo-3.png"), linear-gradient(135deg, #6b35c4 0%, #7b4aba 100%);
  background-repeat: no-repeat;
  background-position: bottom 30% left -20%;
  padding-top: 35px;
  margin-bottom: -1px;
  color: #fff; }
  @media (min-width: 1024px) {
    .carousel {
      padding-top: 83px; } }
  .carousel .mask {
    position: relative;
    overflow: hidden;
    width: 100%; }
  .carousel .slideset {
    width: 100% !important;
    float: left;
    display: flex; }
  .carousel .slide {
    width: 100% !important;
    flex-shrink: 0;
    float: left;
    display: flex; }
    .carousel .slide .slide-image {
      display: none; }
      @media (min-width: 768px) {
        .carousel .slide .slide-image {
          position: absolute;
          left: 0;
          bottom: -1px;
          max-height: 100%;
          display: block;
          vertical-align: top; } }
      @media (min-width: 1300px) {
        .carousel .slide .slide-image {
          left: 7%; } }
  .carousel .slide-text {
    margin-bottom: 70px; }
    @media (min-width: 1024px) {
      .carousel .slide-text {
        margin-bottom: 100px; } }
    @media (min-width: 1300px) {
      .carousel .slide-text {
        margin-bottom: 137px; } }
  .carousel .container {
    position: relative; }
  .carousel .pagination {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%); }
    @media (min-width: 768px) {
      .carousel .pagination {
        transform: none;
        left: calc(50% + 15px); } }
    @media (min-width: 1024px) {
      .carousel .pagination {
        bottom: 93px; } }
    .carousel .pagination ul {
      letter-spacing: -.3em;
      padding: 0 !important;
      margin: 0 -7px !important; }
      .carousel .pagination ul li {
        padding: 0 7px !important;
        margin: 0 !important;
        display: inline-block;
        vertical-align: top; }
        .carousel .pagination ul li:before {
          content: none;
          display: none; }
        .carousel .pagination ul li.active a {
          background-color: #fff; }
      .carousel .pagination ul a {
        overflow: hidden;
        text-indent: 101%;
        white-space: nowrap;
        display: block;
        width: 20px;
        height: 20px;
        border-radius: 4px;
        background-color: rgba(255, 255, 255, 0.15);
        transition: background-color; }
        .carousel .pagination ul a:hover {
          background-color: #fff; }

body.modalOpened > #wrapper {
  filter: blur(10px); }

/* footer styles */
#footer {
  background-color: #222;
  color: #fff;
  font-size: .75em; }

.footer-container {
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 75% auto;
  padding-top: 30px;
  padding-bottom: 5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }
  @media (min-width: 768px) {
    .footer-container {
      padding-top: 50px;
      padding-bottom: 30px;
      background-size: 40% auto;
      background-position: calc(100% - 15px) bottom; } }
  @media (min-width: 1024px) {
    .footer-container {
      padding-top: 95px;
      padding-bottom: 60px; } }

.footer-social {
  width: 100%;
  max-width: 220px;
  margin: 0 auto 20px; }
  @media (min-width: 768px) {
    .footer-social {
      order: 1;
      width: auto;
      max-width: 23%;
      margin-bottom: 0; } }
  .footer-social .logo {
    max-width: 100%;
    margin: 0 auto 25px;
    float: none;
    width: 100%; }
    @media (min-width: 1024px) {
      .footer-social .logo {
        margin-bottom: 50px; } }
    .footer-social .logo img {
      width: 100%;
      vertical-align: top; }

.footer-start {
  width: 100%;
  margin-bottom: 30px; }
  @media (min-width: 768px) {
    .footer-start {
      width: auto;
      margin-bottom: 0;
      order: 3; } }

.nav-block {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: 0 -10px 10px;
  width: calc(100% + 20px); }
  @media (min-width: 768px) {
    .nav-block {
      width: auto;
      margin: 0;
      flex: 1;
      padding: 0 10px;
      order: 2;
      margin-top: -5px; } }
  @media (min-width: 1024px) {
    .nav-block {
      padding: 0 50px 0 70px; } }
  .nav-block .footer-nav {
    flex-shrink: 0;
    padding: 0 10px;
    margin-bottom: 15px;
    max-width: 33.333%; }
    .nav-block .footer-nav a {
      color: #808080;
      transition: color .3s;
      line-height: 2; }
      .nav-block .footer-nav a:hover {
        color: #fff;
        text-decoration: none; }
  .nav-block .title {
    display: block;
    margin-bottom: 10px;
    font-size: 1.334em;
    font-weight: normal; }
    @media (min-width: 768px) {
      .nav-block .title {
        margin-bottom: 15px; } }

.content-form-wrapper {
  display: none; }

.contact-form {
  width: 800px; }
  .contact-form fieldset {
    width: 50%;
    float: left;
    background: white;
    border-radius: 3px; }
    .contact-form fieldset h4 {
      background-color: black;
      color: white;
      padding: 10px;
      margin: 0; }
    .contact-form fieldset ul {
      padding: 25px;
      margin-bottom: 0; }
    .contact-form fieldset li {
      clear: both;
      list-style: none; }
      .contact-form fieldset li:before, .contact-form fieldset li:after {
        display: none !important; }
    .contact-form fieldset label strong {
      padding-right: 10px;
      font-weight: normal;
      margin-top: 3px;
      font-size: 13px; }
    .contact-form fieldset input {
      border-radius: 3px;
      font-weight: normal;
      border: 1px solid #ccc;
      padding: 5px;
      width: 100% !important; }
    .contact-form fieldset .action {
      margin-top: 25px; }
      .contact-form fieldset .action input[type='submit'] {
        width: 100%;
        background: #7b4aba;
        color: white; }
  .contact-form .sidebar {
    width: 50%;
    float: right;
    color: white;
    box-sizing: border-box;
    padding: 0 30px; }
    .contact-form .sidebar .quote {
      margin-bottom: 40px; }
      .contact-form .sidebar .quote .said {
        font-style: italic; }
      .contact-form .sidebar .quote .attribution {
        font-weight: bold; }
  .contact-form .wpcf7-validation-errors {
    display: none !important; }
  .contact-form .wpcf7-not-valid-tip {
    font-weight: normal;
    font-size: 13px; }
  .contact-form div.wpcf7-mail-sent-ok {
    display: block;
    clear: both;
    width: 100%;
    margin: 0;
    background: #398f14;
    color: white;
    position: absolute;
    border-radius: 3px; }

.signup-form-wrapper {
  display: none; }

.signup-form {
  width: 350px; }
  .signup-form fieldset {
    border-radius: 3px; }
    .signup-form fieldset h4 {
      color: white;
      padding: 10px;
      margin: 0; }
    .signup-form fieldset h5 {
      text-align: center; }
      .signup-form fieldset h5 span {
        position: relative; }
        .signup-form fieldset h5 span::after {
          position: absolute;
          width: 100px;
          height: 1px;
          background: white;
          display: block; }
    .signup-form fieldset .buttons {
      list-style: none;
      margin: 15px 0;
      padding: 0 15px; }
      .signup-form fieldset .buttons li {
        margin: 15px 0; }
      .signup-form fieldset .buttons .btn {
        border-radius: 3px;
        background: black;
        color: white;
        display: block;
        background-repeat: no-repeat;
        background-position: 15px center;
        font-weight: 400; }
        .signup-form fieldset .buttons .btn.google {
          background-color: #4285f4;
          background-image: url(images/google.svg); }
        .signup-form fieldset .buttons .btn.slack {
          background-color: #e12371;
          background-image: url(images/slack.png);
          background-size: 18px;
          background-position: 8px center; }
        .signup-form fieldset .buttons .btn.twitter {
          background-color: #55bbed;
          background-image: url(images/twitter.svg);
          background-size: 18px;
          background-position: 8px center; }
        .signup-form fieldset .buttons .btn.email {
          background-color: white;
          border-color: #7b4aba;
          color: #7b4aba; }

#cboxOverlay {
  background: rgba(0, 0, 0, 0.8) !important; }

#cboxContent, #cboxLoadedContent {
  background: transparent !important; }

#cboxClose {
  background: url(images/btn.close.white.svg) !important;
  background-size: 20px 20px !important;
  background-position: center !important; }

.pricing header#sub h1 {
  font-size: 36px; }

.pricing header#sub h2 {
  color: #fff; }

.pricing .plan-selector {
  display: none;
  list-style: none;
  text-align: center;
  padding: 0; }
  .pricing .plan-selector li {
    display: inline;
    padding: 0 7px; }

@media (max-width: 1023px) {
  .pricing .plan-selector {
    display: block; } }

.pricing table {
  position: relative;
  margin: 30px auto;
  border-collapse: separate;
  border-spacing: 30px 0; }
  @media (max-width: 1023px) {
    .pricing table th.pro, .pricing table td.pro, .pricing table th.business, .pricing table td.business {
      display: none; }
    .pricing table th.pro.active, .pricing table td.pro.active,
    .pricing table th.business.active, .pricing table td.business.active,
    .pricing table th.free.active, .pricing table td.free.active {
      display: table-cell; }
    .pricing table th.pro.hidden, .pricing table td.pro.hidden,
    .pricing table th.business.hidden, .pricing table td.business.hidden,
    .pricing table th.free.hidden, .pricing table td.free.hidden {
      display: none; } }
  .pricing table thead h3 {
    font-weight: 300;
    margin: 20px 0; }
  .pricing table thead h5 {
    position: absolute;
    width: 100%;
    text-align: center;
    top: -22px;
    left: 0; }
    .pricing table thead h5 em {
      background: white;
      padding: 5px 10px;
      color: #7b4aba;
      font-size: 12px;
      text-transform: uppercase;
      font-weight: 600;
      font-style: normal; }
  .pricing table thead ul {
    text-align: left;
    list-style: none;
    padding: 20px;
    font-weight: normal; }
    .pricing table thead ul li {
      margin: 20px 0;
      white-space: nowrap; }
      @media (max-width: 1023px) {
        .pricing table thead ul li {
          white-space: normal; } }
  .pricing table thead .btn {
    margin-bottom: 20px; }
  .pricing table thead tr:first-child th {
    border-top: 1px solid #e6e6e6;
    border-radius: 3px 3px 0 0;
    width: 150px;
    position: relative; }
  .pricing table thead th.blank {
    border: 0 !important;
    background: transparent !important; }
  .pricing table thead tr.price th {
    background: black;
    color: white;
    vertical-align: middle;
    padding: 20px;
    font-size: 24px; }
    .pricing table thead tr.price th small {
      font-size: 12px;
      color: #808080;
      line-height: 15px;
      font-weight: normal; }
    .pricing table thead tr.price th.learn-more {
      background: #7b4aba; }
      .pricing table thead tr.price th.learn-more a {
        color: white;
        font-size: 16px; }
  .pricing table tbody td {
    border-width: 0 1px; }
    .pricing table tbody td.title {
      text-align: left;
      border-width: 0; }
    .pricing table tbody td.check {
      color: #8254be;
      font-size: 18px; }
  .pricing table tbody tr.even td {
    background-color: #f2edf8; }
  .pricing table tbody tr.last td {
    border-radius: 0 0 3px 3px;
    border-width: 0 1px 1px 1px; }
    .pricing table tbody tr.last td.title, .pricing table tbody tr.last td.blank {
      border: 0; }
  .pricing table tbody tr.actions td {
    border-width: 0;
    padding: 20px 0; }
    .pricing table tbody tr.actions td .btn {
      width: 100%; }
  .pricing table th {
    border-width: 0 1px; }

.referrals h1 {
  margin-bottom: 0; }
  .referrals h1 span {
    color: #F578A5; }

.referrals h3 {
  text-align: center;
  margin-top: 0 !important; }

.referrals .how-it-works {
  text-align: center;
  max-width: 500px;
  margin: 50px auto 20px auto;
  border: 1px solid #efefef;
  border-radius: 6px;
  padding: 25px;
  font-size: 18px; }
  .referrals .how-it-works img {
    margin: 0 auto 15px auto; }

.referrals .details {
  border-top: 1px solid #ebedf0;
  padding: 25px 25px 25px 25px;
  margin-top: 50px; }
  .referrals .details li {
    list-style-position: inside;
    font-size: 15px; }
  .referrals .details h3 {
    margin-top: 0;
    margin-bottom: 0px;
    text-align: left; }

.referrals .action {
  text-align: center; }
  .referrals .action a {
    display: inline-block;
    margin: 0 0 25px 0; }
  .referrals .action fieldset {
    width: 900px;
    background: rgba(0, 0, 0, 0.1);
    margin: 35px auto;
    padding: 25px;
    box-sizing: border-box;
    border-radius: 3px;
    border: 0; }
    .referrals .action fieldset label {
      font-weight: 600;
      font-size: 14px;
      margin-bottom: 15px;
      display: inline-block; }
    .referrals .action fieldset input[type='text'] {
      width: 100%;
      display: block;
      padding: 10px 10px;
      text-align: center;
      border-radius: 6px;
      border: 1px solid rgba(0, 0, 0, 0.2);
      font-size: 16px; }
    .referrals .action fieldset .actions {
      padding-top: 15px; }
      .referrals .action fieldset .actions .notification {
        padding: 15px 0;
        display: none; }
        .referrals .action fieldset .actions .notification.show {
          display: block; }
      .referrals .action fieldset .actions a {
        position: relative;
        padding: 15px 15px 15px 48px;
        color: #28affa;
        background: white;
        border-color: #28affa;
        display: inline-block;
        margin: 0 10px;
        border-radius: 3px; }
        .referrals .action fieldset .actions a.zeroclipboard-is-hover {
          background: #28affa;
          color: white; }
        .referrals .action fieldset .actions a:hover {
          background: #28affa;
          color: white; }
        .referrals .action fieldset .actions a::before {
          font-family: 'Genericons';
          position: absolute;
          left: 12px;
          top: 10px;
          font-size: 25px; }
        .referrals .action fieldset .actions a.twitter::before {
          content: '\f202'; }
        .referrals .action fieldset .actions a.facebook::before {
          content: '\f203'; }
        .referrals .action fieldset .actions a.copy-link::before {
          content: '\f107'; }

.container.about {
  font: 400 16px/26px "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #5a6066; }
  .container.about h2 {
    color: #4C5058; }
  .container.about header {
    background: #7B6CBC;
    padding: 100px 0 100px; }
    .container.about header h3 {
      color: white;
      font-size: 24px;
      font-weight: 500;
      text-align: center; }
  .container.about .inside {
    width: 400px;
    margin: 0 auto; }
  .container.about .content {
    padding: 70px 0; }
    .container.about .content h1 {
      display: none; }
    .container.about .content p {
      font-size: 16px;
      line-height: 28px;
      margin-bottom: 35px; }
    .container.about .content img {
      max-width: 100%;
      margin: 35px 0; }
  .container.about .team-members {
    max-width: 1074px;
    margin: 0 auto; }
    .container.about .team-members .sp-container {
      width: 90%;
      margin-left: auto;
      margin-right: auto; }
      @media only screen and (min-width: 33.75em) {
        .container.about .team-members .sp-container {
          width: 80%; } }
      @media only screen and (min-width: 60em) {
        .container.about .team-members .sp-container {
          width: 75%;
          max-width: 60rem; } }
    .container.about .team-members .row {
      position: relative;
      width: 100%; }
    .container.about .team-members .row [class^="col"] {
      float: left;
      margin: 0.5rem 2%;
      min-height: 0.125rem; }
    .container.about .team-members .row::after {
      content: "";
      display: table;
      clear: both; }
    .container.about .team-members .col-1,
    .container.about .team-members .col-2,
    .container.about .team-members .col-3,
    .container.about .team-members .col-4,
    .container.about .team-members .col-5,
    .container.about .team-members .col-6,
    .container.about .team-members .col-7,
    .container.about .team-members .col-8,
    .container.about .team-members .col-9,
    .container.about .team-members .col-10,
    .container.about .team-members .col-11,
    .container.about .team-members .col-12 {
      width: 96%; }
    .container.about .team-members .col-1-sm {
      width: 4.33333%; }
    .container.about .team-members .col-2-sm {
      width: 12.66667%; }
    .container.about .team-members .col-3-sm {
      width: 21%; }
    .container.about .team-members .col-4-sm {
      width: 29.33333%; }
    .container.about .team-members .col-5-sm {
      width: 37.66667%; }
    .container.about .team-members .col-6-sm {
      width: 46%; }
    .container.about .team-members .col-7-sm {
      width: 54.33333%; }
    .container.about .team-members .col-8-sm {
      width: 62.66667%; }
    .container.about .team-members .col-9-sm {
      width: 71%; }
    .container.about .team-members .col-10-sm {
      width: 79.33333%; }
    .container.about .team-members .col-11-sm {
      width: 87.66667%; }
    .container.about .team-members .col-12-sm {
      width: 96%; }
    @media only screen and (min-width: 45em) {
      .container.about .team-members .col-1 {
        width: 4.33333%; }
      .container.about .team-members .col-2 {
        width: 12.66667%; }
      .container.about .team-members .col-3 {
        width: 21%; }
      .container.about .team-members .col-4 {
        width: 29.33333%; }
      .container.about .team-members .col-5 {
        width: 37.66667%; }
      .container.about .team-members .col-6 {
        width: 46%; }
      .container.about .team-members .col-7 {
        width: 54.33333%; }
      .container.about .team-members .col-8 {
        width: 62.66667%; }
      .container.about .team-members .col-9 {
        width: 71%; }
      .container.about .team-members .col-10 {
        width: 79.33333%; }
      .container.about .team-members .col-11 {
        width: 87.66667%; }
      .container.about .team-members .col-12 {
        width: 96%; }
      .container.about .team-members .hidden-sm {
        display: block; } }
    .container.about .team-members h2 {
      width: 400px;
      margin: 0 auto 50px auto;
      position: relative;
      text-align: center;
      font-size: 12px;
      text-transform: uppercase;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.3); }
      .container.about .team-members h2 span {
        background: white;
        position: relative;
        padding: 0 15px;
        z-index: 10; }
      .container.about .team-members h2::after {
        content: "";
        height: 1px;
        width: 100%;
        background: #ccc;
        position: absolute;
        left: 0;
        top: 50%; }
    .container.about .team-members .container {
      width: 1074px;
      max-width: 100%; }
    .container.about .team-members .member {
      padding-bottom: 40px; }
      .container.about .team-members .member img {
        float: left;
        width: 95px;
        margin: 0 15px 0 0;
        border-radius: 50%; }
      .container.about .team-members .member .wrap {
        display: block;
        height: 95px;
        float: left; }
      .container.about .team-members .member h4 {
        font-size: 20px;
        font-weight: 500;
        margin: 0; }
      .container.about .team-members .member h5 {
        font-size: 16px;
        font-weight: 400;
        margin: 0; }

@media (max-width: 600px) {
  .container.about .inside-narrow {
    box-sizing: border-box;
    width: 100%;
    padding-left: 25px;
    padding-right: 25px; }
    .container.about .inside-narrow img {
      max-width: 100%;
      margin: 0; }
  .container.about .team-members ul {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    text-align: center; }
    .container.about .team-members ul li img {
      float: none; }
    .container.about .team-members ul li .wrap {
      float: none; } }

.page-template-template-features header#sub {
  background: url("images/features.header.jpg") center top;
  background-size: cover; }
  .page-template-template-features header#sub h1 {
    font-size: 36px; }
  .page-template-template-features header#sub h1, .page-template-template-features header#sub h2, .page-template-template-features header#sub h3, .page-template-template-features header#sub h4 {
    color: white; }

.page-template-template-features .container .inside {
  padding: 60px 0; }
  .page-template-template-features .container .inside p {
    width: 400px;
    margin: 0 auto; }

.page-template-template-features .feature-list {
  width: 900px;
  margin: 70px auto; }
  .page-template-template-features .feature-list .feature {
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    padding: 40px;
    border-width: 1px 0 0 0; }
    .page-template-template-features .feature-list .feature:first-child {
      border-top: 0; }
    .page-template-template-features .feature-list .feature a {
      position: relative;
      display: block;
      width: 400px;
      height: 186px;
      float: right; }
      .page-template-template-features .feature-list .feature a.play::after {
        content: "";
        display: block;
        position: absolute;
        background: url("images/icn.play.svg") no-repeat;
        height: 40px;
        width: 40px;
        left: 50%;
        top: 70px;
        margin-left: -25px;
        border-radius: 40px; }
      .page-template-template-features .feature-list .feature a.play:hover::after {
        background: #3893cf url("images/icn.play.svg") no-repeat; }
      .page-template-template-features .feature-list .feature a img {
        border-radius: 3px;
        max-width: 400px; }
        .page-template-template-features .feature-list .feature a img:hover {
          border-color: #3893cf; }
    .page-template-template-features .feature-list .feature h2, .page-template-template-features .feature-list .feature h3 {
      font-weight: 400; }
    .page-template-template-features .feature-list .feature ul {
      list-style: none;
      padding: 0;
      max-width: 350px; }
      .page-template-template-features .feature-list .feature ul li {
        background: url("images/check-circle.svg") no-repeat left 5px;
        list-style: none;
        padding-left: 25px;
        text-align: left; }

.page-template-template-features section.signup {
  text-align: center;
  background: #3893cf;
  padding: 70px 0; }
  .page-template-template-features section.signup h2 {
    color: white;
    font-weight: 400;
    font-size: 24px;
    margin-top: 0; }

@media (max-width: 600px) {
  .page-template-template-features .container .inside {
    width: 100%;
    box-sizing: border-box;
    padding-left: 25px;
    padding-right: 25px; }
    .page-template-template-features .container .inside p {
      width: auto; }
  .page-template-template-features .feature-list {
    width: 100%; }
    .page-template-template-features .feature-list a {
      float: none !important;
      width: auto !important;
      height: auto !important; }
    .page-template-template-features .feature-list img {
      max-width: 100% !important; } }

.droplr-swap-words {
  white-space: nowrap;
  transition: 1000ms color; }

.droplr-swap-words.active {
  animation: 1s infinite cursor-blink;
  border-right: 1px solid;
  display: inline-block;
  padding-right: 4px; }

.droplr-swap-words.finished {
  color: #7b4aba;
  text-shadow: 0 0 2px #fff; }

.droplr-swap-words.highlighted {
  background: rgba(123, 74, 186, 0.62);
  display: inline-block; }

.extension-lightbox {
  width: 500px;
  font-weight: 300;
  background-image: url(images/up-arrow.svg);
  background-position: top center;
  background-size: 40px;
  background-repeat: no-repeat;
  padding-top: 100px; }
  .extension-lightbox .inside {
    background: white;
    padding: 25px 25px 25px 25px; }
  .extension-lightbox h2 {
    margin-top: 0; }
  .extension-lightbox p {
    margin-bottom: 0; }

@keyframes cursor-blink {
  0% {
    border-color: rgba(123, 74, 186, 0); }
  49.99% {
    border-color: rgba(123, 74, 186, 0); }
  50% {
    border-color: #7b4aba; }
  99.5% {
    border-color: #7b4aba; } }

.page-template-template-apps .visual-section h2 {
  margin-top: 1.75em; }

.page-template-template-apps .visual-section .ext-devices {
  margin-top: 0.8em; }

.page-template-template-business .post-section h2 {
  font-weight: 700;
  color: #7b4aba;
  margin: 0 15px 17px 0;
  line-height: 1.5; }

/* ---------------------------------------------------------
  Learning Center
  ---------------------------------------------------------*/
.learn header#sub {
  padding: 40px 0 20px; }
  .learn header#sub .learn-nav .learn-nav-item {
    display: block;
    margin-top: 1em; }
  .learn header#sub .learn-nav .learn-nav-item.active {
    border-color: #fff;
    background-color: #fff;
    color: #7B4AB9; }
  @media (min-width: 768px) {
    .learn header#sub .learn-nav {
      display: flex;
      flex-direction: row;
      align-items: stretch;
      margin-top: 2em;
      width: 100%; }
      .learn header#sub .learn-nav .learn-nav-item {
        display: inline-block;
        margin-right: 1em; }
      .learn header#sub .learn-nav .learn-nav-item:not(.learn-nav-search) {
        /*min-width: 190px;*/
        flex: 1; }
      .learn header#sub .learn-nav .learn-nav-item.active {
        margin-bottom: -20px;
        padding: 6px 28px 8px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0; } }

.learn .learn-sidebar > * {
  margin-bottom: 1.5em;
  padding-bottom: 1.5em;
  border-bottom: 1px solid #BFBFBF; }

.learn .learn-sidebar > *:last-child {
  border-bottom: none; }

.learn .learn-sidebar .learn-sidebar-nav {
  list-style: none;
  padding-left: 0; }
  .learn .learn-sidebar .learn-sidebar-nav .learn-sidebar-nav-item {
    margin-top: .75em;
    padding-left: 1em;
    border-left: 4px solid transparent; }
    .learn .learn-sidebar .learn-sidebar-nav .learn-sidebar-nav-item:not(.active) a {
      color: #5e636f; }
    .learn .learn-sidebar .learn-sidebar-nav .learn-sidebar-nav-item:not(.active):focus a,
    .learn .learn-sidebar .learn-sidebar-nav .learn-sidebar-nav-item:not(.active):hover a {
      color: #7B4AB9; }
    .learn .learn-sidebar .learn-sidebar-nav .learn-sidebar-nav-item.active {
      border-left-color: #7B4AB9;
      font-weight: bold; }
      .learn .learn-sidebar .learn-sidebar-nav .learn-sidebar-nav-item.active a {
        color: #7B4AB9; }
    @media (min-width: 1024px) {
      .learn .learn-sidebar .learn-sidebar-nav .learn-sidebar-nav-item {
        display: list-item;
        width: auto; } }
  .learn .learn-sidebar .learn-sidebar-nav ul {
    padding-left: 0;
    list-style-type: none; }

.learn .content {
  padding-bottom: 40px; }
  .learn .content h2 {
    font-weight: bold;
    color: #7B4AB9; }
  @media (min-width: 1024px) {
    .learn .content {
      padding-left: 60px; } }

.learn #main ul:not([class]) > li:before {
  display: none !important; }

/* ---------------------------------------------------------
   Blog styles
   ---------------------------------------------------------*/
.blog .blog-subhead-btn,
.single-post .blog-subhead-btn,
.single-example .blog-subhead-btn,
.single-release .blog-subhead-btn {
  margin-top: 2em;
  border-color: #fff;
  background: transparent; }
  .blog .blog-subhead-btn:hover, .blog .blog-subhead-btn:focus,
  .single-post .blog-subhead-btn:hover,
  .single-post .blog-subhead-btn:focus,
  .single-example .blog-subhead-btn:hover,
  .single-example .blog-subhead-btn:focus,
  .single-release .blog-subhead-btn:hover,
  .single-release .blog-subhead-btn:focus {
    border-color: #fff;
    background-color: #fff;
    color: #222; }

.blog .container article,
.blog .container .inside-narrow,
.single-post .container article,
.single-post .container .inside-narrow,
.single-example .container article,
.single-example .container .inside-narrow,
.single-release .container article,
.single-release .container .inside-narrow {
  padding-bottom: 60px; }

.blog .container article img,
.single-post .container article img,
.single-example .container article img,
.single-release .container article img {
  /*margin: 20px auto;*/
  border-radius: 0;
  width: 100%; }

.blog .container article.post h1,
.blog .container article.post h2,
.blog .container article.example h1,
.blog .container article.example h2,
.blog .container article.release h1,
.blog .container article.release h2,
.single-post .container article.post h1,
.single-post .container article.post h2,
.single-post .container article.example h1,
.single-post .container article.example h2,
.single-post .container article.release h1,
.single-post .container article.release h2,
.single-example .container article.post h1,
.single-example .container article.post h2,
.single-example .container article.example h1,
.single-example .container article.example h2,
.single-example .container article.release h1,
.single-example .container article.release h2,
.single-release .container article.post h1,
.single-release .container article.post h2,
.single-release .container article.example h1,
.single-release .container article.example h2,
.single-release .container article.release h1,
.single-release .container article.release h2 {
  margin-top: 4px;
  text-align: center;
  font-weight: bold; }
  .blog .container article.post h1 a,
  .blog .container article.post h2 a,
  .blog .container article.example h1 a,
  .blog .container article.example h2 a,
  .blog .container article.release h1 a,
  .blog .container article.release h2 a,
  .single-post .container article.post h1 a,
  .single-post .container article.post h2 a,
  .single-post .container article.example h1 a,
  .single-post .container article.example h2 a,
  .single-post .container article.release h1 a,
  .single-post .container article.release h2 a,
  .single-example .container article.post h1 a,
  .single-example .container article.post h2 a,
  .single-example .container article.example h1 a,
  .single-example .container article.example h2 a,
  .single-example .container article.release h1 a,
  .single-example .container article.release h2 a,
  .single-release .container article.post h1 a,
  .single-release .container article.post h2 a,
  .single-release .container article.example h1 a,
  .single-release .container article.example h2 a,
  .single-release .container article.release h1 a,
  .single-release .container article.release h2 a {
    color: #5E636F; }
  .blog .container article.post h1 a:hover,
  .blog .container article.post h1 a:focus,
  .blog .container article.post h2 a:hover,
  .blog .container article.post h2 a:focus,
  .blog .container article.example h1 a:hover,
  .blog .container article.example h1 a:focus,
  .blog .container article.example h2 a:hover,
  .blog .container article.example h2 a:focus,
  .blog .container article.release h1 a:hover,
  .blog .container article.release h1 a:focus,
  .blog .container article.release h2 a:hover,
  .blog .container article.release h2 a:focus,
  .single-post .container article.post h1 a:hover,
  .single-post .container article.post h1 a:focus,
  .single-post .container article.post h2 a:hover,
  .single-post .container article.post h2 a:focus,
  .single-post .container article.example h1 a:hover,
  .single-post .container article.example h1 a:focus,
  .single-post .container article.example h2 a:hover,
  .single-post .container article.example h2 a:focus,
  .single-post .container article.release h1 a:hover,
  .single-post .container article.release h1 a:focus,
  .single-post .container article.release h2 a:hover,
  .single-post .container article.release h2 a:focus,
  .single-example .container article.post h1 a:hover,
  .single-example .container article.post h1 a:focus,
  .single-example .container article.post h2 a:hover,
  .single-example .container article.post h2 a:focus,
  .single-example .container article.example h1 a:hover,
  .single-example .container article.example h1 a:focus,
  .single-example .container article.example h2 a:hover,
  .single-example .container article.example h2 a:focus,
  .single-example .container article.release h1 a:hover,
  .single-example .container article.release h1 a:focus,
  .single-example .container article.release h2 a:hover,
  .single-example .container article.release h2 a:focus,
  .single-release .container article.post h1 a:hover,
  .single-release .container article.post h1 a:focus,
  .single-release .container article.post h2 a:hover,
  .single-release .container article.post h2 a:focus,
  .single-release .container article.example h1 a:hover,
  .single-release .container article.example h1 a:focus,
  .single-release .container article.example h2 a:hover,
  .single-release .container article.example h2 a:focus,
  .single-release .container article.release h1 a:hover,
  .single-release .container article.release h1 a:focus,
  .single-release .container article.release h2 a:hover,
  .single-release .container article.release h2 a:focus {
    color: #7B4AB9; }

.blog .container article.post p,
.blog .container article.example p,
.blog .container article.release p,
.single-post .container article.post p,
.single-post .container article.example p,
.single-post .container article.release p,
.single-example .container article.post p,
.single-example .container article.example p,
.single-example .container article.release p,
.single-release .container article.post p,
.single-release .container article.example p,
.single-release .container article.release p {
  font-size: 21px;
  line-height: 1.58;
  font-weight: 300;
  color: rgba(0, 0, 0, 0.8);
  margin: 30px auto; }

.blog .container article.post blockquote p,
.blog .container article.example blockquote p,
.blog .container article.release blockquote p,
.single-post .container article.post blockquote p,
.single-post .container article.example blockquote p,
.single-post .container article.release blockquote p,
.single-example .container article.post blockquote p,
.single-example .container article.example blockquote p,
.single-example .container article.release blockquote p,
.single-release .container article.post blockquote p,
.single-release .container article.example blockquote p,
.single-release .container article.release blockquote p {
  margin-top: 0;
  color: rgba(0, 0, 0, 0.5);
  font-weight: 100;
  font-size: 24px; }

.blog .container article.post h2,
.blog .container article.example h2,
.blog .container article.release h2,
.single-post .container article.post h2,
.single-post .container article.example h2,
.single-post .container article.release h2,
.single-example .container article.post h2,
.single-example .container article.example h2,
.single-example .container article.release h2,
.single-release .container article.post h2,
.single-release .container article.example h2,
.single-release .container article.release h2 {
  margin: 40px 0;
  color: rgba(0, 0, 0, 0.5); }

.blog .container article.post h2, .blog .container article.post h3,
.blog .container article.example h2,
.blog .container article.example h3,
.blog .container article.release h2,
.blog .container article.release h3,
.single-post .container article.post h2,
.single-post .container article.post h3,
.single-post .container article.example h2,
.single-post .container article.example h3,
.single-post .container article.release h2,
.single-post .container article.release h3,
.single-example .container article.post h2,
.single-example .container article.post h3,
.single-example .container article.example h2,
.single-example .container article.example h3,
.single-example .container article.release h2,
.single-example .container article.release h3,
.single-release .container article.post h2,
.single-release .container article.post h3,
.single-release .container article.example h2,
.single-release .container article.example h3,
.single-release .container article.release h2,
.single-release .container article.release h3 {
  line-height: 1.58; }

.blog .container article.post .entry-meta,
.blog .container article.example .entry-meta,
.blog .container article.release .entry-meta,
.single-post .container article.post .entry-meta,
.single-post .container article.example .entry-meta,
.single-post .container article.release .entry-meta,
.single-example .container article.post .entry-meta,
.single-example .container article.example .entry-meta,
.single-example .container article.release .entry-meta,
.single-release .container article.post .entry-meta,
.single-release .container article.example .entry-meta,
.single-release .container article.release .entry-meta {
  margin: 30px 0;
  font-weight: bold;
  color: #7B4AB9; }
  .blog .container article.post .entry-meta > span,
  .blog .container article.example .entry-meta > span,
  .blog .container article.release .entry-meta > span,
  .single-post .container article.post .entry-meta > span,
  .single-post .container article.example .entry-meta > span,
  .single-post .container article.release .entry-meta > span,
  .single-example .container article.post .entry-meta > span,
  .single-example .container article.example .entry-meta > span,
  .single-example .container article.release .entry-meta > span,
  .single-release .container article.post .entry-meta > span,
  .single-release .container article.example .entry-meta > span,
  .single-release .container article.release .entry-meta > span {
    padding-right: 1.5em; }
  .blog .container article.post .entry-meta > span:last-child,
  .blog .container article.example .entry-meta > span:last-child,
  .blog .container article.release .entry-meta > span:last-child,
  .single-post .container article.post .entry-meta > span:last-child,
  .single-post .container article.example .entry-meta > span:last-child,
  .single-post .container article.release .entry-meta > span:last-child,
  .single-example .container article.post .entry-meta > span:last-child,
  .single-example .container article.example .entry-meta > span:last-child,
  .single-example .container article.release .entry-meta > span:last-child,
  .single-release .container article.post .entry-meta > span:last-child,
  .single-release .container article.example .entry-meta > span:last-child,
  .single-release .container article.release .entry-meta > span:last-child {
    padding-right: 0; }
  .blog .container article.post .entry-meta .genericon,
  .blog .container article.example .entry-meta .genericon,
  .blog .container article.release .entry-meta .genericon,
  .single-post .container article.post .entry-meta .genericon,
  .single-post .container article.example .entry-meta .genericon,
  .single-post .container article.release .entry-meta .genericon,
  .single-example .container article.post .entry-meta .genericon,
  .single-example .container article.example .entry-meta .genericon,
  .single-example .container article.release .entry-meta .genericon,
  .single-release .container article.post .entry-meta .genericon,
  .single-release .container article.example .entry-meta .genericon,
  .single-release .container article.release .entry-meta .genericon {
    font-size: 24px; }

.blog .widget-area li.widget-container,
.single-post .widget-area li.widget-container,
.single-example .widget-area li.widget-container,
.single-release .widget-area li.widget-container {
  border-bottom: 1px solid #BFBFBF;
  padding-bottom: 24px;
  list-style: none; }
  .blog .widget-area li.widget-container:last-child,
  .single-post .widget-area li.widget-container:last-child,
  .single-example .widget-area li.widget-container:last-child,
  .single-release .widget-area li.widget-container:last-child {
    border: none; }
  .blog .widget-area li.widget-container h3.widget-title,
  .single-post .widget-area li.widget-container h3.widget-title,
  .single-example .widget-area li.widget-container h3.widget-title,
  .single-release .widget-area li.widget-container h3.widget-title {
    font-size: 16px;
    font-weight: bold; }

.blog .widget-area .widget_recent_entries,
.single-post .widget-area .widget_recent_entries,
.single-example .widget-area .widget_recent_entries,
.single-release .widget-area .widget_recent_entries {
  font-weight: bold; }
  .blog .widget-area .widget_recent_entries ul,
  .single-post .widget-area .widget_recent_entries ul,
  .single-example .widget-area .widget_recent_entries ul,
  .single-release .widget-area .widget_recent_entries ul {
    list-style-type: none;
    padding-left: 0; }
  .blog .widget-area .widget_recent_entries li,
  .single-post .widget-area .widget_recent_entries li,
  .single-example .widget-area .widget_recent_entries li,
  .single-release .widget-area .widget_recent_entries li {
    margin-bottom: 1em;
    padding-left: 0 !important; }
    .blog .widget-area .widget_recent_entries li:before,
    .single-post .widget-area .widget_recent_entries li:before,
    .single-example .widget-area .widget_recent_entries li:before,
    .single-release .widget-area .widget_recent_entries li:before {
      display: none; }

@media (min-width: 1024px) {
  .blog .widget-area,
  .single-post .widget-area,
  .single-example .widget-area,
  .single-release .widget-area {
    width: 205px; }
  .blog .container .archive,
  .single-post .container .archive,
  .single-example .container .archive,
  .single-release .container .archive {
    margin-left: 40px; } }

.trello {
  text-align: center; }
  .trello h1 {
    width: 50%;
    margin: 25px auto;
    color: #aaa; }
    .trello h1 em {
      font-style: normal;
      color: #3580A0;
      font-weight: bold; }
  .trello .hero p {
    text-align: center;
    font-size: 18px;
    line-height: 32px;
    font-weight: 300; }
  .trello .content {
    margin: 50px auto;
    min-width: 320px;
    text-align: center; }
  .trello .steps {
    border-top: 1px solid #eee;
    margin: 50px auto;
    padding-top: 50px;
    text-align: center; }
    .trello .steps p {
      width: 350px;
      text-align: left; }
      .trello .steps p.first {
        margin-bottom: 50px; }
    .trello .steps .step {
      margin: 50px auto; }
      .trello .steps .step h4 {
        font-weight: bold;
        text-align: center;
        color: #3580A0;
        font-size: 30px; }
      .trello .steps .step img {
        margin: 25px auto;
        border: 1px solid #ccc; }
      .trello .steps .step p {
        font-size: 15px;
        line-height: 25px;
        color: #888;
        font-style: italic; }
      .trello .steps .step.four img {
        border: 0; }
  .trello .final {
    text-align: center;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin: 50px auto;
    padding: 50px 0; }
    .trello .final p {
      text-align: center; }

/* ---------------------------------------------------------
   1. Embedded fonts styles
   2. General reset
   3. Common site styles
   4. Styles for responsive breakpoints
   ---------------------------------------------------------*/