/* Tema desarrollado por Fácil Aplicaciones (facilaplicaciones @ aol.com) */

/* =================================
========== THEME SETTINGS ==========
================================= */

:root {
    --color-1: rgba(31,63,110);
    --color-1-light: rgba(31,63,110,0.5);
    --color-2: rgba(18,152,209);
    --color-2-light: rgba(18,152,209,0.5);
    --color-3: rgba(91,193,123);
    --color-3-light: rgba(91,193,123,0.8);
    --color-grey: rgb(102,102,102);
    --color-pink: rgb(255, 182, 193);
    --color-cream: rgb(255, 239, 213);
    --color-salmon: rgb(255, 160, 122);
    --color-floral: rgb(255, 245, 238);
    --color-floral: rgb(255, 250, 205);
    --color-yellow: rgb(71,134,178);
}

/* ========== BODY ========== */

body {
    margin: 0;
    border: 0;
    color: #FFFFFF !important;
    font-family: 'Montserrat' !important;
    font-size: .90rem !important;
    scroll-behavior: smooth !important;    
}

/* ========== BODY ========== */

#linktree {
    background-image: url('../images/info.jpg') !important; 
    background-size: cover !important; 
    background-attachment: fixed !important; 
    height: 100vh !important; 
    display: flex !important; 
    justify-content: center !important; 
    align-items: center !important; 
}

/* ========== FONTS ========== */

h1 {
    font-size: 1.5rem !important;
    font-style: oblique !important;
    font-weight: bold !important;
    margin-top: 25px !important;
}

h2 {  
    font-size: 1.1rem !important;
    font-weight: bold !important;
}

h3 {
    font-size: 0.9rem !important;
    font-weight: bold !important;
}

h5 {
    color: var(--color-1) !important; 
    font-weight: 600 !important;
}

p {
    color: #FFFFFF !important;
    font-family: 'arial' !important;
    font-size: .90rem !important;
    font-style:none !important;
}

.color-1{
    color: var(--color-1) !important; 
}

.color-2{
    color: var(--color-2) !important; 
}

.color-3 {
    color: var(--color-3) !important;
}

.color-facil1 {
    color: var(--facil-1) !important;
}

.color-facil2 {
    color: var(--facil-2) !important;
}

.color-gisin1 {
    color: var(--gisin-1) !important;
}

.color-gisin2 {
    color: var(--gisin-2) !important;
}

/* ========== LINKS ========== */

a {
    font-family: 'arial' !important;
    font-size: .90rem !important;
    font-style:none;
    font-weight: none;
}

.contact-links{
    font-size: 1rem !important;
    color: #333333 !important;
    text-decoration: none !important;
    margin-left: 10px !important;
}

.demo-links{
    font-size: 1rem !important;
    color: var(--facil-2) !important;
    text-decoration: none !important;
}

.white-links{
    font-size: 1rem !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    margin-left: 10px !important;
}

/* ========== NAVBAR ========== */

.navbar-brand {
    color: var(--color-1) !important;
}

.nav-link {
    color: #FFFFFF !important;

}

.nav-link:hover{
    color: var(--color-2) !important; 
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='blue' stroke-linecap='round' stroke-miterlimit='10' stroke-width='1' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-toggler {
    border: 2px solid var(--color-1) !important;
}

/* ========== IMAGES ========== */

.responsive {
    max-width: 60%;
    height: auto;
}

.logo {
    max-width: 250px !important;
}

.logo-gisinlink{
    max-width: 150px !important;
}

.logo-big {
    max-width: 350px !important;
}

.image-qr{
    max-width: 350px !important;
}

.contact-icons{
    width: 25px !important;
    height: 25px !important;;
}

.pub{
    max-width: 350px !important;
}

/* ========== BACKGROUNDS ========== */

.bg1 {
    background-color: var(--color-1) !important;
}

.bg1-light {
    background-color: var(--color-1-light) !important;
}

.bg2 {
    background-color: var(--color-2) !important;
}

.bg2-light {
    background-color: var(--color-2-light) !important;
}

.bg3 {
    background-color: var(--color-3) !important;
}

.bg3-light {
    background-color: var(--color-3-light) !important;
}

.bg-blue {
    background-color: var(--color-3) !important;
}

.bg-facil1 {
    background-color: var(--facil-1) !important;
}

.bg-facil2 {
    background-color: var(--facil-2) !important;
}

/* ========== ALIGMENTS ========== */

.a-center {
    text-align: center !important;
}

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

.a-left {
    text-align: left !important;
}

.content-center{
    display: flex !important; 
    justify-content: center !important; 
    align-items: center !important; 
}

/* ========== DIVS ========== */

#div-clients{
    column-count:2!important;
    column-gap:20px!important;
    font-size: .90rem !important;
}

.div-center {
    align-items: center !important;
    margin-left: 10% !important;
    margin-right: 10% !important;
}

.div-image {
    display: flex !important;
    justify-content: center !important;
    padding: 1% !important;
}

/* ===============================
========== SECCIONES ==========
=============================== */

.home {
    height:max-content !important;
    background-color: #FFFFFF !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: left top !important;
}

#others-body {
    min-height:100vh !important; 
    background-image: linear-gradient(180deg, var(--color-3), var(--gisin-2)) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: left top !important;
}

#history {
    display: flex !important;
    background-image: url('../images/materials.jpg') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-position: left top !important;
}

#video {
    display: flex !important;
    background-image: linear-gradient(180deg, var(--facil-1), var(--facil-2)) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: left top !important;
}

#quality{
    display: flex !important;
    background-image: url('../images/hands.jpg') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-position: left top !important;
}

.pointer {
    cursor: pointer !important;
}