@font-face {
    font-display: swap; 
    font-family: 'Graphik-Regular';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/Graphik-Regular.woff2') format('woff2'); 
}

@font-face {
    font-display: swap;
    font-family: 'Graphik-Semibold';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/Graphik-Semibold.woff2') format('woff2');
}

@font-face {
    font-display: swap; 
    font-family: 'Graphik-Bold';
    font-style: normal;
    font-weight: 900;
    src: url('../fonts/Graphik-Bold.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
    font-display: swap;
    font-family: 'GraphikWide-Light';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/GraphikWide-Light.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'GraphikWide-Regular';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/GraphikWide-Regular.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'GraphikWide-Semibold';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/GraphikWide-Semibold.woff2') format('woff2');
}

.gra400 {
    font-family: 'Graphik-Regular' !important;
    font-style: normal;
    font-weight: 400 !important;
}
.gra700 {
    font-family: 'Graphik-Semibold' !important;
    font-style: normal;
    font-weight: 700 !important;
}

.grawide300 {
    font-family: 'GraphikWide-Light' !important;
    font-style: normal;
    font-weight: 300 !important;
}
.grawide400 {
  
    font-style: normal; 
    font-weight: 400 !important;
}
.grawide700 {
    font-family: 'GraphikWide-Semibold' !important;
    font-style: normal;
    font-weight: 700 !important;
}

:root {
    --BlueDarker: #0b163b;
    --Blue: #371414;
    --BlueLighter: #eb7014;
    --BlueAlpine: #e10922;
    --BlueAlpineLight: #f32a41;
    --Mint: rgb(238, 126, 70);
    --MintDark: rgb(76, 173, 177);
    --Orange: rgb(151,210,212);
    --UrbanGrey: #EBF0F5;
}

html {
    position: relative;
    font-family: 'Graphik-Regular';
    scrollbar-gutter: stable;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: subpixel-antialiased;
}

body {
    background-color: transparent;
    padding-right: 0px !important;
    z-index: 9000 !important;
    position: relative;
    overflow-x: auto;
    overflow-y: auto;
}

.row {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

    /* Eliminar paddings de las columnas */
    .row > [class*="col-"] {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }


.vertical-tabs {
    display: flex;
    flex-direction: column;
}

.tab-btn {
    color: #fff;
    border: none;
    border-bottom: 1px solid #1e50b9;
    padding: 2px;
    margin: 8px;
    cursor: pointer;
    text-align: left;
    width: 80%;
    border-radius: 4px;
}

    .tab-btn.active {
        color: #fff;
        background-color: #2c63d5;
        border-bottom: 1px solid rgb(154, 212, 208);
        border-radius: 4px;
    }

.tab-btn2 {
    color: var(--Blue);
    border: none;
    padding: 2px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin: 8px;
    cursor: pointer;
    text-align: left;
    position: relative;
    overflow: hidden;
    background-color: transparent !important;
}

    .tab-btn2::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 2px;
        background-color: var(--Mint);
        transition: width 0.5s ease-in-out;
    }

    .tab-btn2:hover::after {
   
    }

    .tab-btn2:hover {
        color: var(--BlueAlpine);    
    }

    .tab-btn2.active {
        color: var(--BlueAlpine);
        background-color: transparent;
        border-bottom: 1px solid var(--BlueAlpine);  
    }

.swiper-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}


.tab-btn3 {
    color: #e4e4e4;
    border: none;
    padding: 2px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin: 8px;
    cursor: pointer;
    text-align: left;
    position: relative;
    overflow: hidden;
    background-color: transparent !important;
}

    .tab-btn3::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 1px;
        background-color: var(--Mint);
        transition: width 0.5s ease-in-out;
        border-bottom: none;
    }

    .tab-btn3:hover::after {
       
    }

    .tab-btn3:hover {
        color: var(--BlueAlpine);
    }

    .tab-btn3.active {
        color: var(--BlueAlpineLight);
        text-shadow: 1px 1px 0 var(--BlueDarker);
        font-weight: 700 !important;
        background-color: transparent;
        width: 96%;
        border-bottom: 1px solid var(--BlueAlpine);
    }



.btnSmally {
    padding: 3px;
    padding-right: 9px;
    padding-left: 9px;
    margin: 5px;
    background-color: transparent;
    color: var(--Blue);
    border: none;
    border-radius: 4px;
    border: 1px solid #999;

}

.gradient1 {
    background: linear-gradient(180deg, rgba(112,240,238,1) 1%, rgba(178,255,162,1) 90%);
}
.gradient2 {
    background-color: #EBF0F5;
}
.gradient3 {
    background: linear-gradient(180deg, rgba(9,67,164,1) 0%, rgba(3,79,170,1) 100%);
}

.col-4::-webkit-scrollbar {
    width: 4px;
}

.col-4::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 4px;
}

    .col-4::-webkit-scrollbar-thumb:hover {
        background-color: #555;
    }


#a-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black; 
    z-index: 9999; 
    opacity: 1;
    transition: none; 
}



.no-click {
    pointer-events: none !important;
}

.discover {
    position: fixed;
    top: 15px;
    right: 25px;
    z-index: 9999 !important;

}

#image img {
    margin-top: 3%;
    max-width: 100%;
    display: inline-flex !important;
}

#counter {
    margin-top: 30px !important;
}

#counter p {
    font-size: 14px !important;
}

    #contadorp {
        font-size: 14px !important;
    }


.colorMintDar {
    color: var(--MintDark);
}
.colorMint {
    color: var(--Mint);
}

.upper {
    text-transform: uppercase !important;
}

.point_med {
    position: absolute;
    top: 39%;
    left: 43.5%;
    z-index: 8888 !important;
    padding: 10px;
    min-width: 180px;
    min-height: 110px;
    padding-right: 12px;
    border: none;
    cursor: pointer !important;
    border-radius: 40px;
    font-size: 10px !important;
    color: transparent !important;
    text-align: center !important;
    overflow: hidden !important;
    /* pointer-events: none; */
}

    .point_med a {
        min-width: 280px;
        min-height: 250px;
        color: transparent !important;
        font-weight: 700;
 
    }


    /*
.point_med:hover {
    background: linear-gradient(-49deg, #333, #444, #222);
    background-size: 200% 200%;
}
*/


    .point_med.visible .label {
        transform: scale(1, 1);
    }



.diva {
    align-items: flex-start;
    display: flex;
    justify-content: left;
    min-height: 110px !important;
}

.diva > h3 {
    background-color: var(--MintDark);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    padding: 1.2em;
    color: #fff;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--BlueAlpine);
    --bs-btn-border-color: var(--BlueAlpine);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--Blue) !important;
    --bs-btn-hover-border-color: var(--Blue);
    --bs-btn-focus-shadow-rgb: 71, 147, 231;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--Blue);
    --bs-btn-active-border-color: var(--Blue);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.4);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #2780e3;
    --bs-btn-disabled-border-color: #2780e3;
    border-radius: 18px;
    font-family: 'GraphikWide-Semibold';
    font-style: normal;
    font-weight: 700;
}

.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--Blue);
    --bs-btn-border-color: var(--Blue);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--BlueAlpine) !important;
    --bs-btn-hover-border-color: var(--BlueAlpine);
    --bs-btn-focus-shadow-rgb: 71, 147, 231;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--BlueAlpine);
    --bs-btn-active-border-color: var(--BlueAlpine);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.4);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #2780e3;
    --bs-btn-disabled-border-color: #2780e3;
    border-radius: 18px;
    padding-right: 12px;
    padding-left: 12px;
    font-family: 'GraphikWide-Semibold' !important;
    font-style: normal;
    font-weight: 700 !important;
}

