:root {
    --grey: #707070;
    --grey-50: #939393;
    --white: #ffffff;
    --white-80: #fffefe;
    --white-50: #f0f2f7;
    --black: #000000;
    --black-80: #221f1f;
    --black-50: #252525;
}

@font-face {
  font-family: 'Gotham Light';
  src: url('../fonts/Gotham-Light.woff') format('woff');
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: 'Gotham Bold';
  src: url('../fonts/Gotham-Bold.woff') format('woff');
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: 'Gotham Medium';
  src: url('../fonts/Gotham-Medium.woff') format('woff');
  font-style: normal;
  font-weight: normal;
}

/* GENERAL */
a, input, select, textarea, abbr, acronym, address, applet, article, aside, audio, b, blockquote, body, canvas, caption, center, cite, code, del, details, dfn, div, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, span, strike, strong, summary, table, tbody, td, tfoot, th, thead, time, tr, tt, ul, var, video, button {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    transition: .2s ease-in-out;
}

html {
    background-color: var(--white);
}
body, html {
    position: relative;
    overflow-x: hidden;
    height: 100%;
}

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

*, :after, :before, body {
    -webkit-font-smoothing: antialiased;
}

*::selection {
    background-color: var(--black-50);
    color: var(--white);
}

body {
    font-family: 'Gotham Medium';
    color: var(--black-80);
}

body {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    letter-spacing: 0px;
}

input, label, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, button {
    display: block;
}
input[type="date"], input[type="text"], input[type="password"], input[type="tel"], input[type="email"], input[type="file"], input[type="url"], textarea, select, form .control-group.input-append .add-on {
    width: -webkit-fill-available;
    padding: 15px 30px;
    border-width: 3px;
    border-style: solid;
    border-color: var(--black-80);
    border-radius: 0;
    color: var(--black-80);
    font-size: 18px;
}
input:focus-visible {
    outline: none;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

select {
    appearance: none;
    padding: 15px 60px 15px 30px;
    background-image:  url(http://solicitudes.arweb.com/public/img/frontend/icon-dropdown.svg);
    background-repeat: no-repeat;
    background-position: right 28px top 50%;
    background-size: 14px 9px;
}

input[type="radio"] {
    margin-left: 30px;
    margin-right: 10px;
    appearance: none;
    background-color: var(--white);
    width: 20px;
    height: 20px;
    border: 3px solid var(--black-80);
    border-radius: 50%;
    cursor: pointer;
    display: grid;
    place-content: center;
}
input[type="radio"]::before {
    content: '';
    background: var(--black-80);
    background-position: center;
    background-repeat: no-repeat;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
}
input[type="radio"]:checked::before {
    transform: scale(1);
}

input[type="checkbox"] {
    position: relative;
    margin-left: 30px;
    margin-right: 10px;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 3px solid var(--black-80);
    cursor: pointer;
    display: grid;
    place-content: center;
}
input[type="checkbox"]::before {
    content: ''; 
    background-image: url(http://solicitudes.arweb.com/public/img/frontend/icon-check.svg);
    background-position: center;
    background-repeat: no-repeat;
    width: 10px;
    height: 10px;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
}
input[type="checkbox"]:checked::before {
    transform: scale(1);
}

::placeholder, select option[value=""] { 
    color: var(--grey-50);
}

button, input[type="submit"], input[type="reset"], input[type="button"], .column.button a {
    background-color: var(--black-50);
    color: var(--white);
    font-size: 20px;
    line-height: 30px;
    padding: 15px 30px;
    text-transform: uppercase;
    cursor:pointer;
    text-decoration: none;
}
button:hover, .column.button a:hover {
    background-color: var(--black);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Gotham Bold';
    color: var(--black-80);
    margin-bottom: 4vh;
}
h1, h2 {
    font-size: 34px;
    line-height: 40px;
}
h3 {
    font-size: 30px;
    line-height: 40px;
}
h4 {
    font-size: 18px;
    line-height: 24px;
}
b, strong {
    font-family: 'Gotham Bold';
}
p {
    margin-bottom: 15px;
}
p.big {
    font-size: 20px;
    line-height: 30px;
}
a {
    color: var(--grey);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25ch;
}
a:hover {
    color: var(--black);
}

@media only screen and (max-width: 1239px) {
    h1, h2 {
        font-size: 30px;
        line-height: 36px;
    }
    h3 {
        font-size:26px;
        line-height: 36px;
    }
    p.big {
        font-size: 16px;
        line-height: 24px;
    }
}

.section {
    position: relative;
}
#Content .section:not(#login) {
    min-height: calc(100vh - 258px);
    padding-top: 80px;
    padding-bottom: 40px;
}
#Content #login.section {
    min-height: calc(100vh - 48px);
}
.section_wrapper, .container {
    max-width: 1220px;
    min-height: inherit;
    margin: 0 auto;
    position: relative;
}
.section_wrapper:after, .container:after {
    clear: both;
    content: " ";
    display: block;
    height: 0;
    visibility: hidden;
}

.one.wrap {
    width: 100%;
}
.one-second.wrap {
    width: 50%;
}
.wrap {
    float: left;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
}
.wrap:before, .wrap:after {
    content: '\0020';
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}
.wrap.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    align-content: center;
}
.wrap.background {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.wrap.background .column, .wrap.background .column h2 {
    color: var(--white);
}

.one.column {
    width: calc(100% - 40px);
}
.one-second.column {
    width: calc(50% - 40px);
}
.one-fourth.column {
    width: calc(25% - 40px);
}
.three-fourth.column {
    width: calc(75% - 40px);
}
.one-third.column {
    width: calc(33.33% - 40px);
}
.two-third.column {
    width: calc(66.66% - 40px);
}
.column {
    float: left;
    margin: 0 20px 40px;
}
#login .column:last-child, .column:last-child p:last-child {
    margin-bottom: 0;
}

