*, ::before, ::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-sizing: border-box;
  box-sizing: border-box;
  -webkit-user-drag: none;
  margin: 0;
  padding: 0; }


main {
    margin: 0;
    font-family: 'Roboto';
    font-weight: normal;
    font-style: normal;
    font-size: 62.5%;
    color: #4a4e51;
    background: #ffffff;
    min-height: 320px;
    min-width: 320px;
}
    main ol, main ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    main ol {
        list-style-position: inside;
    }
    main a, main button {
        -webkit-transition: all 0.3s ease-out; /* Chrome y Safari */
        -o-transition: all 0.3s ease-out; /* Opera */
        -moz-transition: all 0.3s ease-out; /* Mozilla Firefox */
        -ms-transition: all 0.3s ease-out; /* Internet Explorer */
        transition: all 0.3s ease-out; /* W3C */
    }
    main a {
        color: #fff;
    }
        main a, main a:hover, main a:focus, main a:active, main a:visited {
            text-decoration: none;
            color: #fff;
        }
            main a:hover {
                opacity: 0.8;
                color: #FFF;
            }
    main .btn:hover, main .btn:focus, main .btn.focus {
        color: #FFF;
        text-decoration: none;
        border-radius: 0;
    }

    main .btn-default:active:hover,
    main .btn-default.active:hover,
    main .open > main .dropdown-toggle.btn-default:hover,
    main .btn-default:active:focus,
    main .btn-default.active:focus, .open >
    main .dropdown-toggle.btn-default:focus,
    main .btn-default:active.focus,
    main .btn-default.active.focus,
    main .open > main .dropdown-toggle.btn-default.focus {
        color: #fff;
        background-color: transparent !important;
        border: none !important;
        border-color: transparent !important;
    }


    main strong {
        font-weight: bold;
    }
    main img {
        background: #FFF url("../images/loader.gif") no-repeat center center;
        background: none;
    }

    main .no-text {
        text-indent: 100%;
        overflow: hidden;
        white-space: nowrap;
        display: block;
    }



/* ------ TXT ------ */
    main p.txt-s {
        font-size: calc(100vw * 12 / 1920) !important;
    }
    main p.txt-m {
        font-size: calc(100vw * 18 / 1920) !important;
    }
    main p {
        font-size: calc(100vw * 18 / 1920) !important;
    }
    main h5 {
        font-size: calc(100vw * 20 / 1920) !important;
    }
    main h4 {
        font-size: calc(100vw * 24 / 1920) !important;
    }
    main h3 {
        font-size: calc(100vw * 32 / 1920) !important;
    }
    main h2 {
        font-size: calc(100vw * 36 / 1920) !important;
    }
    main h1 {
        font-size: calc(100vw * 70 / 1920) !important;
    }
    main p.txt-s {
        font-size: calc(100vw * 12 / 1920) !important;
    }
    main p.txt-m {
        font-size: calc(100vw * 16 / 1920) !important;
    }
    main p {
        font-size: calc(100vw * 18 / 1920) !important;
    }
    main h5 {
        font-size: calc(100vw * 20 / 1920) !important;
    }
    main h4 {
        font-size: calc(100vw * 24 / 1920) !important;
    }
    main h3 {
        font-size: calc(100vw * 32 / 1920) !important;
    }
    main h3 {
        font-size: calc(100vw * 36 / 1920) !important;
    }
    main h1 {
        font-size: calc(100vw * 52 / 1920) !important;
    }


    main h1, main h2, main h3, main h4, main h5, main h6, main p {
        font-weight: normal;
        text-shadow: none;
        margin: 0;
        padding: 0;
        line-height: 1;
    }


/* ------------------------------------------------------------ */

