html, body {
	width: 100%;
	height: 100%;
}

body {
	font-size: 0;
  	font-family: "Avenir W01", Arial, sans-serif;
  	background:#f7f7f7;
    color: #454a50;
}

a {
	text-decoration: none;
}

.hidden {
	display: none !important;
}

.uppercase {
	text-transform: uppercase;
}

.container {
	width: 100%;
	max-width: 1000px;
	margin:0 auto;
	position: relative;
}

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

/* Buttons
-------------------------------------- */

a.basic {
  color: #1485FF;
  font-size: 14px;
}

.button {
    padding: 18px 50px;
    font-weight: 500;
    font-size: 14px;
    border-radius: 4px;
    letter-spacing: 1.3px;
    background: #1485FF;
    display: inline-block;
    color: #fff;
    text-transform: uppercase;
    border: none;
    box-shadow: 0 2px 3px rgba(0,0,0,0.05);
}

.button.big {
	padding: 25px 80px;
	border-radius: 5px;
}

.button:hover {
	background: #3797ff;
	cursor: pointer;
}

.button:active {
	background: #0b6bd2;
}

.button.light {
  background: #fff;
  border: 1px solid #DEDEDE;
  color: #555d67;
  padding: 14px 49px;
  box-shadow: 0 2px 3px rgba(0,0,0,0.05);
}

.button.light:hover {
	color: #272e35;
}

.button.light:active {
	opacity: 0.2;
}

.button.success {
	background: #3acc7e;
}

.naked-button {
  border-bottom: 1px dashed #00A1FF;
  color: #00A1FF;
}

.naked-button:hover {
  opacity: 0.7;
}

.naked-button:active {
  opacity: 0.2;
}

.button.naked {
  background: none;
  color: #fff;
}

.button.naked:hover {
  opacity: 0.7;
}

.button.naked:active {
  opacity: 0.2;
}

.button.disabled {
  opacity: 0.2;
  cursor: default;
}

.button.loading {
  background: #eee url(../img/loading.svg) center no-repeat !important;
  background-size: 24px !important;
  font-size: 0 !important;
  height: 48px;
  padding-left: 113px;
  padding-right: 113px;
  cursor: default;
}

/* Typography
------------------------------------------------------- */

h1 {
	font-size: 48px;
	font-weight: 900;
	color: #1D2126;
	letter-spacing: -1.2px;
  line-height: 1.3;
}

h2 {
	font-size: 16px;
	color: #697382;
	font-weight: 300;
	letter-spacing: .2px;
  line-height: 1.3;
}

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

 h1 {
  font-size: 17px;
  letter-spacing: 0;
 }

 h2 {
  font-size: 14px;
  letter-spacing: 0;
 }

}


/* Walkthrough overlay
------------------------------------------------ */

.walkthrough-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;
}

.walkthrough-box {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 300px;
    margin-top: 150px;
    margin-left: -150px;
    z-index: 10010;
    background: #fff;
    min-height: 100px;
    border-radius: 4px;
    box-shadow: 0 15px 20px rgba(0,0,0,0.1);
    padding: 20px;
    text-align: center;
    display: none;
}

.walkthrough-box.active {
  display: inline-block;
}

.walkthrough-box p {
    font-size: 16px;
    padding-bottom: 10px;
    line-height: 1.5;
}

.walkthrough-box::after {
content: "";
    background: #fff;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    position: absolute;
    left: 50%;
    top: -6px;
    margin-left: -15px;
    transform: rotate(45deg);
}


/* Tooltip
------------------------------------------------ */

.tooltip {
  background: #000;
  color: #fff;
  border-radius: 3px;
  padding:10px 15px;
  font-size: 13px;
  font-weight: 400;
  display: none;
  position: fixed;
  z-index: 100;
  opacity: 0.8;
  width: 150px;
  text-align: center;
}

.tooltip.active {
  display: inline-block;
}

.tooltip.big {
    background: #fff;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    opacity: 1;
    padding: 20px;
    color: #575e65;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
    text-align: center;
}

.tooltip::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #000;
  position: absolute;
  left: 50%;
  margin-left: -5px;
  bottom: -5px;
}


.tooltip.below::after {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top:none;
  border-bottom: 5px solid #000;
  left: 50%;
  margin-left: -5px;
  top: -5px;
}

.tooltip.hold-below {
  width: 300px;
}

.tooltip.hold-below::after {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top:none;
  border-bottom: 10px solid #fff;
  left: 50%;
  margin-left: -10px;
  top: -10px;
}

.tooltip.left::after {
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
  border-right:none;
  border-left: 5px solid #000;
  right: -5px;
  left: auto;
  margin-left: 0;
  margin-top: -5px;
  top: 50%;
}

.tooltip.right::after {
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
  border-left:none;
  border-right: 5px solid #000;
  left: -5px;
  right: auto;
  margin-left: 0;
  margin-top: -5px;
  top: 50%;
}

/* Mini Menu
------------------------------------------------ */

.mini-menu-overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 90;
  top: 0;
  display: none;
  left: 0;
}

.mini-menu-overlay.active {
  display: inline-block;
}

.mini-menu {
  position: fixed;
  display: none;
  background:#fff;
  box-shadow:0 2px 3px rgba(0,0,0,0.05);
  border-radius: 3px;
  padding: 5px 0;
  top:100px;
  left: 100px;
  z-index: 100;
  width: 200px;
  font-family: "Avenir W01", Arial, sans-serif;
}

.mini-menu.active {
  display: inline-block;
}

.mini-menu span {
    padding: 10px 15px;
    font-size: 14px;
    line-height: 1.5;
    display: inline-block;
    color: #6b7177;
}

.mini-menu#unfavorite ul {
    border-top: 1px solid #eee;
    padding-top: 4px;
}



.mini-menu ul {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 0;
}

.mini-menu li a {
  padding: 8px 15px;
  color: #535D63;
  width: 100%;
  display: inline-block;
  text-align: left;
  line-height: 20px;
}

.mini-menu .selected {
  border-left: 2px solid #00A7FF;
  padding-left: 13px;
  color: #00A7FF;
}

.mini-menu li a:hover {
  background: #00A7FF;
  color: #fff;
}

.mini-menu#unfavorite li a:hover {
  background: #e43131;
}

.mini-menu .break {
  display: inline-block;
  width: 100%;
  height: 1px;
  background: #eee;
  margin: 5px 0;
}


/* Snackbar
------------------------------------------------ */

.snackbar {
    position: fixed;
    bottom: -50px;
    line-height: 50px;
    height:50px;
    overflow: hidden; 
    left: 0;
    font-size: 15px;
    letter-spacing: 0.5px;
    background: #454a50;
    width: 100%;
    text-align: center;
    color: #fff;
    box-shadow: 0 0px 40px rgba(0,0,0,0.1);
    -webkit-transition: all 250ms cubic-bezier(0, 0.49, 0.4, 0.99);
    -moz-transition: all 250ms cubic-bezier(0, 0.49, 0.4, 0.99);
    transition: all 250ms cubic-bezier(0, 0.49, 0.4, 0.99);
    z-index: 300;}

.snackbar.active {
  bottom: 00px;
}

.snackbar .accept {
  border:1px solid #fff;
  color: #fff;
  border-radius:3px;
  padding: 5px 15px;
  margin-left: 10px; 
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}


/* Inline Loader
------------------------------------------------ */

.inline-loader, .inline-loader-generator {
  position: fixed;
  left: 50%;
  top: 28%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  transform: translateX(-50%);
  background: #fff url(../img/loading.svg) left 20px center no-repeat;
  background-size: 18px;
  line-height: 24px;
  min-width: 30px;
  min-height: 24px;
  font-size: 14px;
  z-index: 21;
  margin-top: -145px;
  letter-spacing: 0.4px;
  display: none;
  padding: 10px 25px 10px 55px;
  border-radius: 4px;
  box-shadow: 0 1px rgba(0,0,0,0.1);
}

#master-generator .inline-loader-generator {
  position: absolute;
  top: auto;
  bottom: 0px;
}

#master-generator .inline-loader-generator.active {
  display: inline-block;
}

#symbol-icon .inline-loader {
  margin-top: 0px;
}

#monogram .inline-loader, #symbol-container .inline-loader, #edit-slogan-font .inline-loader {
  margin-top: -40px;
}

#edit-font .inline-loader, #edit-slogan-font .inline-loader {
  margin-top: -45px;
}

#change-font .inline-loader {
  margin-top: 4px;
}

#layout-tab .inline-loader {
  margin-top: -82px;
}

#color-tab .inline-loader {
  margin-top: -50px;
}

#container-tab .inline-loader {
  margin-top: -50px;
}

@media screen and (max-width: 600px) {
  .inline-loader {
    width: 100%;
    border-radius: 0;
    z-index: 42;
    top: 0;
  }

  #master-generator .inline-loader-generator {
    width: 100%;
    border-radius: 0;
  }
  #symbol-icon .inline-loader {
    top: 206px;
  }
  #change-slogan-font .inline-loader {
    margin-top: 151px;
  }
  #change-font .inline-loader {
    margin-top: 210px;
  }
  #color-tab .inline-loader {
    margin-top: 155px;
  }
  #layout-tab .inline-loader {
    margin-top: 100px;
  }
  #container-tab .inline-loader {
    margin-top: 150px;
  }
}

/* Modals & Alerts
------------------------------------------------ */

.modal-outer, .modal-middle, .alert-outer, .alert-middle, .master-loading-middle {
  display: none;
  border-spacing: 30px;
}

.modal-outer.active, .alert-outer.active, .master-loading-outer.active {
    display: table;
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    z-index: 50;
}

.alert-outer.active {
  z-index: 151;
}

.master-loading-outer.active {
  z-index: 999999;
}

.modal-middle.active, .alert-middle.active, .master-loading-middle.active {
    display: table-cell;
    vertical-align: middle;
}

.modal, .alert, .master-loading {
    margin-left: auto;
    margin-right: auto; 
}

