/*!BASIC CSS
 * Author:  Diário de Notícias da Madeira
 * Email:   dep.informatica@dnoticias.pt
 * ---
 * Project: Casamento de Sonho 2017 (2017-10-03)
 * URL:     http://casamentosonho.dnoticias.pt
 */
 /* Generated by Font Squirrel (https://www.fontsquirrel.com) on August 22, 2016 */
@font-face {
  font-family: 'frente_h1regular';
  src: url('../fonts/FrenteH1-Regular-webfont.eot');
  src: url('../fonts/FrenteH1-Regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/FrenteH1-Regular-webfont.woff') format('woff'),
       url('../fonts/FrenteH1-Regular-webfont.ttf') format('truetype'),
       url('../fonts/FrenteH1-Regular-webfont.svg#frente_h1regular') format('svg');
  font-weight: normal;
  font-style: normal;
}

/**/
body {
  font: 14px/20px 'Open Sans', Arial, sans-serif;
  color: #000; font-weight: 400;
}

/********************** LAYOUT **********************/
.colMain {
  position: relative;
  max-width: 1140px; width: 100%; padding: 0 15px;
  box-sizing: border-box;
}
.colCenter {margin: 0 auto;}

h2 {
  font: 60px/60px 'Pacifico', Arial, sans-serif;
  color: #000; text-align: center;
  margin-bottom: 25px;
}
h2 + p {
  font: 17px/20px 'Open Sans', Arial, sans-serif;
  color: #000; text-align: center;
  max-width: 480px;
  margin: 0 auto 25px auto;
}
h3 {
  font-size: 40px; line-height: 40px;
  font-family: 'frente_h1regular';
  color: #000; text-align: center;
  margin-bottom: 25px;
}
h4 {
  font-size: 16px; line-height: 18px;
  font-weight: 700;
}
h5 {
  font-size: 12px; line-height: 16px;
  font-weight: 700;
}
h6 {
  font-size: 13px; line-height: 16px;
  color: #ffffff;
}
a {color: #231f20; text-decoration: none;}
a:hover {text-decoration: underline;}
strong {font-weight: 700;}
.signature {text-align: center; margin-top: 30px; margin-bottom: 0; color: #cecece;}
.nowrap {white-space: nowrap;}
.btn {
  display: inline-block;
  margin: 0 auto; padding: 10px 30px;
  font-size: 13px; line-height: 13px;
  text-transform: uppercase; text-align: center;
  color: #fff; font-weight: 700;
  border-radius: 20px;
  background: #2a3a37;
}
.btn:hover {background: #000; text-decoration: none;}

.bgColor {background: #e4acaa;}
.bgColor h2, .bgColor h3, .bgColor h4, .bgColor h5 {color: #fff;}
.bgLight {background: #aab7bd; /*#eae3e3*/}
.bgLight h2, .bgLight h2 + p, .bgLight h3, .bgLight h4, .bgLight h5 {color: #e55749;}

.bgShadow {overflow: hidden;}
.bgShadow:before {
  display: block; position: absolute;
  left: -10px; top: 0; padding: 0 10px;
  width: 100%; height: 100%;
  content: "";
  -webkit-box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,.35);
  -moz-box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,.35);
  box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,.35);
}

.nota {
  max-width: 830px;
  margin: 0 auto; padding: 25px 35px;
  color: #c49492; background: #ffffff;
  font-style: italic;
  border: 3px double #c49492;
}

/********************** HEADER **********************/
header {
  position: relative; width: 100%;
  color: #231f20;
  min-height: 600px;
}
header h1 {
  display: block; position: absolute;
  left: 50%; top: 30px; margin-left: -66px;
  width: 133px; height: 26px;
  text-indent: -5555px;
  background: url(../imgs/dnoticiaspt-id.png) no-repeat 0 0;
}
header .header-info {
  display: block; position: relative;
  margin: 0 auto;
  top: 30px;
  width: 100%; max-width: 555px; height: 205px;
  background: url(../imgs/header-title.png) no-repeat 0 0;
  background-size: 100% auto;
}
header .header-info h2 {text-indent: -5555px;}
header .header-info a {
  display: block; position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
}

/********************** SECTION **********************/
section {
  position: relative; width: 100%;
  padding: 70px 0;
}
.col-info {
  font-size: 16px; line-height: 22px;
  text-align: center;
  margin: 0 auto; padding: 0;
}

/********************** INTRO **********************/
.intro {text-align: center; padding: 50px 0;}
.intro .colMain {position: relative;
  max-width: 560px;
  width: 100%;
}
.intro a {
  color: #231f20;
  border-bottom: 1px solid #e4acaa;
  text-decoration: none;
}
.intro a:hover {
  border-bottom: 1px solid transparent;
  background: #e4acaa;
  text-decoration: none;
}
.intro img {
  display: block; position: relative;
  margin: 0 auto 30px auto;
}
.intro p { margin-bottom: 20px;}


/********************** FLEX CONTAINER **********************/
.flex-container {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  width:  100%;
  overflow: hidden;
}
footer .flex-container {
  -webkit-justify-content: space-between;
  -ms-flex-pack: space-between;
  justify-content: space-between;
  -webkit-align-content: space-between;
  -ms-flex-line-pack: space-between;
  align-content: space-between;
}

.flex-container li {
  position: relative;
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
  max-width: 160px;
  margin: 10px 10px 30px 10px;
  text-align: center;
  font-size: 12px; line-height: 16px;
}
.flex-container li h4 {display: block;}

.pic-shadow {
  display: block; position: relative;
  width: 100%; height: auto;
  margin-bottom: 10px;
  border: 5px solid #fff;
  border-radius: 50%;
  box-sizing: border-box;
  overflow: hidden;
  z-index: 0;
  -webkit-box-shadow: 0px 3px 7px rgba(0,0,0,.35);
  -moz-box-shadow: 0px 3px 7px rgba(0,0,0,.35);
  box-shadow: 0px 3px 7px rgba(0,0,0,.35);
}
.pic-shadow:after {
  display: block; position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  border-radius: 50%;
  -webkit-box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,.35);
  -moz-box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,.35);
  box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,.35);
  content: "";
}
.pic-shadow img {
  display: block; position: relative;
  width: 100%; height: auto;
}

/********************** VOTAÇÕES **********************/
.votacoes .flex-container {
  max-width: 900px;
  margin: 0 auto 70px auto;
}
.votacoes .btn {
  display: block; position: absolute;
  left: 50%; top: 0;
  width: 200px; height: 20px;
  line-height: 20px; margin: -20px 0 0 -130px;
}
.votacoes a {display: block;}
.votacoes a:hover {text-decoration: none;}

.votacoes a .pic-shadow img {
  -webkit-transition: -webkit-transform .17s linear;
  transition: transform .17s linear;
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
}
.votacoes a:hover .pic-shadow img,
.votacoes li.on a .pic-shadow img  {
  -ms-transform: scale(1.12);
  -webkit-transform: scale(1.12);
  transform: scale(1.12);
}
.votacoes em {color: #e4acaa; font-style: normal;}
.modal-num {
  display: block; position: relative;
  width: 130px;
  margin: -15px auto 10px auto;
  font: 700 15px/30px 'Open Sans', Arial, sans-serif;
  color: #fff; text-align: center;
  background-color: #e55749;
  border-radius: 30px;
  visibility: hidden;
}
.votacoes .votacoes-info {display: none;}

.flip-container {
  display: block; position: relative;
  width: 130px; height: 30px;
  margin: -35px auto 10px auto;
  font: 700 15px/30px 'Open Sans', Arial, sans-serif;
  color: #fff; text-align: center;

  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -o-perspective:1000px;
  -ms-perspective: 1000px;
  perspective: 1000px;
  -ms-transform: perspective(1000px);
  -moz-transform: perspective(1000px);
  -moz-transform-style: preserve-3d; 
  -ms-transform-style: preserve-3d;
}
/*.flex-container a:hover .back {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -o-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  transform: rotateX(0deg);
}
.flex-container a:hover .front {
  -webkit-transform: rotateX(180deg);
  -moz-transform: rotateX(180deg);
  -o-transform: rotateX(180deg);
  transform: rotateX(180deg);
}*/
.flex-container a:hover .back {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -o-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  transform: rotateX(0deg);
}
.flex-container a:hover .front {
  -webkit-transform: rotateX(180deg);
  -moz-transform: rotateX(180deg);
  -o-transform: rotateX(180deg);
  transform: rotateX(180deg);
}

.flex-container.votacoes-encerradas a .back {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -o-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  transform: rotateX(0deg);
}
.flex-container.votacoes-encerradas a .front {
  display: none;
  /*-webkit-transform: rotateX(180deg);
  -moz-transform: rotateX(180deg);
  -o-transform: rotateX(180deg);
  transform: rotateX(180deg);*/
}
.flex-container.votacoes-encerradas .classif-01 a .back,
.flex-container.votacoes-encerradas .classif-02 a .back,
.flex-container.votacoes-encerradas .classif-03 a .back {
  background: #d95245;
}
.flipper {
  position: relative;
  top: 0; left: 0;
  width: 100%; height: 30px;
}
.front, .back {
  display: block; position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border-radius: 30px;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
.front {
  z-index: 2;
  -webkit-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  background-position: center center;
  background-color: #e4acaa;
}
.back {
  -webkit-transform: rotateX(-180deg);
  -moz-transform: rotateX(-180deg);
  -o-transform: rotateX(-180deg);
  -ms-transform: rotateX(180deg);
  transform: rotateX(-180deg);
  background-color: #2a3a37;
}
/* ON */
.flex-container li.on .back {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -o-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  transform: rotateX(0deg);
}
.flex-container li.on .front {
  -webkit-transform: rotateX(180deg);
  -moz-transform: rotateX(180deg);
  -o-transform: rotateX(180deg);
  transform: rotateX(180deg);
}


/********************** PRÉMIOS **********************/
.premios .flex-container {
  max-width: 900px;
  margin: 0 auto 70px auto;
}
.premios .flex-container li {
  margin-bottom: 30px;
  max-width: 160px;
}
.premios-other {
  max-width: 720px;
  margin: 0 auto;
  overflow: hidden;
}
.premios-other div {
  display: block; width: 50%;
  float: left;
}
.premios-other ul {
  text-align: center; 
  margin-bottom: 70px;
}
.premios-other li {margin-bottom: 15px;}

/********************** PUB **********************/
.pub {
  display: block; position: relative;
  width: 100%; max-width: 350px; height: auto;
  margin: 0 auto 25px auto; padding: 0 15px;
  box-sizing: border-box;
}
.pub img {display: block; width: 100%;}
.pub:after {
  display: block;  position: absolute;
  text-align: right;
  color: #cacaca; 
  font-size: 6px; line-height: 6px; 
  right: -2px; bottom: 6px;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  transform: rotate(-90deg);
  content: "PUB";
}


/********************** FOOTER **********************/
footer {
  padding: 45px 30px 15px 30px;
  color: #ffffff;
  overflow: hidden;
}
footer a {display: block; overflow: hidden;}
footer a img {display: block;}
footer .flex-container {
    max-width: 1024px;
    margin: 0 auto;
}
footer .flex-container li {max-width: 90px;}

/********************** MODAL **********************/
.blocker {background-color: rgba(244,233,232,.95);} /*#f4e9e8*/
.modal {
  max-width: 555px; padding: 50px;
  -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);
  vertical-align: top; 
}
.modal#md-regulamento {max-width: 700px;}
.modal h4 {
  color: #e55749; text-align: center;
  margin-bottom: 30px;
}
.modal h4 em {color: #ffbeb8; font-style: normal;}
.modal h6 {
  display: inline-block;
  color: #e55749;
  font-weight: bold;
}
.modal {
  font-size: 13px; line-height: 18px;
  text-align: left; color: #8c8c8c;
}
.modal p {margin-bottom: 15px;}
.modal ol {list-style: decimal; counter-reset: item;}
.modal ol li {display: block; margin-bottom: 15px;}
.modal ol li:before {
  display: inline-block; /*width: 30px;*/
  font-weight: bold; color: #ffbeb8;
  content: counters(item, ".") ". "; counter-increment: item;
  margin-right: 10px;
}
.modal ol ol {margin-top: 15px; padding-left: 0;}
.modal#md-historia {margin-top: 70px;}
.modal#md-historia p {
  font-size: 15px; line-height: 21px;
  text-align: center; margin-bottom: 30px;
}
.modal .pic-shadow {
  position: absolute;
  left: 50%; top: 0;
  margin: -60px 0 0 -60px;
  width: 120px;
  -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);
}
.modal .modal-controls {
  display: block; position: relative;
  overflow: hidden; margin: 0 auto;
  width: 150px;
}
.modal .modal-controls .chart {
  display: block; position: relative; float: left;
  width: 50px; height: 50px; margin: 0 20px;
  text-align: center; color: #eb594b;
  font-size: 12px; line-height: 50px; font-weight: 700;
  /*visibility: hidden;*/
}
.modal .modal-controls .chart canvas {
  display: block; position: absolute;
  left: 0; top: 0;
}
.modal .modal-controls .prev,
.modal .modal-controls .next {
  display: block; position: relative; float: left;
  width: 30px; height: 50px;
  background: transparent url(../imgs/modal-nav-bg.png) no-repeat;
  cursor: pointer; text-indent: -5555px;
}
.modal .modal-controls .prev {background-position: left center;}
.modal .modal-controls .next {background-position: right center;}
.modal .modal-controls .disable {
  pointer-events: none;
  opacity: .1;
}
.modal li h5 {display: inline-block;}


/******************** MEDIA QUERIES ********************/
@media screen and (max-width: 768px) {
  .pic-shadow {border: 3px solid #fff;}
  .premios .flex-container li {max-width: 100px;}

  .blocker {padding: 0;}
  .blocker:before {content: ""; display: block; height: auto;}
  .modal {
    max-width: 100%; width: 100%; padding: 15px;
    box-sizing: border-box;
  }
  .modal a.close-modal{right: 5px; top: 5px;}
}
@media screen and (max-width: 420px) {
  header {min-height: 300px;}
  section {padding: 50px 0 30px 0;}
  footer {padding: 15px 0;}
  h2, h3 {font-size: 30px; line-height: 30px;}
  .colMain {padding: 0 15px;}
  .col-info {font-size: 14px; line-height: 20px;}
  .intro {padding: 30px 0;}
  .intro img {width: 40px;}
  .premios .flex-container {margin: 0 auto 30px auto;}
  .premios .flex-container li {max-width: 100%; margin: 10px;}
  .premios .flex-container li h5 br {display: none;}
  .premios-other div {width: 100%; margin-bottom: 10px;}
  .premios-other ul {margin-bottom: 30px;}
  .pic-shadow {display: none;}
}