/* ------ WEB ------*/

    main .btn.btn-descargar:hover,
    main .btn.btn-descargar:focus {
        background: rgba(0, 0, 0, 0) url("../images/bk-octagonal.svg") no-repeat center bottom / 100% 100% !important;
    }

    main .btn-descargar2 {
        width: calc(100vw * 640 / 1920);
        height: calc(100vw * 76 / 1920);
        display: block;
        text-align: center;
        -webkit-clip-path: polygon(3% 0%, 97% 0%, 100% 20%, 100% 80%, 97% 100%, 3% 100%, 0% 80%, 0% 20%);
        clip-path: polygon(3% 0%, 97% 0%, 100% 20%, 100% 80%, 97% 100%, 3% 100%, 0% 80%, 0% 20%);
        background: #a1093d;
        padding-top: calc(100vw * 20 / 1920);
        margin: calc(100vw * 80 / 1920) auto 0 auto;
    }
        main .btn-descargar2 h3 {
            font-weight: bold;
            display: inline-block;
        }
        main .btn-descargar2 i {
            width: calc(100vw * 30 / 1920);
            height: calc(100vw * 30 / 1920);
            margin-left: calc(100vw * 20 / 1920);
            display: inline-block;
            background: rgba(0, 0, 0, 0) url("../images/arrow-down.svg") no-repeat center center / 100% 100% !important;
        }


/* ------------------------------------------------------------ */
/* ------ WEB ------*/

/* -- SLIDER -- */
    #slider {
        position: relative;
    }
        #slider .triangle {
            position: absolute;
            left: 0;
            bottom: -4px;
            z-index: 2;
            width: calc(100vw * 680 / 1920);
            height: calc(100vw * 680 / 1920);
        }
        #slider .item .caption {
            position: absolute;
            left: 0;
            width: 100%;
            bottom: calc(100vw * 180 / 1920);
            color: #FFF;
            text-align: center;
            z-index: 3;
        }
            #slider .item .caption h1 {
                font-weight: bold;
                line-height: 1;
            }

    main .home-slider {
        width: 100%;
        display: table;
        overflow: hidden;
        position: relative;
    }
        main .home-slider .title {
            padding: calc(100vw * 30 / 1920) calc(100vw * 60 / 1920);
            position: absolute;
            left: 50%;
            top: calc(50% - 50px);
            font-weight: 300;
            transform: translate(-50%,-50%);
            border: 1px solid #FFF;
            color: #FFF;
        }
/* Nav */
        main .home-slider .owl-nav {
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            pointer-events: none;
            padding-left: calc(100vw * 125 / 1920);
            padding-right: calc(100vw * 125 / 1920);
            z-index: 999;
        }
            main .home-slider .owl-nav > div {
                width: calc(100vw * 60 / 1920);
                height: calc(100vw * 114 / 1920);
                pointer-events: auto;
                text-indent: 99999em;
            }
        main .home-slider .owl-prev {
            float: left;
            background: rgba(0, 0, 0, 0) url("../images/arrow-prev.svg") no-repeat center bottom / 100% 100% !important;
        }
        main .home-slider .owl-next {
            float: right;
            background: rgba(0, 0, 0, 0) url("../images/arrow-next.svg") no-repeat center bottom / 100% 100% !important;
        }

/* -- REDAREA -- */
    #redarea {
        padding-top: calc(100vw * 90 / 1920);
        padding-bottom: calc(100vw * 110 / 1920);
        background: #a1093d;
        position: relative;
    }
        #redarea:after {
            content: "";
            width: 0;
            height: 0;
            position: absolute;
            left: 50%;
            bottom: calc(100vw * -33 / 1920);
            transform: translate(-50%,0);
            z-index: 9;
            border-style: solid;
            border-width: calc(100vw * 35 / 1920) calc(100vw * 35 / 1920) 0 calc(100vw * 35 / 1920);
            border-color: #a1093d transparent transparent transparent;
        }
        #redarea .logo-classic {
            float: none;
            clear: both;
            width: calc(100vw * 256 / 1920);
            height: calc(100vw * 230 / 1920);
            display: block;
            float: right !important;
            margin-bottom: calc(100vw * 30 / 1920);
            background: rgba(0, 0, 0, 0) url("../images/logo-classic_line-lineas.svg") no-repeat center bottom / 100% auto;
        }
        #redarea .right-area {
            padding-left: calc(100vw * 100 / 1920);
            padding-right: calc(100vw * 40 / 1920);
            height: calc(100vw * 230 / 1920);
            display: table;
        }
            #redarea .right-area h4 {
                color: #FFF;
                font-weight: 300;
                line-height: 1.4;
                vertical-align: middle;
                display: table-cell;
            }

