html{scroll-behavior: smooth;}
@font-face {font-display: swap;}

.menu, #mapMenu {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 3;
  top: 0;
  left: 0;
  background: #fff;
  overflow-x: hidden;
  transition: 0.5s;
}

.menu-content {
  position: relative;
  top: 5%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
  vertical-align: top;
  display: flex;
  padding-left: 10%;
  transition: .3s;
}

.menu a {text-decoration: none;}
.menu a:hover, .overlay a:focus {color: #25c8ff;}

.closebtn {
    position: absolute;
    top: 15px;
    right: 45px;
    font-size: 60px;
    transition: 0.3s;
    z-index: 4;
    color: #818181;
}

.closebtn:hover{cursor: pointer; color: #25c8ff;}

.header-column{
    display: inline-block;
    width: 20%;
    height: 100%;
    border-top: 2px solid #14a8cb;
    box-shadow: 0 2px 3px 1px rgba(0,0,0,.08);
    opacity: .92;
    transition: .2s;
}

.header-column:hover{opacity: 1; box-shadow: 0 2px 3px 1px rgba(0,0,0,.15);}

.header-link, .header-link-select{
    padding: 11.5px;
    text-decoration: none;
    display: block;
    position: relative;
    transition: .25s;
    font-size: 22px;
    box-sizing: border-box;
    color: #555;
    outline: none;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0,0,0,.03);
    border-bottom: 1px solid #eee;
}

.header-link-select{color: #25c8ff; background: #f9f9f9;}
.i-block{position: absolute; top: 50%; left: 22px; transform: translateY(-50%); width: 50px; text-align: center;}
.header-link i, .header-link-select i{opacity: .5; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: .3s;}
.header-link img, .header-link-select img{transition: .3s; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#usa-reg, #usa-hover{height: 20px;}
#ak-reg, #ak-hover{height: 25px; left: 45%;}

.header-link:hover, .header-link-select:hover{background: #fafafa; color: #25B2E2}
.header-link:hover, .header-link-select{cursor: pointer;}
.header-link:hover #usa-reg, .header-link:hover #ak-reg, .header-link-select #usa-reg, .header-link-select #ak-reg{opacity: 0;}
.header-link:hover i, .header-link-select i{opacity: 1; color: #888;}

#n-5{border-bottom: 2px solid #14a8cb;}

#nottio-logo{
    position: absolute;
    bottom: 10%;
    left: 10%;
    display: block;
    z-index: 2;
    font-family: 'K2D', sans-serif;
    font-size: 22px;
    text-shadow: 0 2px 1px rgba(0, 0, 0, 0.03);
    background: #3fbd62;
    font-weight: 800;
    padding: 5px 25px 9px;
    color: #fff;
    border-radius: 10px;
    opacity: .9;
    box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.25);
    transition: .5s;
}


@keyframes moveSVG{0%{opacity: 0; bottom: -278px; left: -500px;}25%{opacity: .15; bottom: -278px; left: -500px;}100%{opacity: 1; bottom: -15px; left: -70px;}}
#menu-svg{display: none; position: fixed; bottom: -15px; left: -70px; z-index: 1; transition: .5s; animation: moveSVG .54s; overflow: hidden;}

.nav-container{
    width: 70%;
    height: 100%;
    display: flex;
    animation: fadeIn .5s;
}

#countryList{display: none;}
#stateList{display: flex;}
#salaryList{display: none;}
#cityList{display: none;}

.nav-column{
    display: inline-block;
    width: 32%;
    height: 100%;
}

#cAlt{width: 35%;}

.nav-column a{
    padding: 6.5px 0;
    font-size: 17px;
    font-size: 300;
    text-decoration: none;
    color: #818181;
    display: block;
    transition: 0.3s;
}

#menu-option{
    padding: 10px 0;
    font-size: 18.5px;
    font-weight: 700;
    border-bottom: 1px solid #ccc;
    color: #555;
    width: 80%;
    margin: 8.5px auto;
}

#menu-option:hover{color: #25c8ff;}

.add-mobile-menu{display: none;}


@keyframes fadeRight{0%{opacity: 0; width: 0;}75%{opacity: 0; width: 0;}100%{opacity: .95; width: 100px;}}
@keyframes fadeDiv{0%{opacity: 0;}85%{opacity: 0;}100%{opacity: .85;}}

.nav-right{
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    background: linear-gradient(180deg, #506C79 0%, #45606C 100%);
    box-shadow: -2px 3px 3px rgba(0, 0, 0, 0.12);
    border-radius: 5px 0 0 5px;
    opacity: .92;
    z-index: 2;
    border-left: 1px solid #4C5C63;
    box-sizing: border-box;
    transition: .12s;
    width: 100px;
    animation: fadeRight 1s ease-out;
}

.nav-div{
    text-align: center;
    height: 100%;
    position: relative;
    display: block;
    box-sizing: border-box;
    padding: 20px 0 10px;
    color: #fff;
    opacity: .85;
    margin:0;
    outline:none;
    border-bottom: 1px solid rgba(255,255,255,.15);
    transition: .12s;
    border-right: none;
    text-decoration: none;
    animation: fadeDiv 1.25s;
}

.nav-right:hover{opacity: 1; cursor: pointer; width: 103px; box-shadow: -2px 3px 3px rgba(0, 0, 0, 0.15);}
.nav-div:hover{cursor: pointer; opacity: 1; background: rgba(0,0,0,.08);}
.nav-div:active{opacity: .75;}

.nav-div i{margin: 0;}
#mapUSA{width: 50px; position: absolute; top: 14px; left: 50%; transform: translateX(-50%);}
.nav-cap{margin-top: 5px;}

#UR-1{border-radius: 5px 0 0 0;}
#UR-2{border-radius: 0 0 0 5px;}
#UR-2 i{opacity: 0;}

.nav-left, .nav-left-alt{
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    border: 1px solid #4C5C63; border-left: none;
    background: linear-gradient(90deg, #3F5964 0%, #3B5865 100%);
    border-radius: 0 10px 10px 0;
    box-shadow: 2px 3px 3px rgba(0,0,0,.12);
    opacity: .7;
    transition: .12s;
    width: 153px;
}

.nav-left:hover, .nav-left-alt:hover{opacity: .9; box-shadow: 3px 3px 3px rgba(0,0,0,.15);}

.nav-left a{
    display: block;
    box-sizing: border-box;
    padding: 7px 0 7px 25px;
    font-weight: 300;
    text-shadow: 1px 2px 1px rgba(0,0,0,.05);
    text-shadow: 0 2px 3px rgba(0,0,0,.1);
    border-bottom: 1px solid rgba(255,255,255,.15);
    color: #eee;
    text-decoration: none;
    transition: .25s;
}

.nav-left a:hover{background: #5face7; color: #fff; text-shadow: 1px 2px 1px rgba(0,0,0,.1);}

#topRow{border-radius: 0 9px 0 0; padding: 8px 0 7px 25px;}
#botRow{border: none; border-radius: 0 0 9px 0; padding: 7px 0 8px 25px;}

@media (max-width: 1200px) {
    
.nav-left, .nav-left-alt{display: none;}
#menu-svg{left: -150px;}

}

@media (max-width: 1050px) {
    
.nav-right{display: none;}

.add-mobile-menu{
    display: inline-block;
    position: absolute;
    right: 25px;
    top: 35px;
    color: #777;
    text-shadow: 0 2px 3px rgba(0,0,0,.05);
    font-size: 30px;
    z-index: 1;
    opacity: 0.9; 
    transition: 0.3s;
}

.add-mobile-menu:active{color: #25c8ff; opacity: .5;}

#mobileNav{transition: .3s;}

.menu-content-mobile {
  position: relative;
  top: 8.5%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
  display: block;
  animation: fadeIn .5s;
}

#mCountryList{display: none;}
#mStateList{display: block;}
#mCityList{display: none;}

.mobile-link, .mobile-link-select{
  display: inline-block;
  background: #777;
  width: 23%;
  font-size: 24px;
  margin: 15px 0;
  color: #fff;
  padding: 10px 0;
  border-radius: 2px;
  transition: .4s;
}

.mobile-link-select{background: #25c8ff; color: #fff;}
.mobile-link:hover, .mobile-link-select:hover{color: #fff;}

.closebtn {right: 35px;}

#mobile-result, #mobile-result-H{
  display: block;
  width: 90%;
  font-size: 22px;
  padding: 10px 0;
  margin: 0 auto;
  color: #777;
}

#mobile-result:focus, #mobile-result-H:focus{color: #25c8ff;}
#mobile-result-H{font-weight: 700; border-bottom: 1px solid #ccc; padding: 15px 0; margin-bottom: 5px;}


}


@media screen and (max-height: 650px) {
    .add-mobile-menu{right: 25px;top: 25px;}
    .closebtn {font-size: 40px; right: 25px;}
}