/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */
    /*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */
    /* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
    
    html {
        color: #222;
        font-size: 1em;
        line-height: 1.4;
    }
    /*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */
    
    ::-moz-selection {
        background: #b3d4fc;
        text-shadow: none;
    }
    
    ::selection {
        background: #b3d4fc;
        text-shadow: none;
    }
    /*
 * A better looking default horizontal rule
 */
    
    hr {
        display: block;
        height: 1px;
        border: 0;
        border-top: 1px solid #ccc;
        margin: 1em 0;
        padding: 0;
    }
    /*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */
    
    audio,
    canvas,
    iframe,
    img,
    svg,
    video {
        vertical-align: middle;
    }
    /*
 * Remove default fieldset styles.
 */
    
    fieldset {
        border: 0;
        margin: 0;
        padding: 0;
    }
    /*
 * Allow only vertical resizing of textareas.
 */
    
    textarea {
        resize: vertical;
    }
    /* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */
    
    .browserupgrade {
        margin: 0.2em 0;
        background: #ccc;
        color: #000;
        padding: 0.2em 0;
    }
    /* ==========================================================================
   Author's custom styles
   ========================================================================== */
    /**
 * LOGIN
 */
    .login-page {
        position: fixed;
        width: 100%;
        height: 100%;
        background: silver;
        display: flex;
        align-items: center;
        margin: auto;
    }
    .box-back-login {
        position: fixed;
        display: flex;
        justify-content: flex-end;
        top: 0;
        width: 100%;
        height: 100%;
        background: #b30213;
        background: -moz-linear-gradient(45deg, #7e060d 1%, #b10313 99%);
        background: -webkit-linear-gradient(45deg, #7e060d 1%, #b10313 99%);
        background: linear-gradient(45deg, #7e060d 1%, #b10313 99%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#7e060d", endColorstr="#b10313",GradientType=1 );
    }
    .box-back-login .backgraund-box {
        position: fixed;
        width: 80%;
        height: 100%;
    }
    .box-back-login .backgraund-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .wrapper-login {
        background-color: #f0f0f0;
        font-family: "Montserrat",sans-serif;
        background-image: url(../img/back-login.jpg);
        background-repeat: no-repeat;
        background-size: cover;
    }
    .background-container {
        position: fixed;
        height: 100%;
        width: 100%;
        z-index: -1;
        background-image: url(../img/back-figure.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
    }
    .head-logo {
        background-color: #ff1744;
        padding: 2em 1em;
        text-align: center;
        border-bottom: 1px solid rgba(58, 58, 58, 0.3);
        box-shadow: 0px 0px 18px 5px rgba(0, 0, 0, 0.2);
    }
    .wrapper-login .head-logo {
        padding: 8% 20px;
        background: rgb(126,6,13); /* Old browsers */
        background: -moz-linear-gradient(45deg, rgba(126,6,13,1) 1%, rgba(177,3,19,1) 99%); /* FF3.6-15 */
        background: -webkit-linear-gradient(45deg, rgba(126,6,13,1) 1%,rgba(177,3,19,1) 99%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(45deg, rgba(126,6,13,1) 1%,rgba(177,3,19,1) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7e060d', endColorstr='#b10313',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    }
    .head-logo img {
        margin: 1em 0;
        max-width: 100%;
    }
    
    .login-content {}
    
    .login-content {}
    
    .login-square {
        position: relative;
        left: 10%;
        /* margin: auto; */
        z-index: 1;
        background: #fff;
        width: 100%;
        max-width: 360px;
        text-align: center;
        border-radius: 5px;
        box-shadow: 0 0 20px 0 rgba(0,0,0,.2), 0 5px 5px 0 rgba(0,0,0,.24);
        overflow: hidden;
    }
    
    .login-square h3 {
        margin: 0;
        padding: 0.9em .5rem;
        text-align: center;
        line-height: 100%;
        background-color: #dfe0e1;
        font-size: 19px;
        font-weight: 400;
        position: relative;
        z-index: 2;
    }
    
    .login-square .login-form {
        background-color: #fff;
        padding: 30px 30px;
    }
    
    .login-form img {
        margin-bottom: 30px;
    }
    
    .login-square .login-form form {
        width: 100%;
        margin: 0 auto;
    }
    .login-square .login-form label {
        font-family: "Montserrat",sans-serif;
        font-weight: 400;
        font-size: 13px;
        color: #606060;
        text-align: left;
        display: block;
        letter-spacing: 2px;
    }
    .login-square .login-form input {
        font-family: "Montserrat",sans-serif;
        outline: 0;
        background: #e6e6e6;
        width: 100%;
        border: 0;
        margin: 0 0 15px;
        padding: 15px;
        box-sizing: border-box;
        font-size: 14px;
        border-radius: 5px;
        height: auto;
        box-shadow: none;
    }
    
    form label.error {
        font-weight: 300;
        margin-top: 0.5em;
        color: #ff1744;
    }
    
    form label.error strong {
        font-weight: inherit;
    }
    
    form label.error a {
        font-weight: 400;
        color: inherit;
    }
    
    .btn-red {
        background-color: #ff1744;
        border: none;
        color: #fff;
        font-weight: 600;
        transition: background 0.3s ease-in;
        -webkit-transition: background 0.3s ease-in;
        -moz-transition: background 0.3s ease-in;
        -ms-transition: background 0.3s ease-in;
        outline: none;
        -webkit-outline: none;
        -moz-outline: none;
        -ms-outline: none;
    }
    
    .btn-red:hover {
        color: #fff;
        background-color: #ff0032;
    }
    
    .login-square .login-form button {
        font-family: "Montserrat",sans-serif;
        text-transform: uppercase;
        outline: 0;
        background: #da1d45;
        width: 75%;
        border: 0;
        padding: 10px;
        margin: auto;
        color: #fff;
        font-size: 14px;
        font-weight: 400;
        display: inherit;
        -webkit-transition: all .3 ease;
        transition: all .3 ease;
        cursor: pointer;
        border-radius: 100px;
        margin-top: 35px;
        margin-bottom: 25px;
    }
    
    .login-square .login-form .recover-password {
        margin: 15px 0 0;
        text-align: center;
        font-size: 13px;
        font-family: "Montserrat",sans-serif;
        font-weight: 400;
        text-decoration: underline !important;
        color: #3a7cea;
        text-decoration: none;
        display: block;
        letter-spacing: 2px;
    }
    /** HEADER FILTROS */
    
    header {
        background-color: #fff;
        position: relative;
    }
    
    header .logo {}
    
    .d-table-row {
        display: table-cell;
        vertical-align: middle;
    }
    
    .d-table {
        display: table;
    }
    
    header .frm-search {
        display: inline-block;
        vertical-align: middle;
        font-size: 0;
        border: 1px solid #DA1D45;
        border-radius: 20px;
        overflow: hidden;
        padding: 0 10px;
    }
    
    header .d-table {
        height: 95px;
        width: 100%;
    }
    
    header .frm-search .frm-group {}
    
    header .frm-search .search-submit {
        background-color: #fff;
        border: none;
        border-radius: 0;
        height: 35px;
        box-shadow: none;
        outline: none;
        -webkit-outline: none;
        -moz-outline: none;
        -ms-outline: none;
        vertical-align: top;
    }
    
    header .frm-search input[type="text"] {
        border: none;
        border-radius: 0;
        width: 200px;
        display: inline-block;
        vertical-align: middle;
        font-size: 16px;
        height: 35px;
        vertical-align: top;
        border: none;
        box-shadow: none;
    }
    header .icon-news {
        color: #DA1D45;
        font-size: 30px;
    }
    header .frm-search .search-submit img {
        width: 20px;
    }
    
    header .head-profile {
        display: inline-block;
        vertical-align: middle;
        width: 200px;
        margin: 16px;
        font-size: 0;
    }
    
    header .head-profile a.profile {
        width: 46%;
        display: inline-flex;
        vertical-align: middle;
        font-size: 13px;
        color: #6e6e6e;
        line-height: 13px;
        font-family: "Montserrat",sans-serif;
        font-weight: 500;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        transition: all 0.2s ease-in;
        -webkit-transition: all 0.2s ease-in;
        -moz-transition: all 0.2s ease-in;
        -ms-transition: all 0.2s ease-in;
    }
    header .head-profile a.profile:hover {
        color: #DA1D45;
    }
    .usernameD {
        width: 90%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        position: relative;
        vertical-align: middle;
    }
    
    .notifications {
        position: relative;
        display: inline-block;
        vertical-align: middle;
        cursor: pointer;
    }
    
    .count {
        position: absolute;
        top: -2px;
        right: -2px;
        z-index: 99;
        color: #fff;
        font-size: 9px;
        background: #007ec4;
        width: 18px;
        height: 18px;
        text-align: center;
        /* line-height: 22px; */
        border-radius: 24px;
        /* border: 2px solid #ff1744; */
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
    }
    
    .notifications-container {
        position: absolute;
        right: 0;
        width: 400px;
        height: 285px;
        background: #fff;
        z-index: 9;
        display: none;
        box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.2);
    }
    
    .notifications-container ul {
        list-style: none;
        padding: 0;
        width: 100%;
        margin: auto;
    }
    
    .notifications-container ul li {
        border-bottom: 1px solid #bebebe;
        padding: 10px 30px;
        text-align: center;
    }
    
    .notifications-container ul li:nth-last-of-type(1) {
        border: 0;
    }
    
    .notifications-container ul a {
        color: #404040;
        text-decoration: none;
    }
    
    .notifications-container ul a span {
        color: #ff1744;
    }
    /*scroll custom*/
    
    .notifications-container .mCSB_inside > .mCSB_container {
        margin-right: 15px;
    }
    
    .notifications-container .mCSB_scrollTools .mCSB_dragger {
        width: 65%;
        background-color: #bababa;
    }
    
    .notifications-container .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
        background-color: #bababa;
    }
    
    .notifications-container .mCSB_scrollTools .mCSB_draggerRail {
        background-color: #fff;
    }
    /*-------------------------*/
    
    .Headcontent {
        position: relative;
    }
    
    header .head-profile a.logout {
        vertical-align: middle;
        display: inline-block;
        font-size: 12px;
        color: #fff;
        text-align: right;
        margin-left: 5px;
        padding-left: 5px;
        color: #6e6e6e;
        font-family: "Montserrat",sans-serif;
        font-weight: 500;
        transition: all 0.2s ease-in;
        -webkit-transition: all 0.2s ease-in;
        -moz-transition: all 0.2s ease-in;
        -ms-transition: all 0.2s ease-in;
    }
    header .head-profile a.logout:hover {
        color: #DA1D45;
    }
    header .head-profile a.logout::before {
        content: "/";
        display: inline-block;
        vertical-align: middle;
        padding-right: 5px;
    }
    
    header .head-profile img {
        display: inline-block;
        vertical-align: middle;
        height: 24px;
    }
    /**
 * NAVIGATION
 */
    
    nav {
        font-size: 18px;
        background-color: #000;
        padding: 0;
        border-bottom: 1px solid #fff;
    }
    
    .y-nav {
        list-style: none;
        padding: 0;
        font-size: 0;
        margin-bottom: 0;
        padding: 0 20px;
    }
    
    .y-nav li {
        list-style: none;
        margin: 0;
        padding: 1.3em 0;
        font-size: 16px;
        display: inline-block;
        vertical-align: middle;
        margin: 0 1em;
        position: relative;
    }
    
    .y-nav li:first-child {
        margin-left: 0;
    }
    
    .y-nav li a {
        font-family: "Montserrat",sans-serif;
        font-weight: 400;
        font-size: 16px;
        color: #fff;
        transition: all 0.2s ease-in;
        -webkit-transition: all 0.2s ease-in;
        -moz-transition: all 0.2s ease-in;
        -ms-transition: all 0.2s ease-in;
        letter-spacing: 1px;
    }
    .y-nav li.current a {
        color: #fff;
    }

    .y-nav li:hover a {
        color: #68cdf3 !important;
    }
    
    .arrow-down {
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid #f0f0f0;
        margin-left: -5px;
        left: calc(50% - 0.5em);
        bottom: 0;
        position: absolute;
        display: none;
    }
    
    .filter-parent {
        padding: .7em 20px;
    }
    
    .filter-parent .filter-head {
        position: relative;
        cursor: pointer;
        margin: 0 auto;
        /* display: none; */
        padding: 0em 0;
        margin: 9.5px 20px;
    }
    .swal-button {
        background: #DA1D45 !important;
        outline: none;
    }
    .swal-content p {
        font-weight: 400;
        font-family: "Montserrat",sans-serif;
    }
    .swal-footer {
        margin-top: 0;
        padding: 13px 16px;
        padding-top: 0;
    }
    .y-nav li.current .arrow-down {
        display: inline-block;
    }
    
    .filter-parent .filter-head .title {
        color: #ff1744;
        font-weight: bold;
        font-size: 1em;
        display: inline-block;
        vertical-align: middle;
        padding-right: 10px;
        font-size: 17px;
    }
    
    .filter-parent .filter-head .icon,
    .filter-parent .filter-items .icon {
        display: inline-block;
        padding-left: 10px;
        vertical-align: middle;
        position: absolute;
        width: 12px;
        height: 14px;
        margin: auto;
        top: 0;
        bottom: 0;
        left: -20px;
        transform: rotate(90deg);
        line-height: 1.3em;
        font-size: 1em;
        color: #ff1744;
        padding: 0;
        font-size: 13px;
    }
    
    .filter-parent .filter-head .red-line {
        width: 100%;
        background-color: #ff1744;
        height: 1px;
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -1px;
        z-index: -1;
        display: none;
    }
    
    .filter-items {
        position: relative;
        /*display: none;*/
    }
    
    .filter-items ul {
        font-size: 0;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    .filter-items ul li {
        font-size: 13px;
        display: inline-block;
        vertical-align: top;
        /* background-color: #fff; */
        padding: 5px 5px 5px 0px;
        margin: 0.3em 5px;
        margin-left: 0;
        width: calc(20% - 5px);
        cursor: pointer;
        transition: all 0.2s ease-in;
        -webkit-transition: all 0.2s ease-in;
        -moz-transition: all 0.2s ease-in;
        -ms-transition: all 0.2s ease-in;
    }
    
    .filter-items button {
        border: none;
        background: none;
        color: #ff1744;
        position: absolute;
        top: 50%;
        right: 0;
        margin-top: -11px;
        padding-right: 0;
    }
    
    .filter-items ul li:hover {
        /* background-color: #ebebeb; */
    }
    
    .filter-items ul li.current {
        color: #ff1744;
    }
    
    .filter-items ul li a {
        color: #404040;
        font-size: 14px;
        font-weight: 400;
        font-family: "Montserrat",sans-serif;
    }
    
    .filter-items ul li.current a {
        color: #ff1744;
        font-weight: bold;
    }
    
    .filter-items ul li a:hover {}
    
    .grey-line-down {
        background: rgb(221,222,224);
        border-bottom: 1px solid #bebebe;
    }
    
    .third-and-ahead {
        background-color: rgb(221,222,224);
    }
    
    .white-background-files {
        background-color: #fff !important;
    }
    
    .white-background-files ul {
        margin: 0;
        padding: 0;
        padding: 0.5em 0;
        font-size: 0;
    }
    
    .white-background-files ul li {
        position: relative;
        margin: 0;
        padding: 0;
        list-style: none;
        display: inline-block;
        vertical-align: middle;
        font-size: 14px;
    }
    
    .white-background-files ul li a {
        color: #7f7f7f;
        padding: 1em;
        display: inline-flex;
        font-size: 14px;
        font-weight: 400;
        align-items: center;
        text-decoration: none !important;
    }
    
    .filter-parent a:hover {
        color: #DA1D45;
    }
    .white-background-files ul li a span {
        position: relative;
    }
    .white-background-files ul li a span:after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        bottom: -6px;
        width: 5px;
        height: 5px;
        border-radius: 100px;
        background: #DA1D45;
        opacity: 0;
        transition: opacity 0.25s ease-in;
        -webkit-transition: opacity 0.25s ease-in;
        -ms-transition: opacity 0.25s ease-in;
        -moz-transition: opacity 0.25s ease-in;
    }
    .white-background-files ul li:hover a span:after {
        opacity: 1;
    } 
    
    .white-background-files ul li a:hover,
    .white-background-files ul li.current a {
        color: #DA1D45;
        text-decoration: none;
    }
    
    .white-background-files ul li a i {
        margin-right: 0.7em;
        vertical-align: middle;
    }
    
    .white-background-files ul li a i.glyphicon {
        margin-left: 0.7em;
    }
    
    i.imagenes-icon,
    i.videos-icon,
    i.documentos-icon,
    i.impresos-icon,
    i.audio-icon {
        display: inline-block;
        vertical-align: middle;
        width: 23px;
        height: 20px;
        /*background-position: 0 0;*/
        background-position: 0 -19.4px;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .imagenes-icon {
        background-image: url(../img/image-icon.png);
    }
    
    .white-background-files ul li a:hover .imagenes-icon,
    .white-background-files ul li.current .imagenes-icon {
        background-position: 0 -19.4px;
    }
    
    .videos-icon {
        background-image: url(../img/video-icon.png);
    }
    
    .white-background-files ul li a:hover .videos-icon,
    .white-background-files ul li.current .videos-icon {
        background-position: 0 -19.4px;
    }
    
    .documentos-icon {
        background-image: url(../img/document-icon.png);
    }
    
    .white-background-files ul li a:hover .documentos-icon,
    .white-background-files ul li.current .documentos-icon {
        background-position: 0 -19.4px;
    }
    
    .impresos-icon {
        background-image: url(../img/impresos-icon.png);
    }
    
    .white-background-files ul li a:hover .impresos-icon,
    .white-background-files ul li.current .impresos-icon {
        background-position: 0 -19.4px;
    }
    
    .audio-icon {
        background-image: url(../img/audio-icon.png);
    }
    
    .white-background-files ul li a:hover .audio-icon,
    .white-background-files ul li.current .audio-icon {
        background-position: 0 -19.4px;
    }
    
    .white-background-2 {
        /* position: relative; */
    }
    
    .grid {}
    
    .grid .no-results {
        font-size: 1.5em;
        font-weight: 300;
        text-align: center;
        margin: 1em;
    }
    
    .grid .list {
        font-size: 0;
        margin-top: 20px;
        margin-left: -10px;
        margin-right: -10px;
    }
    
    .grid .list .item {
        width: calc(25% - 20px);
        display: inline-block;
        vertical-align: middle;
        font-size: 14px;
        height: 180px;
        position: relative;
        margin: 10px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        text-align: left;
        cursor: pointer;
        border-radius: 5px;
        box-shadow: 0px 0px 7px 1px rgba(0,0,0,0.1);
    }
    
    .grid .list .item .overlay {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        display: block;
        opacity: 0;
        -webkit-opacity: 0;
        -moz-opacity: 0;
        -ms-opacity: 0;
        z-index: 1;
        transition: opacity 0.25s ease-in;
        -webkit-transition: opacity 0.25s ease-in;
        -ms-transition: opacity 0.25s ease-in;
        -moz-transition: opacity 0.25s ease-in;
    }
    
    .grid .list .item.current .overlay {
        opacity: 1;
        -webkit-opacity: 1;
        -moz-opacity: 1;
        -ms-opacity: 1;
    }
    
    .grid .list .item .button-item {
        outline: none;
        border: none;
        background: 0 0;
        background-color: #03b6fb;
        color: #fff;
        display: inline-block;
        border-radius: 100%;
        line-height: 100%;
        padding: .5em;
        text-align: center;
        position: absolute;
        top: 3%;
        right: 2%;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .grid .list .item .button-item i {
        font-weight: 100;
        font-size: 13px;
    }
    .grid .list .item .button-item i.glyphicon-plus {
        top: inherit;
        font-weight: 100;
        font-size: 13px;
        line-height: 0;
        width: 12px;
    }
    .grid .list .item .caption {
        position: absolute;
        bottom: 0;
        background-color: rgba(255, 255, 255, 0.8);
        width: 100%;
        padding: 1em 0;
        font-family: 'Roboto';
        font-weight: bold;
    }
    
    .grid .list .item .caption .text {
        position: relative;
        padding-right: 43px;
        display: block;
        padding-left: 6px;
        line-height: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 400;
    }
    
    .grid .list .item .caption .download {
        text-align: center;
        text-align: center;
        background-color: #DA1D45;
        display: block;
        position: absolute;
        color: #fff;
        right: 0;
        top: 0;
        height: 100%;
    }
    
    .grid .list .item .caption .download i {
        font-size: 30px;
        width: 40px;
        height: 40px;
        line-height: 40px;
    }
    .go-up {
        outline: none;
    }
    .grid .list .item .play {
        outline: none;
        width: 50px;
        line-height: 100%;
        border-radius: 50px;
        background: none;
        background-color: #DA1D45;
        color: #fff;
        top: 50%;
        left: 50%;
        margin-top: -25px;
        margin-left: -25px;
        position: absolute;
        border: none;
        text-align: center;
        height: 50px;
        transition: all 0.4s ease-out;
    }
    
    .grid .list .item .play i {
        font-size: 25px;
    }
    /*.grid .list .item:hover .play{
    display: none;
}*/
    
    .grid .list .item.pdf {
        background-image: url(../img/pdf-icon.png);
        background-position: center center;
        background-repeat: no-repeat;
        background-color: #ff1744;
        background-size: 50px 54px;
    }
    
    .grid .list .item.audio {
        background-image: url(../img/nota-icon.png);
        background-position: center center;
        background-repeat: no-repeat;
        background-color: #ff1744;
        background-size: 50px 54px;
    }
    
    .grid .list .item .overlay {
        opacity: 1;
        -webkit-opacity: 1;
        -moz-opacity: 1;
        -ms-opacity: 1;
    }
    
    .super-container {
        color: #7f7f7f;
        font-size: 14px;
        position: absolute;
        width: 100%;
        background-color: #f4f4f4;
        left: 0;
        z-index: 10;
        margin-top: 20px;
        margin-bottom: 10px;
        visibility: hidden;
        box-shadow: 0px 0px 10px 4px rgba(0,0,0,0.1);
        /*transition: all 0.3s linear;
        -webkit-transition: all 0.3s linear;
        -moz-transition: all 0.3s linear;
        -ms-transition: all 0.3s linear;*/
    }
    
    .super-container.special-supercontainer {
        visibility: visible;
        position: relative;
        margin-top: 0;
    }
    
    .super-container.special-supercontainer .right-content {
        text-align: left !important;
    }
    
    .white-background-2 > .container > .col-xs-12 {
        position: initial;
    }
    
    .super-container .left-content {
        padding: 30px 0;
        box-sizing: border-box;
        padding-right: 0;
    }
    .super-container .right-content {
        padding: 30px 0;
        padding-bottom: 10px;
        box-sizing: border-box;
        padding-left: 0;
        margin-right: 30px;
    }
    .super-container .right-content p {
        color: #404040
    }
    
    .super-container .img-container {
        position: relative;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    }

    .super-container .img-container img {
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08), 0 6px 6px rgba(0, 0, 0, 0.08);
    }
    .super-container .img-container:hover {
        box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    }


    
    .super-container audio {
        width: 100%;
        max-width: 400px;
        display: block;
        margin-bottom: 1em;
    }
    
    .super-container .img-container iframe {
        width: 100%;
        height: 100%;
        min-height: 320px;
        border: none;
        box-shadow: none;
    }
    
    .icon_60 {
        width: auto;
        height: auto;
        border: none;
        background-color: #ED1744;
        color: #fff !important;
        outline: none;
        display: inline-flex;
        vertical-align: middle;
        text-align: center;
        align-items: center;
        justify-content: center;
        padding: .5em 1em;
        border-radius: 45px;
        text-transform: capitalize;
        text-decoration: none !important;
        font-size: 13px;
        opacity: 1;
        transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    }
    .icon_60:hover {
        opacity: .7;
    }
    button.icon_60 {
        background-color: #03b6fb;
    }
    .icon_60 img {
        width: 16px;
        display: inline-block;
        line-height: 0;
        margin-left: 10px;
    }
    
    .icon_60 i {
        font-size: 10px;
    }
    
    .super-container .zoom-button {
        position: absolute;
        top: 0;
        right: 0;
    }
    
    .super-container .close-icon {
        border: none;
        background: none;
        position: absolute;
        right: 10px;
        top: 10px;
        right: 10px;
        outline: none;
    }
    
    .super-container .close-icon img {
        width: 20px;
    }
    
    .super-container .img-container img {}
    .super-container .img-container video {
        width: 100%;
        height: 270px;
    }
    .grid .list {
        text-align: left;
    }
    
    .grid .fake-div {
        width: 100%;
        min-height: 0px;
        position: inherit;
        /*transition: all 0.3s linear;
        -webkit-transition: all 0.3s linear;
        -moz-transition: all 0.3s linear;
        -ms-transition: all 0.3s linear;*/
    }
    
    .super-container .close-icon.desktop {
        display: none;
    }
    
    .super-container .container:hover .close-icon.desktop {
        display: block;
    }
    
    .super-container .close-icon.mobile {
        display: none;
    }
    
    .selected-bar {
        color: #fff;
        margin-top: 2em;
        font-size: 14px;
    }
    
    .selected-bar .no-selected {
        display: none;
        align-items: center;
    }
    .close-x {
        cursor: pointer;
    }
    .selected-bar i {
        color: #DA1D45;
        vertical-align: top;
        margin-right: 8px;
    }
    
    .selected-bar i.num,
    .selected-bar i.mb {
        font-style: normal;
    }
    
    .selected-bar .selected {}
    
    .selected-bar .d-table {
        width: 100%;
        padding: 5px;
    }
    
    .selected-bar .files {
        display: inline-flex;
        flex: 1 1 0;
        vertical-align: middle;
        margin: 1em;
        color: #404040;
        align-items: center;
        text-decoration: none !important;
    }
    .selected-bar .files:hover {
        color: #DA1D45;
    }
    .selected-bar .cancel-button {
        background-color: #DA1D45;
        margin: 0.5em;
        float: right;
        border: 0;
        padding: 0.5em 3em;
        color: #fff;
        border-radius: 23px;
    }
    
    .modal-filtros {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 11;
    }
    
    .modal-filtros .background-modal {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 10;
    }
    
    .modal-filtros .content-modal {
        z-index: 11;
        position: relative;
        width: 100%;
        height: 100%;
    }
    
    .modal-filtros .background-int-modal {
        background-color: #f0f0f0;
        text-align: center;
    }
    
    .modal-filtros .buttons-down {
        /*position: absolute;
    top: 0;
    right: 0;
    text-align: right;
    width: 40px;*/
        text-align: left;
        position: relative;
    }
    
    .modal-filtros .buttons-down .icon_60 img {
        width: 26px;
    }
    
    .modal-filtros .buttons-down .icon_60 {
        line-height: 40px;
        margin-bottom: 5px;
    }
    
    .modal-email .d-table-row {
        text-align: center;
    }
    
    .modal-filtros .normal-modal {
        width: 400px;
        background-color: #fff;
        padding: 2em;
        max-width: 98%;
        text-align: center;
        margin: 1%;
        display: inline-block;
    }
    
    .modal-filtros .normal-modal img {}
    
    .modal-filtros .normal-modal p {
        font-size: 1.3em;
        font-weight: bold;
        line-height: 110%;
        margin: 1em 0;
    }
    
    .modal-filtros .normal-modal button {
        padding: 0.5em 2em;
        font-weight: bold;
        font-size: 1.3em;
    }
    .modal-image {
        position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 999999;
        display: none;
        align-items: center;
        justify-content: center;
    }
    .modal-image .cap-modal {
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
    }
    .modal-image .box-image {
        position: relative;
        padding: 1rem;
        background: white;
        max-width: 60%;
        width: 100%;
    }
    .modal-image .box-image img {
        width: 100%;
    }
    .modal-image .box-image .close-btn {
        right: 10px;
        top: 10px;
        position: absolute;
        opacity: 1!important;
        outline: none;
        background: transparent;
        border: 0;
        color: #DA1D45;
    } 
    .profile-section {
        text-align: center;
    }
    
    .profile-section .user-icon {
        margin: 1em auto;
    }
    
    .profile-section p {
        color: #ff1744;
        font-size: 1.2em;
        font-weight: 500;
    }
    
    .profile-section button {
        max-width: 200px;
        font-size: 1.2em;
    }
    /**
 * LOADER
 */
    
    .spinner {
        margin: 15px auto;
        width: 70px;
        text-align: center;
        position: relative;
    }
    
    .spinner > div {
        width: 14px;
        height: 14px;
        background-color: #ff1744;
        border-radius: 100%;
        display: inline-block;
        -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
        animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    }
    
    .spinner .bounce1 {
        -webkit-animation-delay: -0.32s;
        animation-delay: -0.32s;
    }
    
    .spinner .bounce2 {
        -webkit-animation-delay: -0.16s;
        animation-delay: -0.16s;
    }
    
    @-webkit-keyframes sk-bouncedelay {
        0%,
        80%,
        100% {
            -webkit-transform: scale(0)
        }
        40% {
            -webkit-transform: scale(1.0)
        }
    }
    
    @keyframes sk-bouncedelay {
        0%,
        80%,
        100% {
            -webkit-transform: scale(0);
            transform: scale(0);
        }
        40% {
            -webkit-transform: scale(1.0);
            transform: scale(1.0);
        }
    }
    
    .pagination {
        display: table;
        position: relative;
        left: 0;
        right: 0;
        padding-left: 0;
        margin: auto;
        padding-bottom: 30px;
        padding-top: 30px;
    }
    
    .pagination>li>a,
    .pagination>li>span {
        color: #DA1D45;
        font-size: 12px;
    }
    
    .pagination>.active>a,
    .pagination>.active>a:focus,
    .pagination>.active>a:hover,
    .pagination>.active>span,
    .pagination>.active>span:focus,
    .pagination>.active>span:hover {
        color: #fff;
        background-color: #DA1D45;
        border-color: #DA1D45;
    }
    
    .pagination>li>a:focus,
    .pagination>li>a:hover,
    .pagination>li>span:focus,
    .pagination>li>span:hover {
        color: #DA1D45;
    }

    /* ESTILOS NUEVO */

    .hamburger {
        padding: 15px 0;
        display: flex;
        cursor: pointer;
        transition-property: opacity, filter;
        transition-duration: 0.15s;
        transition-timing-function: linear;
        font: inherit;
        color: inherit;
        text-transform: none;
        background-color: transparent;
        border: 0;
        margin: 0;
        overflow: visible;
        outline: none;
        opacity: 1 !important;
    }

    .hamburger:hover {
        opacity: 0.7;
    }
    .hamburger:focus {
        outline: none !important;
    }

    .hamburger-box {
        width: 40px;
        height: 24px;
        display: inline-block;
        position: relative;
    }

    .hamburger-inner {
        display: block;
        top: 50%;
        margin-top: -2px;
    }

    .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
        width: 100%;
        height: 4px;
        background-color: #DA1D45;
        border-radius: 4px;
        position: absolute;
        transition-property: transform;
        transition-duration: 0.15s;
        transition-timing-function: ease;
    }

    .hamburger-inner::before, .hamburger-inner::after {
        content: "";
        display: block;
    }

    .hamburger-inner::before {
        top: -10px;
    }

    .hamburger-inner::after {
        bottom: -10px;
    }


    /*
       * Spin
       */
    .hamburger--spin .hamburger-inner {
        transition-duration: 0.22s;
        transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    .hamburger--spin .hamburger-inner::before {
        transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
    }

    .hamburger--spin .hamburger-inner::after {
        transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    .hamburger--spin.is-active .hamburger-inner {
        transform: rotate(225deg);
        transition-delay: 0.12s;
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    .hamburger--spin.is-active .hamburger-inner::before {
        top: 0;
        opacity: 0;
        transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
    }

    .hamburger--spin.is-active .hamburger-inner::after {
        bottom: 0;
        transform: rotate(-90deg);
        transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    .header {
        position: relative;
        top: 0;
        width: 100%;
        height: 98px;
        font-size: 0;
        z-index: 6;
        box-shadow: 0px 0px 25px 3px rgba(0,0,0,0.1);
    }
    .header .fixed-box {
        position: relative;
        height: 98px;
        width: 100%;
        -webkit-transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1) 0s;
        -moz-transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1) 0s;
        -o-transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1) 0s;
        transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1) 0s;
    }
    .header__logo-box {
        width: 12%;
        height: 100%;
        display: inline-flex;
        vertical-align: top;
        justify-content: center;
        align-items: center;
        background: #fff;
    }
    .header__logo-box img {
        width: 100%;
        margin: auto;
        display: block;
    }
    .header__nav-box {
        width: 88%;
        height: 100%;
        display: inline-flex;
        vertical-align: top;
        flex-direction: column;
        background: #f0f8ff;
    }
    .header__nav-top {
        width: 100%;
        height: 33%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 6vw;
        background: #000;
        overflow: hidden;
        -webkit-transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1) 0s;
        -moz-transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1) 0s;
        -o-transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1) 0s;
        transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1) 0s;
    }
    .header__nav-top ul, .header__nav-bottom ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .header__nav-top ul {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .header__nav-top ul li {
        position: relative;
        justify-content: center;
        align-items: center;
    }
    .header__nav-top ul li .center-div {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .header__nav-top ul li, .header__nav-bottom ul li {
        display: inline-flex;
        font-size: 14px;
        font-family: "Montserrat",sans-serif;
        font-weight: 400;
        margin-right: 43px;
        margin-left: 0;
    }
    .header__nav-top ul li:nth-of-type(1):after {
        content: '/';
        position: absolute;
        right: -13px;
        top: 0;
        bottom: 0;
        margin: auto;
        color: #fff;
        font-family: "Montserrat",sans-serif;
        font-weight: 400;
        font-size: 14px;
        display: flex;
        align-items: center;
    }
    .header__nav-top .logout {
        color: #007ec4;
    }
    .header__nav-top ul li {
        margin-right: 20px;
    }
    .header__nav-top ul li a, .header__nav-bottom ul li a {
        color: #6e6e6e;
    }
    .header__nav-top ul li a {
        color: #fff;
    }
    .header__nav-bottom {
        width: 100%;
        height: 67%;
        display: flex;
        align-items: center;
        background: #ffffff;
        -webkit-transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1) 0s;
        -moz-transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1) 0s;
        -o-transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1) 0s;
        transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1) 0s;
    }
    .header__nav-bottom .white-background-files {
        width: 92%;
        background-color: silver;
        height: 100%;
        align-items: center;
        justify-content: center;
        display: flex;
        text-align: center;
        border-right: 2px solid #c8c8c8;
    }
    .header__nav-bottom .white-background-files .container {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .header__nav-bottom .white-background-files .col-main-nav {
        display: flex;
        justify-content: center;
    }
    .header__notification {
        text-align: right;
        display: flex;
        justify-content: flex-end;
        padding-right: 20px;
    }
    .header__search {
        width: 8%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .header__search img {
        width: 30px;
    }
    .header .Headcontent ul li {
        font-size: 13px;
    }
    .header--mobile {
        height: 50px;
        display: none;
    }
    
    .header--mobile .fixed-box {
        height: 50px;
    }

    .header--mobile__nav-bottom {
        height: 100%;
        background: #fff;
        justify-content: flex-end;
    }
    .header--mobile__nav-bottom ul {
        margin-right: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .header--mobile-list {
        position: fixed;
        width: 100%;
        height: 0%;
        background: #fff;
        z-index: 4;
        overflow: hidden;
        -webkit-transition: all 500ms cubic-bezier(0.39, 0.575, 0.565, 1) 0s;
        -moz-transition: all 500ms cubic-bezier(0.39, 0.575, 0.565, 1) 0s;
        -o-transition: all 500ms cubic-bezier(0.39, 0.575, 0.565, 1) 0s;
        transition: all 500ms cubic-bezier(0.39, 0.575, 0.565, 1) 0s;
    }
    .header--mobile-list__box-list {
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        justify-content: center;
    }
    .header--mobile-list.open-nav {
        height: 100%;
    }
    .header--mobile-list ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .header--mobile-list ul li {
        font-size: 20px;
        margin-bottom: 1.8rem;
    }
    .header__notification {
        justify-content: center;
        padding-right: 0;
    }

    .modal-search{
        text-align: center;
        padding: 0!important;
        z-index: 999999999999;
    }
    .modal-search .close{
        right: 40px;
        top: 20px;
        position: absolute;
        opacity: 1!important;
        outline: none;
    }
    .modal-search:before{
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        margin-right: -4px;
    }
    .modal-search .modal-dialog{
        display: inline-block;
        text-align: left;
        vertical-align: middle;
        max-width: 860px;
        width: 100%;
    }
    .modal-search .modal-general {
        width: 128vw;
        max-width: 100vw;
        min-height: 100vh;
        margin-top: 0;
    }
    .modal-search .modal-content{
        background: transparent;
        color: #fff;
        box-shadow: none;
        border: 0;
    }
    .modal-search .modal-content h4{
        position: relative;
        font-family: 'Montserrat', sans-serif;
        font-size: 38px;
        display: inline-block;
        margin-bottom: 0;
        color: #fff;
    }
    .modal-search .modal-content h4:after {
        position: absolute;
        content: '';
        width: 30%;
        height: 4px;
        background: #fff;
        bottom: -8px;
        left: 0;
    }
    .modal-search .modal-header{
        border-bottom: 0;
        padding: 0;
    }
    .modal-search .modal-footer button{
        position: relative;
        background: #efb144;
        width: 142px;
        height: 50px;
        border: 0;
        color: #fff;
        font-family: 'Montserrat', sans-serif;
        font-size: 21px;
        border-radius: 5px;
        text-align: center;
    }
    .modal-search #custom-search-input{
        width: 100%;
        border: 0;
        color: #fff;
        font-size: 18px;
    }

    .modal-search #custom-search-input input{
        border: 0;
        box-shadow: none;
        background: #fff;
        font-family: 'Montserrat', sans-serif;
        font-size: 20px;
        color: #082b63;
        border-radius: 0;
        width: 84%;
        height: 59px;
    }
    .modal-search .modal-footer{
        border-top:0;
    }

    .modal-search #custom-search-input button {
        background: none;
        box-shadow: none;
        border: 0;
        background:#DA1D45;
        padding: 7px 35px 7px 35px;
        text-align:center;
        outline: none;
    }

    .modal-search #custom-search-input button .material-icons {
        font-size: 44px;
    }

    .modal-search #custom-search-input .glyphicon-search{
        font-size: 23px;
    }
    .modal-search #custom-search-input .input-group {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .main-box-screen {
        height: 100vh;
        top: 0;
        position: fixed;
        width: 100%;
        padding-top: 128px;
        font-size: 0;
    }
    .left-box {
        background: #fff;
        width: 20%;
        height: 100%;
        display: inline-flex;
        flex-direction: column;
    }
    .left-box .container {
        width: 100%;
    }
    .right-box {
        width: 80%;
        height: 100%;
        display: inline-flex;
        flex-direction: column;
    }
    .right-box .white-background-2 {
        width: 100%;
    }
    .right-box .white-background-2 .container-fluid {
        background: rgba(0,0,0,0.2);
    }
    .right-box .selected-bar {
        position: relative;
        width: 100%;
        margin-top: 0;
        z-index: 1;
    }
    .right-box .selected-bar .glyphicon {
        top: inherit;
    }
    .right-box .grey-line-down {
        position: relative;
        width: 100%;
        z-index: 1;
        min-height: 45px;
    }
    .right-box .grey-line-down .container {
        width: 100%;
    }
    .right-box .filter-items ul li {
        width: inherit;
        margin: 6px 20px;
        margin-left: 0;
    }
    .right-box .pagination {
        padding-bottom: 25px;
        padding-top: 20px;
    }
    .scroll-box {
        position: relative;
        width: 100%;
        height: 100%;
    }
    .scroll-box .grid .list {
        margin-top: 0;
    }
    .scroll-box .grid .list .item {
        margin-top: 0;
        margin-bottom: 20px;
    }
    .scroll-box .background-container {
        height: auto;
        width: auto;
    }
    .scroll-box .grid {
        max-width: 90%;
        margin: auto;
        margin-top: 30px;
    }
    .left-box .y-nav li {
        margin: 0;
        display: block;
        padding: 0;
        margin-bottom: 15px;
    }
    .left-box .y-nav li.first-li {
        border-bottom: 1px solid #c8c8c8;
        padding-bottom: 0.5em;
        margin-bottom: 35px;
        margin-top: 25px;
    }
    .left-box .y-nav li a {
        color: #6b6b6b;
        text-transform: uppercase;
        font-size: 14px;
        letter-spacing: 3px;
    }
    .left-box .y-nav li span {
        font-weight: 600;
        color: #5a5a5a;
    }
    .left-box nav {
        background-color: #fff;
    }
    .left-box .y-nav li:hover a {
        color: #DA1D45 !important;
    } 
    .left-box .y-nav li.current .arrow-down {
        display: none;
    }
    .left-box .y-nav li.current a {
        color: #DA1D45 !important;
        font-weight: 600;
    }
    /* ==========================================================================
   Helper classes
   ========================================================================== */
    /*
 * Hide visually and from screen readers
 */
    
    .hidden {
        display: none !important;
    }
    /*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */
    
    .visuallyhidden {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }
    /*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */
    
    .visuallyhidden.focusable:active,
    .visuallyhidden.focusable:focus {
        clip: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        position: static;
        width: auto;
    }
    /*
 * Hide visually and from screen readers, but maintain layout
 */
    
    .invisible {
        visibility: hidden;
    }
    /*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
    
    .clearfix:before,
    .clearfix:after {
        content: " ";
        /* 1 */
        display: table;
        /* 2 */
    }
    
    .clearfix:after {
        clear: both;
    }
    /* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
    /* Large Devices, Wide Screens */
    @media (max-width: 1500px) {
        .header__logo-box {
            width: 16%;
        }
        .header__nav-box {
            width: 84%;
        }
    }
    @media (max-width: 1300px) {
        .super-container .container {
            width: 100%;
        }
    }
    @media only screen and (max-width: 1200px) {
        .login-square {}
    }
    /* Medium Devices, Desktops */
    @media (max-width: 1024px) {
        .box-back-login .backgraund-box {
            width: 72%;
        }
        .header__logo-box img {
            max-width: 77%;
        }
        .header__nav-top ul li, .header__nav-bottom ul li {
            margin-right: 0;
        }
        .scroll-box .grid .list .item {
            /*width: calc(33% - 20px);*/
        }
        .left-box .y-nav {
            padding: 0 5px;
        }
        .left-box .y-nav li {
            font-size: 14px;
        }
        .left-box .y-nav li a {
            font-size: 13px;
        }
        .right-box .filter-parent {
            padding: .7em 0;
        }
        .right-box .filter-items ul li {
            margin: 0;
            padding: 15px 8px 13px 4px;
        }
        .right-box .filter-items ul li a {
            font-size: 13px;
        }
        .scroll-box .grid .list .item {
            background-size: contain;
            background-color: #fff;
        }
        .left-box {
            width: 100%;
            height: 7%;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
        .left-box .y-nav li {
            display: inline-block;
        }
        .right-box {
            width: 100%;
            height: 93%;
        }
        .right-box .selected-bar {
            width: 100%;
            left: 0;
        }
        .right-box .grey-line-down {
            width: 100%;
        }
        .left-box .y-nav li.first-li {
            padding-bottom: 0;
            margin-bottom: 0;
            margin-top: 0;
            display: none;
        }
        .left-box .y-nav li {
            margin: 0 10px;
            margin-bottom: 0;
        }
        .header__nav-top ul li {
            margin-right: 20px;
        }
    }
    @media only screen and (max-width: 992px) {}
    /* Small Devices, Tablets */

    @media (max-width: 960px) {
        .box-back-login .backgraund-box {
            width: 67%;
        }
        .main-box-screen {
            padding-top: 51px;
        }
        .header--desk-header {
            display: none;
        }
        .left-box {
            height: 6%;
        }
        .right-box {
            height: 94%;
        }
        .modal-search .modal-dialog {
            max-width: 91%;
            width: 91%;
        }
        .header--mobile {
            display: flex;
        }
        .notifications-container {
            top: 51px;
        }
        .Headcontent {
            position: initial;
        }
    }
    
    @media only screen and (max-width: 768px) {
        .filter-items ul li {
            width: calc(25% - 5px);
        }
        .white-background-files ul li a {}
        .grid .list .item {
            width: calc(30.6% - 1px);
        }
        .super-container {
            padding-bottom: 20px;
            padding-top: 15px;
        }
        .login-square .login-form form {
            width: 100%;
        }
        header .h-right-content {
            text-align: center;
            margin: 0.5em 0;
        }
        .super-container .close-icon.mobile {
            display: block;
            position: relative;
            top: 0;
            right: 0;
            margin-bottom: 1em;
            float: right;
        }
        .super-container .close-icon.desktop {
            display: none !important;
        }
        .selected-bar {
            margin-top: 0;
        }
        .super-container {
            top: -30px !important;
        }
        .grid .fake-div {
            position: relative;
        }
    }
    
    @media only screen and (max-width: 680px) {
        .y-nav {
            text-align: center;
        }
        .y-nav li {
            padding: 1em 0;
            margin: 0 .7em;
        }
        .grid .list {
            margin: 0;
        }
        .grid .list .item {
            margin-left: 0;
            margin-right: 0;
        }
        .iconsM {
            display: block !important;
        }
        .white-background-files ul li {
            width: 20%;
        }

        .modal-filtros{
            position: absolute;
            top: 0;
            margin: 0;
            overflow: hidden;
            overflow-y: auto;
        }
        .box-back-login {
            align-items: flex-end;
        }
        .box-back-login .backgraund-box {
            width: 100%;
            height: 75%;
        }
        .login-square {
            left: inherit;
            margin: auto;
            max-width: 90%;
            padding: 30px 23px;
        }
        .login-square .login-form {
            padding: 0;
        }
        .pagination>li>a, .pagination>li>span {
            padding: 6px 8px;
        }
        .pagination>li {
            font-size: 12px;
        }
        .left-box .y-nav li {
            margin: 0 6px;
            margin-bottom: 0;
        }
        .left-box .y-nav li a {
            font-size: 10px;
        }
        .selected-bar .files {
            margin: 3.5px 6px;
        }
        .selected-bar .files {
            color: #fff;
        }
        .right-box .filter-parent .filter-head .icon,
        .right-box .filter-parent .filter-items .icon {
            height: 14px;
            top: 0;
            bottom: 0;
            margin: auto;
        }
        .right-box .filter-parent .filter-head .title {
            padding: 0px 8px 0px 4px;
            font-size: 13px;
        }
        .third-and-ahead {
            background-color: rgba(221,222,224,1);
        }
        .right-box .filter-items ul li {
            padding: 4px 8px 4px 4px;
        } 
        .filter-items ul {
            padding: 10px 0;
        }
        .nav-mini .col-xs-12 {
            padding: 0;
        }
        .super-container .col-xs-12 {
            padding: 0;
        }
        .super-container .close-icon.mobile {
            padding: 0;
        }
        .super-container .right-content {
            padding-right: 0;
        }
        .modal-image .box-image .close-btn {
            right: 2px;
            top: 5px;
            width: 30px; 
        }
    }
    
    @media only screen and (max-width: 580px) {
        .notifications-container {
            position: absolute;
            right: 0;
            left: 0;
            width: 90%;
            height: 285px;
            background: #fff;
            z-index: 9;
            display: none;
            margin: auto;
        }
    }
    /* Extra Small Devices, Phones */
    
    @media only screen and (max-width: 480px) {
        
        .y-nav li:first-child {
            margin-left: 1em;
        }
        .grid .list .item {
            width: 100%;
            margin-bottom: 10px;
        }
        .y-nav li.current .arrow-down {
            display: none;
        }
        .y-nav li.current a {
            color: #ff1744;
            text-decoration: underline;
        }
        .login-square h3 {
            font-size: 1.4em;
            padding: 0.5em;
        }
        .y-nav li a {
            font-size: 13px;
        }
        .page-item.prev,
        .page-item.next  {
            display: none;
        }
        .filter-parent .filter-head {
            font-size: 13px;
            margin: 12.5px 20px;
        }
        .filter-items ul li {
            width: calc(50% - 5px);
            font-size: 13px;
        }
        .filter-parent {
            margin: 0;
            padding: 1em 0;
        }
        .y-nav {
            padding: 0;
        }
        nav .container .col-xs-12 {
            padding: 0;
        }
        .selected .cancel-button {
            width: 80%;
            display: block;
            margin: 15px auto;
            float: none;
        }
        .modal-filtros .normal-modal {
            width: 90%;
            font-size: 13px;
        }
        .modal-filtros .normal-modal p {
            font-weight: 300;
        }
        .white-background-files {
            padding-top: 1em;
            padding-bottom: 1em;
        }
        .white-background-files ul li {
            text-align: center;
            width: 20%;
            background-color: #f2f2f2;
            margin: 2px 0;
        }
        .white-background-files ul li a i {
            display: none;
        }
    }
    /* Custom, iPhone Retina */
    @media only screen and (max-width:380px) {
        .notifications-container {
            width: 100%;
        }
        .notifications-container ul li {
            padding: 10px 15px;
        }
        .notifications-container ul a {
            font-size: 13px;
        }
    }
    
    @media only screen and (max-width: 320px) {}
    
    @media only screen and (min-width: 35em) {
        /* Style adjustments for viewports that meet the condition */
    }
    
    @media print,
    (-webkit-min-device-pixel-ratio: 1.25),
    (min-resolution: 1.25dppx),
    (min-resolution: 120dpi) {
        /* Style adjustments for high resolution devices */
    }
    /* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */
    
    @media print {
        *,
        *:before,
        *:after,
        *:first-letter,
        *:first-line {
            background: transparent !important;
            color: #000 !important;
            /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
            box-shadow: none !important;
            text-shadow: none !important;
        }
        a,
        a:visited {
            text-decoration: underline;
        }
        a[href]:after {
            content: " (" attr(href) ")";
        }
        abbr[title]:after {
            content: " (" attr(title) ")";
        }
        /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
        a[href^="#"]:after,
        a[href^="javascript:"]:after {
            content: "";
        }
        pre,
        blockquote {
            border: 1px solid #999;
            page-break-inside: avoid;
        }
        /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */
        thead {
            display: table-header-group;
        }
        tr,
        img {
            page-break-inside: avoid;
        }
        img {
            max-width: 100% !important;
        }
        p,
        h2,
        h3 {
            orphans: 3;
            widows: 3;
        }
        h2,
        h3 {
            page-break-after: avoid;
        }
    }