/* ====== header (barra) ====== */

header {
  width: 100%;
  height: auto;
  background-color: #1f2229;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 100;
}

header .topo {
  height: 60px;
  position: relative;
}

header .topo .logo {
  width: 130px;
  height: 30px;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  margin: auto;
  display: block;
}

header .topo .logo img {
  width: 100%;
}

header .navigation {
  width: auto;
  height: 60px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
}

header .navigation:after {
  width: 0px;
  height: 60px;
  content: '';
  vertical-align: middle;
  display: inline-block;
}

/* == app == */

header .search {
  height: 60px;
  margin: 0px 10px 0px 0px;
  position: relative;
  float: left;
}

header .search .icon-font {
  margin: 20px 5px 20px 5px;
  display: inline-block;
}

header .search .icon-font:hover:before,
header .search .icon-font.select:before {
  color: #C2C5D6;
}

header .search .icon-notification {
  position: relative;
}

header .search .icon-notification span {
  width: 12px;
  height: 12px;
  font-size: 10px;
  color: #FFFFFF;
  text-align: center;
  border-radius: 100%;
  line-height: 10px;
  background-color: #CA0088;
  pointer-events: none;
  padding: 4px 4px 4px 4px;
  position: absolute;
  top: -10px;
  right: -10px;
  display: block;
}

header .profile {
  height: 40px;
  margin: 0px 10px 0px 0px;
}

header .profile .thumb {
  width: 40px;
  height: 40px;
  border-radius: 5px;
  background-color: #333333;
  margin: 0px 10px 0px 0px;
  vertical-align: middle;
  display: inline-block;
}

header .profile .name {
  font-size: 10px;
  color: #999999;
  letter-spacing: 1px;
  text-transform: uppercase;
}

header .profile,
header .profile + .a-nav {
  vertical-align: middle;
  display: inline-block;
}

header .profile + .a-nav {
  width: 40px;
  height: 60px;
  position: relative;
}

header .profile + .a-nav .icon {
  pointer-events: none;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  margin: auto;
}

header .profile + .a-nav:hover,
header .profile + .a-nav.select {
  background-color: #0F1318;
}

header .profile + .a-nav:hover .icon:before,
header .profile + .a-nav:hover .icon:after,
header .profile + .a-nav.select .icon:before,
header .profile + .a-nav.select .icon:after {
  background-color: #C2C5D6;
}

header .nav {
  position: absolute;
  top: 75px;
}

header .search .a-nav + .nav {
  left: 25px;
}

header .profile + .a-nav + .nav {
  right: 0px;
}

/* == promo == */

header .navigation > ul {
  height: 18px;
  vertical-align: middle;
}

header .navigation > ul li {
  position: relative;
  margin: 0px 10px 0px 10px;
  float: left;
}

header .navigation > ul li:last-child {
  margin: 0px 0px 0px 10px;
}

header .navigation > ul li.language {
  margin: 0px 0px 0px 0px;
}

header .navigation > ul li a,
header .navigation > ul li.language span {
  font-size: 11px;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 1px;
}

header .navigation > ul,
header .navigation .btn {
  margin: 0px 10px 0px 10px;
  display: inline-block;
}

header .navigation > ul:first-child {
  margin: 0px 10px 0px 0px;
}

header .navigation > ul:last-child {
  margin: 0px 0px 0px 10px;
}

header .navigation .a-close {
  display: none;
}

/* = mobile = */

header .navigation.show {
  width: 100%;
  height: calc(100% - 60px);
  box-sizing: border-box;
  background-color: #1F2229;
  padding: 50px 0px 50px 0px;
  margin: 0px auto 0px auto;
  position: fixed;
  top: 60px;
  left: 0px;
}

header .navigation.show ul {
  width: 100%;
  position: absolute;
  top: 170px;
  right: 0px;
  left: 0px;
  margin: 0px auto 0px auto;
}

header .navigation.show ul li {
  width: auto;
  text-align: center;
  margin: 20px auto 20px auto;
  float: none;
}

header .navigation.show ul li a {
  font-size: 13px;
}

header .navigation.show ul:not(.lang) {
  display: table;
}

header .navigation.show ul.lang {
  display: none;
}

header .navigation.show .btn {
  margin: 20px auto 20px auto;
  display: table;
}

header .navigation.show .a-close {
  border: 1px solid #FFFFFF;
  border-radius: 100%;
  position: absolute;
  top: -45px;
  right: 15px;
  display: block;
}

header .navigation.show .a-close:before,
header .navigation.show .a-close:after {
  background-color: #FFFFFF;
}

/* = mobile nav = */

.icon-nav {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  margin: auto;
  display: none;
}

.icon-nav.hide {
  display: none;
}

.icon-nav span,
.icon-nav span:before,
.icon-nav span:after {
  width: 30px;
  height: 2px;
  background-color: #FFFFFF;
  position: absolute;
  right: 0px;
  left: 0px;
}

.icon-nav span:before,
.icon-nav span:after {
  content: '';
}

.icon-nav span {
  top: 0px;
  bottom: 0px;
  margin: auto;
}

.icon-nav span:before {
  top: -10px;
}

.icon-nav span:after {
  bottom: -10px;
}

@media (max-width: 760px) {

  /* ====== header ====== */
  header .navigation > ul:not(.lang) {
    display: none;
  }

  header .navigation .btn {
    display: none;
  }

  header .topo .logo {
    right: 0px;
  }

  header .topo .icon-nav {
    display: block;
  }
  .hide-mobile {
    display:none!important;
  }

   .border-table table  tr td .btn {
    min-width:100%;
   }
  .border-table table th {
    width:50%;
  }
  .formulario .row {
    width:100%!important;
  }
}

/* = li language = */

header ul li.language{
  margin: 0px 0px 0px 0px;
  float: right;
  z-index: 1;
}

header ul li.language span:after{
  width: 0px;
  height: 0px;
  content: '';
  border-style: solid;
  border-width: 4px 4px 4px 4px;
  border-color: #FFFFFF transparent transparent transparent;
  margin: 0px 0px 0px 5px;
  vertical-align: middle;
  display: inline-block;
}

header ul li.language a{
  position: absolute;
  display: none;
}

header ul li.language a{
  bottom: -20px; left: 0px;
}

header ul li.language:before{
  height: 60px;
  content: '';
  border-radius: 5px;
  background-color: #2F313D;
  position: absolute;
  display: none;
  z-index: -1;
}

header ul li.language:before{
  width: 45px;
}

header ul li.language:before{
  top: -10px; left: -10px;
}

header ul li.language:hover:before,
header ul li.language:hover a{
  display: block;
}


/* ====== assets ====== */

.assets {
  width: 1024px;
  margin: 30px auto 0px auto;
}

.assets h2 {
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 1px;
  margin: 0px auto 20px auto;
}

.assets ul.icons {
  width: 100%;
  margin: 0px auto 20px auto;
  display: table;
}

.assets ul.icons li {
  margin: 0px 10px 0px 0px;
  float: left;
}

/* ====== oozo colors ====== */

.azul {
  /* color: #00ACEC; */
}

.rosa {
  /* color: #CA0088; */
}

.amarelo {
  /* color: #F6D330; */
}

/* ====== alert ====== */

.alert {
  width: 100%;
  border-width: 1px;
  border-color: #C4C9CD;
  border-style: solid;
  border-radius: 5px;
  box-sizing: border-box;
  letter-spacing: 1px;
  padding: 15px 20px 15px 20px;
  margin: 0px auto 20px auto;
  display: block;
}

.alert.alert-success {
  border-color: #43B581;
  background-color: #EAF7F1;
}

.alert.alert-success,
.alert.alert-success a {
  color: #43B581;
}

.alert.alert-success a {
  text-decoration: underline;
}

.alert.alert-warning {
  border-color: #FFA300;
  background-color: #FFF5E3;
}

.alert.alert-warning,
.alert.alert-warning a {
  color: #FFA300;
}

.alert.alert-warning a {
  text-decoration: underline;
}

.alert.alert-error {
  border-color: #ED145B;
  background-color: #FDE5ED;
}

.alert.alert-error,
.alert.alert-error a {
  color: #ED145B;
}

.alert.alert-error a {
  text-decoration: underline;
}

/* ====== border radius ====== */

.br-2 {
  border-radius: 2px;
}

.br-4 {
  border-radius: 4px;
}

.br-6 {
  border-radius: 6px;
}

.br-20 {
  border-radius: 20px;
}

.br-100 {
  border-radius: 100%;
}

/* ====== social colors ====== */

.b-facebook:not(.active):hover,
.b-facebook.active,
.bc-facebook:hover .b-facebook:not(.active),
.add:hover .b-facebook:not(.active) {
  background-color: #3B579D !important;
}

