/*!BASIC CSS
 * Author:  Diário de Notícias da Madeira
 * Email:   dep.informatica@dnoticias.pt
 * ---
 * Project: 500 Maiores (2016-11-09)
 * URL:     http://www.500maiores.pt
 */
body, html {
  width: 100%; min-height: 100%; height: auto;
  font: 14px/24px 'Open Sans', Arial, sans-serif;
  font-weight: 400; color: #404041; background-color: #989898;
  overflow-x: hidden;
}
.wrapper {
  display: block; margin: 15px; background-color: #fff;
  -webkit-box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.15);
  -moz-box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.15);
  box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.15);
}

/* LAYOUT */
.dw600, .dw920 {margin: 0 auto; padding: 60px 40px;}
.dw600 {max-width: 600px;}
.dw920 {max-width: 920px;}

h2 {
  font: 48px/48px 'Open Sans Condensed', Arial, sans-serif;
  font-weight: 700; color: #ac985b; text-align: center;
  letter-spacing: -2px;
  margin-bottom: 30px; text-transform-: uppercase;
}
h3 {
	font: 35px/40px 'Open Sans', Arial, sans-serif;
	color: #ac985b; text-align: center;
}
h4 {
  font: 14px/14px 'Open Sans', Arial, sans-serif;
  font-weight: 700; text-transform: uppercase;
  color: #ac985b;
}
p {padding-bottom: 20px;}
strong {font-weight: 700;}
a, a:hover {
  color: #404041;
  text-decoration: none;
  border-bottom: 1px solid #ac985b;
}
a:hover {border-bottom: 1px solid transparent;}
.center {text-align: center;}
.mTop30 {margin-top: 30px;}
.destaque {font: 700 21px/29px "Open Sans",Arial,sans-serif;}
.btn {
  padding: 5px 20px 6px; border: 1px solid #ac985b;
  font: 12px/12px 'Open Sans', Arial, sans-serif;
  font-weight: 400; text-transform: uppercase;
  color: #ac985b; border-radius: 15px;
}
.btn:hover {
  border: 1px solid #404041;
  color: #404041;
}

/* NAV */
.navigation {
  display: block; position: fixed;
  left: 0; top: 0; z-index: 500;
  width: 100%; height: auto; padding: 35px 15px;
  background-color: transparent;
  -webkit-transition: all .17s ease-out;
  transition: all .17s ease-out;
}
.navigation ul {
  display: block; 
  text-align: center;
}
.navigation ul li {
  display: inline-block;
  text-align: center;
  font-size: 13px; line-height: 13px;
  text-transform: uppercase; 
  margin: 0 15px;
}
.navigation ul li a {
  color: #404041;
  font-weight: 700;
  border-bottom: none; 
  opacity: .5;
}
.navigation.active {
  background-color: #00567B; padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.15);
  -moz-box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.15);
  box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.15);
}
.navigation.active ul li a {color: #ffffff;}
.navigation ul li a.active {opacity: 1;}


/* HEADER */
header {
  width: 100%; height: auto;
  padding-top: 50px;
}
#id {
  display: block; position: relative;
  max-width: 280px; width: 100%; height: auto;
  margin: 0 auto;
}
#id img {
  display: block; position: relative;
  width: 100%;
}
.logos-main {
  width: 600px;
  overflow: hidden;
  margin: 50px auto 0 auto;
  padding-top: 30px;
  border-top: 2px solid #404041;
}
.logos-main li {
  display: block;
  margin: 0 0 0 38px;
  float: left;
}
.logos-main li:first-child {margin-left: 0;}

.shadow {position: relative;}
.shadow:before, .shadow:after {
  display: block; position: absolute;
  left: 0; z-index: 10;
  width: 100%; height: 50px;
  background: transparent url(../imgs/bg-shadow.png) no-repeat center center;
  background-size: 100% 50px;
  content: "";
}
.shadow:before {
  top: 0;
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.shadow:after {bottom: 0;}

.section-orador.shadow:before,
.section-orador.shadow:after {opacity: 0.3;}
.section-orador h4 {color: #ffffff;}

/* Parallax */
.parallaxParent {
  overflow: hidden;
  /*background-color: #ac985b;*/
}
.parallaxParent > .parallaxPic {position: relative;}
#parallax1 .parallaxPic {
  height: 200%; top: -100%;
  background: transparent url(../pics/section-data.jpg) no-repeat center center;
  background-size: 100% auto;
}
#parallax3 .parallaxPic {
  height: 200%; top: -100%;
  background: transparent url(../pics/section-data.png) no-repeat center center;
  background-size: 100% auto;
}
#parallax2 .parallaxPic {
  height: 100%; width: 920px;
  margin: 0 auto;
  background: transparent url(../imgs/pic-orador.png) no-repeat bottom right;
}

#parallax1, #parallax3 {height: 455px;}
#parallax2 {height: 345px;}

