/*
 * React Bootstrap Documentation
 * Special styles for presenting react-bootstrap's documentation and code examples.
 * Based on the Bootstrap Documentation styles and overridden as necessary.
 */
 /* Authentication button */
.Instagram {
  margin-right: 5px;
  height: 10px;
  width: 10px;
  border-radius: 100%;
  background-color: rgba(102, 51, 0, 1);
  position: relative;
  left: 0px;
  top: 50%;
  display: inline-block;
}
.Facebook {
  margin-right: 5px;
  height: 10px;
  width: 10px;
  border-radius: 100%;
  background-color: rgba(59, 89, 152, 1);
  position: relative;
  left: 0px;
  top: 50%;
  display: inline-block;
}
.lineChart {
  height: 600px;
  width: 900px;
}
.Center-button {
width:  50%;
}
.facebookButton {
  background-color: rgba(59, 89, 152, 1);
  border-color: rgba(59, 89, 152, 1);
}
.facebookButton:hover{
  background-color: rgba(59, 89, 152, 1);
  border-color: rgba(59, 89, 152, 1);
}
.instagramButton {
  background-color: rgba(102, 51, 0, 1);
  border-color: rgba(102, 51, 0, 1);
}
.instagramButton:hover{
  background-color: rgba(102, 51, 0, 1);
  border-color: rgba(102, 51, 0, 1);
}
.authenticateButton {
  text-align: center;
  margin-top: 40px;
  width: 48%;
}
.input-bottom {
  margin-bottom: 10px;
}
.btn-create-campaign{
  margin-top: 24px;
}

tr.clickable {
  cursor: pointer;
}
.jumbotron input {
  width: 100%;
}
/*Overwriting bootstrap css*/
.jumbotron {
  background-color: #E0E0E0 !important;
  margin-top: 40px !important;
}
/*Adding to bootstrap css*/
.fa {
  position: relative;
  left: 10px;
}
.bold {
  font-weight: bold;
}
.not-fa {
  left: 0px !important;
  bottom: 6px;
}
 /* Table stats */
 .totalstats {
    margin-top: 10px;
 }
 .socialstats {
    margin-top: 10px;
 }
 .participation-donut {
    margin-left: 52px;
    margin-top: -30px;
 }
 /* input box */
 .no-padd {
  padding-right: 0px;
  padding-left: 0px;
}
.left-padd {
  margin-left: 1.333333333%;
}
.larger-input {
  width: 90% !important;
}
.lifetime-help{
  font-weight: initial;
}
/* DATEPICKER */
.active-class, #quiz:hover, #sweepstake:hover, #voting:hover, #quiz:active, #sweepstake:active, #voting:active, #quiz:focus, #sweepstake:focus, #voting:focus {
  color: #fff !important;
  border-color: #0E826B !important;
  background-color: #00C5A4 !important;
 }

/* Icon in campaign dashboard */
.gicon {
  position: relative;
  top: 17px;
  right: 15px;
  padding-right: 4px;
}
.bs-docs-masthead, .bs-docs-header {
  position: relative;
  padding: 30px 15px;
  color: #cdbfe3;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0,0,0,.1);
  background-color: #6f5499;
  background-image: -webkit-gradient(linear,left top,left bottom,from(#563d7c),to(#6f5499));
  background-image: -webkit-linear-gradient(top,#563d7c 0,#6f5499 100%);
  background-image: -o-linear-gradient(top,#563d7c 0,#6f5499 100%);
  background-image: linear-gradient(to bottom,#563d7c 0,#6f5499 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#563d7c', endColorstr='#6F5499', GradientType=0);
  background-repeat: repeat-x;
}

@media (min-width: 768px) {
  .bs-docs-masthead {
    padding: 80px 0;
  }
}

html, body {
  height:100%;
}

body {
  background:#F7FAFB;
  font-family: 'AvenirNextLTPro', 'regular', sans-serif;
}

input, select, textarea {
  font-family: 'AvenirNextLTPro', 'regular', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'AvenirNextLTPro' 'semibold', sans-serif;
  font-weight:bold;
  color: #32495C;
}

h2 {
  margin-top:80px;
  margin-bottom:80px;
  font-size:24px;
}

@media(max-width:767px) {
  h2, h3 {
    font-size:18px;
    text-align:center;
    margin-top:30px;
    margin-bottom:40px;
  }
}

a {
  color: #00C5A4;
}

a:hover {
  color: #7F8C8D;
}

.form-group {
  margin-bottom:30px;
  position:relative;
}

.form-group .help-block {
  position:absolute;
  top:100%;
  left:0;
  text-align:left;
  color:#BDC3C7;
}

.has-success .help-block, .has-warning .help-block, .has-error .help-block {
  color:#BDC3C7;
}

.form-group .form-control-feedback {
  font-size:20px;
  top:9px;
  right:9px;
}

.has-feedback label ~ .form-control-feedback {
  top:34px;
}

.has-feedback .input-group ~ .form-control-feedback {
  right:-30px;
}

.form-control {
  border:1px solid #BDC3C7;
  height:40px;
  padding:10px 15px;
  font-weight:bold;
  border-radius:2px;
  box-shadow:none;
  color:#34495E;
  background:none;
}

.has-success .form-control {
  border-color:#12C4A1;
  background:#FFF;
}

.has-error .form-control {
  border-color:#D74C3C;
  background:#FFF;
}

.form-control:focus, .form-control.focused, .has-success .form-control:focus, .has-success .form-control.focused, .has-error .form-control:focus, .has-error .form-control.focused {
  border-color:#12C4A1;
  box-shadow:none;
  outline:none;
  background:#FFF;
}

.has-error .form-control.multi-input {
  border-color:#D74C3C;
}

.btn:focus, .btn:active, .btn:focus:active {
  box-shadow:none;
  outline:none;
}

.form-control.disabled {
  border-color:#BDC3C7;
  background:#ECF0F1;
}

.form-control::-webkit-input-placeholder {
   color:#BDC3C7;
}

.form-control:-moz-placeholder { /* Firefox 18- */
   color:#BDC3C7;
}

.form-control::-moz-placeholder {  /* Firefox 19+ */
   color:#BDC3C7;
}

.form-control:-ms-input-placeholder {
   color:#BDC3C7;
}

.select-all.checkbox label {
  text-transform:uppercase;
  font-weight:600;
  color:#BDC3C7;
  letter-spacing:.15em;
  font-size:14px;
}

.select-all.checkbox :checked + label {
  color:#12C4A1;
}

.selected-bar {
  position:absolute;
  top:30px;
  left:0;
  right:0;
  background:#FFF;
}

.selected-bar.floating {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
}

.selected-bar-inner {
  max-width:780px;
  margin:auto;
  padding:10px;
}

.selected-bar .btn.btn-moderation {
  margin-left:10px;
}

.feed-search-form .form-control {
  padding:5px 10px;
  height:30px;
  width:100%;
}

.feed-search-form .form-control-feedback {
  font-size:14px;
  top:7px;
}

@media(min-width:480px) {
  .feed-search-form .form-group {
    float:right;
  }

  .feed-search-form .form-control {
    width:145px;
  }
}

.input-group-addon {
  border-radius:2px;
  background:#D8D8D8;
  color:#FFF;
  font-weight:bold;
  border:1px solid #BDC3C7;
}

.has-success .input-group-addon, .has-error .input-group-addon {
  background:#D8D8D8;
  color:#FFF;
  border-color:#BDC3C7;
}

.help-block {
  font-size:12px;
  font-style:italic;
  font-weight:600;
}

.form-group.checkbox {
  margin-top:0;
}

.checkbox.checkbox-compact {
  margin-top:7px;
}

.checkbox label {
  padding-left:0;
}

.checkbox input[type=checkbox] {
  position:absolute;
  visibility:hidden;
}

.checkbox-left label, .checkbox-right label {
  font-weight:normal;
  cursor:pointer;
}

.checkbox-left label:before, .checkbox-right label:after, .checkbox-below label:after {
  content:'';
  display:inline-block;
  vertical-align:text-bottom;
  border:1px solid #BDC3C7;
  border-radius:2px;
  background:#FFF;
  height:18px;
  width:18px;
  text-align:center;
  color:#95A5A6;
  font-size:16px;
  line-height:16px;
  background-size:contain;
}

.checkbox-left.disabled label:before, .checkbox-right.disabled label:after, .checkbox-below.disabled label:after {
  background:#ECF0F1;
}

.checkbox-left label:before {
  margin-right:8px;
}

.checkbox-below label:after {
  display:block;
}

.checkbox-right label:after {
  margin-left:8px;
}

.checkbox-left :checked + label:before, .checkbox-right :checked + label:after, .checkbox-below :checked + label:after {
  font-family: 'icomoon' !important;
  content:'\e906';
  color:#12C4A1;
  border-color:#12C4A1;
}

.dropdown-menu {
  margin:0;
  padding:0;
  border:none;
  border-radius:3px;
  border-top-left-radius:0;
  border-top-right-radius:0;
  box-shadow:none;
  font-size:14px;
  overflow:hidden;
}

.dropdown-menu > li > a {
  background:#FFF;
  font-weight:bold;
  padding:8px 30px 8px 10px;
  color:#34495E;
}

.dropdown-menu > li .glyphicon {
  font-size:11px;
  line-height:20px;
}

.dropdown-menu > li .glyphicon.pull-right, .dropdown-menu > li button.close {
  margin-right:-10px;
  margin-left:10px;
}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:active, .dropdown-menu > li > a:focus {
  outline:none;
  box-shadow:none;
  background:#ECF0F1;
}

.dropdown-toggle.btn.btn-default {
  border:0;
  background:#12C4A1;
  color:#FFF;
  font-weight:bold;
  position:relative;
  text-align:left;
  padding:8px 30px 8px 10px;
  letter-spacing:normal;
  font-size:14px;
}

.dropdown-toggle.btn.btn-default .caret {
  position:absolute;
  top:13px;
  right:10px;
  border-top-width:8px;
  border-left-width:6px;
  border-right-width:6px;
}

.open > .dropdown-toggle.btn.btn-default {
  border:0;
  box-shadow:none;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
}

.formula-form .btn-group:first-child, .project-selector-wrapper .btn-group {
  max-width:100%;
}

.dropdown-toggle.btn.btn-default.project-selector {
  text-transform:none;
  max-width:100%;
}

.overview-item {
  background-color: #FFF;
  padding: 5px;
  margin: 7px 0;
  border-radius: 4px;
  position: relative;
}

.icon-btn {
  cursor: pointer;
  opacity: 0.6;
  margin: 6px;
}

.icon-btn:hover {
  opacity: 1;
}

button.remove {
  opacity: 1;
  border-radius: 8px;
  background-color: gray;
  position: absolute;
  right: -8px;
  top: -8px;
  height: 16px; width: 16px;
}

button.remove>span {
  font-size: 16px;
  display: block;
  color: white;
  margin-top:-2px;
  font-weight: normal;
}

button.remove.smaller {
  top: -7px; right: -3px;
  height: 14px; width: 14px;
}

button.remove.smaller>span {
  font-size: 14px;
  margin-top: -2px;
}

a.checkbox {
  cursor: pointer; display: inline-block;
  min-height: 16px; width: 16px;
  background: url('/assets/checkbox.svg') top left;
  margin: 0; margin-right: 5px;
}
a.checkbox.checked {
  background-position: top right;
}

.checkbox-switch {
  background: url('/assets/checkbox-switch.png') top;
  height: 13px; width: 27px;
  float: left;
  cursor: pointer;
  margin-top: 8px; margin-right: 8px;
}

.checkbox-switch.off {
  background-position: bottom;
}

.overview-item-header {
  line-height: 25px;
  display: block;
  color: #FFF;
  text-shadow: 2px 2px 10px #444;
  background-color: #00C5A4;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#B4BEC4), to(#B2E5DE));
  background: -webkit-linear-gradient(top, #B4BEC4, #B2E5DE);
  background: -moz-linear-gradient(top, #B4BEC4, #B2E5DE);
  background: -ms-linear-gradient(top, #B4BEC4, #B2E5DE);
  background: -o-linear-gradient(top, #B4BEC4, #B2E5DE);

  font-size: 18px;
  font-weight: 600;
  padding: 30px 26px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  position: relative;
}

.overview-item-header:hover { color: #fff; text-decoration: none; }

.overview-item-header .form-control {
  background: #FFF;
  margin:-7px 0;
  height:39px;
  padding-right:40px;
}

.overview-item-header .spinner {
  position:absolute;
  top:50%;
  right:34px;
  margin-top:-12px;
}

.overview-item-formula {
  margin-top: 5px;
  padding: 10px;
  background-color: #F6F6F6;
  border-radius: 4px;
  position: relative;
}

.overview-item-formula.disabled { opacity: 0.5 }

.overview-item-tags { }

.overview-tag {
  display: block; float: left;
  color: #fff;
  background-color: #00C5A4;
  padding: 6px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  margin-right: 5px;
  font-size: 10px;
}

.overview-tag.nomedia {
  background-color: #95A5A6;
}

.overview-tag.timeleft {
  background-color: #E86E3C;
  font-style: italic;
}

.overview-tag.readonly {
  background-color:#E86E3C;
  font-style:italic;
}

.overview-tag.unapprovedcount {
  background-color:#E86E3C;
}

.overview-tag.pull-right {
  margin-right:0;
  margin-left:5px;
}

@media (min-width: 1200px) {
  .container {
    width: 970px;
  }
}

.checkboxes label {
  font-weight:normal;
  margin-right:15px;
}

.formula-input-group .input-group-addon {
  border-color: #00C5A4;
}

.modal-header {
  background-color: #00C5A4;
}
.modal-title {
  text-align: center; color: white;
}
.modal-body {
  text-align: left;
}
.inputfield {
  position: relative;
  cursor: text;
  border: 2px solid #3FD4B6;
  padding: 5px;
}

.inputfield span { display: inline-block; }

.form-control input {
  width: auto;
  border: 0;
  margin: 0;
  padding: 0;
  background:none;
  font-weight:normal;
  font-size:14px;
}
.form-control input:focus {
  border: 0;
  outline: none;
}

.inputitem {
  background-color: #F7FAFB;
  padding: 2px 8px;
  margin-right: 17px;
  border-radius: 2px;
  font-weight:normal;
  font-size:14px;
  line-height:19px;
  color:#BDC3C7;
  display:inline-block;
}

.inputitem a {
  cursor: pointer;
  margin-left:5px;
  display:inline-block;
  height:13px;
  width:13px;
  line-height:13px;
  font-size:13px;
  color:#BDC3C7;
  text-align:center;
  border-radius:100%;
}

.form-control.focused .inputitem {
  color:#34495E;
}

.form-control.focused .inputitem a {
  background:#BDC3C7;
  color:#FFF;
  font-weight:bold;
}

.form-control .inputitem a:hover, .form-control .inputitem a:active {
  text-decoration:none;
  background:#95A5A6;
  color:#FFF;
}

.radiofield {
  margin: 0; padding: 15px 0;
}

.radioinput {
  list-style-type: none;
  text-align: center;
}

.radioinput.selected .radio {
  background-color: black;
}

.radioborder {
  margin-right: 5px;
  display: inline-flex;
  border: 1px solid black;
  border-radius: 8px;
}

.radio {
  cursor: pointer;
  display: inline-block;
  width: 16px; min-height: 16px;
  border-radius: 8px;
  border: 1px solid white;
  padding: 0; margin: 0;
}
/*
.wizard-icon {
  display: inline-block;
  margin:15px 10px 0;
}
*/
h2.dashboard {
  text-align: center;
  margin:40px 45px;
  font-weight:bold;
  letter-spacing:.05em;
  font-size:18px;
  color:#34495E;
  line-height:24px;
}

@media(min-width:480px) {
  h2.dashboard {
    margin:65px 30px 90px;
    font-size:22px;
    letter-spacing:.1em;
    line-height:33px;
  }
}

.btn-primary {
  background-color: #12C4A1;
  border: 0;
  border-color: #00C5A4;
}

.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  color: #fff;
  background-color: #00C5A4;
  border-color: #0E826B;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  color: #fff;
  background-color: #00C5A4;
  border-color: #0E826B;
}

.bs-docs-masthead, .bs-docs-header {
  background: #34495E;
  filter: none;
  color: #FFF;
  padding-bottom:15px;
}

.bs-docs-header h1 {
  color: #FFF;
}

.bs-docs-header h3 {
  color: #FFF;
}

.bs-docs-header p {
  color: #FFF;
}

.bs-docs-sidebar .nav>li>a {
  color: #666;
}

.bs-docs-sidebar .nav>li>a:hover, .bs-docs-sidebar .nav>li>a:focus {
  color: #cc7a6f;
  border-left: 1px solid #cc7a6f;
}

.back-to-top:hover {
  color: #cc7a6f;
}


.CodeMirror {
  height: auto;
}

.bs-example .btn-toolbar + .btn-toolbar {
  margin-top: 10px;
}

.bs-example .modal {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  bottom: auto;
  z-index: 1;
  display: block;
}

.bs-docs-booticon {
  background: url('./logo.png') 0 0 no-repeat;
  background-size: contain;
  border: 0;
  width: 200px;
  height: 200px;
}

.bs-example-scroll {
  overflow: scroll;
  height: 200px;
}

.bs-example-scroll > div {
  position: relative;
  padding: 100px 0;
}

.playground {
  margin-bottom: 36px;
}

.bs-example {
  margin-bottom: 0;
}

.bs-example + .highlight {
  margin-top: 0;
  margin-bottom: 0;
  border-top: none;
  border-bottom-right-radius: 0;
}

.code-toggle {
  float: right;
  display: inline-block;
  position: relative;
  top: -1px;
  background: #fafafa;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border: 1px solid #e1e1e8;
  border-top: none;
  padding: 4px 8px;
}

@media (min-width: 768px) {
  .code-toggle {
    background: #fff;
  }
}

.code-toggle.open {
  background: #f8f5ec;
}

input:focus, .btn:focus, .btn:active, .btn:active:focus .close:active, .close:focus, .close:active:focus {
  outline:none;
  box-shadow:none;
}

/* FRONT PAGE */

#header {
  background: #34495E;
  filter: none;
  color: #FFF;
  padding-bottom: 15px;
}

#header h1 {
  font-size:45px;
}

section {
  padding:100px 0;
}

.white {
  background:#FFF;
}

.gray {
  background:#F7FAFB;
}

section h2 {
  text-align:center;
  /*font-family:'Open Sans', sans-serif;
  font-weight:300;*/
  font-size:40px;
  margin-bottom:50px;
}

section h3 {
  color:#E17030;
  margin-bottom:40px;
}

.numbered-heading {
  line-height:40px;
  margin-top:30px;
}

.number-circle {
  background:#E17030;
  color:#FFF;
  height:40px;
  width:40px;
  line-height:40px;
  float:left;
  margin-right:10px;
  text-align:center;
  border-radius:20px;
}

.developers h3 {
  color:#E17030;
}

.developers .number-circle {
  background:#E17030;
}

.businesses h3 {
  color:#12C4A1;
}

.businesses .number-circle {
  background:#12C4A1;
}

.front-support {
  margin-top:100px;
  color:#7F8C8D;
}

.front-support h3 {
  text-transform:uppercase;
  letter-spacing:10px;
  font-size:16px;
  color:#BDC3C7;
}

.front-icons {
  margin-top:15px;
}

.front-icons div {
  padding:0 5px;
}

#features {
  font-size:24px;
  text-align:center;
}

.feature-boxes {
  font-size:16px;
}

.feature-boxes div {
  margin-top:80px;
}

.feature-boxes i.fa {
  font-size:8em;
  margin-bottom:15px;
  color:#12C4A1;
}

#how-it-works {
  font-size:16px;
}

.feature-list {
  font-size:16px;
  margin:0 20px;
  padding:0;
}

.feature-list li {
  margin:0 0 0.5em;
  padding:0;
}

#try-it {
  padding:80px 0;
}

#try-button {
  padding:15px 80px;
  font-size:30px;
  background:#12C4A1;
  border-color:#12C4A1;
  border-radius:3px;
}

#try-button:hover {
  background:#23D5B2;
  border-color:#23D5B2;
}

@media (max-width: 767px) {
  #header h1 {
    font-size:35px;
  }

  section {
    padding:80px 0;
  }

  .numbered-heading {
    margin-top:20px;
  }

  #features {
    font-size:20px;
  }

  .feature-boxes div {
    margin-top:60px;
  }

  .how-it-works-col {
    margin-top:40px;
  }
}

