/*** MOBILE SHIT **/
#mobilemenu{
    display: none;
}

@media (min-width: 320px) and (max-width: 999px) {

    #mobilemenu{
        display: block;
        position: fixed;
        top:25px;
        right: 25px;
        z-index: 3;
    }

    .mobilemenu .line{
      width: 30px;
      height: 3px;
      background-color: #000;
      display: block;
      margin: 6px auto;
      -webkit-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
    }

    .mobilemenu:hover{
      cursor: pointer;
    }

    #mobilemenu.expanded .line{
        background-color: #999;
    }

    #mobilemenu.expanded .line:nth-child(2){
      opacity: 0;
    }

    #mobilemenu.expanded .line:nth-child(1){
      -webkit-transform: translateY(9px) rotate(45deg);
      -ms-transform: translateY(9px) rotate(45deg);
      -o-transform: translateY(9px) rotate(45deg);
      transform: translateY(9px) rotate(45deg);
    }

    #mobilemenu.expanded .line:nth-child(3){
      -webkit-transform: translateY(-9px) rotate(-45deg);
      -ms-transform: translateY(-9px) rotate(-45deg);
      -o-transform: translateY(-9px) rotate(-45deg);
      transform: translateY(-9px) rotate(-45deg);
    }

    #iconBox{
        position: fixed;
        bottom: 0px;
        width: 80%;
        padding:0;
        margin:0;
        padding-left: 10%;
        padding-right: 10%;
        z-index: 3;
        background-color: #ffff;
    }

    #iconBox>img{
        width: 20%;
        float:left;
    }

    #logoBox{
            margin-left: 10px;
    }
    .largeIcon{
        font-size:13px;
    }
    .largeIcon>svg{
        height: 60px;
    }
    .largeIconBox{
        padding-top: calc(50vh - 280px);
    }
    .largeIconBox2{
        padding-top:60px;
    }
    #phonetxt,#cvtxt,#phonetxt.show,#cvtxt.show{
        display: none;
    }
    #headermenu{
      width: 100%;
      height: calc(100% - 160px);
      margin-top: 80px;
      position: fixed;
      width: 100%;
      height: calc(100% - 160px);
      margin-top: 80px;
      background-color: rgba(255,255,255,0.95);
      position: fixed;
      transition: .4s margin-left ease;
      margin-left:-100%;
    }
    #headermenu.expanded{
      margin-left:0;
    }
    #headermenu>ul{
      margin: auto;
      padding: 0;
      list-style: none;
      height: calc(90vh - 160px);
      margin-top: 5vh;
    }
    #headermenu>ul>li{
      opacity: 0;
      display: inline-block;
      font-size: 16px;
      letter-spacing: 6px;
      width: 100%;
      line-height: calc((85vh - 160px) / 6);
      color: #999;
      height: calc((85vh - 160px) / 6);
      cursor: pointer;
      transition: .2s opacity ease;
    }
    #headermenu>ul>li:active,#headermenu>ul>li:hover,#headermenu>ul>li:link,#headermenu>ul>li:hover{
      background-color:#eee;
    }
    *{
      -webkit-tap-highlight-color: #eee;
    }
    #innerPage{
      margin-bottom: 96px;
    }
    #header{
      z-index: 2;
    }
    .largeIconBox{
      height: auto;
    }
    .pageIcons>.largeIcon{
      width: 100%;
      margin-bottom: 5vh;
    }
    .largeIcon>img{
      height: auto;
      width: 70%;
    }
    .largeIcon:nth-of-type(2)>img{
      width: 60%;
    }
    #zBox{
      width: 90%;
      position: relative;
      /* float: left; */
      margin: auto;
      border: 8px solid #fff;
      margin-top: 5vh;
      overflow-y: scroll;
      border-right: 0px;
      height: calc(85vh - 56px);
      padding-top: 40px;
      padding-right: 8px;
      background-color: #fff;
    }
    #zClose{
      text-align: right;
      padding: 0;
      margin: 0;
      /* margin-right: 8px; */
      color: #999;
      width: 100%;
      position: fixed;
      height: auto;
      top: 5vh;
      left: calc(5% - 8px);
      width: 90%;
      /* z-index: 999999; */
      background-color: #fff;
      transition: .2s color ease;
      padding: 8px;
      height: 24px;
      line-height: 24px;
    }
    #zClose>img{
      margin-right: 0px;
    }
    #innerPage.mobileShow{
      display: block;
    }
    #innerPage.mobileHide{
      display: none;
    }
    #innerPage>img.mobileShow{
      display: inline-block;
    }
    #innerPage>img.mobileHide{
      display: none;
    }
    #profilepic{
      width: 100%;
      height: auto;
    }
    #profilepic>img{
      position: relative;
      width: 80%;
      margin-top: 5vh;
    }
    #profilebox{
      width: 80%;
      float: left;
      margin-left: 10%;
      position: relative;
      top: auto;
      display: inline-block;
      transform: none;
      padding-bottom: 96px;
    }
    #profilebox>h1{
      font-size:35px;
    }
    .profileLine{

    }
    .profileLineLeft{
      margin-right:0;
      width: 100px;
    }
    .profileLineLeft img{
      padding-left:0;
      left:0;
    }
    .profileLineRight{
      float: left;
      width: calc(100% - 115px);
      text-align: left;
      font-family: 'copenhagen_grotesk_novalight', sans-serif;
      padding-left: 15px;
      text-indent:0;
      font-weight: 400;
    }
    .submenuitems{
    position: absolute;
    width: 100%;
    left: 0;
    left: 0;
    font-size: 12px;
    text-align: center;
    line-height: 8px;
    letter-spacing: 0px;
    }

    .subicontitle{
      letter-spacing: 0px;
      color: #999;
      cursor: pointer;
      transition: .2s opacity ease;
      color:#000;
      font-size:12px;
      padding-top: 6vh;
      cursor: pointer;
      width: 300%;
      margin-left:-100%!important;
    }

    #headerMenu.hideforgfxmenu>ul>li{
      display: none;
    }

    #menuBack{
      position: absolute;
      height: calc((85vh - 160px) / 6);
      width: 100%;
      display: none;
      bottom: 0;
      left:0;
    }

    #menuBack>svg{
      height: 40px;
      margin-bottom: -15px;
    }

    #headerMenu.hideforgfxmenu > #menuBack{
      opacity: 1;
      display: inline-block;

    }

    ul>li.gfxmenu p.subicontitle{
      letter-spacing: 0px;
      width: 100%;
      line-height: calc((85vh - 160px) / 6);
      color: #999;
      height: calc((85vh - 160px) / 6);
      cursor: pointer;
      padding-top: 0;
      transition: .2s opacity ease;
      color:#000;
      font-size:12px;
      margin-left:0!important;
      cursor: pointer;
    }

    #menuBack>img{
      height: 40px;
      display: inline-block;
      float: left;
    }

    #menuBack>span{
      display: inline-block;
      line-height: 35px;
    }

    #headerMenu.hideforgfxmenu>ul>li.gfxmenu{
      display: block;
    }
}