/***** Imports *****/

@import url('../../vendor/sal.js/sal.css');
@import url('icomoon.css');

/***** Variables *****/

:root {
  --primary-dark: #c38907;
  --secondary-dark: #a10b0e;
}

/***** Main *****/

html,
body {
  height: 100%;
  overflow-x: hidden;
}

body {
  background-color: var(--primary);
}

.wrapper {
  min-height: 100%;
}

.content {
  background-image: url(../images/bg-main.jpg);
  background-repeat: no-repeat;
  background-position: right bottom;
}

/***** Transition *****/

/* Opacity */

.top_nav__item {
  transition: opacity 0.15s ease-in-out;
}

/***** Header *****/

/* Top Nav */
.top_nav {
  right: 1rem;
  top: 1.3rem;
  z-index: 1;
}

.top_nav__item__link {
  height: 24px;
  width: 38px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.top_nav__item {
  opacity: .5;
}

.top_nav__item.active {
  opacity: 1;
}

.top_nav__item.active,
.top_nav__item:hover {
  -webkit-filter: grayscale(0);
  filter: none;
  opacity: 1;
}

.top_nav__item {
  filter: gray;
  /* IE6-9 */
  -webkit-filter: grayscale(1);
  /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: grayscale(1);
  /* Microsoft Edge and Firefox 35+ */
}

.top_nav__item__link--es {
  background-image: url(../images/flag-es.svg);
}

.top_nav__item__link--br {
  background-image: url(../images/flag-br.svg);
}

.top_nav__item__link--us {
  background-image: url(../images/flag-us.svg);
}

.top_nav__item__link--faq {
  background-image: url(../images/icon-faq.svg);
}

/***** Footer *****/

footer {
  background-color: #404042;
}

/***** Video Background *****/

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/***** Preloader *****/

.preloader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-image: url('../images/loading.gif');
  background-size: 64px 64px;
  background-repeat: no-repeat;
  background-color: #FFF;
  background-position: center;
}

/***** Custom *****/

/* Background Color */

.bg-primary-dark {
  background-color: var(--primary-dark) !important;
}

/* Text Color */

.text-primary-dark {
  color: var(--primary-dark) !important;
}

/***** Backgrounds *****/

.bg-blur {
  overflow: hidden;
}

.bg-blur,
.bg-blur .bg-blur-content {
  position: relative;
}

.bg-blur-content {
  z-index: 2;
}

.bg-blur .bg-blur-el {
  background-size: cover;
  position: absolute;
  left: 0;
  background-attachment: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: .2;
  filter: blur(20px);
}

/***** Back To Top Button *****/

.back-to-top {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  text-decoration: none;
  color: #ffffff;
  background-color: rgb(220 52 68 / 50%);
  padding: .5186rem 1rem;
  border-radius: 100px;
  display: none;
  font-size: 1.3rem;
  text-shadow: 1px 1px 1px #c93838;
}

.back-to-top:hover {
  background-color: rgb(220 52 68 / 70%);
  color: white;
  text-decoration: none !important;
}

/***** Accordion Arrows *****/

.accordion_arrows .card-header .btn:before {
  content: '\f077';
  position: absolute;
  left: 1rem;
  top: 1rem;
  font-family: 'icomoon';
  transform: rotate(180deg);
  transition: transform 0.15s ease-in-out, top 0.15s ease-in-out;
}

.accordion_arrows .card-header .btn[aria-expanded='false']:before {
  transform: rotate(90deg);
  top: .8rem;
}

/***** Icon Catalog *****/

.icon-catalog {
  width: 8rem;
  height: 8rem;
  display: inline-flex;
  border-radius: 50% !important;
  background: linear-gradient(-45deg, rgba(0, 0, 0, 0.22), rgba(255, 255, 255, 0.25));
  box-shadow: 2px 2px 20px 0 rgb(0 0 0 / 10%), -8px -8px 12px 0 rgb(255 255 255 / 81%);
  background: linear-gradient(-45deg, rgb(0 0 0 / 12%), rgba(255, 255, 255, 1));
  border: solid 1px;
  border-color: white;
  transform: scale(0.9);
  transition: transform 0.15s ease-in-out, border 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.icon-catalog:hover {
  box-shadow: none;
  border-color: var(--secondary);
  transform: scale(1);
  text-decoration: none;
}

.icon-catalog .icon {
  color: var(--secondary);
  font-size: 3.2rem;
  margin: auto;
  display: block;
}