@media (max-width:479px) {
  #header h1 {
    font-size:30px;
  }
}

/* FORMULAS */

.formula-form {
  margin-bottom:80px;
}

.formula-form .form-control {
  padding:6px 10px;
  height:32px;
  border-color:#12C4A1;
  font-weight:normal;
}

.formula-list {
  text-align:left;
  list-style-type:none;
  margin:40px 0;
  padding:0;
}

.formula-list li {
  margin:5px 0;
  padding:5px 10px;
  border-radius:2px;
  background:#ECF0F1;
}

.small-icon {
  font-size:16px;
}

.formula-preview {
  display:none;
}

.suggestion-list {
  background:none;
}

.suggestion-list small {
  display:block;
  color:#BDC3C7;
  max-width:300px;
  overflow:hidden;
  text-overflow:ellipsis;
}

.suggestion-list:before {
  content:'';
  display:block;
  height:0;
  width:0;
  margin-left:10px;
  border-bottom:10px solid #FFF;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
}

.suggestion-list > li {
  border-bottom:1px solid #F7FAFB;
}

.suggestion-list > li > a {
  font-weight:normal;
  color:#95A5A6;
}

.suggestion-list .tagplay-icon {
  color:#BDC3C7;
  vertical-align:middle;
}

.suggestion-list > li .glyphicon {
  display:inline-block;
  color:#BDC3C7;
  width:1.15em;
  font-size:14px;
  text-align:center;
}

.suggestion-list > li .finish-formula, .suggestion-list > li .finish-formula .glyphicon {
  color:#12C4A1;
}

@media(min-width:768px) {
  .modal .suggestion-list:before {
    border-bottom-color:#ECF0F1;
  }

  .modal .suggestion-list > li > a {
    background:#ECF0F1;
  }

  .modal .suggestion-list > li > a:hover {
    background:#F7FAFB;
  }
}

@media (max-width: 767px) {
  .formula-form {
    margin:0 -15px 40px;
  }

  .formula-form .help-block {
    padding:0 10px;
  }

  .formula-form .formula-input-group .project-selector {
    text-align:center;
  }

  .formula-form .project-selector.btn.btn-default > .caret {
    position:static;
    margin-left:10px;
  }

  .form-control::-webkit-input-placeholder {
     color:#95A5A6;
  }

  .form-control:-moz-placeholder { /* Firefox 18- */
     color:#95A5A6;
  }

  .form-control::-moz-placeholder {  /* Firefox 19+ */
     color:#95A5A6;
  }

  .form-control:-ms-input-placeholder {
     color:#95A5A6;
  }

  .formula-form .formula-input-group {
    display:block;
  }

  .formula-form .formula-input-group .form-control {
    display:block;
    float:none;
    border-radius:0;
    background:#ECF0F1;
    font-size:10px;
    color:#95A5A6;
  }

  .formula-form .formula-input-group .input-group-btn {
    display:block;
    float:none;
    width:100%;
  }

  .formula-form .formula-input-group .input-group-btn .btn-group {
    display:block;
    margin-right:0;
  }

  .formula-form .formula-input-group .input-group-btn .btn {
    display:block;
    width:100%;
    margin:0;
    border-radius:0;
    float:none;
  }
}


/* FORMULA FORM */

.formula-form .formula-input-group .input-group-addon {
  background:#12C4A1;
}

.formula-form .formula-input-group .input-group-btn .btn {
  padding-top:6px;
  padding-bottom:6px;
}

.formula-form .formula-input-group .input-group-btn .btn-group .btn {
  text-transform:none;
  position:relative;
}

.edit-formula-modal .formula-form .help-block {
  text-align:left;
}

@media(max-width:767px) {
  .edit-formula-modal .modal-dialog {
    margin:10px 0;
  }

  .edit-formula-modal .modal-body {
    padding:50px 15px;
  }

  .modal.edit-formula-modal .modal-content > .close {
    top:5px;
    right:5px;
  }
}


/* MEDIA COMPONENT */

.media-box {
  padding:15px;
  border-radius:3px;
  overflow:hidden;
  text-overflow:ellipsis;
  float:left;
}

.media-box:hover {
  background:#EEE;
}

.media-image {
  padding:5px;
  width:100%;
  position:relative;
  border:1px solid #DDD;
  background:#FFF;
}

.media-image img, .media-image video {
  display:block;
  max-width:100%;
  margin:auto;
}

.tagplay-media {
  position:relative;
}

.media-image.video:after, .tagplay-media.video:after {
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  height:0;
  width:0;
  margin:auto;
  z-index:100;
  opacity:0.7;
  border-style:solid;
  border-left-width:45px;
  border-top-width:25px;
  border-bottom-width:25px;
  border-right-width:0;
  border-left-color:#FFF;
  border-top-color:transparent;
  border-bottom-color:transparent;
}

.media-image.video:hover:after {
  opacity:0.9;
}

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

.media-date {
  font-size:smaller;
  color:#95A5A6;
}

.media-index {
  font-style:italic;
}

/* SPINNER */

.spinner {
  height:60px;
  width:60px;
  margin:60px auto;
  position:relative;
  -webkit-animation: rotation .6s infinite linear;
  -moz-animation: rotation .6s infinite linear;
  -o-animation: rotation .6s infinite linear;
  animation: rotation .6s infinite linear;
  border-left:6px solid rgba(18,196,161,.15);
  border-right:6px solid rgba(18,196,161,.15);
  border-bottom:6px solid rgba(18,196,161,.15);
  border-top:6px solid rgba(18,196,161,.8);
  border-radius:100%;
}

.inline-spinner {
  display:inline-block;
  margin:0;
  vertical-align:middle;
}

.smallish-spinner {
  height:24px;
  width:24px;
  border-width:3px;
}

.small-spinner {
  height:16px;
  width:16px;
  border-width:2px;
}

.solid-spinner {
  border-top-color:#12C4A1;
  border-bottom-color:#FFF;
  border-left-color:#89E2D0;
  border-right-color:#89E2D0;
}

.btn:hover .spinner, .btn:active .spinner, .btn:focus .spinner, .btn.active .spinner, .formula-input-group .btn .spinner {
  border-color:rgba(255, 255, 255, .15);
  border-top-color:rgba(255, 255, 255, .8);
}

@-webkit-keyframes rotation {
  from {-webkit-transform: rotate(0deg);}
  to {-webkit-transform: rotate(359deg);}
}

@-moz-keyframes rotation {
  from {-moz-transform: rotate(0deg);}
  to {-moz-transform: rotate(359deg);}
}

@-o-keyframes rotation {
  from {-o-transform: rotate(0deg);}
  to {-o-transform: rotate(359deg);}
}

@keyframes rotation {
  from {transform: rotate(0deg);}
  to {transform: rotate(359deg);}
}


/* ADMIN DROPDOWN */

.admin-dropdown li.static {
  background:#FFF;
  font-weight:bold;
  padding:8px 30px 8px 10px;
  color:#34495E;
}

.admin-dropdown li.invite {
  font-style:italic;
  font-weight:normal;
}


/* PAGINATION */

.pagination {
  text-align:center;
  display:block;
}

.pagination li {
  display:inline-block;
  float:none;
}

.pagination li.active span, .pagination li.active span:hover {
  background:#12C4A1;
  border-color:#12C4A1;
  color:#FFF;
}

.pagination li a {
  color:#12C4A1;
}


/* WIZARDS */

.wizard-link {
  display:block;
  text-align:center;
  text-transform:uppercase;
  font-weight:bold;
  color:#34495E;
  letter-spacing:.1em;
  font-size:12px;
  margin-bottom:65px;
}

.wizard-link:hover, .wizard-link:active {
  text-decoration:none;
}

.wizard-link img {
  width:110px;
  margin-bottom:22px;
}

.wizard-link:hover img {
  width:125px;
  margin-top:-8px;
  margin-bottom:15px;
}

.wizard-link span {
  display:block;
}

@media(min-width:768px) {
  .dashboard-wizards {
    margin-bottom:85px;
  }

  .wizard-link {
    margin-bottom:0;
  }
}

@media(min-width:992px) {
  .wizard-link {
    font-size:14px;
  }
}


/* FEED SETTINGS */

.feed-settings-wrapper {
  margin-bottom:70px;
  margin-top:30px;
  float:left;
  width:100%;
}

.feed-settings-wrapper .show-more a {
  display:block;
  text-align:center;
  color:#BDC3C7;
  font-size:18px;
  font-weight:bold;
  padding:8px;
  clear:left;
}

