/* GLOBAL SITE STYLES (pacersurveys.com)

   /* Animation -->> */
   
      @keyframes FadeInFast {
         0% {opacity: 0}
         25% {opacity: .50}
         50% {opacity: 1}
         75% {opacity: 1}
         100% {opacity: 1}}
      
      @keyframes FadeInNormal {
         0% {opacity: 0}
         25% {opacity: .25}
         50% {opacity: .50}
         75% {opacity: .75}
         100% {opacity: 1}}
      
      @keyframes FadeInSlow {
         0% {opacity: 0}
         25% {opacity: 0}
         50% {opacity: 0}
         75% {opacity: .50}
         100% {opacity: 1}}

      @keyframes SlideInFULL {
         0% {width: 100%}
         10% {width: 75%}
         20% {width: 50%}
         30% {width: 25%}
         40% {width: 10%}
         50% {width: 0%}
         60% {width: 10%}
         70% {width: 20%}
         80% {width: 30%}
         90% {width: 40%}
         100% {width: 50%}}
         
      @keyframes SlideInHALF {
         0% {width: 0%}
         10% {width: 5%}
         20% {width: 10%}
         30% {width: 15%}
         40% {width: 20%}
         50% {width: 25%}
         60% {width: 30%}
         70% {width: 35%}
         80% {width: 40%}
         90% {width: 45%}
         100% {width: 50%}}
         
      @keyframes SlideInFromRightA {
         0% {width: 0%}
         25% {width: 10%}
         50% {width: 20%}
         75% {width: 35%}
         100% {width: 50%}}

      @keyframes SlideInFromRightB {
         0% {width: 0%}
         25% {width: 5%}
         50% {width: 10%}
         75% {width: 15%}
         100% {width: 25%}}

      @keyframes SlideInFromRightC {
         0% {width: 0%}
         25% {width: 0%}
         50% {width: 10%}
         75% {width: 15%}
         100% {width: 25%}}
         
   /* Class & Element Styles */
   
      body {
         background-color: white; background-repeat: no-repeat;}
      
      /* Header Box and Associated Elements */
      .headerBox {width: 100%; padding-top: 5px; font-size: 32px;}
         .headerBox table {width: 100%;}
         
      .hdBx_logoCell {animation-name: SlideInFromRightA; animation-duration: .5s; width: 50%; text-align: right;}
         .hdBx_logoCell img {width: 55%;}

      .hdBx_navCell {animation-name: FadeInSlow; animation-duration: .75s; width: 25%; padding-top: 25px; text-align: right; vertical-align: top;}
      .hdBx_mtCell {width: 25%;}
      
      /*Wesite Home Page - Custom Survey Display Window */
      .homeCustom {
         animation-name: FadeInSlow;
         animation-duration: 1s;
         width: 100%;}
      
      /*Wesite Home Page - Main Display Window */
      .homeMain {
         animation-name: FadeInSlow;
         animation-duration: 1s;
         width: 100%}

         /* The SURVEY CODE Panel */
         .homeSurvey {
            width: 33%;
            text-align: center;
            border-right: 1.5px solid #009999;}
         
            .homeSurvey img {
               animation-name: FadeInSlow;
               animation-duration: 2s;
               width: 85%;}

            .surveyCodeBOX {
               animation-name: FadeInSlow;
               animation-duration: 2s;
               text-align: center;
               border-radius: 5px;
               color: grey;}
               
            .surveyGoBUTTON {
               animation-name: FadeInSlow;
               animation-duration: 2s;
               width: 100px;
               font-family: Calibri;
               font-size:  13px;
               color: #003366;
               text-align: center;
               border-radius: 10px;
               border-color: #003366;}
               
               .surveyGoBUTTON:hover {
                  color: white;
                  background-color: #003366;
               }

         .homeX {
            width: 34%;
            // border-left: 1.5px solid #009999;
            border-right: 1.5px solid #009999;
            text-align: center;}

            .homeX img {
               animation-name: FadeInSlow;
               animation-duration: 1.5s;
               width: 85%;}

         .homeProfile {
            width: 34%;
            text-align: center;}

            .homeProfile img {
               animation-name: FadeInSlow;
               animation-duration: 2.5s;
               width: 85%;}
            
            .hPrf_UserName_Label {
               animation-name: FadeInSlow;
               animation-duration: 2.5s;
               width: 40%;
               font-family: Calibri;
               font-size: 13px;
               color: #003366;
               text-align: right;}
               
            .profileInputBOX {
               animation-name: FadeInSlow;
               animation-duration: 2.5s;
               text-align: center;
               border-radius: 5px;
               color: grey;}
               
            .profileGoBUTTON {
               animation-name: FadeInSlow;
               animation-duration: 2.5s;
               width: 100px;
               font-family: Calibri;
               font-size:  13px;
               color: #003366;
               text-align: center;
               border-radius: 10px;
               border-color: #003366;}
               
               .profileGoBUTTON:hover {
                  color: white;
                  background-color: #003366;}
               
            .hPrf_join {
               animation-name: FadeInSlow;
               animation-duration: 1.5s;
               font-family: Calibri;
               font-size: 13px;
               color: #003366;
               text-align: center;}
               
            .hPrf_ERR {
               font-family: Calibri;
               font-size: 12px;
               color: red;
               font-weight: bold;
               border-bottom: 1px solid #009999;}

// PROFILE --> ANALYZE -->
    
   .arTITLE {
      animation-name: SlideInFULL;
      animation-duration: 1.5s;
      text-align: left; 
      border-bottom: 4px double #003366;}
      
   .analyzeOptionBUTTON {
      width: 150px;
      font-family: Calibri;
      font-size:  13px;
      color: #003366;
      text-align: center;
      border-radius: 10px;
      border-color: #003366;}
      
      .analyzeOptionBUTTON:hover {
         color: white;
         background-color: #003366;}
               
            .eiArea {
               font-family: Calibri;
               font-size: 16px;
               width: 40%;}
               
            .eiSCORE {
               font-size: 40px;
               text-align: center;}
                  
   .arXiTITLE{
      animation-name: FadeInSlow;
      animation-duration: 2s;
      width: 30%;
      background-color: white;
      text-align: left;
      vertical-align: top;
      font-family: Calibri;
      font-size: 16px;
      color: #005577;}
                  
   .arXiTITLEb{
      animation-name: FadeInSlow;
      animation-duration: 2s;
      width: 70%;
      background-color: white;
      text-align: left;
      vertical-align: top;
      font-family: Calibri;
      font-size: 16px;
      color: #005577;}
      
   .arXiSubA {
      animation-name: FadeInSlow;
      animation-duration: 1s;
      width: 10%;
      background-color: white;
      text-align: left;
      vertical-align: top;
      font-family: Calibri;
      font-size: 13px;
      color: #005577;}
      
   .arXiSubB {
      animation-name: FadeInSlow;
      animation-duration: 1s;
      width: 90%;
      background-color: white;
      text-align: left;
      vertical-align: top;
      font-family: Calibri;
      font-size: 13px;
      color: #005577;}
      
      .arXiSubA button {
         animation-name: FadeInSlow;
         animation-duration: 1.5s;
         width: 25px;
         font-family: Calibri;
         font-size:  13px;
         color: grey;
         text-align: center;
         border: none;}


   .perMtxArea {
      background-image: url("/Global/Images/mkrAtt1.png"), url("/Global/Images/mkrAtt2.png"), url("/Global/Images/mkrAtt3.png"), url("/Global/Images/mkrAtt4.png"), url("/Global/Images/mkrAtt5.png");
      background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
      background-position: 75% 75%, ;
   }

   .perMTX {
     width: 9.125%;
     height: 45px;
     text-align: center;}
     
   .perMTX2 {
     width: 3%;
     text-align: right;
     vertical-align: bottom;
     border-right: 1px solid black;}
               
   .perMTX3 {
     width: 9.125%;
     height: 45px;
     border-right: 2px dotted black;
     text-align: center;}
     
   .perMTXimpBRK {
     width: 9.125%;
     height: 45px;
     border-bottom: 2px dotted black;
     text-align: center;}
     
   .perMTXint {
     width: 9.125%;
     height: 45px;
     border-right: 2px dotted black;
     border-bottom: 2px dotted black;
     text-align: center;}
     
      /*PACER X PRODUCT PAGE */
         
         .pcrX_LogoBox {
            animation-name: FadeInSlow;
            animation-duration: 1.5s;
            position: relative;
            padding-top: 50px;
            width: 25%;
            background-color: white;
            text-align: center;
            vertical-align: top;}
            
            .pcrX_LogoBox img {
               width: 100%;}
               
         .pcrX_Details {
            animation-name: FadeInSlow;
            animation-duration: 2s;
            padding-top: 50px;
            padding-left: 50px;
            font-family: Calibri;
            font-size: 18px;
            color: #003366;}
            
            .pcrX_Details button {
               animation-name: FadeInSlow;
               animation-duration: 2.5s;
               width: 50px;
               font-family: Calibri;
               font-size:  13px;
               color: grey;
               text-align: center;
               border-radius: 10px;
               border-color: grey;}
               
                  
   .arSrTITLE{
      animation-name: FadeInSlow;
      animation-duration: 2s;
      background-color: white;
      text-align: left;
      vertical-align: top;
      font-family: Calibri;
      font-size: 16px;
      font-weight: bold;
      color: #005577;}
      
   .arSrDisplayArea{
      animation-name: FadeInSlow;
      animation-duration: 2s;
      background-color: white;
      text-align: left;
      vertical-align: top;
      font-family: Calibri;
      font-size: 13px;
      color: #005577;}
                 
               
      /*USER REGISTRATION - Privacy Policy */

        .regPnlPP {
           animation-name: FadeInSlow;
           animation-duration: 2s;
           position: relative;
           padding-left: 10px;
           padding-right: 10px;
           width: 50%;
           background-color: white;
           text-align: left;
           vertical-align: top;
           font-family: Calibri;
           font-size: 13px;
           color: #005577;}

        .regPnlPW {
           animation-name: FadeInSlow;
           animation-duration: 2s;
           position: relative;
           padding-left: 10px;
           padding-right: 10px;
           background-color: white;
           text-align: left;
           vertical-align: top;
           font-family: Calibri;
           font-size: 13px;
           color: #005577;}
                      
           .PrivPol {
              animation-name: FadeInSlow;
              animation-duration: 2s;
              position: relative;
              padding-left: 10px;
              padding-right: 10px;
              background-color: white;
              text-align: left;
              vertical-align: top;
              font-family: Calibri;
              font-size: 13px;
              color: #005577;}
 
         .regCustDETAIL {
           animation-name: FadeInSlow;
           animation-duration: 2s;
           padding-left: 10px;
           padding-right: 10px;
           width: 50%;
           background-color: white;
           text-align: left;
           vertical-align: top;
           font-family: Calibri;
           font-size: 13px;
           color: #005577;}
            
            .regCustDETAIL button {
               animation-name: FadeInSlow;
               animation-duration: 2.5s;
               width: 25px;
               font-family: Calibri;
               font-size:  13px;
               color: grey;
               text-align: center;
               border: none;
            }
           
        .regBut {
           animation-name: FadeInSlow;
           animation-duration: 2.5s;
           width: 100px;
           font-family: Calibri;
           font-size:  13px;
           color: #003366;
           text-align: center;
           border-radius: 10px;
           border-color: #003366;}




.navBox {
  background-size: 65%, 150%;
  background-repeat: no-repeat;
  padding-top: 10px;
  padding-bottom: 100px;
  font-family: Eras Light ITC;
  font-size: 20px;
  color: white;
  text-align: left;
}


.navBoxB {
  background-image: url('http://www.pacersurveys.com/Global/Images/orion.png');
  height: 300px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 4px double orange;
  font-family: Eras Light ITC;
  font-size: 20px;
  color: white;
  text-align: left;
}

.featBoxA {
  animation-name: FadeInSlow;
  animation-duration: 2s;
  position: relative;
  top: 25px;
  width: 400px;
  height: 100px;
  padding-top: 5px;
  padding-left: 10px;
  background-color: white;
  border-radius: 10px;
  text-align: center;
  vertical-align: text-top;
  font-size: 16px;
  color: #005577;
}
   
.featBoxB {
  animation-name: FadeInA;
  animation-duration: 3s;
  position: relative;
  top: 25px;
  width: 50%;
  height: 100px;
  padding-left: 10px;
    background-color: white;
  border-radius: 10px;
  border: 4px double orange;
  text-align: center;
  vertical-align: text-top;
  font-size: 16px;
  color: #005577;
}

.featBoxC {
  animation-name: FadeInA;
  animation-duration: 3s;
  position: relative;
  top: 25px;
  width: 88%;
  height: 100px;
  padding-left: 10px;
  background-color: white;
  border-radius: 10px;
  border: 4px double orange;
  text-align: left;
  font-size: 16px;
  color: #005577;
}

.featBoxD {
  animation-name: FadeInA;
  animation-duration: 3s;
  position: relative;
  top: 25px;
  width: 500px;
  height: 100px;
  padding-top: 5px;
  padding-left: 10px;
  background-color: white;
  border-radius: 10px;
  border: 4px double orange;
  text-align: center;
  vertical-align: text-top;
  font-size: 13px;
  color: #005577;
}

  .featBoxD_1 {
    text-align: center;
    vertical-align: bottom;
  }

  .featBoxE2 {
    animation-name: FadeInA;
    animation-duration: 3s;
    position: relative;
    padding-left: 200px;
    padding-right: 10px;
    background-color: white;
    text-align: left;
    vertical-align: top;
    font-family: Calibri;
    font-size: 13px;
    color: #005577;}

.featBoxF {
  animation-name: FadeInA;
  animation-duration: 3s;
  position: relative;
  width: 450px;
  height: 100px;
  padding-top: 5px;
  padding-left: 10px;
  background-color: white;
  text-align: center;
  vertical-align: text-top;
  font-size: 16px;
  color: #005577;}

.navPanel {
  animation-name: FadeInA;
  animation-duration: 3s;
  position: relative;
  text-align: left;
  vertical-align: top;
  font-family: Calibri;
  font-size: 16px;
  color: #005577;}
  
   .navPnlBUTTON {
      width: 100px;
      font-family: Calibri;
      font-size:  13px;
      color: #003366;
      text-align: center;
      border-radius: 10px;
      border-color: #003366;}

   .navPnlBUTTON:hover {
      width: 100px;
      font-family: Calibri;
      font-size:  13px;
      background-color: #003366;
      color: white;
      text-align: center;
      border-radius: 10px;
      border-color: #003366;}

.userPanel {
  animation-name: FadeInA;
  animation-duration: 3s;
  position: relative;
  width: 88%;
  text-align: center;
  vertical-align: text-top;
  font-family: Calibri;
  font-size: 16px;
  color: #005577;}


.hSPnl {
  animation-name: FadeInA;
  animation-duration: 3s;
  position: relative;
  width: 25%;
  height: 100px;
  padding-top: 5px;
  padding-left: 10px;
  background: radial-gradient(white 75%, grey);
  border-radius: 10px;
  border: 4px double orange;
  text-align: center;
  vertical-align: text-top;
  font-family: Calibri;
  font-size: 13px;
  color: #005577;
}



.chartBoxA{
  animation-name: FadeInA;
  animation-duration: 3s;
  position: relative;
  top: 25px;
  width: 600px;
  height: 500px;
  padding-top: 5px;
  padding-left: 10px;
  background: radial-gradient(white, grey);
  border-radius: 10px;
  border: 4px double orange;
  text-align: center;
  vertical-align: text-top;
  font-size: 13px;
  color: #005577;
}

.featBoxLFT {
  animation-name: FadeInA;
  animation-duration: 3s;
  position: relative;
  top: 25px;
  width: 10%;
  height: 100px;
  padding: 5px;
  background: radial-gradient(white, grey);
  border-radius: 10px;
  border: 4px double orange;
  text-align: center;
  vertical-align: text-top;
  font-size: 16px;
  color: #005577;
}

.chartQ1Q2_breakCol {
  border-left: 1px dashed;
}

.chartQ1Q2_breakRow {
  border-bottom: 1px dashed;
}


.chartQ1Q2_breakINT {
  border-left: 1px dashed;
  border-bottom: 1px dashed;
}