@import url("https://materiais.quero.com/shared/assets/styles/colors.css");

html, body {
    max-width: 100%;
    overflow-x: hidden;
    height: 100%;
    font-family: 'proxima-nova';
    -webkit-font-smoothing: antialiased;
    background: #fff
}

#conversion {
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.5)!important;
    background: var(--primary-deep);
    border-style:none
}

h1 span {
  line-height: 1em;
}

#form-title span{
  line-height: 40px;
}

/*.background-edit .image-container > .section-background-image {
    width: 100%;
    height: 60%;
    background-repeat: no-repeat;

}*/

header.header {
    background: white;
    margin-left: -500px;
    margin-right: -500px;
    padding: 24px 0 5px 0;
}

#astrology h3 {
  color: white;
  font-size: 28px;
  padding: 15px;
}

#banner-background .container div.row{
   padding-top: 40px;
}

#result-text {
  color: white;
  font-size: 16px;
}
#courses h4 {
  font-size: 20px;
  max-width: 250px;
}

#courses p {
    padding: 0;
}

.share-area {
  justify-content: space-evenly;
  text-align: center;
}

#share-middle {
  padding-bottom: 40px;
}

#share-bottom {
  padding-top: 30px;
}

#share-area img:hover {
  opacity: 0.8;
}
#share-area img {
  transition: .5s ease;
  cursor: pointer;
}

.course-header{
  padding: 15px;
  display: flex;
  justify-content: space-between;
}

.course-header:before{
  display: none;
}
.course-header:after{
  display: none;
}

.course-cta {
  background: #10c979;
  padding: 10px 24px 10px 24px;
  height: 40px;
  width: 250px;
  font-size: 15px;
  border-radius: 4px;
  text-align: center;
}

.course-cta a {
    color: white;
}

#courses p {
  font-size: 16px;
}
#courses a {
  font-size: 16px;
}

#courses .row {
  margin-top: 5px;
}

.share-area {
    display: block;
}

.cptb-bar {margin-bottom: 20px;
    max-height: 280px;
    margin-left: 70px;
    margin-right: 45px;
    margin-top: 0px;
    margin-bottom: 20px;
}

.form-recall {
    padding: 40px;
    margin-bottom: 20px;
    text-align: center;
}

.start-button {
    background-color: var(--graduation-pure);
    color: #fff;
    padding: 15px 0px;
    font-size: 24px;
    border: none;
    border-radius: 3px;
    width: 60%;
    transition: all 0.2s linear;
}

.start-button:hover {
    background-color: var(--graduation-deep);
}

/*
Original LP css
*/

.header {
    text-align: center;
    padding: 40px 0;
    color: #FFF;
}

.banner {
    position: relative;
    padding: 0 15px 100px 15px;
}

.banner--upper-text {
    font-size: 36px;
    color: #fff;
    margin-top: 60px
}

.banner-title {
    font-size: 48px;
    color: white;
    font-weight: 700;
}
.banner-subtitle {
    font-size: 28px;
    color: white;
    padding-bottom: 20px;
}

.banner--text {
    font-size: 18px;
    color: #fff;
    max-width: 850px;
    margin: 0 auto;
    margin-bottom: 45px
}

.section {
    padding: 60px 15px
}

.section--topics {
    padding-bottom: 30px;
}

.section--title {
    font-size: 36px;
    color: #001d4e;
    margin-top: 0px;
    margin-bottom: 60px;
}

.topic--item {
    margin-bottom: 50px;
    flex-basis: 100%;
}

.topic--item p {
    font-size: 18px;
    color: #252525;
}

.topic--image {
    padding-top: 5px;
}

.footer {
    padding: 25px 15px;
    text-align: center;
}

.footer .footer-text img {
    height: 36px;
}

.copyright {
	color: white;
}

.privacy-policy {
	color: white;
}

.icon-list--item {
    margin-bottom: 30px;
    float: left;
    width: 100%;
}

.icon-list--image {
    text-align: center;
    margin-bottom: 20px
}

.icon-list--text {
    text-align: center;
}

.icon-list--text h3 {
    font-size: 24px;
    color: #011d66;
    font-weight: 600;
    margin-bottom: 15px
}

.icon-list--text p {
    font-size: 16px;
    color: #252525;
}

.topic-list {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    justify-content: space-between;
}

.icon-list {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    justify-content: space-between;
}

@media only screen and (min-width: 992px) {
    .icon-list--item {
        width: 30%;
    }
    .topic--item {
        flex-basis: 45%;
        width: 45%;
        float: left;
    }
}