/* -- VENTAJAS -- */
    #ventajas {
        padding-top: calc(100vw * 90 / 1920);
        padding-bottom: calc(100vw * 180 / 1920);
        text-align: center;
        background-image: url(../images/ventajas-bk-2.png), url(../images/ventajas-bk.jpg);
        background-position: right bottom, center top;
        background-repeat: no-repeat, no-repeat;
        background-size: auto auto, 100% auto;
        /*background: url(../images/ventajas-bk.jpg) no-repeat center top / 100% auto, url(../images/ventajas-bk-2.png) no-repeat right bottom / 100% auto;*/
    }
/* boton */
    main .btn-ventajas {
        height: calc(100vw *60 / 1920);
        padding-left: calc(100vw * 60 / 1920);
        padding-right: calc(100vw * 60 / 1920);
        position: relative;
        background: #a1093d;
        display: table;
        margin: 0 auto calc(100vw * 140 / 1920) auto;
        padding-top: calc(100vw * 12 / 1920);
        color: #FFF;
    }
        main .btn-ventajas:before {
            content: "";
            width: 0;
            height: 0;
            position: absolute;
            left: calc(100vw * -44 / 1920);
            top: 0;
            border-top: 0px solid transparent;
            border-right: calc(100vw * 45 / 1920) solid #a1093d;
            border-bottom: calc(100vw * 60 / 1920) solid transparent;
        }
        main .btn-ventajas:after {
            content: "";
            width: 0;
            height: 0;
            position: absolute;
            right: calc(100vw * -44 / 1920);
            top: 0;
            border-top: calc(100vw * 60 / 1920) solid transparent;
            border-left: calc(100vw * 45 / 1920) solid #a1093d;
            border-bottom: 0px solid transparent;
        }
        main .btn-ventajas h3 {
            font-weight: bold;
        }
/* items */
    #ventajas .items-ventajas {
        display: table;
        width: 100%;
        margin-bottom: calc(100vw * 140 / 1920);
    }
        #ventajas .items-ventajas h5,
        #ventajas .items-ventajas h2 {
            color: #a1093d;
            font-weight: bold;
        }
        #ventajas .items-ventajas h5 {
            margin-bottom: calc(100vw * 80 / 1920);
        }
        #ventajas .items-ventajas h2 {
            margin-top: calc(100vw * 80 / 1920);
            margin-bottom: calc(100vw * 10 / 1920);
        }
        #ventajas .items-ventajas p {
            font-weight: 300;
            line-height: 1.4;
        }
    #ventajas h4 {
        font-weight: 300;
        line-height: 1.4;
        color: #a6a8aa;
    }
        #ventajas h4 b a {
            color: #a1093d;
        }



