:root {
    --primary: #1e79e0;
    --light-gray: #f5f5f5;
    --border-gray: #d8d6d7;
    --medium-gray: #e2eaf3;
    --dark-gray: #969a9d;
}

/*******************************/
/************ Style ************/
/*******************************/

@media screen and ( max-width: 1024px ) {
    body {
        overflow-x: hidden !important;
    }

    #content {
        left: 50px;
        transition: 250ms left !important;
    }

    #content.menu-open {
        left: 400px;
        width: calc(100% - 100px) !important;
    }
}

#header {
    padding: 4px 16px;
}

#header .header-container {
    display: flex;
    flex-flow: row wrap;
    min-height: 56px;

    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

#header .header-container .logo-container {
    width: auto;

    -webkit-box-flex: 1;
    -webkit-flex: 1 1 0px;
    -ms-flex: 1 1 0px;
    flex: 1 1 0px;
    min-height: 0px;
    min-width: 0px;
}



#header .header-container .gcse-search-container,
#header .header-container .github-link {
    width: auto;

    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    min-height: 0px;
    min-width: 0px;
}

#header .header-container #VerticaLogo {

}

#header .header-container #GithubLogo {
    width: 40px;
}

#header .gsc-control-cse {
    background: transparent;
    border: none;
}

.github-link {
    background: var(--primary);
    border-radius: 20px;
    color: white;
    font-size: 15px;
    height: 30px;
    line-height: 20px;
    padding: 5px 10px;
}

.github-link > * {
    display: inline-block;
    vertical-align: middle;
}

.github-link span {
    position: relative;
    top: 1px;
}

.github-link img {
    height: 20px;
    width: 20px;
    margin-left: 6px;
}

form.gsc-search-box {
    margin-bottom: 0 !important;
}

form.gsc-search-box table.gsc-search-box {
    margin-bottom: 0;
}

form.gsc-search-box table.gsc-search-box td.gsc-input {
    padding-right: 0;
}

form.gsc-search-box table.gsc-search-box .gsc-input-box {
    background: var(--light-gray);
    border-radius: 15px 0 0 15px;
    border-right: none;
}

form.gsc-search-box table.gsc-search-box input.gsc-input {
    background: transparent;
}

form.gsc-search-box table.gsc-search-box button.gsc-search-button {
    background: var(--light-gray);
    border-color: var(--border-gray);
    border-left: none;
    border-radius: 0 15px 15px 0;
    height: 30px;
    margin: 0;
    padding: 6px 13px 6px 8px;
}

form.gsc-search-box table.gsc-search-box button.gsc-search-button * {
    fill: #0078EF;
}

.breadcrumbs-container {
    border-bottom: 1px solid var(--light-gray);
    font-size: 14px;
    margin: 0 32px;
    padding: 16px 0;

    display: flex;
    flex-flow: row wrap;

    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.breadcrumbs-container #menu-trigger {
    width: auto;

    -webkit-box-flex: 1;
    -webkit-flex: 1 1 0px;
    -ms-flex: 1 1 0px;
    flex: 1 1 0px;
    min-height: 0px;
    min-width: 0px;

    position: relative;
}

#menu-trigger .menu-trigger-icon {
    background: var(--medium-gray);
    border: 3px solid white;
    border-radius: 50%;
    color: var(--primary);
    display: block;
    height: 40px;
    width: 40px;
    line-height: 40px;
    text-align: center;

    position: absolute;
    left: -52px;
    top: 50%;
    margin-top: -20px;
}

#menu-trigger .menu-trigger-icon:before {
    content: '';

    border-bottom: 3px solid var(--primary);
    border-right: 3px solid var(--primary);
    display: block;
    height: 14px;
    width: 14px;

    position: absolute;
    left: 7px;
    top: 10px;
    transform: rotate(-45deg) skew(-5deg, -5deg);
    transition: 250ms transform, 250ms left;
}

.menu-open #menu-trigger .menu-trigger-icon:before {
    left: 11px;
    transform: rotate(-225deg) skew(-5deg, -5deg);
}

.breadcrumbs-container .breadcrumbs {
    margin: 0;
    width: auto;

    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    min-height: 0px;
    min-width: 0px;
}

.breadcrumbs-container .breadcrumbs > * {
    display: inline-block;
    vertical-align: middle;
}