.feed-settings {
  background:#FFF;
  padding:30px 15px 0;
  float:left;
  width:100%;
}

.feed-settings .row > div {
  display:inline-block;
  float:none;
  vertical-align:top;
}

.feed-settings .row .form-group {
  height:27px;
}

@media (max-width:767px) {
  .feed-settings-wrapper {
    margin:30px -15px 10px;
    width:auto;
  }

  .feed-settings {
    padding:30px 45px 10px;
  }

  .feed-settings .row > div {
    width:100%;
  }

  .feed-settings .form-group {
    margin-bottom:20px;
  }
}

@media (min-width:768px) {
  .feed-settings {
    padding-top:0;
  }

  .feed-settings .row .form-group {
    margin:0;
  }

  .feed-settings .row > div {
    margin-top:0;
  }

  .feed-settings .row {
    margin:30px 0;
  }

  .contest-settings {
    margin-top:10px;
  }
}

.feed-settings label {
  text-transform:uppercase;
  font-weight:600;
  color:#BDC3C7;
  letter-spacing:.15em;
  font-size:14px;
  float:left;
}

.feed-settings label > * {
  float:left;
}

.feed-settings label > span {
  margin-top:2px;
}

.feed-settings input[type=number],
.feed-settings select,
.feed-settings .form-control,
.feed-settings .input-group .form-control {
  background:#FFF;
  border:1px solid #BDC3C7;
  border-radius:3px;
  padding:1px;
  line-height:1.1em;
  font-weight:bold;
  color:#BDC3C7;
  font-style:italic;
  font-size:12px;
  height:24px;
  float:left;
  width:90px;
  text-align:center;
  margin-left:8px;
}

.feed-settings .form-control.large-input {
  width:120px;
}

@media (min-width:992px) {
  .feed-settings .form-control, .feed-settings .input-group .form-control {
    width:100px;
  }

  .feed-settings .form-control.large-input {
    width:130px;
  }
}

.feed-settings .form-control.small-input {
  width:45px;
}

.feed-settings .tags-input {
  text-align:left;
  padding:1px 5px;
}

.feed-settings select.form-control {
  width:110px;
}

.feed-settings .help-block {
  clear:left;
  color:#BDC3C7;
  font-size:12px;
}

.feed-settings .checkbox-left label:before, .feed-settings .checkbox-right label:after {
  height:16px;
  width:16px;
  line-height:14px;
  font-size:14px;
}

.feed-settings a .tagplay-icon {
  color:#BDC3C7;
}

.feed-settings .input-group-addon {
  border:0;
  padding:0;
  display:inline;
  background:none;
  width:auto;
  font-size:inherit;
  color:#BDC3C7;
  font-size:12px;
  margin-left:5px;
  font-weight:600;
}

.help-icon {
  color:#BDC3C7;
  opacity:0.8;
  cursor:pointer;
  font-size:10px;
  vertical-align:baseline;
}

.help-icon i.tagplay-icon {
  vertical-align:baseline;
}

.help-icon:hover {
  opacity:1;
}

.help-icon:focus {
  opacity:1;
  outline:none;
}

.popover {
  border-radius:2px;
  border:1px solid #DDD;
}

.popover.bottom .arrow {
  border-bottom-color:#DDD;
}


/* DATEPICKER */

.bootstrap-datetimepicker-widget {
  padding:0;
  border:1px solid #BDC3C7;
  border-radius:3px;
  width:auto;
}

.bootstrap-datetimepicker-widget .table-condensed {
  border:1px solid #BDC3C7;
  border-collapse:collapse;
  margin:-1px;
  width:239px;
}

.datepicker .table-condensed tbody td {
  border:1px solid #BDC3C7;
  width:33px;
  height:33px;
  border-radius:0;
  font-size:14px;
  font-weight:600;
  color:#34495E;
}

.datepicker .table-condensed thead th {
  border-top:1px solid #BDC3C7;
  border-bottom:1px solid #BDC3C7;
  width:33px;
  height:23px;
  color:#BDC3C7;
  font-weight:600;
  font-size:10px;
  border-radius:0;
}

.datepicker .table-condensed thead th.switch {
  width:auto;
  height:48px;
  font-size:14px;
  letter-spacing:.12em;
}

.datepicker .table-condensed thead th.prev, .datepicker .table-condensed thead th.next {
  font-size:24px;
  font-weight:normal;
  height:48px;
}

.datepicker .table-condensed tbody .old, .datepicker .table-condensed tbody .new {
  background:#ECF0F1;
  color:#BDC3C7;
}

.datepicker .table-condensed tbody .active {
  background:#34495E;
  color:#FFF;
  border-color:#34495E;
}

.datepicker td.today:before {
  border-bottom-color:#BDC3C7;
}

.bootstrap-datetimepicker-widget td span {
  width:47px;
  height:35px;
  line-height:35px;
}

.timepicker .btn, .timepicker .btn:hover, .timepicker .btn.btn-primary, .timepicker .btn.btn-primary:active, .timepicker .btn.btn-primary:focus, .timepicker .btn.btn-primary:active:focus {
  background:none;
  border:0;
  color:#34495E;
  box-shadow:none;
}

.bootstrap-datetimepicker-widget .timepicker .timepicker-hour, .bootstrap-datetimepicker-widget .timepicker .timepicker-minute {
  font-size:19px;
  font-weight:600;
}

.bootstrap-datetimepicker-widget .timepicker .timepicker-period {
  font-size:13px;
  font-weight:600;
  line-height:18px;
  padding-top:24px;
}

.bootstrap-datetimepicker-widget .timepicker .timepicker-period:hover {
  background:#ECF0F1;
}

.bootstrap-datetimepicker-widget .timepicker .timepicker-period span {
  line-height:18px;
  height:auto;
}

.bootstrap-datetimepicker-widget .timepicker .timepicker-period span:hover {
  background:none;
}

.bootstrap-datetimepicker-widget .timepicker .timepicker-period small {
  display:block;
  clear:left;
  font-size:9px;
}

.bootstrap-datetimepicker-widget .btn.picker-switch {
  background:none;
  color:#BDC3C7;
  text-decoration:underline;
  text-transform:none;
  font-size:12px;
  font-weight:600;
}

.bootstrap-datetimepicker-widget .timepicker-hour,
.bootstrap-datetimepicker-widget .timepicker-minute,
.bootstrap-datetimepicker-widget .year,
.bootstrap-datetimepicker-widget .month,
.bootstrap-datetimepicker-widget .day,
.bootstrap-datetimepicker-widget .hour,
.bootstrap-datetimepicker-widget .minute,
.bootstrap-datetimepicker-widget .prev,
.bootstrap-datetimepicker-widget .next,
.bootstrap-datetimepicker-widget .switch {
  cursor:pointer;
}


/* http://getbootstrap.com/examples/signin/signin.css */

.login-box {
  background:#FFF;
  text-align:center;
}

.login-box .alert {
  text-align:center;
}

@media (min-width:768px) {
  .login-box {
    margin-top:40px;
    padding-top:20px;
  }
}

.form-activate {
  max-width:350px;
  margin:auto;
}

.form-signin {
  padding:15px;
  text-align:center;
  max-width:300px;
  margin:auto;
}

.form-signin h2 {
  margin:40px 0 45px;
}

.form-signin .btn {
  margin:20px 0 50px;
}

.form-signin .forgot-password {
  margin-bottom:50px;
}

.form-signin .forgot-password a {
  font-weight:bold;
  font-style:italic;
  text-decoration:underline;
}

.form-signin .checkboxes {
  margin-top:-10px;
}

.form-signin .checkbox-left {
  margin-bottom:10px;
  text-align:left;
}

.form-signin .social-buttons {
  margin:30px 0;
}

.form-signin .social-buttons .fb-like, .form-signin .social-buttons .twitter-follow-button {
    display:inline-block;
    vertical-align:top;
    margin:0 2px;
}

.inline {
  display: inline;
  width: 21%;
}

.inline-label {
  margin-right: 9px;
}

.inline + .inline-label {
  margin-left: 7px;
}

.unclaimed {
  padding-left: 57px;
  margin-top: -10px;
}

.expansion {
  border-top: 1px solid grey;
  padding-top: 10px;
  padding-bottom: 10px;
}

.chart {
  width: 100%;
  margin-top: 30px;
}

.center {
  margin-left: 245px;
}

svg {
  font: 10px sans-serif;
}

g.context g.brush rect.background{
  fill: rgba(0,0,0,.1);
}

g.context g.axis path{
  stroke-opacity: 0;
}

g.context g.axis line{
  stroke-opacity: .1;
}

.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.brush .extent {
  stroke: #fff;
  fill-opacity: .125;
  shape-rendering: crispEdges;
}

g.context rect.background{
  fill:rgb(200,200,255);
  visibility: visible !important;
}

/*Campaign Dashboard*/

.hide-connections{
  display: none;
}

.dashboard-campaign{
  padding: 8px;
}

/* Stats */


#word-cloud {
  width: 800px;
  height: 400px;
  margin-bottom: 100px;
  border: 2px solid gray;
  border-radius: 10px;
  margin-top: 30px;
}

#word-cloud svg {
  width: 800px;
  height: 400px;
}

.center {
  text-align: center;
}

.tooltip {
  font-weight:normal;
  font-size: 12px;
  line-height: 1.4;
}
.tooltip.in {
  opacity:1;
}
.tooltip-inner {
  background-color: #12C4A1;
}
.tooltip.top .tooltip-arrow {
  border-top-color: #12C4A1;
}
.tooltip.top-left .tooltip-arrow {
  border-top-color: #12C4A1;
}
.tooltip.top-right .tooltip-arrow {
  border-top-color: #12C4A1;
}
.tooltip.right .tooltip-arrow {
  border-right-color: #12C4A1;
}
.tooltip.left .tooltip-arrow {
  border-left-color: #12C4A1;
}
.tooltip.bottom .tooltip-arrow {
  border-bottom-color: #12C4A1;
}
.tooltip.bottom .tooltip-arrow {
  border-bottom-color: #12C4A1;
}
.tooltip.bottom-left .tooltip-arrow {
  border-bottom-color: #12C4A1;
}
.tooltip.bottom-right .tooltip-arrow {
  border-bottom-color: #12C4A1;
}

.empty-project {
  color:#BDC3C7;
  font-size:16px;
  margin-left:15px;
}

.project-header {
  margin:30px -15px 20px;
  padding:10px 0;
}

.project-header.closed {
  background:#FFF;
  cursor:pointer;
  margin-bottom:50px;
}

.project-header h3 {
  margin: 0px;
  color: #34495E;
  font-weight:bold;
  font-size: 18px;
  line-height:24px;
  display:inline;
  letter-spacing:.05em;
}

.project-header small {
  font-size:14px;
  color:#95A5A6;
  display:block;
}

.project-header .caret {
  border-top-width:10px;
  border-left-width:8px;
  border-right-width:8px;
  border-top-color:#BDC3C7;
  margin:0 10px 0 20px;
  vertical-align:baseline;
  cursor:pointer;
}

.project-header .caret.expand {
  border-top-width:8px;
  border-bottom:8px solid transparent;
  border-left-width:10px;
  border-right-width:0;
  border-top-color:transparent;
  border-left-color:#BDC3C7;
  float:right;
  margin-top:5px;
  margin-right:10px;
}

.project-header {
  color:#95A5A6;
  margin-top:5px;
}

.project-options {
  font-size:18px;
  margin-top:10px;
}

.project-options i.tagplay-icon {
  margin-right:20px;
  margin-left:0;
}

.empty-box.project-description {
  text-align:left;
}

@media (min-width:768px) {
  .project-header {
    margin:50px 0 30px;
  }

  .project-header.closed {
    margin-bottom:80px;
  }

  .project-header h3 {
    font-size: 22px;
    line-height:26px;
  }

  .project-header small {
    display:inline;
    margin-left:10px;
  }

  .project-options {
    margin-top:0;
    font-size:16px;
    float:right;
  }

  .project-options i.tagplay-icon {
    margin:6px;
  }
}

.tp-small-text {
  font-size: 10px;
}
.tp-smallish-text {
  font-size: 12px;
}

.feed-header {
  margin-top:65px;
}

.feed-header .feed-id {
  font-size:14px;
  font-style:italic;
  color:#BDC3C7;
  margin-bottom:45px;
}

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

.feed-header h3 {
  color: #34495E;
  margin: 0 0 15px;
  font-weight:bold;
  text-transform:uppercase;
  font-size:24px;
  letter-spacing:.05em;
}

.btn-default {
  color: #fff;
  background-color: #12C4A1;
  border-color: #12C4A1;
}

.publish {
  color: #fff;
  /*font-size: 13px;
  line-height: 1.6;*/
  letter-spacing: .05em;
  background-color: #12C4A1;
  width:135px;
  display:block;
  margin:0 auto 10px;
}

.feed-buttons {
  line-height:52px;
}

.feed-buttons .feed-formulas-button {
  border:0;
  background:none;
  font-size:18px;
  display:inline-block;
  line-height:32px;
  outline:none;
  color:#12C4A1;
  padding:0;
}

.feed-buttons .feed-formulas-button i {
  vertical-align:middle;
}

.formula-modal .overview-item-formula {
  text-align:left;
}

.btn.import-button {
  border:1px solid #12C4A1;
  color:#12C4A1;
  background:none;
}

.btn.import-button:hover, .btn.import-button:active, .btn.import-button:focus {
  border-color:#12C4A1;
  background-color:#12C4A1;
  color:#FFF;
}

.feed-buttons .btn.import-button {
  margin:0 0 0 10px;
}

@media(min-width:768px) {
  .feed-header h3 {
    font-size:24px;
    text-align:left;
  }

  .feed-header .feed-id {
    text-align:left;
    margin:0;
  }

  .feed-header .feed-buttons {
    float:right;
    text-align:right;
  }

  .publish {
    margin:0 0 17px auto;
  }
}


/* ADD POST */

.file-list li {
  text-align:left;
  padding:2px 0;
}

.file-list img {
  max-height:30px;
  max-width:50px;
}

.sm-navigation {
  padding-right:30px;
  position:relative;
}

.sm-navigation .dropdown {
  position:absolute;
  bottom:0;
  right:0;
}

.sm-navigation .dropdown .btn {
  width:30px;
  padding:2px 0;
  text-align:center;
  background:none;
  border:0;
  border-bottom:2px solid #BDC3C7;
  font-family:inherit;
  font-size:inherit;
  color:#BDC3C7;
  font-weight:inherit;
  text-transform:inherit;
  border-radius:0;
}

