body{
    /* background-color: rgba(1,11,23,1); */
    background-color: white;
    width:100%;
    height:100%;
    overflow:hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    position: absolute;
}

html{
    overflow:hidden;
    width:100%;
    height:100%;
    position: absolute;
}

#app{
    width:100%;
    height:100%;
    position: absolute;
}

canvas{
    cursor: all-scroll;
    overflow:hidden;
    touch-action: manipulation;
}


svg {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
    backface-visibility: hidden;
    transform: translateZ(0);
  }

.noselect {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
   }

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}


.kg-mobile-topGrad{
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#002e43+0,002e43+100&1+0,0+100 */
background: -moz-linear-gradient(top, rgba(0,46,67,1) 0%, rgba(0,46,67,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,46,67,1) 0%,rgba(0,46,67,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,46,67,1) 0%,rgba(0,46,67,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002e43', endColorstr='#00002e43',GradientType=0 ); /* IE6-9 */
    width:100%;
    height:16%;
    position:absolute;
}

#debug{
    color:white;
    position: absolute;
    pointer-events: none;
    font-family: Arial, Helvetica, sans-serif;
    width:100%;
    left:2%;
    top:80%;
    overflow:hidden;
}

.forceGpu{
    -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   backface-visibility: hidden;

   -webkit-perspective: 1000;
   -moz-perspective: 1000;
   -ms-perspective: 1000;
   perspective: 1000;

   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}

#kg-left-gradient{
    position:absolute;
    width:55%;
    height:100%;
    top:0; left:0;
    pointer-events:none;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#010b17+0,010b17+100&1+0,0+100 */
    background: -moz-linear-gradient(left, rgba(1,11,23,1) 0%, rgba(1,11,23,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(1,11,23,1) 0%,rgba(1,11,23,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(1,11,23,1) 0%,rgba(1,11,23,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#010b17', endColorstr='#00010b17',GradientType=1 ); /* IE6-9 */
}

#kg-label-container{
    width:100%;
    height:100%;
    pointer-events:none;
    position:absolute;
    top:0; left:0;
    overflow:hidden;
}

#kg-ui{
    width:100%;
    height:100%;
    pointer-events:none;
    position:absolute;
    top:0; left:0;
}

#kg-ui-header h2{
    color:white;
    font-size: 40px;
    text-transform: uppercase;
    font-family: "alternate-gothic-no-2-d",sans-serif;
    position: relative;
    padding:0px;
    margin:0px;
    margin-bottom: -25px;
    font-weight: 100;
}

#kg-ui-header h1{
    position: relative;
    color:white;
    font-size: 105px;
    text-transform: uppercase;
    font-family: "alternate-gothic-no-2-d",sans-serif;
    padding:0px;
    margin:0px;
    margin-bottom: -45px;
    font-weight: 100;
}

#kg-ui-region-selector-text{
    pointer-events:none;
    position:relative;
    font-family: "alternate-gothic-no-2-d",sans-serif;
    font-size: 17px;
    text-transform: uppercase;
    color: #626f79;
}

#kg-ui-region-selector select{
    pointer-events: all;
    margin-top:10px;
    width: 200px;
    padding: 7px 35px 5px 10px;
    font-size: 16px;
    border: 1px solid #cacaca;
    height: 34px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0%;
    background: url(assets/ui/greenArrowDown.png) 90% / 4.5% no-repeat #eee;
    font-family: "alternate-gothic-no-2-d",sans-serif;
    font-size: 17px;
    text-transform: uppercase;
    color: #626f79;
}

.sub-text{
    position: relative;
    display:inline-block;
    color: #66cc33;
    font-family: "alternate-gothic-no-2-d",sans-serif;
    font-weight: 100;
    font-size: 22px;
    top: 20px;
    text-transform: uppercase;
    width: 350px;
}

.floater{
    position:relative;
    float:left;
}

.vert-split{
    height:13%;
    width:1px;
    margin-top:3px;
    position: absolute;
    left:50%;   
    background-color: #626f79;
}