#sidebar {
    background: var(--light-gray);
    position: absolute;
    top: 90px;
    left: 100px;
    width: 300px;

    transition: left 250ms;
}

#sidebar.menu-open {
    left: 50px;
}

#sidebar .side-menu {
    list-style: none;
    padding: 5px 0 0;
}

#sidebar .side-menu a {
    display: block;
}

#sidebar .side-menu > li {
    margin-bottom: 6px;
}

#sidebar .side-menu > li > a {
    margin-left: -50px;
    padding-left: 50px;
}

#sidebar .side-menu > li.top-level > a {
    color: black;
    font-weight: 600;
    padding: 10px 24px 10px 45px;
}

#sidebar .side-menu > li.top-level.active > a {
    background: var(--medium-gray);
    border-left: 5px solid var(--primary);
    border-radius: 0 20px 20px 0;
    margin-right: 40px;
    padding-left: 40px;
}

#sidebar .side-menu li.active > a {
    color: var(--primary);
}

#sidebar .side-menu .submenu {
    font-size: 14px;
    list-style: none;
    margin-top: 16px;
    padding: 0;
}

#sidebar .side-menu .submenu a {
    color: var(--dark-gray);
}

#sidebar .side-menu > li > ul > li {
    margin-bottom: 12px;
}

#feedback-form {
    margin: 20px 25px 0 -25px;
}

#feedback-form > form {
    background: #f0f0f0;
    border: 1px solid var(--border-gray);
    font-size: 14px;
    padding: 16px;
}

#feedback-form > form .gform_fields {
    list-style: none;
    margin: 0;
    padding: 0;
}

#feedback-form > form .gfield {
    margin-bottom: 10px;
}

#feedback-form > form .gfield:before,
#feedback-form > form .gfield:after {
    content: '';
    display: table;
}

#feedback-form > form .gfield:after {
    clear: both;
}

#feedback-form > form .gfield_label {
    font-weight: 600;
}

#feedback-form > form .gfield_radio {
    list-style: none;
    margin: 0;
    padding: 0;
}

#feedback-form > form .gfield_radio [class*="gchoice"] {
    float: left;
    width: 30%;
}

#feedback-form > form .gfield_radio [class*="gchoice"] input {
    float: left;
    margin: 1px 0 0;
}

#feedback-form > form .gfield_radio [class*="gchoice"] input:checked ~ label {
    color: var(--primary);
}

#feedback-form > form .gfield_radio [class*="gchoice"] label {
    margin: 0 0 0 5px;
}

#feedback-form > form textarea {
    border-color: var(--border-gray);
    max-width: 100%;
    padding: 8px;
}

#feedback-form > form textarea::placeholder {
    color: var(--dark-gray);
    font-style: italic;
}

#feedback-form .gform_button {
    background: var(--primary);
    border: none;
    border-radius: 16px;
    color: white;
    font-weight: 600;
    letter-spacing: .25px;
    line-break: 1;
    padding: 9px 14px 7px;

    -webkit-font-smoothing: antialiased;
}

#feedback-form .gform_button[disabled] {
    opacity: .5;
}

/*******************************/
/************ Fonts ************/
/*******************************/
@font-face {
    font-family: 'Entypo';
    src: url('../fonts/Entypo.otf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SF';
    src: url('../fonts/SF-UI-Display-Regular.otf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Calibri';
    src: url('../fonts/Calibri/Calibri Regular.ttf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Calibri_bt';
    src: url('../fonts/Calibri/Calibri Bold.TTF');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Effra_Std_Lt';
    src: url('../fonts/Aktiv Grotesk/Effra_Std_Lt.ttf');
    font-weight: normal;
    font-style: normal;
}
/* all */
body {
    zoom: auto;
    min-width: 400px;
    font-family: 'Calibri';
    background: var(--light-gray);
}
a {
    text-decoration: none;
}
.vml_title {
    font-size: 1.4em;
    font-family: 'Effra_Std_Lt';
}
.vml_subtitle {
    font-size: 1em;
    font-family: 'Calibri';
}
/* Header */
#header {
    border-bottom: 1px solid #CCC;
    position: fixed;
    width: 100%;
    right: 0px;
    background: white;
    top: 0px;
    z-index: 1000;
}
#logo_title {
    color: white;
    font-family: 'Calibri';
}
#all_options {
    right: 2px;
    top: 65px;
    position: absolute;
    width: 230px;
    background: white;
    list-style: none;
    border: 1px solid #CCC;
    display: none;
}
#all_options div:hover {
    background: #FE5016;
    color: #FFFFFF;
}
#all_options div {
    width: 100%;
    left: 30px;
    font-size: 1.1em;
    border-bottom: 1px solid #CCC;
    color: black;
    height: 70px;
}
#all_options .menu_title {
    margin-left: 15px;
}
#all_options .icon {
    float: left;
    font-size: 2.5em;
    margin-top: -12px;
    margin-right: 9px;
}
#VerticaLogo {
    height: 35px;
}

