:root{}

body {
    font-family: var(--font-family-sans-serif);
    background-color: var(--white);
}
/*--- BTN ---*/
.btn-primary {
    background-color: var(--primary);
    color: var(--white);
    border: 1px solid var(--entitled);
    border-radius: 0;
    padding: 7px 30px;
}
.btn-primary:hover {
    background-color: var(--primary);
    border: 1px solid var(--entitled);
    opacity: .8;
}
.btn-secondary {
    background-color: var(--pink);
    color: var(--warning);
    border: 1px solid var(--warning);
    border-radius: 0;
    padding: 7px 30px;
}
.btn-secondary:hover {
    background-color: var(--warning);
    border: 1px solid var(--warning);
    color: var(--pink);
    opacity: .8;
}
.btn-warning {
    background-color: var(--warning);
    color: var(--white);
    border-color: var(--warning);
}
.btn-warning:hover {
    background-color: var(--warning);
    border-color: var(--warning);
    color: var(--white);
    opacity: .8;
}
.btn-warning:not(:disabled):not(.disabled):active {
    color: var(--white);
    background-color: var(--warning);
    border-color: var(--warning);
}
.btn-warning:not(:disabled):not(.disabled):active:focus,
.btn-warning:focus, 
.btn-warning.focus {
  box-shadow: 0 0 0 0.2rem rgba(236, 0, 140, 0.5);
}
.btn-danger {
    background-color: var(--danger);
    color: var(--white);
    border-color: var(--danger);
}
.btn-sm {
    padding: .25rem .75rem;
}
.btn-rounded {
    border-radius: 250px;
}
.btn-wide {
    padding: calc(.25*var(--spacer)) calc(2*var(--spacer));
}
/*--- HELPERS ---*/
a {
    color: var(--primary);
}
a:hover {
    text-decoration: none;
    color: var(--primary);
}
hr {
    margin-top: 0;
}
.text-warning {
    color: var(--warning)!important;
}
.text-primary {
    color: var(--primary)!important;
}
.table-60 {
    width: 60%;
}
.img-40 {
    height: 40px;
}
.img-50 {
    max-height: 50px;
}
.img-60 {
    max-height: 60px;
}
.img-100 {
    max-height: 100px;
}
.h1 {
    color: var(--text);
}
/* --- COL-INTRO --- */
.col-intro {
    position: relative;
}
.col-intro .tick {
    position: absolute;
    width: 120px;
    height: 105px;
    top: -10%;
    right: 20%;
}
.col-intro .graph {
    position: absolute;
    width: 1000px;
    height: 330px;
    top: 80%;
    right: -260px;
    z-index: -1;
}
.col-intro .p {
    color: var(--text);
    font-size: 2rem;
    font-weight: 300;
    line-height: 2.5rem;
}

/* --- COL-CONNECT --- */
.col-connect {
    min-height: 350px;
}
.col-connect .p {
    color: var(--warning);
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.5rem;
}
.col-connect a.btn {
    box-shadow: var(--box-shadow);
    color: var(--white);
}
.col-connect button {
    color: var(--gray);
    border: none;
    background: transparent;
}
/* --- COL-VIDEO --- */
.col-video .bordered-player {
    border: 7px solid var(--entitled);
    border-radius: 30px;
}
.col-video .p {
    font-size: 1.5rem;
    font-weight: 300;
}

/* --- COL-REGISTRATION --- */
.col-registration {
    /*background: url(../../assets/img/img-registration.jpg) no-repeat right -300px bottom -200px;*/
    /*background-size: contain;*/
}

/* --- FOOTER --- */
footer {
    background: var(--text);
}

/* --- MODAL --- */
.modal-backdrop {
    background-color: transparent;
}
.modal-dialog-centered .modal-header {
    align-items: center;
    color: var(--text);
    font-weight: 700;
    border-bottom: none;
}
.modal-dialog-centered .modal-content {
    border: none;
    border-radius: 0;
    box-shadow: 0px 15px 30px rgba(206,212,218,.35);
    background-color: var(--white);
}
.modal-dialog-centered .modal-body a {
    color: var(--primary);
}
.modal-dialog-centered .modal-footer {
    justify-content: center;
    border-top: none;
}

/*--- FORM-GROUP ---*/
.form-group {
    display: flex;
    flex-direction: column-reverse;
}
.form-group label {
    transition: all 0.3s ease;
    color: var(--gray);
}
.form-group input {
    transition: all 0.3s ease;
    background-color: var(--white);
}
.form-group input::placeholder {
    color: var(--gray);
}
.form-group input:focus {
    border-color: var(--text);
    caret-color: var(--text);
    background-color: var(--white);
}
.form-group input:focus + label {
    color: var(--text);
}
.form-group input {
    border-radius: 250px;
}
.form-group input[type="text"]:focus,
.form-group input[type="password"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="tel"]:focus {
    box-shadow: var(--box-shadow);
}
label.essential::after {
    content: " *";
}

/*--- SELECT ---*/
.custom-select {
    background: url("../../assets/img/icones/ico-select-arrow-down.svg") no-repeat right .75rem center/12px 10px var(--white);
    border-radius: 50px;
/*    color: var(--gray-dark);*/
}
.custom-select:focus {
    box-shadow: var(--box-shadow);
    border-color: var(--text); 
}
.custom-select:focus + label {
    color: var(--text);
}
.custom-select.mini {
    width: 30%;
}