.horz-split{
    height:1px;
    width:100%;
    background-color: #626f79;
    top:60px;
    position: relative;
}

/*--------------------------------------------------------------
 * content ui desktop
----------------------------------------------------------------*/

#kg-desktop-content{
    max-width: 1200px;
    width:95%;
    left:50%;
    transform: translateX(-50%);
    height:100%;
    position: relative;
  
}

#kg-desktop-content-container{
    width:27%;
    height:100%;
    min-width:220px;  
    float:left;
   /* margin-right:2.5%;*/
}

.kg-header{
    font-family: "alternate-gothic-no-2-d",sans-serif;
    color:white;
    display:block;
    padding:0%;
    margin:0%;
    text-transform: uppercase;
    white-space: nowrap;
}

.kg-h1-green{
    color:#68ca37;
    white-space: nowrap;
}

.kg-header-y{
    padding-top:5vh;
}

#kg-desktop-btn-container{
    width:260px;
    height: 30px;
    margin-top:1.6em;

}

#kg-desktop-instructions{
    font-family: Helvetica, Arial,  sans-serif;
    font-size:11px;
    color: #8c98a4;
    line-height:1.7em;
    margin-top: 1.2em;
}

#kg-spinner{
    position:absolute;
    width:100%;
    height:100%;
    pointer-events: all;
    background-color: rgba(1,11,23,1);
    top:0px;
    left:0px;
}

/*--------------------------------------------------------------
 * List view
----------------------------------------------------------------*/

#kg-desktop-listView{
    width:calc(70% - 50px);
    height:100%;
    float:right;
    visibility: hidden;
}

#kg-desktop-ui{

}

#kg-desktop-listView-y{
    position:relative;
    width:100%;
    height:auto;
    margin-top:20%;
}

#kg-desktop-listView-header{
    width: 100%;
    height:31px;   /*   for auto height    
    background-color: rgba(0,220,0,0.2) ;*/
}

#kg-desktop-listView-h-wrapper{
    position:absolute;  /*   for auto height    */
}

.kg-listView-hline{
    width:100%;
    height: 1px;
    background-color:white;
    position:relative;
    top:25px;
    left:0px;
}

.kg-listView-h1{
    color:white;
    font-size: 32px;
    font-weight: 100;
    font-family: "alternate-gothic-no-2-d",sans-serif;
    text-transform: uppercase;
}

.g{
    color: #66cc33;
}

#kg-listView-bg{
    width:100%;
    height: 100%;
    position:absolute;
    visibility: hidden;
    opacity:0.0;
    pointer-events: all;
    background: #061b31; /* Old browsers */
    background: -moz-linear-gradient(top, #061b31 0%, #2d4757 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #061b31 0%,#2d4757 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #061b31 0%,#2d4757 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#061b31', endColorstr='#2d4757',GradientType=0 ); /* IE6-9 */
}

#kg-desktop-listView-item-container{
    width:100%;
    top: 90px;
    position:absolute;
  }

  .kg-listView-item-cols{
      column-count: 4;
      column-width: 185px;
      column-gap: 0px;
  }

  .kg-listView-item-cols ul {
      list-style-type: none;
      padding: 0;
      padding: 0 ;
      margin: 0 ;
      font-family: "alternate-gothic-no-2-d",sans-serif;
      text-transform: uppercase;
      color:white;
      font-size: 17px;
      font-weight: 100;
      letter-spacing: 1px;
    }

    .kg-listView-item-cols ul li {
      list-style-type: none;
      padding: 0;
      padding-left: 0px ;
      margin-left: 0px ;
      text-indent: 0px ;
      margin-bottom: 22px;
      cursor: pointer;
    }

/*--------------------------------------------------------------
 * Media Queries
----------------------------------------------------------------*/

