/*!BASIC CSS
 * Author:  Diário de Notícias da Madeira
 * Email:   dep.informatica@dnoticias.pt
 * ---
 * Project: DNOTICIAS.PT (2018-12-11)
 * URL:     http://www.dnoticias.pt
*/

/* GENERIC */
.inf-usr-generic {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
  align-content: flex-start;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.inf-usr-generic.inf-usr-modal {
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}
.inf-usr-generic .inf-usr--center {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.inf-usr-generic h2 {
  font: 700 12px/16px 'Titillium Web', Helvetica, Arial, sans-serif;
  text-align: center; text-transform: uppercase;
  margin-bottom: 7px; color: #4285f4; letter-spacing: 1px;
}
.inf-usr-generic h2 + p {
  font-size: 14px; line-height: 16px;
  text-align: center; color: #002665;
  margin-bottom: 14px;
}
.inf-usr-generic h3 {
  font: 700 15px/19px 'Titillium Web', Helvetica, Arial, sans-serif;
  letter-spacing: 1px;
}
.inf-usr-generic p, .inf-usr-generic ul {
  font: 400 12px/16px 'Titillium Web', Helvetica, Arial, sans-serif;
  color: #002665;
}
.inf-usr-generic .inf-txt-dblue {color: #002665;}
.inf-usr-generic a {color: #4285f4; border-color: #4285f4;}
.inf-usr-generic ul {width: 120px; margin: 0 auto;}
.inf-usr-generic ul li:before {content: "➢ ";}

.inf-bg-blue {background: #4285f4;}
.inf-bg-blue h2, .inf-bg-blue h3, .inf-bg-blue p, 
.inf-bg-blue ul, .inf-bg-blue a {color: #ffffff; border-color: #ffffff;}
.inf-usr-generic .planos-prices {
  display: inline-block;
  font-family: 'Titillium Web', Helvetica, Arial, sans-serif;
  font-size: 13px; line-height: 13px; text-align: center; 
  color: #ffffff; font-weight: normal;
  text-transform: uppercase; padding: 0 14px;
}
.inf-usr-generic .planos-prices strong {font-size: 26px; line-height: 16px; font-weight: 700;}
.inf-usr-generic .planos-prices em {font-size: 18px; line-height: 18px;}

.inf-usr-generic .planos-prices h3 {
  font: 700 10px/10px 'Titillium Web', Helvetica, Arial, sans-serif;
  text-align: center;  color: #ffffff; margin-bottom: 4px;
  max-width: 320px;
}
.inf-usr-generic .btn {margin: 0;}

/* TYPE - Modal & Ticker */
.inf-usr-modal {
  /*opacity: 0; visibility: hidden;*/
  position: fixed; left: 50%; top: 50%; min-height: 240px;
  transform: translate(-50%, -50%);
  background: #ffffff; z-index: 200;
  -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,.17);
  -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,.17);
  box-shadow: 0px 3px 5px 0px rgba(0,0,0,.17);
}
.inf-usr-modal > div {
 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: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  width: 240px;
  padding: 30px 28px;
}
#md-login.inf-usr-modal > div {width: 300px;}
.inf-usr-modal-bg {
  display: none; position: fixed; /*visibility: hidden;*/
  left: 0; top: 0; z-index: 199;
  width: 100%; height: 100%;
  background: rgba(10,19,45,.9);
}
/*.usr_logged #md-anonymous {display: none;}*/
#md-anonymous {
  /*visibility: hidden; bottom: -30px;*/
  position: fixed; left: 0; bottom: 0; width: 100%;
  padding: 14px 0; z-index: 150;
}
.inf-usr-ticker .inf-usr--right {text-align: right;}
.inf-usr-ticker p {font-size: 13px;}
.inf-usr--middle {text-align: center; margin: 14px 0;}
.inf-usr-ticker .col-center > div {width: 33%;}
.inf-usr-ticker .col-center .inf-usr--left p {
  max-width: 320px;
  font-size: 11px; line-height: 12px;
}

/* BTN - Fechar */
a.inf-usr-close {
  display: block; position: absolute;
  right: 7px; top: 7px;
  padding: 0;
  width: 20px; height: 20px;
  font-size: 11px; line-height: 18px;
  text-align: center; color: #ffffff; text-decoration: none;
}
a.inf-usr-close span {display: none;}

/* BTN - Rounded */
.btn-rounded {
  font-size: 11px; line-height: 11px;
  padding: 12px 20px; letter-spacing: 1px;
}
.btn-rounded-outline {
  background: transparent;
  border: 1px solid #ffffff;
}
.btn-rounded-outline:hover {
  background-color: #ffffff;
  color: #4285f4;
}
.inf-usr-modal, .inf-usr-ticker {display: none;}
.md-open.inf-usr-ticker {display: block;}
.md-open.inf-usr-modal {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
#errors, #messages {
  display: none; position: fixed;
  top: 0; left: 0;
  z-index: 200;
  width: 100%;
}
.alert {
  padding: 14px 28px;
  font-size: 16px; line-height: 20px;
  text-align: center; color: #000000;
  border-bottom: 1px solid #f9f6e6;
  background: #fffdf5;
}
.alert.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

/********************** FORM **********************/
form legend {
  font: 700 20px/24px 'Titillium web', Helvetica, Arial, sans-serif;
  color: #000000; margin-bottom: 15px;
  letter-spacing: 0; text-transform: none;
}
form label, .label {
  display: inline-block; padding-bottom: 5px;
  font: 400 12px/16px 'Titillium web', Helvetica, Arial, sans-serif;
  color: #000000;
}
form input, form select, form textarea {
  display: block; position: relative;
  width: 100%; padding: 7px 15px;
  font: 400 16px/16px 'PT Serif', serif;
  color: #000000;
  border: 1px solid #dedede;
  background: #ffffff;
}
form button, form input[type="submit"] {
  /*display: block; position: relative;
  width: auto; padding: 10px 25px; margin: 14px auto 0;
  font: 700 14px/14px 'Titillium web', Helvetica, Arial, sans-serif;
  color: #ffffff; background: #4285f4; border: 0;
  cursor: pointer; border-radius: 2px;*/
}
form button:hover, form input[type="submit"]:hover,
form button:focus, form input[type="submit"]:focus {background: #3a76d8;} 
form input[type="radio"], form input[type="checkbox"] {
  display: inline-block; 
  width: auto; top: 3px;
  margin-left: 0; margin-right: 5px;
}
form button {
  display: block; position: relative;
  width: 100%; padding: 7px 15px;
  font: 700 14px/14px 'Titillium web', Helvetica, Arial, sans-serif;
  color: #ffffff; background: #4285f4;
}
form .btn {
  display: inline-block; position: relative;
  width: auto;
  padding: 10px 20px;
  font: 700 14px/20px 'Titillium web', Helvetica, Arial, sans-serif;
  text-align: center;
  color: #ffffff;
  cursor: pointer;
  text-decoration: none;
  border: 0px;
  border-radius: 3px;
  background-color: #4285f4;
  text-transform: none; letter-spacing: 0;
}
form button:hover, form input[type="submit"]:hover, 
form button:focus, form input[type="submit"]:focus,
form .btn:hover {background: #3a76d8;}
.alt-action {
  display: inline-block; float: right;
  color: #4285f4; margin: 10px 0;
  font: 400 14px/18px 'Titillium web', Helvetica, Arial, sans-serif;
}
form fieldset {position: relative; margin: 0 0 15px 0;}
form fieldset:last-child {margin: 0;}
form fieldset p {position: relative; margin-bottom: 10px;}
::-webkit-input-placeholder {color: #ebebeb;}
::-moz-placeholder {color: #ebebeb;}
:-ms-input-placeholder {color: #ebebeb;}
:-moz-placeholder {color: #ebebeb;}


/********************** MEDIA QUERIES **********************/
@media screen and (max-width: 1280px) {
  .inf-usr-ticker a.inf-usr-close {
    top: -10px;
    border: 1px solid #fff;
    background: #4285f4;
    border-radius: 50%;
  }
}
@media screen and (min-width: 768px) {
  .rsp-show-sm {display: none;}
}
@media screen and (max-width: 767px) {
  .rsp-show-sm {display: block;}
  .inf-usr-ticker .inf-usr--right {display: none;}
  .inf-usr-ticker .col-center > div {width: 50%;}
}
@media screen and (max-width: 620px) {
  .inf-usr-generic {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .inf-usr-ticker p br {display: none;}
  .inf-usr-ticker .inf-usr--left {
    width: 100%; margin-top: 14px; 
    text-align: center;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
  }
  .inf-usr-generic a.inf-usr-close {color: #4285f4;}
  .inf-usr-ticker .col-center > div {width: 100%;}
  .inf-usr-ticker .col-center .inf-usr--left p {max-width: 100%;}
}
@media screen and (max-height: 767px) and (max-width: 620px) {
  #md-login .inf-bg-blue {display: none!important;}
}