.modal-overlay, .alert-overlay, .master-loading-overlay {
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  position: fixed;
  z-index: 40;
  top: 0;
  left: 0;
  display: none;
}

.alert-overlay, .master-loading-overlay {
  z-index: 150;
}

.modal, .alert, .master-loading {
  min-width: 500px;
  min-height: 200px;
  background: #fff;
  border-radius: 4px;
  box-shadow:0 25px 50px rgba(0,0,0,0.25);
  position: relative;
  /* position: fixed;
  top:50%;
  left: 50%; */
  -webkit-transform:translate3d(0, 0, 0) scale(0.96);
  -moz-transform:translate3d(0, 0, 0) scale(0.96);
  transform:translate3d(0, 0, 0) scale(0.96);
  z-index: 21;
  overflow: hidden;
  -webkit-transition:all 200ms cubic-bezier(0, 1.11, 0.4, 1.2);
  -moz-transition:all 200ms cubic-bezier(0, 1.11, 0.4, 1.2);
  transition:all 200ms cubic-bezier(0, 1.11, 0.4, 1.2);
  display: none;
  opacity: 0;
  backface-visibility: hidden;
}

.modal {
  z-index: 60;
}


.modal-overlay.active, .alert-overylay.active, .master-loading-overlay.active {
  display: inline-block;
}

.modal.active, .alert.active, .master-loading.active {
  display: inline-block;
  opacity: 0;
}
.modal.pop, .alert.pop, .master-loading.pop {
  -webkit-transform:translate3d(0, 0, 0) scale(1);
  -moz-transform:translate3d(0, 0, 0) scale(1);
  transform:translate3d(0, 0, 0) scale(1);
  opacity: 1;
}

.modal.out, .alert.out, .master-loading.out {
  -webkit-transform: translate3d(0, 0, 0) scale(1.04);
  -moz-transform: translate3d(0, 0, 0) scale(1.04);
  transform: translate3d(0, 0, 0) scale(1.04);
  opacity: 0;
}

.modal .section {
  display: none;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

.modal .section.active {
  display: inline-block;
}

.modal .content {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  height: 100%;
}

.modal h5 {
  color: #585A5F;
}



/* Alert
------------------------------------ */

.alert {
  z-index: 200;
  width: 320px;
  min-width: inherit;
  min-height: inherit;
  text-align: center;
  left: 50%;
  margin-left: -160px;
}

.alert ul {
  border-top:1px solid #eee;
  white-space: nowrap;
}

.alert li {
  width: 50%;
  display: inline-block;
}

.alert p {
  font-size: 15px;
  font-weight: 500;
  padding: 20px 30px;
  line-height: 1.5;
  color: #414448;
}

.alert .sub {
    width: 100%;
    display: inline-block;
    font-weight: 200;
    font-size: 14px;
    color: #9098a0;
}

.alert a {
  font-size: 15px;
  font-weight: 500;
  color: #999;
  display: inline-block;
  width: 100%;
  padding: 15px 0;
  text-align: center;
}

.alert a:first-child {
  border-right: 1px solid #eee;
}

.alert a.highlighted {
  color: #EA2E61;
}

.alert a:hover {
  background: #f9f9f9;
}

.alert a:active {
  opacity: 0.2;
}


/* Modal Content
------------------------------------ */

.modal .subtop {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  font-size: 13px;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #eee;
  font-weight: 500;
}

.subtop h3 {
  font-size: 13px;
  line-height: 50px;
  letter-spacing: 0.2px;
  color: #5F6365;
}

.modal .subtop .back {
  position: absolute;
  left: 0;
  top: 0;
  line-height: 50px;
  padding: 0 20px;
  opacity: 0.3;
}

.modal .subtop .done {
  position: absolute;
  right: 0;
  top: 0;
  line-height: 50px;
  padding: 0 20px;
  font-weight: 700;
  color: #00A7FF;
}

.modal .content {
  text-align: left;
  padding: 20px;
}

.modal.default p {
  font-size: 15px;
  font-size: 15px;
  padding: 20px 30px 50px;
  line-height: 1.5;
  text-align: center;
}


/* Dark Loading
------------------------------------ */

.dark-loading {
  display: inline-block;
  width: 48px;
  height: 48px;
  background: url(../img/loading-big-dark.svg) center no-repeat;
  background-size: 48px;
}

.modal .dark-loading {
    position: absolute;
    left: 50%;
    margin-left: -24px;
    top: 50px;
}

.modal.has-loader {
  padding-top: 80px;
}

/* Master Loading
------------------------------------ */

.master-loading {
  z-index: 210;
  width: 50px;
  height: 50px;
  min-width: inherit;
  min-height: inherit;
  box-shadow: none;
  background: url(../img/loading-big-white.svg) center no-repeat;
  background-size: 48px;
  position: fixed;
  left: 50%;
  margin-left: -12px;
  top: 50%;
  margin-top: -12px;
}

.master-loading-overlay {
  background:rgba(0,0,0,0.7);
}

.master-loading .message {
    color: #fff;
    width: 100%;
    display: inline-block;
    font-size: 15px;
    font-weight: 500;
    padding-top: 20px;
    line-height: 1.5;
    text-shadow: 0 1px 7px rgba(0,0,0,0.5);
}

#spinner {
  position: fixed;
  left: 50%;
  margin-left: -9px;
  top: 50%;
  margin-top: -9px;
  z-index: 0;
}

.master-loading-middle #spinner {
  z-index: 500;
}

/* Tabs
------------------------------------ */

.tab-bar {
    width: 100%;
    height: 50px;
    color: #fff;
}

.tab-bar li {
  display: inline-block;
  width: auto !important;
  padding: 8px 10px;
}

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


.tab-bar li {
  padding: 8px 0 8px 10px;
}

}

.tab-bar a {
    font-size: 12.5px;
    font-weight: 500;
    line-height: 34px;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    height: 34px;
    color: #59606d;
    padding: 0 20px;
    letter-spacing: 0.4px;
    border-radius: 4px;
}

.tab-bar .invisible {
  display: none;
}

.tab-bar a:hover {
	color: #000;
  background:#f9f9f9;
}

.tab-bar a.active {
    opacity: 1;
    color: #fff;
    background: #007bff;
}

.tab-content {
  display: none;
  width: 100%;
  height: 100%;
}

.tab-content.active {
  display: inline-block;
}

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

  .tab-bar {
    width: 720px;
    display: inline-block;
    text-align: left;
  }

  .tab-bar a {
    padding: 0 15px;
  }

}


/* Main Wrappers
------------------------------------------------------- */

.main-wrapper {
	display: none;
	opacity: 1;
	transition: all 650ms cubic-bezier(0.24,-0.01, 0, 1);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	overflow: hidden;
	height: 100%;
	background:#f7f7f7;
}

.main-wrapper.left {
	opacity: 0;
  -webkit-transform: translateX(-20px);
  -moz-transform: translateX(-20px);
  transform: translateX(-20px);
}

.main-wrapper.right {
	opacity: 0;
  -webkit-transform: translateX(20px);
  -moz-transform: translateX(20px);
  transform: translateX(20px);
}

.main-wrapper.down {
	opacity: 0;
	height: 100%;
  -webkit-transform: scale(0.95);
  -moz-transform: scale(0.95);
  transform: scale(0.95);
}

.main-wrapper.up {
	opacity: 0;
	height: 100%;
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  transform: scale(1.05);
}

.main-wrapper.active {
	display: block;
	z-index: 20;
	overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

.main-wrapper .header {
  width: 100%;
  display: inline-block;
  text-align: center;
  padding: 110px 30px 60px;
  position: relative;
  background: #fff;
  border-bottom: 1px solid #eee;
  margin-bottom: 30px;
}

.main-wrapper .header h2 {
	padding-top: 20px;
}

.main-wrapper .header h1,.main-wrapper .header h2 {
	max-width: 800px;
	margin:0 auto;
}

#favorites .header h1 {
  padding-bottom: 0;
}


@media screen and (max-width:600px) {
  .main-wrapper .header {
    padding:70px 30px 20px;
    margin-bottom: 10px;
  }

.main-wrapper .header h2 {
  padding-top: 10px;
}
} 

/* Top bar
------------------------------------------------------- */

.top-bar, .sub-top {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	text-align: center;
	z-index: 30;
	height: 50px;
	transition: all 200ms ease-in-out;
	background:#fff;
	border: none;
	box-shadow: 0 0 1px rgba(0,0,0,0.2);
}

.top-bar {
  background: #363e44;
}

.top-bar .page-specific {
    display: none;
    float: right;
}

.top-bar .page-specific.active {
	display: inline-block;
	opacity: 0;
}

.top-bar .page-specific.visible {
	opacity: 1;
}

.logo {
	background: url(../img/logojoy-logo-white.png) no-repeat;
	background-size: 90px;
	width: 90px;
	height: 20px;
	display: inline-block;
	position: absolute;
	top: 50%;
	margin-top: -10px;
	left: 50%;
	margin-left: -45px;
}

.back-arrow {
	background: url(../img/back-arrow-white@2x.png) center no-repeat;
	background-size: 16px;
	display: inline-block;
	width: 80px;
	height: 50px;
  display: none;
}

.back-arrow.visible {
  display: inline-block;
}

.back-arrow:hover {
	background-color:#44494e;
}

.header .back-arrow {
	position: absolute;
	top: 50%;
	left: 20px;
	margin-top: -30px;
}

.top-bar .back-arrow {
	position: absolute;
	left: 60px;
	top: 0px;
}


.get-logo.button {
  float:right;
  text-transform: none;
  letter-spacing: 0.2px;
  font-weight: 500;
  font-size: 13px;
  color: #fff;
  height: 50px;
  line-height: 50px;
  padding: 0 40px;
  border-radius: 0;
}