#main_menu {
    position: absolute;
    right: -50px;
    color: #263133;
} 
.icon {
    font-family: 'Entypo';
}
/* Footer */
#footer {
    margin-top: 50px;
    height: 40px;
    font-size: 1em;
}
#copyright {
    margin-top: 15px;
    margin-left: 7px;
}
/* Button */
button {
    border-radius: 20px;
    width: 60px;
}
button:hover {
    background: #0073E7;
    color: #FFFFFF;
}
button .icon{
    font-size: 3em;
}
/* Content */
#content {
    background: white;
    margin-bottom: 32px;
    position: absolute;
    top: 90px;
    right: 50px;
    width: calc(100% - 100px);
    transition: 250ms width;
}

#content.menu-open {
    width: calc(100% - 400px);
}

#content .highlight {
    margin-left: 20px; 
    margin-right: 20px;
}
#content h1 {
    font-size: 1.8em;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
    margin-top: 18px;
    margin-bottom: 9px;
    margin-left: 40px;
    height: 40px;
    border-bottom: 1px solid #EEE;
    font-family: 'Effra_Std_Lt';
}
#content h2 {
    font-family: inherit;
    font-weight: 500;
    color: inherit;
    margin-top: 18px;
    margin-bottom: 9px;
    margin-left: 40px;
    height: 40px;
    border-bottom: 1px solid #EEE;
    font-family: 'Effra_Std_Lt';
}
#content p {
    margin-left: 40px;
    margin-right: 40px;
    font-size: 1.1em;
    text-align: justify;
    line-height: 1.5em;
}
#content a {
    color: var(--primary);
}
#content .ul_content {
    font-size: 1.1em;
}
#content .ul_content li {
    margin: 10px;
}
/* Regular */
#advantages a {
    color: black;
}
#advantages img {
    margin-top: 10px;
    margin-bottom: -5px;
    height: 120px;
}
ul#advantages {
    margin-left: -40px;
}
#advantages li {
    text-align: center;
    width: 265px;
    list-style-type: none;
    min-height: 200px;
    display: inline-block;
    margin: 10px;
}
#advantages li:hover {
    background: #EFEFEF;
    border: 1px solid #CFCFCF;
}
#advantages li div {
    font-size: 1em;
    margin-bottom: 5px;
    margin-left: 10px;
    margin-right: 10px;
    font-family: 'Calibri';
}
#advantages h3 {
    font-family: 'Effra_Std_Lt';
    font-size: 1.2em;
}
#advantages .small {
    font-size: 0.8em;
}
/* Main */
#advantages_main a {
    color: black;
}
#advantages_main img {
    margin-top: 10px;
    margin-bottom: -5px;
    height: 80px;
}
ul#advantages_main {
    margin-left: -40px;
}
#advantages_main li {
    text-align: center;
    width: 300px;
    list-style-type: none;
    display: inline-block;
    margin: 10px;
}
#advantages_main li:hover {
    background: #FFFFCC;
}
#advantages_main li div {
    font-size: 1em;
    margin-bottom: 5px;
    margin-left: 10px;
    margin-right: 10px;
    font-family: 'Calibri';
}
#advantages_main h3 {
    font-family: 'Effra_Std_Lt';
    font-size: 1.2em;
}
#advantages_main .description {
    display: none;
}
#advantages_main li:hover .description {
    display: inline-block;
}
#advantages_main li:hover {
    background-color: #FFF;
    color: black;
}
#advantages_main li:hover img {
    display: none;
}
#advantages_main li:hover .button {
    background-color: #1e79e0;
    color: white;
}
#advantages_main .button {
    width: 150px;
}
/* Examples */
#examples a {
    color: black;
}
#examples img {
    margin-top: 10px;
    margin-bottom: -5px;
    height: 150px;
}
ul#examples {
    margin-left: -40px;
}
#examples li {
    text-align: center;
    list-style-type: none;
    display: inline-block;
    margin: 10px;
    width: 240px;
}
#examples li div {
    font-size: 1em;
    margin-bottom: 5px;
    margin-left: 10px;
    margin-right: 10px;
    font-family: 'Calibri';
}
#examples h3 {
    font-family: 'Effra_Std_Lt';
    font-size: 1.3em;
}
#examples .button, #advantages_main .button {
    text-align: center;
    font-family: 'Effra_Std_Lt';
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    transition: background-color 0.25s ease-out, color 0.25s ease-out;
    vertical-align: middle;
    border: 1px solid #1e79e0;
    border-radius: 1000px;
    padding: 0.85em 1em;
    margin-top: 10px;
    font-size: 1rem;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: .75px;
}
#examples .button {
    width: 200px;
}
#examples .button:hover {
    background-color: #1e79e0;
    color: white;
}
/* table */
.functions_description {
    border: medium solid #1e79e0;
    border-collapse: collapse;
    width: calc(100% - 50px);
    margin-left: 25px;
}
.functions_description th {
    white-space:nowrap;
    border: thin solid #1e79e0;
    width: 50%;
    padding: 5px;
    background-color: #1e79e0;
    color: white;
    font-family: 'Calibri';
}
.functions_description td {
    border: thin solid #263133;
    width: 50%;
    padding: 5px;
    background-color: #ffffff;
}
/* parameters and see also */
#parameters{
    margin-left: 25px;
    margin-right: 25px;
}
#parameters th {
    white-space:nowrap;
    border: thin solid #263133;
    padding: 5px;
    background-color: #1e79e0;
    color: white;
    font-family: 'Calibri';
}
#parameters td {
    padding: 5px;
    background-color: #ffffff;
}
#parameters td ul {
    list-style-type: none;
    margin-top: 3px;
}
b {
    font-family: 'Calibri';
}
#parameters td ul b {
    font-family: 'Calibri';
}
#parameters .yes {
    color: green;
    text-align: center;
    font-size: 1.4em;
}
#parameters .no {
    color: red;
    text-align: center;
    font-size: 0.8em;
}
#parameters .type {
    color: #7777FF;
    text-align: center;
}
#parameters .param_name {
    text-align: center;
    font-weight: bold;
    font-family: 'Calibri';
}
#seealso{
    margin-left: 25px;
    margin-right: 25px;
}
/* Backgrounds */
#booking {
    width: 100%;
    height: 400px;
    background: url("../img/examples/bruce-mars-ieIY61ZHhs8-unsplash-min.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#amazon {
    width: 100%;
    height: 400px;
    background: url("../img/examples/meritt-thomas-8-ENEa3xPws-unsplash-min.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#iris {
    width: 100%;
    height: 400px;
    background: url("../img/examples/aliona-gumeniuk-1620RYaFv7E-unsplash-min.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#pokemon {
    width: 100%;
    height: 400px;
    background: url("../img/examples/megan-mcclain--vu--HcxN_M-unsplash-min.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#winequality {
    width: 100%;
    height: 400px;
    background: url("../img/examples/zan-WrueFKpTlQs-unsplash-min.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#smart_meter {
    width: 100%;
    height: 400px;
    background: url("../img/examples/thomas-kelley-xVptEZzgVfo-unsplash-min.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#titanic {
    width: 100%;
    height: 400px;
    background: url("../img/examples/library-of-congress-b7MQq3IovwQ-unsplash-min.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#football {
    width: 100%;
    height: 400px;
    background: url("../img/examples/sandro-schuh-HgwY_YQ1m0w-unsplash-min.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#africa_education {
    width: 100%;
    height: 400px;
    background: url("../img/examples/doug-linstedt-jEEYZsaxbH4-unsplash-min.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#movies {
    width: 100%;
    height: 400px;
    background: url("../img/examples/myke-simon-atsUqIm3wxo-unsplash-min.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#covid19 {
    width: 100%;
    height: 400px;
    background: url("../img/examples/cdc-k0KRNtqcjfw-unsplash.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#spam {
    width: 100%;
    height: 400px;
    background: url("../img/examples/luis-villasmil-4V8uMZx8FYA-unsplash.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#telco_churn {
    width: 100%;
    height: 400px;
    background: url("../img/examples/hassan-ouajbir-IYU_YmMRm7s-unsplash-min.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}