/* desktop max window */
@media screen and (min-width: 1200px) {

    .kg-h1{
        font-size: 47px;
        margin-bottom: -0.40em;
    }
    
    .kg-h2{
        font-size: 109px;
        margin-bottom: -0.27em;
    }

    .kg-h1-green{
        font-size: 35px;
        margin-top: 0.6em;
    }

}

/* desktop small window */
@media screen and (max-width: 1200px) {
 
    .kg-h1{
        font-size: 3.7vw;
        margin-bottom: -0.40em;
    }
    
    .kg-h2{
        font-size: 8.5vw;
        margin-bottom: -0.27em;
    }

    .kg-h1-green{
        font-size: 2.8vw;
        margin-top: 0.6em;
    }
}

@media screen and (max-width: 900px) {
    body .kg-desktop-viewList{
        margin-right: 1.5%;
    }

    body .kg-listView-item-cols ul li{
        margin-bottom: 2.0vw;
    }

    body .kg-listView-item-cols ul{
        font-size:2vw;
    }

    body .kg-listView-item-cols{
        column-count: 2;
        column-width: 155px;
        column-gap: 0px;
    }
}

@media screen and (max-width: 820px) {
    #kg-desktop-listView{
        width:calc(95% - 220px - 30px);
        margin-right: 1.5%;
    }
}

/*
    below page fold   and (min-width:1200px) 
    note: dropdowns not scaling with queries may need to do it manually
*/
@media screen and (max-height: 650px)  {
    .kg-h1{
        font-size: 7.0vh;
        /* margin-bottom: -0.55em; */
    }
    
    .kg-h2{
        font-size: 16.5vh;
        /* margin-bottom: -0.42em; */
    }

    .kg-h1-green{
        font-size: 5.4vh;
        /* margin-top: 0.6em; */
    }

    #kg-desktop-listView-y{
        margin-top:15vh;
    }

    #kg-desktop-listView-item-container{
        top:10.0vh;
    }

}


/* minutae */
@media screen and (max-width: 1020px)  {
    #kg-desktop-region-selector{  
        width:100%;
    }

    #kg-desktop-country-selector{  
        width:100%;
    }

    #kg-desktop-btn-container{
        width:100%;
    }
}

@media screen and (max-height: 500px)  {
    #kg-desktop-instructions{
        width: 300%;
        font-size:10px;
        margin-top:4vh;
    }
}

@media all and (orientation:landscape) {
  
}




/*--------------------------------------------------------------
 * region country dropdowns desktop
----------------------------------------------------------------*/

#kg-desktop-selectors-container{
    pointer-events:none;
    margin-top: 1.5vh;
}

.kg-desktop-region-selector-text{
    pointer-events:none;
    font-family: "alternate-gothic-no-2-d",sans-serif;
    font-size: 16px;
    text-transform: uppercase;
    color: #626f79;
}

.kg-desktop-selector-wrapper{
    width:260px;
}

#kg-desktop-region-selector select{
    background: #eee;
    color: #626f79;
}

#kg-desktop-country-selector select{
    background: #394552; /* Old browsers */
    background: -moz-linear-gradient(top, #394552 0%, #101924 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #394552 0%,#101924 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #394552 0%,#101924 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#394552', endColorstr='#101924',GradientType=0 ); /* IE6-9 */
}

#kg-desktop-country-selector{
    margin-top: 1.5vh;
}

.kg-desktop-selector{
    pointer-events: all;
    width: 100%;
    padding: 10px 35px 5px 13px;
    height: 45px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0%;
    font-family: "alternate-gothic-no-2-d",sans-serif;
    font-size: 17px;
    text-transform: uppercase;
    margin-top:1vh;
}

.kg-desktop-country-select{
    color:#c8c7cc;
    border-bottom: 1px solid #30556c;
    border-right: 1px solid #30556c;
    border-top: 0px solid #30556c;
    border-left: 0px solid #30556c;
}

.arrow-down{
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    position: relative;
    top:-25px; left:87%;
  }

  .arrow-dark{
    border-top: 6px solid #626f79;
  }

  .arrow-light{
    border-top: 6px solid #ececec;
  }

