@charset "utf-8";
@import url("../webfonts/HelveticaNeueLTStd_Roman/stylesheet.css");
/* CSS Document */

/* Preload all hover images */
@supports not (-ms-ime-align:auto) {
    body:after{
     visibility: hidden;
     position: fixed;
     top: 0px;
     z-index: -1;
     content: url(../images/3dnavPNGs/voiceMailOver.png)
              url(../images/3dnavPNGs/RecordOver.png)
              url(../images/3dnavPNGs/PomptsOver.png)
              url(../images/3dnavPNGs/ConferOver.png)
              url(../images/3dnavPNGs/RouteOver.png)
              url(../images/3dnavPNGs/contactsOver.png)
              url(../images/3dnavPNGs/settingsOver.png);
    }
}

@supports (-ms-ime-align:auto) {
    body:after{
     visibility: hidden;
     position: fixed;
     top: 0px;
     z-index: -1;
     content: none;
    }
}

/* start nav button Icons ---------------------- */

.bodyWidth {
   width: 94%;
   height: auto;
   background-color: rgba(255,255,255,1.00);
   display: inline-block;
   margin-top: 1.6%;
   margin-left: 3%;
   margin-right: 3%;
   padding-top: 10px;
   padding-bottom: 5%;
   border-radius: 18px;
}


.voiceMailIconHolder {
   width: 80px;
   height: 80px;
   text-align: center;
   position: relative;
   display: inline-block;
   background-image: url(../images/3dnavPNGs/voiceMail.png);
   background-repeat: no-repeat;
   background-size: 80px 80px;
}
.voiceMailIconHolder:hover {
   background-image: url(../images/3dnavPNGs/voiceMailOver.png);
}
.recordIconHolder {
   width: 80px;
   height: 80px;
   text-align: center;
   position: relative;
   display: inline-block;
   background-image: url(../images/3dnavPNGs/Record.png);
   background-repeat: no-repeat;
   background-size: 80px 80px;
}
.recordIconHolder:hover {
   background-image: url(../images/3dnavPNGs/RecordOver.png);
}
.greetingsIconHolder {
   width: 80px;
   height: 80px;
   text-align: center;
   position: relative;
   display: inline-block;
   background-image: url(../images/3dnavPNGs/Pompts.png);
   background-repeat: no-repeat;
   background-size: 80px 80px;
}
.greetingsIconHolder:hover {
   background-image: url(../images/3dnavPNGs/PomptsOver.png);
}

.conferencingIconHolder {
   width: 80px;
   height: 80px;
   text-align: center;
   position: relative;
   display: inline-block;
   background-image: url(../images/3dnavPNGs/Confer.png);
   background-repeat: no-repeat;
   background-size: 80px 80px;
}
.conferencingIconHolder:hover {
   background-image: url(../images/3dnavPNGs/ConferOver.png);
}
.routingIconHolder {
   width: 80px;
   height: 80px;
   text-align: center;
   position: relative;
   display: inline-block;
   background-image: url(../images/3dnavPNGs/Route.png);
   background-repeat: no-repeat;
   background-size: 80px 80px;
}
.routingIconHolder:hover {
   background-image: url(../images/3dnavPNGs/RouteOver.png);
}
.contactsIconHolder {
   width: 80px;
   height: 80px;
   text-align: center;
   position: relative;
   display: inline-block;
   background-image: url(../images/3dnavPNGs/contacts.png);
   background-repeat: no-repeat;
   background-size: 80px 80px;
}
.contactsIconHolder:hover {
   background-image: url(../images/3dnavPNGs/contactsOver.png);
   clear: both;
}
.settingsIconHolder {
   width: 80px;
   height: 80px;
   text-align: center;
   position: relative;
   display: inline-block;
   background-image: url(../images/3dnavPNGs/settings.png);
   background-repeat: no-repeat;
   background-size: 80px 80px;
   clear: both;
}
.settingsIconHolder:hover {
   background-image: url(../images/3dnavPNGs/settingsOver.png);
}

/* end nav button Icons ---------------------- */


.navTitleHolder {
   width: 90px;
   text-align: center;
   color: rgba(52,14,69,1.00);
   font-family: "HelveticaNeueLTStd Roman";
   font-style: normal;
   font-size: 0.7em;
   font-weight: normal;
   font-variant: normal;
   position: relative;
   display: inline-block;
}

.navButtonHolder {
   width: 120px;
   margin: 0 auto;
   height: 100px;
   text-align: center;
   display: inline-block;
   position: relative;
   padding-top: 1%;
}

