/* ==========================================================================
@base
========================================================================== */

body {
  color: #4a4445;
}
h1,
h2,
h3 {
  font-family: "NewJuneBook", Arial, Tahoma, sans-serif;
}
strong {
  font-family: "NewJuneMedium", Arial, Tahoma, sans-serif;
}

/* ==========================================================================
@components
========================================================================== */
.mobile-only {
  display: none;
}	
.top-banner {
  height: 348px;
  position: relative;
  width: 100%;
}
.top-banner .image {
  background: url("/assets/exclusive/img/promocoes/sobmedida/main.jpg") no-repeat;
  background-size: 100%;
  height: 100%;
  z-index: 20;
  width: 100%;
}
.recipe {
  width: 100%;
}
.recipe.silver {
  background-color: #f2f2f2;
  padding: 50px 0 150px;
}
.recipe.silver p {
  font-size: 1.5rem;
  margin: 80px 40px 100px;
}
.recipe.red:before {
  background: url("/assets/exclusive/img/promocoes/sobmedida/bg-meufuturo-before.png") no-repeat;
  background-size: 100%;
  content: "";
  display: block;
  height: 95px;
  width: 100%;
  position: absolute;
  top: -94px;
}
.recipe.red {
  background: url("/assets/exclusive/img/promocoes/sobmedida/bg-meufuturo-default2.png") repeat;
  background-size: cover;
  color: #fff !important;
  font-family: "NewJuneLight", Arial, Tahoma, sans-serif;
  position: relative;
  padding-bottom: 190px;
}
.recipe.red:after {
  background: url("/assets/exclusive/img/promocoes/sobmedida/bg-meufuturo-after.png") no-repeat;
  background-size: 100%;
  content: "";
  display: block;
  height: 370px;
  width: 50%;
  position: absolute;
  left: 0;
  bottom: 1px;
}

.recipe.red h2 {
  font-size: 3rem;
  color: #fff;
}
.recipe.red p {
  font-size: 1.5rem;
  margin: 5rem 5rem 0.5rem 0;
  position: relative;
}
.recipe.red p .ico-time {
  background: url("/assets/exclusive/img/promocoes/sobmedida/ico-time.png") no-repeat;
  background-size: 100%;
  width: 48px;
  height: 48px;
  display: inline-block;
  position: absolute;
  top: 6px;
  right: -70px;
}
.recipe.white-silver {
  overflow: hidden;
}
.recipe.white-silver .text-left {
  text-align: right;
  width: 100%;
  padding-right: 50%;
  background:url('/assets/exclusive/img/promocoes/sobmedida/vgbl.png') right 20% bottom -30px no-repeat #ffffff;
}
.recipe.white-silver .text-right {
  text-align: left;
  width: 100%;
  background:url('/assets/exclusive/img/promocoes/sobmedida/pgbl.png') left 20% bottom -30px no-repeat #e5e1e0;
  padding-left: 50%;
}
.column {
  width: 50%;
  box-sizing: border-box;
  float: left;
  padding: 5%;
}
.column p {
  margin: 1em 0;
}
.recipe .column .sprite-title {
  background: url("/assets/exclusive/img/promocoes/sobmedida/sprite-title.png");
  width: 306px;
  display: inline-block;
  height: 105px;
  font-size: 0;
}
.recipe .container h1.title {
  font-size: 50px;
  font-weight: 100;
}
.recipe .column.text-left .sprite-title {
  background-position: 0 105px;
}
.column.text-left {
  background-color: #fff;
}
.recipe .column p {
  font-family: "NewJuneLight", Arial, Tahoma, sans-serif;
  font-size: 1.25rem;
  min-height: 145px;
}
.recipe .column a {
  font-family: "NewJuneBold", Arial, Tahoma, sans-serif;
  text-decoration: none;
  font-size: 1.5rem;
  color: #ef0042;
  float: right;
}
.button-flat {
  border: 0;
  border-bottom: 5px solid transparent;
  border-radius: 3px; display: inline-block;
  font-family: "NewJuneBold", Arial, Tahoma, sans-serif;
  padding: 10px 25px 6px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
}
.button-flat.primary {
  background-color: #b60000;
  border-bottom-color: #a7002c;
  color: white;
}
.button-flat:hover {
  border-bottom-width: 2px;
  margin-top: 3px;
}