@media only screen and (max-width: 768px) {
    .banner--title {
        font-size: 48px;
        margin-bottom: 40px;
    }
}
/* BASE */
#conversion header {
display: block;
margin: 0;
padding: 30px 30px 20px;
}
#conversion header h2 {
display: block;
font-size: 20px;
font-weight: bold;
text-align: left;
margin: 0 0 10px 0;
padding: 0;
}
#conversion header p {
display: block;
font-size: 16px;
line-height: 1.2em;
margin: 0 0 10px 0;
padding: 0;
}
#conversion section {
display: block;
margin: 0;
padding: 30px 30px 20px;
}
#conversion .social-conversion {
padding-bottom: 0 !important;
}
#conversion .social-conversion + section {
padding-top: 20px !important;
}
#conversion-modal .modal-content section p,
#conversion section p {
display: block;
font-size: 12px;
line-height: 1em;
margin: 0;
padding: 0 0 20px 0;
}
#conversion-modal .modal-content section p.notice,
#conversion section p.notice {
font-size: 12px;
}

/* FIELDS */
#conversion section form div.field,
#conversion-modal .modal-content section form div.field {
margin: 0;
padding: 0 0 12px 0;
}
#conversion label {
    color: #fff;
}
#conversion section form div.field div,
#conversion-modal .modal-content section form div.field div {
clear: both;
width: 100%;
margin: 0 0 5px 0;
}
#conversion-modal .modal-content section form input,
#conversion-modal .modal-content section form select,
#conversion-modal .modal-content section form textarea,
#conversion-modal .modal-content section form .select2-choice,
#conversion section form input,
#conversion section form select,
#conversion section form textarea,
#conversion section form .select2-choice {
display: inline-block;
background-color: #FFFFFF;
vertical-align: middle;
font-size: 18px;
line-height: 20px;
width: 100%;
height: 36px;
margin: 0;
padding: 5px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#conversion-modal .modal-content section form label,
#conversion section form label {
display: block;
min-height: 25px;
margin: 0;
padding: 0 0 5px 0;
}
#conversion-modal .modal-content section form select,
#conversion section form select {
width: 100%;
height: 36px;
line-height: 36px;
}

#conversion section form textarea {
height: 104px;
}

#conversion section form input[type=radio],
#conversion section form input[type=checkbox] {
width: inherit;
height: inherit;
margin-top: 0 !important;
margin-right: 8px;
}

#conversion section form input[type=radio] + label,
#conversion section form input[type=radio] + label + label,
#conversion section form input[type=checkbox] + label {
display: block;
width: auto;
padding: 5px 0 4px 28px;
}

.container.content {
    font-size: 20px;
}

.container.content h2 {
    padding-left: 10px;
    padding-top: 20px;
    font-size: 28px;
    font-weight: 600;
}

.container.content h3 {
    font-size: 26px;
    font-weight: 600;
}

.container.content p {
    padding: 10px;
    line-height: 1.5em;
}
.container.content li {
    padding: 6px;
}

/* CALL TO ACTION */
#conversion section div.actions {
text-align: center;
padding: 16px 0 8px 0;
}
#conversion #cf_submit {
    background-color: var(--graduation-pure);
    color: #fff;
}
#conversion #cf_submit:hover {
    background-color: var(--graduation-deep);
}

#conversion section div.actions .call_button,
#conversion section div.actions a.call_button {
display: block;
cursor: pointer;
height: auto;
text-align: center;
text-decoration: none;
font-weight: bold;
font-size: 20px;
word-break: break-word;
line-height: 1.2em;
white-space: normal;
vertical-align: middle;
margin: 2px auto 24px auto;
padding: 15px 20px 17px 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-appearance: none;
}
#conversion section div.actions .call_button.editable {
cursor: text;
}
#conversion section div.actions .call_button.editable:not(#call_pay_twitter):not(#call_pay_facebook):hover {
outline: 1px solid #27a0ff;
}
#conversion-modal .modal-content section div.actions img,
#conversion section div.actions img {
width: auto !important;
}

/* ERROR */
#conversion-modal .modal-content section form label.error,
#conversion section form label.error {
display: none !important;
}
#conversion-modal .modal-content section form input.error,
#conversion-modal .modal-content section form textarea.error,
#conversion-modal .modal-content section form .select2-container.error .select2-choice,
#conversion-modal .modal-content section form select.error,
#conversion section form input.error,
#conversion section form textarea.error,
#conversion section form .select2-container.error .select2-choice,
#conversion section form select.error {
background-color: #FFDDDD;
}
#conversion-modal .modal-content section div#error-container,
#conversion section div#error-container {
display: none;
background-color: #FFDDDD;
margin: 0 0 24px 0;
padding: 16px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#conversion-modal .modal-content section div#error-container p,
#conversion section div#error-container p {
color: #463A33;
text-align: center;
font-size: 16px;
margin: 0;
padding: 0;
}

