@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@600&display=swap');

/* Nuestro Bootstrap */
:root {
    --primary: #3388CC ;
    --secondary: #666666;
    --info: #75CAEB;
    --darkBlue: #3388CC;
    --blurDarkBlue: #6ba1ce85;
    --lightBlue: #F0F4FF;
}
.text-primary{
    color: var(--primary) !important;
}
.text-secondary{
    color: var(--secondary) !important;
}
.text-darkBlue{
    color: var(--darkBlue) !important;
}
.text-info{
    color: var(--info) !important;
}

.text-green{
  color: #459339;
}

.bg-light-green{
  background-color: rgb(245, 250, 244);
}
.bg-blurDarkBlue{
    background-color: var(--blurDarkBlue);
}
.bg-darkBlue{
    background-color: var(--darkBlue);
  }
.bg-primary{
    background-color: var(--primary) !important;
}
.bg-lightBlue{
  background-color: var(--lightBlue) !important;
}
.bg-secondary{
    background-color: var(--secondary) !important;
}
.bg-info{
    background-color: var(--info) !important;
}

.text-justify{
    text-align: justify !important;
}

.font-title{
    text-transform: uppercase;
    color: var(--darkBlue) !important;
    font-weight: 700;
    border-bottom: 2px solid var(--darkBlue);
    width: 75%;
    margin: auto;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    text-align: center;
}

a{
    text-decoration: none !important;
}

html, body{
  overflow-x: hidden !important;
}
/* Barra de Scroll */
*::-webkit-scrollbar {
    width: 0.8rem;
}
*::-webkit-scrollbar-track {
    background-color: #F0F4FF;
}
*::-webkit-scrollbar-thumb {
    background-color: var(--darkBlue);
    box-shadow: inset 0 0 6px var(--darkBlue);
}
*::-webkit-scrollbar-thumb:hover {
    background-color: var(--info);
    box-shadow: inset 0 0 6px var(--info);
}


/* Clases inventadas */
.big-margin{
    margin-top: 3rem !important;
}
.big-margin-index{
  margin-top: 6rem !important;
}
.container-title{
    border-bottom: 3px solid var(--primary);
}
.container-title-success{
  border-bottom: 3px solid #459339;

}
.more-info {
  display: inline-block ;
  position: relative ;
  color: var(--primary) ;
  text-decoration: none ;
  font-size: 1.3rem;
  border-radius: 5px;
  font-weight: 600;
}
.more-info:after {
  content: "" ;
  display: block ;
  margin: auto ;
  height: 2px ;
  width: 0px ;
  transition: all .8s ;
  color: var(--darkBlue) !important;
}
.more-info:hover:after {
  width: 100% ;
  background: var(--darkBlue) ;
  color: var(--darkBlue) !important;
}

.navbar-nav{
  cursor: pointer;
}

/* Header y Navbar */
/* .subtitle{
  font-size: 2rem;
} */

/* .select-navbar{
  background-color: transparent;
  border: none;
  font-weight: 600;
  color: #0000008c;
} */

select:focus {
  border: none;
  outline: -webkit-focus-ring-color auto 0px;

}
.nav-link{
  text-transform: uppercase;
  font-weight: 600;
  color: #0000008c;
}

.dropdown-item{
  font-weight: 600;
}
.dropdown-countries{
  padding-top: 0rem !important;
  padding-left: 0.6rem !important;
  padding-right: 1rem !important;
  /* width: 8rem; */

}

.dropdown-item:focus{
  background-color: transparent !important;
}

.dropdown-menu{
  border: 1px solid transparent;
  min-width: 8.5rem !important;
  
}

.nav-link:hover, .dropdown-item:hover{
  transition: 0.3s;
  text-shadow: var(--info) 1px 0 10px;
}



.navbar-toggler, .navbar-toggler:active, .navbar-toggler:focus{
  border: 0.15rem solid transparent !important;
  outline: none !important;
  color: transparent !important;
}


/* Footer */
.title_footer{
    margin-bottom: 1rem;
    font-size: 125%;
    font-weight: 600 !important;
  }
.p_footer{
  font-size: 100%;
}
.p_footer a{
  color: white !important;
}

.p_footer span{
  margin-left: 1rem;
}
.follow_footer{
  text-align: right;
}
.category{
  transition: 0.3s;
}
.category:hover{
  transition: 0.3s;
  text-shadow: var(--info) 1px 0 20px;
}
.fa_footer{
  transition: 0.3s;
}
.fa_footer:hover{
  transition: 0.3s;
  text-shadow: var(--info) 1px 0 12px;
}
.fa-linkedin{
  transition: 0.3s;
  font-size: 180%;
}
.fa-linkedin:hover{
  transition: 0.3s;
  color: #3388CC;
  font-size: 180%;
}
.fa-youtube-play{
  transition: 0.3s;
  font-size: 180%;
}
.fa-youtube-play:hover{
  transition: 0.3s;
  color: #FF0000;
  font-size: 180%;
}


/* Botones */
.btn-outline-primary{
  font-weight: 600;
  border-radius: 3rem;
  border: 0.15rem solid var(--darkBlue);
  color: var(--darkBlue) !important;
  width: 60%;
  transition: 0.3s;
  font-family: 'Roboto', sans-serif;
}
.btn-outline-primary:hover{
  border-radius: 3rem;
  border: 0.15rem solid var(--primary);
  width: 70%;
  color: var(--primary) !important;
  background: var(--lightBlue);
  transition: 0.3s;
  font-family: 'Roboto', sans-serif;
}

/* Botones */
.btn-outline-primary-download{
  font-weight: 600;
  border: 0.15rem solid var(--darkBlue);
  color: var(--darkBlue) !important;
  transition: 0.3s;
  font-family: 'Roboto', sans-serif;
}
.btn-outline-primary-download:hover{
  border: 0.15rem solid var(--primary);
  color: var(--primary) !important;
  background: var(--lightBlue);
  transition: 0.3s;
  font-family: 'Roboto', sans-serif;
}


/* Imágenes */
.picture-border{
  border-radius: 0.3rem;
}

.frame-incon-primary{
  border-radius: 100%;
  border: 5px solid var(--primary);
  padding: 0.8rem;
  width: 6rem;
  height: 6rem;
  margin: auto;
}

.frame-incon-green{
  border-radius: 100%;
  border: 5px solid green;
  padding: 0.8rem;
  width: 6rem;
  height: 6rem;
  margin: auto;
}

.frame-incon-purple{
  border-radius: 100%;
  border: 5px solid purple;
  padding: 0.8rem;
  width: 6rem;
  height: 6rem;
  margin: auto;
}

.frame-incon-orange{
  border-radius: 100%;
  border: 5px solid orange;
  padding: 0.8rem;
  width: 6rem;
  height: 6rem;
  margin: auto;
}


.frame-incon-sensor{
  border-radius: 100%;
  border: 5px solid var(--primary);
  padding: 0.8rem;
  width: 6rem;
  height: 6rem;
  background: var(--lightBlue);
  margin: auto;
}

.frame-incon-sensor:hover{
  box-shadow: 0 0 30px var(--info);
}

h1, h2, h3, h4, h5{
  font-family: 'Work Sans', sans-serif;
}