/*---------------------------------------------------------------------
General
-----------------------------------------------------------------------*/
*::-moz-selection { background: var(--color-primary); color: var(--color-white); text-shadow: none; }
::-moz-selection { background: var(--color-primary); color: var(--color-white); text-shadow: none; }
::selection { background: var(--color-primary); color: var(--color-white); text-shadow: none; }


body {
    font-family: var(--font-text);
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 1.5;
    padding: 0;
    margin: 0;
    color: var(--color-white);
    background: var(--color-body-bg);
}

a, .btn {
    -webkit-transition: all 0.5s ease-out 0s;
    -moz-transition: all 0.5s ease-out 0s;
    -ms-transition: all 0.5s ease-out 0s;
    -o-transition: all 0.5s ease-out 0s;
    transition: all 0.5s ease-out 0s;
}

a, button, input, .btn { outline: medium none; }
a { color: var(--color-body-text); text-decoration: none; }
a:hover { text-decoration: none; }
a.text-primary:focus, a.text-primary:hover { color: var(--color-primary) !important; }
hr { border-color: var(--border-light); }

h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0; line-height: 1.2; color: var(--color-white);  font-family: var(--font-title); }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; }

label { font-weight: normal; }
h1, .h1 { font-size: 50px; }
h2, .h2 { font-size: 37px; }
h3, .h3 { font-size: 32px; }
h4, .h4 { font-size: 23px; }
h5, .h5 { font-size: 20px; }
h6, .h6 { font-size: 16px; }

.height-100-vh { height: 100vh; }
.vieport-height-100{
    height: 100vh !important;
}


.big-title { font-family: var(--font-title) }

.title{
    font-family: var(--font-title);
    font-size: 40px;
    font-weight: 800;
}
.subtitle{
    font-family: var(--font-text);
    font-size: 25px;
    font-weight: 400;
}
.paragraph{
    font-family: var(--font-text);
    font-size: 14px;
    font-weight: 300;
}

.title-02{
    font-family: var(--font-title);
    font-size: 34px;
    font-weight: 800;
}
.title-texture{
    background: url('../imagenes/texure.jpg');
    background-position-x: 0;
    background-position-y: 0;
    background-clip: border-box;
    background-repeat: repeat-x;
    background-position: 100% 100%;
    color: transparent;
    -webkit-font-smoothing: antialiased;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
.border-bottom-gradient{
    border-image-source: linear-gradient(to left, rgba(209, 208, 207, 0), rgba(209, 208, 207, 0.6), rgba(209, 208, 207, 0));
    border-style: solid;
    border-image-slice: 1;
    border-width: 0 0 1px 0;
}




.badge { border-radius: 0 !important; }

.w-20 { width: 20px; }
.iq-mb-30 { margin-bottom: 30px; }


/*----------------------------------------------
Input
------------------------------------------------*/
label { color: var(--color-white); }
.form-control {
    height: 45px;
    line-height: 45px;
    background: transparent;
    border: 1px solid var(--color-body-text);
    font-size: 14px;
    color: var(--color-body-text-secondary);
    border-radius: 0;
}

textarea.form-control{
    height: auto;
    line-height: 1.5;
}

.iq-custom-select { position: relative; }
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--color-primary)!important;
    border-color: var(--color-primary)!important;
}
/* Definition Lists */
dl dd { margin-bottom: 15px; }
dl dd:last-child { margin-bottom: 0; }


/*----------------------------------------------
loading
------------------------------------------------*/
#loading {
    background: var(--color-body-bg) url(../imagenes/loader_1.gif) no-repeat scroll center center;
    height: 100%;
    width: 100%;
    background-size: 15%;
    position: fixed;
    margin-top: 0;
    top: 0;
    left: 0;
    bottom: 0;
    overflow: hidden !important;
    right: 0;
    z-index: 999999;
}
#loading-center { width: 100%; height: 100%; position: relative; }


/*----------------------------------------------
Background Color
------------------------------------------------*/
.bg-primary, .badge-primary { color: var(--color-white) !important; background: var(--color-primary) !important; }
.bg-body, .badge-body { color: var(--color-body-text); background: var(--color-body-bg); }
.bg-box, .badge-box { color: var(--color-white); background: var(--bg-box); }


/*----------------------------------------------
Background Color Opacity
------------------------------------------------*/
.iq-bg-primary { background: var(--color-primary-light) !important; color: var(--color-primary) !important; }


/*----------------------------------------------
Border Color
------------------------------------------------*/
.iq-body-border { border: 1px solid var(--body-border); }



/*----------------------------------------------
 Buttons Design
------------------------------------------------*/
.btn {
    padding: 9px 30px;
    position: relative;
    display: inline-block;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0 !important;
    cursor: pointer; z-index: 4;
}

.btn-hover {
    background-color: var(--color-primary-hover);
    border: 1px solid var(--color-primary-hover);
    color: var(--color-white);
    transition: color 0.3s ease;
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
}
.btn-hover:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0; right: 0;
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    transition: transform 0.3s ease-out;
    -webkit-transition: transform 0.3s ease-out;
}
.btn-hover:hover, .btn-hover:focus, .btn-hover:active {
    color: var(--color-white);
}
.btn-hover:focus {
    box-shadow: none !important;
}
.btn-hover:hover:before, .btn-hover:focus:before, .btn-hover:active:before {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
}