.top-bar .primary-button {
  float:right;
  text-transform: none;
  letter-spacing: 0.2px;
  font-weight: 500;
  font-size: 13px;
  color: #fff;
  height: 50px;
  line-height: 50px;
  padding: 0 40px;
  border-radius: 0;
}

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

  .in-logo .top-bar .logo {
    display: none;
  }

  .get-logo.button {
    padding: 0 30px;
  }

}

/* Sub top
------------------------------------------------------- */


.sub-top {
	top: 50px;
	z-index: 29;
	height: 50px;
	padding: 0;
}

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

  .sub-top {
    overflow:scroll;
    -webkit-overflow-scrolling: touch;
  }

}
/* Bottom bar
------------------------------------------------------- */

.bottom-bar {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 15px;
	text-align: center;
	background: #fff;
	box-shadow: 0 0 1px rgba(0,0,0,0.2);
	z-index: 10;
}

.progress-outer {
  width: 250px;
  height: 6px;
  background: #ccc;
  border-radius: 10px;
  display: inline-block;
  margin:21px auto;
  position: relative;
}

.progress-inner {
  position: absolute;
  background: #1485FF;
  height: 6px;
  width: 0;
  left: 0;
  top: 0;
  transition: all 200ms ease-in-out;
}

/* Walthrough: Inspiration
------------------------------------------------------- */

#inspiration .container {
  padding-bottom: 150px;
  text-align: center;
}

.selection-box {
	display: inline-block;
	width:300px;
	height: 225px;
	margin:15px;
	cursor: pointer
}

.selection-box:hover {
	z-index: 2;
}

.selection-box.selected {
	box-shadow: none !important;
  transition: all 150ms cubic-bezier(0.32, 0.01, 0, 1.43);
  -webkit-transform: none !important;
  -moz-transform: none !important;
  transform: none !important;
}

.selection-box.selected .atv-card-layers {
    box-shadow: 0 0 0 4px #3797ff;
}
.selection-box.selected .atv-card-shadow {
	display: none;
}
.selection-box.selected .atv-card-shine {
	display: none;
}

.selection-box img {
	width: 100%;
}


@media screen and (max-width: 600px) {
  .selection-box {
    width: 160px;
    height: 120px;
    margin:8px;
  }
}

/* Walthrough: Colors
------------------------------------------------------- */

.main-wrapper#colors {
	padding-bottom: 200px;
}

#colors .container {
  text-align: center;
}

.logo-colors .shade {
	width: 33%;
	background-color: #fff;
	display: inline-block;
	height: 33%;
	float: left;
}

.logo-colors .shade:nth-child(1) {opacity: 0.8; height: 34%; width: 34%;}
.logo-colors .shade:nth-child(2) {opacity: 0.7; height: 34%;}
.logo-colors .shade:nth-child(3) {opacity: 0.6; height: 34%;}
.logo-colors .shade:nth-child(4) {opacity: 0.5; width: 34%;}
.logo-colors .shade:nth-child(5) {opacity: 0.4;}
.logo-colors .shade:nth-child(6) {opacity: 0.3;}
.logo-colors .shade:nth-child(7) {opacity: 0.2; width: 34%;}
.logo-colors .shade:nth-child(8) {opacity: 0.1;}
.logo-colors .shade:nth-child(9) {opacity: 0;}

/* Walthrough: Company info
------------------------------------------------------- */

.main-wrapper.company-info {
  padding-bottom: 150px;
}

.company-info form {
  width: 100%;
  max-width:400px;
  margin: 0 auto;
  padding-top: 40px;
}

label span.warning {
font-size: 13px;
    color: #f19f00;
    padding-top: 7px;
    display: inline-block;
    padding-left: 15px;
    line-height: 1.4;
    font-weight: 300;
}

.main-wrapper.symbol-selection {
  padding-bottom: 100px;
}

.symbol-finder {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    border-radius: 4px;
    margin-top: 8px;
    max-width: 562px;
}

.symbol-finder h2 {
    padding:20px;
    background:#f9f9f9;
}

.symbol-finder h2 span {
    line-height: 1.5;
    font-size: 15px;
    width: 100%;
    padding-top: 10px;
    display: inline-block;
    font-weight: 500;
}

.symbol-finder input.search {
background: #1485FF;
    width: 100px;
    font-size: 12px;
    position: absolute;
    right: 7px;
    line-height: 32px;
    height: 32px;
    padding: 0;
    border-radius: 3px;
    top: 7px;
    border: none;
    text-align: center;
}

.symbol-finder .favorite-symbol {
    width: 50px;
    height: 50px;
    border: 2px dashed #ccd1d6;
    display: inline-block;
    margin: 0 5px;
    border-radius: 12px;
    transition: all 300ms ease-out;
    transform: scale(0.8);
}

.symbol-finder .favorite-symbol.filled {
  background:#fff;
  border: none;
  box-shadow:0 1px 2px rgba(0,0,0,0.15);
  transform:scale(1) translateY(-5px);
  padding:5px;
  vertical-align: top;
}

.favorite-symbol-img {
  width: 38px;
}

.favorite-symbol-img-chosen:hover {
  cursor: pointer;
  opacity: 0.2;
}

.favorite-symbol-img.fixed {
  position: fixed;
  z-index: 100;
  transition: all 300ms ease-in-out;
}

.symbol-finder form {
  padding-top: 0;
}

.symbol-finder form label {
  margin-bottom: 0;
}


.helper-onboarding {
  width: 100%;
  display: inline-block;
}

.helper-onboarding .marquee {
  padding:8px 0;
}


.symbol-finder-results {
    height: 205px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    margin-top: 15px;
    border: 1px solid #eee;
    border-radius: 3px;
}

.symbol-finder-results img {
  margin:9px;
}

.symbol-finder-results img:hover {
  opacity: 0.5;
  cursor: pointer;
}

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

  .company-info form {
    padding:20px 30px 0;
  }

  .symbol-finder {
    width: 100%;
    border: none;
    margin-top: 0;
  }

  #symbol-selection .header {
    margin-bottom: 0;
  }


}


/* Logo Generation
-------------------------------------- */

#master-generator {
  	padding-bottom: 500px;
  	text-align: left;
}

#master-generator .header {
    background: none;
    border: 0;
    padding: 0;
    top: 30%;
    position: absolute;
    margin-top: -150px;
}

#master-generator .logo-container-slider {
  margin-top: -175px;
}

#master-generator .arrow-keys {
    top: 72%;
    margin-top: 50px;
}

#master-generator .arrow-keys .fav {
    width: 130px;
    background: #fff url(../img/favorite-filled@2x.png) center no-repeat;
    background-size: 18px;
}

#master-generator .arrow-keys .fav:active {
    opacity: 0.2;
}

#master-generator .arrow-keys .fav.active {
    width: 130px;
    background: #fff url(../img/heart-white@2x.png) center no-repeat;
    background-size: 18px;
}

.generator-button {
    width: 470px;
    height: 395px;
    border-radius: 2px;
    color: #2392ec;  
  }

.logo-container {
	width: 470px;
	margin:15px;
	height: 395px;
	display: inline-block;
	vertical-align: top;
	cursor: pointer;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.07);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
	text-align: left;
  position: relative;
}

.logo-container-placeholder {
	width: 470px;
	margin:15px;
	display: inline-block;
	height: 395px;
	text-align: left;
}

.logo-container .atv-card-layers {
	width: 100%;
	padding:60px;
	height: 395px;
	display: inline-block;
	background:#fff;
  text-align: center;
}

.logo-container.favorite .atv-card-layers {
    background-image:url(../img/heart-big-filled-dark@2x.png);
    background-position:top 20px right 20px;
    background-repeat:no-repeat;
    background-size: 36px;
}

.logo-container.favorite.dark-bg .atv-card-layers {
    background-image:url(../img/heart-big-filled-white@2x.png);
    background-position: top 20px right 20px;
    background-repeat:no-repeat;
    background-size: 36px;
}

.logo-container.not-visible {
	opacity: 0;
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  transform: scale(1.1);
}

.logo-container.visible {
    transition: all 1000ms cubic-bezier(0, 0.5, 0.21, 0.99);
	opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
}

.logo-container:hover {
	box-shadow: 0 20px 50px rgba(0,0,0,0.1);
	z-index: 8;
}

.logo-option {
	display: inline-block;
	height: 100%;
	width: 360px;
	position: relative;
}

.favorite-button {
    position: fixed;
    width: 200px;
    text-align: center;
    display: inline-block;
    font-size: 17px;
    padding: 15px;
    border-radius: 30px;
    color: #000;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    border: 1px solid #fff;
    display: none;
    z-index: 100;
}

.favorite-button.active {
  display: inline-block;
}

.tip-click {
	position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    text-align: center;
    color: #444;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.5px;
    opacity: 0;
    transition: all 200ms ease-in-out;
}

.dark-bg .tip-click {
	color: #fff;
}

.favorite-icon {
	background-image:url(../img/heart-big-outline-dark@2x.png);
	background-size: 36px;
	width: 36px;
	height: 30px;
	display: none;
	position: absolute;
	right: 20px;
	bottom: 20px;
	z-index: 3;
	opacity: 0;
}

.dark-bg .favorite-icon {
	background-image:url(../img/heart-big-outline-white@2x.png);
}

.favorite-icon.active {
	background-image:url(../img/heart-big-filled-dark@2x.png);
}

.dark-bg .favorite-icon.active {
	background-image:url(../img/heart-big-filled-white@2x.png);
}

.logo-container:hover .tip-click, .logo-container:hover .favorite-icon {
	opacity: 0;
}

.svg-placeholders {
	display: inline-block;
  opacity: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

svg {
	display: block;
	vertical-align: top;
}

.generate-more-container {
    display: inline-block;
    width: 100%;
    padding: 50px;
    text-align: center;
    position: relative;
    height: 200px;
}

.generate-more-container #spinner {
  position: absolute;
}

.top-bar .icon-button {
	float: right;
    opacity: 1;
    padding: 0;
    width: 60px;
    height: 50px;
    position: relative;
    border:none;
}

