/*
    ColorBox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}

/* 
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;}
#colorbox{}
    #cboxContent{margin-top:20px;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{border:5px solid #000; background:#fff;}
        #cboxTitle{position:absolute; top:-20px; left:0; color:#eee;font-size:12px;}
        #cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;font-size:12px;}
        #cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
        #cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(/js/colorbox/images/controls.png) no-repeat top left; width:28px; height:65px; text-indent:-9999px;}
        #cboxPrevious.hover{background-position:bottom left;}
        #cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(/js/colorbox/images/controls.png) no-repeat top right; width:28px; height:65px; text-indent:-9999px;}
        #cboxNext.hover{background-position:bottom right;}
        #cboxLoadingOverlay{background:#000;}
        #cboxLoadingGraphic{background:url(/js/colorbox/images/loading.gif) no-repeat center center;}
        #cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(/js/colorbox/images/controls.png) no-repeat top center; width:38px; height:19px; text-indent:-9999px;}
        #cboxClose.hover{background-position:bottom center;}

/* Variables */
:root {
    --theme-color: #CBDB9A; /*#e85d13;*/
    --light-text-color: #605e3f;
    --text-color: #4A859A; /*#4a493d;*/
    --gray-color: #cbcab9;
    --white-color: #ffffff;
    --box-color: #eeefee;
    --time: 0.2s;
    --curve: ease-in-out;
    --theme-width: 1200px;
    --font-h1: 300 2em/1.1em "Catamaran", sans-serif;
    --font-h2: 300 1.5em/1.1em "Catamaran", sans-serif;
    --font-h3: 300 1.2em/1.1em "Catamaran", sans-serif;
    --layout-sidebar-width: 200px;
    --layout-columns-gap: 2em;
}

/* Inicialización */
* {
    margin: 0;
    padding: 0;
}
*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    font-size: 100%;
}
body {
    min-height: 100vh;
    scroll-behavior: smooth;
    text-rendering: optimizeSpeed;
    line-height: 1.5;
    background-color: var(--white-color);
    color: var(--text-color);
}
ol,
ul {
    list-style: none;
    margin-bottom: 2em;
}
img {
    max-width: 100%;
    display: block;
    height: auto;
}
fieldset {
    border: none;
}
label,
button,
input[type="submit"],
a {
    cursor: pointer;
}
input,
textarea,
select,
button {
    font: inherit;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a {
    text-decoration: none;
    color: var(--theme-color);
    transition: all var(--time) var(--curve);
}
a:hover,
a:focus {
    outline: none;
    text-decoration: underline;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
figcaption,
blockquote,
ol,
dl,
dd,
table,
form,
article,
iframe,
video,
audio,
canvas {
    margin-bottom: 1em;
}
li {
    margin-bottom: 0.5em;
}

/* Estilos generales */
body {
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--light-text-color);
    font-weight: 300;
    font-family: "Catamaran", sans-serif;
}
h1 {
    font: var(--font-h1);
}
h2 {
    font: var(--font-h2);
}
h3 {
    font: var(--font-h3);
}
section header {
    position: relative;
}
section header .section-title {
    margin-bottom: 0.7em;
}
section header .bt {
    position: absolute;
    right: 0;
    top: 0;
}
sup {
    font-size: 0.7em;
    line-height: 0.9em;
}


@media only screen and (max-width: 900px) { 
}
@media only screen and (max-width: 600px) { 
    section header {
        text-align: center;
    }
    section header .bt {
        position: static;
        display: block;
        margin: 0 auto 2em;
        text-align: center;
        max-width: 280px;
    }
}
@media (max-width: 480px) {
}