.sm-navigation .dropdown .btn:hover, .sm-navigation .dropdown .btn:active, .sm-navigation .dropdown .btn:focus, .sm-navigation .dropdown.open .btn {
  border-bottom:2px solid #34495E;
  color:#34495E;
}

.btn-default.disabled,
.btn-default[disabled] {
  color: #BDC3C7;
  background-color: #F7FAFB;
  border-color: #BDC3C7;
}

.media-username {
  font-size: 12px;
  text-align: right;
  color: #fff;
  background-color: #34495E;
  font-weight:600;

  padding: 3px 9px;
  position: absolute;
  z-index:2;
  top: 12px;
  right: -10px;
  left: auto;
  width: auto;

  border: 1px solid transparent;
  -moz-border-radius: 2px  2px 0 2px;
  -webkit-border-radius: 2px  2px 0 2px;
  -o-border-radius: 2px  2px 0 2px;
  border-radius: 2px  2px 0 2px;
}

.media-username .tagplay-icon {
  vertical-align:top;
  font-size:14px;
}

.media-username:after,
.media-username::after {
	display: block;
	width: 10px;
	height: 0px;
	position: absolute;
	bottom: -11px;
	right: -1px;
	content: '';
	border-bottom: 10px solid transparent;
	border-left: 10px solid #0B131B;
}

.sm-linked-metadata {
  border:1px solid #BDC3C7;
  border-radius:2px;
  padding:10px;
}

.sm-linked-metadata h4 {
  font-size:16px;
  line-height:23px;
  margin-bottom:0;
}

.sm-linked-metadata p {
  font-size:14px;
  margin-bottom:0;
}

.sm-linked-metadata a {
  color:#34495E;
  text-decoration:none;
}

.sm-media.loading .thumbnail:after {
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:1;
  background:rgba(255, 255, 255, 0.8);
}

.sm-media.loading .spinner {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  z-index:2;
}

.sm-media .media-caption {
  margin-bottom: 5px;
  padding: 10px;
  background-color: #F6F6F6;
  border-radius: 4px;
  position: relative;
  max-height: 60px;
  overflow: hidden;
  text-overflow:ellipsis;
  color:#34495E;
  font-weight:600;
  font-size:16px;
  line-height:23px;
}

.sm-media .media-caption.expanded {
  max-height:none;
}

.sm-media {
  position:relative;
  margin-bottom:40px;
  overflow:hidden;
  padding-top:3px;
  padding-bottom:3px;
}

.sm-media .thumbnail {
  margin-bottom:0;
  position:relative;
  z-index:1;
  -webkit-transition:none;
  -o-transition:none;
  transition:none;
}

.sm-media.selected .thumbnail {
  border:3px solid #12C4A1;
  margin:-3px;
}

.sm-moderation {
  background:#ECF0F1;
  float:left;
  margin-top:-5px;
  border-bottom-left-radius:2px;
  border-bottom-right-radius:2px;
  padding:10px 5px 5px 0;
}

.btn.btn-moderation {
  border-radius:2px;
  font-weight:normal;
  text-transform:none;
  letter-spacing:none;
  width:105px;
  margin-left:5px;
  text-align:left;
  color:#FFF;
  padding:5px 10px;
}

.btn.btn-moderation {
  color:#FFF;
}

.btn-moderation.btn-decline {
  background:#F07B69;
}

.btn-moderation.btn-decline:hover, .btn-moderation.btn-decline:active, .btn-moderation.btn-decline:focus {
  background:#F98E7F;
}

.btn.btn-moderation .tagplay-icon {
  float:right;
  margin-top:2px;
}

.num-entries {
  font-size:12px;
}

.media-options {
  margin-top:5px;
}

.media-actions {
  font-size:24px;
}

.media-actions .tagplay-icon.active {
  color:#12C4A1;
}

.media-actions .icon-favorite.active {
  color:#F98E7F;
}

.tagplay-media-multi {
  border-radius:4px;
  overflow:hidden;
}

.tagplay-media-multi-more {
  position:absolute;
  display:block;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(0, 0, 0, 0.3);
  color:#FFF;
  text-align:center;
}

.tagplay-media-multi-more > span {
  position:absolute;
  height:50px;
  line-height:50px;
  font-size:50px;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
}

.tagplay-media-multi-cell {
  position:relative;
  display:inline-block;
  vertical-align:top;
  overflow:hidden;
}

.tagplay-media-multi-object {
  position:relative;
  width:100%;
  height:0;
  padding:0;
  border:0;
  background-position:center center;
  background-size:cover;
}

.tagplay-media-multi-smart-image {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}

.original-link {
  display:inline-block;
  font-size:30px;
  line-height:24px;
  padding:3px;
  margin-left:10px;
  color:#BDC3C7;
}

img.emoji {
  height: 1em;
  width: 1em;
  margin: 0 .05em 0 .1em;
  vertical-align: -0.1em;
}

@media (min-width:768px) {
  .media-actions {
    font-size:18px;
  }

  .original-link {
    font-size:24px;
    line-height:18px;
  }
}

.media-actions .tagplay-icon {
  opacity:1;
  color:#BDC3C7;
}

.sm-media,
.db-feed {
  float:none;
  display:inline-block;
  vertical-align:top;
}

.db-feed ul {
  margin-bottom:0;
}

.thumbnail {
  border:0;
  padding:5px;
}

.overview-item-tags:after {
  content:'';
  display:table;
  clear:both;
}

.feed-options, .formula-options {
  color:#BDC3C7;
  font-size:16px;
}

@media (max-width:767px) {
  .db-feed {
    display:block;
    width:100%;
    padding:0;
    clear:both;
  }

  .db-feed .thumbnail {
    border-radius:0;
    -moz-border-radius:0;
    -webkit-border-radius:0;
  }

  .feed-options, .formula-options {
    font-size:18px;
  }
}

.sm-image {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}

.sm-image-wrapper {
  position:relative;
  margin-bottom:5px;
}

.sm-image-wrapper .sm-image, .sm-image-wrapper .sm-video {
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
}

.sm-video {
  background:#000;
}

.sm-image-wrapper.video:after {
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  height:0;
  width:0;
  margin:auto;
  z-index:100;
  opacity:0.7;
  border-style:solid;
  border-left-width:45px;
  border-top-width:25px;
  border-bottom-width:25px;
  border-right-width:0;
  border-left-color:#FFF;
  border-top-color:transparent;
  border-bottom-color:transparent;
}

.sm-image-wrapper.video:hover:after {
  opacity:0.9;
}

.sm-text-post {
  font-size:22px;
  font-weight:bold;
  padding:40px 15px 25px;
  color:#34495E;
  overflow: hidden;
  text-overflow:ellipsis;
  text-align:left;
}

.sm-timestamp {
  float:left;
  font-size:12px;
  font-weight:normal;
  font-style:italic;
  line-height:23px;
  color:#34495E;
  padding:7px 5px 0;
}


.modal-backdrop {
  position:fixed;
  bottom:0;
  z-index:1100;
}

.modal {
  z-index:1110;
}

.media-modal .modal-content {
  box-shadow:none;
  border:none;
  background:none;
}

.media-modal .modal-dialog {
  margin-left:auto;
  margin-right:auto;
  max-width:500px;
}

.media-modal .modal-body {
  padding:0;
  margin:0;
}

.media-modal .modal-body:focus {
  outline:none !important;
}

.media-modal .sm-media .media-caption {
  text-align:left;
  max-height:none;
}

.media-modal .prev, .media-modal .next {
  font-size:100px;
  line-height:100px;
  width:200px;
  height:100%;
  text-align:center;
  position:absolute;
  text-decoration:none;
  color:#FFF;
}

.media-modal .prev:after, .media-modal .next:after {
  position:absolute;
  top:50%;
  left:0;
  margin-top:-75px;
  width:100%;
}

.media-modal .prev {
  right:100%;
}

.media-modal .prev:after {
  content:'‹';
}

.media-modal .next {
  left:100%;
}

.media-modal .next:after {
  content:'›';
}

@media (max-width: 767px) {
  .media-modal .prev, .media-modal .next {
    width:100px;
  }
}

@media (max-width: 650px) {
  .media-modal .prev, .media-modal .next {
    width:30px;
  }
}

@media (max-width: 550px) {
  .media-modal .prev, .media-modal .next {
    text-shadow:2px 0px 5px rgba(0, 0, 0, 0.5);
    width:100px;
  }

  .media-modal .prev {
    left:5px;
    right:auto;
    text-align:left;
  }

  .media-modal .next {
    right:5px;
    left:auto;
    text-align:right;
  }
}

@media (max-width: 400px) {
  .sm-media {
    width:auto;
    float:none;
    display:block;
  }
}

.feed-settings,
.media-overview {
  margin-top: 20px;
  clear:left;
}

@media (min-width:992px) {
  .narrow-page {
    width:800px;
    margin:auto;
  }
}

.edit-post-modal .modal-body {
  padding:50px 10px;
}

.edit-post-modal .sm-image-wrapper.video:after {
  content:none;
}

.edit-post-modal .media-wrapper {
  position:relative;
  max-width:300px;
  margin:auto;
}

.edit-post-modal .linked-metadata-wrapper {
  position:relative;
}

.edit-post-modal .media-wrapper .close, .edit-post-modal .linked-metadata-wrapper .close {
  position:absolute;
  top:5px;
  right:5px;
  height:30px;
  width:30px;
  border-radius:100%;
  background:rgba(255, 255, 255, 0.9);
  color:#BDC3C7;
  opacity:1;
  font-size:15px;
}

.edit-post-modal .media-wrapper .close:hover, .edit-post-modal .linked-metadata-wrapper .close:hover {
  background:#FFF;
}

.edit-post-modal .media-dimmer {
  background:rgba(100, 100, 100, 0.7);
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:101;
}

.edit-post-modal .media-dimmer .btn {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  height:40px;
  width:130px;
  box-shadow:0 0 0 5px rgba(255, 255, 255, 0.4);
}

.edit-post-modal .revert-button {
  position:absolute;
  top:5px;
  right:5px;
}

.edit-post-modal .sm-linked-metadata {
  margin-bottom:20px;
}

.dropzone {
  height:auto;
  width:100%;
  padding:10px;
  border:1px dotted #BDC3C7;
  font-size:21px;
  color:#BDC3C7;
  cursor:pointer;
  margin-bottom:20px;
  position:relative;
}

.dropzone-active {
  background:#FFA;
  color:#000;
}

@media (min-width:768px) {
  .edit-post-modal .modal-body {
    padding:50px;
  }

  .dropzone {
    padding:40px;
  }
}


/* AUTOSUGGEST */

.react-autosuggest {
  display:inline-block;
}

.react-autosuggest__suggestions {
  position:absolute;
  top:100%;
  left:0;
  z-index:1;
  background:#FFF;
  color:#34495E;
  font-weight:bold;
  list-style-type:none;
  margin:0;
  padding:0;
}

.react-autosuggest__suggestions-section-suggestions {
  list-style-type:none;
  margin:0;
  padding:0;
}

.react-autosuggest__suggestions-section-name {
  margin:0;
  padding:8px 30px 8px 10px;
  background:#EEE;
}

.react-autosuggest__suggestion {
  margin:0;
  padding:8px 30px 8px 10px;
  cursor:pointer;
}

.react-autosuggest__suggestion--focused {
  background:#ECF0F1;
}

.react-autosuggest__suggestion small {
  display:block;
  color:#BDC3C7;
  max-width:300px;
  overflow:hidden;
  text-overflow:ellipsis;
}


/* BUTTONS */

.btn {
  text-transform:uppercase;
  font-weight:bold;
  border-radius:2px;
  background:#12C4A1;
  border:0;
  color:#FFF;
}

.btn:hover, .btn:active, .btn:focus {
  background:#23D5B2;
  border-color:#23D5B2;
}

.btn.btn-muted {
  background:#ECF0F1;
  color:#BDC3C7;
}

.btn.btn-lg {
  font-size:14px;
  min-width:144px;
  letter-spacing:.12em;
}


/* NEW FORMULA BOX */

.formula-box {
  text-align:left;
  margin-bottom:40px;
  border:1px solid #12C4A1;
  background:none;
}

.formula-box:after {
  content:" ";
  display:table;
  clear:both;
}

.formula-box .btn.btn-default, .formula-box .btn.btn-primary {
  border-radius:0;
  padding-top:7px;
  padding-bottom:7px;
  display:block;
  float:none;
  width:100%;
}

.formula-box .project-selector {
  display:block;
}

@media (min-width:480px) {
  .formula-box .btn.btn-default, .formula-box .btn.btn-primary, .formula-box .project-selector {
    display:inline-block;
    vertical-align:middle;
    width:auto;
  }

  .formula-box .btn:first-child {
    margin-right:5px;
  }

  .formula-box .btn:last-child {
    float:right;
    margin-left:5px;
  }
}

.formula-item {
  margin:3px 3px;
  padding:3px 5px;
  display:inline-block;
  line-height:21px;
  position:relative;
  color:#34495E;
  vertical-align:middle;
}

.formula-item.editable {
  cursor:pointer;
}

.formula-item.placeholder {
  color:#BDC3C7;
}

.formula-item.editable:hover, .formula-item.editing  {
  background:#FFF;
}

.modal .formula-item.editable:hover, .modal .formula-item.editing {
  background:#ECF0F1;
}

.formula-item.editing {
  color:#34495E;
}

.formula-item .dropdown-menu {
  display:block;
}

.formula-value {
  padding:3px 22px;
}

.formula-value.error {
  background:#FCC;
}

.formula-keyword {
  color:#34495E;
  font-weight:bold;
}

.formula-keyword.placeholder {
  margin-left:-3px;
  font-size:16px;
}

.formula-value input {
  border:none;
  background:none;
  font-family:inherit;
  padding:0;
}

.formula-item .close {
  position:absolute;
  float:none;
  top:5px;
  left:5px;
  font-size:12px;
  line-height:16px;
  height:16px;
  width:16px;
  text-align:center;
  border-radius:100%;
  background:#D8D8D8;
  color:#FFF;
  opacity:1;
  visibility:hidden;
  z-index:1;
}

.formula-item:hover .close {
  visibility:visible;
}

.formula-item .close:hover {
  background:#BDC3C7;
}


/* GENERAL TAGPLAY MODALS */

.modal-content {
  border-radius:2px;
}

.modal-header {
  text-transform:uppercase;
  font-weight:bold;
  letter-spacing:0.1em;
  padding:10px;
}