/*--------------------------------------------------------------
 * tooltip desktop
----------------------------------------------------------------*/
#kg-tooltip-container{
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    position: absolute;
}

#kg-tooltip-desktop{
    position: relative;
    width:285px;
    height:auto;
    /* background-color:rgba(255,0,0, 0.5);   */
    pointer-events: "all";
    opacity:1;
   top:-1000px;  
}

#kg-tooltip-desktop-inner-container{
    position: relative;
    width: 100%;
    padding:7%;
    background-color: white;
    /* background-color:rgba(255,222,0, 0.5);   */
    transform:translateY(-30px);
}

#kg-tooltip-desktop-xpos{
    width:100%;
    height:100%;
    /* background-color:rgba(0,0,255, 0.5);   */
    transform: translateX(-57%);
}

#kg-tooltip-desktop-inner{
    position: relative;
}

.kg-tooltip-h1{
    font-family: "alternate-gothic-no-2-d",sans-serif;
    font-size:17px;
    text-transform: uppercase;
    font-weight: 100;
    line-height: 15px;
    color: #5a5a5a;
    margin-bottom:6px;
}

.kg-tooltip-h2{
    font-family: "alternate-gothic-no-2-d",sans-serif;
    font-size:15px;
    text-transform: uppercase;
    font-weight: 100;
    line-height: 15px;
    color: #b6b6b6;
    margin-bottom:15px;
}

#tooltip-arrow{
    position:absolute;
    left:50%;
    top:calc(100% - 11px);
    transform: translateX(-50%) scale(0.45);
}

#kg-toolip-btn{
    width: 100%;
    height: 35px;
    font-family: "alternate-gothic-no-2-d",sans-serif;
    color:white;
    text-align: center;
}

.kg-tooltip-btn-gradient1{
    background: #3c3c3c; /* Old browsers */
    background: -moz-linear-gradient(top, #3c3c3c 0%, #1a1a1a 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #3c3c3c 0%,#1a1a1a 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #3c3c3c 0%,#1a1a1a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.kg-tooltip-btn-gradient2{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#66cc33+0,68ca37+100 */
background: rgb(102,204,51); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2Y2MzMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2OGNhMzciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(102,204,51,1) 0%, rgba(104,202,55,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(102,204,51,1) 0%,rgba(104,202,55,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(102,204,51,1) 0%,rgba(104,202,55,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66cc33', endColorstr='#68ca37',GradientType=0 ); /* IE6-8 */
}

.hline{
    width: 100%;
    height: 1px;
    background-color: #595959;
}

img {
    image-rendering: auto;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

  /*--------------------------------------------------------------
  * end tooltip desktop
  ----------------------------------------------------------------*/

  /*--------------------------------------------------------------
   * list view - DELETE
  ----------------------------------------------------------------*/
  #kg-list-view{
    width:100%;
    height: 100%;
    position:absolute;
    pointer-events: all;
    visibility: hidden;
      /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#061b31+0,2d4757+100 */

  }

  #kg-list-bg{
    width:100%;
    height: 100%;
    position:absolute;
    opacity:0.8;
    background: #061b31; /* Old browsers */
    background: -moz-linear-gradient(top, #061b31 0%, #2d4757 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #061b31 0%,#2d4757 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #061b31 0%,#2d4757 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#061b31', endColorstr='#2d4757',GradientType=0 ); /* IE6-9 */
  }

    #kg-list-region-container{
        height:100%;
        width: 50%;
        position:absolute;
       /*  background-color: rgba(225,0,0,0.2) ; */
    }

    #kg-list-region-graphic{
        height:100%;
        width: 50%;
        position:absolute;
        
    }

    #kg-list-region-container-y{
        position:relative;
        width:100%;
        height:auto;
      /*  background-color: rgba(225,0,0,0.2) ; */
        margin-top:20%;
    }

    .kg-list-h1{
        color:white;
        font-size: 32px;
        font-weight: 100;
        font-family: "alternate-gothic-no-2-d",sans-serif;
    }

    


    #kg-list-region-header{
        width: 100%;
        height:31px;   /*   for auto height    
        background-color: rgba(0,220,0,0.2) ;*/
    }

    #kg-list-region-h-wrapper{
        position:absolute;  /*   for auto height    */
    }

    #kg-list-hline{
        width:100%;
        height: 1px;
        background-color:white;
        position:absolute;
        top:25px;
        left:0px;
    }

    #kg-list-region-item-container{
      width:100%;
      top: 90px;
      position:absolute;
    }

    #kg-list-region-item-cols{
        column-count: 4;
        column-width: 185px;
        column-gap: 0px;
    }

    #kg-list-region-item-cols ul {
        list-style-type: none;
        padding: 0;
        padding: 0 ;
        margin: 0 ;
        font-family: "alternate-gothic-no-2-d",sans-serif;
        text-transform: uppercase;
        color:white;
        font-size: 17px;
        font-weight: 100;
        letter-spacing: 1px;
      }

      #kg-list-region-item-cols ul li {
        list-style-type: none;
        padding: 0;
        padding-left: 0px ;
        margin-left: 0px ;
        text-indent: 0px ;
        margin-bottom: 25px;
        cursor: pointer;
      }

      #kg-list-region-graphic-america{
        width: 209px;
        height: 270px;
        transform: scale(1.5);
        top:-70px;
        background: url(assets/ui/AMERICA_DETAIL.svg);
      }

      .kg-list-region-graphics{
          position: absolute;
          opacity:0.6;
          left:80%;
      }

