body { 
  color: #FFF;
  background: #1B2E54 url(img/bg-body.jpg) no-repeat center top;
  font-family: "Montserrat", Sans-serif;
  font-size: 12pt }



/* wrapper 
//////////////////////////////////////////////////*/
.wrapper { padding: 120px 0 }

@media(max-width:767.98px){
  .wrapper { padding: 60px 0 }
}



/* heading 
//////////////////////////////////////////////////*/
h1, h2, h3, h4 { font-weight: 700 }

h1 { margin-bottom: 2.5rem }
h2 { margin-bottom: 2rem }
h3 { margin-bottom: 1.5rem }
h4 { margin-bottom: 1.25rem }

h1 { font-size: 300% }
h2 { font-size: 250% }
h3 { font-size: 200% }
h4 { font-size: 150% }

h1 { letter-spacing: -.125rem }
h2 { letter-spacing: -.1rem }
h3 { letter-spacing: -.075rem}
h4 { letter-spacing: -.05rem }

@media(max-width:767.98px){

  h1 { font-size: 200% }
  h2 { font-size: 180% }
  h3 { font-size: 160% }
  h4 { font-size: 140% }

}



/* header 
//////////////////////////////////////////////////*/
header ul { font-size: 87.5% }
header ul .ico { margin-right: 5px }

@media(min-width:768px){
  header ul { width: 55% }
}

@media(max-width:767.98px){
  header .navbar-brand { 
    margin-bottom: 30px;
    text-align: center }

  header .navbar-brand img { width: 75% }

  header li { margin-bottom: 10px }
}


/* ebook 
//////////////////////////////////////////////////*/
.ebook { padding: 45px 0 }

.ebook h1 { 
  color: #FFE426;
  font-size: 375%;
  font-weight: 700 }
  
.ebook img { margin-left: -200px }

@media(max-width:768px){
  .ebook h1 { 
    font-size: 240%;
    text-align: center }

  .ebook img { 
    margin: 45px 0 0 -120px;
    width: 100% } 

   .ebook .btn { width: 100% } 
}



/* register 
//////////////////////////////////////////////////*/
.register .container {
  padding: 75px;
  background: #FFF;
  border-radius: 30px;
  color: #333 }

.register h1 { font-size: 200% }

@media(max-width:767.98px){
  .register .container { padding: 30px }

  .register h1 { text-align: center }
}


/* form 
//////////////////////////////////////////////////*/
.contact {
  color: #FFF;
  background: url(img/bg-contact.jpg) center;
  background-size: cover }

.contact .container > div {
  padding: 15px 0 15px 50px;
  position: relative }  

.contact div span { font-size: 125% }

.contact .btn { 
  font-size: 87.5%;
  margin-left: 15px }

.contact .container > div .ico {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%) }  

@media(max-width:575.98px){

  .contact div span { font-size: 100% }

  .contact .btn { margin: 0}
}



/* footer 
//////////////////////////////////////////////////*/
footer { padding: 60px 0 }

footer a.brand-flexpoint {
  float: right;
  display: inline-block;
  text-indent: -1000000px;
  background: url(https://www.flexpoint.com.br/addons/flexpoint-site-sign.png) top;
  width: 25px;
  height: 27px } 

@media(max-width:767.98px){
  footer { text-align: center }
  footer .d-flex > div:not(:last-child) { margin-bottom: 30px }
  footer a.brand-flexpoint { float: none }
}



/* form 
//////////////////////////////////////////////////*/
.form-control,
.btn { 
  min-height: 45px;
  padding: 0.375rem 1rem;
  border-radius: 50px }

.form-control {
  background: #EEE;
  border: 0;
  box-shadow: inset 1px 2px 3px rgba(0,0,0,0.1) }

.btn-primary {
  border: 0;
  background: #B22C66 !important;
  color: #FFF !important } 

.btn-opacity {
  background: rgba(255,255,255,0.2);
  color: #FFF !important }
  
.btn-white {
  background: rgb(221,221,221);
  background: linear-gradient(0deg, rgba(221,221,221,1) 25%, rgba(255,255,255,1) 100%);
  color: #B22C66 !important }

.btn-green {
  background: #89BC46;
  color: #FFF !important }  

.btn-lg {
  height: auto;
  padding: 1rem 2.5rem }

.btn:active,
.btn:hover,
.btn:focus { box-shadow: inset 0 0 100px rgba(255,255,255,0.2) }



/* global 
//////////////////////////////////////////////////*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both }

.delay1   { animation-delay: 500ms !important }
.delay2   { animation-delay: 1000ms !important }
.delay3   { animation-delay: 1500ms !important }
.delay4   { animation-delay: 2000ms !important }
.delay5   { animation-delay: 2500ms !important }
.delay6   { animation-delay: 3000ms !important }
.delay7   { animation-delay: 3500ms !important }
.delay8   { animation-delay: 4000ms !important }
.delay9   { animation-delay: 4500ms !important }
.delay10  { animation-delay: 5000ms !important }

.duration1  { animation-duration: 100ms !important }
.duration2  { animation-duration: 200ms !important }
.duration3  { animation-duration: 300ms !important }
.duration4  { animation-duration: 400ms !important }
.duration5  { animation-duration: 500ms !important }
.duration6  { animation-duration: 600ms !important }
.duration7  { animation-duration: 700ms !important }
.duration8  { animation-duration: 800ms !important }
.duration9  { animation-duration: 900ms !important }
.duration10 { animation-duration: 1000ms !important }
.duration20 { animation-duration: 2000ms !important }
.duration30 { animation-duration: 3000ms !important }
.duration40 { animation-duration: 4000ms !important }
.duration50 { animation-duration: 5000ms !important }
.duration60 { animation-duration: 6000ms !important }
.duration70 { animation-duration: 7000ms !important }
.duration80 { animation-duration: 8000ms !important }
.duration90 { animation-duration: 9000ms !important }
.duration100 { animation-duration: 10000ms !important }

.ico { 
  top: 4px;
  display: inline-block;
  position: relative;
  background: url("img/ico.png") top left no-repeat }

.ico-cau    { width:179px; height:22px; background-position:0 0;    }
.ico-wapp   { width:17px; height:17px; background-position:0 -22px; }
.ico-ig     { width:21px; height:21px; background-position:0 -39px; }
.ico-fb     { width:11px; height:20px; background-position:0 -60px; }
.ico-mail   { width:16px; height:16px; background-position:0 -80px; }
.ico-phone  { width:16px; height:15px; background-position:0 -96px; }



/* aspects ratio
//////////////////////////////////////////////////*/
.ratio {
  position: relative;
  overflow: hidden;
  display: block }

.ratio-1p1  { padding-top: 100% }
.ratio-3p2  { padding-top: 66.66% }
.ratio-8p5  { padding-top: 62.5% }
.ratio-16p9 { padding-top: 56.25% }

.ratio img {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover }

.ratio-h img { 
  height: auto;
  width: 100% }

.ratio-v img { 
  width: auto;
  height: 100% }