.modal .modal-header .modal-title {
  margin:0;
  font-weight:bold;
}

.modal .modal-content>.close {
  position:absolute;
  z-index:100;
  top:-9px;
  right:-9px;
  background:#BDC3C7;
  border-radius:100%;
  height:19px;
  width:19px;
  opacity:1;
  color:#FFF;
  line-height:19px;
  text-align:center;
}

.modal-body {
  padding:50px;
  text-align:center;
}

.modal h3 {
  font-size:30px;
  font-weight:bold;
  margin-top:0;
  color:#34495E;
  margin-bottom:65px;
  word-wrap:break-word;
}

.modal h4 {
  font-size:1.2em;
  font-weight:bold;
  margin-top:40px;
}

.new-project-modal .btn {
  border:1px solid #12C4A1;
  background:#FFF;
  color:#12C4A1;
  text-transform:none;
  letter-spacing:normal;
  min-width:120px;
  margin-bottom:40px;
}

.new-project-modal .btn:hover, .new-project-modal .btn:active, .new-project-modal .btn:focus {
  background:#12C4A1;
  color:#FFF;
}

.new-project-modal .form-control {
  width:220px;
  margin:auto;
}

.new-project-modal .multi-input.form-control {
  width:100%;
}


/* WIZARD MODAL */

.wizard-modal .modal-body {
  padding:50px 20px;
}

.wizard-modal h3 {
  font-size:20px;
}

.wizard-modal .wizard-progress {
  display:none;
}

.wizard-modal .social-providers li {
  width:260px;
  color:#BDC3C7;
}

.wizard-modal .social-providers li .btn.btn-muted {
  background:#ECF0F1;
  color:#BDC3C7;
  width:182px;
}

.wizard-modal .social-providers li.selected .btn.btn-muted {
  background:#FFF;
}

.wizard-modal .social-providers li i.tagplay-icon {
  margin-right:20px;
}

.wizard-modal .connection-selector .connection-list {
  border-color:#ECF0F1;
}

.wizard-modal .connection-selector .connection-list-tabs li {
  background:#F7FAFB;
}

.wizard-modal .connection-selector .connection-list-tabs li.active {
  background:#ECF0F1;
}

.wizard-modal .connection-selector .connection-wrapper.selected {
  background:#ECF0F1;
}

.wizard-modal .checkbox-left label {
  color:#BDC3C7;
}

.public-accounts .user-input-group {
  margin-top:10px;
  display:block;
  position:relative;
  table-layout:auto;
}

.public-accounts .user-input-group .input-group-addon {
  display:block;
  position:absolute;
  top:0;
  left:-36px;
  padding:10px 10px 0 0;
  height:30px;
  width:36px;
  border:0;
  background:none;
  font-size:16px;
  color:#BDC3C7;
}

.public-accounts .user-input-group .form-control {
  display:block;
  border-radius:2px;
  float:none;
  position:static;
}

.wizard-modal .public-account-selector label {
  color:#BDC3C7;
  font-weight:600;
  font-size:16px;
}

.wizard-modal .public-account-selector .input-group, .wizard-modal .public-account-selector .checkbox-below label:after {
  margin-top:10px;
}

.wizard-modal .top-margin {
  margin-top:70px;
}

.wizard-modal h3 {
  margin-bottom:40px;
}

.wizard-modal .connection-selector h3 {
  margin-top:30px;
  margin-bottom:20px;
}

@media(max-width:479px) {
  .wizard-modal .facebook-field-selector .col-xs-6 {
    width:100%;
    padding:0 50px;
  }
}

@media(max-width:767px) {
  .wizard-modal .facebook-field-selector .col-sm-8 {
    width:80%;
    margin:auto;
  }

  .wizard-modal .public-account-selector .user-input-group .input-group-addon {
    display:none;
  }
}

@media (min-width:768px) {
  .wizard-modal h3 {
    margin-bottom:65px;
  }

  .wizard-modal .connection-selector h3 {
    margin-top:0;
    margin-bottom:30px;
  }
}

@media (min-width:992px) {
  .wizard-modal .modal-dialog {
    width:800px;
  }

  .wizard-modal .modal-body {
    padding:50px 100px;
  }

  .modal-body .social-providers li, .modal-body .connection-selector .social-providers li {
    width:310px;
  }

  .wizard-modal .modal-body .row .social-providers li {
    width:280px;
  }

  .wizard-modal .social-providers li i.tagplay-icon {
    margin-right:60px;
  }

  .wizard-modal .row .social-providers li i.tagplay-icon {
    margin-right:30px;
  }
}


/* ADD CONNECTION MODAL / CONNECTION SELECTOR */

.add-connection-modal h2 {
  color:#12C4A1;
  text-align:center;
  font-size:30px;
  margin:0 0 60px;
}

.social-providers li {
  margin:23px auto;
  padding:5px 0;
  font-size:33px;
  text-align:center;
  line-height:30px;
  border-radius:3px;
  width:270px;
  color:#BDC3C7;
}

.social-providers li.notice {
  font-weight:600;
  font-size:14px;
  line-height:20px;
}

.social-providers li.selected {
  background:#ECF0F1;
}

.social-providers li.selected .btn {
  background:#FFF;
}

.social-providers li .tagplay-icon {
  vertical-align:middle;
  margin-right:60px;
}

.social-providers li .btn {
  width:192px;
  height:30px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:normal;
  background:#ECF0F1;
  color:#BDC3C7;
}

.connection-selector h3 {
  color:#BDC3C7;
  font-size:16px;
  margin-top:60px;
}

.connection-selector .social-providers li {
  margin:5px auto 8px;
}

.connection-selector .row .social-providers li {
  text-align:left;
}

.connection-selector .social-providers li .tagplay-icon {
  margin-right:20px;
}

.connection-selector .social-providers li .btn {
  background:#FFF;
}

@media (min-width:768px) {
  .connection-selector .social-providers li {
    width:280px;
  }

  .connection-selector .social-providers li .tagplay-icon {
    margin-right:30px;
  }

  .connection-selector h3 {
    text-align:left;
  }
}

.connection-list-tabs {
  list-style-type:none;
  margin:0;
  padding:0;
}

.connection-list-tabs li {
  border-radius:6px;
  margin:0 4px 10px;
  padding:3px;
  display:inline-block;
  font-size:12px;
  cursor:pointer;
  color:#95A5A6;
  background:#ECF0F1;
}

.connection-list-tabs li.active {
  background:#FFF;
  color:#34495E;
}

.connection-list {
  max-height:250px;
  position:relative;
  overflow:auto;
}

@media (min-width:768px) {
  .connection-list {
    border:4px solid #FFF;
    border-radius:3px;
    padding:8px 10px;
  }
}

.connection-list li {
  margin:4px 0;
  width:100%;
  float:left;
  text-align:left;
}

.connection-list .connection-wrapper {
  padding:4px 6px;
  border-radius:2px;
  color:#34495E;
  font-weight:bold;
  position:relative;
}

.selector .connection-list .connection-wrapper {
  cursor:pointer;
}

.connection-list .connection-wrapper.selected {
  background:#FFF;
}

.connection-list .connection-wrapper.selected .connection-username:after {
  content:'✔';
  color:#95A5A6;
  margin-left:10px;
}

.connection-list .connection-username {
  line-height:18px;
  padding:6px 2px 6px 60px;
}

.connection-list .connection-alert {
  border:1px solid #E86E3C;
  background:#FEC;
  color:#E86E3C;
  font-weight:bold;
  font-size:12px;
  text-transform:none;
  display:block;
  margin:0 0 0 60px;
  padding:3px 5px;
  text-align:center;
}

.connection-list .profile-picture, .user-suggestion .profile-picture {
  float:left;
}

.profile-picture {
  position:relative;
}

.profile-picture img {
  height:30px;
  width:30px;
  border-radius:100%;
}

.profile-picture.no-picture {
  height:30px;
  width:30px;
  border-radius:100%;
  background:#D8D8D8;
}

.profile-picture.no-picture:before {
  content:'?';
  display:block;
  font-size:30px;
  line-height:30px;
  text-align:center;
  color:#FFF;
}

.profile-picture .provider-icon {
  position:absolute;
  bottom:-8px;
  right:-8px;
  background-color:#FFF;
  padding:1px;
  border-radius:2px;
  color:#BDC3C7;
}

.profile-picture .provider-icon i {
  display:block;
}


/* WORD LIST */

.word-list-modal .btn-primary {
  width:100%;
}

.word-list {
  margin-top:10px;
  border:4px solid #ECF0F1;
  max-height:200px;
  overflow:auto;
}

.word-list li {
  margin:4px;
  padding:5px 20px;
  font-weight:bold;
  text-align:left;
}

.word-list-form .form-control {
  height:32px
}

.preset-word-lists {
  text-align:left;
  font-weight:bold;
}

.preset-word-lists li {
  overflow:hidden;
  padding:3px 0;
}

.preset-word-list-modal .modal-dialog {
  width:400px;
}

@media(min-width:480px) {
  .word-list-modal .btn-primary {
    width:200px;
  }
}


/* FEED SELECTOR */

.feed-selector {
  width:100%;
  text-align:left;
}

@media(min-width:480px) {
  .feed-selector {
    width:300px;
    margin:auto;
  }
}

.feed-selector ul {
  border:4px solid #ECF0F1;
  max-height:200px;
  overflow:auto;
}

.feed-selector li {
  margin:4px;
}

.feed-selector .feed-selector-wrapper {
  padding:5px 20px;
  cursor:pointer;
  font-weight:bold;
}

.feed-selector .feed-selector-wrapper.selected {
  background:#ECF0F1;
}

.feed-selector .new-feed {
  padding:5px 0;
}

.feed-selector .new-feed-tag {
  font-weight:normal;
  font-style:italic;
  float:right;
  font-size:12px;
}

.feed-selector .feed-selector-wrapper.selected:after {
  content:'✔';
  color:#95A5A6;
  margin-left:10px;
}


/* INTEGRATION MODAL */

.integration-modal .modal-body {
  padding:30px 15px;
}

@media (min-width:768px) {
  .integration-modal .modal-body {
    padding:50px;
  }
}

@media (min-width:992px) {
  .integration-modal .modal-dialog {
    width:785px;
  }

  .integration-modal .modal-body {
    padding:50px 120px;
  }
}

.feed-designer {
  margin-top:65px;
}

.integration-instructions h3, .integration-instructions h4 {
  font-size:22px;
  margin-bottom:35px;
  color:#32495C;
}

.integration-instructions p, .integration-instructions li {
  font-size:16px;
  color:#95A5A6;
}

.integration-instructions ol {
  text-align:left;
}

.integration-customize {
  margin:65px -15px 0;
}

.integration-customize .integration-options label {
  font-size:14px;
  text-transform:uppercase;
  font-weight:600;
  color:#BDC3C7;
  letter-spacing:.15em;
}

.integration-customize .form-group {
  margin-bottom:20px;
}

.integration-options .checkbox :checked ~ label {
  color:#12C4A1;
}

.integration-api {
  border-top:1px solid #ECF0F1;
  padding:40px 0;
  margin:40px auto;
  text-align:center;
}

.platform-list {
  list-style-type:none;
  margin:40px 0;
  padding:0;
  text-align:center;
}

.platform-list li {
  margin:5px 0;
  padding:0;
}

.platform-list a {
  display:inline-block;
  text-align:left;
  width:182px;
  height:32px;
  background:#ECF0F1;
  color:#BDC3C7;
  border-radius:2px;
  text-transform:uppercase;
  font-size:12px;
  line-height:20px;
  padding:6px;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
}

.platform-list .tagplay-icon {
  font-size:20px;
  height:20px;
  width:52px;
  margin-right:5px;
  vertical-align:middle;
  text-align:center;
}

.platform-list .icon-html {
  font-size:25px;
  line-height:20px;
}

.platform-list .icon-weebly-logo {
  font-size:50px;
  line-height:20px;
}

.platform-list .icon-wix-logo {
  font-size:30px;
  line-height:20px;
}

.integration-modal .integration-options {
  text-align:center;
  margin:30px 0;
}

.integration-customize {
  background:#FFF;
  padding:35px 20px 0;
}

.integration-customize h3 {
  font-size:18px;
  margin-top:0;
  margin-bottom:30px;
}

.integration-options .form-control {
  width:auto;
  height:24px;
  padding:1px 5px;
  color:#BDC3C7;
  border:1px solid #BDC3C7;
  display:inline-block;
  margin-right:8px;
  background:#FFF;
  text-transform:uppercase;
  font-weight:normal;
  font-style:italic;
  font-size:12px;
}

.integration-options input[type=number].form-control {
  width:40px;
  padding-right:0;
  font-style:normal;
}

.integration-options input[type=text].form-control {
  width:90px;
  margin-left:8px;
}

.integration-options select.form-control {
  margin-left:8px;
}

.integration-options .color-preview {
  display:inline-block;
  height:20px;
  width:20px;
  border:1px solid #BDC3C7;
  border-radius:2px;
  margin-left:8px;
  vertical-align:middle;
}

.form-control.color-input {
  display:inline-block;
  margin-left:8px;
  width:70px;
  text-align:center;
  position:relative;
  vertical-align:middle;
  line-height:20px;
}

.color-picker {
  position:absolute;
  margin-top:8px;
  background:#FFF;
  padding:10px;
  border-radius:3px;
  border:1px solid #BDC3C7;
}

.color-picker div {
  vertical-align:top;
}

code {
  color:#12C4A1;
  background:none;
  word-wrap:break-word;
}

.integration-instructions {
  text-align:left;
  margin:45px 0 0;
  text-align:center;
}

.integration-instructions pre {
  text-align:left;
  background:#32495C;
  color:#FFF;
  border:none;
  margin:25px -5px;
  padding:25px;
  border-radius:3px;
}

.integration-instructions p {
  margin-left:10px;
  margin-right:10px;
}

.integration-instructions .customize-note {
  font-size:14px;
}

.integration-modal .btn-default {
  border:1px solid #12C4A1;
  color:#12C4A1;
  background:none;
  text-transform:none;
  width:120px;
  margin-top:50px;
}

@media (min-width:768px) {
  .integration-customize {
    margin:0;
  }

  .integration-customize .form-group {
    margin-bottom:30px;
  }

  .integration-modal .integration-options {
    text-align:left;
    margin:60px 0;
  }

  .integration-modal .row:last-child .form-group {
    margin-bottom:0;
  }

  .integration-api {
    margin-top:90px;
    width:540px;
  }

  .integration-instructions pre {
    padding:35px;
    margin:35px 0;
  }
}

