/*/
 Setup das fontes
/*/

@font-face {
  font-family: 'FontAwesome';
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url(https://use.fontawesome.com/releases/v5.8.2/webfonts/fa-regular-400.eot);
  src: url(https://use.fontawesome.com/releases/v5.8.2/webfonts/fa-regular-400.eot?#iefix) format("embedded-opentype"),
    url(https://use.fontawesome.com/releases/v5.8.2/webfonts/fa-regular-400.woff2) format("woff2"),
    url(https://use.fontawesome.com/releases/v5.8.2/webfonts/fa-regular-400.woff) format("woff"),
    url(https://use.fontawesome.com/releases/v5.8.2/webfonts/fa-regular-400.ttf) format("truetype"),
    url(https://use.fontawesome.com/releases/v5.8.2/webfonts/fa-regular-400.svg#fontawesome) format("svg");
}

@font-face {
  font-family: 'DINPro-Regular';
  font-style: normal;
  font-weight: normal;
  src: url('../fonts/DINPro-Regular.otf') format('opentype');
}

@font-face {
  font-family: 'DINPro-Medium';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/DINPro-Medium.otf') format('opentype');
}

@font-face {
  font-family: 'DINPro-Bold';
  font-style: normal;
  font-weight: bolder;
  src: url('../fonts/DINPro-Bold.otf') format('opentype');
}


/*/
 Estrutura geral
/*/

body {
  font-family: 'DINPro-Regular', sans-serif;
}

header {
  background-image: url('../images/topo_mobile_conttroller.jpg');
  background-size: cover;
  background-color: #E8E0CE;
  background-position: center top;
  background-repeat: no-repeat;
  height: 220px;
}

footer {
  background-color: #112976;
}


/*/
 Coluna de texto
/*/

.itens-list {
  color: #112976;
  font-family: 'DINPro-Medium', sans-serif;
}

.itens-list h2 {
  font-size: 1.5rem;
}

.itens-list h2 strong {
  font-family: 'DINPro-Bold', sans-serif;
}

.itens-list h3 {
  margin-top: 2rem;
  font-size: 20px;
}

.itens-list p {
  margin-top: 1rem;
  font-size: 1rem;
}

.itens-list p:before {
  content: '\f058';
  font-family: 'FontAwesome';
  color: #FFBB30;
  margin-right: 1rem;
  display: inline-block;
  font-variant: normal;
  text-rendering: auto;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}


/*/
 Form de leads
/*/

.box-form {
  background-color: #112976;
}

.box-form h2 {
  font-family: 'DINPro-Bold', sans-serif;
  font-size: 2.3rem;
  letter-spacing: -1px;
}

.box-form h2 strong {
  color: #FAC835;
}

.box-form .form-group .btn-submit {
  font-family: 'DINPro-Bold', sans-serif;
  background-color: #FAC835;
  color: #FFFFFF;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.75rem;
  transition: all ease 600ms;
}

.box-form .form-group .btn-submit:hover,
.box-form .form-group .btn-submit.sending {
  background-color: #BF943C;
}

.is-invalid,
.alert.alert-success {
  color: #FAC835;
  background-color: transparent;
  border-color: #FFFFFF;
}


/*/
 Ajustes com Queries
/*/

@media (min-width: 576px) {
  header {
    background-image: url('../images/topo_conttroller.jpg');
  }

  .box-form .form-group .btn-submit {
    font-size: 2rem;
  }
}

@media (min-width: 768px) {
  header {
    height: 260px;
  }

  .itens-list h2 {
    font-size: 1.75rem;
  }

  .itens-list h3 {
    font-size: 1.5rem;
  }

  .itens-list p {
    font-size: 1.25rem;
  }
}

@media (min-width: 992px) {
  header {
    height: 350px;
  }
}

@media (min-width: 1200px) {
  header {
    height: 404px;
    background-position: center center;
  }
}


/*/
 Sessão de Modulos
/*/

.modulos h2 {
  font-family: 'DINPro-Bold', sans-serif;
  font-size: 42px;
  color: #112976;
}

.modulos h3 {
  font-size: 20px;
}

.modulos .box .icon {
  position: absolute;
  top: 25px;
  left: 0;
  width: 100px;
  height: 100px;
  background: no-repeat center center #fdc42b;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 3px 0 0 #a57a06;
  box-shadow: 0 3px 0 0 #a57a06;
  border-top: 1px solid #fff14f;
  text-align: center;
  font-size: 50px;
  color: #a57a06;
}

.modulos .box .icon[aria-disabled] {
  position: absolute;
  top: 25px;
  left: 0;
  width: 100px;
  height: 100px;
  background: no-repeat center center #b7b7b7;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 3px 0 0 #666;
  box-shadow: 0 3px 0 0 #666;
  border-top: 1px solid #666;
  text-align: center;
  font-size: 50px;
  color: #666;
  cursor: not-allowed !important;
}

.modulos .box .icon:before {
  top: 21px;
  position: relative;
  text-shadow: 0px -1px 0px #966a04;
}

.modulos .box .content {
  background: #FFF;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 5px 0 0 #b7b7b7;
  box-shadow: 0 5px 0 0 #b7b7b7;
  margin-left: 35px;
  padding: 35px 20px 20px 60px;
}

.modulos .box .content h2 {
  font-family: 'DINPro-Bold';
  font-size: 23px;
  color: #fdc42b;
}

.checkboxs {
  margin-top: 20px;
  border-top: 1px solid #e2e2e2;
  padding-top: 10px;
}

.checkbox {
  display: block;
}

.checkbox label {
  position: relative;
  font-family: 'DINPro-Medium';
  font-weight: normal;
  font-size: 14px;
  color: #898989;
  display: block;
}

.checkbox input[type=checkbox] {
  opacity: 0;
  filter: alpha(opacity=0);
  width: 16px;
  height: 16px;
}

.checkbox input[type=checkbox]+span {
  position: absolute;
  left: -2px;
  top: 0;
  width: 16px;
  height: 16px;
  border: 1px solid #dfdfdf;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background: #f6f6f6;
}

.checkbox input[type=checkbox]+span:before {
  font-family: "FontAwesome";
  content: " ";
  color: #e6b533;
  font-size: 19px;
  margin: -7px 0 0 -2px;
  display: block;
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  -ms-text-rendering: optimizeLegibility;
  -o-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

.checkbox input[type=checkbox]:checked+span:before {
  content: "\f14a";
}

.checkbox input[type=checkbox]:focus+span {
  border-color: #e6b533;
}

.checkbox input[type=checkbox]:disabled+span:before {
  color: #dfdfdf;
}

.checkbox input[type=checkbox]:disabled+span:before {
  color: #e6b533;
}

@media (max-width:576px) {
  .modulos h2,
  .modulos .box .content h2 {
    font-size: 1.5rem;
  }

  .checkbox label {
    font-size: 11px;
  }

  .modulos .box .icon {
    width: 90px;
    height: 90px;
  }
}