.button.favorites {
	background: url(../img/heart-big-filled-white@2x.png) center no-repeat;
	background-size: 19px;
}

.button.favorites .count {
    position: absolute;
    width: 18px;
    height: 18px;
    line-height: 18px;
    background: #ff1a5f;
    border-radius: 20px;
    color: #fff;
    font-size: 10px;
    top: 10px;
    right: 12px;
}

.top-bar .hamburger {
  background: url(../img/hamburger@2x.png) center no-repeat;
  background-size: 18px;
  box-shadow: 1px 0 0 rgba(255,255,255,0.1);
  float: left;
}

.top-bar .icon-button:active {
  background-color: #111;
}

.logo-container .purchased-tag {
    background: #56c744;
    display: inline-block;
    font-size: 11px;
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 2;
    padding: 10px 20px;
    border-radius: 3px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.purchased .favorite-icon {
  display: none !important;
}

@media screen and (max-width: 600px) {
  #master-generator .logo-container-slider {
    margin-top: -90px;
  }

  #master-generator {
      text-align: center;
  }

  #master-generator .header {
    left: 0;
    margin-top: -65px;
  }
  .top-bar .icon-button {
    width: 50px;
  }

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

  .logo-container {
    width: 280px;
    height: 225px;
    margin: 15px;
    margin-bottom: 0;
  }

  .logo-container-placeholder {
    width: 280px;
    margin:15px;
    margin-bottom: 0;
    height: 225px;
  }
  .logo-option {
    transform: scale(0.6);
    margin-left: -33px;
    margin-top: -17px;
    width: 310px;
  }
  
  .logo-container-slider .logo-container, #logo-presentation .logo-container-slider .logo-container {
    margin-right: 20px !important;
  }


  .logo-container .atv-card-layers {
    padding: 0;
    height: 225px;
  }

  .logo-container.favorite.dark-bg .atv-card-layers {
    background-position: top 10px right 10px;
    background-size: 20px;
  }

  .generator-button {
    width: 280px;
    height: 225px;
  }

}

/* Logo Presentation
------------------------------------------------------- */

#logo-presentation {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background:#f7f7f7;
	height: 100%;
}

.top-bar #share-favorite {
	float: right;
}

.top-bar .share:hover, .top-bar .favorite:hover {
	opacity: 1;
}

.top-bar .share:active, .top-bar .favorite:active {
	opacity: 0.3;
}

.button.share {
	background: url(../img/share@2x.png) center no-repeat;
	background-size: 20px;
}

.button.favorite {
  background:url(../img/favorite-outline@2x.png) center no-repeat;
  background-size: 19px;
}

.button.duplicate {
  background:url(../img/duplicate@2x.png) center no-repeat;
  background-size: 18px;
}

.button.favorite.active {
	background:url(../img/heart-big-filled-white@2x.png) center no-repeat;
	background-size: 18px;
    border-color: #F86C96;
    opacity: 1;
}

.button.favorite.active:hover {
  opacity: 0.5;
}

.logo-container:active {
  -webkit-transform: none !important;
  -moz-transform: none !important;
  transform: none !important;
}

.logo-container.fixed {
    position: fixed;
    z-index: 25;
    transition: all 500ms cubic-bezier(0.58, 0, 0.24, 0.98);
    box-shadow: none !important;
}

/*
.logo-container.large .logo-option {
	transform: scale(1.3) !important;
}
*/

.logo-container.fixed .atv-card-layers, #logo-presentation .logo-container .atv-card-layers, #logo-presentation .logo-container {
	box-shadow: none !important;
}


.logo-container.fixed .tip-click, #logo-presentation .logo-container .tip-click {
	opacity: 0 !important;
}

.atv-card-shadow {
    transition: all 500ms cubic-bezier(0.58, 0, 0.24, 0.98);
}

#logo-presentation .logo-contianer .atv-card-shadow {
	box-shadow: none;
}

#preview-tab .logo-container {
	position: relative;
  transition: all 500ms cubic-bezier(0.58, 0, 0.24, 0.98);
  -webkit-transform:scale(1);
  -moz-transform:scale(1);
  transform:scale(1);
  left: 0 !important;
  top: 0;
  margin: 0 0 20px 0 !important;
  width: 100% !important;
  max-width: 1040px;
}

.logo-container.disabled, #preview-tab .logo-container {
  cursor: default;
  -webkit-transform: none !important;
  -moz-transform: none !important;
  transform: none !important;
}


/* Share modal
------------------------------- */

.modal#share {
  text-align: center;
}

.modal#share .invite-options {
  padding: 10px 30px;
  margin-top: 20px;
  border-top: 1px solid #eee;
  max-width: 100%;
}

.modal#share p {
  padding-bottom: 0;
}

.modal#share form {
  padding-top: 20px;
  padding-bottom: 10px;
}

.modal#share input {
  text-align: center;
}


/* Real life previews
------------------------------- */

.tab-content.no-top-bar {
  padding-top: 70px !important;
}

.preview-box {
  width:100%;
  height: 346px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: 20px;
  position: relative;
  opacity: 0;
  transition: opacity 200ms ease-in-out;
  position: relative;
}

.previews.active .preview-box {
  opacity: 1;
}

.preview-box .atv-card-layers {
  background: none;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 275px;
    width:360px;
    padding:0;
}

.previews {
    padding-top: 20px;
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding-top: 415px;
}

.previews.active {
  padding-top: 20px;
}

.preview-box-container-half {
  width:50%;
  display: inline-block;
}

.preview-box-container-half.padding-left {
  padding-left: 20px;
}

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

  .preview-box {
    margin-bottom: 0;
  }

  .previews.active .logo-option {
    transform: scale(1) !important;
  }

  .previews.active {
    padding-top: 0;
  }

  .preview-box-container-half {
    width:100%;
    overflow:hidden;
    display: inline-block;
  }

  .preview-box-container-half.padding-left {
    padding-left: 0px;
  }

}

.preview-box .logo-container {
    perspective: 450px;
    height: 395px;
    perspective-origin: center;
}

.preview-box.business-card {
  background-image:url(../img/previews/business-card@2x.jpg);
  background-size: 520px;
}

.preview-box.letterhead {
  background-image:url(../img/previews/letterhead@2x.jpg);
  background-size: 520px;
}

.preview-box.envelope {
  background-image:url(../img/previews/envelope@2x.jpg);
  background-size: 520px;
}

.preview-box.box2 {
  background-image:url(../img/previews/box2@2x.jpg);
  background-size: 520px;
}

.preview-box.building {
  background-image:url(../img/previews/building@2x.jpg);
  background-size: 1060px;
  height: 640px;
}

.preview-box.iphone {
  background-image:url(../img/previews/iphone@2x.jpg);
  background-size: 520px;
}

.preview-box.shirt {
  background-image:url(../img/previews/shirt@2x.jpg);
  background-size:520px ;
}

.preview-box.box {
  background-image:url(../img/previews/box@2x.jpg);
  background-size:520px ;
}

.preview-box.window {
  background-image:url(../img/previews/window@2x.jpg);
  background-size: 1060px;
  height: 640px;
}

.preview-box.business-card .atv-card-layers {
    -webkit-transform: translate(-152px, -143.5px) rotateX(12deg) rotateY(3deg) skewX(2deg) skewY(-3deg) rotateZ(-13.5deg) scale(0.6);
    -moz-transform: translate(-152px, -143.5px) rotateX(12deg) rotateY(3deg) skewX(2deg) skewY(-3deg) rotateZ(-13.5deg) scale(0.6);
    transform: translate(-152px, -143.5px) rotateX(12deg) rotateY(3deg) skewX(2deg) skewY(-3deg) rotateZ(-13.5deg) scale(0.6);
}

.preview-box.letterhead .atv-card-layers {
    -webkit-transform: translate(-245px, -236.5px) rotateZ(-26.5deg) skewX(37deg) scale(.6) scaleX(1.2);
    -moz-transform: translate(-245px, -236.5px) rotateZ(-26.5deg) skewX(37deg) scale(.6) scaleX(1.2);
    transform: translate(-245px, -236.5px) rotateZ(-26.5deg) skewX(37deg) scale(.6) scaleX(1.2);
}

.preview-box.envelope .atv-card-layers {
    -webkit-transform: translate(-89px, -127.5px) rotateZ(-26deg) skewX(38deg) scale(0.4) scaleX(1.2);
    -moz-transform: translate(-89px, -127.5px) rotateZ(-26deg) skewX(38deg) scale(0.4) scaleX(1.2);
    transform: translate(-89px, -127.5px) rotateZ(-26deg) skewX(38deg) scale(0.4) scaleX(1.2);
}

.preview-box.box2 .atv-card-layers {
    -webkit-transform: translate(-79px, -219.5px) rotateZ(-26deg) skewX(38deg) scale(0.4) scaleX(1.2);
    -moz-transform: translate(-79px, -219.5px) rotateZ(-26deg) skewX(38deg) scale(0.4) scaleX(1.2);
    transform: translate(-79px, -219.5px) rotateZ(-26deg) skewX(38deg) scale(0.4) scaleX(1.2);
}

.preview-box.building .logo-container, .preview-box.window .logo-container {
    height: 640px;
}

.preview-box.building .atv-card-layers {
    width:340px !important;
    -webkit-transform: translate(-185px, -136.5px) rotateY(15deg) scale(1.2);
    -moz-transform: translate(-185px, -136.5px) rotateY(15deg) scale(1.2);
    transform: translate(-185px, -136.5px) rotateY(15deg) scale(1.2);
}

.preview-box.iphone .atv-card-layers {
    -webkit-transform: translate(-97px, -203.5px) rotateX(10deg) rotateZ(21deg) skewX(-3deg) scale(0.35);
    -moz-transform: translate(-97px, -203.5px) rotateX(10deg) rotateZ(21deg) skewX(-3deg) scale(0.35);
    transform: translate(-97px, -203.5px) rotateX(10deg) rotateZ(21deg) skewX(-3deg) scale(0.35);
}