/*--------------------------------------------------------------
 * fullscreen
----------------------------------------------------------------*/
#kg-ui-fullscreen{
    position:absolute;
    width:40px;
    height:40px;
    pointer-events: all;
    left:100%;
    transform: translateX(-100%);
    cursor: pointer;
}

#kg-ui-fullscreen-inner{
    position:absolute;
    width:28px;
    height: 28px;
    left: 12px;
    top: 7px;
    border: 1px solid #68ca37;
}

#kg-ui-fullscreen-icons{
    position:absolute;
    width:20px;
    height: 20px;
    left: 4px;
    top: 4px;
  /*  background-color: rgba(111, 0, 0, 0.9);  */
}

.kg-destop-util-btn{
    width:48%;
    height:100%;
    float:left; 
    pointer-events: all;
    cursor: pointer;
    border: 1px solid #30556c;
    /* text-align: center; */
    background-color: rgba(7, 29, 46, 0.3);
}

.kg-desktop-viewList{
    margin-right:2.2%;
}

.kg-desktop-util-btn-text{
    /* top:7px; */
    position: relative;
    font-family: "alternate-gothic-no-2-d",sans-serif;
    text-transform: uppercase;
    color:#6d7f8f;
}

/*--------------------------------------------------------------
* Mobile UI
----------------------------------------------------------------*/

#kg-mobile-content{
    width:100%;
    height:100%;
    position:absolute;
}

#kg-mobile-top{
    width:100%;
    height:64%;
    pointer-events: none;
}

#kg-mobile-bottom{
    width:100%;
    display:inline-block;
   /* height:36%; */
    height:auto;
    background-color:white;
}

#kg-mobile-headers{
    padding-top:4%;
    margin-bottom:5%;
}

#kg-mobile-selectors{
    width:84%;
    /* height:100%; */
    margin:0px auto;
    padding-top:7%;
}

.kg-mobile-selector-col{
    width: 47%;
 /*   height:100%; */
    float:left;
    /* margin-bottom:2vh; */
}

.kg-mobile-util-btn{
    width:100%;
    height:100%;
    pointer-events: all;
    cursor: pointer;
    align-items: flex-start;
    text-align: center;
    box-sizing: border-box;
    background-color: #25567c;
    display:inline-block;
    padding-top:1.8vw;
    padding-bottom:0.9vw;
}