.b-twitter:not(.active):hover,
.b-twitter.active,
.bc-twitter:hover .b-twitter:not(.active),
.add:hover .b-twitter:not(.active) {
  background-color: #55ACEE !important;
}

.b-instagram:not(.active):hover,
.b-instagram.active,
.bc-instagram:hover .b-instagram:not(.active),
.add:hover .b-instagram:not(.active) {
  background-color: #dc346e !important;
}

.b-foursquare:not(.active):hover,
.b-foursquare.active,
.bc-foursquare:hover .b-foursquare:not(.active),
.add:hover .b-foursquare:not(.active) {
  background-color: #F94877 !important;
}

.b-vimeo:not(.active):hover,
.b-vimeo.active,
.bc-vimeo:hover .b-vimeo:not(.active),
.add:hover .b-vimeo:not(.active) {
  background-color: #1AB7EA !important;
}

.b-youtube:not(.active):hover,
.b-youtube.active,
.bc-youtube:hover .b-youtube:not(.active),
.add:hover .b-youtube:not(.active) {
  background-color: #E62D28 !important;
}

.b-beleza-na-web:not(.active):hover,
.b-beleza-na-web.active,
.bc-beleza-na-web:hover .b-beleza-na-web:not(.active),
.add:hover .b-beleza-na-web:not(.active) {
  background-color: #e6007e !important;
}

.b-hashtag:not(.active):hover,
.b-hashtag.active,
.bc-hashtag:hover .b-hashtag:not(.active),
.add:hover .b-hashtag:not(.active) {
  background-color: #FBC546 !important;
}

.b-link:not(.active):hover,
.b-link.active,
.bc-link:hover .b-link:not(.active),
.add:hover .b-link:not(.active) {
  background-color: #A37DDF !important;
}

.b-geckoboard:not(.active):hover,
.b-geckoboard.active,
.bc-geckoboard:hover .b-geckoboard:not(.active),
.add:hover .b-geckoboard:not(.active) {
  background-color: #8dc63f !important;
}

.b-like:not(.active):hover,
.b-like.active,
.bc-like:hover .b-like:not(.active),
.add:hover .b-like:not(.active) {
  background-color: #DE5A5A !important;
}

.b-feed:not(.active):hover,
.b-feed.active,
.bc-feed:hover .b-feed:not(.active),
.add:hover .b-feed:not(.active) {
  background-color: #ff8100 !important;
}

.b-live:not(.active):hover,
.b-live.active,
.bc-like:hover .b-live:not(.active),
.add:hover .b-live:not(.active) {
  background-color: #ff1f1f !important;
}

