/**
*  Folha de estilo da página sua historia
*/


.fixed {
   background-position: 50% 120px;
   background-size: 100% auto;
   background-image: url(/imagens/banner_suahistoria.jpg);
}

#secao01 #banner {
   width: 100%;
}
#migalha {
   color: var(--vermelho);
   border-bottom: 1px solid var(--vermelho);
}

#secao02 {
   padding: 100px 0;
}

#secao02 div.small:first-child {
   display: table;
}
#secao02 img:first-child {
   display: table-cell;
}
#secao02 #texto {
   display: table-cell;
   font-size: 1em;
}
#secao02 #frase01 {
   float: left;
   margin-right: 40px;
   margin-bottom: 30px;
}



#secao03 {
   padding-bottom: 80px;
}
#secao03 span {
   color: var(--vermelho);
}
#secao03 #div1 {
   display: table;
   width: 100%;
   margin-bottom: 50px;
   border-right: 40px solid #d7d7d7;
}
#secao03 #div1 > .small {
   margin: 0;
   padding: 10px 75px 10px 0;
   float: right;
   font-size: 2.5em;
   text-align: right;
}
#secao03 #div1 > .small span {
   color: var(--vermelho);
}
#secao03 #div2 {
   display: table;
   width: 100%;
   margin-bottom: 50px;
   border-left: 40px solid #d7d7d7;
}
#secao03 #div2 > .small {
   margin: 0;
   padding: 10px 0 10px 75px;
   float: left;
   font-size: 2.2em;
   text-align: left;
}
#secao03 #div3 > div:first-child {
   margin-bottom: 30px;
   font-size: 2.5em;
}


#secao04 {
   padding: 40px 0;
   color: #fff;
   background-color: var(--vermelho);
}
#secao04 #tit {
   float: right;
   width: 250px;
   margin-bottom: 30px;
   padding-bottom: 10px;
   border-bottom: 1px solid;
   font-size: 1.2em;
}
#secao04 #slider {
   clear: both;
}
.slick-slide {
   text-align: center;
   padding: 0 50px;
}

.slick-slide p {
   margin-bottom: 10px;
   font-size: .85em;
}
.slick-slide p:first-child {
   font-family: roboto_slabbold;
}
.slick-slide img {
   width: auto;
   margin: 0 auto;
}

.slick-dots {
   bottom: 0;
}
.slick-dots li button:before{
   opacity: 0.3;
   color: #000; /*#d8143a;*/
}
.slick-dots li.slick-active button:before {
   opacity: 1;
   color: #000; /*#d8143a;*/
}

.slick-prev,
.slick-next {
   position: absolute;
   z-index: 11;
   opacity: 0.5;
   top: 50%;
   margin-top: -18px;
   width: 3.5%;
   height: auto;
}
.slick-prev:hover,
.slick-next:hover {
   opacity: 1;
}
.slick-next {
   right: -40px;
   width: 40px;
   transform: rotate(180deg) !important;
}
.slick-prev {
   left: -40px;
   width: 40px;
}

.slick-dotted.slick-slider {
   margin-bottom: 0;
}


#secao05 {
   padding: 80px 0;
}
#secao05 > .small {
   position: relative;
   padding: 80px 100px;
   font-size: 1.5em;
   text-align: center;
   border: 7px solid var(--vermelho);
}
#secao05 > .small p:first-child,
#secao05 > .small p:last-child {
   color: var(--vermelho);
   font-family: roboto_slabbold;
}
#secao05 #exclamacao {
   position: absolute;
   right: -70px;
   bottom: -20px;
   width: auto;
   height: auto;
   padding: 0 20px;
   background-color: #fff;

}
#secao05 #exclamacao img {
   width: 15px;
   height: auto;
}



@media only screen and (min-width: 1500px) and (orientation: landscape) {

   .fixed {
      /*background-size: auto;*/
   }

}



@media only screen and (max-width: 768px) {

   #secao02 #texto {
      display: block;
      clear: both;
   }

}


@media only screen and (max-width: 600px) {

   .slick-next {
      right: 0px;
      margin-top: -38px;
   }
   .slick-prev {
      left: 0px;
   }
   .slick-slide p {
      font-size: 1.2em;
   }


   #secao01 > div {
      bottom: 10px;
   }

   #secao02 {
      padding: 50px 0;
   }
   #secao02 #frase01 {
      width: 200px;
      float: none;
      margin-left: auto;
      margin-right: auto;
   }
   #secao02 #texto {
      font-size: .8em;
   }


   #secao03 {
      padding-bottom: 50px;
   }

   #secao03 #div1 > .small {
      font-size: 1.4em;
      padding: 10px 30px 10px 0;
   }
   #secao03 #div2 > .small {
      font-size: 1.4em;
      padding: 10px 0 10px 30px;
   }
   #secao03 #div3 > div:first-child {
      font-size: 1.4em;
   }


   #secao04 #tit {
      font-size: 1.8em;
   }

   #secao05 > .small {
      padding: 30px 20px;
      font-size: .85em;
   }

}
@media only screen and (max-width: 600px) and (orientation: portrait) {  }
@media only screen and (max-width: 480px) and (orientation: landscape) {  }
@media only screen and (max-width: 320px) and (orientation: portrait) {  }