#login.section .wrap {
    min-height: inherit;
    padding: 80px 20px;
}
.full-width .section_wrapper {
    width: 100%;
    max-width: 100%;
}
#Content .full-width .wrap {
    display: flex;
    justify-content: center;
}
@media only screen and (min-width: 1381px) {
    #Content .full-width .wrap .column {
        max-width: 580px;
    }
}
@media only screen and (max-width: 1380px) and (min-width: 1240px) {
    #Content .full-width .wrap .column {
        max-width: 500px;
    }
}
/* END GENERAL */

/* HEADER */
header .section {
    background-color: var(--black-80);
    padding-top: 15px;
}
header .column {
    margin-bottom: 15px;
}
header .column.logo {
    padding: 8px 0;
}
header .column.logo img {
    max-width: 200px;
    vertical-align: middle;
}
header .column.log-out {
    color: var(--white);
    font-size: 18px;
    text-align: right;
}
header .column.log-out > div {
    display: inline-block;
    vertical-align: top;
}
header .column.log-out > div:not(:first-child) {
    margin-left: 30px;
}
header .column.log-out > div:not(:last-child) {
    border-right: 1px solid var(--grey);
    padding-right: 30px;
}
header .column.log-out > div * {
    color: var(--white);
    margin-bottom: 10px;
}
header .column.log-out a {
    display: inline-block;
    margin-bottom: 0;
    text-decoration: none;
}
header .column.log-out i {
    margin-left: 10px;
}
header .column.log-out a:hover {
    transform: translateX(5px);
}
header .column.log-out a:hover i:before {
    transform: translateX(-5px);
}
/* END HEADER */

/* FOOTER */
footer .section {
    background-color: var(--black-80);
    padding-top: 15px;
}
footer .column {
    text-align: center;
    color: var(--white);
    margin-bottom: 15px;
}
footer .powered-by {
    font-family: 'Gotham Bold';
    font-size: 14px;
    line-height: 18px;
}
/* END FOOTER */

