:root {
    --e-global-color-primary: #660E80;
    --e-global-color-secondary: #4a4a4a;
    --e-global-color-text: #333333;
    --e-global-color-accent: #99BE11;
    --e-global-color-button-text: #ffffff;
    --e-global-color-navbar: #072B44;
    --e-global-color-navbar-text: #FFFFFF;
    --e-global-color-navbar-text-hover: #a2beee;
    --e-global-color-footer: #20262d;
    --e-global-color-footer-text: #FFFFFF;
    --e-global-color-footer-text-hover: #F5F3F4;
    --e-global-color-fucsia: #cc0099;
    --e-global-typography-primary-font-family: 'Titillium Web', sans-serif;
    --e-global-typography-primary-font-weight: 600;
    --e-global-typography-secondary-font-family: 'Titillium Web', sans-serif;
    --e-global-typography-secondary-font-weight: 400;
    --e-global-typography-text-font-family: 'Montserrat', sans-serif;
    --e-global-typography-text-font-weight: 300;
    --e-global-typography-accent-font-family: 'Titillium Web', sans-serif;
    --e-global-typography-accent-font-weight: 300;
}

html {
    scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--e-global-typography-primary-font-family);
    font-weight: var(--e-global-typography-primary-font-weight);
    text-transform: uppercase;
}

body {
    font-family: var(--e-global-typography-text-font-family);
}

section {
    padding: 60px 0;
}

.custom-btn {
    background: #660e80;
    color: #ffffff !important;
    padding: 10px 20px !important;
    outline: none !important;
    border: none !important;
    border-radius: 5px !important;
    transition: .5s !important;
    font-family: var(--e-global-typography-text-font-family) !important;
    cursor: pointer;
    font-weight: 600;
}

.custom-btn:hover {
    background: var(--e-global-color-primary);
    text-decoration: none !important;
}

#contacto .custom-btn {
    background: var(--e-global-color-accent);
}

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-collapse {
        display: block !important;
        flex-basis: auto;
    }

    .navbar-nav {
        float: right !important;
    }
}

.custom-navbar {
    background-color: var(--e-global-color-navbar) !important;
    font-family: var(--e-global-typography-text-font-family) !important;
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 4px 5px 0 rgba(0, 0, 0, 0.06), 0 1px 10px 0 rgba(0, 0, 0, 0.08) !important;
    padding: 0 1rem;
}

.custom-navbar li {
    margin: 0 5px;
}

.custom-navbar a {
    color: var(--e-global-color-navbar-text) !important;
    transition: 0.5s !important;
    font-size: 13px;
    padding-right: .5rem;
    padding-left: .5rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0px;
}

.custom-navbar a:hover {
    color: var(--e-global-color-navbar-text-hover) !important;
    text-decoration: none !important;
}

li.current_page_item a {
    color: var(--e-global-color-navbar-text-hover) !important;
}

.red-background {
    background: #cc0099;
    transition: .5s;
}

.red-background a {
    color: #ffffff !important;
}

.red-background:hover {
    background: #880067;
}

.red-background:hover a {
    color: #ffffff !important;
}

.logo {
    width: 120px;
}

#coverCarousel .carousel-inner {
    height: 70vh;
}

#coverCarousel .carousel-item img {
    width: 100%;
    height: 70vh;
    object-fit: cover;
    object-position: center center;
}

#coverCarousel .carousel-item .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    /*background: linear-gradient(to left, var(--e-global-color-primary), #000000);*/
    /*background: #00375abf;*/
    opacity: 1;
    filter: alpha(opacity=70);
}

#coverCarousel .carousel-control-next, .carousel-control-prev {
    z-index: 10 !important;
    top: 10% !important;
}

.overlay-text {
    color: #fff;
    position: absolute;
    z-index: 9;
    left: 0;
    width: 100%;
    text-align: center;
    text-shadow: 2px 0 5px #000000;
}

.yellow-text {
    font-family: 'Caveat Brush';
    text-transform: uppercase;
    color: #ffdd00;
    font-size: 45px;
}

.white-text {
    color: #ffffff;
}

@media (min-width: 1024px) {
    .overlay-text {
        /*top: 40%;*/
        padding: 0 90px;

        top: 50%;
        transform: translateY(-50%);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .overlay-text {
        /*top: 45%;*/
        padding: 0 70px;

        top: 50%;
        transform: translateY(-50%);
    }
}

@media (min-width: 320px) and (max-width: 767px) {
    .overlay-text {
        top: 50%;
        transform: translateY(-50%);
        /*top: 42%;*/
        padding: 0 45px;
    }

    .overlay-text h1 {
        font-size: 25px;
    }

    .overlay-text h4 {
        font-size: 20px;
    }
}

/*Logos patrocinantes*/
.logo-patrocinante {
    width: 100px;
}

#logos-carrusel {
    background: #ffffff;
}


#vision-ferretera-logo-patrocinante {
    width: 150px;
}

#visionferretera {
    background: #006699;
}

#vision-ferretera {
    width: 270px;
    background: linear-gradient(to bottom, #00c4ff, #069, white);
    padding: 20px 15px;
    border-radius: 5px;
}

#visionferretera p {
    color: #ffffff;
}

.fucsia-bg {
    background: var(--e-global-color-fucsia);
    padding: 10px;
}

