/*!BASIC CSS
 * Author:  Diário de Notícias da Madeira
 * Email:   dep.informatica@dnoticias.pt
 * ---
 * Project: Casamento de Sonho 2019 (2022-02-09)
 * URL:     https://casamentodesonho.dnoticias.pt/
 */

.btn-votacao {
  display: block; position: relative; float: left;
  width: 200px;
  overflow: hidden; /*margin-bottom: 7px;*/
  background: #f1f3f5; border-radius: 20px;
}
.btn-votacao a {
  /*display: block;*/ position: relative;
  float: left; padding: 0 10px;
  width: 50px; height: 40px;
  text-align: center; line-height: 32px;
  text-decoration: none;

  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;

  /*background: #ffffff;
  -webkit-box-shadow: inset 0px 0px 5px rgba(0,0,0,.25);
  -moz-box-shadow: inset 0px 0px 5px rgba(0,0,0,.25);
  box-shadow: inset 0px 0px 5px rgba(0,0,0,.25);*/
}
.btn-votacao a.credits-single {border-radius: 20px 0 0 20px;}
.btn-votacao a.credits-total {border-radius: 0 20px 20px 0;}


.btn-votacao:before {
  display: none; position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  content: "";
  background: #e3e6ea;
  z-index: 11;
  opacity: .8;
}
.btn-votacao:after {
  display: none; position: absolute;
  left: 50%; top: 50%;
  margin: -11px 0 0 -7px;
  width: 14px; height: 14px;
  border: 4px solid #e71846;
  border-right-color: #e3c3ce;
  z-index: 12;
  border-radius: 50%;
  content: "";
}

.btn-votacao.loading:before {
  display: block;
}
.btn-votacao.loading:after {
  display: block;
  -webkit-animation: spin .7s linear infinite;
  -moz-animation: spin .7s linear infinite;
  animation: spin .7s linear infinite;
}
@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
  100% { 
    -webkit-transform: rotate(360deg); 
    transform:rotate(360deg); 
  } 
}