.modal-popover {
  z-index:9999;
}


/* STYLING GUIDE EXAMPLE */

.styling-guide-popover {
  width:500px;
  max-width:100%;
}

.annotated-source {
  cursor:pointer;
}

.annotated-source.active {
  background:#FF0;
  color:#000;
}

.annotated-source:focus {
  outline:none;
  box-shadow:none;
}

.styling-guide-example {
  max-height:300px;
  overflow:auto;
}

#tagplay-widget-styling-example.tagplay-widget .tagplay-media-container .tagplay-media-username {
  position:static;
  background:none;
  margin:0;
  padding:0;
  font-size:16px;
  font-weight:bold;
  text-align:left;
}

#tagplay-widget-styling-example.tagplay-widget p.tagplay-media-username a {
  color:#34495E;
}

#tagplay-widget-styling-example.tagplay-widget .tagplay-media-container .tagplay-media-username:before, #tagplay-widget-styling-example.tagplay-widget .tagplay-media-container .tagplay-media-username:after {
  content:none;
}

#tagplay-widget-styling-example.tagplay-widget .tagplay-media ~ p.tagplay-media-text {
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  height:auto;
  width:auto;
  padding:50px 0;
  max-height:none;
  background:rgba(255, 255, 255, 0.7);
  font-size:26px;
  font-weight:bold;
  line-height:34px;
  text-align:center;
  opacity:0;
  transition:opacity .3s;
  z-index:1;
}

#tagplay-widget-styling-example.tagplay-widget .tagplay-media-container:hover .tagplay-media ~ p.tagplay-media-text {
  opacity:1;
}

#tagplay-widget-styling-example.tagplay-widget .tagplay-media-options {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:20px 10px;
  font-size:20px;
  text-align:center;
  background:rgba(255, 255, 255, 0.9);
  opacity:0;
  transition:opacity .3s;
  z-index:2;
}

#tagplay-widget-styling-example.tagplay-widget .tagplay-media-container:hover .tagplay-media-options {
  opacity:1;
}

#tagplay-widget-styling-example.tagplay-widget .tagplay-media-options span {
  float:none;
}

#tagplay-widget-styling-example.tagplay-widget .tagplay-icon {
  height:30px;
  width:30px;
}


/* TAGPLAY ICONS */

i.tagplay-icon {
  display:inline-block;
  vertical-align:baseline;
}

.icon-with-text {
  margin-right:6px;
}

.icon-with-text .icon-btn {
  margin-right:0;
}

.icon-text {
  font-size:10px;
  font-weight:bold;
  line-height:30px;
  color:#BDC3C7;
}


/* ERROR MESSAGES */

.error-list {
  list-style-type:none;
  margin:0;
  padding:0;
}

.error-list li {
  margin:0;
  font-weight:normal;
}

.wizard-modal .alert-danger {
  text-align:center;
}


/* ALERTS */

.alert {
  border:none;
  background:#FFF;
  border-radius:4px;
  font-weight:bold;
  padding:10px 20px;
  text-align:left;
  position:relative;
}

.white .alert-danger {
  border:1px solid #D74C3C;
}

.white .alert-warning {
  border:1px solid #E17030;
}

.white .alert-info {
  border:1px solid #7F8C8D;
}

.white .alert-success {
  border:1px solid #12C4A1;
}

.text-danger, .alert-danger {
  color:#D74C3C;
}

.text-warning, .alert-warning {
  color:#E17030;
}

.text-info, .alert-info {
  color:#7F8C8D;
}

.text-success, .alert-success {
  color:#12C4A1;
}

.alert a {
  color:inherit;
  text-decoration:underline;
  font-weight:bold;
}

.alert .close {
  position:absolute;
  top:-8px;
  right:-8px;
  background:#BDC3C7;
  border-radius:100%;
  height:17px;
  width:17px;
  opacity:1;
  color:#FFF;
  line-height:17px;
  text-align:center;
  font-size:17px;
  font-weight:bold;
  display:block;
}

@media (min-width:768px) {
  .alert .close {
    top:-6px;
    right:-6px;
    height:13px;
    width:13px;
    line-height:13px;
    font-size:13px;
  }
}
/*
.has-error .help-block, .has-error .control-label, .has-error .radio, .has-error .checkbox, .has-error .radio-inline, .has-error .checkbox-inline, .has-error.radio label, .has-error.checkbox label, .has-error.radio-inline label, .has-error.checkbox-inline label {
  color:#D74C3C;
  font-weight:bold;
}
*/

/* MULTI-INPUT */

.form-control.multi-input {
  height:auto;
  overflow-x:hidden;
  white-space:nowrap;
  min-height:40px;
  padding:5px 8px;
  text-align:left;
  line-height:27px;
  cursor:text;
}

.user-input-group {
  width:100%;
  table-layout:fixed;
}

.user-input-group .input-group-addon {
  width:36px;
}


/* AUDIT LOG */

.audit-log {
  background:#FFF;
  padding:15px 20px 0;
}

.audit-log p {
  margin-bottom:15px;
}


/* USER LIST */

.user-list {
  background:#FFF;
  padding:15px;
}

.user-table .btn-default {
  background-color:transparent;
  text-transform:none;
  color:#12C4A1;
  border:1px solid #12C4A1;
  transition:all 0.1s;
  -moz-transition:all 0.1s;
  -webkit-transition:all 0.1s;
}

.user-table .btn-default:hover, .user-table .btn-default:active, .user-table .btn-default:focus {
  background:#12C4A1;
  color:#FFF;
}


/* NEW FRONT PAGE */

html body div.tagplay-front *, html body div.tagplay-front .container * {
  font-family:'AvenirNextLTPro';
}

.tagplay-front {
  background:#F7FAFB;
  color:#34495E;
  font-size:14px;
}

.tagplay-front.white {
  background:#FFF;
}

.tagplay-front section {
  line-height:19px;
  padding:40px 15px;
}

@media (min-width:768px) {
  .tagplay-front section {
    padding:100px 0;
  }
}

.tagplay-front .front-subpage {
  line-height:23px;
}

.tagplay-front .white {
  background:#FFF;
}

.tagplay-front .gray {
  background:#F7FAFB;
}

.tagplay-front .navbar-static-top {
  background:#FFF;
  color:#34495E;
  height:60px;
  padding:10px 0;
}

.navbar-static-top .navbar-header {
  padding:0 25px;
}

.navbar-static-top .navbar-nav {
  display:none;
}

.navbar-static-top .navbar-nav li.upgrade-link a:link {
  font-size:9px;
  line-height:20px;
}

.navbar-static-top .btn {
  font-size:10px;
  border:1px solid #FFF;
  border-radius:3px;
  padding:2px 10px;
  margin:-1px 5px;
}

.navbar-static-top a:hover .btn {
  background:#FFF;
  color:#12C4A1;
}

.tagplay-front .navbar-static-top .navbar-nav li {
  margin-left:24px;
}

.tagplay-front .navbar-static-top .navbar-nav a:link, .tagplay-front .navbar-static-top .navbar-nav a:visited {
  color:#95A5A6;
  font-weight:bold;
  font-size:12px;
  padding:4px 11px;
  background:none;
}

.tagplay-front .navbar-static-top.navbar-default .navbar-nav a:active, .tagplay-front .navbar-static-top.navbar-default .navbar-nav a:hover, .tagplay-front .navbar-static-top .navbar-nav .active a:active, .tagplay-front .navbar-static-top .navbar-nav .active a:hover, .tagplay-front .navbar-static-top .navbar-nav .active a:focus {
  color:#BDC3C7;
  background:none;
}

.navbar-static-top a.navbar-brand {
  font-size:14px;
  letter-spacing:normal;
  padding:0;
  line-height:25px;
  height:30px;
}

.navbar-static-top a.navbar-brand i.logo {
  font-size:20px;
  width:100px;
  vertical-align:middle;
}

.tagplay-front .navbar-static-top a.navbar-brand img.logo {
  height:40px;
}

.navbar-static-top button.navbar-toggle {
  border:0;
  margin:0;
  padding:4px 0;
  border-radius:0;
  height:25px;
  background:none;
}

.navbar-static-top button.navbar-toggle:active, .navbar-static-top button.navbar-toggle:hover, .navbar-static-top button.navbar-toggle:focus {
  background:none;
}

.navbar-static-top .navbar-toggle i {
  height:18px;
  width:25px;
  vertical-align:middle;
  font-size:25px;
  line-height:18px;
}

.tagplay-front button.navbar-toggle {
  height:40px;
}

.tagplay-front .navbar-static-top .navbar-toggle i {
  height:22px;
  width:30px;
}

.tagplay-front .navbar-static-top.navbar-default .tagplay-signup a:link, .tagplay-front .navbar-static-top.navbar-default .tagplay-signup a:visited {
  border:1px solid #12C4A1;
  border-radius:2px;
  color:#34495E;
  padding:3px 10px;
  transition:all 0.3s;
  -moz-transition:all 0.3s;
  -webkit-transition:all 0.3s;
}

.tagplay-front .navbar-static-top.navbar-default .tagplay-signup a:active, .tagplay-front .navbar-static-top.navbar-default .tagplay-signup a:hover, .tagplay-front .navbar-static-top.navbar-default .tagplay-signup.active a:active, .tagplay-front .navbar-static-top.navbar-default .tagplay-signup.active a:hover {
  background:#12C4A1;
  color:#FFF;
}

.navbar-static-top.navbar-expanded {
  background:#F7FAFB;
  color:#34495E;
  position:absolute;
  min-height:100%;
  width:100%;
  z-index:100;
}

.navbar-static-top.navbar-expanded .navbar-toggle {
  display:block;
}

.tagplay-front .navbar-toggle {
  color:#12C4A1;
}

.navbar-static-top.navbar-expanded .navbar-nav {
  display:block;
  margin:0;
  padding-left:10px;
}

.navbar-static-top.navbar-expanded .navbar-nav li {
  text-align:center;
  margin:40px 0 0;
}

.navbar-static-top.navbar-default.navbar-expanded .navbar-nav a:link, .navbar-static-top.navbar-default.navbar-expanded .navbar-nav a:visited {
  font-size:20px;
  padding:12px 21px;
  display:inline-block;
  color:#95A5A6;
}

.navbar-static-top.navbar-default.navbar-expanded .tagplay-signup a:link, .navbar-static-top.navbar-default.navbar-expanded .tagplay-signup a:visited {
  padding:11px 20px;
}

@media (min-width:768px) {
  .tagplay-front .navbar-static-top {
    height:80px;
    padding:20px 0;
  }

  .navbar-static-top.navbar-expanded .navbar-header {
    width:100%;
    margin-bottom:0;
  }

  .navbar-static-top .navbar-nav {
    display:block;
  }

  .tagplay-front .navbar-static-top .navbar-nav {
    padding:6px 0;
  }

  .navbar-static-top .user-menu-header {
    display:none;
  }
}

@media (max-width:767px) {
  .menu-open .tagplay-front > *, .menu-open .tagplay-inner > * {
    display:none;
  }

  .menu-open .navbar.navbar-expanded {
    display:block;
  }

  .menu-open .navbar-toggle i, .menu-open .logo {
    color:#12C4A1;
  }

  .navbar-static-top.navbar .navbar-right {
    border:0;
  }

  .navbar-static-top.navbar-expanded .usermenu.navbar-nav > .open > a, .navbar-static-top.navbar-expanded .usermenu.navbar-nav > .open > a:hover, .navbar-static-top.navbar-expanded .usermenu.navbar-nav > .open > a:focus {
    background:none;
    color:#95A5A6;
  }

  .navbar-static-top.navbar-default.navbar-expanded .navbar-nav .open .dropdown-menu > li > a {
    color:#12C4A1;
    font-size:18px;
    font-weight:600;
  }

  .navbar-static-top.navbar-default.navbar-expanded .navbar-nav .dropdown-menu > li {
    margin:0;
  }

  .navbar-static-top.navbar-expanded li.divider {
    display:none;
  }

  .navbar-static-top.navbar-expanded .navbar-nav {
    padding:0;
  }

  .navbar-static-top .navbar-nav a:link {
    color:#95A5A6;
  }
}

.tagplay-front h1 {
  text-align:center;
  margin:0 0 40px;
  font-weight:600;
  font-size:28px;
}

@media (min-width:768px) {
  .tagplay-front h1 {
    text-align:left;
  }
}

.tagplay-front #header {
  height:480px;
  width:100%;
  background:#F7FAFB;
  color:#34495E;
  text-align:center;
  position:relative;
  padding:100px 20px 150px;
  overflow:hidden;
}

.front-page #header {
  background:url('front/new-header-mobile.jpg') center bottom no-repeat #000;
  background-size:cover;
  color:#FFF;
  padding:40px 30px 150px;
}

@media (min-width:768px) {
  .front-page #header {
    background-image:url('front/new-header.jpg');
    background-position:center center;
  }
}

.front-page #header .btn {
  display:block;
  color:#FFF;
  border-radius:0;
  margin:0 auto 10px;
  width:185px;
  font-size:14px;
}

.front-page #header .btn.signup-button {
  background:#12C4A1;
}

.front-page #header .btn.signup-button:hover {
  background:#23D5B2;
  border-color:#23D5B2;
}

.tagplay-front #header h1 {
  text-align:center;
  margin:0 0 72px;
  font-weight:bold;
}

.front-page #header h1 {
  color:#FFF;
  margin-bottom:40px;
  font-size:34px;
}

.front-page #header h1 .hashtag {
  color:#12C4A1;
  font-weight:normal;
}

.tagplay-front #header h1 .subtitle {
  display:block;
  color:#12C4A1;
  font-weight:normal;
  font-size:14px;
  margin-top:30px;
}

.front-page #header h1 .subtitle {
  color:#FFF;
  font-weight:600;
  max-width:640px;
  margin:20px auto;
  line-height:20px;
}

.tagplay-front #header.small {
  height:440px;
  padding-top:60px;
  margin-bottom:-185px;
}

.tagplay-front #header.small .pricing-contact {
  margin-top:-50px;
}

@media (min-width:480px) {
  .front-page #header .btn {
    display:inline-block;
    width:auto;
    min-width:132px;
    margin:0 3px;
  }
}

@media (min-width:768px) {
  .front-page #header {
    padding-top:60px;
  }

  .front-page #header h1 {
    margin-bottom:42px;
  }
}