.btnBig {
    padding: 6px;
    padding-left: 12px;
    padding-right: 12px;
    display: inline-block;
    min-width: 220px;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    font-family: 'GraphikWide-Semibold';
    font-style: normal;
    font-weight: 700;
}


.floatClientReferences {
    width: 50px;
    height: 50px;
    padding-top: 3px;
    position: fixed;
    bottom: 250px;
    right: 1px;
    background-color: var(--Blue);
    color: #FFF;
    text-align: center;
    font-size: 30px;
    z-index: 100;
    padding-top: 3px;
    padding-left: 7px;
    padding-right: 2px;
}
.floatProducts {
    width: 50px;
    height: 50px;
    padding-top: 3px;
    position: fixed;
    bottom: 190px;
    right: 1px;
    background-color: var(--Blue);
    color: #FFF;
    text-align: center;
    font-size: 30px;
    z-index: 100;
    padding-left: 7px;
    padding-right: 2px;
}


.floatHome {
    color: var(--Blue);
    width: 50px;
    height: 50px;
    padding-top: 3px;
    position: fixed;
    bottom: 250px;
    left: 1px;
    background-color: var(--MintDark);
    color: #FFF;
    text-align: center;
    font-size: 30px;
    z-index: 100;
    padding-top: 4px;
    padding-left: 7px;
    padding-right: 2px;
}

.floatBack {
    color: var(--Blue);
    width: 50px;
    height: 50px;
    padding-top: 4px;
    position: fixed;
    bottom: 190px;
    left: 1px;
    background-color: var(--MintDark);
    color: #FFF;
    text-align: center;
    font-size: 30px;
    z-index: 100;
    padding-left: 7px;
    padding-right: 2px;
}

.floatVideo {
    width: 50px;
    height: 50px;
    padding-top: 4px;
    position: fixed;
    bottom: 70px;
    left: 1px;
    background-color: var(--MintDark);
    color: #FFF;
    text-align: center;
    font-size: 30px;
    z-index: 100;
    padding-left: 7px;
    padding-right: 2px;
    z-index: 9999 !important;
}




.linea {
    display: inline-block !important;
}

.clipped {
    clip-path: circle();
 
}

.bkBasic {
    background-color: #f1f1f1;
    border: 1px solid #d7d7d7;
    
}

.navbar {
    --bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), 0.3);
    --bs-navbar-active-color: rgba(var(--bs-emphasis-color-rgb), 1);
    --bs-navbar-brand-padding-y: 0.3125rem;
    --bs-navbar-brand-margin-end: 1rem;
    --bs-navbar-brand-font-size: 1rem;
    --bs-navbar-brand-color: rgba(var(--bs-emphasis-color-rgb), 1);
    --bs-navbar-brand-hover-color: rgba(var(--bs-emphasis-color-rgb), 1);
    --bs-navbar-toggler-padding-y: 0.25rem;
    --bs-navbar-toggler-padding-x: 0.75rem;
    --bs-navbar-toggler-font-size: 1rem;
    --bs-navbar-toggler-icon-bg: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2855, 58, 60, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e);
    --bs-navbar-toggler-border-color: rgba(var(--bs-emphasis-color-rgb), 0.15);
    --bs-navbar-toggler-border-radius: var(--bs-border-radius);
    --bs-navbar-toggler-focus-width: 0.25rem;
    --bs-navbar-toggler-transition: box-shadow 0.15s ease-in-out;
    position: relative;
  
    align-items: flex-start;
    justify-content: normal;
    padding: 10px;
    padding-right: 20px;
    padding-left: 20px;
    height: 90px;
}

    .navbar li {
        padding-left: 10px;
        padding-right: 10px;
    }

.nav-link {
    display: block;
    padding: 5px !important;
    padding-right: 10px;
    padding-left: 10px;
    font-size: 18px;
    font-weight: 400;
    color: #064fa0;
    text-decoration: none;
    background: #fff;
    border: 0;

    border-radius: 0;     
    margin-left: 1px !important;
    margin-right: 2px !important;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
    width: 100%;
    text-align: center !important;
}

    .nav-link:hover {
        display: block;
        padding: 5px !important;
        padding-right: 10px;
        padding-left: 10px;
        font-size: 18px;
        font-weight: 600;
        color: #fff !important;
        text-decoration: none;
        background: var(--Blue) !important;
        border: 0;      
        border-radius: 0;
        font-weight: 400;
        margin-left: 1px !important;
        margin-right: 2px !important;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
        width: 100%;
        text-align: center !important;
    }

    .nav-link:active {
        display: block;
        padding: 5px !important;
        padding-right: 10px;
        padding-left: 10px;
        font-size: 20px;
        font-weight: 600;
        color: #fff !important;
        text-decoration: none;
        background: var(--Blue) !important;
        border: 0;
        border-top: 1px solid #115bb0ff !important;
        border-radius: 0;
        font-weight: 400;
        margin-left: 1px !important;
        margin-right: 2px !important;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
        width: 100%;
        text-align: center !important;
    }


    .nav-tabs {
    --bs-nav-tabs-border-width: 1px;
    --bs-nav-tabs-border-color: #aeaeae;
    --bs-nav-tabs-border-radius: 0;
    --bs-nav-tabs-link-hover-border-color: var(--bs-secondary-bg) var(--bs-secondary-bg) var(--bs-border-color);
    --bs-nav-tabs-link-active-color: var(--bs-emphasis-color);
    --bs-nav-tabs-link-active-bg: var(--Blue);
    --bs-nav-tabs-link-active-border-color: transparent;
      border: 1px solid #c4c4c4;
      padding: 2px;
      margin-left: 5px;
      margin-right: 5px;
}



        .nav-tabs .nav-link {
            font-size: 16px !important;
            border: none !important;
        }
        .nav-tabs .nav-link.active {
            font-size: 16px !important;
            color: #fff;
            border: none !important;
        }

    .nav-tabs .nav-tabs .nav-link:hover {
        font-size: 16px !important;
        color: #fff;
        border: none !important;
    }

.nav-linked {
    font-size: 15px !important;
    border: none !important;
    border: none !important;
    text-decoration: none !important;
    padding: 5px;
    padding-left: 9px;
    padding-right: 10px;
    min-width: 160px;

}

    .nav-linked:active {
        font-size: 15px !important;
        color: #fff !important;
        border: none !important;
        background-color: var(--Blue);
        text-decoration: none !important;
    }

    .nav-linked:hover {
        font-size: 15px !important;
        color: #2780e3 !important;
        border: none !important;
        text-decoration: none !important;

    }

    .nav-linked:visited {
        font-weight: 700 !important;
        text-decoration: none !important;
        color: var(--Blue);
    }
 
    .nav-linked:focus {
        font-weight: 700 !important;
        text-decoration: none !important;
        color: var(--Blue);
    }

    .activer {
        font-weight: 700 !important;
    }


.tab-content {
   
    border: none;
    margin-left: 5px;
    margin-top: -1px;
}

    .tab-content > .active {
        display: block !important;
    }


#inVideo {
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 0px;
    z-index: 9990 !important;
}




br {
    display: block;
    margin: 10px 0;
}

.less {
    line-height: 1.0em !important;
}

.borderBottom {
    border-bottom: 1px solid #c6c6c6;
}

.borderBottom2 {
    border-bottom: 2px solid #c6c6c6;
}

.borderBottom3 {
    border-bottom: 3px solid #c6c6c6;
}

#a-container {
    height: 100vh;
    z-index: 9000 !important;
    overflow: hidden !important;  
    margin-top: 0px !important;
    background-color: #111;
    opacity: 1;
    position: relative !important;
   
   
}

    #a-container > *{
        color: #fff !important;
        font-size: 32px;
        font-weight: 700;
    }


    .ocultar {
        display: none;
    }