.btn-outline-primary {
    background: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
}
.btn-outline-primary:hover {
    background: var(--color-primary-hover) !important;
    border: 2px solid var(--color-primary-hover);
    color: var(--color-white);
    box-shadow: none;
}

.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-primary.dropdown-toggle:focus {
    box-shadow: none;
}
.btn-primary.focus, .btn-primary:focus {
    box-shadow: none;
}
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show > .btn-outline-primary.dropdown-toggle {
    color: var(--color-primary);
    background: transparent;
    border-color: var(--color-primary);
}
.btn-outline-primary:not(:disabled):not(.disabled).active:focus, .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-primary.dropdown-toggle:focus {
    box-shadow: none;
}
.btn-outline-primary.focus, .btn-outline-primary:focus {
    box-shadow: none;
}

button:focus {
    outline: none;
}

.btn-link {
    background: transparent;
    color: var(--color-white);
}
.btn-link:hover {
    color: var(--color-primary);
    text-decoration: none;
}



/*----------------------------------------------
Text Color
------------------------------------------------*/
.text-body { color: var(--color-body-text) !important; }
.text-primary { color: var(--color-primary) !important; }
.text-white { color: var(--color-white) !important; }
.text-black { color: var(--color-black) !important; }
.text-gold { color: var(--color-gold) !important; }


/*----------------------------------------------
Line Height
------------------------------------------------*/
.line-height { line-height: normal; }
.line-height-2 { line-height: 2; }
.line-height-4 { line-height: 40px; }
.line-height-6 { line-height: 60px; }

/*----------------------------------------------
Font Size
------------------------------------------------*/
.font-size-12 { font-size: 12px; }
.font-size-13 { font-size: 13px; }
.font-size-14 { font-size: 14px; }
.font-size-16 { font-size: 16px; }
.font-size-18 { font-size: 18px; }
.font-size-20 { font-size: 20px; }
.font-size-21 { font-size: 21px; }
.font-size-24 { font-size: 24px; }
.font-size-32 { font-size: 32px; }
.font-size-40 { font-size: 40px; }

/*----------------------------------------------
Font Weight
------------------------------------------------*/
.font-Weight-300 { font-weight: 300; }
.font-Weight-500 { font-weight: 500; }
.font-Weight-600 { font-weight: 600; }
.font-Weight-700 { font-weight: 700; }


/*----------------------------------------------
spaces
------------------------------------------------*/
.space10 { min-height: 10px; }
.space20 { min-height: 20px; }
.space30 { min-height: 30px; }
.space40 { min-height: 40px; }
.space50 { min-height: 50px; }


/*----------------------------------------------
errors
------------------------------------------------*/

.has-error .g-recaptcha > div{
    border: 1px solid var(--color-yellow);
}
input.error,textarea.error,select.error{
    border: 1px solid var(--color-yellow) !important;
    box-shadow: 0 0 8px var(--color-yellow) inset !important;
    outline: 0 none;
}
label.error{
    color: var(--color-yellow);
    font-size: 11px !important;
    font-weight: 300 !important;
    padding-top: 0 !important;
    text-align: left !important;
}

/*----------------------------------------------
Avatar Size
------------------------------------------------*/
.avatar-3 { height: 3px; width: 3px; min-width: 3px; line-height: 3px; }
.avatar-7 { height: 7px; width: 7px; min-width: 4px; line-height: 7px; }
.avatar-20 { height: 20px; width: 20px; min-width: 20px; line-height: 20px; }
.avatar-30 { height: 30px; width: 30px; min-width: 30px; line-height: 30px; font-size: 0.4rem; }
.avatar-35 { height: 35px; width: 35px; min-width: 35px; line-height: 35px; font-size: 0.5rem; }
.avatar-40 { height: 40px; width: 40px; min-width: 40px; line-height: 40px; font-size: 0.6rem; }
.avatar-45 { height: 45px; width: 45px; min-width: 45px; line-height: 45px; font-size: 0.8rem; }
.avatar-50 { height: 50px; width: 50px; min-width: 50px; line-height: 50px; font-size: 1rem; }
.avatar-60 { height: 60px; width: 60px; min-width: 60px; line-height: 60px; font-size: 1.2rem; }
.avatar-70 { height: 70px; width: 70px; min-width: 70px; line-height: 70px; font-size: 1.4rem; }
.avatar-80 { height: 80px; width: 80px; min-width: 80px; line-height: 80px; font-size: 1.6rem; }
.avatar-90 { height: 90px; width: 90px; min-width: 90px; line-height: 90px; font-size: 1.6rem; }
.avatar-100 { height: 100px; width: 100px; min-width: 100px; line-height: 100px; font-size: 1.6rem; }
.avatar-110 { height: 110px; width: 110px; min-width: 110px; line-height: 110px; font-size: 1.6rem; }
.avatar-120 { height: 120px; width: 120px; min-width: 120px; line-height: 120px; font-size: 1.6rem; }
.avatar-130 { height: 130px; width: 130px; min-width: 130px; line-height: 130px; font-size: 1.6rem; }