.preview-box.shirt .atv-card-layers {
    -webkit-transform: translate(-170px, -132.5px) rotateZ(-29deg) rotateX(15deg) rotateY(5deg) skewX(30deg) scale(0.75);
    -moz-transform: translate(-170px, -132.5px) rotateZ(-29deg) rotateX(15deg) rotateY(5deg) skewX(30deg) scale(0.75);
    transform: translate(-170px, -132.5px) rotateZ(-29deg) rotateX(15deg) rotateY(5deg) skewX(30deg) scale(0.75);
}

.preview-box.box .atv-card-layers {
    -webkit-transform: translate(-177px, -202.5px) rotateZ(27deg) skewX(-40deg) scale(0.4) scaleX(1.4);
    -moz-transform: translate(-177px, -202.5px) rotateZ(27deg) skewX(-40deg) scale(0.4) scaleX(1.4);
    transform: translate(-177px, -202.5px) rotateZ(27deg) skewX(-40deg) scale(0.4) scaleX(1.4);
}

.preview-box.window .atv-card-layers {
  background: none !important;
  -webkit-transform: translate(-160px, -50%) rotateX(2deg) rotateY(20deg) scale(1.9) scaleX(1.2);
  -moz-transform: translate(-160px, -50%) rotateX(2deg) rotateY(20deg) scale(1.9) scaleX(1.2);
  transform: translate(-160px, -50%) rotateX(2deg) rotateY(20deg) scale(1.9) scaleX(1.2);
}

.preview-box.window .logo-container {
  position: absolute !important;
}

.preview-box.window .reflection .atv-card-layers {
    opacity: 0.1;
    -webkit-transform: translate(-185px, -50%) rotateX(2deg) rotateY(20deg) scale(1.8) scaleX(1.2);
    -moz-transform: translate(-185px, -50%) rotateX(2deg) rotateY(20deg) scale(1.8) scaleX(1.2);
    transform: translate(-185px, -50%) rotateX(2deg) rotateY(20deg) scale(1.8) scaleX(1.2);
    filter: blur(1px);
}

.preview-box.white-bg-preview-wrapper, .preview-box.dark-bg-preview {
  background: #fff;
  height: 395px;
}

#preview-tab .preview-box .logo-container.shadow {
  position: absolute !important;
  left: -3px !important;
  opacity: .3;
  filter: blur(2px);
  z-index: 0;
  top: 0 !important;
}

.preview-box.dark-bg-preview .atv-card-layers, .preview-box.white-bg-preview-wrapper .atv-card-layers {
  width: 100%;
  height: 100%;
  position: relative;
  left: 0;
  top: 0;
}

.preview-box.dark-bg-preview .logo-option, .preview-box.white-bg-preview-wrapper .logo-option {
  height: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -180px;
  margin-top: -150px;
}


.realism {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.7;
}

.preview-box.business-card .realism {
  background:url(../img/previews/business-card-realism@2x.png) no-repeat center;
  background-size: 377px;
  background-position: 70px 60px;
}

.preview-box.letterhead .realism {
  background:url(../img/previews/letterhead-realism@2x.png) no-repeat center;
  background-size: 379px;
  background-position: 0px -30px;
}

.preview-box.envelope .realism {
  background:url(../img/previews/envelope-realism@2x.png) no-repeat center;
  background-size: 445px;
  background-position: 120px 80px;
}

.preview-box.iphone .realism {
  background:url(../img/previews/iphone-realism@2x.png) no-repeat center;
  background-size: 223px;
  background-position: 240px 40px;
}

.preview-box.building .realism {
  background:url(../img/previews/building-realism@2x.png) no-repeat center;
  background-size: 451px;
  background-position: 280px 70px;
}

.preview-box.box2 .realism {
  background:url(../img/previews/box2-realism@2x.png) no-repeat center;
  background-size: 349px;
  background-position: 140px 5px;
}

.preview-box.box .realism {
  background:url(../img/previews/box-realism@2x.png) no-repeat center;
  background-size: 337px;
  background-position: 30px 30px;
}


/* Options panel
------------------------------- */

.options-panel, .sub-options-panel {
    position: fixed;
    top: 100px;
    width: 100%;
    padding: 15px;
    text-align: center;
    z-index: 28;
    transition: all 200ms ease-in-out;
    background: #fff;
    box-shadow: 0 1px rgba(0,0,0,0.05);
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

.option-scroller {
	position: absolute;
	display: inline-block;
}

.option-scroller.relative {
	position: relative;
}

.options-panel .option, .sub-options-panel .option {
	display: inline-block;
	width: 260px;
	padding: 20px 30px;
	margin-right: 15px;
	opacity: 0.4;
	border-radius: 5px;
	font-size: 14px;
	color: #858A90;
	text-align: left;
	height: 120px;
	border:1px solid #fff;
	vertical-align: top;
	cursor: pointer;
}

.options-panel .option.active, .options-panel .option:hover {
	opacity: 1;
}

.options-panel .option p {
	padding-top: 5px;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.5
}

#logo-presentation .tab-content {
  position: relative;
  text-align: center;
}


#preview-tab {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  padding:120px 20px 0;
}

.arrow-keys {
	position: fixed;
	bottom: 20px;
	left: 50%;
	margin-left: -75px;
	width: 150px;
	padding-top: 40px;
	text-align: center;
  z-index: 10;
}

.arrow-key {
  width: 50px;
  height: 34px;
  display: inline-block;
  background: #fff url(../img/arrow-key-left@2x.png) center no-repeat;
  background-size: 9px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.1);
  border-radius: 3px;
  margin: 0 5px;
}

.arrow-key.right {
  background-image: url(../img/arrow-key-right@2x.png);
}

.arrow-key.right:hover {
  background-image: url(../img/arrow-key-right-h@2x.png);
}

.arrow-key.left:hover {
  background-image: url(../img/arrow-key-left-h@2x.png);
}

.arrow-keys.active {
	opacity: 1;
}

.arrow-keys span {
	font-size: 12px;
	font-weight: 300;
	color: #000;
	opacity: 0.4;
  padding-top: 5px;
  display: inline-block;
}

.logo-container-slider #spinner {
  margin-top: 70px;
  display: none;
}

.logo-container-slider #spinner.active {
  display: inline-block;
}

@media screen and (max-width: 600px) {
  #preview-tab {
    padding: 100px 0 0;
  }
  .arrow-keys {
    display: none;
  }
}

/* Options: fonts
------------------------------- */

.tab-content .sub-top {
  top: 100px;
}

.option-scroller {
  width: 100%;
}

#edit-font .option-scroller, #edit-slogan-font .option-scroller {
  width: 1100px !important;
}

#edit-font .logo-container, #edit-slogan-font .logo-container {
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: -240px;
  margin-top: -75px;
}

.option-scroller .input-wrapper {
  width: 150px;
  border-bottom: none;
  padding-bottom: 5px;
}

.option-scroller .toggles {
  padding-bottom: 5px;
}

.option-scroller input[type="checkbox"].switch {
  position: relative;
  top: auto;
  right: auto;

}

#font-tab .options-panel {
  top: 150px;
  padding: 5px;
}

#font-tab .input-size-picker {
  float: none;
}


#font-tab .options-panel.font-options {
    width: 240px;
    padding-left: 80px;
    background: #fff url(../img/font-options@2x.png) left 35px center no-repeat;
    background-size: 20px;
    font-size: 14px;
    height: 80px;
    left: 10px;
    margin-left: 0;
    -webkit-transform: none;
    -moz-transform: none;
    transform: none;
    text-align: left;
    padding-top: 24px;
    cursor: pointer;
    color: #222;
}

#font-tab .empty {
  margin-top: 60px;
}

#font-tab .options-panel.font-options:hover h3 {
    color: #2188FB;
}

#font-tab .options-panel.font-options h3 {
    font-weight: 500;
    font-size: 16px;
    padding-bottom: 3px;
}
#font-tab .options-panel.font-options>span {
    color: #2188FB;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.3px;
}

.logo-container-slider {
    position: absolute;
    top: 50%;
    padding-left: 25px;
    left: 0;
    margin-top: -95px;
    text-align: left;
}

.logo-container-slider .logo-container, #logo-presentation .logo-container-slider .logo-container {
	position: relative;
	margin:0;
	margin-right: 50px;
	top: auto;
	left: auto;
}

.option.font-type {
	display: inline-block;
	height: 50px;
	margin-right: 15px;
	opacity: 1;
}

.option.font-type.sans-serif {
	background: url(../img/font-types/sans-serif@2x.png) bottom 16px center no-repeat;
	background-size: 111px;
	width: 161px;
}

.option.font-type.serif {
	background: url(../img/font-types/serif@2x.png) bottom 14px center no-repeat;
	background-size: 54px;
	width: 114px;
}

.option.font-type.vintage {
	background: url(../img/font-types/vintage@2x.png) bottom 14px center no-repeat;
	background-size: 61px;
	width: 121px;
}

.option.font-type.handwritten {
	background: url(../img/font-types/handwritten@2x.png) bottom 14px center no-repeat;
	background-size: 137px;
	width: 187px;
}

.option.font-type.modern {
	background: url(../img/font-types/modern@2x.png) bottom 14px center no-repeat;
	background-size: 86px;
	width: 136px;
}

.option.font-type.slab {
	background: url(../img/font-types/slab@2x.png) bottom 14px center no-repeat;
	background-size: 46px;
	width: 96px;
}

.option.font-type.funky {
	background: url(../img/font-types/funky@2x.png) bottom 8px center no-repeat;
	background-size: 72px;
	width: 122px;
}

.option.font-type.calligraphic {
	background: url(../img/font-types/calligraphic@2x.png) bottom 7px center no-repeat;
	background-size: 137px;
	width: 187px;
}

.option.font-type.bubbly {
	background: url(../img/font-types/bubbly@2x.png) bottom 9px center no-repeat;
	background-size: 83px;
	width: 133px;
}