.mostrar {   
    display: block;
}

label.swal2-checkbox {
    visibility: hidden !important;
}

.Content-Div {
    margin: 1px;
    height: 30px;
    border: none !important;
    background: none;
    float: right;
    position: fixed;
    bottom: 120px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.wrapper {
    margin-left: 98px !important;
    margin-right: 98px !important;
}

.wrapperSmall {
    margin-left: 83px !important;
    margin-right: 83px !important;
}

.wrapperMax {
    margin-left: 15% !important;
    margin-right: 15% !important;
}

.wrapperUltra {
    margin-left: 22% !important;
    margin-right: 22% !important;
}


.btn-back {
    position: fixed;
    top: 25px;
    right: 26px;
    z-index: 2060; 
    border-radius: 50%; 
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center; 
}





table td {
    font-size: 13px !important;
    color: #333 !important;
}

table thead th {
    font-size: 15px !important;
    color: #333 !important;
    font-weight: 700;
    border-top: 1px solid #888 !important;
    border-bottom: 2px solid #666 !important;
}
table {
    padding-top: 20px !important;
    border-bottom: 1px solid #aeaeae !important;
}

div.dataTables_wrapper div.dataTables_info {
    padding-top: 0.85em;
    font-size: 14px !important;
    color: #1365c1;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    margin: 2px 0;
    white-space: nowrap;
    justify-content: flex-end;
    font-size: 14px !important;
    color: #1365c1 !important;
}
.pagination {
    padding: 5px;
    --bs-pagination-font-size: 13px !important;
    --bs-pagination-color: var(--bs-link-color);
    --bs-pagination-bg: var(--bs-body-bg);
    --bs-pagination-border-width: var(--bs-border-width);
    --bs-pagination-border-color: var(--bs-border-color);
    --bs-pagination-border-radius: var(--bs-border-radius);
    --bs-pagination-hover-color: var(--bs-link-hover-color);
    --bs-pagination-hover-bg: var(--bs-tertiary-bg);
    --bs-pagination-hover-border-color: var(--bs-border-color);
    --bs-pagination-focus-color: var(--bs-link-hover-color);
    --bs-pagination-focus-bg: var(--bs-secondary-bg);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(39, 128, 227, 0.25);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: #2776cf;
    --bs-pagination-active-border-color: #2780e3;
    --bs-pagination-disabled-color: var(--bs-secondary-color);
    --bs-pagination-disabled-bg: #dddddd;
    --bs-pagination-disabled-border-color: var(--bs-border-color);
    display: flex;
    padding-left: 0;
    list-style: none;
}

.bb {
    border-bottom: 1px solid #aeaeae;
}


.swal-icon img {
    width: 48px;
    height: 48px;
}

footer {
    margin-top: 40px;
    min-height: 80px;
    background-color: #0854a9 !important;
    border-top: 1px solid #064fa0;
    box-shadow: 0 -1px 6px #325985;
}

navbar {
    background-color: #0c3058 !important;
    border-bottom: 1px solid #064fa0 !important;
    box-shadow: 0 1px 6px #325985 !important;
}

.logic {
    min-height: 80vh;
}


.errorMsg {
    color: #d83131;
    font-size: 12px;
}

.successMsg {
    color: #00b525;
    font-size: 12px;
}

.icons {
    width: 12px;
    height: 12px;
    margin-right: 5px;
    margin-left: 2px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 5px;
}
.bi {
    padding-right: 2px;
    padding-left: 2px;
}


a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}


.photo {
    position: relative;
    border-radius: 4px;
    border: 2px solid #fafafa;
    transform: scale(1);
    transition: transform .4s;
    z-index: 444;
}

.photo:hover {
    border-radius: 4px;
    border: 2px solid #fafafa;
    transform: scale(2);
    cursor: pointer;
    z-index: 9999;
}

.backBlue {
    background-color: #0854a9;
    padding: 6px;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 4px;
    margin: 8px;
    color: #fff;
}

.bgBlue {
    background-color: var(--Blue) !important;
}
.bgBlueAlpine {
    background-color: var(--BlueAlpine) !important;
}

.bgGrey {
    background-color: var(--UrbanGrey);
}

.tags {
    letter-spacing: 3px;
    word-spacing: 5px;
}

.backBlack {
    background-color: #333333;
    padding: 6px;
    border-radius: 4px;
    padding-right: 10px;
    padding-left: 10px;
    margin: 8px;
    color: #fff;
}

.backCyan {
    background-color: #00d0b0;
    padding: 6px;
    border-radius: 4px;
    margin: 8px;
    color: #fff;
}

.pg5 {padding: 5px !important;}
.pg10 {
    padding: 10px !important;
}
.pg15 {
    padding: 15px !important;
}
.pg20 {
    padding: 20px !important;
}
.pg25 {
    padding: 25px !important;
}
span {
    font-family: 'Graphik-Regular';
}

p, p7, p9, p10, p11, p12, p13, p14, p15, p16, p17, p18, p19, p20, p22,p23, p24, p28, p32, p36, p40 {
    font-family: 'Graphik-Regular';
    margin-top: 0;
    margin-bottom: 0.2rem;
}

.limiter {
    overflow-wrap: break-word !important;
    white-space: pre-wrap;
}
.Left {
    text-align: left !important;

}

.p7 {
    font-size: 7px !important;
}
.p9 {font-size: 9px;}
.p10 {font-size: 10px;}
.p11 {font-size: 11px;}
.p12 { font-size: 12px;}
.p13 { font-size: 13px;}
.p14 { font-size: 14px;}
.p15 { font-size: 15px;}
.p16 { font-size: 16px;}
.p17 { font-size: 17px;}
.p18 { font-size: 18px;}
.p19 { font-size: 19px;}
.p20 { font-size: 20px;}
.p22 {
    font-size: 22px;
}
.p23 {
    font-size: 23px;
}
.p24 { font-size: 24px;}
.p26 {
    font-size: 26px;
}
.p28 { font-size: 28px;}
.p30 {
    font-size: 30px;
}
.p32 { font-size: 32px;}
.p36 { font-size: 36px;}
.p40 { font-size: 40px;}

.w300 {font-weight: 400;}
.w400 {font-weight: 400;}
.w700 {font-weight: 700;}
.w900 {font-weight: 700;}

p.p10, .p10 {
    font-size: 10px !important;
}