/* SELECT 2 */
.select2-container .select2-choice {
background: #FFFFFF;
}
.select2-container .select2-choice .select2-arrow {
background: none;
border: none;
}
.select2-container .select2-choice .select2-arrow b {
background-position: 0 5px;
}
.select2-drop-active {
border-color: #FFFFFF;
padding: 5px;
margin-top: -5px;
margin-left: 1px;
}

.twitter-typeahead {
    border-radius: 3px;
    width: 100%;
}
.tt-menu {
    background: white;
    padding: 10px;
}

.tt-open {
    border-radius: 3px;
}

.tt-selectable {
	cursor: pointer;
}

.tt-selectable:hover {
	font-size: 17px;
    border-bottom: solid 1px;
}

#topic-container {
    padding-bottom: 20px;
}

#topic-container, #content-container, #courses-container {
    background: #fff;
}

#courses-container {
    padding: 40px;
}
#warning-container {
    background: #f4f4f4;
    padding: 40px;
}

#footer-container {
    background: var(--primary-pure);
}


/* MEDIA QUERY */
@media screen and (min-width: 760px) {
#conversion {
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
}
#conversion header {
  -webkit-border-radius: 15px 15px 0px 0px;
  -moz-border-radius: 15px 15px 0px 0px;
  border-radius: 15px 15px 0px 0px;
}
#conversion section {
  -webkit-border-radius: 0px 0px 15px 15px;
  -moz-border-radius: 0px 0px 15px 15px;
  border-radius: 0px 0px 15px 15px;
}
#conversion-modal .modal-content {
  width: 600px;
  margin: 30px auto;
}
}

#banner-background {
    opacity: 1;
    background-position: 50% 0%;
    background-size: cover;
    background-color: var(--primary-pure);
}

#conversion {
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

#conversion header {
    border-radius: 0px;
}

#conversion header h2 {
    color: white;
    font-size: 28px;
    text-align: center;
}

#conversion header p {
    color: #fff;
}

#conversion section {
    padding-top: 10px;
}

#conversion section form label {
    font-size: 18px;
}

#conversion section form input,
#conversion section form select,
#conversion section form textarea,
#conversion section form .select2-choice {
    height: 42px;
    padding: 0 10px;
}

#conversion section form .select2-choice {
    padding-top: 10px;
}

#conversion section div.actions #cf_submit {
    font-size: 24px;
    padding: 15px 0px;
    font-size: 24px;
    font-weight: 900;
    transition: all 0.2s linear
}

#conversion section #cf_submit {
    border: none;
}

#conversion section #form-spam {
    font-size: 14px;
    color: #fff;
    text-align: center;
}


@media (max-width: 600px) {

  .banner--upper-text {
    margin-top: 20px;
  }

  .banner-title {
    font-size: 30px;
  }

  .banner-subtitle {
	font-size: 22px;
  }


  footer p span{
    display: block;
  }
  .cptb-bar {
    margin-left: 80px;
    margin-right: 80px;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .course-header{
    display: block;
  }

  .start-button {
    width:100%;
  }

  .form-recall {
    padding: 40px 20px;
  }

  #courses-container,
  #warning-container {
      padding: 20px
  }

  #warning-container .col-md-2,
  #warning-container .col-md-10 {
	  padding: 0;
  }

  #warning-container img {
	  display: block;
	  margin: 20px auto;
  }

  #content-container h3 {
	  margin: 10px;
  }

  .course-cta {
    margin-top: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  #banner-text {
    display: none;
  }

  #banner-background .container div.row {
    padding-top: 5px;
  }

  #result-text {
    padding: 14px;
    font-size: 17px;
  }

  .col-md-offset-1.col-md-5 {
    margin-left: -50px;
    margin-right: -50px;
    padding-left: 35px;
    padding-right: 35px;
  }

  .banner {
    position: relative;
    padding-bottom: 0;
  }

  h1 span {
    font-size: 34px !important;
  }

  #banner-upper-text span {
    font-size: 22px !important;
    line-height: 32px !important;
  }

  #testimonials-title .col-md-2 {
    text-align: center;
    padding-bottom: 12px;
  }

  #testimonials-title p {
    padding-top: 20px;
  }

  .share-area {
    display: inline-grid;
    text-align: center;
    height: 150px;
    width: 100%;
  }

  #share-middle {
    padding-bottom: 20px;
    margin-top: 20px;
  }

  #share-bottom {
    margin-bottom: 20px;
  }

  .section--topics {
    padding-bottom: 0px;
  }

  #conversion header h2 {
    font-size: 24px;
  }
  #conversion header {
    padding-bottom: 7px;
  }

}