/* default css for all pages */
@charset "utf-8";
/*@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700); *//*import google font (open sans)*/
/*load it locally*/
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/Open_Sans/OpenSans-Regular.ttf');
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: url('fonts/Open_Sans/OpenSans-Light.ttf');
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: url('fonts/Open_Sans/OpenSans-Semibold.ttf');
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/Open_Sans/OpenSans-Bold.ttf');
}

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/raleway/Raleway-Regular.ttf');
}
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 300;
    src: url('fonts/raleway/Raleway-Light.ttf');
}
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 600;
    src: url('fonts/raleway/Raleway-Semibold.ttf');
}
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 800;
    src: url('fonts/raleway/Raleway-Bold.ttf');
}

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 300;
    src: url('fonts/dm_sans/DMSans-Regular.ttf');
}

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 600;
    src: url('fonts/dm_sans/DMSans-Medium.ttf');
}

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 800;
    src: url('fonts/dm_sans/DMSans-Bold.ttf');
}

@font-face {
    font-family: 'Galaxie Polaris';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/Galaxie_Polaris/Galaxie-Polaris-Book.otf');
}
@font-face {
    font-family: 'Galaxie Polaris';
    font-style: normal;
    font-weight: 300;
    src: url('fonts/Galaxie_Polaris/Galaxie-Polaris-Light.otf');
}
@font-face {
    font-family: 'Galaxie Polaris';
    font-style: normal;
    font-weight: 600;
    src: url('fonts/Galaxie_Polaris/Galaxie-Polaris-Medium.otf');
}
@font-face {
    font-family: 'Galaxie Polaris';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/Galaxie_Polaris/Galaxie-Polaris-Bold.otf');
}
@font-face {
    font-family: 'Galaxie Polaris';
    font-style: normal;
    font-weight: 800;
    src: url('fonts/Galaxie_Polaris/Galaxie-Polaris-Heavy.otf');
}

/* define new font-family for chinese characters */
@font-face {
    font-family: dfKai;
    src: url('fonts/kaiu.ttf');
}
@font-face {
    font-family: myOpenSans;
    src: url('fonts/OpenSans-CondBold.ttf');
}

/* font-family for subscription agreement */
@font-face {
    font-family: 'Campton';
    font-style: normal;
    font-weight: 300;
    src: url('fonts/campton/Campton-Light.ttf');
}
@font-face {
    font-family: 'Campton';
    font-style: normal;
    font-weight: 500;
    src: url('fonts/campton/Campton-Book.ttf');
}
@font-face {
    font-family: 'Campton';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/campton/Campton-Medium.ttf');
}