.kg-mobile-util-btn-text{
    display:inline-block;
    font-size:4.5vw;
    font-family: "alternate-gothic-no-2-d",sans-serif;
    text-transform: uppercase;
    color:#b5cadc;
}

#kg-mobile-instructions{
    font-family: Helvetica, Arial,  sans-serif;
    font-size:3.0vw;
    color: #8c98a4;
    line-height:4.5vw;
    margin-bottom:3.5vw;
}

.kg-mobile-region-selector-text{
    pointer-events:none;
    font-family: "alternate-gothic-no-2-d",sans-serif;
    font-size: 4.2vw;
    text-transform: uppercase;
    color: #626f79;
}

.kg-mobile-selector{
    pointer-events: all;
    width: 100%;
    padding: 10px 35px 5px 13px;
    height: 45px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0%;
    font-family: "alternate-gothic-no-2-d",sans-serif;
    font-size: 4.4vw;
    color:#5b5b5b;
    text-transform: uppercase;
    margin-top:1vh;
    border-top:none;
    border-left:none;
}

.kg-hline{
    width:100%;
    height:2px;
    background-color: #dddddd;
}

/*--------------------------------------------------------------
* Mobile Listview 
----------------------------------------------------------------*/

#kg-mobile-listView{
    width:100%;
    pointer-events: all;
    visibility: hidden;
}

#kg-mobile-listView-content{
    width:85%;
    height:100%;
  /*   background-color: rgba(222, 0,0,0.6);  */
    margin:0px auto;
}

#kg-mobile-listView-header{
    margin-bottom:1vh;
}

#kg-mobile-listView-item-container{
  /*    background-color:rgba(0, 222, 0, 0.6); */
    max-height:90%;
    overflow-y: scroll;
    margin-bottom:1vh;
}

#kg-mobile-listView-region-graphic{
    position: absolute;
    left:30%;
    background-color:rgba(0, 222, 0, 0.6);
}


/*--------------------------------------------------------------
* Mobile Office Modal 
----------------------------------------------------------------*/
#kg-mobile-modal{
    width: 74%;
    position:absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    pointer-events: none;
}

#kg-mobile-modal-inner{
    padding:4%;
}

#kg-mobile-modal-h1{
    color:#9a9a9a;
    line-height:4.5vw;
    font-size: 5vw;
    text-transform: uppercase;
    font-family: "alternate-gothic-no-2-d",sans-serif;
    margin-bottom:1.5vw;
}

#kg-mobile-modal-h2{
    color:#c2c2c2;
    line-height:4.2vw;
    font-size: 4vw;
    text-transform: uppercase;
    font-family: "alternate-gothic-no-2-d", sans-serif;
    margin-bottom:2.5vw;
}

#kg-mobile-modal-cta{
    color:#6aca3b;
    line-height:4.5vw;
    font-size: 4vw;
    text-transform: uppercase;
    text-decoration: underline;
    font-family: "alternate-gothic-no-2-d",sans-serif;
    pointer-events: all;
}

#kg-mobile-modal-wrapper{
    width:100%;
    height:64%;
    position: absolute;
    top:0;
    pointer-events: all;
    visibility: hidden;
}

/* mobile */
@media all and (orientation:portrait) and (max-width:450px) {
    .kg-header{
        display:inline-block;
    }

    .kg-h1{
        text-align: center;
        font-size:7vw;
        width:100%;
        margin-bottom: -1.0vh;
        display:block;
    }

    .kg-h2{
        font-size:9.5vw;
        margin-bottom: -0.8vh;
    }

    .kg-h1-green{
        text-align: center;
        font-size:5vw;
        float:none;
        width:100%;
        margin-top:0%;
    }

    #kg-left-gradient{
        height:74%;
    }

    body .kg-listView-item-cols ul li{
        margin-bottom: 2.0vw;
    }

    body .kg-listView-item-cols ul{
        font-size:4.5vw;
    }
}