.colorGreenish {color: #21a114;}
.colorRed { color: #d04e4a;}
.colorYellow {    color: #d04e4a;}
.colorBlue {color: var(--Blue);}
.colorBlueAlpine {
    color: var(--BlueAlpine);
}
.colorBlueAlpineLight {
    color: var(--BlueAlpineLight);
}
.colorGrey {
    color: #555A5F;
}
.colorLightGrey {
    color: #d0d0d0;
}
.colorWhite {    color: #fff;}
.colorBlack { color: #222;}
.colorCyan {color: #00a2d7;}
.colorUrbanGrey { color: var(--UrbanGrey);}

.pl5 {padding-left: 6px;}
.pr5 {padding-right: 6px;}
.pl10 {padding-left: 10px;}
.pl15 {
    padding-left: 15px;
}
.pl20 {
    padding-left: 20px;
}
.pl25 {
    padding-left: 25px;
}
.pl30 {
    padding-left: 29px;
}

.pr10 {padding-right: 10px;}
.pr20 {
    padding-right: 20px;
}
.pt10 {padding-top: 10px;}
.pb10 {padding-bottom: 10px;}
.mr10 {margin-right: 10px;}
.ml5 {margin-left: 5px;}
.ml10 {
    margin-left: 10px;
}
.ml20 {
    margin-left: 20px;
}
.ml30 {
    margin-left: 30px;
}
.mt5 {    margin-top: 5px;}

.mt10 {margin-top: 10px;}
.mb10 {margin-bottom: 10px;}
.mb15 {    margin-bottom: 15px;}
.mt15 {    margin-top: 15px;}
.mt20 {    margin-top: 20px;}
.mt25 {margin-top: 25px;}

.mb25 { margin-bottom: 25px;}
.mb50 { margin-bottom: 50px;}
.mb100 { margin-bottom: 100px;}
.mt50 {margin-top: 50px;}
.mt100 {margin-top: 100px;}

.borderHi {
    border: 1px solid #1e90e6 !important;
    box-shadow: 0 0 4px #1e90e673;
    padding: 15px;
    border-radius: 6px;
    margin: -10px;
}



[class*="icheck-"] > label {
    line-height: 30px;
    font-weight: 400;
    cursor: pointer;
}

.form-select span {
    font-size: 13px !important;
    color: #555;
    font-family: 'Graphik-Regular';
}

.form-select {
    display: block;
    width: 100%;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    font-size: 13px !important;
    font-weight: 400;
    line-height: 1.5;
    font-family: 'Graphik-Regular';
    border-bottom: 1px solid var(--Blue) !important;
    border-left: 3px solid var(--Blue) !important;
    border-top: none;
    border-right: none;
}

.imgResponsive {width: 100%; height: auto;}
.imgResponsive50 {width: 50%; height: auto; text-align:center !important;}
.imgResponsive75 { width: 75%;    height: auto;    text-align: center !important;}
.imgResponsive60 {
    width: 60%;
    height: auto;
    text-align: center !important;
}
.imgResponsive25 { width: 25%;    height: auto;    text-align: center !important;}
.imgResponsive15 {    width: 15%;    height: auto;    text-align: center !important;}

.bgGreen {
    background-color: #43850f !important;
}

.border {
    border-radius: 4px;
}

.videoResponsive {
    width: 100%;
    aspect-ratio: 16 / 9;
}

.image {
    border: 1px solid #c8c8c8;
    border-radius: 6px; 
    box-shadow: 0 0 6px #d3d3d3;
    opacity: 1;
}

.image:hover {
    border: 1px solid #868686;
    border-radius: 6px;
    box-shadow: 0 0 10px #cfcfcf;
    opacity: 1;
}

.imageTop {
    border: 1px solid #c8c8c8;
    border-radius: 6px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  
    opacity: 1;
}

    .imageTop:hover {
        border: 1px solid #b4b4b4;
        border-radius: 6px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
   
        opacity: 1;
    }

.centered {
    text-align: center !important;
}

.right {
    text-align: right !important;
}

.gm5 {
    margin: 5px;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

html {
    font-size: 14px;   
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}


.badge {
    background-color: rgba(189, 116, 24, 0.6);
    color: white;
}


.card {
    border-color: #d8d8d8 !important;
    padding-bottom: 12px !important;
    background: linear-gradient(80deg, rgba(245,245,245,1) 30%, rgba(255,255,255,1) 100%);
    box-shadow: 0 0 5px #c6c6c6 !important;
}


.fix100 {
    width: 100px !important;
}

.aprox200 {
    min-width: 150px;
    width: 20%;
}

.aprox400 {
    min-width: 350px;
    width: 40%;
}

.aprox600 {
    min-width: 450px;
    width: 60%;
}


label {
    font-size: 14px !important;
}

.modal {
    padding-top: 40px;
}


/* The Modal (background) */
#firstModal .modal {
    display: none;
    position: fixed;
    z-index: 1095 !important;
    left: 0;
    top: 0;
    height: 100%;
    background: transparent !important;
    background-color: transparent !important;
    /* background: linear-gradient(-49deg, #37538ed9, #7f16dbd9, #0655aacc); */
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    border-radius: 0 !important;
    overflow: hidden !important;
    overflow-y: initial !important;
 
}
.closeNormal {
    opacity: 0; /* Oculto al inicio */
    pointer-events: none; /* No clickeable */
    transition: opacity 0.4s ease-in-out; /* Desvanecimiento suave */

    width: 30px !important;
    height: 30px !important;
    font-size: 26px;
    font-weight: bolder;
    color: var(--BlueAlpine); /* Color negro para la "X" */
    background-color: transparent !important;
    border: none;
    outline: none;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    opacity: 1;
    visibility: visible;
    transition: color 0.3s ease;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1055;
}

    .closeNormal::before {
        content: '✕'; /* Símbolo de cierre (X) */
        display: inline-block;
        font-size: 26px;
        line-height: 1;
        color: inherit;
    }

    /* Efecto al pasar el mouse */
    .closeNormal:hover {
        color: var(--Blue); /* Cambia a rojo al pasar el mouse */
        transform: scale(1);
        transition: transform 0.2s ease, color 0.2s ease;
    }


.closeHead {
    opacity: 0; /* Oculto al inicio */
    pointer-events: none;
    transition: opacity 0.4s ease-in-out; 
    width: 30px !important;
    height: 30px !important;
    font-size: 26px;
    font-weight: bolder;
    color: var(--BlueAlpine); /* Color negro para la "X" */
    background-color: transparent !important;
    border: none;
    outline: none;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    opacity: 1;
    visibility: visible;
    transition: color 0.3s ease;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1055;
}

    .closeHead::before {
        content: '✕'; /* Símbolo de cierre (X) */
        display: inline-block;
        font-size: 26px;
        line-height: 1;
        color: inherit;
    }

    /* Efecto al pasar el mouse */
    .closeHead:hover {
        color: var(--Blue); /* Cambia a rojo al pasar el mouse */
        transform: scale(1);
        transition: transform 0.2s ease, color 0.2s ease;
    }

.modal {
    z-index: 9999 !important;

}

#firstModal .modal-dialog {
    margin-right: 0 !important;
    margin-top: 0 !important;
    max-width: 40%;
    border-radius: 0 !important;
  
   
}

#firstModal .modal-content {
    margin: auto;
    display: block;
    width: 90%;
    max-width: 95%;
    border: none !important;
    box-shadow: 0 0 12px #d4d4d4;
    border-radius: 0px;
    opacity: 1 !important;
    border: 1px solid var(--Blue);
    margin-right: 75px;
    border-radius: 6px;
}

#firstModal .modal-body {
    height: 88vh !important;
    overflow-y: auto !important;
    padding-bottom: 70px !important;
    line-height: 18px;
    background-color: #fff;
    margin-top: -25px;
}


.modal-header {
    background: #fff;
    background-size: 200% 200%;
    animation: gradient 15s ease infinite;
    padding: 10px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-top: 5px;
    padding-bottom: 5px;
}


.modal-backdrop{
    background-color: #fff;
    opacity: 0 !important;  
}

.modal-header h4{   
    font-size: 15px !important;
    color: var(--Blue) !important;
    padding-left: 6px;
}

.modal-content, #caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 1.0s;
    animation-name: zoom;
    animation-duration: 1.0s;
}




/* The Modal (HEADER !) */

#firstModalHead .modal {
    display: none;
    position: fixed;
    z-index: 9995 !important;
    padding-top: 40px;
    left: 0;
    top: 0;
    height: 100%;
    background: transparent !important;
    background-color: transparent !important;
    /* background: linear-gradient(-49deg, #37538ed9, #7f16dbd9, #0655aacc); */
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    overflow: hidden !important;
    overflow-y: initial !important;
    border-radius: 0 !important;
}


#firstModalHead .modal-dialog {
    margin-left: 6% !important;
    margin-top: 0 !important;
    max-width: 96%;
    border-radius: 0 !important;
}