.purple-bg {
    background: #660E80;
    padding: 10px;
}

.green-bg {
    background: #96BB10;
    padding: 10px;
}

.purple-bg p, .green-bg p {
    font-size: 18px;
    color: #ffffff;
    font-weight: bold;
    text-transform: uppercase;
}

.blue-bg {
    background: #CFDBE8;
    padding: 10px; /**/
}

.fucsia-bg .section-title, .purple-bg .section-title, .green-bg .section-title {
    color: #ffffff;
}

.white-bg {
    background: #ffffff;
}

#expoferre {
    height: 200px;
    background: url("../img2/banner-azul.png") no-repeat center;
    background-size: cover;
}

#sectores-participantes {
    height: 200px;
    background: url("../img2/banner-rosado.png") no-repeat center;
    background-size: cover;
}

#visitante {
    height: 200px;
    background: url("../img2/banner-verde.png") no-repeat center;
    background-size: cover;
}

#expositor {
    height: 200px;
    background: url("../img2/banner-morado.png") no-repeat center;
    background-size: cover;
}

#que-es-expoferre .section-title, #que-es-expoferre .section-subtitle, #perfil-expositor .section-title, #perfil-expositor .section-subtitle, #exponer .section-title {
    color: var(--e-global-color-primary);
}

#participantes .section-title, #participantes .section-subtitle {
    color: var(--e-global-color-fucsia);
}

.font-size-big {
    font-size: 35px!important;
}

.section-subtitle {
    color: var(--e-global-color-secondary);
    font-family: var(--e-global-typography-primary-font-family);
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 600;
}

.img-responsive {
    width: 100%;
    object-fit: cover;
}

.p-35 {
    padding: 100px 35px;
}

#participantes {
    background: #ffffff;
}

.exhibitors-img-principal {
    width: 250px;
    height: 250px;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    box-shadow: 0 0 10px #00000094;
    margin-bottom: 15px;
}

#exhibitorsCarousel {
    width: 100%;
}

#exhibitorsCarousel .carousel-item img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
    /*box-shadow: 0 0 10px #00000094;*/
    margin-bottom: 15px;
}

.exhibitors-img {
    width: 100%;
    height: 115px;
    object-fit: contain;
    object-position: center;
    border-radius: 0;
    /* box-shadow: 0 0 10px #00000094; */
    margin-bottom: 15px;
}

#perfil-expositor {
    background: #F5F3F4;
}

#perfil-expositor .section-title {
    /*color: #ffffff;*/
}

.card {
    background: #fff;
    box-shadow: 0 0 10px #00000030;
    border: none !important;
    margin: 20px 0;
}

.custom-card-img {
    width: 75px !important;
    display: block;
}

#perfil-visitante {
    background: #ffffff;
}

#perfil-visitante .section-title {
    color: #88A812;
}

#perfil-visitante .custom-card-img {
    padding: 30px 0;
}

#footer {
    font-family: var(--e-global-typography-text-font-family) !important;
    background: var(--e-global-color-footer) !important;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 1px;
}

#footer h5 {
    padding-left: 10px;
    padding-bottom: 6px;
    margin-bottom: 20px;
    color: var(--e-global-color-footer-text);
}

#footer a {
    color: #ffffff;
    text-decoration: none !important;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}

#footer ul {
    padding: 0;
    list-style: none;
}

#footer ul.social li {
    padding: 3px 0;
}

#footer ul.social li a i {
    margin: 0 7px;
    font-size: 35px;
    -webkit-transition: .5s all ease;
    -moz-transition: .5s all ease;
    transition: .5s all ease;
}

#footer ul.social li:hover a i {
    /*font-size: 30px;*/
    /*margin-top: -10px;*/
}

#footer ul.social li a,
#footer ul.quick-links li a {
    color: var(--e-global-color-footer-text);
}

#footer ul.social li a:hover {
    color: var(--e-global-color-footer-text-hover);
}

#footer li.current_page_item a {
    color: var(--e-global-color-footer-text-hover) !important;
}

#footer ul.quick-links li {
    padding: 3px 0;
    -webkit-transition: .5s all ease;
    -moz-transition: .5s all ease;
    transition: .5s all ease;
}

@media (max-width: 767px) {
    #footer h5 {
        padding-left: 0;
        border-left: transparent;
        padding-bottom: 0;
        margin-bottom: 10px;
    }
}

#footer p {
    color: #ffffff;
}

#responsive li img {
    width: 100% !important;
    height: 100px;
    object-fit: contain;
}

.social-media {
    list-style: none;
    display: inline-flex;
    padding: 0;
}

.social-media li {
    margin: 0 5px;
}

.social-media a {
    color: #000;
}

.custom-form-control {
    border-radius: 25px; /**/
}

.custom-btn-send {
    border-radius: 25px !important;
}

.qr {
    width: 200px;
}

.qr2 {
    width: 115px;
}

.float{
    position:fixed;
    bottom:40px;
    right:40px;
    background-color: var(--e-global-color-fucsia);
    color:#FFF;
    text-align:center;
    box-shadow: 2px 2px 3px #999;
    z-index:100;
    text-transform: uppercase;
    padding: 10px;
}

.float:hover {
    color: white;
    text-decoration: none;
    transform: scale(1.1);
    transition: 0.5s;
}

.my-float{
    margin-top:16px;
}