.option.font-type.futuristic {
	background: url(../img/font-types/futuristic@2x.png) bottom 15px center no-repeat;
	background-size: 148px;
	width: 198px;
}

.option.font-type.elegant {
	background: url(../img/font-types/elegant@2x.png) bottom 15px center no-repeat;
	background-size: 123px;
	width: 173px;
}

/* Hover states */

.option.font-type.sans-serif:hover, .option.font-type.sans-serif.active {
	background-image: url(../img/font-types/sans-serif-h@2x.png);
}

.option.font-type.serif:hover, .option.font-type.serif.active {
	background-image: url(../img/font-types/serif-h@2x.png);
}

.option.font-type.vintage:hover, .option.font-type.vintage.active {
	background-image: url(../img/font-types/vintage-h@2x.png);
}

.option.font-type.handwritten:hover, .option.font-type.handwritten.active {
	background-image: url(../img/font-types/handwritten-h@2x.png);
}

.option.font-type.modern:hover, .option.font-type.modern.active {
	background-image: url(../img/font-types/modern-h@2x.png);
}

.option.font-type.slab:hover, .option.font-type.slab.active {
	background-image: url(../img/font-types/slab-h@2x.png);
}

.option.font-type.funky:hover, .option.font-type.funky.active {
	background-image: url(../img/font-types/funky-h@2x.png);
}

.option.font-type.calligraphic:hover, .option.font-type.calligraphic.active {
	background-image: url(../img/font-types/calligraphic-h@2x.png);
}

.option.font-type.bubbly:hover, .option.font-type.bubbly.active {
	background-image: url(../img/font-types/bubbly-h@2x.png);
}

.option.font-type.futuristic:hover, .option.font-type.futuristic.active {
	background-image: url(../img/font-types/futuristic-h@2x.png);
}

.option.font-type.elegant:hover, .option.font-type.elegant.active {
	background-image: url(../img/font-types/elegant-h@2x.png);
}


#logo-presentation .logo-container-slider .logo-container:hover .tip-click {
	opacity: 1 !important;
}


#logo-presentation .logo-container-slider .logo-container {
	transition: all 0.2s ease-out;
}

.font-option-preview .tip-click {
  display: none;
}

#edit-font .logo-container-slider, #edit-slogan-font .logo-container-slider {
  margin-top: -75px;
}

#change-font .logo-container-slider {
  margin-top: -120px;
}

#change-slogan-font .logo-container-slider, #color-tab .logo-container-slider {
  margin-top: -140px;
}


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

  .logo-container-slider{
    padding-left: 11px;
  }

#edit-font .logo-container, #edit-slogan-font .logo-container {
  margin-left: -140px;
  margin-top: 10px;
}
  #edit-font .option-scroller, #edit-slogan-font .option-scroller {
    text-align: left;
  }
  #change-font .logo-container-slider {
    margin-top: -10px;
  }
  #edit-font .logo-container-slider, #edit-slogan-font .logo-container-slider {
    margin-top: -35px;
  }
  #change-slogan .logo-container-slider, #color-tab .logo-container-slider {
    margin-top: -85px;
  }

  #change-slogan-font .logo-container-slider, #color-tab .logo-container-slider {
    margin-top: -30px;
  }

}

/* Swiper
------------------------------------------------ */

.swiper-outer-wrapper .swiper1, .swiper-outer-wrapper .swiper2 {
    width: 100%;
    height: 100%;
    margin: 20px auto;
    top: 0;
    margin-top: 0;
    position: fixed;
}

.swiper-outer-wrapper .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.swiper-outer-wrapper .logo-container-placeholder.swiper-slide {
  margin:0 50px 0 0;
}

/* Symbol Icons
------------------------------------------------ */

#symbol-icon .options-panel {
  top:200px !important;
}

#symbol-icon .options-panel.search {
  top:150px !important;
}

input.search {
    max-width: 250px;
    background: #f2f2f3;
    border: none;
    border-radius: 30px;
    margin-bottom: 5px;
}

#symbol-icon .options-panel .option, #symbol-icon .sub-options-panel .option {
  width: 50px;
  background-repeat: no-repeat;
  background-size: 30px;
  background-position: center;
  height: 45px;
  display: inline-block;
  opacity: 1;
}


.icon-search-helper {
    opacity: 1;
    color: #575e65;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
    position: fixed;
    left: 0;
    width: 100%;
    top: 205px;
    z-index: 40;
}

.icon-search-helper .scroll-container {
  width: 100%;
  overflow:hidden;
}

.icon-search-helper .scroller {
  width: 700px;
  padding:20px;
  overflow:hidden;
}


/* Marquee
------------------------------------------------ */

.marquee {
    width: 100%;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}

.marquee span {
  padding: 0 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.marquee span.all-items {
    display: inline-block;
    padding-left: 100%;
    text-indent: 0;
    animation: marquee 60s linear infinite;
    -webkit-animation: marquee 60s linear infinite;
}
@media screen and (min-width: 600px) {

  .marquee span.all-items:hover {
      animation-play-state: paused
      -webkit-animation-play-state: paused
  }

}

/* Make it move */
@keyframes marquee {
    0%   { 
      transform: translate(0, 0); 
      -webkit-transform: translate(0, 0); 
    }
    100% { 
      transform: translate(-100%, 0); 
      -webkit-transform: translate(-100%, 0); 
    }
}

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

  .marquee span {
    font-size: 9px !important;
  }

  .symbol-finder form.big input {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .symbol-finder-results {
    margin-top: 0;
  }

  .symbol-finder h2 {
    padding: 10px 0 0;
  }

}




/* Form Elements
------------------------------------------------ */

input, textarea, select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #d3d9dc;
    box-shadow: 0 1px 1px rgba(0,0,0,0.05);
    border-radius: 4px;
    padding: 10px 15px;
    font-size: 13px;
    width: 100%;
    margin-top: 5px;
    display: inline-block;
    background: #ffffff;
    font-weight: 500;
    color: #333;
    outline: none;
    box-sizing: border-box;
    font-family: "Avenir W01", sans-serif;
}

form.big input, form.big textarea, form.big select {
  font-size: 16px;
  padding: 12px 17px;
}

select::-ms-expand {
  display: none;
}

form input:focus, form textarea:focus, form select:focus {
  border-color: #00A7FF;
}


form label.error input, form label.error textarea, form label.error select {
  border-color:#E62525;
}

form label.error::after {
  content: attr(data-error);
  position: relative;
  font-size: 12px;
  color: #E62525;
  display: inline-block;
  padding-top: 5px;
}

input.hidden {
  display: none;
}

form select {
  background: #fff url(../img/arrow-down.png) right 15px center no-repeat;
  background-size: 10px;
}

form input[type="file"] {
  padding:9px 15px 8px;
}

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
  form select {
    background: #fff url(../img/arrow-down@2x.png) right 15px center no-repeat;
    background-size: 10px;
  }
}

form label {
  display: inline-block;
  width: 100%;
  margin-bottom: 10px;
  position: relative;
}

input[type="checkbox"].switch {
  width: 50px;
  background: rgba(195, 197, 199, 0.9);
  border: none !important;
  border-radius: 20px;
  height: 24px;
  position: absolute;
  -webkit-transition: all 200ms cubic-bezier(0, 0.96, 0.58, 1);
  -moz-transition: all 200ms cubic-bezier(0, 0.96, 0.58, 1);
  transition: all 200ms cubic-bezier(0, 0.96, 0.58, 1);
  right: 15px;
  top: 14px;
  padding: 0;
  margin: 0;
  cursor: pointer;
  opacity: 1;
  box-shadow: none;
  display: inline-block;
}

input[type="checkbox"].switch::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background:#fff;
  border-radius: 20px;
  position: absolute;
  left: 2px;
  top: 2px;
  -webkit-transition: all 200ms ease-in-out;
  -moz-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
}

input[type="checkbox"].switch:checked {
  background:#2188FB;
}

input[type="checkbox"].switch:active::before {
  width: 30px;
}

input[type="checkbox"].switch:checked::before {
  left: 28px;
}

input[type="checkbox"].switch:active:checked::before {
  left: 18px;
  width: 30px;
}

input[type="checkbox"].switch.big {
  position: relative;
}

input[type="checkbox"].switch.big {
    width: 104px;
    height: 40px;
}

input[type="checkbox"].switch.big::after {
  content: "NO";
  position: absolute;
  left: 57px;
  line-height: 40px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  -webkit-transition: all 200ms ease-in-out;
  -moz-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
}

input[type="checkbox"].switch.big::before {
  width: 36px;
  height: 36px;
}

input[type="checkbox"].switch.big:active::before {
  width: 40px;
}

input[type="checkbox"].switch.big:checked::before {
  left: 66px;
}

input[type="checkbox"].switch.big:checked::after {
  content: "YES";
  left: 27px;
  right: auto;
}

input[type="checkbox"].switch.big:active:checked::before {
  left: 42px;
  width: 30px;
}

.checkbox-group label {
    width: 100%;
    display: inline-block;
    font-size: 16px;
    text-align: left;
    line-height: 20px;
    padding: 10px 0 10px 30px;
    margin: 0;
    color: #444;
    font-weight: 500;
}

.checkbox-group label:hover {
  border-radius: 3px;
  background:#f7f7f7;
  cursor: pointer;
}

input.inline {
  width: 200px;
}

input[type="checkbox"].checkbox, input[type="radio"].radio {
    width: 20px;
    height: 20px;
    border-radius: 20px;
    padding: 0;
    display: inline-block;
    margin: -10px 0 0;
    position: absolute;
    left: 0;
    top: 50%;
}

input[type="checkbox"].checkbox:active, input[type="radio"].radio:active {
  border-color: #c9cdd2;
}

input[type="checkbox"].checkbox:checked, input[type="radio"].radio:checked {
    background: #00A7FF url(../img/checkbox-check@2x.png) center no-repeat;
    background-size: 10px;
    border: #00A7FF;
    box-shadow: none;
}