.Textography {
   float: left;
   text-align: left;
   padding-top: 3px;
   padding-left: 15px;
   padding-right: auto;
   width: 46%;
   font-size: 12px;
   color: #015c2f;
   font-family: "HelveticaNeueLTStd Roman";
}
.TextographyRt {
   float: right;
   text-align: right;
   padding-right: 15px;
   padding-left: auto;
   padding-top: 3px;
/*   width: 26%; */
   font-size: 12px;
   color: #015c2f;
   font-family: "HelveticaNeueLTStd Roman";
}
.vertical-divider {
  color: #808080;
  width: 1px;
  margin-left: 5px;
  margin-right: 5px;
}
/*  SECTIONS  */
.section {
   clear: both;
   padding: 0px;
   margin: 0px;
}
/*  COLUMN SETUP  */
.col {
   display: block;
   float:left;
   margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/*  GRID OF SEVEN  */
.span_7_of_7 {
   margin: 0 auto;
   width: 14.28%;
   text-align: center;
}

.span_6_of_7 {
   margin: 0 auto;
   width: 14.28%;
   text-align: center;
}

.span_5_of_7 {
   margin: 0 auto;
   width: 14.28%;
   text-align: center;
}

.span_4_of_7 {
   margin: 0 auto;
   width: 14.28%;
   text-align: center;
}

.span_3_of_7 {
   margin: 0 auto;
   width: 14.28%;
   text-align: center;
}

.span_2_of_7 {
   margin: 0 auto;
   width: 14.28%;
   text-align: center;
}

.span_1_of_7 {
   margin: 0 auto;
   width: 14.28%;
   text-align: center;
}

/* -------------------------------------------------------------- ---------------------- */

@media (min-width: 1436px) and (max-width: 3000px){

   /* start nav button Icons ---------------------- */
   .voiceMailIconHolder {
      width: 90px;
      height: 90px;
      background-size: 90px 90px;
   }

   .recordIconHolder {
      width: 90px;
      height: 90px;
      background-size: 90px 90px;
   }

   .greetingsIconHolder {
      width: 90px;
      height: 90px;
      background-size: 90px 90px;
   }

   .conferencingIconHolder {
      width: 90px;
      height: 90px;
      background-size: 90px 90px;
   }

   .routingIconHolder {
      width: 90px;
      height: 90px;
      background-size: 90px 90px;
   }

   .contactsIconHolder {
      width: 90px;
      height: 90px;
      background-size: 90px 90px;
   }

   .settingsIconHolder {
      width: 90px;
      height: 90px;
      background-size: 90px 90px;
   }
   /* end nav button Icons ---------------------- */
   .navTitleHolder {
      font-family: "HelveticaNeueLTStd Roman";
      font-size: 0.62em;
      width: 90px;
      height: 20px;
   }

   .navButtonHolder {
      width: 120px;
      margin: 0 auto;
      height: 88px;
      text-align: center;
      display: inline-block;
      position: relative;
      padding-top: 0%;
   }

   .Textography {
      float: left;
      text-align: left;
      padding-left: 15px;
      padding-right: auto;
      margin-bottom: .4%;
      width: 46%;
   }
   .TextographyRt {
      float: right;
      text-align: right;
      padding-right: 15px;
      padding-left: auto;
      margin-bottom: .4%;
      width: 26%;
   }
}

/* -------------------------------------------------------------- ---------------------- */

@media (min-width: 820px) and (max-width: 1436px){

   /* start nav button Icons ---------------------- */
   .voiceMailIconHolder {
      width: 80px;
      height: 80px;
      background-size: 80px 80px;
   }

   .recordIconHolder {
      width: 80px;
      height: 80px;
      background-size: 80px 80px;
   }

   .greetingsIconHolder {
      width: 80px;
      height: 80px;
      background-size: 80px 80px;
   }

   .conferencingIconHolder {
      width: 80px;
      height: 80px;
      background-size: 80px 80px;
   }

   .routingIconHolder {
      width: 80px;
      height: 80px;
      background-size: 80px 80px;
   }

   .contactsIconHolder {
      width: 80px;
      height: 80px;
      background-size: 80px 80px;
   }

   .settingsIconHolder {
      width: 80px;
      height: 80px;
      background-size: 80px 80px;
   }
   /* end nav button Icons ---------------------- */
   .navTitleHolder {
      font-family: "HelveticaNeueLTStd Roman";
      font-size: 0.56em;
   }
   .navButtonHolder {
      width: 100px;
      margin: 0 auto;
      height: 82px;
      padding-top: 4%;
   }

   .Textography {
      float: left;
      text-align: left;
      padding-left: 15px;
      padding-right: auto;
      margin-bottom: .4%;
      width: 66%;
      font-size: 11px;
   }
   .TextographyRt {
      float: right;
      text-align: right;
      padding-right: 15px;
      padding-left: auto;
      margin-bottom: .4%;
      width: 26%;
      font-size: 11px;
   }


}


/* -------------------------------------------------------------- ---------------------- */

@media (min-width: 461px) and (max-width: 820px){

   /* start nav button Icons ---------------------- */
   .voiceMailIconHolder {
      width: 66px;
      height: 66px;
      background-size: 66px 66px;
   }

   .recordIconHolder {
      width: 66px;
      height: 66px;
      background-size: 66px 66px;
   }

   .greetingsIconHolder {
      width: 66px;
      height: 66px;
      background-size: 66px 66px;
   }

   .conferencingIconHolder {
      width: 66px;
      height: 66px;
      background-size: 66px 66px;
   }

   .routingIconHolder {
      width: 66px;
      height: 66px;
      background-size: 66px 66px;
   }

   .contactsIconHolder {
      width: 66px;
      height: 66px;
      background-size: 66px 66px;
   }

   .settingsIconHolder {
      width: 66px;
      height: 66px;
      background-size: 66px 66px;
   }


   /* end nav button Icons ---------------------- */




   .navTitleHolder {
      font-family: "HelveticaNeueLTStd Roman";
      font-size: 0.45em;
   }
   .navButtonHolder {
      width: 100px;
      margin: 0 auto;
      height: 82px;
      padding-top:9%;
   }
   .Textography {
      float: left;
      text-align: left;
      padding-left: 15px;
      padding-right: auto;
      margin-bottom: .4%;
      width: 50%;
      font-size: 11px;
   }
   .TextographyRt {
      float: right;
      text-align: right;
      padding-right: 15px;
      padding-left: auto;
      margin-bottom: .4%;
/*      width: 26%; */
      font-size: 11px;
   }




}



/*------------------------------------------------------------------------ */

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
   .col {  margin: 1% 0 1% 0%; }

   .col {
      display: block;
      float:left;
      margin: 1% 0 1% 1.6%;
   }
   .col:first-child { margin-left: 0; }

   /*  GROUPING  */
   .group:before,
   .group:after { content:""; display:table; }
   .group:after { clear:both;}

   .group {
      zoom:1; /* For IE 6/7 */
   }
   /*  GRID OF SEVEN  */
   .span_7_of_7 {
      margin: 0 auto;
      width: 33%;
      text-align: center;
   }

   .span_6_of_7 {
      margin: 0 auto;
      width: 33%;
      text-align: center;
   }

   .span_5_of_7 {
      margin: 0 auto;
      width: 33%;
      text-align: center;
   }

   .span_4_of_7 {
      margin: 0 auto;
      width: 25%;
      text-align: center;
   }

   .span_3_of_7 {
      margin: 0 auto;
      width: 25%;
      text-align: center;
   }

   .span_2_of_7 {
      margin: 0 auto;
      width: 25%;
      text-align: center;
   }

   .span_1_of_7 {
      margin: 0 auto;
      width: 25%;
      text-align: center;
   }

   /* start nav button Icons ---------------------- */
   .voiceMailIconHolder {
      width: 52px;
      height: 52px;
      background-size: 52px 52px;
      position: relative;
      clear: both;
   }

   .recordIconHolder {
      width: 52px;
      height: 52px;
      background-size: 52px 52px;
      display: inline-block;
      position: relative;
   }

   .greetingsIconHolder {
      width: 52px;
      height: 52px;
      background-size: 52px 52px;
      display: inline-block;
      position: relative;
      clear: both;
   }

   .conferencingIconHolder {
      width: 52px;
      height: 52px;
      background-size: 52px 52px;
      display: inline-block;
      position: relative;
      clear: both;
   }

   .routingIconHolder {
      width: 52px;
      height: 52px;
      background-size: 52px 52px;
      display: inline-block;
      position: relative;
      clear: both;
   }

   .contactsIconHolder {
      width: 52px;
      height: 52px;
      background-size: 52px 52px;
      display: inline-block;
      position: relative;
      clear: both;
   }

   .settingsIconHolder {
      width: 52px;
      height: 52px;
      background-size: 52px 52px;
      display: inline-block;
      position: relative;
      clear: both;
   }


   /* end nav button Icons ---------------------- */




   .navTitleHolder {
      font-family: "HelveticaNeueLTStd Roman";
      font-size: 0.40em;
      display: inline-block;
      position: relative;
      float: left;
      top: -8px;
   }
   .navButtonHolder {
      width: 80px;
      margin: 0 auto;
      position: relative;
      display: table;
      height: 20%;
      padding-top: 0%;
      vertical-align: top;
   }
   .Textography {
      float: left;
      text-align: left;
      padding-top: 0px;
      padding-left: 15px;
      padding-right: auto;
      margin-bottom: .4%;
      width: 170px;
      font-size: 10px;
   }
   .TextographyRt {
      float: right;
      text-align: right;
      padding-right: 15px;
      padding-left: auto;
      margin-bottom: .4%;
      width: 29%;
      font-size: 10px;
   }

}