#firstModalHead .modal-body {
    /*dddddddddddddddd*/
    height: 84vh !important;
    overflow-y: auto !important;
    padding-bottom: 20px !important;
    background-color: #fff;
    border-radius: 0 !important;
    padding-left: 1px;
    padding-right: 0px;
}

#firstModalHead .modal-content {
    /*dddddddddddddddd*/
    margin: auto;
    margin-left: 0px;
    display: block;
    width: 93%;
    max-width: 94%;
    border: none !important;
    box-shadow: 0 0 12px #d5d5d5;
    border-radius: 0;
    opacity: 1 !important;
    padding-right: 1px;
    background-color: #fff;
}

#firstModalHead .modal-header {
   height: 55px;
}


#firstModalHead .modal-header h4 {
    font-size: 15px !important;
    color: var(--Blue) !important;
    padding-left: 30px;

}

.kontainer {
    width: 49% !important;
    display: inline-block !important;
    padding-left: 15px !important;
    vertical-align: middle !important;
    align-items: baseline !important;
    

}

.kontainerMore {
    width: 83% !important;
    display: inline-block !important;
    padding-left: 15px !important;
    vertical-align: middle !important;
    padding-top: 40px !important;
  
}
.kontainerLess {
    width: 15% !important;
    display: inline-block !important;
    padding-left: 15px !important;
    vertical-align: middle !important;
}

.headButtons {
    max-width: 330px;
    min-width: 180px;
    min-height: 70px;
    max-height: 150px !important;
    background-color: var(--Blue);
    display: flex !important;
   
    justify-content: space-between !important;
    margin-top: 5px;

}

.headButtonsSmall {
    max-width: 330px;
    min-width: 180px;
    min-height: 65px;
    max-height: 90px;
    background-color: var(--Blue);
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    margin-top: 6px;
}

.poster {
    max-width: 100% !important;
    max-height: 100% !important;
    background-size: cover !important;
    position: relative;
    margin: 0;
    padding: 0;
    object-fit: cover !important;
}

.headerLink {
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    min-height: 70px;
   
}



@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


@-webkit-keyframes zoom {
    from {
        
        -webkit-transform: translate(100%, 0px);
    }

    to {
       
        -webkit-transform: translate(0%, 0px);
    }
}

@keyframes zoom {
    from {
       
        transform: translate(100%, 0px);
    }

    to {
      
        transform: translate(0%, 0px);
    }
}
.fader {
    opacity: 0;
    animation-name: fader;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes fader {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}




/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #9a9a9a;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

    .close:hover,
    .close:focus {
        color: #bbb !important;
        text-decoration: none;
        cursor: pointer;
    }


.btn-close {

}

a {
    color: none !important;
    display: inline-block ;
}

label {
    display: inline-block !important;
}

.wi50 {
    width: 40px !important;
}

/* Tooltips */
[data-tooltip] {
    position: relative;
    z-index: 2;
    cursor: pointer;
}

    /* Hide the tooltip content by default */
    [data-tooltip]:before,
    [data-tooltip]:after {
        visibility: hidden;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
        opacity: 0;
        pointer-events: none;
    }

    /* Position tooltip above the element */
    [data-tooltip]:before {
        position: absolute;
        bottom: 90%;
        left: 50%;
        margin-bottom: 5px;
        margin-left: -20px;
        padding: 9px;
        width: 300px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px; 
        background-color: #462282;
        color: #fff;
        content: attr(data-tooltip);
        text-align: center;
        font-size: 13px;
        line-height: 1.2;
    }

    /* Triangle hack to make tooltip look like a speech bubble */
    [data-tooltip]:after {
        position: absolute;
        bottom: 90%;
        left: 50%;
        margin-left: -5px;
        width: 0;
        border-top: 5px solid #000;
        border-top: 5px solid hsla(0, 0%, 20%, 0.9);
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
        content: " ";
        font-size: 0;
        line-height: 0;
    }

   
    [data-tooltip]:hover:before,
    [data-tooltip]:hover:after {
        visibility: visible;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
        opacity: 1;
    }



.loadSmall {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*change these sizes to fit into your project*/
    width: 30px;
    height: 30px;
    z-index: 9000;
}

    .loadSmall hr {
        border: 0;
        margin: 0;
        width: 40%;
        height: 40%;
        position: absolute;
        border-radius: 50%;
        animation: spin 2s ease infinite
    }

    .loadSmall :first-child {
        background: #19A68C;
        animation-delay: -1.5s
    }

    .loadSmall :nth-child(2) {
        background: #F63D3A;
        animation-delay: -1s
    }

    .loadSmall :nth-child(3) {
        background: #FDA543;
        animation-delay: -0.5s
    }

    .loadSmall :last-child {
        background: #193B48
    }

@keyframes spin {
    0%,100% {
        transform: translate(0)
    }

    25% {
        transform: translate(160%)
    }

    50% {
        transform: translate(160%, 160%)
    }

    75% {
        transform: translate(0, 160%)
    }
}

.load {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*change these sizes to fit into your project*/
    width: 100px;
    height: 100px;
    z-index: 9000;
}

    .load hr {
        border: 0;
        margin: 0;
        width: 40%;
        height: 40%;
        position: absolute;
        border-radius: 50%;
        animation: spin 2s ease infinite
    }

    .load :first-child {
        background: #19A68C;
        animation-delay: -1.5s
    }

    .load :nth-child(2) {
        background: #F63D3A;
        animation-delay: -1s
    }

    .load :nth-child(3) {
        background: #FDA543;
        animation-delay: -0.5s
    }

    .load :last-child {
        background: #193B48
    }

/*
File#: _1_language-picker
Title: Language Picker
Descr: A custom selector allowing users to choose their preferred language on a page
Usage: codyhouse.co/license

-------------------------------- */
/* reset */
*, *::after, *::before {
    box-sizing: border-box;
}

* {
    font: inherit;
    margin: 0;
    padding: 0;
    border: 0;
}



h1, h2, h3, h4 {
    line-height: 1.2;
    color: hsl(230, 13%, 9%);
    font-weight: 700;
}

h1 {
    font-size: 2.0736rem;
}

h2 {
    font-size: 1.728rem;
}

h3 {
    font-size: 1.25rem;
}

h4 {
    font-size: 1.2rem;
}

ol, ul, menu {
    list-style: none;
}

button, input, textarea, select {
    background-color: transparent;
    border-radius: 0;
    color: inherit;
    line-height: inherit;
    appearance: none;
}

textarea {
    resize: vertical;
    overflow: auto;
    vertical-align: top;
}

a {
    color: #064fa0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

img, video, svg {
 
    max-width: 100%;
}

@media (min-width: 64rem) {
    body {
        font-size: 1.0rem;
    }

    h1 {
        font-size: 3.051rem;
    }

    h2 {
        font-size: 2.44rem;
    }

    h3 {
        font-size: 1.75rem;
    }

    h4 {
        font-size: 1.5625rem;
    }
}

#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

    #myImg:hover {
        opacity: 0.7;
    }

/* The Modal (background) */
.modale {
    display: none; 
    position: fixed; 
    z-index: 1; 
    padding-top: 100px; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 110%; 
    overflow: auto; 
    background-color: rgb(255,255,255); 
    background-color: rgba(255,255,255,0.99); 
}

/* Modal Content (image) */
.modale-content {
    margin: 0 auto;
    display: block;
    max-width: 80%;
    border: none !important;
    display: flex;
    justify-content: center;
    height: 75vh;
    box-shadow: 0 0 8px #bdbdbd;
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 800px;
    text-align: center;
    color: #333;
    font-size: 13px;
    padding: 10px 0;
    height: 150px;
    padding-top: 15px;
}

/* Caption of Modal Video */
#captionVideo {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 800px;
    text-align: center;
    color: #222;
    font-size: 13px;
    padding: 10px 0;
    height: 150px;
    padding-top: 15px;
}