.b-oozo:not(.active):hover,
.b-oozo.active,
.bc-oozo:hover .b-oozo:not(.active),
.add:hover .b-oozo:not(.active) {
  background-image: linear-gradient(-45deg, #f2bb65 0%, #ea7268 2%, #e2286b 15%, #841f6a 49%, #251668 100%) !important;
}

/* ====== navigation ====== */

.a-nav {
  cursor: pointer;
}

.nav {
  width: 200px;
  height: auto;
  padding: 10px 0px 10px 0px;
  position: relative;
}

.nav {
  display: none;
}

.nav:after {
  width: 0px;
  height: 0px;
  content: '';
  border-style: solid;
  position: absolute;
}

/* = top = */

.nav.top:after {
  border-width: 0px 7px 7px 7px;
}

.nav.top-left:after {
  top: -7px;
  left: 13px;
}

.nav.top-right:after {
  top: -7px;
  right: 13px;
}

.nav.top-center:after {
  top: -7px;
  right: 0px;
  left: 0px;
  margin: auto;
}

/* = bottom = */

.nav.bottom:after {
  border-width: 7px 7px 0px 7px;
}

.nav.bottom-center:after {
  bottom: -7px;
  right: 0px;
  left: 0px;
  margin: auto;
}

.nav.bottom-left:after {
  bottom: -7px;
  left: 13px;
}

.nav.bottom-right:after {
  bottom: -7px;
  right: 13px;
}

/* == */

.nav ul li a {
  width: 100%;
  font-size: 12px;
  box-sizing: border-box;
  padding: 8px 20px 8px 20px;
  display: block;
}

.nav ul li a,
.nav ul li span,
.nav ul li a span,
.nav ul li a span small {
  font-weight: 100;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.nav ul li a .icon,
.nav ul li a .icon-font,
.nav ul li a .text {
  vertical-align: top;
  display: inline-block;
}

.nav ul li a .icon,
.nav ul li a .icon-font {
  margin: 0px 5px 0px 0px;
}

.nav ul li a .icon:before,
.nav ul li a .icon-font:before {
  line-height: 20px;
}

/* = center = */

.nav.center ul li a {
  text-align: center;
}

/* == white == */

.nav.white {
  background-color: #EAEBEF;
}

.nav.bottom.white:after {
  border-color: #EAEBEF transparent transparent transparent;
}

.nav.top.white:after {
  border-color: transparent transparent #EAEBEF transparent;
}

.nav.white ul li a {
  line-height: 20px;
}

.nav.white ul li a,
.nav.white ul li span:before,
.nav.white ul li span:after {
  color: #999999;
}

.nav.white ul li a:hover,
.nav.white ul li a:hover span:before {
  color: #6A6A6A;
}

.nav.white ul li a:hover .icon-a:before,
.nav.white ul li a:hover .icon-a:after {
  background-color: #6A6A6A;
}

/* == black == */

.nav.black {
  background-color: #1F2229;
}

.nav.bottom.black:after {
  border-color: #1F2229 transparent transparent transparent;
}

.nav.top.black:after {
  border-color: transparent transparent #1F2229 transparent;
}

.nav.black ul li a {
  line-height: 20px;
}

.nav.black ul li a,
.nav.black ul li span:before {
  color: #777777;
}

.nav.black ul li a:hover,
.nav.black ul li a:hover span:before {
  color: #C2C5D6;
}

.nav.black ul li a:hover .icon-a:before,
.nav.black ul li a:hover .icon-a:after {
  background-color: #C2C5D6;
}

.nav.black ul li a:hover {
  background-color: #15181D;
}

.nav.black ul li.divider {
  border-top: solid 1px #15181D;
  border-bottom: solid 1px #1F2229;
  margin: 8px 20px;
}

/* ====== icons font ====== */

@font-face {
  font-family: 'icomoon';
  src: url('../fonts/icomoon.eot');
  src: url('../fonts/icomoon.eot?#iefix-szkie6') format('embedded-opentype'), url('../fonts/icomoon.ttf') format('truetype'), url('../fonts/icomoon.woff') format('woff'), url('../fonts/icomoon.svg?-szkie6#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

.icon-font {
  font-family: 'icomoon';
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
}

.icon-font:before,
.icon-error:after {
  color: #999999;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  margin: auto;
}

.icon.disable,
.icon-font.disable {
  pointer-events: none;
  opacity: 0.4;
}

.icon-font.active:before {
  color: #FFFFFF;
}

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

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

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

.icon-google-plus:before {
  content: "\e604";
}

.icon-pinterest:before {
  content: "\e603";
}

.icon-foursquare:before {
  content: "\e602";
}

.icon-vimeo:before {
  content: "\e601";
}

.icon-youtube:before {
  content: "\e600";
}

.icon-beleza-na-web:before {
  content: "\e90f";
}

span.icon-beleza-na-web:before {
  width:26px !important;
  height:26px !important;
  font-size:26px !important;
}

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

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

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

.icon-profile:before {
  content: "\e611";
}

.icon-add-account:before {
  content: "\e610";
}

.icon-settings:before {
  content: "\e60f";
}

.icon-tv:before {
  content: "\e60e";
}

.icon-sign-out:before {
  content: "\e60d";
}

.icon-search:before {
  content: "\e60c";
}

.icon-notification:before {
  content: "\e60b";
}

.icon-link:before {
  content: "\e60a";
}

.icon-geckoboard:before {
  content: "\e911";
}

.icon-pin:before {
  content: "\e609";
}

.icon-blank:before {
  content: "\e806";
}

.icon-approved:before {
  content: "\e807";
}

.icon-block:before {
  content: "\e808";
}

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

.icon-reload:before {
  content: "\e901";
}

.icon-help:before {
  content: "\e90d";
}

.icon-error:before {
  content: "\e902";
  color: #ED145b !important;
}

.icon-error:after {
  content: "\e90a";
  color: #FFFFFF;
}

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

.icon-camera:before {
  content: "\e613";
}

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

.icon-all-scroll:before {
  content: "\e614";
}

.icon-hashtag:before {
  content: "\e615";
}

.icon-calendar:before {
  content: "\e804";
}

.icon-play:before {
  content: "\e800";
}

.icon-pause:before {
  content: "\e801";
}

.icon-file:before {
  content: "\e802";
}

.icon-visualize:before {
  content: "\e803";
}

.icon-back:before {
  content: "\e805";
}

.icon-p-add:before {
  content: "\e903";
}

.icon-p-hashtag:before {
  content: "\e904";
}

.icon-p-moderation:before {
  content: "\e905";
}

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

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

.icon-ads:before {
  content: "\e90e";
}

.icon-dollar:before {
  content: "\e910";
}

.icon-like:before {
  content: "\e9da";
}

.icon-sortable:before{
  content: "\e912";
}

.icon-feed:before {
  content: "\e913";
}

.icon-live:before {
  content: "\e914";
}

.icon-oozo:before {
  content: "\e915";
}

.icon-tv-box:before{
  content: '';
  background-image: url('../images/icon-box.svg');
}

.icon-tv-box-2:before{
  content: '';
  background-image: url('../images/icon-box-2.svg');
}

/* ====== icons ====== */

.icon,
.icon-font {
  position: relative;
  display: block;
}

.icon:after,
.icon:before {
  content: '';
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  margin: auto;
}

/* == sizes == */

.icon-150,
.icon-150.icon-font:before {
  width: 150px;
  height: 150px;
}

.icon-150.icon-font:before {
  font-size: 150px;
}

.icon-40,
.icon-40.icon-font:before {
  width: 40px;
  height: 40px;
}

.icon-40.icon-font:before {
  font-size: 40px;
}
.icon-44,
.icon-44.icon-font:before {
  width: 44px;
  height: 44px;
}

.icon-44.icon-font:before {
  font-size: 44px;
}

.icon-30,
.icon-30.icon-font:before {
  width: 30px;
  height: 30px;
}

.icon-30.icon-font:before {
  font-size: 30px;
}

.icon-25,
.icon-25.icon-font:before {
  width: 25px;
  height: 25px;
}

.icon-25.icon-font:before {
  font-size: 25px;
}

.icon-20,
.icon-20.icon-font:before {
  width: 20px;
  height: 20px;
}

.icon-20.icon-font:before {
  font-size: 20px;
}

.icon-15,
.icon-15.icon-font:before {
  width: 15px;
  height: 15px;
}

.icon-15.icon-font:before {
  font-size: 15px;
  line-height: 15px;
}

.icon-10,
.icon-10.icon-font:before {
  width: 10px;
  height: 10px;
}

.icon-10.icon-font:before {
  font-size: 10px;
}

/* == arrows == */

.icon-a:before,
.icon-a:after {
  width: 2px;
  height: 60%;
  background-color: #999999;
}

/* = close = */

.a-close:before {
  transform: rotate(-45deg);
}

.a-close:after {
  transform: rotate(45deg);
}

.a-close.full:before,
.a-close.full:after {
  height: 100%;
}

/* = up, down = */

.a-up:before,
.a-down:before {
  left: 40%;
}

.a-up:after,
.a-down:after {
  right: 40%;
}

/* = up = */

.a-up:before {
  transform: rotate(-45deg);
}

.a-up:after {
  transform: rotate(45deg);
}

/* == down == */

.a-down:before {
  transform: rotate(45deg);
}

.a-down:after {
  transform: rotate(-45deg);
}

/* = left, right = */

.a-left:before,
.a-right:before {
  top: 40%;
}

.a-left:after,
.a-right:after {
  bottom: 40%;
}

/* = left = */

.a-left:before {
  transform: rotate(-45deg);
}

.a-left:after {
  transform: rotate(45deg);
}

/* = right = */

.a-right:before {
  transform: rotate(45deg);
}

.a-right:after {
  transform: rotate(-45deg);
}

/* = plus = */

.a-plus:before {
  transform: rotate(0deg);
}

.a-plus:after {
  transform: rotate(90deg);
}

/* = running = */

.a-running:before,
.a-running:after {
  background-color: transparent;
}

.a-running:after {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 4px 0px 4px 10px;
  border-color: transparent transparent transparent #999999;
  left: 2px;
}

/* = loading = */

.a-loading:before,
.a-loading:after {
  background-color: transparent;
}

.a-loading:after {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 4px 0px 4px 10px;
  border-color: transparent transparent transparent #999999;
  left: 2px;
}

/* = pause = */

.a-pause:after,
.a-pause:before {
  width: 2px;
  height: 8px;
  background-color: #999999;
}

.a-pause:before {
  left: -5px;
}

.a-pause:after {
  right: -5px;
}

/* = close = */

.icon-c.a-close:before,
.icon-c.a-close:after {
  width: 2px;
  height: 10px;
  background-color: #999999;
}

.a-close:before {
  transform: rotate(-45deg);
}

.a-close:after {
  transform: rotate(45deg);
}

/* = stop = */

.a-stop:before {
  display: none;
}

.a-stop:after {
  width: 10px;
  height: 10px;
  background-color: #999999;
}

/* = error = */

.a-error:before {
  color: #ED145B !important;
}

/* = expired = */

.a-expired:before {
  color: #FFA300 !important;
}

/* = error, expired = */

.a-error:before,
.a-expired:before {
  content: "\e902";
}

.a-error:after,
.a-expired:after {
  content: "\e90a";
  color: #FFFFFF;
}

.a-error:before,
.a-error:after,
.a-expired:before,
.a-expired:after {
  font-size: 23px;
}

/* = reload = */

.a-reload:before,
.a-help:before {
  width: 12.5px;
  height: 13px;
  font-size: 13px;
  line-height: 13px;
  color: #999999;
}

.a-reload:before{
  content: "\e901";
}

.a-help:before {
  content: "\e90b";
}

/* = error, expired, reload = */

.a-error,
.a-expired,
.a-reload:before,
.a-help:before{
  font-family: 'icomoon';
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
}

/* = more = */

.a-more {
  width: 20px;
  position: relative;
}

.a-more span,
.a-more span:before,
.a-more span:after {
  width: 5px;
  height: 5px;
  content: '';
  border-radius: 100%;
  background-color: #999999;
  display: block;
}

.a-more:hover span,
.a-more:hover span:before,
.a-more:hover span:after,
.a-more.select span,
.a-more.select span:before,
.a-more.select span:after {
  background-color: #6A6A6A;
}

.a-more span,
.a-more span:before,
.a-more span:after {
  position: absolute;
}

.a-more span {
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  margin: auto;
}

.a-more span:before {
  left: -10px;
}

.a-more span:after {
  right: -10px;
}

/* == controls == */

.icon-c {
  width: 22px;
  height: 22px;
  border-width: 2px;
  border-style: solid;
  border-color: #999999;
  border-radius: 100%;
}

.icon-c.a-error,
.icon-c.a-expired {
  border-radius: 0px;
  border-color: transparent;
}

/* = running = */

.icon-c.a-running:hover {
  border-color: #43B581;
}

.icon-c.a-running:hover:after {
  border-left-color: #43B581;
}

.icon-c.a-running.active,
.icon-c.a-running:active {
  border-color: transparent;
  background-color: #43B581;
}

.icon-c.a-running.active:after,
.icon-c.a-running:active:after {
  border-left-color: #FFFFFF;
}

/* = loading = */

.icon-c.a-loading:hover {
  border-color: #43B581;
}

.icon-c.a-loading:hover:after {
  border-left-color: #43B581;
}

.icon-c.a-loading.active,
.icon-c.a-loading:active {
  border-color: transparent;
  background-color: #43B581;
}

.icon-c.a-loading.active:after,
.icon-c.a-loading:active:after {
  border-left-color: #FFFFFF;
}

/* = pause = */

.icon-c.a-pause:hover {
  border-color: #FFA300;
}

.icon-c.a-pause.active,
.icon-c.a-pause:active {
  border-color: transparent;
  background-color: #FFA300;
}

.icon-c.a-pause:hover:before,
.icon-c.a-pause:hover:after {
  background-color: #FFA300;
}

.icon-c.a-pause.active:before,
.icon-c.a-pause.active:after,
.icon-c.a-pause:active:before,
.icon-c.a-pause:active:after {
  background-color: #FFFFFF;
}

/* = erro = */

.icon-c.a-close:hover {
  border-color: #F04848;
}

.icon-c.a-close.active,
.icon-c.a-close:active {
  border-color: transparent;
  background-color: #F04848;
}

.icon-c.a-close:hover:before,
.icon-c.a-close:hover:after {
  background-color: #F04848;
}

.icon-c.a-close.active:before,
.icon-c.a-close.active:after,
.icon-c.a-close:active:before,
.icon-c.a-close:active:after {
  background-color: #FFFFFF;
}

/* = stop = */

.icon-c.a-stop:hover {
  border-color: #747F8D;
}

.icon-c.a-stop.active,
.icon-c.a-stop:active {
  border-color: transparent;
  background-color: #747F8D;
}

.icon-c.a-stop:hover:after {
  background-color: #747F8D;
}

.icon-c.a-stop.active,
.icon-c.a-stop:active:after {
  background-color: #FFFFFF;
}

/* = reload = */

.icon-c.a-reload:hover {
  border-color: #747F8D;
}

.icon-c.a-reload.active,
.icon-c.a-reload:active {
  border-color: transparent;
  background-color: #747F8D;
}

.icon-c.a-reload:hover:before {
  color: #747F8D;
}

.icon-c.a-reload.active:before,
.icon-c.a-reload.active:after,
.icon-c.a-reload:active:before,
.icon-c.a-reload:active:after {
  color: #FFFFFF;
}

/* = help = */

.icon-c.a-help:hover {
  border-color: #747F8D;
}

.icon-c.a-help.active,
.icon-c.a-help:active {
  border-color: transparent;
  background-color: #747F8D;
}

.icon-c.a-help:hover:before {
  color: #747F8D;
}

.icon-c.a-help.active:before,
.icon-c.a-help.active:after,
.icon-c.a-help:active:before,
.icon-c.a-help:active:after {
  color: #FFFFFF;
}

/* == controls ads == */

.icon-c-a {
  width: 30px;
  height: 30px;
  border-width: 1px;
  border-style: solid;
  border-color: #999999;
  border-radius: 100%;
}

.icon-c-a.disable {
  pointer-events: none;
  opacity: 0.2;
}

.icon-c-a.icon-play:before,
.icon-c-a.icon-pause:before,
.icon-c-a.icon-file:before,
.icon-c-a.icon-visualize:before {
  width: 25px;
  height: 26px;
  font-size: 25px;
}

.icon-c-a:not(.line):hover {
  border-color: #00ACEC;
  background-color: #00ACEC;
}

.icon-c-a:not(.line):hover:before {
  color: #FFFFFF;
}

.icon-c-a.icon-visualize:hover,
.icon-c-a.icon-back:hover {
  border-color: #333333;
}

.icon-c-a.icon-visualize:hover:before,
.icon-c-a.icon-back:hover:before {
  color: #333333;
}

/* = icon-tooltip = */

.icon-tooltip {
  width: 15px;
  height: 15px;
  border-radius: 100%;
  background-color: #494949;
  vertical-align: middle;
  position: relative;
  display: inline-block;
}

.icon-tooltip:before,
.icon-tooltip:after {
  color: #FFFFFF;
  position: absolute;
  margin: auto;
}

.icon-tooltip:before {
  width: 7px;
  height: 10px;
  font-size: 10px;
  content: '?';
  line-height: 10px;
  text-align: center;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
}

.icon-tooltip:after {
  width: 220px;
  top: -10px;
  left: 20px;
  padding: 20px 20px 20px 20px;
}

/* = links ex: desativar conta = */

.link {
  font-weight: 100;
  letter-spacing: 1px;
}

.link,
.link:visited {
  color: #9C9C9C;
}

.link.azul,
.link.azul:visited {
  color: #00A8FF;
}

.link:hover {
  color: #212121 !important;
}

/* ====== buttons ====== */

.btn {
  min-width: 180px;
  font-size: 12px;
  cursor: pointer;
  text-align: center;
  text-transform: uppercase;
  line-height: 20px;
  letter-spacing: 2px;
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  padding: 10px 20px 10px 20px;
  display: inline-block;
}

.btn.small {
  min-width: inherit;
  padding: 5px 20px 5px 20px;
}

/* = disable = */

.btn.disable {
  pointer-events: none;
}

/* = background = */

.btn {
  color: #FFFFFF;
}

.btn.line {
  color: #999999;
  border-color: #AAAAAA;
  background-color: transparent !important;
}

.btn.line:hover {
  color: #777777;
  border-color: #888888;
}

/* = branco = */

.btn.branco {
  color: #212121;
  background-color: #FFFFFF;
}

.btn.branco2 {
  color: #a1a2a4;
}

.btn.branco2:hover {
  color: #D90047;
}
a.btn.branco2.br-20:hover .icon-20.icon-font:before {
  color:#D90047;
}


.btn.branco.line {
  color: #FFFFFF;
  border-color: #FFFFFF;
}

.btn.branco.line:hover {
  color: #212121;
  background-color: #FFFFFF !important;
}

/* = azul = */

.btn.azul {
  background-color: #00ACEC;
}

.btn.azul:hover {
  background-color: #0098D8;
}

.btn.azul.line {
  color: #00ACEC;
  border-color: #00ACEC;
}

.btn.azul.line:hover {
  color: #0098D8;
  border-color: #0098D8;
}

/* = rosa ( delete ) = */

.btn.rosa {
  background-color: #ED145B;
}

.btn.rosa:hover {
  background-color: #D90047;
}

.btn.pink-light{
  background-color: #FF0090;
  color: #fff;
}


.btn.rosa.line {
  color: #ED145B;
  border-color: #ED145B;
}

.btn.rosa.line:hover {
  color: #D90047;
  border-color: #D90047;
}

/* = verde = */

.btn.verde {
  background-color: #00C7C0;
}

.btn.verde:hover {
  background-color: #00B3AC;
}

.btn.verde.line {
  color: #00C7C0;
  border-color: #00C7C0;
}

.btn.verde.line:hover {
  color: #00B3AC;
  border-color: #00B3AC;
}

/* = roxo = */

.btn.roxo {
  background-color: #9966cb;
}

.btn.roxo:hover {
  background-color: #8041BE;
}

/* = laranja = */

.btn.laranja {
  background-color: #ff6819;
}

.btn.laranja:hover {
  background-color: #E85100;
}

/* = cinza = */

.btn.cinza {
  background-color: #F6F6F6;
}

.btn.cinza,
.btn.cinza .icon-font:before {
  color: #272727;
}

.btn.cinza:hover {
  background-color: #DDDDDD;
}

.btn.cinza.disable,
.btn.cinza.disable .icon-font:before {
  color: #CCCCCC;
}

/* = cinza escuro = */

.btn.cinza-e {
  color: #FFFFFF;
  background-color: #656565;
}

.btn.cinza-e:hover {
  background-color: #454545;
}

/* = facebook = */

.btn.facebook {
  background-color: #3B579D;
}

.btn.facebook.line {
  color: #3B579D;
  border-color: #3B579D;
}

.btn.facebook.line:hover {
  color: #FFFFFF;
  background-color: #3B579D !important;
}

.btn.facebook.line:hover .icon-font:before {
  color: #FFFFFF;
}

/* = twitter = */

.btn.twitter {
  background-color: #55ACEE;
}

.btn.twitter.line {
  color: #55ACEE;
  border-color: #55ACEE;
}

.btn.twitter.line .icon-font:before {
  color: #55ACEE;
}

.btn.twitter.line:hover {
  color: #FFFFFF;
  background-color: #55ACEE !important;
}

.btn.twitter.line:hover .icon-font:before {
  color: #FFFFFF;
}

/* = icon = */

.btn.twitter,
.btn.facebook,
.btn .icon-font {
  line-height: 20px;
  vertical-align: top;
}

.btn .icon-font {
  margin: 0px 10px 0px 0px;
  display: inline-block;
}

/* ====== loader ====== */

span.load {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  margin: auto;
  display: block;
}

span.load,
span.load:before,
span.load:after {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  animation: load 1.5s infinite;
  pointer-events: none;
}

span.load.black,
span.load.black:before,
span.load.black:after {
  animation: load-black 1.5s infinite;
}

span.load:before,
span.load:after {
  content: '';
  position: absolute;
}

span.load:before {
  left: -15px;
}

span.load:after {
  right: -15px;
}

span.load,
span.load.black {
  animation-delay: 0.2s;
}

span.load:before,
span.load.black:before {
  animation-delay: 0s;
}

span.load:after,
span.load.black:after {
  animation-delay: 0.5s;
}

@keyframes load {

  0% {
    background-color: rgba(255, 255, 255, 0);
  }

  50% {
    background-color: rgba(255, 255, 255, 0.9);
  }

  100% {
    background-color: rgba(255, 255, 255, 0);
  }

}

@keyframes load-black {

  0% {
    background-color: rgba(150, 150, 150, 0);
  }

  50% {
    background-color: rgba(150, 150, 150, 0.9);
  }

  100% {
    background-color: rgba(150, 150, 150, 0);
  }

}

/* ====== thumbnails, small, medium, large ====== */

.thumbnail {
  position: relative;
  overflow: hidden;
}

.thumbnail img {
  width: 100%;
  height: auto;
  min-height: 100%;
  display: block;
}

.thumbnail.thumb-s,
.thumbnail.thumb-m,
.thumbnail.thumb-l {
  border-style: solid;
  border-color: #FFFFFF;
  border-radius: 5px;
  box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.3);
  background-color: #DDDDDD;
}

.thumbnail.thumb-s {
  width: 40px;
  height: 40px;
  border-width: 2px;
}

.thumbnail.thumb-m {
  width: 80px;
  height: 80px;
  border-width: 4px;
}

.thumbnail.thumb-l {
  width: 180px;
  height: 180px;
  border-width: 6px;
}

/* ====== align ====== */

.left {
  float: left;
}

.right {
  float: right;
}

/* = vertical align ( middle ) = */

.middle span {
  width: 0px;
}

.middle a,
.middle span {
  vertical-align: middle;
  display: inline-block;
}

.middle.v-35,
.middle.v-35 span {
  height: 35px;
}

/* ====== input file ====== */

.input-file {
  cursor: pointer;
}

/* ====== bredcrumb ====== */

.breadcrumb {
  width: 100%;
  height: auto;
  border-radius: 5px;
  box-sizing: border-box;
  background-color: #F6F6F6;
  padding: 30px 30px 30px 30px;
  margin: 0px auto 20px auto;
  display: table;
}

.breadcrumb ul {
  width: 100%;
}

.breadcrumb ul li {
  font-size: 17px;
  color: #787878;
  line-height: 25px;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  float: left;
}

.breadcrumb ul li:nth-child(1),
.breadcrumb ul li:nth-child(3) {
  width: 25%;
}

.breadcrumb ul li:nth-child(2) {
  width: 40%;
  margin: 0% 5% 0% 5%;
}

.breadcrumb ul li:nth-child(3) .icon {
  display: none;
}

.breadcrumb ul li .number {
  width: 25px;
  height: 25px;
  font-size: 14px;
  text-align: center;
  border-radius: 100%;
  box-sizing: border-box;
  border: 1px solid #787878;
  line-height: 22px;
  margin: 0px 5px 0px 0px;
  vertical-align: top;
  display: inline-block;
}

.breadcrumb ul li .icon {
  position: absolute;
  top: 2px;
  right: -5px;
  margin: auto;
}

.breadcrumb ul li .icon:before,
.breadcrumb ul li .icon:after {
  width: 3px;
  height: 70%;
}

.breadcrumb ul.steps.step-1 li:nth-child(1),
.breadcrumb ul.steps.step-2 li:nth-child(1),
.breadcrumb ul.steps.step-2 li:nth-child(2),
.breadcrumb ul.steps.step-3 li:nth-child(1),
.breadcrumb ul.steps.step-3 li:nth-child(2),
.breadcrumb ul.steps.step-3 li:nth-child(3) {
  color: #F500C8;
}

.breadcrumb ul.steps.step-1 li:nth-child(1) .number,
.breadcrumb ul.steps.step-2 li:nth-child(1) .number,
.breadcrumb ul.steps.step-2 li:nth-child(2) .number,
.breadcrumb ul.steps.step-3 li:nth-child(1) .number,
.breadcrumb ul.steps.step-3 li:nth-child(2) .number,
.breadcrumb ul.steps.step-3 li:nth-child(3) .number {
  border-color: #F500C8;
}

/* ====== forms ====== */

/* = row = */

.formulario .row {
  width: 100%;
  margin: 0px 0px 20px 0px !important;
}

.formulario .row > .row {
  width: 100%;
  margin: 0px 0px 0px 0px;
}

.formulario .row.row-1-2 {
  width: 45%;
}

.formulario .row.row-2-3 {
  width:calc(66% - 2px);
}

.formulario .row.row-2-4 {
  width:calc(50% - 2px);
}


.formulario .row.row-1-3 {
  width: calc(100% / 3 - 2px);
}

.formulario .row.row-1-4 {
  width: 20%;
}

.formulario .row.row-1-2,
.formulario .row.row-1-3,
.formulario .row.row-1-4,
.formulario .row.row-2-3,
.formulario .row.row-2-4,
.display__bg {
  vertical-align: middle;
  display: inline-block;
}

.formulario .row.row-1-2 input[type='text'],
.formulario .row.row-1-3 input[type='text'],
.formulario .row.row-1-4 input[type='text'],
.formulario .row.row-1-2 input[type='url'],
.formulario .row.row-1-3 input[type='url'],
.formulario .row.row-1-4 input[type='url'],
.formulario .row.row-1-2 input[type='number'],
.formulario .row.row-1-3 input[type='number'],
.formulario .row.row-1-4 input[type='number'],
.formulario .row.row-1-2 > div,
.formulario .row.row-1-3 > div,
.formulario .row.row-1-4 > div {
  width: 90%;
}

.formulario .row.row-1-2.row-95 input[type='text'],
.formulario .row.row-1-3.row-95 input[type='text'],
.formulario .row.row-1-4.row-95 input[type='text'],
.formulario .row.row-1-2.row-95 input[type='url'],
.formulario .row.row-1-3.row-95 input[type='url'],
.formulario .row.row-1-4.row-95 input[type='url'],
.formulario .row.row-1-2.row-95 input[type='number'],
.formulario .row.row-1-3.row-95 input[type='number'],
.formulario .row.row-1-4.row-95 input[type='number'],
.formulario .row.row-1-2.row-95 > div,
.formulario .row.row-1-3.row-95 > div,
.formulario .row.row-1-4.row-95 > div {
  width: 95%;
}

.formulario .row.row-1-2.full input[type='text'],
.formulario .row.row-1-3.full input[type='text'],
.formulario .row.row-1-4.full input[type='text'],
.formulario .row.row-1-2.full input[type='url'],
.formulario .row.row-1-3.full input[type='url'],
.formulario .row.row-1-4.full input[type='url'],
.formulario .row.row-1-2.full input[type='number'],
.formulario .row.row-1-3.full input[type='number'],
.formulario .row.row-1-4.full input[type='number'],
.formulario .row.row-1-2.full .select,
.formulario .row.row-1-3.full .select,
.formulario .row.row-1-4.full .select {
  width: 100%;
}

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

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

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

/* = p = */

.formulario .row p {
  color: #AAAAAA;
}

/* = placeholder = */

.formulario ::-webkit-input-placeholder {
  color: #C8C8C8;
}

.formulario ::-moz-placeholder {
  color: #999999;
}

.formulario input.error::-webkit-placeholder {
  color: #ED145B;
}

.formulario input.error::-moz-placeholder {
  color: #ED145B;
}

/* = focus = */

.formulario input[type='password']:focus,
.formulario input[type='email']:focus,
.formulario input[type='text']:focus,
.formulario input[type='url']:focus,
.formulario input[type='number']:focus,
.formulario textarea:focus {
  color: #00ACEC;
  border-color: #00ACEC;
}

/* = error = */

.formulario input[type='password'].error,
.formulario input[type='email'].error,
.formulario input[type='text'].error,
.formulario input[type='url'].error,
.formulario input[type='number'].error,
.formulario textarea.error,
.formulario .select.error {
  color: #ED145B !important;
  border-color: #ED145B !important;
}

.formulario .error-container {
  width: auto;
  position: relative;
}

.formulario .error-container small {
  width: auto;
  font-size: 12px;
  color: #FFFFFF;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 4px;
  background-color: #ED145B;
  padding: 10px 20px 10px 20px;
  position: absolute;
  top: 10px;
  left: 10px;
  display: block;
  z-index: 1;
}

.formulario .error-container small:before {
  width: 0px;
  height: 0px;
  content: '';
  border-style: solid;
  border-width: 0px 5px 5px 5px;
  border-color: transparent transparent #ED145B transparent;
  position: absolute;
  top: -5px;
  left: 10px;
  margin: auto;
}

/* = input text, textarea = */

.formulario input[type='password'],
.formulario input[type='email'],
.formulario input[type='text'],
.formulario input[type='url'],
.formulario input[type='number'],
.formulario textarea,
.formulario .row .select {
  width: 100%;
  border: 1px solid #C4C9CD;
  border-radius: 30px;
  box-sizing: border-box;
  background-color: #FFFFFF;
  padding: 15px 20px 15px 20px;
  resize: none;
}

.formulario input[type='text']:disabled {
  background-color: #EEEEEE;
}

/* = input text, textarea, label = */

.formulario input[type='password'],
.formulario input[type='email'],
.formulario input[type='text'],
.formulario input[type='url'],
.formulario textarea,
.formulario .row .select,
.formulario label {
  color: #777777;
  letter-spacing: 1px;
  outline: none;
}

/* = input radio = */

.formulario .radio input[type='radio'] {
  width: 22px;
  height: 22px;
  cursor: pointer;
  position: absolute;
  opacity: 0;
  z-index: 1;
}

.formulario .disabled .radio input[type='radio'] {
    cursor: default;
}

.formulario .radio input[type='radio'] + label {
  font-weight: 100;
  color: #AAAAAA;
  position: relative;
  padding: 2px 0px 2px 30px;
}

.formulario .radio input[type='radio'] + label:before {
  width: 20px;
  height: 20px;
  content: '';
  background-color: #FFFFFF;
  border: 1px solid #C4C9CD;
  position: absolute;
  top: 0px;
  left: 0px;
}

.formulario .radio input[type='radio']:checked + label:after {
  width: 10px;
  height: 10px;
  content: '';
  background-color: #777777;
  position: absolute;
  top: 6px;
  left: 6px;
}

.formulario .radio input[type='radio'],
.formulario .radio input[type='radio'] + label {
  display: inline-block;
}

.formulario .radio input[type='radio'] + label:before,
.formulario .radio input[type='radio'] + label:after {
  border-radius: 100%;
}

.formulario .radio input[type='radio']:checked + label:before {
  border-color: #AAAAAA;
}

/* = input checkbox line = */

.checkbox-l input[type='checkbox'] {
  width: 22px;
  height: 22px;
  position: absolute;
  opacity: 0;
  z-index: 1;
}

.checkbox-l input[type='checkbox'] + label {
  font-weight: 100;
  color: #AAAAAA;
  letter-spacing: 1px;
  position: relative;
  padding: 2px 0px 2px 30px;
}

.checkbox-l input[type='checkbox'] + label:before {
  width: 20px;
  height: 20px;
  content: '';
  background-color: #FFFFFF;
  border: 1px solid #C4C9CD;
  position: absolute;
  top: 0px;
  left: 0px;
}

.checkbox-l input[type='checkbox']:checked + label:after {
  font-family: 'icomoon';
  font-size: 10px;
  content: "\e612";
  color: #777777;
  position: absolute;
  top: 6px;
  left: 6px;
}

.checkbox-l input[type='checkbox'],
.checkbox-l input[type='checkbox'] + label {
  display: inline-block;
}

.checkbox-l input[type='checkbox'] + label:before {
  border-radius: 2px;
}

.checkbox-l input[type='checkbox']:checked + label:before {
  border-color: #AAAAAA;
}

/* = input checkbox (button) = */

.formulario .checkbox input[type='checkbox'] {
  width: 75px;
  height: 30px;
  opacity: 0;
  z-index: 1;
}

.formulario .checkbox input[type='checkbox'] + label {
  width: 75px;
  height: 30px;
  border-radius: 30px;
  background-color: #ed145b;
  margin: 0px 0px 0px 0px;
  position: relative;
  display: block;
}

.formulario .checkbox input[type='checkbox']:checked + label {
  background-color: #0ECA35;
}

.formulario .checkbox input[type='checkbox'] + label:after {
  width: 28px;
  height: 28px;
  content: '';
  border-radius: 100%;
  background-color: #FFFFFF;
  top: 1px;
  left: 1px;
}

.formulario .checkbox input[type='checkbox']:checked + label:after {
  left: inherit;
  right: 1px;
}

.formulario .checkbox input[type='checkbox'] + label:before {
  height: 10px;
  font-size: 10px;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 10px;
  text-transform: uppercase;
  top: 10px;
  right: 14px;
}

.formulario .checkbox input[type='checkbox']:checked + label:before {
  left: inherit;
  left: 14px;
}

.formulario .checkbox input[type='checkbox'],
.formulario .checkbox input[type='checkbox'] + label:before,
.formulario .checkbox input[type='checkbox'] + label:after {
  position: absolute;
  cursor: pointer;
}

/* = label = */

.formulario label {
  font-weight: 400;
  margin: 0px 0px 10px 0px;
  display: block;
  cursor: default;
}

/* = textarea = */

.formulario textarea {
  min-height: 120px;
}

/* = input submit = */

.formulario input[type='submit'] {
  border: none;
  -webkit-appearance: none;
  appearance: none;
}

/* = div lenght = */

.formulario .lenght {
  position: relative;
}

.formulario .lenght .icon {
  position: absolute;
}

.formulario .lenght .a-up {
  top: 5px;
  right: 20px;
}

.formulario .lenght .a-down {
  bottom: 5px;
  right: 20px;
}

/* = div radio, input radio, div checkbox-l, input checkbox-l  = */

.formulario .row-1-2 .radio,
.formulario .row-1-3 .radio,
.formulario .row-60 .radio,
.formulario .row-1-2 .checkbox-l,
.formulario .row-1-3 .checkbox-l,
.formulario .row-60 .checkbox-l {
  width: 45% !important;
  margin: 0px 0px 10px 0px;
}

.formulario .radio,
.formulario .checkbox-l {
  position: relative;
  margin: 0px 20px 0px 0px;
  display: inline-block;
}

.formulario .radio label,
.formulario .checkbox-l label {
  margin: 0px 0px 0px 0px;
}

/* = div checkbox, input checkbox  = */

.formulario .checkbox {
  position: relative;
  margin: 0px 0px 0px 0px;
}

/* = div upload = */

.formulario .upload {
  width: 100%;
  height: auto;
  position: relative;
  margin: 0px auto 20px auto;
}

.formulario .upload .thumbnail {
  width: 100%;
  height: 300px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1) inset;
  background-color: #F2F2F2;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 150px auto;
  margin: 0px auto 20px auto;
}

.formulario .upload .thumbnail img {
  width: auto;
  height: 100%;
  margin: auto;
}

.formulario .upload.image .thumbnail {
  background-image: url(../images/upload-image.svg);
}

.formulario .upload.video .thumbnail {
  background-image: url(../images/upload-video.svg);
}

.formulario .upload .thumbnail .row {
  width: 60%;
  position: absolute;
  right: 0px;
  bottom: 25px;
  left: 0px;
  margin: auto
}

.formulario .upload .thumbnail .row .btn {
  width: 120px;
  margin: auto;
  display: block;
}

.formulario .upload .thumbnail .file-name {
  width: auto;
  font-weight: 100;
  letter-spacing: 1px;
  background-color: #DDDDDD;
  padding: 10px 20px 10px 20px;
  position: absolute;
  right: 18px;
  bottom: 15px;
  display: table;
}

.formulario .upload .thumbnail .a-close {
  border: 4px solid #F2F2F2;
  background-color: #D8DCDF;
  position: absolute;
  right: 6px;
  bottom: 36px;
}

/* = div time = */

.formulario .time input[type='text'] {
  width: 45% !important;
}

/* = div date = */

.formulario .date > div {
  margin: 0px 0px 10px 0px;
}

.formulario .date > div > div {
  position: relative;
  display: inline-block;
}

.formulario .date > div .day input[type='text'],
.formulario .date > div .hour input[type='text'] {
  width: 100%;
}

.formulario .date > div .day a {
  pointer-events: none;
  position: absolute;
  top: 13px;
  right: 20px;
}

.formulario .date > div .day a:before {
  color: #C4C9CD;
}

.formulario .date > div > div,
.formulario .date > div > div input[type='text'] {
  width: 30%;
}

/* = credit card = */

.formulario .credit-card {
  width: 100%;
  height: 42px;
  margin: 0px 0px 20px 0px;
  display: inline-block;
}

.formulario .credit-card .card {
  width: 52px;
  height: auto;
  margin: 0px 10px 0px 0px;
}

.formulario .credit-card .card img {
  width: 100%;
  display: block;
}

.formulario .credit-card .infos {
  max-width: 245px;
}

.formulario .credit-card .infos span {
  font-weight: 100;
  letter-spacing: 1px;
  display: block;
}

.formulario .credit-card,
.formulario .credit-card > div {
  vertical-align: middle;
  display: inline-block;
}

/* = contract = */

.formulario .contract {
  width: 100%;
  height: 140px;
  box-sizing: border-box;
  border-radius: 20px;
  border: 1px solid #c4c9cd;
  background-color: #FFFFFF;
  padding: 20px 20px 20px 20px;
  overflow-y: scroll;
}

.formulario .contract p {
  margin: 0px 0px 20px 0px;
}

/* = line space = */

.formulario .line-space {
  width: 100%;
  height: 1px;
  background-color: #DDDDDD;
  margin: 0px 0px 0px 0px;

}

/* = div range = */

.range {
  width: 300px;
  height: 40px;
  border-radius: 20px;
  margin: 0px auto 0px auto;
  background-color: #EEEEEE;
  position: relative;
}

.range input[type='range'] {
  margin: 20px 0px 0px 30px;
}

input[type='range'] {
  width: 240px;
  height: 1px;
  outline: none;
  background-color: #CCCCCC;
  -webkit-appearance: none;
  appearance: none;
}

input[type='range']::-webkit-slider-thumb {
  width: 15px;
  height: 15px;
  border-radius: 100%;
  background-color: #828282;
  -webkit-appearance: none;
  appearance: none;
}

/* == login facebook & twitter == */

.login .formulario .btn.facebook,
.login .formulario .btn.twitter {
  width: 100%;
  font-size: 11px;
  margin: 0px 0px 20px 0px;
  display: block;
}

.login .formulario .btn .icon-font {
  width: 20px;
  height: 20px;
}

.login .formulario .btn.facebook .icon-font:before {
  font-size: 16px;
  height: 16px;
}

.login .formulario .space {
  width: 100%;
  height: 18px;
  color: #CCCCCC;
  text-align: center;
  position: relative;
  margin: 0px 0px 20px 0px;
  display: block;
}

.login .formulario .space:before,
.login .formulario .space:after {
  width: 40%;
  height: 1px;
  content: '';
  background-color: #CCCCCC;
  position: absolute;
  top: 0px;
  bottom: 0px;
  margin: auto;
  display: block;
}

.login .formulario .space:before {
  left: 10px;
}

.login .formulario .space:after {
  right: 10px;
}

.login .formulario .link.azul {
  color: #00A8FF;
}

.login .formulario .checkbox-l {
  margin: 10px 0px 10px 0px;
}

/* ====== msgs ====== */

.msgs {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  margin: auto;
  display: none;
  pointer-events: none;
}

.msgs.show,
div:hover > .msgs.show-on-hover {
  display: table !important;
}

.msgs .text {
  vertical-align: middle;
  display: table-cell;
}

.msgs .text .load {
  position: relative;
}

.msgs .text .icon-font,
.msgs .text .load {
  margin: 0px auto 10px auto;
}

.msgs .text span,
.msgs .text span:after,
.msgs .text span:before {
  color: #FFFFFF;
}

.msgs .text .msg {
  width: 90%;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: auto;
  display: block;
}

/* ====== msgs empty ====== */

.msgs-empty {
  width: 100%;
  height: auto;
  margin: auto;
  position: relative;
  text-align: center;
}

.user-feed .msgs-empty {
  margin: 100px auto 150px auto;
}

.msgs-empty .image {
  background-repeat: no-repeat;
  background-position: center center;
  margin: 0px auto 20px auto;
}

.msgs-empty .image.robot {
  width: 150px;
  height: 150px;
  background-image: url("../images/robot.svg");
}

.msgs-empty .image.no-post {
  width: 65px;
  background-image: url("../images/no-post.svg");
}

.msgs-empty .image.no-post-user {
  width: 150px;
  background-image: url("../images/no-post-user.svg");
}

.msgs-empty .image.no-post,
.msgs-empty .image.no-post-user {
  height: 65px;
  background-size: cover;
}

.msgs-empty .image.block {
  width: 150px;
  height: 104px;
  background-image: url("../images/block.svg");
}

.msgs-empty .image.robot-500 {
  width: 150px;
  height: 150px;
  background-image: url("../images/robot-500.svg");
}

.msgs-empty p {
  width: 100%;
  font-weight: 400;
  color: #B6B6B6 !important;
  text-align: center;
  text-transform: uppercase;
  margin: 0px auto 0px auto !important;
}

.msgs-empty > .btn {
  margin: 20px auto 0px auto !important;
  display: inline-block !important;
}

/* = plans box = */

.plans-boxs {
  width: auto;
  margin: 0px auto 20px auto;
  display: table;
}

.plans-boxs .plan {
  width: 185px;
  height: auto;
  border-radius: 5px;
  border: 1px solid #DDDDDD;
  box-sizing: border-box;
  background-color: #FFFFFF;
  overflow: hidden;
  vertical-align: top;
  display: inline-block;
}

section.single .plans-boxs .plan {
  width: 250px;
}

/* = h3, li = */

.plans-boxs .plan h3,
.plans-boxs .plan ul li {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* = h3 = */

.plans-boxs .plan h3 {
  font-size: 18px;
  color: #FFFFFF;
  padding: 15px 10px 15px 10px;
  margin: 0px 0px 0px 0px;
}

/* = p = */

.plans-boxs .plan p {
  font-size: 13px;
  color: #FFFFFF;
  text-align: center;
  padding: 0 8px 20px 8px;
}

/* = li = */

.plans-boxs .plan ul li {
  width: 100%;
  font-weight: 100;
  color: #777777;
  box-sizing: border-box;
  position: relative;
  padding: 5px 10px 5px 10px;
}

.plans-boxs .plan ul li:not(.total):not(.duration) {
  height: 54px;
}

.payment-plan .plans-boxs .plan ul li:not(.total):not(.duration) {
  height: auto;
  padding: 10px 10px 10px 10px;
}

.plans-boxs .plan ul li:not(.total):not(.duration):after {
  width: 0px;
  height: 100%;
  content: '';
}

.plans-boxs .plan ul li span {
  width: 100%;
  font-weight: 100;
}

.plans-boxs .plan ul li span,
.plans-boxs .plan ul li:after {
  vertical-align: middle;
  display: inline-block;
}

/* = li blank = */

.plans-boxs .plan ul li.blank:before {
  width: 40px;
  height: 1px;
  content: '';
  background-color: #888888;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  margin: auto;
}

/* = li total = */

.plans-boxs .plan ul li.total {
  font-size: 24px;
  font-weight: 400;
  border-bottom: 1px solid #DDDDDD;
  padding: 20px 0px 20px 0px;
  margin: 0px 0px 0px 0px;
}

/* = li duration = */

.plans-boxs .plan ul li.duration {
  border-bottom: 1px solid #DDDDDD;
  padding: 20px;
  margin-bottom: 20px;
}

/* = li action = */

.plans-boxs .plan ul li.action {
  height: 80px;
  border-top: 1px solid #DDDDDD;
  margin: 20px 0px 0px 0px;
}

.plans-boxs .plan ul li.action.first {
  border-top: none;
  border-bottom: 1px solid #DDDDDD;
  margin: 0px 0px 20px 0px;
}

.plans-boxs .plan ul li.action form {
  display: inline-block;
}

.plans-boxs .plan ul li.action .btn {
  width: 150px;
  min-width: inherit;
}

.plans-boxs .plan ul li.action.card {
  height: auto;
}

.plans-boxs .plan ul li.action.card img {
  display: inline-block;
  vertical-align: baseline;
}

.plans-boxs .plan ul li.action.card span {
  text-transform: none;
  margin: 5px auto 10px auto;
  display: block;
}

.plans-boxs .plan ul li.action.card .stripe {
  margin: 10px 0;
  max-width: 100px;
}

/* = li action disable = */

.plans-boxs .plan.disable ul li.action {
  font-weight: 400;
  color: #FFFFFF;
}

/* == plans colors == */

/* = free = */

.plans-boxs .plan.plan-1 h3,
.plans-boxs .plan.plan-1 p{
  background-color: #FF6819;
}

.plans-boxs .plan.plan-1 .btn {
  background-color: #ff6819;
}

.plans-boxs .plan.plan-1 .btn:hover{
  background-color: #E85100;
}

/* = web = */

.plans-boxs .plan.plan-2 h3,
.plans-boxs .plan.plan-2 .btn,
.plans-boxs .plan.plan-2.btn:hover,
.plans-boxs .plan.plan-2 p {
  background-color: #00C7C0;
}

/* = tv = */

.plans-boxs .plan.plan-3 h3,
.plans-boxs .plan.plan-3 .btn,
.plans-boxs .plan.plan-3 .btn:hover,
.plans-boxs .plan.plan-3 p,
.plans-boxs .plan.plan-9 h3,
.plans-boxs .plan.plan-9 .btn,
.plans-boxs .plan.plan-9 .btn:hover,
.plans-boxs .plan.plan-9 p{
  background-color: #9966CB;
}

/* = courtesy = */

.plans-boxs .plan.plan-4 h3,
.plans-boxs .plan.plan-4 .btn,
.plans-boxs .plan.plan-4 .btn:hover,
.plans-boxs .plan.plan-5 h3,
.plans-boxs .plan.plan-5 .btn,
.plans-boxs .plan.plan-5 .btn:hover {
  background-color: #4D82DF;
}

/* = disable = */

.plans-boxs .plan.disable h3,
.plans-boxs .plan.disable p,
.plans-boxs .plan.disable ul li.action {
  background-color: #8E8E8E;
}

/* = pro plan + box = */
.plans-boxs .plan.plan-7 h3,
.plans-boxs .plan.plan-7 .btn,
.plans-boxs .plan.plan-7 .btn:hover,
.plans-boxs .plan.plan-7 p{
  background-color: #9966cb;
}

/* ====== modals ====== */

.modal {
  max-height: 90%;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  margin: auto;
  z-index: 101;
}

/* == modal alert == */

.modal-alert {
  width: 520px;
  height: auto;
  overflow: hidden;
  bottom: inherit;
}

.modal-alert .header {
  width: auto;
  background-color: #1F2229;
  padding: 25px 25px 25px 25px;
}

.modal-alert .header h3 {
  font-size: 20px;
  color: #FFFFFF;
}

.modal-alert .content-main {
  background-color: #FFFFFF;
}

/* = main = */

.modal-alert .content-main .main {
  width: auto;
  padding: 25px 25px 25px 25px;
}

.modal-alert .content-main .main p {
  font-size: 14px;
  color: #333333;
  margin: 0px 0px 20px 0px;
}

/* = options = */

.modal-alert .content-main .options {
  width: 100%;
  box-sizing: border-box;
  margin: 25px 0px 0px 0px;
  display: table;
}

.modal-alert .content-main .options .link {
  font-size: 13px;
  letter-spacing: 2px;
}

/* == modal add account == */

/* = steps = */

.modal-alert .steps {
  width: auto;
  background-color: #EBEBEB;
  padding: 25px 25px 25px 25px;
}

.modal-alert .steps ul {
  display: table;
}

.modal-alert .steps ul li {
  font-size: 15px;
  font-weight: 100;
  color: #AAAAAA;
  letter-spacing: 1px;
  margin: 0px 10px 0px 0px;
  vertical-align: middle;
  display: inline-block;
}

.modal-alert .steps ul li:before {
  font-size: 19px;
  content: '→';
  line-height: 17px;
  margin: 0px 10px 0px 0px;
  vertical-align: top;
}

.modal-alert .steps ul li.select,
.modal-alert .steps ul li:first-child.select:before {
  color: #262626;
}

.modal-alert .steps ul li:first-child:before {
  display: none;
}

.modal-alert .steps ul li span {
  width: 40px;
  height: 40px;
  vertical-align: middle;
}

/* = connect = */

.modal-alert .connect .icon-font {
  width: 100px;
  height: 100px;
  background-color: #C5C6CA;
  margin: 0px 7px 14px 7px;
  display: inline-block;
}

.modal-alert .connect .icon-font:before {
  color: #FFFFFF;
}

/* = capture = */

/*.modal-alert .connect .network,
.modal-alert .connect .formulario {
display: none;
}

.modal-alert .connect .network,
.modal-alert .connect .formulario {
display: block;
}*/

/* .modal-alert .connect .capture .t-buttons { */
.t-buttons {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid #00ACEC;
  margin: 0px auto 20px auto;
  display: table;
}

.t-buttons a {
  width: 50%;
  font-weight: 100;
  color: #00ACEC;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 15px 0px 15px 0px;
  margin: 0px 0px 0px 0px;
  display: block;
  float: left;
}

.t-buttons a.select {
  font-weight: 400;
  color: #FFFFFF;
  background-color: #00ACEC;
  pointer-events: none;
}

.modal-alert .connect .capture .list {
  width: 100%;
  height: 250px;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;

}

.modal-alert .connect .capture .list .item {
  width: 100%;
  height: auto;
  cursor: pointer;
  box-sizing: border-box;
  border: 1px solid #C4C9CD;
  background-color: #F4F4F4;
  position: relative;
  padding: 15px 15px 15px 15px;
  margin: 0px 0px 10px 0px;
}

.modal-alert .connect .capture .list .item.disabled {
  cursor: default;
}

.modal-alert .connect .capture .list .item:hover,
.modal-alert .connect .capture .list .item.select,
.modal-alert .connect .capture .list .item.disabled {
  background-color: #FFFFFF;
}

.modal-alert .connect .capture .list .item:last-child {
  margin: 0px 0px 0px 0px;
}

.modal-alert .connect .capture .list .item .thumbnail {
  margin: 0px 20px 0px 0px;
}

.modal-alert .connect .capture .list .item .infos {
  width: 280px;
}

.modal-alert .connect .capture .list .item .infos strong {
  color: #272727;
  letter-spacing: 1px;
}

.modal-alert .connect .capture .list .item .infos span {
  font-weight: 100;
  color: #AAAAAA;
  letter-spacing: 2px;
}

.modal-alert .connect .capture .list .item .infos span,
.modal-alert .connect .capture .list .item .infos strong {
  display: block;
}

.modal-alert .connect .capture .list .item .infos label {
  cursor: pointer;
}

.modal-alert .connect .capture .list .item .thumbnail,
.modal-alert .connect .capture .list .item .infos {
  vertical-align: top;
  display: inline-block;
}

.modal-alert .connect .capture .list .item .radio {
  height: 23px;
  position: absolute;
  top: 0px;
  right: 10px;
  bottom: 0px;
  margin: auto 0px auto 0px;
}

.modal-alert .connect .capture .list .item .radio label {
  height: 18px;
}

/* = select = */

.modal-alert .connect .capture .list .item.select .radio input[type='radio'] + label:before {
  border: 1px solid #999999;
}

.modal-alert .connect .capture .list .item.select .radio input[type='radio']:checked + label:after {
  background-color: #999999;
}

/* = disabled = */

.modal-alert .connect .capture .list .item.disabled .radio input[type='radio'] + label:before {
  border: 1px solid #43B582;
}

.modal-alert .connect .capture .list .item.disabled .radio input[type='radio'] + label:after {
  width: 10px;
  height: 10px;
  font-family: 'icomoon';
  font-size: 10px;
  content: '\e612';
  color: #43B582;
  background-color: transparent;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 6px;
  margin: auto;
}

/* == modal post == */

.modal.post {
  width: 1024px;
}

.modal.post .media:after,
.modal.post .media img,
.modal.post .media iframe,
.modal.post .media video {
  vertical-align: middle;
  display: inline-block;
}

.modal.post .media img,
.modal.post .media iframe,
.modal.post .media video {
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

.modal.post .post-infos {
  background-color: #FFFFFF;
}

/* == video, iframe == */

.modal.post .media iframe,
.modal.post .media video {
  width: 100%;
  height: 100%;
}

::cue {
  color: #fff;
  position: absolute;
  background: none;
  text-shadow: 2px 2px 4px black;
  font-size: 26px;
}

@media (min-width: 760px) {
  .modal.post .media .fb-video{
    display: table;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}

/* == photo == */

.modal.post.photo {
  height: 640px;
}

.modal.post.photo .media {
  width: 640px;
  height: 100%;
  border-radius: 6px 0px 0px 6px;
  background-color: #111111;
  text-align: center;
  position: relative;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  float: left;
}

.modal.post.photo .media:after {
  width: 0px;
  height: 100%;
  content: '';
  background-color: #876a96;
}

.modal.post.photo .media > small {
  height: 100%;
  display: none;
}

.modal.post.photo .post-infos {
  width: 384px;
  height: 100%;
  border-radius: 0px 6px 6px 0px;
  float: right;
}

/* == text == */

.modal.post.text {
  width: 480px;
  height: 320px;
}

.modal.post.text .post-infos {
  width: 100%;
  height: 100%;
  border-radius: 6px 6px 6px 6px;
  display: table;
}

/* == close == */

.modal > .icon.a-close {
  position: absolute;
}

.modal.post > .icon.a-close {
  top: 5px;
  right: 5px;
}

.modal-alert > .icon.a-close {
  top: 20px;
  right: 20px;
}

.modal-alert > .icon.a-close:before,
.modal-alert > .icon.a-close:after {
  background-color: #FFFFFF;
}

/* ====== overlay ====== */

.overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 100;
}

/* ====== modal, overlay ====== */

.modal,
.overlay {
  display: none;
}

/* ====== show, hide ====== */

.hide,
.ng-hide {
  display: none !important;
}

.show {
  display: block !important;
}
.form-register{
  width: 820px;
}
.formulario .row.row-1-3.size-number {
  width:calc(100% / 3 - -4px);
}

.hidden-xs{
  display: block;
}
.show-xs{
  display: none;
}
@media (max-width: 1023px){

  .form-register{
    width: 100%;
  }

  section.settings .content-main .plans .table .text .plans-boxs .plan{
    width: 100%;
    margin-bottom: 20px;
  }
  .payment-plan{
    float: none;
  }
  .plans-boxs .plan, .plans-boxs{
    width: 100%;
  }
  .hidden-list-xs .plan li{
    display: none;
  }
  .hidden-list-xs .plans-boxs .plan ul li.total{
    border-bottom: none;
    padding-bottom: 0px;
  }
  .hidden-list-xs .plan .total, .plan .action.card{
    display: block;
  }
  .plans-boxs .plan ul li.action.card .stripe {
    margin: 3px 0;
  }
  section.settings .content-main .plans .table .text .plans-boxs .plan:nth-child(2){
    margin: 0 0 20px 0;
  }

  section.settings .content-main .plans.left{
    float: none;
    width: 100%;
  }
  .row .select2-container, .formulario input {
    width: 100% !important;
  }
  .formulario .line-space{
    clear: both;
  }
  #form-ddd{
    width: 72px !important;
    margin-right: 8px;
  }
  #form-tel{
    width: calc(100% - 80px) !important;
  }
  .hidden-xs{
    display: none;
  }
  .show-xs{
    display: block;
  }

}