form a.form-link {
  font-size: 13px;
  color: #EA2E61;
  font-weight: 500;
  padding: 5px 15px;
}

form input:last-child, form select:last-child {
  margin-right: 0;
}

form .one-third {
  width: 32%;
  margin-right: 1%;
}

form .one-half {
  width: 49%;
  margin-right: 1%;
}

form .two-thirds {
  width: 65%;
  margin-right: 1%;
}

input#file::-webkit-file-upload-button {
  visibility: hidden;
}

input#file{
  color: #fff;
  width: 220px;
  height: 154px;
  display: inline-block;
  float: left;
  outline:none;
}

input#file::before {
  content: 'Upload Image';
  display: inline-block;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  letter-spacing: -.2px;

  width: 200px;
  height: 134px;
  border-radius: 4px;
  overflow: hidden;
  margin:10px;

  background: #00A7FF url(../img/add-photo@2x.png) center top 50px no-repeat;
  background-size: 21px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding-top: 80px;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;

}

label h5.absolute {
    position: absolute;
    left: 15px;
    line-height: 38px;
    padding: 0;
    top: 32px;
}

label h5.right {
    position: absolute;
    right: 0;
    line-height: 33px;
    padding: 0;
    top: 0px;
}

label h5.right a {
  color: #00A7FF;
}

label input.absolute {
    padding-left: 140px;
}

span.required {
  color: #f53558;
}

label span.label {
  font-size: 16px;
  padding-bottom: 5px;
  display: inline-block;
}

/* Font options menu
------------------------------- */

#font-options-menu {
    width: 270px;
    top: 200px !important;
    left: 10px !important;
}

.input-wrapper {
  display: inline-block;
  width: 100%;
  padding: 10px 15px;
  border-bottom: 1px solid #f7f7f7;
  position: relative;
}

.input-wrapper.wide {
  width: 250px;
}

.input-label {
  font-size: 12px;
  line-height: 32px;
  width: 100%;
  display: inline-block;
  color: #a3aab3;
  letter-spacing: 0.3px;
  font-weight: 300;
}

.input-size-picker {
  border: 1px solid #d3d9dc;
  box-shadow: 0 1px 1px rgba(0,0,0,0.05);
  border-radius: 4px;
  display: inline-block;
  width: 120px;
  height: 32px;
  float: right;
}

.input-size-picker .plus, .input-size-picker .minus {
    width: 29px;
    background: url(../img/minus@2x.png) center no-repeat;
    background-size: 5px;
    display: inline-block;
    height: 30px;
    border-right: 1px solid #eee;
}


.input-size-picker .plus {
    border-right: none;
    border-left: 1px solid #eee;
    background: url(../img/plus@2x.png) center no-repeat;
    background-size: 9px;
}

.input-size-picker input {
    border: none !important;
    box-shadow: none !important;
    width: 58px;
    height: 30px;
    vertical-align: top;
    text-align: center;
    padding: 0;
    margin: 0;
  }

  .text-input {
    position: relative;
  }



  .text-input input {
    height: 32px;
  }

input.tiny-toggle {
    display: inline-block;
    width: 40px;
    position: absolute;
    right: 1px;
    height: 30px;
    top: 6px;
    border-radius: 0 4px 4px 0;
    border: none;
    border-left: 1px solid #eee;
    box-shadow: none;
    padding: 0;
    margin: 0;
  }
input.tiny-toggle.upp {
  right: 40px;
}

input.tiny-toggle:before {
    color: #596167;
    text-align: center;
    width: 40px;
    display: inline-block;
    line-height: 30px;
    font-size: 9px;
    font-weight: 600;
    cursor: pointer;
  }
input.tiny-toggle:hover:before {
    color: #2392ec;
}  

input.tiny-toggle.upp:before {
  content: "UPP";
}

input.tiny-toggle.low:before {
  content: "low";
}

.input-size-picker input:focus, .text-input input:focus {
  outline: none;
  border-color: #eee;
}

form .toggles {
  display: inline-block;
  text-align: center;
  padding: 15px;
  width: 250px;
  position: relative;
}

form .toggles:before {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background: #fff;
  height: 100%;
  z-index: 2;
  opacity: 0.8;
}

form .toggles.enabled:before {
  display: none;
}

form .toggle {
  width: 100px;
  height: 30px;
  display: inline-block;
  border-radius: 3px;
  cursor: pointer;
  opacity: 0.7;
}

form .toggle:hover {
  opacity: 1;
}

form .toggle-bold-light {
  background:url(../img/font-options/bold-light@2x.png) center no-repeat;
  background-size: 61px;
}

form .toggle-light-bold {
  background:url(../img/font-options/light-bold@2x.png) center no-repeat;
  background-size: 60px;
}

form .toggle.active {
  opacity: 1;
  background-color: #2188FB;
}

form .toggle-bold-light.active {
  background-image:url(../img/font-options/bold-light-h@2x.png);
}

form .toggle-light-bold.active {
  background-image: :url(../img/font-options/light-bold-h@2x.png);
}
/* Options: colors
------------------------------- */

.option.color-type {
    width: 30px;
    height: 30px;
    border-radius: 33px;
    display: inline-block;
    margin: 0px 8px;
    padding: 0;
    opacity: 1;
}

.option.color-type.active {
	box-shadow:0 0 0 3px #1485FF;
}

.option.color-type.greyscale {background-color: #111111;}
.option.color-type.blue {background-color: #0066D0;}
.option.color-type.teal {background-color: #04ADAD;}
.option.color-type.green {background-color: #12AB0F;}
.option.color-type.purple {background-color: #6E40C0;}
.option.color-type.pink {background-color: #C23BAB;}
.option.color-type.red {background-color: #EA1B1B;}
.option.color-type.orange {background-color: #ED7928;}
.option.color-type.yellow {background-color: #EEC821;}


#color-tab .empty {
  margin-top: 30px;
}

.button.switch-dark-bg {
    display: inline-block;
    background: url(../img/switch-dark-bg@2x.png) center no-repeat;
    background-size: 18px;
    width: 70px;
    height: 30px;
    padding: 0;
  }

#color-tab>.logo-container {
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: -240px;
  margin-top: -145px;
}

@media screen and (max-width: 600px) {
  #color-tab .logo-container {
    margin-left: -140px;
    margin-top: 10px;
  }
}

.w110 {
  width: 110px !important;
}

.w450 {
  width: 450px !important;
}

/* Options: layouts
------------------------------- */

.option.layout-type {
  display: inline-block;
  height: 150px;
  margin-right: 15px;
  opacity: 1;
}

#layout-tab .logo-container:after, .logo-container span.title {
  position: absolute;
  top: -30px;
  height: 30px;
  font-size: 13px;
  left: 0;
  width: 100%;
  color: #272e35;
  text-align: center;
}

#layout-tab .logo-container-slider {
  margin-top: -170px;
}

#layout-tab .logo-container:nth-child(2):after {
  content: "Logotype";
}

#layout-tab .logo-container:nth-child(3):after {
  content: "Logotype + logomark on top";
}

#layout-tab .logo-container:nth-child(4):after {
  content: "Logotype + logomark on the left";
}

#layout-tab .logo-container:nth-child(5):after {
  content: "Logotype in a container";
}

@media screen and (max-width: 500px) {
  #layout-tab .logo-container-slider {
    margin-top: -55px;
  }
}

/* Options: symbols
------------------------------- */

#symbol-tab .options-panel {
  padding:5px;
}

.option.symbol-type {
  display: inline-block;
  height: 50px;
  margin-right: 13px;
  opacity: 1;
}

.option.symbol-type.symbol {
  background: url(../img/symbol-types/symbol@2x.png) center no-repeat;
  background-size: 34px;
  width: 60px;
}

.option.symbol-type.text-as-symbol {
  background: url(../img/symbol-types/text-as-symbol@2x.png) center no-repeat;
  background-size: 17px;
  width: 60px;
}

.option.symbol-type.text-in-symbol {
  background: url(../img/symbol-types/text-in-symbol@2x.png) center no-repeat;
  background-size: 32px;
  width: 60px;
}

.option.symbol-type.text-in-symbol-container {
  background: url(../img/symbol-types/container-around-text@2x.png) center no-repeat;
  background-size: 32px;
  width: 60px;
}

#edit-symbol .options-panel {
  top: 150px;
}

#edit-symbol .option-scroller {
  width:500px !important;
}

#edit-symbol .logo-container {
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -240px;
    margin-top: -95px;
}

@media screen and (max-width: 600px) {
  #edit-symbol .logo-container {
    margin-left: -140px;
    margin-top: 0px;
  }
}

/* Hover states */

.option.symbol-type.symbol:hover, .option.symbol-type.symbol.active {
  background-image: url(../img/symbol-types/symbol-h@2x.png);
}

.option.symbol-type.text-as-symbol:hover, .option.symbol-type.text-as-symbol.active {
  background-image: url(../img/symbol-types/text-as-symbol-h@2x.png);
}

.option.symbol-type.text-in-symbol:hover, .option.symbol-type.text-in-symbol.active {
  background-image: url(../img/symbol-types/text-in-symbol-h@2x.png);
}

.option.symbol-type.text-in-symbol-container:hover, .option.symbol-type.text-in-symbol-container.active {
  background-image: url(../img/symbol-types/container-around-text-h@2x.png);
}

.sub-options-panel {
  display: none;
  margin-left: 130px;
}

.sub-options-panel.active {
  display: inline-block;
}

.empty {
    position: absolute;
    top: 50%;
    left: 0;
    font-size: 19px;
    color: #92989c;
    font-weight: 300;
    width: 100%;
    letter-spacing: 0.5px;
}

/* Get container variations
------------------------------------------------ */

#container-tab .logo-container-slider, #monogram .logo-container-slider {
  margin-top: -155px;
}

#symbol-icon .logo-container-slider {
  margin-top: -130px;
}