/* Add Animation */
.modale-content, #caption , #captionVideo {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

.arrow {
    position: absolute;
    top: 50%;
    color: var(--BlueAlpine);
    cursor: pointer;
    user-select: none;
    z-index: 1001;
    transform: translateY(-50%);
    padding: 0px;
    padding-left: 6px;
    padding-right: 6px;
    background-color: transparent;
    border-radius: 40px;
    transition: background-color 0.3s;
    border: 2px solid #fff;
}

    .arrow:hover {
        padding-left: 6px;
        padding-right: 6px;
        background-color: transparent;
        border: 2px solid var(--BlueAlpine);
        border-radius: 40px;
        color: var(--BlueAlpine) !important;
    }


.arrow.left {
    left: 25px;
}

.arrow.right {
    right: 25px;
}


.arrow2 {
    position: absolute;
    top: 40%;
    color: var(--BlueAlpine);
    cursor: pointer;
    user-select: none;
    z-index: 1001;
    transform: translateY(-40%);
    padding: 0px;
    padding-left: 6px;
    padding-right: 6px;
    background-color: transparent;
    border-radius: 40px;
    transition: background-color 0.3s;
    border: 2px solid #fff;
}

    .arrow2:hover {
        padding-left: 6px;
        padding-right: 6px;
        background-color: transparent;
        border: 2px solid var(--BlueAlpine);
        border-radius: 40px;
        color: var(--BlueAlpine) !important;
    }


    .arrow2.left {
        left: 25px;
    }

    .arrow2.right {
        right: 25px;
    }



@-webkit-keyframes zoom {
    from {
        -webkit-transform: scale(0)
    }

    to {
        -webkit-transform: scale(1)
    }
}

@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

.hidden {
    display: none !important;
}


/* The Close Button */
.close {
    position: absolute;
    top: 40px;
    right: 37px;
    color: var(--BlueAlpine);
    font-size: 60px;
    font-weight: bold;
    transition: 0.3s;
}

    .close:hover,
    .close:focus {
        color: var(--Blue) !important;
        text-decoration: none;
        cursor: pointer;
    }


.nav-linkedSpecial {
    font-size: 15px !important;
    border: none !important;
    border: none !important;
    text-decoration: none !important;
    padding: 5px;
    padding-left: 5px;
    padding-right: 5px;
    min-width: 120px;
    font-weight: 700;
    margin-right: 12px !important;
    margin-left: 12px !important;
  
}

    .nav-linkedSpecial:active {
        font-size: 15px !important;
        color: var(--Blue) !important;
        border: none !important;
        background-color: var(--Blue);
        text-decoration: none !important;
        font-weight: 700;
    }

    .nav-linkedSpecial:hover {
        font-size: 15px !important;
        color: #2780e3 !important;
        border: none !important;
        text-decoration: none !important;
        font-weight: 700;
    }

    .nav-linkedSpecial:visited {
        font-weight: 700 !important;
        text-decoration: none !important;
        color: var(--Blue);
    }

    .nav-linkedSpecial:focus {
        font-weight: 700 !important;
        text-decoration: none !important;
        color: var(--Blue);
    }



/* Collpse Product Section SUB Products*/

.modal {
    
    pointer-events: none !important;
}
#Solution .p14 {
    font-size: 13px;
}


#ServiceText .p14 {
    font-size: 14px !important;
}

#ServiceText span {
    margin-top: -15px;
    display: inline-block;
    line-height: 1.2em !important;
}

.no-top-padding {
    padding: 0 !important;
}

/*.modal-open .point_med {
    pointer-events: none !important;
}*/


#swipe {
    display: none !important;
}



