:root {
    --emphasis: #E35205;
    --primary:#FDDA25;
    --secundary: #FCFCEE;
}

/* general */
body, html {
    height: 100%;

}

.text-emphasis {
    color: var(--emphasis);
}

.bg-emphasis {
    background-color: var(--emphasis);
}

.bg-primarys {
    background-color: var(--primary);
}

.text-primarys {
    color: var(--primary);
}

.bg-secondarys {
    background-color: var(--secundary);
}

.text-secondarys {
    color: var(--secundary);
}

/* utilities */

img.img-bordered {
    border: .5vh solid var(--emphasis);
}
h1{font-size: 3.5rem;}

/* navbar */
nav.navbar {
    color: var(--emphasis);
    padding: 15px  0px;
}

nav.navbar a.nav-item.nav-link , .nav-item > .nav-link {
    padding: 2px 5px;
    margin: 0px 2px;
    transition: border .5s ease-out;
    border: 1px solid transparent;
    font-size: 13px;
}

.nav-item> .dropdown-menu{ padding: 0px; background-color: rgba(255,255,255,0.8);}
.nav-item .dropdown-item.active,
.nav-item .dropdown-item:active{
  color: var(--emphasis);
  text-decoration: none;
  background-color:  var(--primary);
}

nav.navbar a {
    color: var(--emphasis);
    font-weight: 500;
}

nav.navbar a.active {
    border: 1px solid  var(--emphasis) !important;
}

nav.navbar a.nav-item.nav-link:hover {
    border: 1px solid  var(--emphasis);
}

.navbar-toggler-icon i {
    color: var(--emphasis);
    font-size:28px;
}

.img-brand{ height: 38px;}
.img-footer{ height: 20px; fill:#FFF;}
.fix-bg{ background-repeat: no-repeat; background-size: cover; background-position: center;}
.fix-top{ margin-top: 76px;}
.banner{height: 450px;}

/* principal bg */

div.main-item {
    background-size: cover;
    background-position: center;
    height: 600px;
    width: 100%;
}

/* button */
button.my-button, a.my-button, input.my-button {
    border: solid 1px var(--emphasis);
    color: var(--emphasis);
    text-transform: uppercase;
    padding: 8px 25px;
    background-color: transparent;
    text-decoration: none;
    font-size: 13px;
}
button.my-button.active, a.my-button.active, input.my-button.active {
    background-color: var(--emphasis);
    color: var(--primary);
}

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

/* list */
ul.my-list {
    list-style: none;
    padding-left: 18px;
}
ul.my-list > li{ margin: 6px auto; font-family: inherit;}
ul.my-list li:before {
    color: var(--primary);
    content: "\2022";
    font-weight: bold;
    display: inline-block;
    width: 1em;

    margin-left: -1em;
}

ul.quote-list {
    list-style: none;
}
ul.quote-list li:before {
    color: var(--secundary);
    background-color: var(--emphasis);
    border-radius: 50%;
    text-align: center;
    content: attr(data-index);
    font-size: 1.5em;
    font-weight: bold;
    /* display: inline-block; */
    float: left;
    width: 1.5em;
    height: 1.5em;
    /*margin-left: -7em;*/
}

/* icons */
div.icon a{
    color: var(--primary); font-size: 10px;
}
div.icon {
    border-radius: 50%;
    border: 1px solid var(--primary);
    width: 26px;
    height: 26px;
}

/* Gallery card */
div.card div.bck {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(253, 218, 37, .5);
    transition: 1s ease-out;
    opacity: 0;
}

div.card div.hovered {
    opacity: 1;
    z-index: 1;
}

div.card img {
    transition: .5s ease-out;
}


button.img-zoom, button.set-gallery {
    border: 4px solid var(--emphasis);
    width: 90%;
    height: 90%;
    color: var(--emphasis);
    background-color: transparent;
}
@media (min-width:700px) and (max-width: 1030px){
    nav.navbar .navbar-brand img.img-brand {
        height:30px !important;
    }
}

@media (max-width: 700px) {
    nav.navbar .navbar-brand img.img-brand {
        height:25px !important;
    }
}

@media (max-width: 1200px) {
    .text-center-sm {
        text-align: center !important;
        font-size: 3em;
        padding: 5px;
    }
}

@media (max-width: 768px) {
    .text-smp-center {
        text-align: center !important;
    }
    .my-button {
        width: 50vw !important;
    }
}

/*** FONT STYLES **/
.OpenSans{ font-family: 'Open Sans';}
.BodoniModa{ font-family: 'Bodoni Moda';}

.Bold{ font-weight: bold;}
.Light { font-weight: lighter;}
.Italic{ font-style: italic;}