@media screen and (max-width: 600px) {
  #container-tab .logo-container-slider, #monogram .logo-container-slider, #symbol-container .logo-container-slider {
    margin-top: -40px
  }
  #symbol-icon .logo-container-slider {
    margin-top: -10px;
  }
}
/* Get logo
------------------------------------------------ */

#get-logo {
  background: #F9F9FA;
  padding-top: 60px;
}

#get-logo .container {
  text-align: center;
  padding-bottom: 100px;
}

#get-logo .naked-button {
  font-size: 15px;
  display: inline-block;
  margin-top: 80px;
}

.premium-icon {
    width: 384px;
    height: 309px;
    display: inline-block;
    background: url(../img/premium-icon@2x.png);
    background-size: 384px;
}

.designer-callout {
  width: 270px;
  height: 100px;
  background: url(../img/designer-callout@2x.png) center no-repeat;
  background-size: 279px;
  display: inline-block;
  width: 100%;
}

.package-option {
  display: inline-block;
  background: #fff;
  width: 270px;
  padding: 20px;
  text-align: center;
  font-size: 15px;
  margin:0 20px;
  vertical-align: top;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  border-radius: 4px;
  transition: all 200ms ease-in-out;
}

.package-option.free:hover {
    box-shadow: 0 25px 60px rgba(0,0,0,0.2);
    cursor: pointer;
}


.package-option h1 {
  font-size: 50px;
}


.package-option.enterprise h1, .package-option.basic h1 {
  padding-bottom: 30px;
}

.package-option h3 {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    line-height: 30px;
    background: #00a7ff;
    color: #fff;
}

.package-option h5 {
font-size: 11px;
    padding: 20px 0 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #aaa;
}

.package-option .old-prices {
  display: inline-block;
  padding: 10px 0 30px;
  font-size: 12px;
}

.package-option .crossed-out {
  display: inline-block;
  text-decoration: line-through;
  padding-right: 10px;
}

.package-option .green {
  display: inline-block;
  color: #30c37b;
}

.package-option ul.points {
    padding: 15px 0px;
    text-align: center;
    border-top: 1px solid #eee;
}

.stripe-button-el {
  width: 100%;
  max-width: 500px;
}

.fine-print {
  padding-top: 12px;
  font-size: 13px;
  color: #aaa;
}

ul.points li {
  display: inline-block;
  width: 100%;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 500;
  color: #222;
}

#coupon-found {
  min-height: 0;
  padding-bottom: 50px;
  text-align: center;
}

#coupon-found h3 {
  padding:70px 50px 30px;
}


.package-option.premium {
    border:1px solid #0258FF;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.package-option .stripe-button-el {
    background: #1275FF;
    visibility: visible;
    border: none;
    box-shadow: none;
    border-radius: 3px;
}

.package-option .stripe-button-el span {
    display: block;
    min-height: 50px !important;
    background: none;
    line-height: 50px;
    box-shadow: none;
    font-size: 17px;
    text-shadow: none;
    font-weight: 900;
    font-family: "Avenir W01";  
}

.package-option.basic .stripe-button-el, .package-option.enterprise .stripe-button-el {
  background:#fff;
  border:1px solid #1275FF;
}

.package-option.basic .stripe-button-el span, .package-option.enterprise .stripe-button-el span {
    display: block;
    min-height: 30px;
    color: #1275FF;
    font-weight: 500;
    font-size: 15px;
}

.package-option.premium .points-wrapper {
  font-size: 0;
  background: #fff;
  margin-top:   0px;
  padding-left: 40px;
  padding-bottom: 20px;
}

.sub-packages {
padding: 50px 10px;
    background: #f7f7f7;
    border-radius: 3px;
    margin-bottom: 30px;
}


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

  .designer-callout {
    display: none;
  }

  .package-option {
    margin-bottom: 20px;
  }

  .package-option.premium .points-wrapper {
    padding-top: 20px
  }

  .package-option.premium ul.points {
    width: 100%;
    padding:0;
  }
  .premium-icon {
      width: 184px;
      height: 149px;
  }
  .package-option.premium h1 {
      font-size: 22px;
      letter-spacing: 0;
  }
  .package-option.premium .stripe-button-el span {
    font-size: 13px;
  }
}


/* Account stuff
------------------------------------------------ */

body.account {
  background: #00A7FF;
  text-align: center;
}

body.account.inside {
  background: #f7f7f7;
}

body.account.outside .top-bar {
  box-shadow: none;
}

#account-wrapper {
width: 100%;
    max-width: 400px;
    display: inline-block;
    margin: 150px auto;
    text-align: left;
    font-size: 15px;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
}

body.outside #account-wrapper {
    box-shadow: 0 20px 30px rgba(0,0,0,0.2);
}
body.inside #account-wrapper {
    border:1px solid #eee;
}

#account-wrapper h1 {
    width: 100%;
    display: inline-block;
    font-size: 18px;
    text-align: center;
    padding: 40px 0;
    letter-spacing: 0;
}


#account-wrapper .tab-bar {
  height: 100%;
  font-size: 0;
  text-align: center;
  background: #333;
}

#account-wrapper .tab-bar li {
    display: inline-block;
    width: 50% !important;
    padding: 0;
}

#account-wrapper .tab-bar a {
  height: 50px; 
  line-height: 50px;
  font-size: 13px;
}

#account-wrapper #main {
  width: 100%;
  padding: 0 40px 30px;
  display: inline-block;
}

#account-wrapper .tab-bar a:hover {
  color: #fff;
}

#account-wrapper .tab-bar a.active {
  color: #fff;
  border-color: #fff;
}

#account-wrapper form label {
  margin-bottom: 15px;
}

#account-wrapper form label input {
  padding: 13px 15px;
  margin-top: 0;
  font-size: 14px;
}

#account-wrapper .button {
  width: 100%;
  margin-top: 0;
  margin-bottom: 10px;
  padding:17px 10px;
  text-align: center;
}
#account-wrapper #error, #account-wrapper #success, .modal form #error {
    width: 100%;
    display: inline-block;
    border: 1px solid #EAC6C6;
    background: #FFECEC;
    color: #B54444;
    padding: 13px 15px;
    line-height: 1.5;
    font-size: 14px;
    margin-bottom: 15px;
    border-radius: 4px;
}

.modal form #error, .modal form #sucess {
  display: none;
}

#account-wrapper #success {
    border: 1px solid #C6EAD0;
    background: #ECFFEF;
    color: #44B563;
}

#account-wrapper #error.active, #account-wrapper #success.active, .modal form #error.active, .modal form #success.active {
  display: inline-block;
}

/* Login modal
------------------------------------------------------- */

.modal h3 {
  text-align: center;
  font-size: 24px;
  padding: 50px 30px 0;
  font-weight: 600;
  color: #1D2126;
}

.modal h2 {
  text-align: center;
  padding: 20px 30px 50px;
}

.modal h5 {
  text-align: center;
  font-size: 15px;
  padding: 20px 50px 0;
  color: #a4a8b3;
  line-height: 1.5;
}

.modal.default {
  width: 500px;
  left: 50%;
  margin-left: -250px;
}

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

.modal.default a.basic {
  display: inline-block;
  margin:20px 20px 0;
}


.modal .fine-print {
width: 100%;
    display: inline-block;
    text-align: center;
    padding-bottom: 20px;
    padding-top: 20px;
    background: #eee;
    color: #999;
}

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

  .modal.default {
    width: 320px;
    min-width: 100px;
    margin-left: -145px;
  }

  .modal.default form {
    padding:20px;
  }

  .modal h3 {
    padding: 30px 20px 0;
  }

  .modal h5 {
    padding: 20px 20px 0;
  }


}


/* Referral Program
------------------------------- */

#referral .container {
  text-align: center;
}

#referral h2 {
  font-size: 22px;
  padding: 50px 20px;
}

#referral input {
  text-align: center;
}

.invite-options {
  max-width: 410px;
  margin:0 auto;
}

.invite-options .option {
  width: 30.33%;
  margin:10px 1.5%;
  display: inline-block;
  border-radius: 3px;
  padding: 20px 0;
  color: #fff;
  background: #222;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
}

.invite-options .option.fb {
  background:#3A5998;
}

.invite-options .option.twitter {
  background:#1DA1F2;
}



/* Menu
-------------------------------------------------------- */

.main-menu, .main-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width:250px;
  background: #fff;
  display: none;
  z-index: 100;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  transform: translate3d(0,0);
}

.main-menu {
  left: -100%;
  transition: all 600ms cubic-bezier(0.51, 0.98, 0.39, 0.99);
}

.main-menu ul {
  padding-top: 10px;
}

.main-menu li {
  display: inline-block;
  width: 100%
}

.main-menu a {
  display: inline-block;
  font-size: 17px;
  width: 100%;
  padding: 15px 30px;
  color: #222;
  font-weight: 500;
}

.main-menu a .count {
  float: right;
  font-size: 12px;
  line-height: 18px;
  color: #058fff;
}

.main-menu .header {
  width: 100%;
  height: 120px;
  background: #222;
  color: #fff;
  position: relative;
}

.main-menu .header span {
  font-size: 15px;
  position: absolute;
  left: 30px;
  bottom: 30px;
}

.main-menu a:hover {
  background:#eee;
}

.main-menu ul.bottom {
  position: absolute;
  bottom: 10px;
}

.main-menu ul.bottom li {
  width: auto;
}

.main-menu ul.bottom a {
  font-size: 13px;
  padding: 5px 15px;
}

.main-menu.active, .main-menu-overlay.active {
  display: inline-block;
}

.main-menu.slide {
  left: 0;
}

.main-menu.out {
  left: -250px;
  transition: all 300ms ease-in;
}

.main-menu-overlay {
  background: rgba(0,0,0,0.6);
  z-index: 99;
  width: 100%;
  display: none;
}

.admin-user-id {
    position: absolute;
    top: 80px;
    font-size: 13px;
    color: #000;
    width: 100%;
    left: 0;
}