/* IMAGE BOX */
.image-box {
    position: relative;
    line-height: 0;
    overflow: hidden;
    max-width: 100%;
}
.image-box .background {
    min-height: 315px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.image-box.small .background {
    min-height: 160px;
}
.image-box a:hover .background {
    transform: scale(1.1);
}
.image-box .content {
    display: flex;
    align-items: end;
    justify-content: end;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    text-align: right;
    padding: 25px;
}
.image-box a:hover .content {
    background: rgba(0,0,0,.3);
}
.image-box .title {
    color: var(--white);
    margin-bottom: 0;
}
.image-box a:hover .title {
    transform: translateY(-25px);
}
.image-box a:hover .title:after {
    content: '';
    position: absolute;
    width: 100px;
    height: 4px;
    left: calc(100% - 100px);
    background: var(--white);
    display: block;
    margin-top: 10px;
}
/* END IMAGE BOX */

/* CONTENT */
.column.title {
    text-align: center;
}
.column.breadcrumb a {
    display: inline-block;
    font-family: 'Gotham Bold';
    color: var(--black-80);
    text-decoration: none;
}
.column.breadcrumb a:hover {
    transform: translateX(-5px);
}
.column.breadcrumb a i {
    margin-right: 10px;
}
.column.breadcrumb a:hover i:before {
    transform: translateX(5px);
}
.column.notes {
    margin-top: 2vh;
    text-align: center;
}
.column.notes p {
    color: var(--grey);
}
.column.notes a {
    color: var(--black-80);
}

#login .wrap.background {
    background-image: url(http://solicitudes.arweb.com/public/img/frontend/login-bg-2.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    animation: slide 50s linear infinite;
}
#login .column {
    text-align: center;
}
#login .column img {
    max-width: 350px;
    margin-bottom: 6vh;
}
.alert {
    margin-bottom: 25px;
}

.column.button.right {
    text-align: right;
}
.column.button a, .column.button button {
    display: inline-block;
}

.paginacion {
    text-align: center;
}
.paginacion > * {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: var(--black-50);
    margin: 0 2px;
    color: var(--white);
    text-decoration: none;
    line-height: 30px;
}
.paginacion > a:hover {
    background-color: var(--black);
    color: var(--white);
}
.paginacion strong {
    background-color: var(--black-80);
}

.column #ver_mas {
    text-align: center;
    font-family: 'Gotham Bold';
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25ch;
    cursor: pointer;
    transition: .2s ease-in-out;
}
.column #ver_mas:hover {
    transform: translateX(5px);
}
/* END CONTENT */

/* FORM */
form .control-group:not(:last-child) {
    margin-bottom: 3vh;
}
form .control-group label, form .control-group .controls {
    text-align: left;
    font-size: 18px;
    line-height: 30px;
}
form .control-group .controls > label {
    margin-bottom: 0;
}
form .control-group.input-append .controls {
    display: flex;
}
form .control-group .controls {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
/*form .control-group .controls > * {
    display: inline-block;
}*/
form .control-group.input-append .add-on {
    display: block;
    width: auto;
    background-color: var(--black-80);
    color: var(--white-80);
    padding: 15px 20px;
}
form button {
    width: -webkit-fill-available;
    margin-top: 5vh;
}
/* END FORM */

/* ICONS */
i {
    vertical-align: middle;
}
i:before {
    display: inline-block;
    transition: .2s ease-in-out;
}
i.log-out:before {
    content: url(http://solicitudes.arweb.com/public/img/frontend/icon-log-out.svg);
    width: 20px;
}
i.arrow-left:before {
    content: url(http://solicitudes.arweb.com/public/img/frontend/icon-arrow-left.svg);
    width: 16px;
}
/* END ICONS */

/* ANIMATIONS */
@keyframes slide {
    50% { background-position: 0 0;}
}
/* END ANIMATIONS */

/* TABLES */
.column.table {
    display: block;
    overflow-x: auto;
}
table {
    width: 100%;
    border-spacing: 0;
    text-align: left;
}
table thead tr th {
    background-color: var(--black-80);
    color: var(--white);
}
table tr th, table tr td {
    padding: 10px 30px;
}
table tr td {
    font-size: 14px;
    vertical-align: middle;
}
table tr td:last-child {
    text-align: center;
    font-size: 16px;
    line-height: 22px;
    white-space: nowrap;
}
table tr td:last-child > * {
    vertical-align: text-top;
}
table tr td:last-child > *:not(:last-child) {
    margin-right: 8px;
}
table tr:nth-child(even) td {
    background: var(--white-50);
}
table button {
    display: inline-block;
    color: var(--black-80);
    font-size: 10px;
    line-height: 10px;
    background-color: var(--white);
    padding: 4px 6px;
    border-width: 1px;
    border-color: var(--black-80);
    border-style: solid;
}
table button:hover {
    color: var(--white);
    border-color: var(--black);
}
/* END TABLES */

/* MODALS */
#Content .modal {
    padding: 0;
}
#Content .modal:before {
    z-index: -1;
    content: '';
    position: absolute;
    opacity: 0.4;
    width: 100%;
    height: 100%;
    background: repeat-x var(--white) 0 0;
}
#Content .modal .modal-content {
    width: inherit;
    text-align: center;
    position: fixed;
    max-width: 640px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 0;
    max-height: calc(100% - 100px);
    overflow: auto;
}
#Content .modal .modal-content .modal-header {
    padding: 30px 40px 0;
    background-color: var(--black-80);
    
    overflow: auto;
}
#Content .modal .modal-content .modal-header h2 {
    padding: 0;
    /*margin-bottom: 0;*/
    background-color: transparent;
}
#Content .modal .modal-content .modal-header .close {
    line-height: 40px;
    margin-left: 20px;
}
#Content .modal .modal-content .modal-header .close:hover {
    transform:  rotate(90deg);
    color:  var(--white);
}
#Content .modal .modal-content .modal-body {
    padding: 40px 40px 60px;
    overflow: hidden;
}
#Content .modal .modal-content .modal-body p.big {
    margin-bottom: 40px;
}
/* END MODALS */

