// SCROLLBARS ===================================================================================== ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background-color: #e6e6e6; } ::-webkit-scrollbar-thumb { background-color: @azul; } ::-moz-scrollbar { width: 6px; height: 6px; } ::-moz-scrollbar-track { background-color-color: #e6e6e6; } ::-moz-scrollbar-thumb { background-color: @azul; } // SELECCIÓN DE TEXTO ============================================================================= ::-moz-selection { color: @blanco; background: @azul; } ::selection { color: @blanco; background: @azul; } // EMBED CONTAINER ================================================================================ .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; video, iframe, object, embed { position: absolute; top: 0; left: 0; width: 100% @i; height: 100% @i; } } // FANCYPANEL ===================================================================================== .fancypanel { display: none; .container { max-width: 100%; padding-top: 30px; padding-bottom: 30px; h1, h2, h3, h4, h5, h6 { color: @negro; } } } // MAPA MULTIMARCADORES =========================================================================== .map { height: calc(~'100vh - 550px'); min-height: 400px; position: relative; #map { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; left: 0; .gm-style { button { min-width: initial; img { margin: 0px; } } } .gm-style-cc { display: none; } } } // FORMULARIOS ==================================================================================== /* form, .form { color: @negro; line-height: 1; * { &:hover, &:focus, &:active { outline: none; } } label { font-family: inherit; font-size: inherit; font-weight: normal; color: inherit; line-height: 1; display: inline-block; sup { color: @gris; } &.condiciones { font-size: inherit; float: left; padding-left: 5px; } } p.obligatorio { font-size: inherit; color: @gris; padding-left: 21px; sup { font-size: 100%; top: -4px; } } input { text-align: left; padding: 10px 15px; margin-bottom: 10px; display: block; width: 100%; border: none; border: solid 1px #7b7b7b; background-color: @transparente; position: relative; .transition(@ef-25); } input[type="file"] { font-family: inherit; font-size: inherit; padding: 3px 3px 0px @i; &:hover { cursor: pointer @i; } } textarea { font-family: inherit; font-size: inherit; color: inherit; line-height: 1.2; display: block; width: 100%; min-height: 80px; padding: 10px; border: none; background-color: @blanco; border: solid 1px #cccccc; overflow: auto; } select { font-weight: 500; letter-spacing: 0.3rem; text-align-last: center; width: 100%; max-width: 700px; padding: 0px 45px; cursor: pointer; border: none; height: 60px; background-color: #dddddd; &.place_holder { color: #aaaaaa; } option:disabled { background-color: #dedede; } } .btn-file { font-size: inherit; color: #ccc; position: relative; overflow: hidden; .radius(0px); min-width: 260px; border: solid 1px #cccccc; cursor: default; &:hover { background-color: initial; } input[type=file] { position: absolute @i; top: 0 @i; right: 0 @i; left: 0 @i; min-height: 100% @i; text-align: right @i; filter: alpha(opacity=0) @i; opacity: 0 @i; outline: none @i; background: white @i; cursor: default @i; display: block @i; } } .btn-group { width: 100%; margin: 25px 0px 35px; .btn { color: @gris; line-height: 30px; text-align: left; width: 100%; padding-left: 10px; padding-right: 30px; margin: 0px; .radius(3px); position: relative; background-color: @blanco; &::after { content: '\f0d7'; font-family: 'FontAwesome'; font-size: 1rem; position: absolute; right: 15px; top: 0px; } &:hover { color: @blanco; background-color: #555555; } &:active { top: 0px; } } .dropdown-menu { margin: 0px; padding: 0px; min-width: 160px; width: 100%; .radius(0px); border-color: #adadad; & > li { border-bottom: solid 1px #adadad; & > a { font-size: 1.8rem; line-height: 26px; padding: 3px 12px; } } } } .checkbox { label { padding-left: 25px; } input[type="checkbox"] { position: absolute; left: 0px; margin: 0px; } } button { display: block; margin: 0 auto; margin-top: 30px; min-width: 260px; padding: 10px 20px; background: transparent; border: solid 1px @gris; .transition(@ef-25); } input[type="radio"], input[type="checkbox"] { width: 16px; height: 16px; margin: 0px; float: left; cursor: pointer; &::after { background-image: none; } } input:focus, textarea:focus, select:focus, input[type="checkbox"]:focus, input[type="radio"]:focus, input[type="file"]:focus { border-color: @azul; } &.buscar { display: flex; justify-content: stretch; width: 267px; height: 45px; border: solid 1px #7b7b7b; border-radius: 23px; input { border: none; margin-bottom: 0px; width: calc(~'100% - 45px'); } button { color: inherit; width: 45px; min-width: 45px; margin: 0px; padding: 0px; border: none; cursor: pointer; } } } */ ::-webkit-input-placeholder { color: @azul @i; } :-moz-placeholder { color: @azul @i; } ::-moz-placeholder { color: @azul @i; } :-ms-input-placeholder { color: @azul @i; } ::-ms-input-placeholder { color: @azul @i; } :placeholder-shown { color: @azul @i; } .botonazul{ font-size: 1.6rem; margin-top:20px; line-height: 1.2; font-weight: 700; color: #ffffff; display: inline-flex; justify-content: center; align-items: center; flex: 0 0 auto; width: fit-content; min-width: 200px; min-height: 45px; padding: 0px 20px; background-color: #103a7d; position: relative; border: none; } form.materialize { label { &.active { font-size: 2rem @i; } } strong { font-weight: 700; } button { color: @blanco @i; font-weight: 700; background-color: @azul; padding: 0px 40px; margin-top: 20px; } .input-field { margin-top: 0px; input { font-size: 4.6rem; color: @gris; } label { font-size: 2rem; font-weight: 600; color: @azul; margin: 0px; top: 0px; left: 50%; .transform(translate(-50%, -50%)); &.textarea { left: 15px; z-index: -1; .transform(translate(0%, 235px)); &:not(.label-icon).active { font-size: 1.8rem @i; .transform(translate(0px, 30px) @i); } } sup { font-family: serif; font-size: 100%; color: @azul; top: -3px; } } textarea.materialize-textarea { height: 200px; padding-top: 35px; padding-bottom: 15px; } label:not(.label-icon).active { .transform(translate(-50%, -100%) @i); } } .obligatorios { font-size: 1.4rem; color: @azul; font-weight: 600; font-style: italic; margin-top: 15px; sup { font-size: 2rem; font-style: normal; top: 0em; } } .terminos { height: 26px; margin-top: 30px; margin-bottom: 30px; } .leyenda { font-size: 1.1rem; margin-bottom: 40px; p { margin-bottom: 5px; } } /* Text inputs */ input:not([type]), input[type=text], input[type=password], input[type=email], input[type=url], input[type=time], input[type=date], input[type=datetime], input[type=datetime-local], input[type=tel], input[type=number], input[type=search], textarea.materialize-textarea { font-weight: 600; text-align: left; outline: none; width: calc(~'100% - 30px'); height: 50px; margin: 20px 0 0 0; box-shadow: none; box-sizing: content-box; font-size: 1.8rem; line-height: 1.2; padding: 0px 15px; background-color: transparent; .radius(0px); .transition(@ef-25); } /* Select */ select { background-color: @blanco; } .select-wrapper { input.select-dropdown { font-size: 4.6rem; line-height: 1.2; height: 100px; } .dropdown-content { > li { line-height: 1.2; height: 100px; span { font-size: 4.6rem; line-height: 1.2; color: @gris; text-align: center; } a, span { padding: 0 16px; line-height: 100px; } &:hover { background-color: @azul; .transition(@ef-15); span { color: @blanco; } } } } span.caret { color: @gris; z-index: 1; line-height: 5px; right: 30px; top: 5px; width: 0px; border: none; z-index: 1001; &:before { font-family: @fa; content:"\f107"; color: @gris; font-size: 3rem; } } } } // PADDINGS & MARGINS ============================================================================= // PADDINGS eje Y .py-0px { padding-top: 0px @i; padding-bottom: 0px @i; } .pt-0px { padding-top: 0px @i; } .pb-0px { padding-bottom: 0px @i; } .py-5px { padding-top: 5px @i; padding-bottom: 5px @i; } .pt-5px { padding-top: 5px @i; } .pb-5px { padding-bottom: 5px @i; } .py-10px { padding-top: 10px @i; padding-bottom: 10px @i; } .pt-10px { padding-top: 10px @i; } .pb-10px { padding-bottom: 10px @i; } .py-15px { padding-top: 15px @i; padding-bottom: 15px @i; } .pt-15px { padding-top: 15px @i; } .pb-15px { padding-bottom: 15px @i; } .py-20px { padding-top: 20px @i; padding-bottom: 20px @i; } .pt-20px { padding-top: 20px @i; } .pb-20px { padding-bottom: 20px @i; } .py-25px { padding-top: 25px @i; padding-bottom: 25px @i; } .pt-25px { padding-top: 25px @i; } .pb-25px { padding-bottom: 25px @i; } .py-30px { padding-top: 30px @i; padding-bottom: 30px @i; } .pt-30px { padding-top: 30px @i; } .pb-30px { padding-bottom: 30px @i; } .py-50px { padding-top: 50px @i; padding-bottom: 50px @i; } .pt-50px { padding-top: 50px @i; } .pb-50px { padding-bottom: 50px @i; } .py-75px { padding-top: 75px @i; padding-bottom: 75px @i; } .pt-75px { padding-top: 75px @i; } .pb-75px { padding-bottom: 75px @i; } .py-100px { padding-top: 100px @i; padding-bottom: 100px @i; } .pt-100px { padding-top: 100px @i; } .pb-100px { padding-bottom: 100px @i; } .py-150px { padding-top: 150px @i; padding-bottom: 150px @i; } .pt-150px { padding-top: 150px @i; } .pb-150px { padding-bottom: 150px @i; } // PADDINGS eje X .px-0px { padding-left: 0px @i; padding-right: 0px @i; } .pl-0px { padding-left: 0px @i; } .pr-0px { padding-right: 0px @i; } .px-5px { padding-left: 5px @i; padding-right: 5px @i; } .pl-5px { padding-left: 5px @i; } .pr-5px { padding-right: 5px @i; } .px-10px { padding-left: 10px @i; padding-right: 10px @i; } .pl-10px { padding-left: 10px @i; } .pr-10px { padding-right: 10px @i; } .px-15px { padding-left: 15px @i; padding-right: 15px @i; } .pl-15px { padding-left: 15px @i; } .pr-15px { padding-right: 15px @i; } .px-20px { padding-left: 20px @i; padding-right: 20px @i; } .pl-20px { padding-left: 20px @i; } .pr-20px { padding-right: 20px @i; } .px-25px { padding-left: 25px @i; padding-right: 25px @i; } .pl-25px { padding-left: 25px @i; } .pr-25px { padding-right: 25px @i; } .px-30px { padding-left: 30px @i; padding-right: 30px @i; } .pl-30px { padding-left: 30px @i; } .pr-30px { padding-right: 30px @i; } .px-50px { padding-left: 50px @i; padding-right: 50px @i; } .pl-50px { padding-left: 50px @i; } .pr-50px { padding-right: 50px @i; } .px-75px { padding-left: 75px @i; padding-right: 75px @i; } .pl-75px { padding-left: 75px @i; } .pr-75px { padding-right: 75px @i; } .px-100px { padding-left: 100px @i; padding-right: 100px @i; } .pl-100px { padding-left: 100px @i; } .pr-100px { padding-right: 100px @i; } .px-150px { padding-left: 150px @i; padding-right: 150px @i; } .pl-150px { padding-left: 150px @i; } .pr-150px { padding-right: 150px @i; } // MARGINS eje Y .my-0px { margin-top: 0px @i; margin-bottom: 0px @i; } .mt-0px { margin-top: 0px @i; } .mb-0px { margin-bottom: 0px @i; } .my-5px { margin-top: 5px @i; margin-bottom: 5px @i; } .mt-5px { margin-top: 5px @i; } .mb-5px { margin-bottom: 5px @i; } .my-10px { margin-top: 10px @i; margin-bottom: 10px @i; } .mt-10px { margin-top: 10px @i; } .mb-10px { margin-bottom: 10px @i; } .my-15px { margin-top: 15px @i; margin-bottom: 15px @i; } .mt-15px { margin-top: 15px @i; } .mb-15px { margin-bottom: 15px @i; } .my-20px { margin-top: 20px @i; margin-bottom: 20px @i; } .mt-20px { margin-top: 20px @i; } .mb-20px { margin-bottom: 20px @i; } .my-25px { margin-top: 25px @i; margin-bottom: 25px @i; } .mt-25px { margin-top: 25px @i; } .mb-25px { margin-bottom: 25px @i; } .my-30px { margin-top: 30px @i; margin-bottom: 30px @i; } .mt-30px { margin-top: 30px @i; } .mb-30px { margin-bottom: 30px @i; } .my-50px { margin-top: 50px @i; margin-bottom: 50px @i; } .mt-50px { margin-top: 50px @i; } .mb-50px { margin-bottom: 50px @i; } .my-75px { margin-top: 75px @i; margin-bottom: 75px @i; } .mt-75px { margin-top: 75px @i; } .mb-75px { margin-bottom: 75px @i; } .my-100px { margin-top: 100px @i; margin-bottom: 100px @i; } .mt-100px { margin-top: 100px @i; } .mb-100px { margin-bottom: 100px @i; } .my-150px { margin-top: 150px @i; margin-bottom: 150px @i; } .mt-150px { margin-top: 150px @i; } .mb-150px { margin-bottom: 150px @i; } // MARGINS eje X .mx-0px { margin-left: 0px @i; margin-right: 0px @i; } .ml-0px { margin-left: 0px @i; } .mr-0px { margin-right: 0px @i; } .mx-5px { margin-left: 5px @i; margin-right: 5px @i; } .ml-5px { margin-left: 5px @i; } .mr-5px { margin-right: 5px @i; } .mx-10px { margin-left: 10px @i; margin-right: 10px @i; } .ml-10px { margin-left: 10px @i; } .mr-10px { margin-right: 10px @i; } .mx-15px { margin-left: 15px @i; margin-right: 15px @i; } .ml-15px { margin-left: 15px @i; } .mr-15px { margin-right: 15px @i; } .mx-20px { margin-left: 20px @i; margin-right: 20px @i; } .ml-20px { margin-left: 20px @i; } .mr-20px { margin-right: 20px @i; } .mx-25px { margin-left: 25px @i; margin-right: 25px @i; } .ml-25px { margin-left: 25px @i; } .mr-25px { margin-right: 25px @i; } .mx-30px { margin-left: 30px @i; margin-right: 30px @i; } .ml-30px { margin-left: 30px @i; } .mr-30px { margin-right: 30px @i; } .mx-50px { margin-left: 50px @i; margin-right: 50px @i; } .ml-50px { margin-left: 50px @i; } .mr-50px { margin-right: 50px @i; } .mx-75px { margin-left: 75px @i; margin-right: 75px @i; } .ml-75px { margin-left: 75px @i; } .mr-75px { margin-right: 75px @i; } .mx-100px { margin-left: 100px @i; margin-right: 100px @i; } .ml-100px { margin-left: 100px @i; } .mr-100px { margin-right: 100px @i; } .mx-150px { margin-left: 150px @i; margin-right: 150px @i; } .ml-150px { margin-left: 150px @i; } .mr-150px { margin-right: 150px @i; } // PADDINGS & MARGINS MEDIA QUERIES =============================================================== @media only screen and (max-width: 1600px) { // PADDINGS eje Y .xl-py-0px { padding-top: 0px @i; padding-bottom: 0px @i; } .xl-pt-0px { padding-top: 0px @i; } .xl-pb-0px { padding-bottom: 0px @i; } .xl-py-5px { padding-top: 5px @i; padding-bottom: 5px @i; } .xl-pt-5px { padding-top: 5px @i; } .xl-pb-5px { padding-bottom: 5px @i; } .xl-py-10px { padding-top: 10px @i; padding-bottom: 10px @i; } .xl-pt-10px { padding-top: 10px @i; } .xl-pb-10px { padding-bottom: 10px @i; } .xl-py-15px { padding-top: 15px @i; padding-bottom: 15px @i; } .xl-pt-15px { padding-top: 15px @i; } .xl-pb-15px { padding-bottom: 15px @i; } .xl-py-20px { padding-top: 20px @i; padding-bottom: 20px @i; } .xl-pt-20px { padding-top: 20px @i; } .xl-pb-20px { padding-bottom: 20px @i; } .xl-py-25px { padding-top: 25px @i; padding-bottom: 25px @i; } .xl-pt-25px { padding-top: 25px @i; } .xl-pb-25px { padding-bottom: 25px @i; } .xl-py-30px { padding-top: 30px @i; padding-bottom: 30px @i; } .xl-pt-30px { padding-top: 30px @i; } .xl-pb-30px { padding-bottom: 30px @i; } .xl-py-50px { padding-top: 50px @i; padding-bottom: 50px @i; } .xl-pt-50px { padding-top: 50px @i; } .xl-pb-50px { padding-bottom: 50px @i; } .xl-py-75px { padding-top: 75px @i; padding-bottom: 75px @i; } .xl-pt-75px { padding-top: 75px @i; } .xl-pb-75px { padding-bottom: 75px @i; } .xl-py-100px { padding-top: 100px @i; padding-bottom: 100px @i; } .xl-pt-100px { padding-top: 100px @i; } .xl-pb-100px { padding-bottom: 100px @i; } .xl-py-150px { padding-top: 150px @i; padding-bottom: 150px @i; } .xl-pt-150px { padding-top: 150px @i; } .xl-pb-150px { padding-bottom: 150px @i; } // PADDINGS eje X .xl-px-0px { padding-left: 0px @i; padding-right: 0px @i; } .xl-pl-0px { padding-left: 0px @i; } .xl-pr-0px { padding-right: 0px @i; } .xl-px-5px { padding-left: 5px @i; padding-right: 5px @i; } .xl-pl-5px { padding-left: 5px @i; } .xl-pr-5px { padding-right: 5px @i; } .xl-px-10px { padding-left: 10px @i; padding-right: 10px @i; } .xl-pl-10px { padding-left: 10px @i; } .xl-pr-10px { padding-right: 10px @i; } .xl-px-15px { padding-left: 15px @i; padding-right: 15px @i; } .xl-pl-15px { padding-left: 15px @i; } .xl-pr-15px { padding-right: 15px @i; } .xl-px-20px { padding-left: 20px @i; padding-right: 20px @i; } .xl-pl-20px { padding-left: 20px @i; } .xl-pr-20px { padding-right: 20px @i; } .xl-px-25px { padding-left: 25px @i; padding-right: 25px @i; } .xl-pl-25px { padding-left: 25px @i; } .xl-pr-25px { padding-right: 25px @i; } .xl-px-30px { padding-left: 30px @i; padding-right: 30px @i; } .xl-pl-30px { padding-left: 30px @i; } .xl-pr-30px { padding-right: 30px @i; } .xl-px-50px { padding-left: 50px @i; padding-right: 50px @i; } .xl-pl-50px { padding-left: 50px @i; } .xl-pr-50px { padding-right: 50px @i; } .xl-px-75px { padding-left: 75px @i; padding-right: 75px @i; } .xl-pl-75px { padding-left: 75px @i; } .xl-pr-75px { padding-right: 75px @i; } .xl-px-100px { padding-left: 100px @i; padding-right: 100px @i; } .xl-pl-100px { padding-left: 100px @i; } .xl-pr-100px { padding-right: 100px @i; } .xl-px-150px { padding-left: 150px @i; padding-right: 150px @i; } .xl-pl-150px { padding-left: 150px @i; } .xl-pr-150px { padding-right: 150px @i; } // MARGINS eje Y .xl-my-0px { margin-top: 0px @i; margin-bottom: 0px @i; } .xl-mt-0px { margin-top: 0px @i; } .xl-mb-0px { margin-bottom: 0px @i; } .xl-my-5px { margin-top: 5px @i; margin-bottom: 5px @i; } .xl-mt-5px { margin-top: 5px @i; } .xl-mb-5px { margin-bottom: 5px @i; } .xl-my-10px { margin-top: 10px @i; margin-bottom: 10px @i; } .xl-mt-10px { margin-top: 10px @i; } .xl-mb-10px { margin-bottom: 10px @i; } .xl-my-15px { margin-top: 15px @i; margin-bottom: 15px @i; } .xl-mt-15px { margin-top: 15px @i; } .xl-mb-15px { margin-bottom: 15px @i; } .xl-my-20px { margin-top: 20px @i; margin-bottom: 20px @i; } .xl-mt-20px { margin-top: 20px @i; } .xl-mb-20px { margin-bottom: 20px @i; } .xl-my-25px { margin-top: 25px @i; margin-bottom: 25px @i; } .xl-mt-25px { margin-top: 25px @i; } .xl-mb-25px { margin-bottom: 25px @i; } .xl-my-30px { margin-top: 30px @i; margin-bottom: 30px @i; } .xl-mt-30px { margin-top: 30px @i; } .xl-mb-30px { margin-bottom: 30px @i; } .xl-my-50px { margin-top: 50px @i; margin-bottom: 50px @i; } .xl-mt-50px { margin-top: 50px @i; } .xl-mb-50px { margin-bottom: 50px @i; } .xl-my-75px { margin-top: 75px @i; margin-bottom: 75px @i; } .xl-mt-75px { margin-top: 75px @i; } .xl-mb-75px { margin-bottom: 75px @i; } .xl-my-100px { margin-top: 100px @i; margin-bottom: 100px @i; } .xl-mt-100px { margin-top: 100px @i; } .xl-mb-100px { margin-bottom: 100px @i; } .xl-my-150px { margin-top: 150px @i; margin-bottom: 150px @i; } .xl-mt-150px { margin-top: 150px @i; } .xl-mb-150px { margin-bottom: 150px @i; } // MARGINS eje X .xl-mx-0px { margin-left: 0px @i; margin-right: 0px @i; } .xl-ml-0px { margin-left: 0px @i; } .xl-mr-0px { margin-right: 0px @i; } .xl-mx-5px { margin-left: 5px @i; margin-right: 5px @i; } .xl-ml-5px { margin-left: 5px @i; } .xl-mr-5px { margin-right: 5px @i; } .xl-mx-10px { margin-left: 10px @i; margin-right: 10px @i; } .xl-ml-10px { margin-left: 10px @i; } .xl-mr-10px { margin-right: 10px @i; } .xl-mx-15px { margin-left: 15px @i; margin-right: 15px @i; } .xl-ml-15px { margin-left: 15px @i; } .xl-mr-15px { margin-right: 15px @i; } .xl-mx-20px { margin-left: 20px @i; margin-right: 20px @i; } .xl-ml-20px { margin-left: 20px @i; } .xl-mr-20px { margin-right: 20px @i; } .xl-mx-25px { margin-left: 25px @i; margin-right: 25px @i; } .xl-ml-25px { margin-left: 25px @i; } .xl-mr-25px { margin-right: 25px @i; } .xl-mx-30px { margin-left: 30px @i; margin-right: 30px @i; } .xl-ml-30px { margin-left: 30px @i; } .xl-mr-30px { margin-right: 30px @i; } .xl-mx-50px { margin-left: 50px @i; margin-right: 50px @i; } .xl-ml-50px { margin-left: 50px @i; } .xl-mr-50px { margin-right: 50px @i; } .xl-mx-75px { margin-left: 75px @i; margin-right: 75px @i; } .xl-ml-75px { margin-left: 75px @i; } .xl-mr-75px { margin-right: 75px @i; } .xl-mx-100px { margin-left: 100px @i; margin-right: 100px @i; } .xl-ml-100px { margin-left: 100px @i; } .xl-mr-100px { margin-right: 100px @i; } .xl-mx-150px { margin-left: 150px @i; margin-right: 150px @i; } .xl-ml-150px { margin-left: 150px @i; } .xl-mr-150px { margin-right: 150px @i; } } @media only screen and (max-width: 1199px) { // PADDINGS eje Y .lg-py-0px { padding-top: 0px @i; padding-bottom: 0px @i; } .lg-pt-0px { padding-top: 0px @i; } .lg-pb-0px { padding-bottom: 0px @i; } .lg-py-5px { padding-top: 5px @i; padding-bottom: 5px @i; } .lg-pt-5px { padding-top: 5px @i; } .lg-pb-5px { padding-bottom: 5px @i; } .lg-py-10px { padding-top: 10px @i; padding-bottom: 10px @i; } .lg-pt-10px { padding-top: 10px @i; } .lg-pb-10px { padding-bottom: 10px @i; } .lg-py-15px { padding-top: 15px @i; padding-bottom: 15px @i; } .lg-pt-15px { padding-top: 15px @i; } .lg-pb-15px { padding-bottom: 15px @i; } .lg-py-20px { padding-top: 20px @i; padding-bottom: 20px @i; } .lg-pt-20px { padding-top: 20px @i; } .lg-pb-20px { padding-bottom: 20px @i; } .lg-py-25px { padding-top: 25px @i; padding-bottom: 25px @i; } .lg-pt-25px { padding-top: 25px @i; } .lg-pb-25px { padding-bottom: 25px @i; } .lg-py-30px { padding-top: 30px @i; padding-bottom: 30px @i; } .lg-pt-30px { padding-top: 30px @i; } .lg-pb-30px { padding-bottom: 30px @i; } .lg-py-50px { padding-top: 50px @i; padding-bottom: 50px @i; } .lg-pt-50px { padding-top: 50px @i; } .lg-pb-50px { padding-bottom: 50px @i; } .lg-py-75px { padding-top: 75px @i; padding-bottom: 75px @i; } .lg-pt-75px { padding-top: 75px @i; } .lg-pb-75px { padding-bottom: 75px @i; } .lg-py-100px { padding-top: 100px @i; padding-bottom: 100px @i; } .lg-pt-100px { padding-top: 100px @i; } .lg-pb-100px { padding-bottom: 100px @i; } .lg-py-150px { padding-top: 150px @i; padding-bottom: 150px @i; } .lg-pt-150px { padding-top: 150px @i; } .lg-pb-150px { padding-bottom: 150px @i; } // PADDINGS eje X .lg-px-0px { padding-left: 0px @i; padding-right: 0px @i; } .lg-pl-0px { padding-left: 0px @i; } .lg-pr-0px { padding-right: 0px @i; } .lg-px-5px { padding-left: 5px @i; padding-right: 5px @i; } .lg-pl-5px { padding-left: 5px @i; } .lg-pr-5px { padding-right: 5px @i; } .lg-px-10px { padding-left: 10px @i; padding-right: 10px @i; } .lg-pl-10px { padding-left: 10px @i; } .lg-pr-10px { padding-right: 10px @i; } .lg-px-15px { padding-left: 15px @i; padding-right: 15px @i; } .lg-pl-15px { padding-left: 15px @i; } .lg-pr-15px { padding-right: 15px @i; } .lg-px-20px { padding-left: 20px @i; padding-right: 20px @i; } .lg-pl-20px { padding-left: 20px @i; } .lg-pr-20px { padding-right: 20px @i; } .lg-px-25px { padding-left: 25px @i; padding-right: 25px @i; } .lg-pl-25px { padding-left: 25px @i; } .lg-pr-25px { padding-right: 25px @i; } .lg-px-30px { padding-left: 30px @i; padding-right: 30px @i; } .lg-pl-30px { padding-left: 30px @i; } .lg-pr-30px { padding-right: 30px @i; } .lg-px-50px { padding-left: 50px @i; padding-right: 50px @i; } .lg-pl-50px { padding-left: 50px @i; } .lg-pr-50px { padding-right: 50px @i; } .lg-px-75px { padding-left: 75px @i; padding-right: 75px @i; } .lg-pl-75px { padding-left: 75px @i; } .lg-pr-75px { padding-right: 75px @i; } .lg-px-100px { padding-left: 100px @i; padding-right: 100px @i; } .lg-pl-100px { padding-left: 100px @i; } .lg-pr-100px { padding-right: 100px @i; } .lg-px-150px { padding-left: 150px @i; padding-right: 150px @i; } .lg-pl-150px { padding-left: 150px @i; } .lg-pr-150px { padding-right: 150px @i; } // MARGINS eje Y .lg-my-0px { margin-top: 0px @i; margin-bottom: 0px @i; } .lg-mt-0px { margin-top: 0px @i; } .lg-mb-0px { margin-bottom: 0px @i; } .lg-my-5px { margin-top: 5px @i; margin-bottom: 5px @i; } .lg-mt-5px { margin-top: 5px @i; } .lg-mb-5px { margin-bottom: 5px @i; } .lg-my-10px { margin-top: 10px @i; margin-bottom: 10px @i; } .lg-mt-10px { margin-top: 10px @i; } .lg-mb-10px { margin-bottom: 10px @i; } .lg-my-15px { margin-top: 15px @i; margin-bottom: 15px @i; } .lg-mt-15px { margin-top: 15px @i; } .lg-mb-15px { margin-bottom: 15px @i; } .lg-my-20px { margin-top: 20px @i; margin-bottom: 20px @i; } .lg-mt-20px { margin-top: 20px @i; } .lg-mb-20px { margin-bottom: 20px @i; } .lg-my-25px { margin-top: 25px @i; margin-bottom: 25px @i; } .lg-mt-25px { margin-top: 25px @i; } .lg-mb-25px { margin-bottom: 25px @i; } .lg-my-30px { margin-top: 30px @i; margin-bottom: 30px @i; } .lg-mt-30px { margin-top: 30px @i; } .lg-mb-30px { margin-bottom: 30px @i; } .lg-my-50px { margin-top: 50px @i; margin-bottom: 50px @i; } .lg-mt-50px { margin-top: 50px @i; } .lg-mb-50px { margin-bottom: 50px @i; } .lg-my-75px { margin-top: 75px @i; margin-bottom: 75px @i; } .lg-mt-75px { margin-top: 75px @i; } .lg-mb-75px { margin-bottom: 75px @i; } .lg-my-100px { margin-top: 100px @i; margin-bottom: 100px @i; } .lg-mt-100px { margin-top: 100px @i; } .lg-mb-100px { margin-bottom: 100px @i; } .lg-my-150px { margin-top: 150px @i; margin-bottom: 150px @i; } .lg-mt-150px { margin-top: 150px @i; } .lg-mb-150px { margin-bottom: 150px @i; } // MARGINS eje X .lg-mx-0px { margin-left: 0px @i; margin-right: 0px @i; } .lg-ml-0px { margin-left: 0px @i; } .lg-mr-0px { margin-right: 0px @i; } .lg-mx-5px { margin-left: 5px @i; margin-right: 5px @i; } .lg-ml-5px { margin-left: 5px @i; } .lg-mr-5px { margin-right: 5px @i; } .lg-mx-10px { margin-left: 10px @i; margin-right: 10px @i; } .lg-ml-10px { margin-left: 10px @i; } .lg-mr-10px { margin-right: 10px @i; } .lg-mx-15px { margin-left: 15px @i; margin-right: 15px @i; } .lg-ml-15px { margin-left: 15px @i; } .lg-mr-15px { margin-right: 15px @i; } .lg-mx-20px { margin-left: 20px @i; margin-right: 20px @i; } .lg-ml-20px { margin-left: 20px @i; } .lg-mr-20px { margin-right: 20px @i; } .lg-mx-25px { margin-left: 25px @i; margin-right: 25px @i; } .lg-ml-25px { margin-left: 25px @i; } .lg-mr-25px { margin-right: 25px @i; } .lg-mx-30px { margin-left: 30px @i; margin-right: 30px @i; } .lg-ml-30px { margin-left: 30px @i; } .lg-mr-30px { margin-right: 30px @i; } .lg-mx-50px { margin-left: 50px @i; margin-right: 50px @i; } .lg-ml-50px { margin-left: 50px @i; } .lg-mr-50px { margin-right: 50px @i; } .lg-mx-75px { margin-left: 75px @i; margin-right: 75px @i; } .lg-ml-75px { margin-left: 75px @i; } .lg-mr-75px { margin-right: 75px @i; } .lg-mx-100px { margin-left: 100px @i; margin-right: 100px @i; } .lg-ml-100px { margin-left: 100px @i; } .lg-mr-100px { margin-right: 100px @i; } .lg-mx-150px { margin-left: 150px @i; margin-right: 150px @i; } .lg-ml-150px { margin-left: 150px @i; } .lg-mr-150px { margin-right: 150px @i; } } @media only screen and (max-width: 991px) { // PADDINGS eje Y .md-py-0px { padding-top: 0px @i; padding-bottom: 0px @i; } .md-pt-0px { padding-top: 0px @i; } .md-pb-0px { padding-bottom: 0px @i; } .md-py-5px { padding-top: 5px @i; padding-bottom: 5px @i; } .md-pt-5px { padding-top: 5px @i; } .md-pb-5px { padding-bottom: 5px @i; } .md-py-10px { padding-top: 10px @i; padding-bottom: 10px @i; } .md-pt-10px { padding-top: 10px @i; } .md-pb-10px { padding-bottom: 10px @i; } .md-py-15px { padding-top: 15px @i; padding-bottom: 15px @i; } .md-pt-15px { padding-top: 15px @i; } .md-pb-15px { padding-bottom: 15px @i; } .md-py-20px { padding-top: 20px @i; padding-bottom: 20px @i; } .md-pt-20px { padding-top: 20px @i; } .md-pb-20px { padding-bottom: 20px @i; } .md-py-25px { padding-top: 25px @i; padding-bottom: 25px @i; } .md-pt-25px { padding-top: 25px @i; } .md-pb-25px { padding-bottom: 25px @i; } .md-py-30px { padding-top: 30px @i; padding-bottom: 30px @i; } .md-pt-30px { padding-top: 30px @i; } .md-pb-30px { padding-bottom: 30px @i; } .md-py-50px { padding-top: 50px @i; padding-bottom: 50px @i; } .md-pt-50px { padding-top: 50px @i; } .md-pb-50px { padding-bottom: 50px @i; } .md-py-75px { padding-top: 75px @i; padding-bottom: 75px @i; } .md-pt-75px { padding-top: 75px @i; } .md-pb-75px { padding-bottom: 75px @i; } .md-py-100px { padding-top: 100px @i; padding-bottom: 100px @i; } .md-pt-100px { padding-top: 100px @i; } .md-pb-100px { padding-bottom: 100px @i; } .md-py-150px { padding-top: 150px @i; padding-bottom: 150px @i; } .md-pt-150px { padding-top: 150px @i; } .md-pb-150px { padding-bottom: 150px @i; } // PADDINGS eje X .md-px-0px { padding-left: 0px @i; padding-right: 0px @i; } .md-pl-0px { padding-left: 0px @i; } .md-pr-0px { padding-right: 0px @i; } .md-px-5px { padding-left: 5px @i; padding-right: 5px @i; } .md-pl-5px { padding-left: 5px @i; } .md-pr-5px { padding-right: 5px @i; } .md-px-10px { padding-left: 10px @i; padding-right: 10px @i; } .md-pl-10px { padding-left: 10px @i; } .md-pr-10px { padding-right: 10px @i; } .md-px-15px { padding-left: 15px @i; padding-right: 15px @i; } .md-pl-15px { padding-left: 15px @i; } .md-pr-15px { padding-right: 15px @i; } .md-px-20px { padding-left: 20px @i; padding-right: 20px @i; } .md-pl-20px { padding-left: 20px @i; } .md-pr-20px { padding-right: 20px @i; } .md-px-25px { padding-left: 25px @i; padding-right: 25px @i; } .md-pl-25px { padding-left: 25px @i; } .md-pr-25px { padding-right: 25px @i; } .md-px-30px { padding-left: 30px @i; padding-right: 30px @i; } .md-pl-30px { padding-left: 30px @i; } .md-pr-30px { padding-right: 30px @i; } .md-px-50px { padding-left: 50px @i; padding-right: 50px @i; } .md-pl-50px { padding-left: 50px @i; } .md-pr-50px { padding-right: 50px @i; } .md-px-75px { padding-left: 75px @i; padding-right: 75px @i; } .md-pl-75px { padding-left: 75px @i; } .md-pr-75px { padding-right: 75px @i; } .md-px-100px { padding-left: 100px @i; padding-right: 100px @i; } .md-pl-100px { padding-left: 100px @i; } .md-pr-100px { padding-right: 100px @i; } .md-px-150px { padding-left: 150px @i; padding-right: 150px @i; } .md-pl-150px { padding-left: 150px @i; } .md-pr-150px { padding-right: 150px @i; } // MARGINS eje Y .md-my-0px { margin-top: 0px @i; margin-bottom: 0px @i; } .md-mt-0px { margin-top: 0px @i; } .md-mb-0px { margin-bottom: 0px @i; } .md-my-5px { margin-top: 5px @i; margin-bottom: 5px @i; } .md-mt-5px { margin-top: 5px @i; } .md-mb-5px { margin-bottom: 5px @i; } .md-my-10px { margin-top: 10px @i; margin-bottom: 10px @i; } .md-mt-10px { margin-top: 10px @i; } .md-mb-10px { margin-bottom: 10px @i; } .md-my-15px { margin-top: 15px @i; margin-bottom: 15px @i; } .md-mt-15px { margin-top: 15px @i; } .md-mb-15px { margin-bottom: 15px @i; } .md-my-20px { margin-top: 20px @i; margin-bottom: 20px @i; } .md-mt-20px { margin-top: 20px @i; } .md-mb-20px { margin-bottom: 20px @i; } .md-my-25px { margin-top: 25px @i; margin-bottom: 25px @i; } .md-mt-25px { margin-top: 25px @i; } .md-mb-25px { margin-bottom: 25px @i; } .md-my-30px { margin-top: 30px @i; margin-bottom: 30px @i; } .md-mt-30px { margin-top: 30px @i; } .md-mb-30px { margin-bottom: 30px @i; } .md-my-50px { margin-top: 50px @i; margin-bottom: 50px @i; } .md-mt-50px { margin-top: 50px @i; } .md-mb-50px { margin-bottom: 50px @i; } .md-my-75px { margin-top: 75px @i; margin-bottom: 75px @i; } .md-mt-75px { margin-top: 75px @i; } .md-mb-75px { margin-bottom: 75px @i; } .md-my-100px { margin-top: 100px @i; margin-bottom: 100px @i; } .md-mt-100px { margin-top: 100px @i; } .md-mb-100px { margin-bottom: 100px @i; } .md-my-150px { margin-top: 150px @i; margin-bottom: 150px @i; } .md-mt-150px { margin-top: 150px @i; } .md-mb-150px { margin-bottom: 150px @i; } // MARGINS eje X .md-mx-0px { margin-left: 0px @i; margin-right: 0px @i; } .md-ml-0px { margin-left: 0px @i; } .md-mr-0px { margin-right: 0px @i; } .md-mx-5px { margin-left: 5px @i; margin-right: 5px @i; } .md-ml-5px { margin-left: 5px @i; } .md-mr-5px { margin-right: 5px @i; } .md-mx-10px { margin-left: 10px @i; margin-right: 10px @i; } .md-ml-10px { margin-left: 10px @i; } .md-mr-10px { margin-right: 10px @i; } .md-mx-15px { margin-left: 15px @i; margin-right: 15px @i; } .md-ml-15px { margin-left: 15px @i; } .md-mr-15px { margin-right: 15px @i; } .md-mx-20px { margin-left: 20px @i; margin-right: 20px @i; } .md-ml-20px { margin-left: 20px @i; } .md-mr-20px { margin-right: 20px @i; } .md-mx-25px { margin-left: 25px @i; margin-right: 25px @i; } .md-ml-25px { margin-left: 25px @i; } .md-mr-25px { margin-right: 25px @i; } .md-mx-30px { margin-left: 30px @i; margin-right: 30px @i; } .md-ml-30px { margin-left: 30px @i; } .md-mr-30px { margin-right: 30px @i; } .md-mx-50px { margin-left: 50px @i; margin-right: 50px @i; } .md-ml-50px { margin-left: 50px @i; } .md-mr-50px { margin-right: 50px @i; } .md-mx-75px { margin-left: 75px @i; margin-right: 75px @i; } .md-ml-75px { margin-left: 75px @i; } .md-mr-75px { margin-right: 75px @i; } .md-mx-100px { margin-left: 100px @i; margin-right: 100px @i; } .md-ml-100px { margin-left: 100px @i; } .md-mr-100px { margin-right: 100px @i; } .md-mx-150px { margin-left: 150px @i; margin-right: 150px @i; } .md-ml-150px { margin-left: 150px @i; } .md-mr-150px { margin-right: 150px @i; } } @media only screen and (max-width: 767px) { // PADDINGS eje Y .sm-py-0px { padding-top: 0px @i; padding-bottom: 0px @i; } .sm-pt-0px { padding-top: 0px @i; } .sm-pb-0px { padding-bottom: 0px @i; } .sm-py-5px { padding-top: 5px @i; padding-bottom: 5px @i; } .sm-pt-5px { padding-top: 5px @i; } .sm-pb-5px { padding-bottom: 5px @i; } .sm-py-10px { padding-top: 10px @i; padding-bottom: 10px @i; } .sm-pt-10px { padding-top: 10px @i; } .sm-pb-10px { padding-bottom: 10px @i; } .sm-py-15px { padding-top: 15px @i; padding-bottom: 15px @i; } .sm-pt-15px { padding-top: 15px @i; } .sm-pb-15px { padding-bottom: 15px @i; } .sm-py-20px { padding-top: 20px @i; padding-bottom: 20px @i; } .sm-pt-20px { padding-top: 20px @i; } .sm-pb-20px { padding-bottom: 20px @i; } .sm-py-25px { padding-top: 25px @i; padding-bottom: 25px @i; } .sm-pt-25px { padding-top: 25px @i; } .sm-pb-25px { padding-bottom: 25px @i; } .sm-py-30px { padding-top: 30px @i; padding-bottom: 30px @i; } .sm-pt-30px { padding-top: 30px @i; } .sm-pb-30px { padding-bottom: 30px @i; } .sm-py-50px { padding-top: 50px @i; padding-bottom: 50px @i; } .sm-pt-50px { padding-top: 50px @i; } .sm-pb-50px { padding-bottom: 50px @i; } .sm-py-75px { padding-top: 75px @i; padding-bottom: 75px @i; } .sm-pt-75px { padding-top: 75px @i; } .sm-pb-75px { padding-bottom: 75px @i; } .sm-py-100px { padding-top: 100px @i; padding-bottom: 100px @i; } .sm-pt-100px { padding-top: 100px @i; } .sm-pb-100px { padding-bottom: 100px @i; } .sm-py-150px { padding-top: 150px @i; padding-bottom: 150px @i; } .sm-pt-150px { padding-top: 150px @i; } .sm-pb-150px { padding-bottom: 150px @i; } // PADDINGS eje X .sm-px-0px { padding-left: 0px @i; padding-right: 0px @i; } .sm-pl-0px { padding-left: 0px @i; } .sm-pr-0px { padding-right: 0px @i; } .sm-px-5px { padding-left: 5px @i; padding-right: 5px @i; } .sm-pl-5px { padding-left: 5px @i; } .sm-pr-5px { padding-right: 5px @i; } .sm-px-10px { padding-left: 10px @i; padding-right: 10px @i; } .sm-pl-10px { padding-left: 10px @i; } .sm-pr-10px { padding-right: 10px @i; } .sm-px-15px { padding-left: 15px @i; padding-right: 15px @i; } .sm-pl-15px { padding-left: 15px @i; } .sm-pr-15px { padding-right: 15px @i; } .sm-px-20px { padding-left: 20px @i; padding-right: 20px @i; } .sm-pl-20px { padding-left: 20px @i; } .sm-pr-20px { padding-right: 20px @i; } .sm-px-25px { padding-left: 25px @i; padding-right: 25px @i; } .sm-pl-25px { padding-left: 25px @i; } .sm-pr-25px { padding-right: 25px @i; } .sm-px-30px { padding-left: 30px @i; padding-right: 30px @i; } .sm-pl-30px { padding-left: 30px @i; } .sm-pr-30px { padding-right: 30px @i; } .sm-px-50px { padding-left: 50px @i; padding-right: 50px @i; } .sm-pl-50px { padding-left: 50px @i; } .sm-pr-50px { padding-right: 50px @i; } .sm-px-75px { padding-left: 75px @i; padding-right: 75px @i; } .sm-pl-75px { padding-left: 75px @i; } .sm-pr-75px { padding-right: 75px @i; } .sm-px-100px { padding-left: 100px @i; padding-right: 100px @i; } .sm-pl-100px { padding-left: 100px @i; } .sm-pr-100px { padding-right: 100px @i; } .sm-px-150px { padding-left: 150px @i; padding-right: 150px @i; } .sm-pl-150px { padding-left: 150px @i; } .sm-pr-150px { padding-right: 150px @i; } // MARGINS eje Y .sm-my-0px { margin-top: 0px @i; margin-bottom: 0px @i; } .sm-mt-0px { margin-top: 0px @i; } .sm-mb-0px { margin-bottom: 0px @i; } .sm-my-5px { margin-top: 5px @i; margin-bottom: 5px @i; } .sm-mt-5px { margin-top: 5px @i; } .sm-mb-5px { margin-bottom: 5px @i; } .sm-my-10px { margin-top: 10px @i; margin-bottom: 10px @i; } .sm-mt-10px { margin-top: 10px @i; } .sm-mb-10px { margin-bottom: 10px @i; } .sm-my-15px { margin-top: 15px @i; margin-bottom: 15px @i; } .sm-mt-15px { margin-top: 15px @i; } .sm-mb-15px { margin-bottom: 15px @i; } .sm-my-20px { margin-top: 20px @i; margin-bottom: 20px @i; } .sm-mt-20px { margin-top: 20px @i; } .sm-mb-20px { margin-bottom: 20px @i; } .sm-my-25px { margin-top: 25px @i; margin-bottom: 25px @i; } .sm-mt-25px { margin-top: 25px @i; } .sm-mb-25px { margin-bottom: 25px @i; } .sm-my-30px { margin-top: 30px @i; margin-bottom: 30px @i; } .sm-mt-30px { margin-top: 30px @i; } .sm-mb-30px { margin-bottom: 30px @i; } .sm-my-50px { margin-top: 50px @i; margin-bottom: 50px @i; } .sm-mt-50px { margin-top: 50px @i; } .sm-mb-50px { margin-bottom: 50px @i; } .sm-my-75px { margin-top: 75px @i; margin-bottom: 75px @i; } .sm-mt-75px { margin-top: 75px @i; } .sm-mb-75px { margin-bottom: 75px @i; } .sm-my-100px { margin-top: 100px @i; margin-bottom: 100px @i; } .sm-mt-100px { margin-top: 100px @i; } .sm-mb-100px { margin-bottom: 100px @i; } .sm-my-150px { margin-top: 150px @i; margin-bottom: 150px @i; } .sm-mt-150px { margin-top: 150px @i; } .sm-mb-150px { margin-bottom: 150px @i; } // MARGINS eje X .sm-mx-0px { margin-left: 0px @i; margin-right: 0px @i; } .sm-ml-0px { margin-left: 0px @i; } .sm-mr-0px { margin-right: 0px @i; } .sm-mx-5px { margin-left: 5px @i; margin-right: 5px @i; } .sm-ml-5px { margin-left: 5px @i; } .sm-mr-5px { margin-right: 5px @i; } .sm-mx-10px { margin-left: 10px @i; margin-right: 10px @i; } .sm-ml-10px { margin-left: 10px @i; } .sm-mr-10px { margin-right: 10px @i; } .sm-mx-15px { margin-left: 15px @i; margin-right: 15px @i; } .sm-ml-15px { margin-left: 15px @i; } .sm-mr-15px { margin-right: 15px @i; } .sm-mx-20px { margin-left: 20px @i; margin-right: 20px @i; } .sm-ml-20px { margin-left: 20px @i; } .sm-mr-20px { margin-right: 20px @i; } .sm-mx-25px { margin-left: 25px @i; margin-right: 25px @i; } .sm-ml-25px { margin-left: 25px @i; } .sm-mr-25px { margin-right: 25px @i; } .sm-mx-30px { margin-left: 30px @i; margin-right: 30px @i; } .sm-ml-30px { margin-left: 30px @i; } .sm-mr-30px { margin-right: 30px @i; } .sm-mx-50px { margin-left: 50px @i; margin-right: 50px @i; } .sm-ml-50px { margin-left: 50px @i; } .sm-mr-50px { margin-right: 50px @i; } .sm-mx-75px { margin-left: 75px @i; margin-right: 75px @i; } .sm-ml-75px { margin-left: 75px @i; } .sm-mr-75px { margin-right: 75px @i; } .sm-mx-100px { margin-left: 100px @i; margin-right: 100px @i; } .sm-ml-100px { margin-left: 100px @i; } .sm-mr-100px { margin-right: 100px @i; } .sm-mx-150px { margin-left: 150px @i; margin-right: 150px @i; } .sm-ml-150px { margin-left: 150px @i; } .sm-mr-150px { margin-right: 150px @i; } } @media only screen and (max-width: 575px) { // PADDINGS eje Y .xs-py-0px { padding-top: 0px @i; padding-bottom: 0px @i; } .xs-pt-0px { padding-top: 0px @i; } .xs-pb-0px { padding-bottom: 0px @i; } .xs-py-5px { padding-top: 5px @i; padding-bottom: 5px @i; } .xs-pt-5px { padding-top: 5px @i; } .xs-pb-5px { padding-bottom: 5px @i; } .xs-py-10px { padding-top: 10px @i; padding-bottom: 10px @i; } .xs-pt-10px { padding-top: 10px @i; } .xs-pb-10px { padding-bottom: 10px @i; } .xs-py-15px { padding-top: 15px @i; padding-bottom: 15px @i; } .xs-pt-15px { padding-top: 15px @i; } .xs-pb-15px { padding-bottom: 15px @i; } .xs-py-20px { padding-top: 20px @i; padding-bottom: 20px @i; } .xs-pt-20px { padding-top: 20px @i; } .xs-pb-20px { padding-bottom: 20px @i; } .xs-py-25px { padding-top: 25px @i; padding-bottom: 25px @i; } .xs-pt-25px { padding-top: 25px @i; } .xs-pb-25px { padding-bottom: 25px @i; } .xs-py-30px { padding-top: 30px @i; padding-bottom: 30px @i; } .xs-pt-30px { padding-top: 30px @i; } .xs-pb-30px { padding-bottom: 30px @i; } .xs-py-50px { padding-top: 50px @i; padding-bottom: 50px @i; } .xs-pt-50px { padding-top: 50px @i; } .xs-pb-50px { padding-bottom: 50px @i; } .xs-py-75px { padding-top: 75px @i; padding-bottom: 75px @i; } .xs-pt-75px { padding-top: 75px @i; } .xs-pb-75px { padding-bottom: 75px @i; } .xs-py-100px { padding-top: 100px @i; padding-bottom: 100px @i; } .xs-pt-100px { padding-top: 100px @i; } .xs-pb-100px { padding-bottom: 100px @i; } .xs-py-150px { padding-top: 150px @i; padding-bottom: 150px @i; } .xs-pt-150px { padding-top: 150px @i; } .xs-pb-150px { padding-bottom: 150px @i; } // PADDINGS eje X .xs-px-0px { padding-left: 0px @i; padding-right: 0px @i; } .xs-pl-0px { padding-left: 0px @i; } .xs-pr-0px { padding-right: 0px @i; } .xs-px-5px { padding-left: 5px @i; padding-right: 5px @i; } .xs-pl-5px { padding-left: 5px @i; } .xs-pr-5px { padding-right: 5px @i; } .xs-px-10px { padding-left: 10px @i; padding-right: 10px @i; } .xs-pl-10px { padding-left: 10px @i; } .xs-pr-10px { padding-right: 10px @i; } .xs-px-15px { padding-left: 15px @i; padding-right: 15px @i; } .xs-pl-15px { padding-left: 15px @i; } .xs-pr-15px { padding-right: 15px @i; } .xs-px-20px { padding-left: 20px @i; padding-right: 20px @i; } .xs-pl-20px { padding-left: 20px @i; } .xs-pr-20px { padding-right: 20px @i; } .xs-px-25px { padding-left: 25px @i; padding-right: 25px @i; } .xs-pl-25px { padding-left: 25px @i; } .xs-pr-25px { padding-right: 25px @i; } .xs-px-30px { padding-left: 30px @i; padding-right: 30px @i; } .xs-pl-30px { padding-left: 30px @i; } .xs-pr-30px { padding-right: 30px @i; } .xs-px-50px { padding-left: 50px @i; padding-right: 50px @i; } .xs-pl-50px { padding-left: 50px @i; } .xs-pr-50px { padding-right: 50px @i; } .xs-px-75px { padding-left: 75px @i; padding-right: 75px @i; } .xs-pl-75px { padding-left: 75px @i; } .xs-pr-75px { padding-right: 75px @i; } .xs-px-100px { padding-left: 100px @i; padding-right: 100px @i; } .xs-pl-100px { padding-left: 100px @i; } .xs-pr-100px { padding-right: 100px @i; } .xs-px-150px { padding-left: 150px @i; padding-right: 150px @i; } .xs-pl-150px { padding-left: 150px @i; } .xs-pr-150px { padding-right: 150px @i; } // MARGINS eje Y .xs-my-0px { margin-top: 0px @i; margin-bottom: 0px @i; } .xs-mt-0px { margin-top: 0px @i; } .xs-mb-0px { margin-bottom: 0px @i; } .xs-my-5px { margin-top: 5px @i; margin-bottom: 5px @i; } .xs-mt-5px { margin-top: 5px @i; } .xs-mb-5px { margin-bottom: 5px @i; } .xs-my-10px { margin-top: 10px @i; margin-bottom: 10px @i; } .xs-mt-10px { margin-top: 10px @i; } .xs-mb-10px { margin-bottom: 10px @i; } .xs-my-15px { margin-top: 15px @i; margin-bottom: 15px @i; } .xs-mt-15px { margin-top: 15px @i; } .xs-mb-15px { margin-bottom: 15px @i; } .xs-my-20px { margin-top: 20px @i; margin-bottom: 20px @i; } .xs-mt-20px { margin-top: 20px @i; } .xs-mb-20px { margin-bottom: 20px @i; } .xs-my-25px { margin-top: 25px @i; margin-bottom: 25px @i; } .xs-mt-25px { margin-top: 25px @i; } .xs-mb-25px { margin-bottom: 25px @i; } .xs-my-30px { margin-top: 30px @i; margin-bottom: 30px @i; } .xs-mt-30px { margin-top: 30px @i; } .xs-mb-30px { margin-bottom: 30px @i; } .xs-my-50px { margin-top: 50px @i; margin-bottom: 50px @i; } .xs-mt-50px { margin-top: 50px @i; } .xs-mb-50px { margin-bottom: 50px @i; } .xs-my-75px { margin-top: 75px @i; margin-bottom: 75px @i; } .xs-mt-75px { margin-top: 75px @i; } .xs-mb-75px { margin-bottom: 75px @i; } .xs-my-100px { margin-top: 100px @i; margin-bottom: 100px @i; } .xs-mt-100px { margin-top: 100px @i; } .xs-mb-100px { margin-bottom: 100px @i; } .xs-my-150px { margin-top: 150px @i; margin-bottom: 150px @i; } .xs-mt-150px { margin-top: 150px @i; } .xs-mb-150px { margin-bottom: 150px @i; } // MARGINS eje X .xs-mx-0px { margin-left: 0px @i; margin-right: 0px @i; } .xs-ml-0px { margin-left: 0px @i; } .xs-mr-0px { margin-right: 0px @i; } .xs-mx-5px { margin-left: 5px @i; margin-right: 5px @i; } .xs-ml-5px { margin-left: 5px @i; } .xs-mr-5px { margin-right: 5px @i; } .xs-mx-10px { margin-left: 10px @i; margin-right: 10px @i; } .xs-ml-10px { margin-left: 10px @i; } .xs-mr-10px { margin-right: 10px @i; } .xs-mx-15px { margin-left: 15px @i; margin-right: 15px @i; } .xs-ml-15px { margin-left: 15px @i; } .xs-mr-15px { margin-right: 15px @i; } .xs-mx-20px { margin-left: 20px @i; margin-right: 20px @i; } .xs-ml-20px { margin-left: 20px @i; } .xs-mr-20px { margin-right: 20px @i; } .xs-mx-25px { margin-left: 25px @i; margin-right: 25px @i; } .xs-ml-25px { margin-left: 25px @i; } .xs-mr-25px { margin-right: 25px @i; } .xs-mx-30px { margin-left: 30px @i; margin-right: 30px @i; } .xs-ml-30px { margin-left: 30px @i; } .xs-mr-30px { margin-right: 30px @i; } .xs-mx-50px { margin-left: 50px @i; margin-right: 50px @i; } .xs-ml-50px { margin-left: 50px @i; } .xs-mr-50px { margin-right: 50px @i; } .xs-mx-75px { margin-left: 75px @i; margin-right: 75px @i; } .xs-ml-75px { margin-left: 75px @i; } .xs-mr-75px { margin-right: 75px @i; } .xs-mx-100px { margin-left: 100px @i; margin-right: 100px @i; } .xs-ml-100px { margin-left: 100px @i; } .xs-mr-100px { margin-right: 100px @i; } .xs-mx-150px { margin-left: 150px @i; margin-right: 150px @i; } .xs-ml-150px { margin-left: 150px @i; } .xs-mr-150px { margin-right: 150px @i; } } // PANEL GROUP ==================================================================================== .panel-group { .panel { padding: 15px 0px; border-top: solid 1px #CCCCCC; &:first-of-type { border-top: none; } .panel-heading { padding: 0px; h4 { font-size: 1.2rem; /*font-weight: 600;*/ margin-bottom: 0px; } a { position: relative; padding-right: 20px; &::after { content:"\f107"; font-family: @fa; font-weight: 300; font-size: 2rem; color: @negro @i; position: absolute; right: 0px; top: calc(~'50% - 10px'); } &:hover, &:focus, &:active { color: @negro; } &.collapsed { color: @negro @i; &::after { .transform(rotate(180deg)); } } } .panel-title > a, .panel-title > small, .panel-title > .small, .panel-title > small > a, .panel-title > .small > a { display: block; } } .panel-body { padding: 20px 0px 0px; ul { margin-bottom: 0px; li { a { font-size: 1rem; font-weight: 600; display: block; &:hover, &:focus, &:active, &.active { color: @negro; text-decoration: underline; } } } } } &.azul { .panel-heading a { color: @azul; &:hover, &:focus, &:active, &.active { color: @azul; } } .panel-body ul li a { &:hover, &:focus, &:active, &.active { color: @azul; } } } &.negro { .panel-heading a { color: @negro; &:hover, &:focus, &:active, &.active { color: @negro; } } .panel-body ul li a { &:hover, &:focus, &:active, &.active { color: @negro; } } } } } // NAV TABS ======================================================================================= .wrapper-tabs { padding: 0 30px; } .nav-tabs { border: none; .nav-item { margin: 5px 3px 0px 0px; } .nav-link { font-weight: 500; color: @blanco; padding: 5px 10px; border: none; border-top-left-radius: 5px; border-top-right-radius: 5px; background-color: @azul; .transition(@ef-25); &.active { color: @azul; background-color: @blanco; } } } .tab-content { padding-top: 80px; padding-bottom: 200px; h5 { font-size: 2.6rem; } table { font-size: 1.2rem; line-height: 1; overflow: auto; width: 100%; thead { background-color: #ededed; tr { border: none; th { font-weight: 700; } } } tr { border-bottom: solid 1px #ededed; th, td { text-align: center; padding: 15px 20px; &:first-of-type { padding-left: 20px; text-align: left; } &:last-of-type { padding-right: 20px; } span, a { display: block; white-space: nowrap; } a { font-weight: 700; color: @azul; text-decoration: underline; } } } } } // DEFINICIÓN DE MIXINS =========================================================================== .transition(@transition) { -webkit-transition: @transition; -moz-transition: @transition; -ms-transition: @transition; -o-transition: @transition; transition: @transition; } .transition-delay(@transition-delay) { -webkit-transition-delay: @transition-delay; -moz-transition-delay: @transition-delay; -ms-transition-delay: @transition-delay; -o-transition-delay: @transition-delay; transition-delay: @transition-delay; } .transform(@transform) { -webkit-transform: @transform; -moz-transform: @transform; -ms-transform: @transform; -o-transform: @transform; transform: @transform; } .radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; -ms-border-radius: @radius; -o-border-radius: @radius; border-radius: @radius; } .box-shadow(@box-shadow) { -webkit-box-shadow: @box-shadow; -moz-box-shadow: @box-shadow; -ms-box-shadow: @box-shadow; -o-box-shadow: @box-shadow; box-shadow: @box-shadow; } .text-shadow(@text-shadow) { -webkit-text-shadow: @text-shadow; -moz-text-shadow: @text-shadow; -ms-text-shadow: @text-shadow; -o-text-shadow: @text-shadow; text-shadow: @text-shadow; } .box-sizing(@box-sizing) { -webkit-box-sizing: @box-sizing; -moz-box-sizing: @box-sizing; -ms-box-sizing: @box-sizing; -o-box-sizing: @box-sizing; box-sizing: @box-sizing; } .filter(@filter) { -webkit-filter: @filter; -moz-filter: @filter; -ms-filter: @filter; -o-filter: @filter; filter: @filter; } .opacity(@opacity) { opacity: @opacity; filter: ~"alpha(opacity=@{opacity})"; } // DEFINICIÓN DE VARIABLES ======================================================================== @i: !important; @azul: #103a7d; @negro: #000000; @gris: #343434; @f5: #f5f5f5; @blanco: #ffffff; @transparente: transparent; @ef-1: all 0.1s ease-out; @ef-15: all 0.15s ease-out; @ef-25: all 0.25s ease-out; @ef-4: all 0.4s ease-out; @sh-n: 1px 1px 0px rgba(0,0,0,0.85); @sh-b: 1px 1px 0px rgba(255,255,255,0.85); @no-sh: 0px 0px 0px rgba(255,255,255,0); @fa: 'Font Awesome 5 Pro'; // RECURSOS ====================================================================================== /* calc(~" "); content: attr(data-*); //con el atributo "data-*" añadido en una etiqueta html puedo incluir un texto en el ":before" ó ":after" como valor del "content" [class^="col-"] .transform(translate(-50%, -50%)); background-image: url(../gestor/recursos/uploads/imagenes/.svg); background-size: cover; background-position: center center; background-repeat: no-repeat; background: linear-gradient(to bottom, #34b8c0 0%, #6f51c7 100%); display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; @keyframes blink { 0% { opacity: .2; } 20% { opacity: 1; } 100% { opacity: .2; } } */ // ESTILOS EN FORMATO LESS ======================================================================== * { padding: 0; margin: 0; .box-sizing(border-box); &::before, &::after { .box-sizing(border-box); } } .clearfix, .cierre { &::after { content: ""; clear: both; } } * { &:hover, &:focus, &:active { outline: none; text-decoration: none; } } html { font-size: 62.5%; /* El tamaño predeterminado de fuente del navegador es 16px [16px * 62.5% = 10px] Así se calcula más fácil el tamaño de fuente 1em = 10px */ position: relative; min-height: 100vh; } body { font-family: 'Raleway', Helvetica, Arial, sans-serif; font-size: 1.8rem; line-height: 1.4; color: @negro; font-weight: normal; font-style: normal; background-color: @blanco; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; //padding-top: 200px; .transition(@ef-25); &.overflow { overflow: hidden; } } h1, h2, h3, h4, h5, h6 { font-weight: 800; line-height: 1.1; color: @azul; text-rendering: optimizeLegibility; display: block; margin-bottom: 30px; span { font-weight: 500; } } h1 { font-size: 4rem; } h2 { font-size: 4.8rem; margin-bottom: 45px; &.sub { position: relative; &::before { content: ''; display: block; width: 25px; height: 5px; background-color: @azul; position: absolute; bottom: -20px; left: 0px; } } } h3 { font-size: 2rem; margin-bottom: 15px; } h4 { font-size: 1.3rem; } /* h5 { font-size: 2rem; font-weight: 500; margin-bottom: 15px; } */ h5 { font-size: 2.6rem; font-weight: 700; color: @negro; margin-bottom: 0px; } ul { margin-bottom: 10px; clear: both; > li { list-style-type: none; margin-bottom: 10px; } &.dot { > li { padding-left: 15px; position: relative; &::before { content: ''; display: block; width: 4px; height: 4px; border-radius: 50%; background-color: @negro; position: absolute; left: 0; top: 8px; } } } &.check { > li { padding-left: 22px; &::before { content:"\f054"; font-size: 1.6rem; top: 4px; } } } &.chevron { > li { padding-left: 15px; position: relative; &::before { content: "\f105"; font-family: @fa; position: absolute; left: 0; } } } &.list { > li { padding-left: 15px; position: relative; &::before { content: "\f068"; font-family: @fa; font-size: 1.1rem; position: absolute; left: 0; top: 5px; } } } &.pdf { > li { padding-left: 25px; &::before { content:"\f1c1"; font-size: 20px; top: -4px; } } } &.ic-menu { > li { padding-left: 25px; position: relative; &::before { content: ''; display: block; width: 17px; height: 17px; background-color: #bbdaf1; position: absolute; top: 5px; left: 0; .radius(50%); } &::after { content: '\f0c9'; font-family: @fa; font-weight: 900; position: absolute; font-size: 1rem; top: 5px; left: 0px; height: 17px; width: 17px; text-align: center; line-height: 17px; } } } &.underlined { > li { margin-bottom: 10px; &:last-child a::after { display: none; } a { display: inline-block; padding-right: 40px; position: relative; padding-bottom: 10px; &::after { content: ''; display: block; height: 1px; background-color: #525252; width: calc(~'100% + 15px'); position: absolute; bottom: 0; left: -15px; } } } } &.inline { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; width: fit-content; margin: 0px auto; li { padding: 7px 7px; margin: 0px; &::before { display: none; } a, span { &.boton { min-width: 200px; min-height: 40px; } } } &.redes { justify-content: flex-start; &.top { padding-top: 30px; } } } &.anclas { display: flex; flex-wrap: wrap; justify-content: center; > li { padding: 0 7px; position: relative; > a { font-size: 1.2rem; font-weight: 600; display: block; padding: 3px 7px; .transition(@ef-25); &:hover, &:focus, &:active { color: @blanco; background-color: @negro; } } &::before { content: ''; display: block; width: 1px; position: absolute; left: 0px; top: 7px; bottom: 7px; background-color: @negro; } &:first-child::before { display: none; } } } &.redes { font-size: 1.8rem; color: @gris; margin: 0px; display: flex; flex-direction: row; align-items: center; > li { padding-left: 10px; margin: 0px; a { display: flex; justify-content: center; align-items: center; width: 43px; height: 43px; border: solid 1px @gris; &:hover, &.active { color: @blanco; border-color: @azul; background-color: @azul; } } } } &.botones { display: table; margin: 0 auto; padding: 0 25px; text-align: center; li { display: inline-block; padding: 0 10px; &::before { content: ''; } } &.ancho { width: 100%; padding: 0; li { &:first-child { float: left; } &:last-child { float: right; } } } } &.cols-2 { -moz-column-count: 2; -moz-column-gap: 30px; -webkit-column-count: 2; -webkit-column-gap: 30px; column-count: 2; column-gap: 30px; > li { border-bottom: solid 1px #000; margin-bottom: 15px; padding-bottom: 15px; padding-left: 25px; min-height: 64px; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; &:last-child { //border: none; } } } &.cols-3 { -moz-column-count: 3; -moz-column-gap: 30px; -webkit-column-count: 3; -webkit-column-gap: 30px; column-count: 3; column-gap: 30px; li { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; } } &.separador { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; width: 100%; margin-bottom: 5px; li { padding: 0 13px; margin: 0px; position: relative; &::before { content: ''; display: block; width: 1px; background-color: @gris; position: absolute; left: 0; top: 4px; bottom: 2px; } &:hover { margin: 0px; } &:first-child { padding-left: 0px; &::before { display: none; } } } } &.paginacion { font-size: 2.2rem; font-weight: normal; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1; > li { display: flex; justify-content: center; align-items: center; margin: 4px; > a { font-family: 'Montserrat'; font-size: 1.6rem; font-weight: 500; color: @gris; display: flex; justify-content: center; align-items: center; width: 44px; height: 44px; border: solid 1px @gris; &.active, &:hover, &:active, &:focus { color: @gris; background-color: #e4e4e4; } } &:first-of-type { > a { color: @azul; border: none; background-color: transparent; } } &:last-of-type { > a { color: @azul; border: none; background-color: transparent; } } } } } nav { &.navegacion { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 0px; > a { font-size: 2.4rem; font-weight: 800; color: @negro; .transition(@ef-25); position: relative; /* &::after { content: ''; display: block; width: 0; height: 3px; position: absolute; bottom: -8px; left: 50%; right: 50%; background-color: @azul; .transition(@ef-15); } */ &:hover, &:active { color: @azul; /* &::after { width: 100%; left: 0; right: 0; } */ } &:focus { color: @negro; } } } } p { margin-bottom: 15px; } b, strong { font-weight: 700; } i, em { font-style: italic; } small { font-size: 80%; line-height: inherit; } a { color: inherit; outline: none; border: none; text-decoration: none; img { outline: none; border: none; } &.no-link { text-decoration: none; &:hover, &:focus, &:active { color: @negro; text-decoration: underline; } } &:hover, &:focus, &:active { color: @azul; outline: none; text-decoration: none; cursor: pointer; } } a.boton, span.boton, button { font-size: 1.6rem; line-height: 1.2; font-weight: 700; color: @blanco; display: inline-flex; justify-content: center; align-items: center; flex: 0 0 auto; width: fit-content; min-width: 200px; min-height: 45px; padding: 0px 20px; background-color: @azul; position: relative; border: none; .transition(@ef-25); &:hover, &:focus, &:active { color: @blanco; background-color: @negro; outline: none; } &.i-left { i { margin-right: 20px; } } &.i-right { i { margin-left: 20px; } } &.sm { padding: 8px 15px; } &.xl { letter-spacing: 0.3rem; flex: 0 0 60px; min-height: 60px; padding: 10px 30px; } &.azul { color: @blanco; background-color: @azul; &:hover, &:focus, &:active { background-color: @negro; } } &.blanco { color: @azul; background-color: @blanco; &:hover, &:focus, &:active { color: @blanco; background-color: @azul; } } &.negro { color: @blanco; background-color: @negro; &:hover, &:focus, &:active { background-color: @azul; } } &.gris { color: @blanco; background-color: @gris; &:hover, &:focus, &:active { color: @blanco; background-color: @azul; } } &.outline { &.blanco { color: @blanco; background-color: transparent; border: solid 1px @blanco; &:hover, &:focus, &:active { color: @azul; background-color: @blanco; } } &.negro { color: @negro; background-color: transparent; border: solid 1px @negro; &:hover, &:focus, &:active { color: @blanco; background-color: @azul; border-color: @azul; } } } &.descarga { letter-spacing: 0rem; padding: 0px 0px 0px 15px; i { width: 45px; min-width: 45px; min-height: 45px; line-height: 45px; height: 100%; display: block; text-align: center; border-left: solid 1px rgba(255,255,255,0.5); } } img { height: 21px; margin: 0 10px; } } a:hover { color: @azul; .transition(@ef-1); } a.arriba { font-size: 5rem; color: @azul; text-align: center; width: 44px; height: 44px; display: flex; justify-content: center; align-items: center; background-color: @blanco; position: fixed; z-index: 2; bottom: 15px; right: 15px; opacity: 0; .transition(@ef-15); &.on { opacity: 1; } &:hover, &:focus, &:active { color: @azul; background-color: @blanco; } } img { max-width: 100%; } hr { height: 1px; border: none; border-top: solid 1px @gris; margin-top: 30px; margin-bottom: 30px; clear: both; &.dotted { border-top: dotted 1px @gris; margin: 0px; } } table { width: 100%; tr { border-bottom: solid 1px @gris; th { padding: 1px 5px; font-weight: normal; } td { padding: 1px 5px; &:first-of-type { padding-left: 0px; } &:last-of-type { padding-right: 0px; } } } } .table { display: table; width: 100%; height: 100%; margin-bottom: 0px; text-align: center; .cell { display: table-cell; vertical-align: middle; height: 100%; } } .wrapper-table { padding-bottom: 25px; overflow: auto; } .txt-blanco { color: @blanco; h1, h2, h3, h4, h5, h6 { color: @blanco; } } .txt-azul { color: @azul; h1, h2, h3, h4, h5, h6 { color: @azul; } } .bg { &.img { background-size: cover; background-position: center center; background-repeat: no-repeat; } &.cabecera { height: 80vh; min-height: 400px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; background-size: cover; background-position: center top; background-repeat: no-repeat; .txt { font-size: 2.5rem; color: @blanco; text-align: center; width: 100%; background-color: rgba(0,0,0,0.5); p:last-of-type { margin-bottom: 0px; } } } &.gris { background-color: @f5; } &.shadow { position: relative; &::before { content: ''; display: block; position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,0.6); } > div { position: relative; z-index: 1; } } } .border { &.top { border: none @i; border-top: solid 1px @gris @i; } } .flex { display: flex; &.column { flex-flow: column nowrap @i; &.center { justify-content: center @i; align-items: center @i; } &.left { align-items: flex-start @i; } &.right { align-items: flex-end @i; } &.top { justify-content: flex-start @i; } &.bottom { justify-content: flex-end @i; } } &.row { width: 100%; flex-flow: row wrap @i; align-items: flex-start @i; justify-content: center @i; padding: 0px; margin: 0px; &.space-between { display: flex; justify-content: space-between @i; margin: 0 -5px; > div { margin: 0 5px; } } &.end { justify-content: flex-end @i; } } } header { text-align: center; position: fixed; background-color: rgba(255,255,255,0.75); top: 0; left: 0; right: 0; //background-color: @blanco; z-index: 2; .transition(@ef-4); &.bg-white { background-color: @blanco; } #header { height: 200px; a#logo { display: inline-block; width: 250px; } nav#menu.nav.navbar-nav { font-size: 1.5rem; line-height: 1.1; font-weight: 800; text-align: center; padding: 30px 0px 40px; margin: 0px auto; float: none; width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-items: center; > li { float: none; margin: 0px 10px; display: flex; align-items: center; > a, > span { display: flex; padding: 0px; background-color: @transparente @i; position: relative; &.active, &:hover { color: @azul; text-decoration: none; outline: none; background-color: @transparente; } &:focus, &:active { color: @azul; } } } } } } .owl-carousel { &.inicio, &.cabecera { height: 100vh; max-height: 100vh; min-height: 600px; padding-bottom: 85px; overflow-y: hidden; background-color: @blanco; .item { height: 100vh; max-height: 100vh; min-height: 600px; background-size: cover; background-position: center bottom; background-repeat: no-repeat; position: relative; .container { max-width: 1070px; } .container, .row { height: 100%; position: relative; } .row { align-items: flex-end; padding-top: 15px; margin-left: -5px; margin-right: -5px; [class^="col-"] { padding-left: 5px; padding-right: 5px; div { color: @blanco; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; height: 185px; padding: 15px 30px; background-color: @azul; span, h2 { font-size: 2.5rem; color: @blanco; line-height: 1.2; font-weight: 800; margin-bottom: 0px; } p { font-size: 1.8rem; line-height: 1.3; margin-bottom: 5px; strong { font-weight: 900; } } ul { font-size: 1.3rem; li { margin-bottom: 0px; } &.thumbs { display: flex; height:100%; width: 100%; flex-wrap: wrap; justify-content: flex-start; margin: -5px 0px; > li { padding: 5px; max-width: 33%; > a { > img { display: block; width: initial; max-height: 70px; } } } } } a.boton { font-size: 1.4rem; i { font-size: 1rem; margin-right: 5px; } } } } } } } &.inicio { .item { background-position: center top; } } &.cabecera { max-height: 700px; min-height: 500px; .item { max-height: 700px; min-height: 500px; .row { align-items: center; padding-top: 200px; padding-bottom: 10px; [class^="col-"] { div { height: 170px; h2 { font-size: 2.5rem; } } } } } /* &.cooperativa { max-height: 500px; .item { max-height: 500px; min-height: 350px; } } */ } &.ficha { .owl-stage { display: flex; .owl-item { justify-content: center; align-items: flex-end; display: flex; span { display: block; margin-top: 10px; text-align: center; } } } } } .wrapper { &.breadcrumb { padding: 0px @i; margin: 0px; border-radius: 0px; background-color: @blanco; &.gris { background-color: @f5; } .container { position: relative; &.bg { &::before { content: ''; display: block; position: absolute; z-index: 0; top: 0; right: -1000px; bottom: 0; left: -70px; background-color: @blanco; } } } .breadcrumb { font-family: 'Montserrat'; font-size: 1.3rem; font-weight: 500; color: @gris; text-align: center; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; width: 100%; margin-bottom: 0px; padding: 15px 0; border-radius: 0px; background-color: transparent; > li { margin-bottom: 0px; &:first-child { > a, > span { color: @gris; display: block; padding: 0 0 0 15px; position: relative; &::before { content: '\f324'; font-family: @fa; font-size: 1rem; color: @azul; position: absolute; left: 0px; top: calc(~'50% + 1px'); .transform(translateY(-50%)); } } } >a , > span { color: @azul; display: block; padding: 0px 15px; position: relative; &::before { content: '/'; font-size: 1rem; color: @azul; position: absolute; left: 6px; top: calc(~'50% + 1px'); .transform(translateY(-50%)); } &:hover, &:focus, &:active { text-decoration: underline; } } } } } &.navegacion { position: sticky; z-index: 1; top: 200px; margin-top: 30px; padding-top: 0px; padding-bottom: 10px; background-color: @blanco; } &.franjas { overflow-x: hidden; position: relative; z-index: 1; background-color: #f5f5f5; section { &.bg { &.blanco { article { position: relative; &::before { content: ''; display: block; position: absolute; z-index: -1; top: 0; right: -1000px; bottom: 0; left: -70px; background-color: @blanco; } &:nth-of-type(2n+1) { .ficha { position: relative; &::before { content: ''; display: block; position: absolute; z-index: -1; top: 0; right: -1000px; bottom: 0; left: 0; background-color: @f5; } } } } } } } } .destacado { font-weight: 200; font-size: 44px; display: block; margin-bottom: 60px; } section { padding-top: 100px; padding-bottom: 100px; &.cabecera { height: 510px; padding: 0px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; background-size: cover; background-position: center top; background-repeat: no-repeat; position: relative; &.mini { height: 170px; justify-content: center; } h1 { font-size: 2.1rem; letter-spacing: 0.5rem; color: @blanco; margin: 0px; position: relative; z-index: 1; } &::before { content: ''; display: block; position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,0.5); } } &.bloques { img { } } &.video-bg { .embed-container { padding-bottom: initial; height: 80vh; min-height: 400px; } } &.map { height: 510px; min-height: 400px; position: relative; #map { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; left: 0; } } &.bg { position: relative; &::before { content: ''; display: block; position: absolute; top: 50px; right: 0; bottom: 0; left: 0; } &.azul { color: @blanco; h1, h2, h3, h4, h5, h6 { color: @blanco; } &::before { background-color: @azul; } } } .titulo { text-align: center; border-top: solid 1px @gris; border-bottom: solid 1px @gris; p { font-size: 4rem; font-weight: 700; color: @gris; letter-spacing: 0.4rem; margin-bottom: 0px; span { font-size: 2rem; display: block; } } &.border-top-none { border-top: none; } &.border-bottom-none { border-bottom: none; } } .col-izq { h3 { letter-spacing: 0.1rem; } } .container { .row { &.bloques { min-height: 570px; } } } article { .ficha { padding: 0px 30px 30px; [class^="col-"] { padding-top: 50px; } .info { margin-top: 25px; min-height: 220px; h3 { font-size: 2.6rem; font-weight: 900; margin: 0; } h4 { font-weight: 600; font-size: 3rem; margin-bottom: 25px; } ul { //font-size:1.6rem; margin-bottom: 10px; > li { margin-bottom: 0px; } } } } } } &#promociones { section { article { .ficha { .info { padding: 75px 35px 40px; margin-top: 0px; h3 { font-size: 3rem; } p { margin-bottom: 0px; } a.boton { margin-top: 30px; } } } } } } &#cooperativa { section { overflow-x: hidden; .container { position: relative; a.subir { position: absolute; top: 0px; right: 15px; } .row { &.bg { &::after { content: ''; display: block; position: absolute; z-index: -1; top: 45px; right: -1000px; bottom: 0; left: -70px; background-color: @f5; } } } } } } /* &#experiencia { section { article { .ficha { padding: 0px 30px 30px; [class^="col-"] { padding-top: 90px; } .info { min-height: 220px; h3 { font-weight: 900; font-size: 2.4rem; margin: 0; } h4 { font-weight: 600; font-size: 2rem; margin-bottom: 25px; } ul { font-size:1.6rem; margin-bottom: 10px; > li { margin-bottom: 0px; } } } } } } } */ &#experiencia { article { .ficha { .info { ul { font-size: 1.6rem; } } } } } &#promocion { section { article { .ficha { .info { min-height: initial; } .panel { text-align: center; font-weight: 600; line-height: 1.2; padding: 25px 20px 20px; border: solid 1px @azul; background-color: @blanco; h3 { font-size: 3rem; font-weight: 800; margin-top: 5px; margin-bottom: 10px; } p { margin-bottom: 5px; span { font-size: 2.4rem; font-weight: 700; } } button { margin-top: 10px; width: 100%; max-width: 240px; } } } } } &.franjas { section { &.bg.blanco article:nth-of-type(2n+1) .ficha::before { bottom: -33px; } } } } &#contacto { section { h3 { font-size: 4.8rem; font-weight: 800; margin-bottom: 60px; } h4 { font-size: 2.8rem; font-weight: 800; margin-bottom: 0px; } p { margin-bottom: 0px; } } } } footer { font-size: 1.4rem; color: @blanco; padding: 60px 0px 0px; background-color: @azul; [class^="col-"] { margin-bottom: 60px; } a.logo { display: inline-block; margin-bottom: 60px; img { max-width: 190px; } } h4 { font-size: 1.6rem; font-weight: 800; color: @blanco; } a.boton { font-size: 1.4rem; margin-top: 20px; min-height: 38px; } .bottom { padding: 15px; color: @gris; background-color: @blanco; .container { .row { align-items: center; [class^="col-"] { margin-bottom: 0px; } p { font-family: 'Montserrat'; font-weight: 500; margin-bottom: 0px; strong { font-weight: 800; } } ul.datos { display: flex; flex-wrap: wrap; justify-content: center; margin: 0px; > li { padding: 0 10px; margin: 0px; white-space: nowrap; img { margin-right: 10px; } } } } } } } // CONDICIONALES ================================================================================== @media screen and (max-width : 1199px) { h2 { font-size: 3.8rem; } ul.redes { font-size: 1.5rem; > li a { width: 35px; height: 35px; } } .wrapper { &.navegacion { top: 135px; } } nav { &.navegacion > a { font-size: 2rem; } } header { #header { height: 135px; nav#menu.nav.navbar-nav { padding: 20px 0px; } a#logo img { height: 40px; } .container { max-width: 100%; } } } .owl-carousel { &.inicio, &.cabecera { height: calc(~'100vh - 100px'); max-height: 600px; min-height: 450px; padding-bottom: 0px; .item { height: calc(~'100vh - 100px'); max-height: 600px; min-height: 450px; .row { padding-top: 135px; padding-bottom: 15px; [class^="col-"] div { height: 240px; padding: 20px; h2, span { font-size: 2.6rem; } ul { margin-bottom: 20px; } } } } } } footer { .bottom { .container { max-width: 100%; } } } } @media screen and (min-width : 1025px) { header { #head-mobile { display: none; } } } @media screen and (max-width : 1024px) { ::-webkit-scrollbar { width: 2px; height: 2px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: @blanco; } ::-moz-scrollbar { width: 2px; height: 2px; } ::-moz-scrollbar-track { background: transparent; } ::-moz-scrollbar-thumb { background-color: @blanco; } h2 { font-size: 3.2rem; } a.arriba { font-size: 4rem; width: 30px; height: 30px; bottom: 20px; right: 5px; } a, span { &.boton { font-size: 1.4rem; min-height: 40px; padding: 0px 15px; } } body { font-size: 1.6rem; padding-top: 70px; &.navegando { padding-top: 70px; } } header { #header { height: 70px; display: none; } #head-mobile { height: 70px; #title-mobile { height: 70px; padding: 10px 0px @i; position: fixed; top: 0px; left: 15px; right: 15px; z-index: 9999; bottom: auto; background-color: @azul; .box-shadow(0 0 3px rgba(0,0,0,0.4)); a.logo { height: 50px; display: flex; justify-content: flex-start; align-items: center; img { height: 20px; } span { color: @blanco; padding-left: 15px; font-size: 1rem; line-height: 1.2; } } #nav-icon { width: 30px; height: 20px; position: relative; float: right; margin: 15px 10px; .transform(rotate(0deg)); .transition(.5s ease-in-out); cursor: pointer; span { display: block; position: absolute; height: 1px; width: 100%; background: @blanco; opacity: 1; left: 0; .radius(2px); .transform(rotate(0deg)); .transition(.25s ease-in-out); &:nth-child(1) { top: 1px; } &:nth-child(2), &:nth-child(3) { top: 9px; } &:nth-child(4) { top: 17px; } } &.open { span { &:nth-child(1) { top: 8px; width: 0%; left: 50%; } &:nth-child(2) { .transform(rotate(45deg)); } &:nth-child(3) { .transform(rotate(-45deg)); } &:nth-child(4) { top: 8px; width: 0%; left: 50%; } } } } h1 { margin: 0px; a { text-align: left; display: block; margin: 0px auto; padding-top: 5px; height: 45px; img { height: 40px; } } } &.fancybox-margin { margin-right: -15px @i; } } #menu-mobile { display: block; overflow: auto; position: fixed; z-index: 9999; top: 70px; right: 0; left: 0; bottom: 0; background: #042861; opacity: 0; visibility: hidden; height: 0px; .transition(@ef-25); &.on { opacity: 1; visibility: visible; min-height: calc(~"100vh - 70px"); } ul { width: 100%; min-height: 100%; padding: 0px 0px; margin: 0px; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: center; position: relative; } ul > li { display: block; width: 100%; margin: 0; position: relative; padding-left: 0px; } ul > li:before { content: '' @i; } ul > li > span { padding: 24px 0px; width: 100%; border: none; position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: flex-start; &::after { content: ''; display: block; height: 1px; background-color: rgba(255,255,255,0.3); position: absolute; bottom: 0; left: 15px; right: 15px; } } ul > li > span > a { color: @blanco; line-height: 1.2; letter-spacing: 0.1rem; text-align: left; padding: 0 55px 0 20px; display: block; width: 100%; text-decoration: none; &.rotate { &.desplegable { &::before { content: '\f106'; .transition(@ef-4); } } } } ul > li > span > a.unico { width: 100% @i; &.desplegable:before { width: 60px; position: absolute; top: 0; right: 0; bottom: 0; } } ul > li > span > a.active { font-weight: 900; } ul > li > span > a.desplegable { position: absolute; right: 0px; top: 0px; bottom: 0; padding: 0px; width: 55px; text-align: center; cursor: pointer; &::before { content: "\f107"; font-family: @fa; font-size: 2.4rem; font-weight: 300; display: block; position: absolute; left: calc(~"50% - 7px"); top: calc(~"50% - 14px"); .transition(@ef-4); } } ul > li > span > a.desplegable > i { line-height: 78px; } ul > li:hover > span > a.desplegable { background: none; } ul > li > ul > li > span { padding: 15px 0px; } ul > li > ul, ul > li > ul > li > ul, ul > li > ul > li > ul > li > ul { border-bottom: none; margin: 0; display: none; } ul > li > ul > li { line-height: 40px; } ul > li > ul > li:last-child { border-bottom: none; } ul > li > ul > li > span > a, ul > li > ul > li > ul > li > span > a { padding: 0px 35px; } ul > li > ul > li > ul > li > span > a { padding: 0px 55px 0px 40px; } ul > li.idioma { font-size: 15px; display: flex; width: 100%; border-top: solid 1px rgba(255, 255, 255, 0.3); > span { padding: 0px; width: 50%; margin: 0 auto; border: none; > a { display: block; width: 100%; text-align: center; padding: 15px 20px; } &::after { left: 0; right: 0; } &.active, &:hover { text-decoration: none; &::after { height: 2px; background-color: @blanco; } } } } ul > li.redes { span { max-width: 290px; margin: 0 auto; > a { font-size: 22px; color: @blanco; line-height: 48px; text-align: center; opacity: 1; display: inline-block; padding: 0px; width: 50px; &:focus, &:active, &:hover { color: #888888; } } &::after { display: none; } } } } } } .owl-carousel { &.inicio { height: calc(~'100vh - 70px'); min-height: 400px; .item { height: calc(~'100vh - 70px'); min-height: 400px; .row { padding-top: 0px; } } } &.cabecera { height: calc(~'100vh - 100px'); max-height: 400px; min-height: 350px; .item { height: calc(~'100vh - 100px'); max-height: 400px; min-height: 350px; } } &.inicio, &.cabecera { .item .row { padding-top: 15px; } } } .wrapper-tabs { padding: 0 15px; } .nav-tabs { font-size: 1.35rem; } .tab-content { padding-top: 40px; padding-bottom: 100px; table { tr { th, td { padding: 12px 15px; } } } } nav { &.navegacion > a { font-size: 1.8rem; } } .wrapper { section { &.cabecera { height: 300px; } article { .ficha { padding: 0px 15px 30px; [class^="col-"] { padding-top: 60px; } .info { h3 { font-size: 1.8rem; } h4, ul { font-size: 1.4rem } } } } } &.navegacion { top: 70px; margin-top: 20px; padding-top: 10px; } &#promociones { section { article { .ficha { .info { padding: 75px 25px 40px; h3 { font-size: 2.6rem; } } } } } } &#promocion { section { article { .ficha { .panel { img { width: 40px; } h3 { font-size: 2.6rem; } p span { font-size: 2rem; } button { min-height: 38px; } } } } } } &#contacto { section { h3 { font-size: 3rem; margin-bottom: 40px; } img { width: 40px; } h4 { font-size: 2.2rem; } } } } footer .bottom .container .row p { text-align: center; } } @media screen and (max-width : 991px) { form, .form { &.buscar { font-size: 1.4rem; width: 215px; input { width: calc(~'100% - 30px'); padding: 10px 10px; } button { width: 30px; min-width: 30px; text-align: left; } } } .container.md-w-100 { max-width: 100%; } .wrapper { section { padding-top: 50px; padding-bottom: 50px; } } } @media screen and (max-width : 767px) { html { overflow: auto @i; } body { font-size: 1.4rem; } h1, h2, h3, h4, h5, h6 { margin-bottom: 15px; } h1 { font-size: 2.4rem; } h2 { font-size: 2.6rem; margin-bottom: 30px; &.sub::before { height: 3px; bottom: -15px; } } h3 { font-size: 1.8rem; } .wrapper-tabs { padding: 0px; } .tab-content { h5 { font-size: 2rem; margin-bottom: 0px; } table { tr { th, td { padding: 10px 10px; } } } } nav { &.navegacion > a { font-size: 1.4rem; } } form, .form { select { font-size: 1.2rem; letter-spacing: 0.1rem; padding: 0px 10px; } } ul { &.paginacion { > li > a { font-size: 1.4rem; width: 30px; height: 30px; } } } .map { height: 100vh; min-height: 260px; max-height: calc(~'100vh - 280px'); } .owl-carousel { &.inicio { height: calc(~'100vh - 125px'); min-height: 400px; max-height: 500px; padding-bottom: 62px; .item { height: calc(~'100vh - 125px'); min-height: 400px; max-height: 500px; .row { [class^="col-"] div { height: initial; padding: 10px; h2, span { font-size: 2rem; } ul.thumbs { justify-content: center; } } } } } &.cabecera { height: calc(~'100vh - 200px'); max-height: 400px; min-height: 250px; .item { height: calc(~'100vh - 200px'); max-height: 400px; min-height: 250px; .row { align-items: flex-end; [class^="col-"] div { height: 100px; h2 { font-size: 2rem; } } } } } &.inicio, &.cabecera { .item .row { padding-top: 15px; } } } .wrapper { section { &.bloques { img { max-width: 290px; } } article { .ficha { [class^="col-"] { padding-top: 50px; } .info { margin-top: 15px; min-height: initial; h4 { margin-bottom: 15px; } ul { margin-bottom: 15px; } } } } } &.breadcrumb { .breadcrumb { font-size: 1.2rem; } } &.navegacion { .container { max-width: 100%; } } &#promocion { section article .ficha .panel { h3 { font-size: 2.4rem; } p span { font-size: 2rem; } button { font-size: 1.4rem; min-width: 190px; min-height: 38px; } } } } footer { .bottom { text-align: center; .container { .row { ul.datos { margin: 10px 0px; > li { padding: 5px 20px 5px 0; } } ul.redes { justify-content: center; > li { padding-left: 5px; padding-right: 5px; } } } } } } } @media screen and (max-width : 575px) { main { [class^="col-"] { flex: 0 0 100%; max-width: 100%; } } ul { &.cols-2, &.cols-3 { -moz-column-count: 1; -moz-column-gap: 0px; -webkit-column-count: 1; -webkit-column-gap: 0px; column-count: 1; column-gap: 0px; li { -webkit-column-break-inside: initial; page-break-inside: initial; break-inside: initial; } } } nav { &.navegacion { justify-content: center; a { padding: 10px 10px 0px 10px; } } } .owl-carousel { &.inicio { .item { .txt { h2 { font-size: 2.6rem; } } } } } .wrapper { section { [class^="col-"] { width: 100% @i; float: left; } &.navegacion { position: relative; z-index: 1; top: initial; } } &#promociones { section { article { .ficha { .info { h3 { font-size: 2.4rem; } } } } } } } footer { > .container > .row { [class^="col-"] { flex: 0 0 100%; max-width: 100%; } } } } @media print { a[href]:after { content: none @i; } }