@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 300;
    src: url('fonts/source-sans-pro-300.eot');
    src: local(''),
         url('fonts/source-sans-pro-300.eot?#iefix') format('embedded-opentype'),
         url('fonts/source-sans-pro-300.woff2') format('woff2'),
         url('fonts/source-sans-pro-300.woff') format('woff'),
         url('fonts/source-sans-pro-300.ttf') format('truetype'),
         url('fonts/source-sans-pro-300.svg#SourceSansPro') format('svg');
}
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/source-sans-pro-regular.eot');
    src: local(''),
         url('fonts/source-sans-pro-regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/source-sans-pro-regular.woff2') format('woff2'),
         url('fonts/source-sans-pro-regular.woff') format('woff'),
         url('fonts/source-sans-pro-regular.ttf') format('truetype'),
         url('fonts/source-sans-pro-regular.svg#SourceSansPro') format('svg');
}
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 600;
    src: url('fonts/source-sans-pro-600.eot');
    src: local(''),
         url('fonts/source-sans-pro-600.eot?#iefix') format('embedded-opentype'),
         url('fonts/source-sans-pro-600.woff2') format('woff2'),
         url('fonts/source-sans-pro-600.woff') format('woff'),
         url('fonts/source-sans-pro-600.ttf') format('truetype'),
         url('fonts/source-sans-pro-600.svg#SourceSansPro') format('svg');
}
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/source-sans-pro-700.eot');
    src: local(''),
         url('fonts/source-sans-pro-700.eot?#iefix') format('embedded-opentype'),
         url('fonts/source-sans-pro-700.woff2') format('woff2'),
         url('fonts/source-sans-pro-700.woff') format('woff'),
         url('fonts/source-sans-pro-700.ttf') format('truetype'),
         url('fonts/source-sans-pro-700.svg#SourceSansPro') format('svg');
}
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 900;
    src: url('fonts/source-sans-pro-900.eot');
    src: local(''),
         url('fonts/source-sans-pro-900.eot?#iefix') format('embedded-opentype'),
         url('fonts/source-sans-pro-900.woff2') format('woff2'),
         url('fonts/source-sans-pro-900.woff') format('woff'),
         url('fonts/source-sans-pro-900.ttf') format('truetype'),
         url('fonts/source-sans-pro-900.svg#SourceSansPro') format('svg');
}
@font-face {
    font-family: 'Source Code Pro';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/source-code-pro-regular.eot');
    src: local('Source Code Pro Regular'), local('SourceCodePro-Regular'),
         url('fonts/source-code-pro-regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/source-code-pro-regular.woff2') format('woff2'),
         url('fonts/source-code-pro-regular.woff') format('woff'),
         url('fonts/source-code-pro-regular.ttf') format('truetype'),
         url('fonts/source-code-pro-regular.svg#SourceCodePro') format('svg');
}
@font-face {
    font-family: 'Source Code Pro';
    font-style: normal;
    font-weight: 600;
    src: url('fonts/source-code-pro-600.eot');
    src: local('Source Code Pro SemiBold'), local('SourceCodePro-SemiBold'),
         url('fonts/source-code-pro-600.eot?#iefix') format('embedded-opentype'),
         url('fonts/source-code-pro-600.woff2') format('woff2'),
         url('fonts/source-code-pro-600.woff') format('woff'),
         url('fonts/source-code-pro-600.ttf') format('truetype'),
         url('fonts/source-code-pro-600.svg#SourceCodePro') format('svg');
}
@font-face {
    font-family: 'Source Code Pro';
    font-style: normal;
    font-weight: 900;
    src: url('fonts/source-code-pro-900.eot');
    src: local('Source Code Pro Black'), local('SourceCodePro-Black'),
         url('fonts/source-code-pro-900.eot?#iefix') format('embedded-opentype'),
         url('fonts/source-code-pro-900.woff2') format('woff2'),
         url('fonts/source-code-pro-900.woff') format('woff'),
         url('fonts/source-code-pro-900.ttf') format('truetype'),
         url('fonts/source-code-pro-900.svg#SourceCodePro') format('svg');
}
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: var(--gray-600);
}
::-webkit-scrollbar-thumb:window-inactive {
    background: var(--gray-600);
}
:root {
    --gray-300: #e2ded7;
    --gray-400: #7d828b;
    --gray-600: #494d55;
    --primary: #2d2829;
    --secondary: #c2995c;
    --secondary-rgb: 194, 153, 92;
    --success: #287F55;
    --success-hover: #6cae8c;
    --success-rgb: 40, 127, 85;
    --dark: #970e48;
    --dark-hover: #bc2259;
    --link-color: #186ade;
    --link-color-hover: #114c9e;
    --border-width: 2px;
    --btn-font-weight: 400;
}
*, *::before, *::after {
    box-sizing: border-box;
}
html {
    font-family: 'Source Sans Pro', sans-serif;
    line-height: 1.15;
}
main.p404  {
    display: block;
    max-width: 1200px;
    background: url(../img/fondo-404.svg) right top no-repeat;
    min-height: calc(100vh - 100px);
}
main.mantenimiento  {
    display: block;
    max-width: 1200px;
    background: url(../img/fondo-mantenimiento.svg) right top no-repeat;
    min-height: calc(100vh - 100px);
}
footer {
    display: block;
    font-weight: 700;
    color: var(--primary);
    border-top: none !important;
}
body {
    margin: 0;
    padding: 1rem;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--gray-600);
    text-align: left;
    background-color: #fff;
}
a {
    font-weight: 700;
    color: var(--link-color);
    text-decoration: underline;
}
a:hover, a:focus {
    font-weight: 700;
    color: var(--link-color-hover);
    text-decoration: underline;
}
strong {
    font-weight: 700;
}
h1, h2, h4 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 600;
    line-height: 1.2;
}
h1 {
    font-size: 4rem;
    line-height: 1;
}
h2 {
    font-size: 2rem;
    line-height: 1;
}
h3 {
    font-size: 1.5rem;
    line-height: 1;
}
h4 {
    font-size: 1.2rem;
}
svg {
    overflow: hidden;
    vertical-align: middle;
}
.img-fluid {
    max-width: 100%;
    height: auto;
}
.d-flex {
    display: flex !important;
}
.flex-column {
    flex-direction: column !important;
}
.align-items-center {
    align-items: center !important;
}
.justify-content-center {
    justify-content: center !important;
}
.justify-content-between {
    justify-content: space-between !important;
}
.position-relative {
    position: relative !important;
}
.container-lg {
    max-width: 960px;
}
.container-md {
    max-width: 720px;
}
.mt-5, .my-5 {
    margin-top: 3rem !important;
}
.mb-5, .my-5 {
    margin-bottom: 3rem !important;
}
.mt-4, .my-4 {
    margin-top: 1.5rem !important;
}
.mb-4, .my-4 {
    margin-bottom: 1.5rem !important;
}
.mt-3, .my-3 {
    margin-top: 1rem !important;
}
.mb-3, .my-3 {
    margin-bottom: 1rem !important;
}
.p-3 {
    padding: 1rem !important;
}
.pt-3, .py-3 {
    padding-top: 1rem !important;
}
.pb-3, .py-3 {
    padding-bottom: 1rem !important;
}
.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}
.text-dark {
    color: var(--dark) !important;
}
.text-secondary {
    color: var(--secondary) !important;
}
.text-center {
    text-align: center !important;
}
.font-weight-light {
    font-weight: 300 !important;
}
.font-weight-bold {
    font-weight: 900 !important;
}
.img {
    width: 280px;
}
.logo img {
    height: 70px;
}
.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + var(--border-width) + var(--border-width));
    margin: 0.5rem auto;
    padding: 1.3rem 4.5rem 1.3rem 1rem;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--gray-600);
    background-color: #fff;
    background-clip: padding-box;
    border: 2px solid var(--gray-300);
    border-radius: 40px;
    outline: 0;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-control:focus {
    color: var(--gray-600);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(239, 237, 234, 0.25);
}
.form-control::placeholder {
    color: var(--gray-400);
    opacity: 1;
}
.btn {
    display: inline-block;
    font-weight: var(--btn-font-weight);
    text-align: center;
    vertical-align: middle;
    user-select: none;
    line-height: 1.5;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.btn:hover {
    text-decoration: none;
}
.btn:focus {
    outline: 0;
}
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 250px;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 15px;
    box-shadow: 0px 10px 21px 0px rgba(0, 0, 0, 0.10);
}
.intereses {
    max-width: 800px;
}
a.mas, a.mas:hover, a.mas:focus {
    font-weight: 700;
    color: var(--primary);
    text-decoration: underline;
}
#b-btn {
    position: absolute;
    top: 7px;
    right: 8px;
    padding: 6px 8px;
    border-radius: 40px;
    color: #fff;
    background-color: var(--success);
    border: none;
    font-size: 0.9rem;
}
#b-btn:hover, #b-btn:focus {
    background-color: var(--success-hover);
}
@media (min-width: 768px) {
    .flex-lg-row {
        flex-direction: row !important; 
    }
    .text-lg-left {
        text-align: left !important;
    }
    h1 {
        font-size: 3.5rem;
        margin-top: 20px;
    }
    .card {
        margin: 15px auto;
        max-width: 280px;
    }
    .mb-md-5, .my-md-5 {
        margin-bottom: 3rem !important;
    }
    .text-md-left {
        text-align: left !important;
    }
}
@media (max-width: 575px) {
    .img {
        width: 200px;
    }
    .logo img {
        height: 50px;
    }
    h1 {
        font-size: 2.5rem;
    }
    h2 {
        font-size: 2.2rem;
    }
}