/* TABLET VERSION */
@media only screen and (max-width: 1239px) and (min-width: 768px) {
    header .column.logo {
        padding: 26px 0;
    }
    header .column.log-out {
        font-size: 16px;
    }
    header .column.log-out > div {
        display: block;
    }
    header .column.log-out > div {
        margin-left: 30px;
    }
    header .column.log-out > div:not(:last-child) {
        border: 0;
        padding: 0;
        margin-bottom: 10px;
    }
    .section_wrapper, .container {
        max-width: 728px;
    }
    .wrap {
        width: 100% !important;
    }
    #Content .column {
        width: calc(100% - 40px);
    }
    #Content .column.image-box {
        width: calc(50% - 40px);
    }
    #login.section .wrap {
        min-height: auto;
    }
    #Content .column.form {
        width: calc(70% - 40px);
    }
    input[type="date"], input[type="text"], input[type="password"], input[type="tel"], input[type="email"], input[type="file"], input[type="url"], textarea, select, form .control-group.input-append .add-on {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}
/* END TABLET VERSION */

/* PHONE VERSION */
@media only screen and (max-width: 767px) {
    header .column.log-out {
        font-size: 16px;
    }
    header .column.log-out > div {
        display: block;
    }
    header .column.log-out > div:not(:first-child) {
        margin: 0;
    }
    header .column.log-out > div:not(:last-child) {
        border: 0;
        padding: 0;
        margin-bottom: 10px;
    }
    header .column, header .column * {
        text-align: center !important;
    }
    #Content .section:not(#login) {
        padding-top: 60px;
    }
    .wrap {
        width: 100% !important;
        padding-left: 0;
        padding-right: 0;
    }
    .column {
        width: calc(100% - 40px) !important;
        margin-bottom: 20px;
    }
    #login.section .wrap {
        min-height: auto;
        padding: 60px 0;
    }

    #login .column img {
        max-width: 260px;
    }
    form .control-group.input-append .controls {
        display: block;
        text-align: center;
    }
    input[type="date"], input[type="text"], input[type="password"], input[type="tel"], input[type="email"], input[type="file"], input[type="url"], textarea, select, form .control-group.input-append .add-on {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    #Content .modal .modal-content {
        width: auto;
    }
    #Content .modal .modal-content .modal-header {
        padding: 20px;
    }
    #Content .modal .modal-content .modal-body {
        padding: 40px 20px;
    }
}
/* END PHONE VERSION */