@charset "UTF-8";

/*----------------------------------------------------------------------------------------------------*/
/*                                                                                                    */
/*  Loader                                                                                            */
/*                                                                                                    */
/*----------------------------------------------------------------------------------------------------*/

/* Center the loader */
#loader 
{
  position: absolute;
  left: 50%;
  top: 50%;
}

.loaderSpinnerDisplay
{
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #CB0600;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin 
{
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin 
{
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom 
{
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom 
{
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom 
{ 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}

/*----------------------------------------------------------------------------------------------------*/
/*                                                                                                    */
/*  Body                                                                                              */
/*                                                                                                    */
/*----------------------------------------------------------------------------------------------------*/

body 
{
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  font-size: 16px;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  font-style: normal;
  color: black;
}

/* 1.25 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.25), 
(min-resolution: 120dpi)
{ 
  /* Retina-specific stuff here */
  body 
  {
    font-weight: 300;
  }
}

/*----------------------------------------------------------------------------------------------------*/
/*                                                                                                    */
/*  Global                                                                                            */
/*                                                                                                    */
/*----------------------------------------------------------------------------------------------------*/

.p-bold
{
  font-weight: 600;
}

a.link
{
  color: black;
}

a.link:hover
{
  font-weight: 600;
}

/*----------------------------------------------------------------------------------------------------*/
/*                                                                                                    */
/*  Main Container                                                                                    */
/*                                                                                                    */
/*----------------------------------------------------------------------------------------------------*/

#main-container 
{
	display: none;
  width: 100%;
  height: 1320px;
  margin: auto;
  border-top: 1px solid white;   /* Used to prevent margin collapsing */
  background-color: #FFFFFF;
}

/*----------------------------------------------------------------------------------------------------*/
/*  Business Logo                                                                                     */
/*----------------------------------------------------------------------------------------------------*/

#business-logo 
{
	padding-top: 0px;
	display: block;
	margin-top: 9px;   /* 10px down from top of window when factoring in the (main-container) 1px top border */
	margin-left: auto;
	margin-right: auto;
	max-width: 350px;
	max-height: 87.5px;
}

/*----------------------------------------------------------------------------------------------------*/
/*  Navigation Bar                                                                                    */
/*----------------------------------------------------------------------------------------------------*/

#nav-bar-container
{
  height: 77px;
  margin: 0px;
  padding: 0px;
  border-top: 1px solid #FFFFFF;   /* Used to prevent margin collapsing */
  border-bottom: 1px solid #FFFFFF;   /* Used to prevent margin collapsing */
  background-color: #FFFFFF;
}

#nav-bar-background
{
  width: auto;
  height: 45px;
  margin: 15px auto 15px auto;
  padding: 0px;
  background-color: #808080;
  border-bottom: 1px solid #CCCCCC;
  overflow: hidden;
}

#nav-bar 
{
  max-width: 1550px;
  height: 45px;
  margin: 0px auto 0px auto;
  padding: 0px 50px 0px 50px;
  border-bottom: 1px solid #CCCCCC;
  list-style-type: none;
  overflow: hidden;
  background-color: #808080;
}

li a 
{
  display: block;
  color: white;
  text-align: center;
  padding: 12px 16px;
  text-decoration: none;
}

li a:hover:not(.active) 
{
  background-color: #000111;
  text-decoration: none;
  color: white;
}

a.active 
{
  background-color: #CB0600;
}

li.nav-bar-left 
{
  width: 120px;
  height: 45px;
  float: left;
}

li.nav-bar-right 
{
  width: 120px;
  height: 45px;
  float: right;
}

/*----------------------------------------------------------------------------------------------------*/
/*  Services                                                                                          */
/*----------------------------------------------------------------------------------------------------*/

* {box-sizing: border-box}

div.services-content-container 
{
  max-width: 1550px;
  height: 1000px;
  margin: 34px auto 10px auto;
  padding-left: 50px;
  padding-right: 50px;
}

div.tab-selection-container 
{
  width: 20%;
  float: left;
}

button.tab-buttons 
{
  margin-top: 2px;
  display: block;
  background-color: #FFFFFF;
  color: black;
  padding: 2px 12px;
  width: 100%;
  border: 1px solid #CCCCCC;
  outline: none;
  text-align: center;
  cursor: pointer;
  transition: 0.3s;
  font-family: inherit;
  font-weight: inherit;
  font-size: 1.0em;
  line-height: 55px;
}

div.tab-selection-container button.active 
{
  background-color: #DDDDDD;
  box-shadow: -10px 0px 16px 2px rgba(0,0,0,0.24);
}

button.tab-buttons:hover 
{
  background-color: #FFFFFF;
  box-shadow: -10px 0px 16px 2px rgba(0,0,0,0.24);
}

div.tab-content-container 
{
  float: left;
  margin: 0px;
  padding: 0px;
  width: 80%;
  height: auto;
}

div.tab-content
{
  display: block;
  margin-top: 2px;
  margin-left: 2px;
  padding: 0px 12px;
  border: 1px solid #CCCCCC;
  background-color: #DDDDDD;
  box-shadow: 10px 0px 16px 2px rgba(0,0,0,0.24);
}

img.services-image
{
  display: block;
  float: right;
  max-width: 60%;
  height: auto;
  padding: 0px 10px 20px 10px;
}

img.services-icon-image
{
  max-width: 30px;
  max-height: 30px;
  margin-top: 12px;
  float: left;
}

h3.services-title
{
  font-style: italic;
  font-weight: 600;
}

ul
{
  padding-left: 20px;
}

table, td 
{
  border-collapse: collapse;
  border: 1px solid #CCCCCC;
  height: 30px;
}

/*----------------------------------------------------------------------------------------------------*/
/*  Products                                                                                          */
/*----------------------------------------------------------------------------------------------------*/

div.products-content-container
{
  max-width: 1550px;
  height: auto;
  margin: 50px auto 100px auto;
  padding-left: 175px;
  padding-right: 175px;
}

div.product-container
{
  max-width: 1550px;
  margin: 10px auto 100px auto;
  padding-top: 40px;
  padding-bottom: 60px;
  padding-left: 200px;
  padding-right: 200px;
  border: 1px solid #CCCCCC;
  background-color: #FFFFFF;
  border-top: 1px solid #CCCCCC;
  border-bottom: 0px solid #FFFFFF;
  border-left: 0px solid #FFFFFF;
  border-right: 0px solid #FFFFFF;
}

img.products-app-image
{
  max-width: 100px;
  max-height: 100px;
  margin-top: 7.5px;
  float: right;
}

button.products-button 
{
  width: 100%;
  margin: 4px 2px;
  padding-left: 40px;
  padding-right: 40px;
  background-color: #FFFFFF;
  border: 1px solid #CCCCCC;
  color: black;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  font-family: inherit;
  font-weight: inherit;
  font-size: 1.05em;
  line-height: 115px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}

button.products-button:hover 
{
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
  background-color: #DDDDDD;
}

/*----------------------------------------------------------------------------------------------------*/
/*  CRC Calculator                                                                                    */
/*----------------------------------------------------------------------------------------------------*/

div.crc-calculator-content-container
{
  margin: 50px auto 50px auto;
  width: 80%;
  height: auto;
  padding-left: 35px;
  padding-right: 35px;
  border: 1px solid #CCCCCC;
  background-color: #FFFFFF;
}

#crc-calculator-iphone-image
{
  display: block;
  float: right;
  max-width: 40%;
  max-height: 800px;
  padding: 0px 70px 20px 70px;
}

#download-app-store
{
  display: block;
  float: left;
  max-width: 100%;
  height: auto;
  padding: 0px 0px 0px 0px;
  border: 0px solid #FFFFFF;
}

#download-app-store-button
{
  width: auto;
  height: auto;
  margin: 5px 5px 5px 0px;
  padding: 5px 1px 5px 1px;
  background-color: #FFFFFF;
  border: 0px solid #FFFFFF;
  color: black;
}

#download-app-store-button:hover 
{
  background-color: #DDDDDD;
}

.release-table
{
  width:40%;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px; 
  font-size: 14px;
}

table.release-table td 
{
  padding: 0px 10px 0px 10px; 
}


/*----------------------------------------------------------------------------------------------------*/
/*  About                                                                                             */
/*----------------------------------------------------------------------------------------------------*/

div.about-content-container
{
  max-width: 1000px;
  height: auto;
  margin: 50px auto 100px auto;
  padding-left: 50px;
  padding-right: 50px;
  border: 1px solid #CCCCCC;
  background-color: #FFFFFF;
}

img.about-image
{
  display: block;
  float: right;
  max-width: 50%;
  height: auto;
  padding: 0px 10px 20px 10px;
}

/*----------------------------------------------------------------------------------------------------*/
/*  Contact                                                                                           */
/*----------------------------------------------------------------------------------------------------*/

div.contact-content-container
{
  max-width: 1000px;
  height: 700px;
  margin: 50px auto 100px auto;
  padding-top: 30px;
  padding-left: 50px;
  padding-right: 50px;
  border: 1px solid #CCCCCC;
  background-color: #FFFFFF;
}

.btn-lg
{
  background-color: #808080;
  border: 1px solid #CCCCCC;
}

.btn-lg:hover
{
  background-color: #CB0600;
  border: 1px solid #CCCCCC;
} 

.btn-primary[disabled]
{
  background-color: #CCCCCC;
  border-color: #CCCCCC;
}

.col-sm-10
{
  float: none;
}

legend
{
  border-bottom: 1px solid #CCCCCC;
}

.help-block
{
  padding-left: 190px;
}

.contact-table
{
  border: none;
  padding: 0px;
}

table.contact-table td
{
  border: none;
  padding: 0px;
}

/*----------------------------------------------------------------------------------------------------*/
/*  Footer                                                                                            */
/*----------------------------------------------------------------------------------------------------*/

#footer-container
{
  height: 45px;
  margin-bottom: 20px;
  background-color: #808080;
  border-bottom: 1px solid #CCCCCC;
}

#footer
{
  margin: 0px;
  text-align: center;
  color: white;
}

/*----------------------------------------------------------------------------------------------------*/
/*  Small desktop screen                                                                              */
/*----------------------------------------------------------------------------------------------------*/

@media (max-width: 1279px) 
{
  /*----------------------------------------------------------------------------------------------------*/
  /*  Services                                                                                          */
  /*----------------------------------------------------------------------------------------------------*/

  button.tab-buttons 
  {
    padding: 2px 5px;
    font-size: 0.80em;
  }
}

/*----------------------------------------------------------------------------------------------------*/
/*                                                                                                    */
/*  Mobile Website                                                                                    */
/*                                                                                                    */
/*----------------------------------------------------------------------------------------------------*/

@media (max-width: 1023px) 
{
  /*----------------------------------------------------------------------------------------------------*/
  /*                                                                                                    */
  /*  Loader                                                                                            */
  /*                                                                                                    */
  /*----------------------------------------------------------------------------------------------------*/

  .loaderSpinnerDisplay
  {
    margin: -25px 0 0 -25px;
    border: 8px solid #f3f3f3;
    border-radius: 50%;
    border-top: 8px solid #CB0600;
    width: 60px;
    height: 60px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
  }

  /*----------------------------------------------------------------------------------------------------*/
  /*                                                                                                    */
  /*  Body                                                                                              */
  /*                                                                                                    */
  /*----------------------------------------------------------------------------------------------------*/

  body 
  {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px; 
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 300;
    font-style: normal;
  }

  /*----------------------------------------------------------------------------------------------------*/
  /*                                                                                                    */
  /*  Main Container                                                                                    */
  /*                                                                                                    */
  /*----------------------------------------------------------------------------------------------------*/

  #main-container 
  {
    height: 2000px;
  }

  /*----------------------------------------------------------------------------------------------------*/
  /*  Business logo                                                                                     */
  /*----------------------------------------------------------------------------------------------------*/

   #business-logo 
   {
      padding-top: 20px;
      display: block;
      margin-top: 0px;
      margin-left: auto;
      margin-right: auto;
      max-width: 400px;
      max-height: 100px;
   }

  /*----------------------------------------------------------------------------------------------------*/
  /*  Navigation bar                                                                                    */
  /*----------------------------------------------------------------------------------------------------*/

  #nav-bar-container
  {
    height: 212px;
    margin: 0px;
    padding: 0px;
    border-top: 1px solid #FFFFFF;   /* Used to prevent margin collapsing */
    border-bottom: 1px solid #FFFFFF;   /* Used to prevent margin collapsing */
    background-color: #FFFFFF;
  }

  #nav-bar-background
  {
    width: auto;
    height: 180px;
    margin: 15px auto 15px auto;
    padding: 0px;
    background-color: #808080;
    border-bottom: 1px solid #CCCCCC;
    overflow: hidden;
  }

  #nav-bar 
  {
    height: 180px;
    margin: 0px auto 0px auto;
    padding: 0px;
    border: none;
    list-style-type: none;
    overflow: hidden;
    background-color: #808080;
  }

  li.nav-bar-left 
  {
    width: auto;
    height: 45px;
    float: none;
  }

  li.nav-bar-right 
  {
    width: auto;
    height: 45px;
    float: none;
  }

  /*----------------------------------------------------------------------------------------------------*/
  /*  Services                                                                                          */
  /*----------------------------------------------------------------------------------------------------*/

  div.services-content-container 
  {
    max-width: 1000px;
    height: 1525px;
    margin: 10px auto 100px auto;
    padding-left: 10px;
    padding-right: 10px;
  }

  div.tab-selection-container 
  {
    width: 100%;
  }

  button.tab-buttons 
  {
    margin-top: 2px;
    display: block;
    background-color: inherit;
    color: black;
    padding: 2px 12px;
    width: 100%;
    border: 1px solid #CCCCCC;
    outline: none;
    text-align: center;
    cursor: pointer;
    transition: 0.3s;
    font-family: inherit;
    font-weight: inherit;
    font-size: 0.8em;
    line-height: 40px;
  }

  div.tab-content-container 
  {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: auto;
  }

  div.tab-content
  {
    margin-top: 25px;
    margin-left: 2px;
    padding: 0px 12px;
    border: 1px solid #CCCCCC;
    background-color: #DDDDDD;
    box-shadow: 10px 0px 16px 2px rgba(0,0,0,0.24);
    font-size: 0.8em;
  }

  img.services-image
  {
    width: 100%;
    height: auto;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    display: block;
  }

  img.services-icon-image
  {
    max-width: 30px;
    max-height: 30px;
    margin-top: 5px;
    float: left;
  }

  /*----------------------------------------------------------------------------------------------------*/
  /*  Products                                                                                          */
  /*----------------------------------------------------------------------------------------------------*/

  div.products-content-container
  {
    max-width: 1550px;
    height: 225px;
    margin: 10px auto 30px auto;
    padding-left: 10px;
    padding-right: 10px;
  }

  div.product-container
  {
    max-width: 1550px;
    height: auto;
    margin: 20px auto 20px auto;
    padding-top: 20px;
    padding-bottom: 10px;
    padding-left: 25px;
    padding-right: 25px;
  }

  button.products-button 
  {
    width: 100%;
    margin: 4px 0px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 1.0em;
  }

  /*----------------------------------------------------------------------------------------------------*/
  /*  About                                                                                             */
  /*----------------------------------------------------------------------------------------------------*/

  div.about-content-container
  {
    max-width: 1000px;
    height: auto;
    margin: 20px 10px 50px 10px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid #CCCCCC;
    background-color: #FFFFFF;
    font-size: 0.8em;
  }

  img.about-image
  {
    display: block;
    float: right;
    max-width: 50%;
    height: auto;
    padding: 0px 10px 20px 10px;
  }

  /*----------------------------------------------------------------------------------------------------*/
  /*  Contact                                                                                           */
  /*----------------------------------------------------------------------------------------------------*/

  div.contact-content-container
  {
    max-width: 1000px;
    height: 700px;
    margin: 10px 10px 100px 10px;
    padding-top: 30px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid #CCCCCC;
    background-color: #FFFFFF;
    font-size: 0.8em;
  }

  .help-block
  {
    padding-left: 55px;
  }
}

@media (hover: none) 
{
  li a:hover { color: inherit; }
}