/* hexagon */
    #ventajas .items-ventajas .hexagon-content {
        position: relative;
    }
    #ventajas .items-ventajas .icon {
        width: calc(100vw * 100 / 1920);
        height: calc(100vw * 100 / 1920);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        z-index: 9;
    }
    #ventajas .items-ventajas .item-1 .icon {
        background: #ffffff url("../images/ventajas-icon-01.svg") no-repeat center center / 100% auto;
    }
    #ventajas .items-ventajas .item-2 .icon {
        background: #ffffff url("../images/ventajas-icon-02.svg") no-repeat center center / 100% auto;
    }
    #ventajas .items-ventajas .item-3 .icon {
        background: #ffffff url("../images/ventajas-icon-03.svg") no-repeat center center / 100% auto;
    }
    #ventajas .items-ventajas .item-4 .icon {
        background: #ffffff url("../images/ventajas-icon-04.svg") no-repeat center center / 100% auto;
    }
    #ventajas .items-ventajas .hexagon {
        position: relative;
        width: calc(100vw * 150 / 1920);
        height: calc(100vw * 86.60 / 1920);
        background-color: #ffffff;
        margin: calc(100vw * 43.30 / 1920) auto;
        border-left: solid calc(100vw * 5 / 1920) #d0d1d3;
        border-right: solid calc(100vw * 5 / 1920) #d0d1d3;
        -ms-transform: rotate(90deg); /* IE 9 */
        -webkit-transform: rotate(90deg); /* Safari */
        transform: rotate(90deg);
    }
        #ventajas .items-ventajas .hexagon:before,
        #ventajas .items-ventajas .hexagon:after {
            content: "";
            position: absolute;
            z-index: 1;
            width: calc(100vw * 106.07 / 1920);
            height: calc(100vw * 106.07 / 1920);
            -webkit-transform: scaleY(0.5774) rotate(-45deg);
            -ms-transform: scaleY(0.5774) rotate(-45deg);
            transform: scaleY(0.5774) rotate(-45deg);
            background-color: inherit;
            left: calc(100vw * 16.9670 / 1920);
        }
        #ventajas .items-ventajas .hexagon:before {
            top: calc(100vw * -53.0330 / 1920);
            border-top: solid calc(100vw * 7.0711 / 1920) #d0d1d3;
            border-right: solid calc(100vw * 7.0711 / 1920) #d0d1d3;
        }
        #ventajas .items-ventajas .hexagon:after {
            bottom: calc(100vw * -53.0330 / 1920);
            border-bottom: solid calc(100vw * 7.0711 / 1920) #d0d1d3;
            border-left: solid calc(100vw * 7.0711 / 1920) #d0d1d3;
        }

    #ventajas .items-ventajas .hexagon-content {
        -webkit-transition: all 1s linear; /* Chrome y Safari */
        -o-transition: all 1s linear; /* Opera */
        -moz-transition: all 1s linear; /* Mozilla Firefox */
        -ms-transition: all 1s linear; /* Internet Explorer */
        transition: all 1s linear; /* W3C */
    }
        #ventajas .items-ventajas .hexagon-content:hover .hexagon {
            border-right-color: #a1093d;
            border-left-color: #a1093d;
        }
            #ventajas .items-ventajas .hexagon-content:hover .hexagon:before {
                border-top-color: #a1093d;
                border-right-color: #a1093d;
            }
            #ventajas .items-ventajas .hexagon-content:hover .hexagon:after {
                border-bottom-color: #a1093d;
                border-left-color: #a1093d;
            }
        #ventajas .items-ventajas .hexagon-content .hexagon,
        #ventajas .items-ventajas .hexagon-content .hexagon:before,
        #ventajas .items-ventajas .hexagon-content .hexagon:after,
        #ventajas .items-ventajas li .hexagon-content .icon {
            -webkit-transition: all 1s linear; /* Chrome y Safari */
            -o-transition: all 1s linear; /* Opera */
            -moz-transition: all 1s linear; /* Mozilla Firefox */
            -ms-transition: all 1s linear; /* Internet Explorer */
            transition: all 1s linear; /* W3C */
        }
    #ventajas .items-ventajas .item-1 .hexagon-content:hover .icon {
        background: #ffffff url("../images/ventajas-icon-01-hover.svg") no-repeat center center / 100% auto;
    }
    #ventajas .items-ventajas .item-2 .hexagon-content:hover .icon {
        background: #ffffff url("../images/ventajas-icon-02-hover.svg") no-repeat center center / 100% auto;
    }
    #ventajas .items-ventajas .item-3 .hexagon-content:hover .icon {
        background: #ffffff url("../images/ventajas-icon-03-hover.svg") no-repeat center center / 100% auto;
    }
    #ventajas .items-ventajas .item-4 .hexagon-content:hover .icon {
        background: #ffffff url("../images/ventajas-icon-04-hover.svg") no-repeat center center / 100% auto;
    }