.btn-votacao a > strong {
  display: block; height: 22px;
  font-size: 16px; line-height: 22px;
}
.btn-votacao .btn-slct-credits {
  display: block; position: relative;
  width: 100%; height: 40px;
  background: #ffffff;
}
.btn-votacao .btn-slct-credits a:hover {color: #e71846;}
.btn-votacao a .btn-votacao-sub {
  display: block; position: relative;
  /*left: 0; top: 3px;*/
  width: 100%; height: auto;
  font-size: 8px; line-height: 8px;
  text-align: center;
  padding: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.btn-votacao .btn-slct-credits span a {
  display: block; position: relative; float: left;
  width: 50px; padding: 0;
  font-size: 10px; line-height: 40px; text-transform: uppercase;
  text-align: center; font-weight: bold;
  color: #999b9c; background: #f1f3f5;
  -webkit-box-shadow: inset 0px 0px 5px rgba(0,0,0,.25);
  -moz-box-shadow: inset 0px 0px 5px rgba(0,0,0,.25);
  box-shadow: inset 0px 0px 5px rgba(0,0,0,.25);
}
.btn-votacao a.btn-votar {
  display: block; position: absolute; top: 0; left: 0;
  width: 70px; height: 40px; /*visibility: hidden;*/
  background: #e2385e; color: #fff;
  border-radius: 20px; z-index: 10;
  text-align: center; font-weight: bold;
  line-height: 40px; text-transform: uppercase;
  padding-right: 40px; padding-left: 14px; overflow: hidden;
  -webkit-transition: left .25s cubic-bezier(0.455, 0.03, 0.515, 0.955), width .25s cubic-bezier(0.455, 0.03, 0.515, 0.955), background-color .25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-transition: left .25s cubic-bezier(0.455, 0.03, 0.515, 0.955), width .25s cubic-bezier(0.455, 0.03, 0.515, 0.955), background-color .25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: left .25s cubic-bezier(0.455, 0.03, 0.515, 0.955), width .25s cubic-bezier(0.455, 0.03, 0.515, 0.955), background-color .25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.btn-votacao a.btn-votar:hover,
.btn-votacao a.btn-votar:active {background: #e71846;}
.btn-votacao a.btn-votar:before {
  display: block; position: absolute;
  right: 0; top: 0;
  width: 100%; height: 50%;
  background: rgba(255,255,255,.1);
  content: "";
}
.btn-votacao a.btn-votar:after {
  display: block; position: absolute;
  right: 14px; top: 10px;
  width: 23px; height: 20px;
  background: url(../imgs/nav-credits.png) no-repeat 0 0;
  content: "";
}
.btn-votacao .credits-single {
  width: 50px; 
  padding-left: 15px; padding-right: 35px;
}
.btn-votacao .credits-total {
  width: 50px; 
  padding-right: 20px; padding-left: 30px;
}
.btn-votacao a.btn-votar.credits-single {left: 0;}
.btn-votacao a.btn-votar.credits-total {
  left: 65px;
  width: 80px; /*background: #e91b4b;*/
}
/*.btn-votacao a.btn-votar.credits-total:hover {background: #e71846;}
.btn-votacao a.btn-votar.credits-total:active {background: #b30897;}*/
.btn-votacao.disabled a.btn-votar {
  color: #a5a5a5; background: #696969!important; 
  left: 0; width: 70px;
}
.btn-votacao.disabled a.btn-votar:after {opacity: .2;}
.btn-votacao.disabled .btn-slct-credits > a {color: #999b9c; background: #f1f3f5;}

/* Animação */
.animation {
  animation-duration: 5s;
  animation-name: animate;
}
.animation strong {
  display: inline-block;
  animation-duration: .3s;
  animation-name: animatetxt;
  animation-timing-function: linear;
  transform-style: preserve-3d;
  perspective: 1000px;
  transform-origin: center;
}
/*@keyframes animate {
  0% {background-color: #fffef1; opacity: 0.5;}
  100% {background-color: #ffffff; opacity: 1;}
}*/
@keyframes animatetxt {
  /*0% {transform: scale(1); color: #575656;}
  75% {transform: scale(1.3); color: #e71846;}
  100% {transform: scale(1); color: #575656;}*/

  0% {transform: rotateY(0deg); color: #231f20;}
  50% {transform: rotateY(180deg); color: #e71846;}
  100% {transform: rotateY(0deg); color: #231f20;}
}

.modal {
  vertical-align: middle; padding: 40px 30px 30px 30px;
  width: 100%; max-width: 420px;
  -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,.35);
  -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,.35);
  box-shadow: 0px 0px 20px 0px rgba(0,0,0,.35);
  box-sizing: border-box;
  font-size: 14px; line-height: 20px;
  text-align: left; color: #8c8c8c;
  border-radius: 10px;
}
.modal#credits-buy {max-width: 360px;}
.modal#modal-newsletter {max-width: 360px;}
.modal ul.credits-buy-packs {
  overflow: hidden;
  margin-bottom: 28px;
  text-align: center;
}
.modal ul.credits-buy-packs li {
  display: block; float: left;
  padding: 21px 14px; border-radius: 7px;
  box-sizing: border-box;
  width: calc(50% - 14px);
  border: 1px solid #e8eaec;
}
.modal ul.credits-buy-packs li {margin: 0 7px;}
.modal ul.credits-buy-packs li strong {
  display: block;
  font-size: 11px; color: #000;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.modal ul.credits-buy-packs li > span {
  display: inline-block; float: none;
  width: 100%; margin-top: 7px;
  font-size: 16px; font-weight: bold;
  color: #e2385e;
}
.modal a.btn {
  display: inline-block; position: relative;
  padding: 0 30px; margin-top: 10px;
  font-size: 14px;
  line-height: 48px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  background: #e2385e;
  letter-spacing: 1px;
  border-radius: 24px;
}
.modal a.btn:hover {
  text-decoration: none;
  background-color: #e71846;
}
.modal a.btn-underline {
  display: block;
  color: #8c8c8c;
  text-decoration: underline;
  margin-top: 20px;
}
.modal a.btn-underline:hover {
  color: #e71846;
}
.modal p {
  margin-bottom: 15px;
  text-align: center;
  font-size: 16px;
  line-height: 20px;
}
.modal h4 {
  color: #e2385e;
  text-align: center;
  margin: 0;
}
.modal h4 em {color: #ffbeb8; font-style: normal;}
.modal h5 {display: inline-block; color: #982f88;}
.modal h6 {
  display: inline-block;
  color: #000000;
  font-weight: bold;
}

.modal input {
  display: block;
  position: relative;
  width: 100%;
  padding: 10px 20px;
  box-sizing: border-box;
  border: 1px solid #ddd4dc;
  border-radius: 6px;
  font-size: 18px;
  line-height: 24px;
  color: #505050;
  text-align: center;
  background: #f5ebf4;
}
/* VOTAÇÕES NAV */
/*.nav-credits {
  display: block; position: fixed;
  right: 28px; bottom: 14px; 
  padding-bottom: 30px; padding-top: 30px;
  width: 160px; height: 0px;
  background: #fff;
  z-index: 100;
  border-radius: 14px;
  overflow: hidden;
  -webkit-box-shadow: 0px 3px 10px rgba(0,0,0,.35);
  -moz-box-shadow: 0px 3px 10px rgba(0,0,0,.35);
  box-shadow: 0px 3px 10px rgba(0,0,0,.35);
  -webkit-transition: height .17s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-transition: height .17s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: height .17s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.nav-credits .nav-credits-header {
  display: block; position: absolute;
  left: 0; top: 0; width: 100%;
  box-sizing: border-box;
  padding: 7px 14px;
  background: #ffffff;
  -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.15);
  -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.15);
  box-shadow: 0px 1px 3px rgba(0,0,0,.15);
}
.nav-credits .nav-credits-header h4 {
  font-size: 11px; line-height: 16px;
  color: #951b81; text-transform: uppercase;
}
.nav-credits .nav-credits-header:hover h4 {color: #de00ba;}
.nav-credits .nav-credits-header:after {
  display: block; position: absolute;
  top: 4px; right: 8px;
  width: 25px; height: 25px;
  background: url(../imgs/nav-credits.png) no-repeat -30px 0;
  content: "";
}
.nav-credits .btn-credits-user {
  display: block; position: relative;
  padding: 7px 14px; font-size: 11px;
  background-color: #dfe2e6;
  -webkit-box-shadow: inset 0px 0px 5px rgba(0,0,0,.25);
  -moz-box-shadow: inset 0px 0px 5px rgba(0,0,0,.25);
  box-shadow: inset 0px 0px 5px rgba(0,0,0,.25);
}
.nav-credits .nav-credits-footer {
  display: block; position: absolute;
  left: 0; bottom: 0;
  padding: 7px 34px 7px 14px; width: 100%;
  font-size: 11px; line-height: 16px;
  font-weight: bold; background: #ffffff;
  -webkit-box-shadow: 0px 0px 1px rgba(0,0,0,.15);
  -moz-box-shadow: 0px 0px 1px rgba(0,0,0,.15);
  box-shadow: 0px 0px 1px rgba(0,0,0,.15);
  box-sizing: border-box; z-index: 10;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 160px;
  overflow: hidden;
}
.nav-credits .nav-credits-footer a {
  color: #a3a3a3;
}
.nav-credits .ico-help {
  display: block; position: absolute;
  width: 14px; height: 14px;
  right: 19px; top: 7px;
  margin-right: -5px; text-indent: -5555px;
  background: url(../imgs/nav-credits.png) no-repeat -60px 0;
}
.nav-credits-sub {
  display: block; position: relative;
  font-size: 12px; line-height: 16px;
  font-weight: bold;
}
.nav-credits-sub h5 {
  padding: 7px 14px 3px 14px; 
  font-weight: normal;
}
.nav-credits-sub ul {padding-bottom: 5px;}
.nav-credits-sub ul li {padding: 3px 14px; }
.nav-credits-sub ul li a span {display: inline-block; float: right;}
.nav-credits-sub a {display: block; width: 100%; }
.nav-credits-sub a:hover {text-decoration: underline;}

.nav-credits-bg {
  display: block; position: fixed;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(64, 64, 64, 0.85);
  z-index: 20;
  -webkit-transition: opacity .17s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-transition: opacity .17s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: opacity .17s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  visibility: hidden; opacity: 0; 
}
.btn-open-nav {cursor: pointer;}*/

/* NAV CREDITS OPENED */
/*.nav-credits-opened {overflow: hidden;}
.nav-credits-opened .nav-credits {height: 137px;}
.nav-credits-opened .nav-credits-bg {visibility: visible; opacity: 1;}*/

@media screen and (max-width: 480px) {
/*  .btn-votacao {
    float: none!important;
    margin: 0 auto 10px auto;
  }
  .nav-credits {right: 7px; bottom: 7px;}*/
}
@media screen and (max-width: 420px) {
  .modal {width: 100%; min-height: 100%; overflow: visible;}
}