@media (min-width:992px) {
  .tagplay-front #header {
    height:656px;
    padding:100px 80px 135px;
  }

  .tagplay-front #header.small {
    height:595px;
    padding-top:120px;
    margin-bottom:-245px;
  }

  .tagplay-front #header.small .pricing-contact {
    margin-top:30px;
  }

  .tagplay-front #header h1 {
    font-size:45px;
    margin-bottom:126px;
  }

  .front-page #header {
    padding-top:80px;
  }

  .front-page #header h1 {
    font-size:50px;
    margin-bottom:42px;
  }

  .tagplay-front #header.small h1 {
    width:680px;
    margin:auto;
  }

  .tagplay-front #header h1 .subtitle {
    font-size:20px;
    margin-top:41px;
  }

  .front-page #header h1 .subtitle {
    margin:20px auto;
    line-height:23px;
  }
}

.tagplay-front #header .header-bg {
  position:absolute;
  bottom:0;
}

.tagplay-front #header .header-bg.left {
  left:0;
  bottom:-85px;
  margin-left:-60px;
  -moz-animation-duration:1s;
  -webkit-animation-duration:1s;
  -moz-animation-name:slide-from-left;
  -webkit-animation-name:slide-from-left;
}

.tagplay-front #header .header-bg.right {
  right:-216px;
}

@media (min-width:768px) {
  .tagplay-front #header .header-bg.left {
    margin-left:-30px;
    bottom:-40px;
  }

  .tagplay-front #header .header-bg.right {
    margin-right:-70px;
    bottom:-40px;
    right:87px;
    -moz-animation-duration:1.5s;
    -webkit-animation-duration:1.5s;
    -moz-animation-name:slide-from-right;
    -webkit-animation-name:slide-from-right;
  }
}

@media (min-width:992px) {
  .tagplay-front #header .header-bg.left {
    margin-left:0;
    bottom:0;
  }

  .tagplay-front #header .header-bg.right {
    margin-right:0;
    bottom:0;
  }
}

@-moz-keyframes slide-from-left {
  from {
    left:-358px;
  }

  to {
    left:0;
  }
}

@-moz-keyframes slide-from-right {
  from {
    right:-216px;
  }

  to {
    right:87px;
  }
}

@-webkit-keyframes slide-from-left {
  from {
    left:-358px;
  }

  to {
    left:0;
  }
}

@-webkit-keyframes slide-from-right {
  from {
    right:-216px;
  }

  to {
    right:87px;
  }
}

.tagplay-front #header .foreground {
  position:relative;
  z-index:1;
}

.tagplay-front #header .demo-button {
  margin-top:50px;
}

.tagplay-front #plans {
  padding-top:0;
}

.tagplay-front #plans .row {
  margin:0 -10px;
}

.tagplay-front #plans .col-md-3 {
  padding:0 10px;
}

.plan-box {
  position:relative;
  border:1px solid #BDC3C7;
  border-radius:3px;
  background:#FFF;
  color:#7F8C8D;
  padding:30px;
  width:220px;
  margin:0 auto 35px;
}

.plan-box.current {
  background:#F8FFF8;
  border-color:#12C4A1;
}

.plan-box:hover {
  background:#F9F9F9;
}

.plan-box.current:hover {
  background:#E9F5E9;
}

.tagplay-front .plan-box h3 {
  font-size:19px;
  font-weight:bold;
  margin:0;
}

.plan-box .plan-features {
  margin:35px 0;
  font-size:16px;
}

.plan-box .plan-features li {
  margin:20px 0;
}

.plan-signup .plan-features {
  margin:35px auto;
  font-size:12px;
  padding:0;
}

.plan-signup .plan-features li {
  margin:5px 0;
  padding:0;
}

.plan-signup-buttons {
  margin:30px 0;
}

.plan-signup .plan-signup-buttons .btn {
  margin:30px auto;
  max-width:300px;
  text-transform:none;
  letter-spacing:0;
}

.plan-box .plan-features .help-icon {
  color:#12C4A1;
}

.plan-signup .plan-features .help-icon {
  display:none;
}

.plan-box .pricing {
  color:#12C4A1;
  font-size:14px;
  margin-top:50px;
}

.plan-box .pricing .price {
  font-size:46px;
  font-weight:bold;
}

.plan-box .btn.btn-lg.btn-default {
  background:#FFF;
  font-size:12px;
  display:block;
  width:100%;
  padding:8px 10px;
}

.plan-box .plan-trial {
  display:block;
  font-size:12px;
  font-weight:600;
  color:#F07B69;
  margin-top:10px;
}

.plan-box .current-plan {
  display:block;
  text-align:center;
  font-size:12px;
  font-weight:600;
  padding:8px 10px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#12C4A1;
}

.plan-box .current-tag {
  position:absolute;
  top:25px;
  right:-10px;
  background:#12C4A1;
  color:#FFF;
  font-weight:600;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  padding:2px 10px;
  -moz-border-radius: 2px  2px 0 2px;
  -webkit-border-radius: 2px  2px 0 2px;
  -o-border-radius: 2px  2px 0 2px;
  border-radius: 2px  2px 0 2px;
}

.plan-box .current-tag:after {
  content:'';
  position:absolute;
  top:-9px;
  right:1px;
  border-bottom:9px solid #004433;
  border-right:9px solid transparent;
}

.plan-box .current-tag.trial-tag {
  background:#E86E3C;
}

.plan-box .current-tag.trial-tag:after {
  border-bottom-color:#550000;
}

.pricing-contact {
  margin-top:20px;
  font-size:14px;
  font-weight:bold;
  color:#7F8C8D;
  text-align:center;
}

.pricing-contact a:link, .pricing-contact a:visited {
  color:#7F8C8D;
  border-bottom:1px solid #7F8C8D;
}

.pricing-contact a:active, .pricing-contact a:hover {
  text-decoration:none;
  color:#BDC3C7;
  border-color:#BDC3C7;
}

@media(min-width:768px) {
  .plan-box {
    width:300px;
  }
}

@media(min-width:992px) {
  .plan-box {
    width:auto;
  }

  .pricing-contact {
    margin-top:25px;
  }
}

.tagplay-front .btn, .onboarding .btn, .form-signin .btn {
  border-radius:2px;
  font-size:9px;
  font-weight:bold;
  letter-spacing:.1em;
  transition:all 0.3s;
  -moz-transition:all 0.3s;
  -webkit-transition:all 0.3s;
}

.tagplay-front .btn-lg, .onboarding .btn-lg, .form-signin .btn-lg {
  padding:9px 13px;
}

.tagplay-front .btn-default, .onboarding .btn-default, .form-signin .btn-default {
  border:1px solid #12C4A1;
  background:none;
  color:#34495E;
}

@media (min-width:480px) {
  .tagplay-front .btn, .onboarding .btn, .form-signin .btn {
    font-size:14px;
  }

  .tagplay-front .btn-lg, .onboarding .btn-lg, .form-signin .btn-lg {
    padding:11px 17px;
  }
}

.tagplay-front .btn.btn-default:hover, .tagplay-front .btn.btn-default:active, .tagplay-front .btn.btn-default:focus, .onboarding .btn-default:hover, .onboarding .btn-default:active, .onboarding .btn-default:focus, .form-signin .btn-default:hover, .form-signin .btn-default:active, .form-signin .btn-default:focus {
  background:#12C4A1;
  color:#FFF;
}

.tagplay-front .front-tabs .nav-tabs {
  border:0;
}

.tagplay-front .front-tabs .nav-tabs li {
  display:block;
  width:100%;
  text-align:center;
  border:0;
  font-weight:bold;
  letter-spacing:.12em;
  margin-bottom:20px;
}

@media (min-width: 768px) {
  .tagplay-front .front-tabs nav {
    background:#FFF;
    width:100%;
    height:60px;
  }

  .tagplay-front .front-tabs nav.floating {
    position:fixed;
    z-index:1;
    top:0;
    left:0;
    right:0;
    height:60;
  }

  .tagplay-front .front-tabs nav.floating ~ .tab-content {
    padding-top:65px;
  }

  .tagplay-front .front-tabs .nav-tabs {
    width:720px;
    margin:auto;
    border-bottom:1px solid #BDC3C7;
  }

  .tagplay-front .front-tabs .nav-tabs li {
    width:50%;
    margin-bottom:-1px;
  }
}

@media (min-width: 992px) {
  .tagplay-front .front-tabs .nav-tabs {
    width:940px;
  }
}

.tagplay-front .front-tabs .nav-tabs li a:link, .tagplay-front .front-tabs .nav-tabs li a:visited {
  height:60px;
  border:0;
  border-bottom:1px solid #BDC3C7;
  line-height:20px;
  font-size:14px;
  padding:25px 0 15px;
  display:inline-block;
  width:auto;
  position:relative;
}

.tagplay-front .front-tabs .nav-tabs li.active a:link, .tagplay-front .front-tabs .nav-tabs li.active a:visited {
  border-bottom:1px solid #34495E;
}

.tagplay-front .front-tabs .nav-tabs li.active a:link:after {
  content:'';
  height:0;
  width:0;
  border:9px solid transparent;
  border-top-color:#34495E;
  position:absolute;
  top:100%;
  left:50%;
  margin-left:-9px;
}

.tagplay-front h2, h2.form-signin-heading  {
  text-transform:uppercase;
  font-weight:bold;
  font-size:16px;
  margin:5px 0 30px;
  letter-spacing:.12em;
}

.tagplay-front h3 {
  color:#34495E;
  font-weight:600;
  font-size:16px;
  margin-top:30px;
  margin-bottom:30px;
}

@media (min-width:768px) {
  .tagplay-front h2, h2.form-signin-heading {
    font-size:20px;
    margin-bottom:40px;
  }

  .tagplay-front h3 {
    font-size:20px;
    margin-top:0;
    margin-bottom:40px;
  }
}

.tagplay-front .intro {
  color:#95A5A6;
  text-align:center;
}

.tagplay-front .img-website-owner, .tagplay-front .img-web-developer {
  margin:20px;
}

@media (min-width:768px) {
  .tagplay-front .intro, .tagplay-front #owner-intro h2 {
    text-align:left;
  }

  .tagplay-front #developer-intro .intro-text, .tagplay-front #developer-intro .intro-text h2 {
    text-align:right;
  }

  .tagplay-front .img-web-developer {
    margin:20px 0;
  }

  .tagplay-front .intro {
    font-size:16px;
    line-height:22px;
  }
}

.tagplay-front .advantages {
  text-align:center;
  color:#95A5A6;
  padding-top:0;
}

.tagplay-front .advantages p {
  font-size:16px;
}

.tagplay-front .advantages img {
  margin-bottom:30px;
}

@media (min-width:768px) {
  .tagplay-front .advantages {
    padding-top:100px;
  }

  .tagplay-front .advantages img {
    margin-bottom:40px;
  }
}

@media (min-width:992px) {
  .tagplay-front .advantages .col-sm-4 {
    padding-left:38px;
    padding-right:38px;
  }

  .tagplay-front .advantages .col-sm-4:first-child {
    padding-right:66px;
    padding-left:15px;
  }

  .tagplay-front .advantages .col-sm-4:last-child {
    padding-right:15px;
    padding-left:66px;
  }
}

.tagplay-front .learn-more {
  text-align:center;
}

.tagplay-front .learn-more p {
  font-size:20px;
  line-height:27px;
  font-weight:600;
  margin-bottom:40px;
}

.tagplay-front .learn-more img {
  margin-top:50px;
}

.tagplay-front .get-started-box {
  border-top:1px solid #BDC3C7;
  padding-top:66px;
  margin-top:66px;
  text-align:center;
}

.tagplay-front .learn-more {
  padding-bottom:66px;
}

@media (min-width:768px) {
  .tagplay-front .learn-more p {
    font-size:26px;
    line-height:37px;
    margin-bottom:94px;
  }

  .tagplay-front .learn-more .learn-more-text {
    text-align:right;
    padding-left:0;
  }

  .tagplay-front .learn-more img {
    margin-top:10px;
  }

  .tagplay-front #developer-learn-more img {
    margin-top:60px;
  }

  .tagplay-front .get-started-box {
    padding-top:100px;
    margin-top:100px;
  }

  .tagplay-front .learn-more {
    padding-bottom:100px;
  }
}

.tagplay-front #footer {
  padding:45px 0 40px;
  background:#FFF;
}

.tagplay-front #footer .container {
  padding:0 88px;
}

.tagplay-front.white #footer {
  background:#F7FAFB;
}

.tagplay-front #footer .logo {
  margin-bottom:40px;
  margin-left:-35px;
  font-size:150px;
  line-height:40px;
}

.tagplay-front #footer ul {
  margin:0;
  padding:0;
  list-style-type:none;
}

.tagplay-front #footer li {
  margin:0 0 20px 0;
  padding:0;
  font-size:12px;
  font-weight:bold;
  text-transform:uppercase;
  letter-spacing:.12em;
}

.tagplay-front #footer ul.networks-list {
  margin-bottom:40px;
}

.tagplay-front #footer ul.networks-list i.tagplay-icon {
  float:left;
  margin-left:-25px;
  font-size:18px;
  line-height:16px;
}

.tagplay-front #footer a:link, .tagplay-front #footer a:visited {
  color:#34495E;
  text-decoration:none;
}

.tagplay-front #footer a:active, .tagplay-front #footer a:hover {
  color:#95A5A6;
}

.tagplay-front #footer .row {
  margin-bottom:30px;
}

.tagplay-front #footer p {
  font-size:12px;
  font-weight:600;
  margin:5px 0;
  text-align:center;
}

.tagplay-front #footer input {
  border:none;
  background:none;
  color:inherit;
  font-family:inherit;
  font-size:inherit;
  text-transform:inherit;
  letter-spacing:inherit;
  border-bottom:1px solid #12C4A1;
  width:180px;
}

.tagplay-front #footer .social-buttons {
  padding:0 15px;
  max-width:970px;
  margin:0 auto 40px;
  text-align:center;
}

.tagplay-front #footer .twitter-buttons, .tagplay-front #footer .fb-like {
  display:inline-block;
  vertical-align:top;
}

.tagplay-front #footer .twitter-buttons {
  margin-left:5px;
}

.tagplay-front #footer .twitter-follow-button {
  margin-right:5px;
}

@media (min-width:768px) {
  .tagplay-front #footer {
    padding:60px 0 40px;
  }

  .tagplay-front #footer .container {
    padding-left:45px;
    padding-right:45px;
  }

  .tagplay-front #footer .row {
    margin-bottom:65px;
  }
}

@media (min-width:992px) {
  .tagplay-front #footer .container {
    padding-left:15px;
    padding-right:15px;
  }
}