/*----------------------------------------------
Tab Pills
------------------------------------------------*/
.nav-pills .nav-item a { color: var(--color-body-text); border-radius: 50px; }
.nav-pills .nav-link.active, .nav-pills .show>.nav-link { color: var(--color-white); background: transparent; }
.nav-pills .nav-link:hover { color: var(--color-primary); }
.nav-tabs { border-bottom: 2px solid var(--color-primary-light); margin-bottom: 15px; }
.nav-tabs .nav-item { margin-bottom: -2px; }
.nav-tabs .nav-item a { color: var(--color-body-text); border: none; border-bottom: 2px solid transparent; }
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { border-bottom: 2px solid var(--color-primary); color: var(--color-primary); }

/*----------------------------------------------
Overflow
------------------------------------------------*/
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-hidden-x { overflow-x: hidden; }
.overflow-hidden-y { overflow-y: hidden; }
.overflow-scroll { overflow: scroll; }
.overflow-scroll-x { overflow-x: scroll; }
.overflow-scroll-y { overflow-y: scroll; }



/*----------------------------------------------
Custom Column
------------------------------------------------*/
.col-1-5 { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; }


/*----------------------------------------------
Select 2
------------------------------------------------*/
.iq-custom-select .select2-container--bootstrap4 .select2-selection, .select2-dropdown { background-color: var(--bg1); border: none; border-radius: 0; color: #fff; }
.select2-dropdown { top: 0; box-shadow: 0 12px 34px 0 rgba(19, 10, 10, 1); }
.iq-custom-select select { box-shadow: none; }
.select2-container--bootstrap4 .select2-dropdown .select2-results__option[aria-selected=true] { background-color: var(--color-body-bg); }
.select2-container--bootstrap4 .select2-results__option--highlighted, .select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected=true] { background-color: var(--color-primary); color: var(--color-white); }
.select2-container .select2-selection--single .select2-selection__rendered { line-height: calc(1.5em + 1.2rem); padding-left: 10px; }
.select2-container--bootstrap4.select2-container--focus .select2-selection { box-shadow: none; }
.select2-search--dropdown .select2-search__field { border-radius: 0; border: none; background: rgba(85, 85, 85, 0.65); color: var(--color-white); }
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b { border: none; }
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b:before { content: "\EA4E"; position: absolute; font-family: "remixicon"; top: 50%; transform: translateY(-50%); right: 1px; color: var(--color-white); font-size: 16px; z-index: 99; transition: all 0.4s ease; }
.select2-container--bootstrap4.select2-container--open .select2-selection__arrow b:before { transform: translateY(-50%) rotate(180deg); }
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b { margin-top: 0; }
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow { width: auto; }
.select2-container--bootstrap4 .select2-selection--single, .select2-container--bootstrap4 .select2-selection--multiple { height: 45px !important; }
.select2-container--bootstrap4 .select2-dropdown.select2-dropdown--above { border-radius: 0; border: none; }
.sea-epi .select2-container { width: 150px !important; }

.table{
    color: var(--color-body-text);
}




/*---------------------------------------------------------------------
                      Animation
-----------------------------------------------------------------------*/
@keyframes slide-down {
    0% { opacity: 0; transform: translateY(100%); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes notify {
    0% { -webkit-transform: scaleX(1); transform: scaleX(1) }
    10% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg) }
    20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg) }
    30% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(3deg) }
    50% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(3deg) }
    70% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(3deg) }
    90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(3deg) }
    40% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg) }
    60% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg) }
    80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg) }
    to { -webkit-transform: scaleX(1); transform: scaleX(1) }
}
@-webkit-keyframes slide-in {
    100% { left: 0; }
}
@keyframes slide-in {
    100% { left: 0; }
}
@keyframes pulse-border {
    0% { transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; }
    100% { transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0; }
}
@-webkit-keyframes fadeIn {
    0% { opacity: 0; }
    50% { opacity: 0.2; }
    to { opacity: 1; }
}
@keyframes fadeIn {
    0% { opacity: 0; }
    50% { opacity: 0.2; }
    to { opacity: 1; }
}
@keyframes trailorPlay {
    0% { transform: translateX(0); }
    30% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    70% { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}


.container-fluid {
    padding: 0 100px;
}



@media (min-width:1300px) {
    .container { max-width: 1170px; }
}

@media (min-width: 1400px){

}


/* XXX-Large devices (larger desktops, 1500px and up) */
@media (min-width:1499px) {
    .container {
        max-width: 1266px;
    }

}


/* X-Large devices (large desktops, less than 1400px)*/
@media (max-width: 1399.98px) {


}

/* Large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {  }

/* Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) {

    .container-fluid {
        padding-left: 30px;
        padding-right: 30px;
    }
}

/* Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {

    .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (max-width: 575.98px) {

}