@font-face {
    font-family: 'Campton';
    font-style: normal;
    font-weight: 900;
    src: url('fonts/campton/Campton-Bold.otf');
}
@font-face {
    font-family: 'Museo Sans';
    font-style: normal;
    font-weight: 100;
    src: url('fonts/Museo_Sans/MuseoSans_100.woff2') format('woff2'),
    url('fonts/Museo_Sans/MuseoSans_100.woff') format('woff'),
    url('fonts/Museo_Sans/MuseoSans_100.otf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Museo Sans';
    font-style: normal;
    font-weight: 300;
    src: url('fonts/Museo_Sans/MuseoSans_300.woff2') format('woff2'),
    url('fonts/Museo_Sans/MuseoSans_300.woff') format('woff'),
    url('fonts/Museo_Sans/MuseoSans_300.otf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Museo Sans';
    font-style: normal;
    font-weight: 500;
    src: url('fonts/Museo_Sans/MuseoSans_500.woff2') format('woff2'),
    url('fonts/Museo_Sans/MuseoSans_500.woff') format('woff'),
    url('fonts/Museo_Sans/MuseoSans_500.otf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Museo Sans';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/Museo_Sans/MuseoSans_700.woff2') format('woff2'),
    url('fonts/Museo_Sans/MuseoSans_700.woff') format('woff'),
    url('fonts/Museo_Sans/MuseoSans_700.otf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Museo Sans';
    font-style: normal;
    font-weight: 900;
    src: url('fonts/Museo_Sans/MuseoSans_900.woff2') format('woff2'),
    url('fonts/Museo_Sans/MuseoSans_900.woff') format('woff'),
    url('fonts/Museo_Sans/MuseoSans_900.otf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Be Vietnam';
    font-style: normal;
    font-weight: 100;
    src: url('fonts/Be_Vietnam/BeVietnam_100.ttf') format('truetype');
    font-display: block;
}

@font-face {
    font-family: 'Be Vietnam';
    font-style: normal;
    font-weight: 300;
    src: url('fonts/Be_Vietnam/BeVietnam_300.ttf') format('truetype');
    font-display: block;
}

@font-face {
    font-family: 'Be Vietnam';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/Be_Vietnam/BeVietnam_400.ttf') format('truetype');
    font-display: block;
}

@font-face {
    font-family: 'Be Vietnam';
    font-style: normal;
    font-weight: 500;
    src: url('fonts/Be_Vietnam/BeVietnam_500.ttf') format('truetype');
    font-display: block;
}

@font-face {
    font-family: 'Be Vietnam';
    font-style: normal;
    font-weight: 600;
    src: url('fonts/Be_Vietnam/BeVietnam_600.ttf') format('truetype');
    font-display: block;
}

@font-face {
    font-family: 'Be Vietnam';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/Be_Vietnam/BeVietnam_700.ttf') format('truetype');
    font-display: block;
}

@font-face {
    font-family: 'Be Vietnam';
    font-style: normal;
    font-weight: 800;
    src: url('fonts/Be_Vietnam/BeVietnam_800.ttf') format('truetype');
    font-display: block;
}

@font-face {
    font-family: 'Campton Book';
    src: url('fonts/campton/Campton-Book.ttf') format('truetype');
}

html {
    height: 100%;
}
body {
    font-family: "DM Sans", Helvetica, Arial, Verdana;
    margin: auto;
    height: 100%;
    color: #464646;
    -webkit-tap-highlight-color: transparent;
}
textarea {
    font-family: "DM Sans", Helvetica, Arial, Verdana;
}
form {
    margin: 0;
}
#body_container {
    width: 100%;
    height: 100%;
    /*-webkit-transition: filter 0.3s ease;*/
    /*-moz-transition: filter 0.3s ease;*/
    /*-ms-transition: filter 0.3s ease;*/
    /*-o-transition: filter 0.3s ease;*/
    /*transition: filter 0.3s ease;*/
}
#header_container {
    background: transparent;
    position: relative;
    z-index: 3;
    width: 100%;
    
    height: 60px;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/*
#notification_container {
    background: transparent;
    width: 100%;
}*/
.separator {
    background: url('../images/gb/separator_header.png') no-repeat top center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: contain;
}
#content_container {
    position: relative;
    z-index: 1;
    text-align: center;
    width: 100%;
}
.footer_space {
    padding-bottom: 10px;
}
#footer_container {
    width: 76px;
    height: 20px;
    font-size: 10pt;
    text-align: center;
    position: fixed;
    z-index: 2;
    bottom: 0;
    left: 50%;
    margin-left: -38px;
}
#footer_container a {
    color: #888;
    background: #FFF;
    text-decoration: none;
    padding: 0 10px 0 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.profile_picture {
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.profile_picture_text {
    color: #FFFFFF;
    background-color: #BBBBBB;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    font-size: 70px;
    line-height: 105px;
    text-align: center;
}
.question_part_container {
    display: inline-block;
    text-align: left;
    width: 100%;
    margin: 7px 0;
/*    height: 100%;*/
/*    padding: 10px;*/
/*    -webkit-box-sizing: border-box;*/
/*    -moz-box-sizing: border-box;*/
/*    box-sizing: border-box;*/
}
/* to hide the full question by default (feature to show the other parts of the question) */
.full_question {
    display: none;
    cursor: pointer;
    color: #2980b9;
    border-left: 5px solid #2980b9;
    padding-left: 10px;
    margin: 10px 0;
}
.full_question:hover {
    background-color: rgba(41, 128, 185, 0.1);
}
.full_question_title {
    font-weight: 900;
    background-color: rgba(41, 128, 185, 0.1);
    padding: 10px;
}
.full_question_text {
    display: none;
}
.grouping_part {
    display: inline-block;
    background-color: #DDDDDD;
    border: 1px solid #DDDDDD;
    color: #FFFFFF;
    text-align: center;
    width: 18px;
    height: 18px;
    line-height: 16px;
    font-size: 0.75em;
    margin: 0 5px;
    vertical-align: bottom;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.grouping_part_active {
    background-color: #464646;
    border-color: #464646;
}
.q_answer_container {
    padding: 10px;
}
.q_answer_image_container {
    padding: 10px;
}
.answer_text {
    padding-bottom: 5px;
}
.answer_image_container {
    text-align: center;
    border: 1px solid #DDDDDD;
    display: inline-block;
    margin: 20px 10px 10px 0;
    background: #FDFDFD;
    vertical-align: top;
    position: relative;
}
.image_number {
    position: absolute;
    top: -20px;
    line-height: 20px;
    width: 100%;
    outline: 1px solid #DDDDDD;
    background-color: #DDDDDD;
    color: #FFFFFF;
    text-align: left;
    font-size: 0.8em;
    padding-left: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.answer_image_container img {
    border-style: none;
    cursor: pointer;
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
    max-width: 360px;
    max-height: 270px;
    position: relative;
}
.q_comment_container {
    padding: 10px;
}
.comment_text {
    padding: 5px 10px;
    border-left: 8px solid #F0F0F0;
}
.comment_date {
    font-size: 0.7em;
    padding: 0 10px 0 0;
}
.sq_solution_container {
/*    display: none;*/
/*    padding: 10px;*/
}
.question_md_text {
    padding-bottom: 5px;
}
.question_md_image {
    text-align: center;
    padding-bottom: 10px;
}
.question_md_image img {
    border-style: none;
    cursor: pointer;
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
    max-width: 500px;
    position: relative;
}
.question_sd_text {
    padding-bottom: 5px;
}
.question_sd_image {
    text-align: center;
    padding-bottom: 10px;
}
.question_sd_image img {
    border-style: none;
    cursor: pointer;
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
    max-width: 500px;
    position: relative;
}
.question_text {
    padding-bottom: 5px;
}
.question_image {
    text-align: center;
    padding-bottom: 10px;
}
.question_image img {
    border-style: none;
    cursor: pointer;
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
    max-width: 500px;
    /*position: relative;*/
}
.group_title {
    font-weight: bold;
}
.solution_text {
    font-weight: initial;
    padding-bottom: 5px;
}
.solution_image {
    text-align: center;
    padding-bottom: 10px;
}
.solution_image img {
    border-style: none;
    cursor: pointer;
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
    max-width: 500px;
    position: relative;
}
.question_numbering {
    display: inline-block;
}
.question_subscribe_button {
    display: inline-block;
    cursor: pointer;
    /*font-size: 1.2em;*/
    font-weight: 100;
    padding: 10px 20px;
    margin: 5px 0;
    color: #FFFFFF;
    background-color: #27aae1;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.question_subscribe_button:hover {
    opacity: 0.9;
}
.plain_href {
    text-decoration: none;
}
.ds { /*ds: disable selection */
    /* disable the text selection/highlighting */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* also disable the blinking effect for safari */
    -webkit-tap-highlight-color: transparent;
}
.dev_panel {
    display: none;
}
.boxsizingBorder {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.css_arrow {
    position: absolute;
    top: 50%;
    width: 2px;
    height: 40px;
    background-color: #27aae1;
}
.css_arrow_bg {
    position: absolute;
    top: 50%;
    width: 50px;
    height: 95px;
    opacity: 0.3;
    background: #FFFFFF;
    border-radius: 3px;
}
.arrow1 {
    -webkit-transform: skew(45deg);
    -moz-transform: skew(45deg);
    -o-transform: skew(45deg);
}
.arrow2 {
    -webkit-transform: skew(-45deg);
    -moz-transform: skew(-45deg);
    -o-transform: skew(-45deg);
}

/* general popup css */
.popup_background {
    display: block;
    background-color: #FFFFFF;
    position: fixed;
    z-index: 15;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0.5;
}
.popup_container {
    position: absolute;
    z-index: 15;
    top: 50%;
    left: 50%;
    background-color: #FFFFFF;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-box-shadow: 0 0 15px 0 #AAAAAA;
    -moz-box-shadow: 0 0 15px 0 #AAAAAA;
    box-shadow: 0 0 15px 0 #AAAAAA;
}
.popup_close {
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
    padding: 3px 10px;
    font-size: 2em;
    font-weight: 100;
    line-height: 0.8;
    opacity: 0.3;
}
.popup_close:hover {
    opacity: 0.8;
}

@media only screen and (max-width: 600px) {
    .answer_image_container {
        max-width: 100%;
    }
    .answer_image_container img {
        max-width: 100%;
    }
    .question_md_image img {
        max-width: 95%;
    }
    .question_sd_image img {
        max-width: 95%;
    }
    .question_image img {
        max-width: 95%;
    }
    .solution_image img {
        max-width: 95%;
    }
}
.blur {
    /*-moz-filter: blur(3px);*/
    /*-webkit-filter: blur(3px);*/
    /*filter: blur(3px);*/
}
.query_speed {
    position: fixed;
    z-index: 999;
    bottom: 0;
    left: 0;
    font-family: "Courier New";
    text-align: left;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: #8E76AA;
    display: inline-block;
    margin: 0 auto;
    padding: 3px 5px;
    background-color: #2B2B2B;
}
.query_speed:hover {
    background-color: #3B3B3B;
}
.query_speed_function {
    display: inline-block;
    vertical-align: top;
}
.query_speed_value {
    display: inline-block;
    vertical-align: top;
    color: #A9B7C6;
    padding-left: 10px;
}
.speed_value_blur {
    opacity: 0.5;
}

/* VARIABLE COLOR */
:root {
    --navy_blue: #262262;
    --sky_blue: #27AAE1;
    --apricot_orange: #F7941E;
    --cloud_grey: #F1F2F2;
    --black: #231F20;
    --steel_grey: #837E7E;
    --dark_grey: #433E3E;
    --white: #FFFFFF;

    --navy_blue_hover: #161252;
    --sky_blue_hover: #179AD1;
    --apricot_orange_hover: #E7840E;
    --cloud_grey_hover: #E1E2E2;
    --black_hover: #130F10;
    --steel_grey_hover: #736E6E;
    --dark_grey_hover: #332E2E;
    --white_hover: #EFEFEF;

    --apricot_orange_hover_2: #FBB04C;
}