.tagplay-front .terms-sidebar {
  background:#FFF;
  padding:25px;
  text-align:center;
  font-size:12px;
  margin:0 25px 40px;
}

.tagplay-front .terms-sidebar ul {
  margin-bottom:0;
}

.tagplay-front .terms-sidebar li {
  margin-bottom:15px;
}

.tagplay-front .terms-sidebar li:last-child {
  margin-bottom:0;
}

.tagplay-front .terms-sidebar a:link, .tagplay-front .terms-sidebar a:visited {
  font-weight:bold;
  letter-spacing:.12em;
  color:#34495E;
  text-transform:uppercase;
  text-decoration:none;
}

.tagplay-front .terms-sidebar a:active, .tagplay-front .terms-sidebar a:hover {
  color:#95A5A6;
}

@media (min-width:768px) {
  .tagplay-front .terms-sidebar {
    margin:0;
  }
}


/* FRONT PAGE IMAGES */

.tagplay-front .responsive-img {
  max-width:100%;
}

.tagplay-front .img-header-left {
  width:358px;
  max-width:none;
}

.tagplay-front .img-header-right {
  width:216px;
  max-width:none;
}

.tagplay-front .img-website-owner {
  width:201px;
}

.tagplay-front .img-up-to-date, .tagplay-front .img-time-saving, .tagplay-front .img-tools-you-love, .tagplay-front .img-better-websites, .tagplay-front .img-happier-clients {
  width:91px;
}

.img-social-media {
  width:410px;
  display:none;
}

.img-social-media-mobile {
  width:177px;
}

.tagplay-front .img-web-developer {
  width:180px;
}

@media (min-width:768px) {
  .img-social-media {
    display:inline-block;
  }

  .img-social-media-mobile {
    display:none;
  }

  .tagplay-front .img-up-to-date {
    width:119px;
  }

  .tagplay-front .img-time-saving, .tagplay-front .img-tools-you-love, .tagplay-front .img-better-websites, .tagplay-front .img-happier-clients {
    width:120px;
  }
}


/* HOW IT WORKS PAGE */

.product-page #header {
  height:470px;
  padding-top:120px;
}

.product-page #header .header-bg {
  display:block;
  max-width:90%;
  left:5%;
  right:5%;
  margin:auto;
}

.product-page section {
  padding:80px 0;
  text-align:center;
}

.product-page #intro {
  font-size:18px;
  font-weight:600;
  line-height:25px;
  padding:100px 0 80px;
}

.product-page #intro .subtext {
  font-size:14px;
  font-weight:normal;
  line-height:22px;
  color:#12C4A1;
  margin:25px 0;
}

.product-page h2 {
  font-size:30px;
  text-transform:none;
  letter-spacing:normal;
}

.product-page h3 {
  font-size:14px;
  text-transform:uppercase;
  font-weight:bold;
  letter-spacing:.1em;
  margin-bottom:20px;
}

.product-page .intro-paragraph {
  font-size:16px;
  line-height:22px;
  color:#12C4A1;
}

.product-page .feed-type {
  margin-top:70px;
  margin-bottom:70px;
  color:#95A5A6;
  font-size:16px;
  line-height:22px;
}

.product-page .text-left, .product-page .text-right {
  text-align:center;
}

.product-page .tip {
  padding:25px 20px;
  text-align:left;
  background:#FFF;
  color:#95A5A6;
  font-size:16px;
  margin-bottom:55px;
}

.product-page .tip p {
  margin:0;
}

.product-page .integration-type {
  margin-top:90px;
  margin-bottom:90px;
  color:#95A5A6;
  font-size:16px;
  line-height:22px;
}

.product-page .integration-type p {
  margin-top:50px;
}

.product-page #display p {
  color:#95A5A6;
  font-size:16px;
}

.product-page #add-content .add-content-intro {
  background:#FFF;
  margin:100px 0;
  font-size:16px;
  line-height:22px;
  color:#95A5A6;
}

.product-page .add-content-intro p {
  margin:20px;
}

.product-page .add-content-type {
  margin-top:70px;
  margin-bottom:0;
  font-size:14px;
  line-height:22px;
  color:#95A5A6;
}

.product-page .full-control-type {
  margin-top:90px;
  margin-bottom:90px;
  color:#95A5A6;
  font-size:16px;
  line-height:22px;
}

.product-page .slideshow {
  width:100%;
  height:auto;
  overflow:hidden;
}

.product-page .slideshow .slide {
  width:100%;
}

.product-page .slideshow.stopped .slide {
  opacity:1;
  transition:opacity 0.2s;
  -moz-transition:opacity 0.2s;
  -webkit-transition:opacity 0.2s;
}

.product-page .slideshow.exiting .slide {
  opacity:0;
  transition:opacity 0.2s;
  -moz-transition:opacity 0.5s;
  -webkit-transition:opacity 0.5s;
}

.product-page .slideshow.entering .slide {
  opacity:0;
  transition:none;
  -moz-transition:none;
  -webkit-transition:none;
}

@media (min-width:768px) {
  .product-page #header {
    height:596px;
    padding-top:120px;
  }

  .product-page h2 {
    width:480px;
    margin-left:auto;
    margin-right:auto;
  }

  .product-page #intro {
    font-size:23px;
    line-height:31px;
    padding:160px 0 130px;
  }

  .product-page #intro .subtext {
    font-size:18px;
    line-height:25px;
    margin:25px 35px;
  }

  .product-page .feed-type {
    margin-top:125px;
    margin-bottom:125px;
  }

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

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

  .product-page .add-content-type {
    margin-top:130px;
    margin-bottom:40px;
  }
}

@media (min-width:992px) {
  .product-page .add-content-intro p {
    margin:55px 25px 0 0;
  }

  .product-page .slideshow {
    width:518px;
    height:265px;
  }
}


/* HOW IT WORKS IMAGES */

.product-page .img-website-header {
  width:550px;
}

.product-page .img-social-media-hashtag-connection {
  width:341px;
}

.product-page .img-formula-window {
  width:784px;
}

.product-page .img-formula-box {
  width:672px;
}

.product-page .img-api, .product-page .img-integrate-connection {
  width:152px;
}

.product-page .img-add-content {
  width:617px;
}

.product-page .img-facebook-add-content, .product-page .img-facebook-workplace-add-content {
  width:368px;
}

.product-page .img-twitter-add-content {
  width:389px;
}

.product-page .img-email-add-content {
  width:461px;
}

.product-page .img-approve-decline {
  width:380px;
}

.product-page .img-remove-update-1 {
  width:350px;
}

.product-page .img-remove-update-2, .product-page .img-remove-update-3 {
  width:518px;
}


/* 404 PAGE */

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

.not-found h1 {
  text-align:center;
  font-size:80px;
  margin-top:40px;
  margin-bottom:40px;
}

.not-found p {
  color:#12C4A1;
  font-size:16px;
  margin-bottom:15px;
}

.not-found p a:link {
  color:#12C4A1;
  text-decoration:underline;
}

.not-found-img-mobile {
  width:148px;
  margin-top:65px;
}

.not-found-img {
  display:none;
}

@media (min-width:768px) {
  .not-found h1 {
    font-size:130px;
    margin-top:60px;
    margin-bottom:80px;
  }

  .not-found p {
    font-size:23px;
    margin-bottom:25px;
  }

  .not-found-img {
    display:inline-block;
    width:239px;
    margin-top:75px;
  }

  .not-found-img-mobile {
    display:none;
  }
}


/* ONBOARDING */

.onboarding {
  text-align:center;
}

.onboarding .skip {
  font-size:12px;
  font-weight:600;
  font-style:italic;
  color:#BDC3C7;
  text-decoration:underline;
}

.onboarding p {
  font-weight:bold;
  font-size:16px;
  color:#95A5A6;
  margin:15px auto;
}

.onboarding h2 {
  margin-bottom:50px;
  font-size:24px;
}

.onboarding .hashtag-input {
  margin-top:50px;
}

.onboarding .img-social-media, .onboarding .img-social-media-mobile {
  margin-top:50px;
}

.feed-name-input {
  width:220px;
  margin:35px auto 70px;
}

.feed-name-input .form-control-feedback {
  top:100%;
  margin-top:8px;
  right:0;
}

.feed-name-input .help-block {
  top:100%;
  margin-top:10px;
  left:auto;
  right:30px;
}

.onboarding .onboarding-formula-preview {
  background:#FFF;
  padding:25px;
  margin:25px -15px 0;
}

.onboarding .onboarding-formula-preview h3 {
  color:#12C4A1;
  font-size:18px;
  margin-top:0;
  margin-bottom:25px;
}

.onboarding .onboarding-formula-preview p {
  color:#34495E;
  font-weight:normal;
  font-size:14px;
  line-height:23px;
  margin-bottom:15px;
}

.onboarding .onboarding-formula-preview p i.tagplay-icon {
  vertical-align:text-top;
}

.onboarding .connection-selector {
  margin-top:10px;
}

.email-form {
  text-align:left;
  margin-top:30px;
}

.email-form label {
  font-size:12px;
  font-weight:600;
}

.onboarding .project-selector {
  margin-top:50px;
}

.onboarding .get-code-img {
  margin:50px -15px 45px;
}

img.get-code-img {
  width:152px;
  height:152px
}

.onboarding .facebook-field-selector {
  margin-top:50px;
}

.onboarding .facebook-field-selector label {
  color:#95A5A6;
}

.onboarding .facebook-field-selector :checked ~ label {
  color:#12C4A1;
}

@media (min-width:768px) {
  .onboarding h2 {
    margin-bottom:80px;
    font-size:30px;
  }

  .onboarding .hashtag-input {
    margin-top:90px;
  }

  .onboarding .feed-name-input .form-control-feedback {
    top:9px;
    margin-top:0;
    right:-40px;
  }

  .onboarding .feed-name-input .help-block {
    top:8px;
    left:100%;
    width:100px;
    margin-left:45px;
    margin-top:5px;
  }

  .onboarding .feed-name-input {
    margin-top:50px;
  }

  .onboarding .onboarding-formula-preview {
    margin:60px 0 0;
  }
}

@media (min-width:992px) {
  .wizard .connection-selector .row {
    margin-bottom:-38px;
  }

  .wizard .social-providers {
    margin-bottom:-38px;
  }
}

.onboarding-modal {
  font-size:18px;
  font-weight:600;
  color:#7F8C8D;
}

.onboarding-modal .modal-body {
  text-align:center;
  padding:70px 20px 80px;
}

.onboarding-modal h3 {
  color:#34495E;
  margin-bottom:40px;
  margin-top:0;
  font-size:30px;
}

.onboarding-modal small {
  font-size:14px;
  font-weight:normal;
}

@media (min-width:768px) {
  .onboarding-modal .modal-body {
    padding:40px 60px 55px;
  }
}

.empty-box {
  background:#FFF;
  padding:40px 30px;
  color:#95A5A6;
  text-align:center;
  font-size:16px;
  font-weight:600;
  border-radius:3px;
  margin-bottom:40px;
}

.empty-box p {
  margin:0;
}

.empty-box button {
  margin-top:20px;
}

@media (max-width:479px) {
  .empty-box {
    margin:0 -15px 40px;
  }
}


/* PAYMENTS PAGE */

.payment-info h3 {
  margin-top:60px;
}

.card-list {
  width:300px;
}


/* GENERIC WIZARD */

.wizard {
  margin-top:20px;
}

.wizard-footer .btn-default, .workplace-modal .btn-default {
  text-transform:none;
  color:#12C4A1;
  font-weight:600;
  letter-spacing:normal;
  font-size:14px;
  background:none;
  border:1px solid #12C4A1;
}

.wizard-footer .btn-default .tagplay-icon {
  font-size:16px;
}

.wizard-footer .btn-default:active, .wizard-footer .btn-default:hover, .wizard-footer .btn-default:focus, .workplace-modal .btn-default:active, .workplace-modal .btn-default:hover, .workplace-modal .btn-default:focus {
  background:#12C4A1;
  color:#FFF;
}

.btn.btn-muted {
  border:0;
  background:none;
  color:#BDC3C7;
  text-transform:none;
  font-weight:600;
  letter-spacing:normal;
  font-size:12px;
}

.wizard-footer .btn-muted {
  padding-left:0;
}

.wizard-progress {
  height:1px;
  margin:0 2px 60px 2px;
  background:#FFF;
  position:relative;
}

.wizard-progress-node {
  box-sizing:content-box;
  -moz-box-sizing:content-box;
  -webkit-box-sizing:content-box;
  position:absolute;
  top:-2px;
  margin-left:-2px;
  height:5px;
  padding:0 3px 0 2px;
  border-radius:3px;
  background:#12C4A1;
}

.wizard-show-step {
  margin-right:-2px;
  margin-left:-2px;
  position:absolute;
  top:15px;
  font-size:10px;
  font-weight:600;
  font-style:italic;
  color:#BDC3C7;
}

.wizard-footer {
  margin-top:65px;
  margin-bottom:70px;
}

.wizard-footer .col-xs-6 {
  text-align:right;
}

.wizard-footer .col-xs-6.text-left {
  text-align:left;
}

.wizard-footer .wizard-message {
  font-weight:normal;
  margin-bottom:30px;
  color:#D74C3C;
}

@media (min-width:768px) {
  .wizard {
    margin-top:30px;
  }

  .wizard-progress {
    margin:0 3px 70px 3px;
  }

  .wizard-progress-node {
    top:-3px;
    margin-left:-3px;
    height:7px;
    padding:0 4px 0 3px;
    border-radius:4px;
  }

  .wizard-show-step {
    margin-right:-3px;
    margin-left:-3px;
    top:10px;
    font-size:12px;
  }

  .wizard-footer {
    margin-top:100px;
  }

  .wizard-footer .col-sm-4 {
    text-align:center;
  }
}


/* CONNECTION CREATED */

.connection-created {
  border-top:11px solid #12C4A1;
  text-align:center;
}

.connection-created h1 {
  color:#34495E;
  font-size:36px;
  line-height:40px;
  height:40px;
  width:100%;
  position:absolute;
  top:50%;
  margin-top:-20px;
}


/* MODAL TABS */

.modal .nav.nav-tabs {
  border-bottom:1px solid #BDC3C7;
}

.modal .nav.nav-tabs > li > a {
  text-transform:none;
  border:1px solid #FFF;
  border-bottom:1px solid #BDC3C7;
  letter-spacing:normal;
}

.modal .nav.nav-tabs > li.active > a {
  border:1px solid #BDC3C7;
  border-bottom:1px solid #FFF;
}