.footer {
  background-color: #ad7e17;
  color: #FFF;
  padding: 33px 0;
}
.footer .column {
  padding: 5% 0;
}
.footer small {
  padding-top: 16px;
  border-top: 1px solid #FFF;
  display: block;
  float: left;
  font-size: 14px = 0.875rem;
}

/* ==========================================================================
@trumps
========================================================================== */

.text-red { color: #e70b44; }
.text-center { text-align: center; }
.text-right { text-align: right; } 


@media only screen and (max-width: 1279px) {
  .top-banner {
    height: 278px;
  }
  .text-right {
    padding: 0;
    margin: 0;
  }
  .recipe.white-silver .text-right {
    padding: 5% 10% 5% 50%;
  }
  .recipe.red:after {
    height: 295px;
  }

  .recipe.red:before {
    top: -74px;
  }
}

@media screen and (max-width: 1023px) {
  .recipe.red:after {
    height: 265px;
    width: 60%;
  }
  .recipe.white-silver .text-left {
    padding:0 !important;
	background:#fff;
  }
  .recipe.white-silver .text-right {
	background:#e5e1e0;
  }
  .recipe .container h1.title {
    font-size: 38px;
  }
  .recipe.silver p {
    margin: 50px 40px 70px;
  }
  .recipe.red h2 {
    font-size: 2.5rem;
  }
  .recipe.red p {
    margin: 3rem 0 0 0;
  }
  .recipe.white-silver .text-left,
  .recipe.white-silver .text-right {
    padding: 8% !important;
  }
  .footer .column {
    padding: 2% !important;
  }
  .top-banner {
    height: 209px;
  }
  .recipe.red:before {
    top: -57px;
  }
  .recipe.white-silver .text-left {
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .recipe.red:before {
    top: -75px;
    background-size: cover;
  }
  .recipe.red:after {
    height: 215px;
  }  
  .recipe.red h2 { font-size: 1.5rem; }

  .recipe .container h1.title {
    font-size: 30px;
    margin-bottom: 50px;
  }
  .recipe.red:before {
    top: -95px;
  }
  .recipe.red p {
    margin: 2rem 0rem -0.5rem 0;
    position: relative;       
    font-size: 1.15rem;
  }
  .text-right {
    padding: 0 35px;
  }
  .mobile-only {
    display: block;
  }  
  .no-show {
    display: none;
  }
  .top-banner  {
    height: 137px;
  }
  .column {
    width: 100%;
  }
  .title {
    padding: 0;
    font-size: 1.8em;
  }
  img {
    max-width: 100%;
  }
}

@media screen and (max-width: 639px) {
  .recipe.red:after {
    background-position:  0 49px;
  }
  .top-banner {
    height: 130px;
  }
}

@media screen and (max-width: 479px) {
  .top-banner {
    height: 115px;
  }
  .recipe.red:after {
    width: 100%;
    height: 230px;
  }
  .recipe.red { 
    padding-bottom: 250px; 
  }
  .recipe.red p {
    margin-top: 3rem;
  }
}

@media only screen and (max-width: 375px) {
  .top-banner {
    height: 102px;
  }  
}
@media only screen and (max-width: 320px) {
  .recipe .column.text-left .sprite-title,
  .recipe .column.text-right .sprite-title {
    background-size: 100%;
    width: 270px;
    background-repeat: no-repeat;
    background-position: 0 -100px;
  }
  .recipe .column.text-right .sprite-title {
    background-position: 0 0;
  }
  .top-banner {
    height: 87px;
  }
}