:root {
  /* Threshold for portrait and landscape */

  --thresholdPortrait: 600;
  --thresholdLandscape: 601;
  --thresholdLandscape_px: 601px;
  --width_button_600px: 43%;
  --width_button_950px: 29%;
  --width_button_951px: 18%;

  /* background webpage */
  --background_color_web: #eee;

  --knob_delay: 1.5s;

  --image_button_h1: 3em; */
  --image_button_w2: calc(var(--image_button_w1) + 0.25em);
  --image_button_h2: calc(var(--image_button_h1) + 0.25em);

  /*--gpx_button_w1: 23em;
  --gpx_button_h1: 3em;*/
  --gpx_button_w2: calc(var(--gpx_button_w1) + 0.25em);
  --gpx_button_h2: calc(var(--gpx_button_h1) + 0.25em);

  /* background-image: linear-gradient(145deg, #262626, #606060); */

  --button_upload_font_size   : 1.35em;
  --button_select_text_size   : 1.0em;
  --button_select_color       : #148c9f;
  --button_select_text_color  : #fff;
  --button_dropdown_text_size : 1.0em;
  --button_dropdown_text_color: #fff;

  --button_radius: 6px;
  --button_width: 220px;
  /* 2xwidth + 10px gap */
  --button_width_wide: 260px;
  --button_height: 50px;
  --button_height_high: 70px;
}


.textbox_help
{
  text-align: left;
  display: inline-block;
  padding: 15px 20px;
  font-size: 16px;
  font-weight: normal;
  /* cursor: pointer; */
  /* background-color: #d2cec6; */
  color: #000;
  width:45%;
  border-radius:7px;
}

/* Set responsive size for video button */
@media screen and (max-width: 600px) {
  :root {
    --image_button_w1 : 10em;
    --gpx_button_w1   : 10em;
    --video_settings_w: 13em;
    --video_settings_h: 3em;
    --image_grid_but_w: 9em;
    --image_grid_but_h: 3em;
    --gpx_button_h1   : 4em;
    --image_button_h1 : 4em;
    --toggle_size     : 5vmin;
  }
  .textbox_help {
    width: 95%
  }
}

@media screen and (min-width: 601px) and (max-width: 775px) {
  :root {
    --image_button_w1: 17vw;
    --gpx_button_w1  : 17vw;
    --video_settings_w: 15em;
    --video_settings_h: 3em;
    --image_grid_but_w: 9em;
    --image_grid_but_h: 3em;
    --gpx_button_h1  : 4em;
    --image_button_h1: 4em;
    --toggle_size    : 2vmin;
  }
  .textbox_help {
    width: 60%
  }
}

@media screen and (min-width: 776px) and (max-width: 950px) {
  :root {
    --image_button_w1: 17vw;
    --gpx_button_w1  : 17vw;
    --video_settings_w: 15em;
    --video_settings_h: 3em;
    --image_grid_but_w: 9em;
    --image_grid_but_h: 3em;
    --gpx_button_h1  : 4em;
    --image_button_h1: 4em;
    --toggle_size    : 2vmin;
  }
  .textbox_help {
    width: 60%
  }
}

@media screen and (min-width: 951px) {
  :root {
    --image_button_w1: 14em;
    --gpx_button_w1  : 14em;
    --video_settings_w: 18em;
    --video_settings_h: 4em;
    --image_grid_but_w: 9em;
    --image_grid_but_h: 3em;
    --gpx_button_h1  : 4em;
    --image_button_h1: 4em;
    --toggle_size    : 2vmin;
  }
  .textbox_help {
     width: 35%
  }
}

body {
  margin: 0;
  padding: 0;
  background: #000;
  /* font-family: 'Roboto', Arial, Helvetica, serif; */
}

.div_gradient
{
  background: #fff;
  /* Padding and margin needed to keep clearance from main image to canvas */
  padding:80px 0px;
  margin-top:0px;
}

@media screen and (max-width:600px)
{
  .div_gradient
  {
    background: #eee;
    /* Padding and margin needed to keep clearance from main image to canvas */
    padding:270px 0px;
  }
}