/* Media Query for low resolution  Phones */
@media (min-width: 320px) and (max-width: 768px) {

    .wrapper {
        margin-left: 1px !important;
        margin-right: 1px !important;
    }

    .burger {
        left: 7px;
        width: 20px;
    }

        .burger span::before {
            top: -7px;
        }

        .burger span::after {
            top: 7px;
        }

        .burger.clicked span::after {
            -webkit-transform: translateY(-7px) rotate(-45deg);
            -moz-transform: translateY(-7px) rotate(-45deg);
            -ms-transform: translateY(-7px) rotate(-45deg);
            -o-transform: translateY(-7px) rotate(-45deg);
            transform: translateY(-7px) rotate(-45deg);
        }

        .burger.clicked span::before {
            -webkit-transform: translateY(7px) rotate(45deg);
            -moz-transform: translateY(7px) rotate(45deg);
            -ms-transform: translateY(7px) rotate(45deg);
            -o-transform: translateY(7px) rotate(45deg);
            transform: translateY(7px) rotate(45deg);
        }

    .discover {
        top: 22px;
        right: 9px;
    }

        .discover i {
            font-size: 30px !important;
        }

    .btn-back {
        right: 4px;
        top: 24px;
    }

        .btn-back .p40 {
            font-size: 30px;
        }


    .container-md, .container-sm, .container {
        max-width: 100% !important;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .closeNormal {
        top: 2px;
    }

    .p23 {
        font-size: 16px;
    }

    p {
        font-size: 12px;
    }

    .btnBig {
        min-width: 160px;
    }

    .button-item {
        max-width: 90% !important;
    }

    .button-item {
        flex: 1 1 99% !important;
    }

    #masterDiv {
        background-image: url('/images/ui/HQ_HubW2.jpg');
        background-size: cover !important;
        background-position: center;
        background-position: center calc(50% - 30px) !important;
        background-repeat: no-repeat;
        padding-left: 0px !important;
        margin-left: -5px !important;
    }

    .btn-secondary {
        border-radius: 18px;
        padding-bottom: 10px;
        padding-top: 8px;
        padding-right: 12px;
        padding-left: 12px;
        font-family: 'GraphikWide-Semibold' !important;
        font-style: normal;
        font-weight: 700 !important;
    }


    .button-description {
        display: none;
    }

    .p12 {
        font-size: 11px;
    }

    .complete_Title .p32  {
        font-size: 20px !important;
    }
    .complete_Title {
        min-height: 50px !important;       
    }

    .complete_Title .pl20 {
        padding-left: 5px !important;
    }
    .img-container {
        margin-top: -20px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 27px !important;
    }
    .textSection  {
        margin-top: 1px !important;
    }

    .complete_Main  {
        background-color: transparent !important;
    }

    .product_Index .p32 {
        font-size: 24px !important;
    }

    #buttonsSection {
        min-height: 10px !important;
    }
    .filter-buttons  {
        margin-top: 40px !important;
    }

    .tab-btn2 {
        color: var(--Blue);
        border: none;
        padding: 2px;
        padding-top: 3px;
        padding-bottom: 3px;
        margin: 6px;
        cursor: pointer;
        text-align: left;
        position: relative;
        overflow: hidden;
        background-color: transparent !important;
    }

    .wrapperSmall {
        padding-left: 0px;
        padding-right: 0px;
        margin-left: 1px !important;
        margin-right: 1px !important;
    }

    .wrapperSmall .pg20{
        padding: 1px;
    
    }

    .wrapperSmall .mt25 {
         margin-top: 5px !important;
       
     }

    .single_AlturaImagen {
        height: 40% !important;
    }
    .single_AlturaContenido {
        max-height: 500px !important;
    }

    .p14 {
        font-size: 13px;
    }

    .close {
        top: 0px;
        right: 12px;
    }

    .imgMedia {
        max-width: 80px !important;
    }
    .imgMedia img {
        max-width: 80px !important;
        max-height: 45px !important;
    }

    .imgMediasDiv  {
        margin-top:  5px !important;
    }

    .videoElement {
        width: 80px !important;
        height: 45px !important;
    }

    .videoDivider {
        margin-top: 25px !important;
    }

    .modale-content {
        margin: 0 auto;
        display: block;
        max-width: 95%;
        border: none !important;
        display: flex;
        justify-content: center;
        height: 30vh;
        box-shadow: 0 0 8px #bdbdbd;
    }

    .single_Large {
        width: 100% !important;
    }
    .single_Small {
        width: 100% !important;
    }

    .contentTexter {
        margin-top: 13px !important;
        margin-bottom: 15px !important;
    }

    .tab-btn3 {
        color: #e4e4e4;     
        border: none;
        padding: 2px;   
        padding-bottom: 3px;
        margin: 3px;
        cursor: pointer;
        text-align: left;
        position: relative;
        overflow: hidden;
        background-color: transparent !important;
    }

        .tab-btn3 .p15 {
            font-size: 13px !important;
        }



    .containers {
        grid-template-areas:
            "WhiteTop-1"
            "a-28A0R-1"
            "a-PjpxN-2"
            "a-Z8DL4-2"
            "a-28A0R-2"
            "footer-1-1" !important;
        grid-template-columns: 100% !important;
        grid-template-rows: auto !important;
    }

    .footer-1-1, .WhiteTop-1, .a-28A0R-1, .a-PjpxN-2, .a-Z8DL4-2, .a-28A0R-2 {
        padding: 10px !important;
    }

    .vertical-tabs button {
        width: 100% !important;
        margin-bottom: 10px !important;
    }

    .footer-text-single {
        width: 100% !important;
        padding-left: 10px !important;
        margin-top: 50px;
        margin-bottom: 50px;
    }

    .ghost {
        width: 0% !important;
        height: 0px !important;
    }

    #tab-text li {
        list-style: none;
        position: relative;
        line-height: 2.0 !important;
    }

        #tab-text li::before {
            content: "•";
            font-size: 1.5em;
            position: absolute;
            left: -25px;
            top: -23px !important;
        }

    #tab-text {
        margin-top: 10px !important;
        font-size: 13px !important;
        padding-right: 5px !important;
        padding-left: 10px !important;
    }

    .WhiteTop-1 img {
        padding-top: 25px !important;
        padding-left: 25px;
        max-width: 50% !important;
        height: auto !important;
    }

    .packContent {
        max-height: 95dvh !important;
        padding-left: 15px !important;
        padding-right: 10px;
        margin-top: 20px !important;
    }

    .titPack {
        padding-left: 15px !important;
        font-size: 20px !important;
    }

    .columnaRight {
        margin-top: 30px !important;
    }

    #Buttons {
        display: block !important;
    }

    .arrow2 {
        position: absolute;
        top: 48%;
        color: var(--BlueAlpine);
        cursor: pointer;
        user-select: none;
        z-index: 1001;
        transform: translateY(-40%);
        padding: 0px;
        padding-left: 6px;
        padding-right: 6px;
        background-color: transparent;
        border-radius: 40px;
        transition: background-color 0.3s;
        border: 2px solid #fff;
    }

    .spacePack {
        padding-right: 15px !important;
    }

    #swipe {
        display: inline-block !important;
        position: fixed;
        left: 43%;
        bottom: 5px;
        text-align: center !important;
    }

    #swipe img {
        width: 50px;
    }

    .swipping {
        animation: mymove 2s infinite alternate;        
    }
    @keyframes mymove {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }



    #firstModal.modal.fade.show {
        width: 240% !important;
    }

    #firstModal.modal {
        width: 100% !important;
        height: 100vh !important;
        padding-right: 0px !important;
        position: fixed;
        z-index: 9990 !important;
        padding-top: 20px !important;
        left: 0;
        top: 0;
        overflow-x: hidden;
        background: transparent !important;
        background-color: transparent !important;
        background: linear-gradient(-49deg, #37538ed9, #7f16dbd9, #0655aacc);
        background-size: 400% 400%;
        animation: gradient 15s ease infinite;
        border-radius: 0 !important;
    }


    #firstModal .modal-dialog {
        width: 100% !important;
        margin-left: 1% !important;
        margin-right: 0% !important;
        margin-top: 0 !important;
        display: block;
        border-radius: 0 !important;
        padding: 12px;
        padding-right: 1px;
        overflow-y: initial !important;
    }

    #firstModal .modal-header {
        max-height: 35px;
        padding-top: 5px;
        
    }

    #firstModal .modal-header h4{
       font-size: 12px !important;
    }

    #firstModal #Solution .p18 {
        font-size: 13px !important;
    }

        #firstModal .modal-content {
            text-align: center !important;
            overflow-x: hidden !important;
            overflow-y: visible !important;
            margin-left: 2%;
            margin-right: 1%;
            display: block;
            
            max-width: 100% !important;
            border: none !important;
            box-shadow: 0 0 12px #d5d5d5;
            border-radius: 0;
            opacity: 1 !important;
        }

    #firstModal .modal-body {
        padding-left: 15px;
        padding-top: 10px;
        /*dddddddddd*/
        height: 82vh !important;
        overflow-y: visible !important;
        padding-bottom: 10px !important;
        text-align: left !important;
    }

        #firstModal .modal-body .p14 {
            font-size: 11px;
            line-height: 1px !important;
        }



    #firstModalHead .modal {
        width: 100% !important;
        height: 100vh !important;
        padding-right: 0px !important;
        position: fixed;
        z-index: 9990 !important;
        padding-top: 5px !important;
        left: 0;
        top: 0;   
        overflow-x: hidden !important;
        overflow-y: visible !important;
        background: transparent !important;
        background-color: transparent !important;
        background: linear-gradient(-49deg, #37538ed9, #7f16dbd9, #0655aacc);
        background-size: 400% 400%;
        animation: gradient 15s ease infinite;
        border-radius: 0 !important;
    }

    div#firstModalHead.modal.fade.show {
        padding-top: 10px !important;
        padding-right: 0px !important;
    }


    #firstModalHead .modal-dialog {
        max-width: 100% !important;
        min-width: 310px !important;
        position: fixed;
        margin-left: 3% !important;
        margin-right: 1% !important;
        margin-top: 10px !important;
        display: block;
        border-radius: 0 !important;
    }

    #firstModalHead .modal-header {
        max-height: 35px;
    }

    #firstModalHead .modal-content {
        text-align: center !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        margin-left: 3%;
        margin-right: 1%;
        display: block;      
        border: none !important;
        box-shadow: 0 0 12px #d5d5d5;
        border-radius: 0;
        opacity: 1 !important;
    }

    #firstModalHead .modal-body {
        padding-left: 10px;
    }

    #firstModalHead .modal-body {
        height: 90vh !important;
   
        padding-bottom: 10px !important;
        line-height: 18px;
        background-color: #fff;
    }

    #firstModalHead .imgResponsive {
        width: 100%;
        height: auto;
    }

    #firstModalHead .col-3 {
        display: block !important;
        width: 100%;
    }

    #firstModalHead .col-9 {
        display: block !important;
        width: 100%;
    }


    .modal-body .p14 {
        font-size: 12px;
        line-height: 1px !important;
    }

    .modal-body img {
        margin-top: 1px !important;
    }

    .p32 {
        font-size: 12px;
    }

    #headList br {
        margin: 5px 0;
    }

    .headButtons {
        max-width: 98%;
        min-width: 98%;
        min-height: 25px;
        max-height: 25px !important;
        background-color: transparent;
        text-align: left !important;
        display: block;
        margin-top: 1px;
        
    }

    .headButtonsSmall {
        max-width: 98%;
        min-width: 98%;
        min-height: 25px;
        max-height: 25px !important;
        background-color: var(--Blue);
        display: inline-block;
        margin-top: 3px;
    }

    .scroller {
        scrollbar-color: var(--Blue) #cccccc !important;
        margin-right: 2px;
        margin-top: 5px !important;       
    }
   

    .blux {
        margin-top: 8px;
        display: block !important;
        border: none;
        height: 2px;
        background-color: var(--Blue);
        width: 50%;
        opacity: 1;
    }

    #ServiceText .ServiceText {
        font-size: 11px !important;
        text-align: left !important;
     
    }

    #ServiceText .pr10 {
        padding-right: 1px !important;
        padding-left: 1px !important;
    }

    #ServiceText #Service {
        padding-top: 20px !important;
        font-size: 22px;
        text-align: left !important;
    }

    #Service span {
        font-size: 20px !important;
    }

    .headerLink {
        font-size: 12px;
        min-height: 20px;
        color: var(--Blue) !important;
    }

    #headList .kontainer img {
        display: none !important;
    }

    .kontainer {
        width: 100% !important;
        display: block !important;
        padding-left: 2px !important;
        vertical-align: middle !important;
    }

    .kontainerMore {
        width: 100% !important;
        display: block !important;
        padding-left: 2px !important;
        vertical-align: middle !important;
    }

    .kontainer, .kontainerMore, .kontainerLess span {
        padding-top: 7px;
    }
    .nav-linkedSpecial {
        font-size: 13px !important;
        padding: 2px;
        padding-left: 4px;
        padding-right: 4px;
        min-width: 60px;
        font-weight: 700;
        margin-right: 5px !important;
        margin-left: 5px !important;
        margin-top: 3px;
        border: 1px solid var(--Blue) !important;
        border-radius: 6px;
        display: block !important;
    }

        .nav-linkedSpecial:active {
            font-size: 13px !important;
            border: 1px solid var(--Blue) !important;
            border-radius: 6px;
        }

        .nav-linkedSpecial:hover {
            font-size: 13px !important;
            border: 1px solid var(--Blue) !important;
            border-radius: 6px;
        }

    #headList .wrapper {
        text-align: center !important;
        margin-left: 1px !important;
        margin-right: 10px !important;
    }

    #headList .wrapperMax {
        margin-left: 6px !important;
        margin-right: 6px !important;
    }

        #headList .wrapperMax img {
            padding-top: 5px;
        }

    #headList .row {
        margin-right: 0px;
        margin-left: 0px;
        text-align: center !important;
    }

    #firstModalHead .modal-header {
        overflow: hidden !important;
    }

    .modal-open {
        overflow-y: inherit !important;
        padding-right: 0 !important;
    }

        .modal-open .modal {
            overflow-y: inherit !important;
            padding-right: 0 !important;
        }

  
}


    /* Media Query for High resolution  Tablets, Ipads */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .container-md, .container-sm, .container {
        max-width: 100% !important;
    }

    #swipe {
        display: none !important;
    }

    @keyframes mymove {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }


    #firstModal .modal {
        padding-top: 10px !important;
    }

    #firstModal .modal-dialog-scrollable {
        height: 70% !important;
    }


    #firstModal .modal-dialog {
        overflow-y: initial !important;
        margin-right: 0 !important;
        margin-top: -30px !important;
        max-width: 40%;
        min-width: 440px;
        border-radius: 0 !important;
        height: 70% !important;
    }

    #firstModal .modal-content {
        max-height: 70% !important;
        margin: auto;
        display: block;
        width: 90%;
        max-width: 800px;
        border: none !important;
        box-shadow: 0 0 12px #c2c2c2;
        border-radius: 0px;
        opacity: 1 !important;
        border: 1px solid var(--Blue);
        margin-right: 55px !important;
        overflow-x: hidden !important;
    }
   

    #firstModal .modal-body {
        --bs-modal-padding: 0.8rem;
        max-height: calc(100% - 100px) !important;
        overflow-y: scroll !important;
    }


 .modal-header {
        padding: 6px;
    }

    .modal-body img {
        margin-top: -10px !important;
        
    }

    #Solution .p14 {
        font-size: 13px;
    }

    #ServiceText .p14 {
        font-size: 12px !important;
    }

    #ServiceText span {
        margin-top: -15px;
        font-size: 16px !important;
        display: inline-block;
        line-height: 1.1em !important;
    }

    .p32 {
        font-size: 22px;
    }

    #headList br {
        margin: 5px 0;
    }

    .headButtons {
        max-width: 220px;
        min-width: 170px;
        min-height: 60px;
        max-height: 80px !important;
        background-color: var(--Blue);
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        margin-top: 5px;
    }

    .headButtonsSmall {
        max-width: 220px;
        min-width: 170px;
        min-height: 60px;
        max-height: 80px !important;
        background-color: var(--Blue);
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        margin-top: 5px;
    }

    .headerLink {
        font-size: 11px;
        min-height: 60px;
        vertical-align: middle !important;
        padding-top: 20px;
    }

    #headList .kontainer img {
        display: none !important;
    }

    .kontainer {
        width: 99% !important;
        display: inline-flex !important;
        padding-left: 15px !important;
        vertical-align: middle !important;
        align-items: baseline !important;
    }

    .kontainerMore {
        width: 99% !important;
        display: inline-flex !important;
        padding-left: 15px !important;
        vertical-align: middle !important;
      
    }

    #kontainer_komponenten {
        height: 50px !important;
        vertical-align: middle !important;
    }

    #kontainer_care {
        height: 50px !important;
    }

    #kontainer_lios {
        height: 50px !important;
    }

    .nav-linkedSpecial {
        
        font-size: 13px !important;
        padding: 4px;
        padding-left: 2px;
        padding-right: 2px;
        min-width: 60px;
        font-weight: 700;
        margin-right: 6px !important;
        margin-left: 6px !important;
        margin-top: -20px;
    }

        .nav-linkedSpecial:active {
            font-size: 13px !important;
        }

        .nav-linkedSpecial:hover {
            font-size: 13px !important;
        }



    #Service span {
        font-size: 16px !important;
    }

    #firstModalHead .imgResponsive {
        width: 90%;
        height: auto;
        text-align: center !important;
    }


    #firstModalHead .modal-header {
        height: 30px;
        overflow: hidden !important;
    }

    #firstModalHead .modal-header .btn-close {
        padding: calc(var(--bs-modal-header-padding-y)* 0.5) calc(var(--bs-modal-header-padding-x)* 0.5);
        margin: calc(0.4* var(--bs-modal-header-padding-y)) calc(-0.5* var(--bs-modal-header-padding-x)) calc(-0.5* var(--bs-modal-header-padding-y)) auto;
    }



    #firstModalHead .modal-body {
        overflow: hidden !important;
    }
}


#masterDiv {    
    height: 74vh;
    display: flex;
    flex-direction: column;
}

#div1 {
    display: flex !important;
    height: 15% !important;
}

#div2 {
    height: 65% !important;
}

#div3 {
    height: 25% !important;  
}


::-webkit-scrollbar {
    width: 5px !important; 
    height: 5px !important;
}

::-webkit-scrollbar-track {
    background: #eaeaea;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: #1e50b9 !important; 
    border-radius: 3px;
    border: 1px solid #eaeaea;
}

@supports not selector(::-webkit-scrollbar) {
    body {
        scrollbar-color: #1e50b9 #eaeaea !important;
    }
}