:root {
    --cblue: #2C4D78;
    --cbrowm: #E7BDB2;
    --cyellow: #E6BE57;
}


body, html {
    height: 100%;
}

/* general */

.mt-start {
    margin-top: 8vh;
}

.title {
    font-size: 3rem;
}

.txt-blue {color: var(--cblue);}
.bg-blue{background-color: var(--cblue);}

.txt-brown{color: var(--cbrowm);}
.bg-brown{background-color: var(--cbrowm);}

.txt-yellow{color:var(--cyellow);}
.bg-yellow{background-color: var(--cyellow);}

.fix-bg { 
    background-repeat: no-repeat !important;
    background-size: cover !important; 
    background-position: center !important;
}

.banner {
    height: 700px;
}

.separator{
    height: .1vh;
    background-color: #F5F4FE;
    width: 15%;
}

/* navbar */
nav.navbar {
    /*border-bottom: solid .5vh #F5F4FE;*/
    color: #8B8686;
    background-color: #FFFFFF !important;
}
nav.navbar div ul li {
    margin-left: 1vw;
    display: flex;
    justify-content: center;
}

nav.navbar div ul li.nav-item.active::after {
    position: absolute;
    content: '';
    width: 3vw;
    height: .7vh;
    background-color: #E8BF57;
    bottom: -.2vh;
    opacity: .75;
}
nav.navbar div ul li.nav-item.dropdown.active::after {
    bottom: -3vh !important;
}
nav.navbar a.dropdown-toggle.x::after {
    display: none !important;
}
nav.navbar a.dropdown-item:hover {
    background-color: #C1D8B9;
    cursor: pointer;
}

.nav-item .dropdown-item.active,
.nav-item .dropdown-item:active{
    text-decoration: none;
    background-color: #C1D8B9;
}

/* list */
ul.my-list {list-style: none;margin: 0;padding: 0;}
ul.my-list li {
    padding: 15px 0px;
    border-bottom: 2px solid #F5F4FE;
}

ul.my-list.gray li{
    border-bottom: 1px solid #DBDBDB !important;
}

ul.my-list-y {list-style: none;margin: 0;padding: 0;}
ul.my-list-y li {
    padding-left: 3em;
}
ul.my-list-y li:before {
    content:'\2022';
    display: block;
    position: relative;
    max-width: 0px;
    max-height: 0px;
    left: -2.5em;
    top: -0px;
    color: var(--cyellow);
    font-size: 25px;
}

/* my-button */
a.my-button , button.my-button, input.my-button{
    border: solid 1px var(--cyellow);
    color: var(--cblue);
    /* text-transform: uppercase; */
    padding: 10px 50px;
    background-color: transparent;
    text-decoration: none;
    font-size: 16px;
    transition: all .5s ease-in;
}

a.my-button:hover , button.my-button:hover, input.my-button:hover{
    color: white;
    background-color: var(--cyellow);
}

a.my-button-w , button.my-button-w{
    border: solid 1px white;
    color: var(--cblue);
    padding: 8px 25px;
    background-color: transparent;
    text-decoration: none;
    font-size: 15px;
    transition: all .5s ease-in;
}

a.my-button-w:hover , button.my-button-w:hover{
    padding: 8px 25px;
    background-color: white;
    text-decoration: none;
}

a.my-button-white , button.my-button-white{
    border: solid 1px white;
    color: white;
    padding: 10px 150px;
    background-color: transparent;
    text-decoration: none;
    font-size: 15px;
    transition: all .5s ease-in;
}

a.my-button-white:hover , button.my-button-white:hover{
    background-color: white;
    text-decoration: none;
    color: var(--cblue);
}

/* Select cotizador */
select#Level {
    background: none;
    border: 1px solid var(--cyellow);
    color: var(--cblue);
    padding: 5px 50px;
    border-radius: 5px;
}

select#Term {
    background: none;
    border: none;
    border-bottom:1px solid #F6F6F6;
    width: 100%;
    color: var(--cblue);
    padding: 5px;
    margin-bottom: 2px;
}
select#Term::-ms-expand {
    background: var(--cyellow);
}

/* Quote list  */
ul.quote-list {
    list-style: none;
}
ul.quote-list li:before {
    color: var(--cblue);
    background-color: var(--cyellow);
    border-radius: 50%;
    text-align: center;
    content: attr(data-index);
    font-size: 1.5em;
    font-weight: light;
    float: left;
    width: 1.5em;
    height: 1.5em;
}

@media (max-width:1340px) {
    .img-sp {
        position: relative !important;
        margin-top: 0px !important;
        width: 100%;
    }
    .col-lg-6 {
        margin-top: 10px;
    }
}

@media (max-width:760px) {
    a.my-button , button.my-button, a.my-button-w , button.my-button-w, a.my-button-white , button.my-button-white {
        display: block;
        width: 100% !important;
        text-align: center;
        padding: 10px 0px !important;
    }
}

/* Fonts */

.monserrat {font-family: 'Monserrat';}

.quattrocento { font-family: 'Quattrocento';}