* {
      box-sizing: border-box;
 }

 body {
      background: url(../src/colorsme-pad-mockup.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      margin: 0;
}
#flash {
    text-align: center;
    font-size: 15px;
    color: green;
}
  .navbar {
      box-shadow: 0px 0px 10px 0px #007FFF;
      border: 0 solid rgb(33, 37, 41);
      top: 0;
      z-index: 10;
      position: sticky;
 }
  .nav-link {
      padding-right: 1.5rem !important;
      padding-left: 1.5rem !important;
 }
  .nav-link:hover {
      border: 1px none #007bff;
      border-radius: 0 0 0 0;
      text-decoration: none;
      transition: color 0.3s ease-in-out;
      color: #007bff !important;
 }
  .gpd-navbar{
     width:100%;
 }
 .gpd-navbar__menu{
     display:none;
 }
 .gpd-navbar__item{
     flex:0 1 auto;
 }
 .gpd-navbar__item-link{
     color:inherit;
     text-decoration:none;
 }
 #i4ow{
     padding:0;
 }
 #i58o{
     justify-content:space-between;
     align-items:center;
     min-height:auto;
     flex-direction:row;
     flex-wrap:nowrap;
     padding:2px 10px 2px 10px;
 }
 #i1u2{
     flex:0 1 auto;
 }
 #irsg{
     min-width:25px;
 }
 #ihxf{
     flex:0 1 auto;
 }
 #i9mk{
     width:35px;
     height:35px;
     cursor:pointer;
     border:0 solid #c3c3c3;
     color:#a3a6aa;
 }
 #i5fxp{
     flex:0 1 auto;
 }
 #ih4pt{
     align-items:center;
     min-height:auto;
     padding:2px 10px 2px 10px;
 }
 #i44w2{
     width:100%;
     height:100%;
     min-height:91vh;
     max-width:100vw;
     padding:0 0 68px 0;
     margin:0 0 0 0;
     border:0 solid #222222;
     background-color:#222222;
 }
 #ih12{
     display:inherit;
     top:0;
     z-index:10;
     background-color:#222222;
     position:sticky;
     border:0 solid rgb(33, 37, 41);
     box-shadow:0 0 10px 0 #007FFF;
     min-height:9%;
 }
 #i6mml{
     font-weight:300;
     font-family:Helvetica, serif;
     margin:0 0 0 5px;
     color:#a3a6aa;
     text-decoration:none;
 }
 #ir7ld{
     font-family:Helvetica, serif;
     font-weight:300;
     margin:0 0 0 5px;
     display:block;
 }
 #ieo16{
     font-weight:300;
     font-family:Helvetica, serif;
     margin:0 0 0 5px;
     color:#a3a6aa;
     text-decoration:none;
 }
 #iu12k{
     font-weight:300;
     font-family:Helvetica, serif;
     margin:0 0 0 5px;
 }
 #i574j{
     font-weight:300;
     font-family:Helvetica, serif;
     margin:0 0 0 5px;
     color:#a3a6aa;
     text-decoration:none;
 }
 #iw3ch{
     font-weight:300;
     font-family:Helvetica, serif;
     margin:0 0 0 5px;
 }
 #colorwhat{
     background-color:#222222;
 }
 #section-color-what{
     height:2px;
     margin:10px 10px 10px 10px;
     background-color:#007FFF;
 }
 body{
     background-color:#222222;
 }
 #ieqb5{
     font-family:Helvetica, serif;
     font-weight:300;
     color:#a3a6aa;
 }
 .map{
     height:100%;
     min-height:100%;
     max-width:100%;
     width:100%;
 }
 #iq7d1{
     color:black;
     max-width:50px;
 }
 #i574j:hover{
     color:#007fff;
     text-decoration:none;
     transition:all 0.3s ease-in-out;
 }
 #ieo16:hover{
     border:1px none #007bff;
     border-radius:0 0 0 0;
     text-decoration:none;
     transition:color 0.3s ease-in-out;
     color:#007bff;
 }
 #i6mml:hover{
     color:#007fff;
     text-decoration:none;
     transition:color 0.3s ease-in-out;
 }
 #iu12k:hover{
     text-decoration:none;
     border-radius:0 0 0 0;
     border:0 solid #1db400;
 }
 #ih4pt:hover{
     padding:2px 10px 2px 10px;
 }
 #i58o:hover{
     padding:2px 10px 2px 10px;
 }
 .tooltip-component__body, [data-tooltip]::after{
     font-family:Helvetica, sans-serif;
     background:rgba(55, 61, 73, 0.95);
     border-radius:3px;
     bottom:100%;
     color:#fff;
     content:attr(data-tooltip);
     display:block;
     font-size:12px;
     left:50%;
     line-height:normal;
     max-width:32rem;
     opacity:0;
     overflow:hidden;
     padding:8px 16px;
     pointer-events:none;
     position:absolute;
     text-overflow:ellipsis;
     transform:translate(-50%, 0);
     transition:opacity 0.25s, transform 0.25s;
     white-space:nowrap;
     box-sizing:border-box;
     z-index:10;
 }
 [data-tooltip-visible=true]::after, [data-tooltip]:focus::after, [data-tooltip]:hover::after{
     opacity:1;
     transform:translate(-50%, -0.5rem);
 }
 [data-tooltip-pos=right]::after{
     bottom:50%;
     left:100%;
     transform:translate(0, 50%);
 }
 [data-tooltip-pos=right]:focus::after, [data-tooltip-pos=right]:hover::after, [data-tooltip-visible=true][data-tooltip-pos=right]::after{
     transform:translate(0.5rem, 50%);
 }
 [data-tooltip-pos=bottom]::after{
     bottom:auto;
     top:100%;
     transform:translate(-50%, 0);
 }
 [data-tooltip-pos=bottom]:focus::after, [data-tooltip-pos=bottom]:hover::after, [data-tooltip-visible=true][data-tooltip-pos=bottom]::after{
     transform:translate(-50%, 0.5rem);
 }
 [data-tooltip-pos=left]::after{
     bottom:50%;
     left:auto;
     right:100%;
     transform:translate(0, 50%);
 }
 [data-tooltip-pos=left]:focus::after, [data-tooltip-pos=left]:hover::after, [data-tooltip-visible=true][data-tooltip-pos=left]::after{
     transform:translate(-0.5rem, 50%);
 }
 [data-tooltip-length=small]::after{
     white-space:normal;
     width:80px;
 }
 [data-tooltip-length=medium]::after{
     white-space:normal;
     width:150px;
 }
 [data-tooltip-length=large]::after{
     white-space:normal;
     width:300px;
 }
 [data-tooltip-length=fit]::after{
     white-space:normal;
     width:100%;
 }
  button[data-tooltip]{
     overflow:visible;
 }
 #map-section{
     width:100vw;
     height:80vh;
     background-color: #222222;
 }
 #colorWhatHintBox{
     padding:6px 5px 6px 5px;
     min-height:50px;
     border:0 solid #a3a6aa;
     border-radius:0;
 }
 #colorWhatHint{
     color:#a3a6aa;
     font-family:Helvetica, serif;
     font-weight:300;
 }
 #contact{
     margin:0 0 0;
     padding:50px 0 50px 0;
     background-color:#222222;
 }
 #submit {
     border:1px solid #007FFF;
     display:inherit;
     text-align:center;
     padding:5px 12px 5px 12px;
     margin:0 50% 0 0;
     width:50%;
     font-family:Helvetica, serif;
     font-weight:300;
     color:#007fff;
     background-color:rgba(0,123,255,0);
 }
 #is9ll{
     color:#a3a6aa;
     width:40%;
     text-align:left;
 }
 #name{
     width:60%;
 }
 #i511g{
     text-align:left;
     font-family:Helvetica, serif;
     font-weight:300;
 }
 #email{
     width:60%;
     border:2px solid rgb(206, 212, 218);
 }
 #ilmog{
     color:#a3a6aa;
     font-family:Helvetica, serif;
     font-weight:300;
     width:40%;
     text-align:left;
 }
 #i6m0g{
     width:60%;
     margin:0 0 0 40%;
     padding:7px 0 7px 0;
 }
 #query{
     max-width:60%;
     width:60%;
     min-height:10%;
     margin:0 0 4px 0;
     border:2px solid rgb(206, 212, 218);
     padding:6px 12px 5px 12px;
 }
 #about{
     width: 60%;
 }
 #ite9f{
     width: 40%;
     color: #a3a6aa;
 }
 #iw0au{
     color:#a3a6aa;
     font-family:Helvetica, serif;
     font-weight:300;
     width:40%;
     text-align:left;
     white-space:nowrap;
     margin:0 0 0 0;
 }
 #ikt1n{
     padding:0 0 5px 0;
 }
 #name:hover{
     border:2px solid #007bff;
     box-shadow:0 0 2px 0 #007FFF inset;
     background-color:#ffffff;
 }
 #email:hover{
     border:2px solid #007bff;
     box-shadow:0 0 2px 0 #007fff inset;
 }
 #query:hover{
     border:2px solid #007bff;
     box-shadow:0 0 2px 0 #007FFF inset;
     margin:0 0 4px 0;
 }
 #iwudz{
     font-family:Helvetica, serif;
     font-weight:300;
     color:#a3a6aa;
     font-size:20px;
 }
 #idbmn{
     padding:6px 5px 6px 5px;
     min-height:50px;
     border:0 solid #a3a6aa;
     border-radius:0;
 }
 #ihv6f{
     background-color:rgba(0,0,0,0);
     color:#a3a6aa;
 }
 #ijhzl{
     color:#a3a6aa;
 }
 #ifquh{
     background-color:rgba(0,0,0,0);
     color:#a3a6aa;
 }
 #i522p{
     color:#a3a6aa;
 }
 #ij5lq{
     padding:6px 5px 6px 5px;
     min-height:50px;
     border:0 solid #a3a6aa;
     border-radius:0;
 }
 #ik33z{
     background-color:rgba(0,0,0,0);
     color:#a3a6aa;
 }
 #ik5d3{
     color:#a3a6aa;
 }
 #iug47{
     background-color:rgba(0,0,0,0);
     color:#a3a6aa;
 }
 #i86al{
     color:#a3a6aa;
 }
 #iaufq{
     background-color:rgba(0,0,0,0);
     color:#a3a6aa;
 }
 #i6zmq{
     color:#a3a6aa;
 }
 #inxz4{
     background-color:rgba(0,0,0,0);
     color:#a3a6aa;
 }
 #ipucq{
     color:#a3a6aa;
 }
 #ics3x{
     background-color:rgba(0,0,0,0);
     color:#a3a6aa;
 }
 #i0yub{
     color:#a3a6aa;
 }
 #inb7k{
     background-color:rgba(0,0,0,0);
     color:#a3a6aa;
 }
 #iuyr6{
     color:#a3a6aa;
 }
 #ior4h:nth-of-type(2n){
     margin:0 0 15px 0;
 }
 #igbr7:nth-of-type(2n){
     margin:0 0 15px 0;
 }
 #ion9l:nth-of-type(2n){
     margin:0 0 15px 0;
 }
 #inmnw:nth-of-type(2n){
     margin:0 0 15px 0;
 }
 #itet9:nth-of-type(2n){
     margin:0 0 15px 0;
 }
 .subtitle-box:nth-of-type(2n){
     padding:6px 5px 6px 5px;
     margin:0 0 15px 0;
 }
 #ics3x:nth-of-type(2n){
     margin:8px 0 8px 0;
 }
 .subtitle-box{
     min-height:50px;
     margin:0 0 15px 0;
     border:0 solid #a3a6aa;
     border-radius:0;
     padding:6px 5px 6px 5px;
 }
 #ibsgk{
     font-weight:300;
     font-family:Helvetica, serif;
     margin:0 0 0 5px;
 }
 #i34ge{
     font-weight:300;
     font-family:Helvetica, serif;
     margin:0 0 0 5px;
     color:#a3a6aa;
     text-decoration:none;
 }
 #ih7rn{
     color:#a3a6aa;
     font-family:Helvetica, serif;
     font-weight:300;
     border:0 solid #a3a6aa;
 }
 #iqy8k{
     height:2px;
     margin:10px 10px 15px 10px;
     background-color:#007FFF;
 }
 #ifxwk{
     background-image:none, none;
     background-repeat:repeat, repeat;
     background-position:left top, left top;
     background-attachment:scroll, scroll;
     background-size:auto, auto;
     padding:0 0 0 0;
     margin:0 0 0 0;
     max-width:100%;
     width:100%;
 }
 #iqn3k{
     display:none;
 }
 #i34ge:hover{
     color:#007fff;
 }
 .gpd-heading--dark-bg{
     padding-top:100px;
     padding-right:0px;
     padding-bottom:100px;
     padding-left:0px;
     background-color:rgb(46, 49, 55);
     text-align:center;
     color:rgb(204, 204, 204);
     font-family:Helvetica, serif;
     font-weight:100;
 }
 #download{
       background-color: rgba(0,0,0,0.56);
       /*
     background-image:linear-gradient(rgba(0,0,0,0.56),rgba(0,0,0,0.56)), url(../src/colorsme-pad-mockup.jpg);
     background-repeat:repeat, no-repeat;
     background-position:left top, center center;
     background-attachment:scroll, fixed;
     background-size: cover;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
     min-height: 100%;
     */
 }
 #ijo38j:nth-of-type(2n){
     padding:0;
 }
 #i04nk8{
     background-image:none, none;
     background-repeat:repeat, repeat;
     background-position:left top, left top;
     background-attachment:scroll, scroll;
     background-size:auto, auto;
 }
 #iq1trk{
     font-family:Helvetica, serif;
     font-weight:300;
     border:0 solid none;
     color:#007fff;
     text-align:left;
 }
 #ivvzes{
     height:2px;
     margin:10px 10px 15px 10px;
     background-color:#007fff;
 }
 #ihorfi{
     display:inline-block;
     padding:5px 0 5px 0;
     min-height:50px;
     min-width:50px;
     margin:20px auto 0 auto;
     width:50%;
 }
 #i5kpev{
     color:black;
     width:200px;
     margin:0 auto 0 auto;
     display:inherit;
 }
 #submit:hover{
     background-color:#007fff;
     transition:color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
     color:#222222;
 }

 #iqy8k:hover{
     margin:10px 10px 15px 10px;
 }
 #ihorfi:hover{
     margin:20px 0 0 0;
     padding:5px 0 5px 0;
     width:50%;
 }
 .footer4{
     font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     font-size:0.85rem;
     font-weight:200;
     padding-top:70px;
     padding-bottom:50px;
     color:#353535;
     background-color:white;
 }
 #iiolmp-2{
     color:#909090;
     border:0 solid none;
     background-color:#222222;
 }
 #iiolmp-2:hover{
     background-color:#222222;
 }
 #ikjjrf-2{
     text-align:center;
 }
 #if4vw-2{
     height:3px;
     margin:10px 10px 10px 10px;
     background-color:#007fff;
 }
 #iswuvn-2{
     margin-top:0;
     margin-bottom:15px;
 }
 #icbk2a-2{
     color:#909090;
     background-image:none;
     background-repeat:repeat;
     background-position:left top;
     background-attachment:scroll;
     background-size:auto;
 }
 #icbk2a-2:hover{
     color:#007fff;
 }
 #irocwb-2{
     pointer-events:none;
     fill:currentColor;
 }
 #ipacmq-2{
     color:#909090;
 }
 #ipacmq-2:hover{
     color:#007fff;
 }
 #i94q6j-2{
     pointer-events:none;
     fill:currentColor;
 }
 #i9169b-2{
     color:#909090;
 }
 #i9169b-2:hover{
     color:#007fff;
 }
 #i9fcw5-2{
     pointer-events:none;
     fill:currentColor;
 }
 #izkt5v-2{
     color:#909090;
     text-decoration:underline;
     margin:0;
     width: 120px;
 }
 #izkt5v-2:hover{
     color:#007fff;
 }
 #izkt5v-2:active{
     color:#007fff;
 }
 #izkt5v-2:nth-of-type(2n){
     color:#007fff;
 }
 #i6hud9-2:nth-of-type(2n){
     color:#909090;
 }
 #i6hud9-2{
     color:#909090;
     margin:0;
     width: 120px;
     text-decoration:underline;
 }
 #i6hud9-2:active{
     color:#007fff;
 }
 #i6hud9-2:hover{
     color:#007fff;
 }
 #idhfpa-2:nth-of-type(2n){
     color:#007fff;
 }
 #idhfpa-2{
     color:#909090;
     margin:0;
     width: 120px;
     text-decoration:underline;
 }
 #idhfpa-2:hover{
     color:#007fff;
 }
 #idhfpa-2:active{
     color:#007fff;
 }
 #ij40ag-2{
     color:#909090;
 }
 #ihorfi:nth-of-type(2n){
     padding:5px 0 5px 0;
     width:50%;
 }
 
 @keyframes fadeEffect{
     from{
         opacity:0;
     }
     to{
         opacity:1;
     }
 }
 @media (max-width: 768px){
     .gpd-navbar__menu{
         display:block;
     }
     .gpd-navbar__items{
         display:none;
         width:100%;
     }
     .gpd-navbar__item{
         flex:1 1 100%;
     }
      .gpd-navbar__items-grid{
         flex-wrap:wrap;
     }
     .gpd-navbar__item-link{
         width:100%;
     }
 }
 @media (max-width: 375px){
     #i44w2{
         min-height:100%;
     }
     #email, #name, #query, #submit, #about {
           width: 100%;
           max-width: 100%;
     }

     #i6m0g {
           margin: 0;
           width: 100%;
     }
 }
 
body:after{
  content:"";
  position:fixed; /* stretch a fixed position to the whole screen */
  top:0;
  height:100vh; /* fix for mobile browser address bar appearing disappearing */
  left:0;
  right:0;
  z-index:-1; /* needed to keep in the background */
  background: url(../src/colorsme-pad-mockup.jpg) center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}