/* DATA */
.section-data {position: relative;}
.legenda {
  display: block; position: absolute;
  left: 50%; top: 50%; padding: 60px 0 40px 0;
  text-transform: uppercase; max-width: 80%;
  width: 520px; height: auto; z-index: 10;
  background-color: rgba(255,255,255,.97);
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
.legenda .info-data {
  font: 27px/27px 'Open Sans Condensed', Arial, sans-serif;
  font-weight: 300;
}
.legenda .info-hora {
  font: 14px/14px 'Open Sans Condensed', Arial, sans-serif;
  font-weight: 300;
}
.legenda h3, .legenda h3 span {
  font: 27px/27px 'Open Sans Condensed', Arial, sans-serif;
  font-weight: 700; color: #404041;
}
.legenda h3 {margin: 15px 0 30px 0;}
.legenda h3 span {
  display: block; padding-top: 5px;
  font-size: 17px; line-height: 17px;
}

/* ORADOR */
.section-orador {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#002f52+0,00567b+51,002f52+100 */
  background: #002f52; /* Old browsers */
  background: -moz-linear-gradient(left,  #002f52 0%, #00567b 51%, #002f52 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  #002f52 0%,#00567b 51%,#002f52 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  #002f52 0%,#00567b 51%,#002f52 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002f52', endColorstr='#002f52',GradientType=1 ); /* IE6-9 */
}
.info-orador {
  position: absolute;
  width: 360px;
  left: 50%; top: 50%;
  margin: -50px 0 0 -320px;
  z-index: 10;
}
.info-orador h3 {
  font-size: 21px; line-height: 21px;
  color: #ffffff;
}
.info-orador h4 {margin-bottom: 30px;}
.info-orador p {
  font-weight: 300;
  color: #ffffff;
  padding-bottom: 0;
}

/* APOIOS */
.section-apoios {overflow: hidden; padding: 60px 40px 0 40px;}
.section-apoios div {
  display: block; position: relative;
  /*float: left;*/
  padding-bottom: 60px;
}
.section-apoios .logos-patrocinador {width: 100%; clear: both; margin: 0 auto 50px auto;}
.section-apoios .logos-partner {width: 230px; float: left;}
.section-apoios .logos-mediapartner {width: 100px; float: left;}
.section-apoios  li {
  display: block; margin: 0;
  text-align: center; float: left;
}
.section-apoios .logos-patrocinador li {margin-right: 50px;}
.section-apoios .logos-patrocinador li:last-child {margin-right: 0;}
.section-apoios h4 {color: #404041; font-weight: 400; font-size: 12px; line-height: 12px;}


/* SLICK */
.galeria {padding: 0;}
.slideshow {margin-top: 30px;}
.slick-slider{margin-bottom: 30px;}
.slick-dots {
  display: block; position: absolute;
  width: 100%; list-style: none;
  bottom: -45px; padding: 0;
  text-align: center;
}
.slick-dots li {
  display: inline-block; position: relative;
  width: 20px; height: 20px;
  margin: 0 5px; padding: 0;
  cursor: pointer;
}
.slick-dots li button {
  display: block; width: 20px; height: 20px;
  font-size: 0; line-height: 0;
  padding: 5px; cursor: pointer;
  padding: 0; margin: 0;
  color: transparent; border: 0;
  outline: none; background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus {outline: none;}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before {opacity: 1;}
.slick-dots li button:before {
  position: absolute;
  top: 0; left: 0;
  width: 20px;height: 20px;
  font-size: 30px; line-height: 20px;
  content: '•'; text-align: center;
  opacity: .25; color: #AC985B;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
  opacity: .75;
  color: #AC985B;
}

/* REGULAMENTO */
.regulamento {background-color: #f2f2f0;}
.regulamento h4 {margin-bottom: 30px;}
.regulamento.shadow:after, .regulamento.shadow:before {opacity: .2;}

/* FOOTER */

/* MEDIA QUERIES */
@media screen and (max-width: 1279px) {
}
@media screen and (max-width: 1140px) {
  #parallax1 .parallaxPic {background-size: auto 100%;}
}
@media screen and (max-width: 920px) {
  .logos-main {width: 631px;}
  .logos-main li {margin: 0 0 0 15px;}
  #parallax2 .parallaxPic {width: 100%;}
  .section-apoios .logos-partner,
  .section-apoios .logos-patrocinador,
  .section-apoios .logos-mediapartner {width: 100%;}
}
@media screen and (max-width: 768px) {
  #parallax1 {height: 355px;}
  .section-apoios h4 {text-align: center;}
  .logos-main {width: 100%;}
  .logos li {margin: 0; width: 100%; text-align: center;}
  .legenda {padding: 40px 10px 20px 10px;}
}
@media screen and (max-width: 650px) {
  .info-orador {
    position: relative;
    width: 100%;
    left: auto;
    top: auto;
    margin: 0;
    z-index: 10;
    padding: 50px 25px 20px 25px;
    box-sizing: border-box;
  }
  #parallax2 .parallaxPic {background-position: bottom center;}
}
@media screen and (max-width: 420px) {
  h2 {font-size: 32px; line-height: 32px;}
  .dw600, .dw920 {padding: 60px 20px;}
  .wrapper {margin: 10px;}
  .section-apoios {padding: 60px 20px 0 20px;}
  
}