/* =======================================================
Eric R. Lund
Copyright 2019
written for - www.skyward.com

swatch colors
-------------
#fbbb62 - gold
#ef6467 - red
#56cb57 - green
#6293f8 - lightblue
#c972ea - purple
#4265ad - darkblue

device sizes
-------------
@media (min-width:320px)  { smartphones, portrait iPhone, portrait 480x320 phones (Android)  }
@media (min-width:480px)  { smartphones, Android phones, landscape iPhone  }
@media (min-width:600px)  { portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android)  }
@media (min-width:801px)  { tablet, landscape iPad, lo-res laptops ands desktops  }
@media (min-width:1025px) { big landscape tablets, laptops, and desktops  }
@media (min-width:1281px) { hi-res laptops and desktops  }

========================================================== */

@font-face {
    font-family: 'Open Sans';
    src: local('Open Sans'), url('../../fonts/Open_Sans/opensans-regular-webfont.woff') format('woff'), url('../../fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: fallback;
}
@font-face {
    font-family: 'Open Sans';
    src: local('Open Sans'), url('../../fonts/Open_Sans/opensans-italic-webfont.woff') format('woff'), url('../../fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: fallback;
}
@font-face {
    font-family: 'Open Sans';
    src: local('Open Sans'), url('../../fonts/Open_Sans/opensans-bold-webfont.woff') format('woff'), url('../../fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: fallback;
}


@font-face {
    font-family: 'Header';
    src: local('Header'), url('../../fonts/Header/header-regular-webfont.woff') format('woff'), url('../../fonts/Header/header-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: fallback;
}
@font-face {
    font-family: 'Header';
    src: local('Header'), url('../../fonts/Header/header-italic-webfont.woff') format('woff'), url('../../fonts/Header/header-italic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: fallback;
}
@font-face {
    font-family: 'Header';
    src: local('Header'), url('../../fonts/Header/header-bold-webfont.woff') format('woff'), url('../../fonts/Header/header-bold-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: fallback;
}


@font-face {
    font-family: 'Lora';
    src: local('Lora'), url('../../fonts/Lora/lora-regular-webfont.woff') format('woff'), url('../../fonts/Lora/lora-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: fallback;
}
@font-face {
    font-family: 'Lora';
    src: local('Lora'), url('../../fonts/Lora/lora-italic-webfont.woff') format('woff'), url('../../fonts/Lora/lora-italic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: fallback;
}
@font-face {
    font-family: 'Lora';
    src: local('Lora'), url('../../fonts/Lora/lora-bold-webfont.woff') format('woff'), url('../../fonts/Lora/lora-bold-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: fallback;
}

* {-webkit-font-smoothing: antialiased !important;}

/*
  This will hide the focus indicator if the element receives focus via the mouse,
  but it will still show up on keyboard focus.
*/
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}
 
/*
  Optionally: Define a strong focus indicator for keyboard focus.
  If you choose to skip this step then the browser's default focus
  indicator will be displayed instead.
*/
.js-focus-visible .focus-visible {
  outline: 2px solid #000 !important;
  outline-offset: 0px;
  border: 1px solid #fff !important;
  border-radius: 0 !important;
  transition: 0s !important;
}

.userResPnl {
  display: block; 
  width: 100% !important; 
  border-radius: 4px;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
  opacity: .7;
}
.userResPnl:hover {
  background-color: transparent !important;
  opacity: 1;
  transform: scale(1.02);
}

.prodUpdate {
  display: block; 
  background-color: white;
  width: 97% !important; 
  height: 50px;
  margin: 0px auto;
  margin-top: 8px;
  border-radius: 4px;
  text-align: center !important;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
  opacity: .8;
}
.prodUpdate:hover {
  background-color: white !important;
  opacity: 1;
  transform: scale(1.02);
}

.activeTop {
  background-color: #4062a2 !important;
}

.youTubeThumbnail {
  width: 95%; 
  height: 225px; 
  margin: 8px; 
  border-radius: 6px;
}

.featuredBannerLarge {
  display: block; width: 100%;
}
.featuredBannerSmall {
  display: none;
}

.grayMenu a:hover {
  text-decoration: none !important;
}

#p_lt_ctl02_SimpleCookieLawConsent_btnAllowAll {
  float: right;
  margin-top: -22px;
  margin-right: 5px;
  display: block;
  clear: both;
}
.cookies {
  width: 100%; 
  display: block; 
  position: fixed; 
  bottom: 0px; 
  -webkit-box-shadow: -3px 4px 16px 3px #ccc; 
  -moz-box-shadow: -3px 4px 16px 3px #ccc; 
  box-shadow: -3px 4px 16px 3px #ccc;
  color: #797979 !important; 
  background-color: #f2f2f2; 
  font-size: 8pt; 
  font-family: 'Open Sans';
  line-height: 1.2; 
  text-align: center; 
  padding-top: 5px; 
  padding-bottom: 5px; 
  z-index: 1000;
  animation: fadein 3s;
  -moz-animation: fadein 3s; /* Firefox */
  -webkit-animation: fadein 3s; /* Safari and Chrome */
  -o-animation: fadein 3s; /* Opera */
}
.cookies a {
  text-decoration: underline;
  color: #6293f8;
}
.cookies a:hover {
  color: #6293f8;
}
.ConsentButton {
  /*background: transparent;*/
  font-size: 10pt;
  /*border: none;*/
  color: #797979 !important; 
}
.textBlock {
  display: block;
  width: 90%;
  margin: 0px auto;
  margin-bottom: 0px;
}
.subscribeBlog {
  padding-bottom: 28px;
}
@media (min-width: 50px) and (max-width: 700px) {
  .subscribeBlog {
    padding-bottom: 80px;
  }
  .textBlock {
    margin-bottom: 5px;
  }
  #p_lt_ctl02_SimpleCookieLawConsent_btnAllowAll {
    float: none;
    margin-top: 0px;
    margin-right: 0px;
    margin: 0px auto !important;
  }
}


@keyframes fadein {
  from {
    opacity:0;
  }
  to {
    opacity:1;
  }
}
@-moz-keyframes fadein { /* Firefox */
  from {
    opacity:0;
  }
  to {
    opacity:1;
  }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
  from {
    opacity:0;
  }
  to {
    opacity:1;
  }
}
@-o-keyframes fadein { /* Opera */
  from {
    opacity:0;
  }
  to {
    opacity: 1;
  }
}

.imgScale { width: 100% !important; max-width: 600px;}

/*#CTA BUTTONS CSS#*/
.cta {
  height: 35px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border: none !important;
  padding: 10px 30px 10px 30px;
  position: relative !important;
  float: none !important;
  display: block;
  overflow: hidden;
  margin: 0px auto;
  background-color: transparent;
  border: 1px solid gray;
  border-color: gray gray gray;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
  text-align: center;
}
.cta:hover{
  transform: scale(1.05);
}
.cta:active{
  transform: scale(0.95);
  box-shadow: 
    0px 0px 0px 1px #458a8c, 
    0 1px 1px #d5d5d5, inset 0 1px 0 rgba(255,255,255,0.8),
    0px 1px 1px 2px #fff;
}
.icon {
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
  opacity: 1;
}
.cta:hover .icon{
  transform: scale(1.15);
  opacity: 1;
}
.cta-text {
    font-family: 'Open Sans', sans-serif !important;
    font-size: 16pt;
    color: white !important;
    line-height: 16px;
    font-weight: normal;
    font-family: "Open Sans";
    margin-top: 9px;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    padding-left: 0px;
    display: inline-block;
    opacity: 1;
}
.cta:hover .cta-text{
  transform: scale(1.05);
  padding-left: 0px;
  opacity: 1;
}
.small {
  width: 180px;
}
.medium {
  width: 250px;
}
.large {
  max-width: 500px;
  width: 70%;
}
.lightShadow {
  -webkit-box-shadow: -2px 2px 6px 2px #9f9d9e;
  -moz-box-shadow: -2px 2px 6px 2px #9f9d9e;
  box-shadow: -2px 2px 6px 2px #9f9d9e;
}
.darkShadow {
  -webkit-box-shadow: -3px 4px 16px 3px #27273b;
  -moz-box-shadow:    -3px 4px 16px 3px #27273b;
  box-shadow:         -3px 4px 16px 3px #27273b;
}

.blueBtn {
  background-color: #7ca6fc;
  background-color: #6293f8;
}
.blueBtn:hover {
  background-color: #6293f8;
  background-color: #7ca6fc;
}
.greenBtn {
  background-color: #72db74;
  background-color: #56cb57;
}
.greenBtn:hover {
  background-color: #56cb57;
  background-color: #72db74;
}
.goldBtn {
  background-color: #fdc580;
  background-color: #fbbb62;
}
.goldBtn:hover {
  background-color: #fbbb62;
  background-color: #fdc580;
}
.redBtn {
  background-color: #ff7575;
  background-color: #ef6467;
}
.redBtn:hover {
  background-color: #ef6467;
  background-color: #ff7575;
}
.purpleBtn {
  background-color: #d487f0;
  background-color: #c972ea;
}
.purpleBtn:hover {
  background-color: #c972ea;
  background-color: #d487f0;
}
.darkBtn {
  background-color: #5a7dbd;
  background-color: #5174b8;
}
.darkBtn:hover {
  background-color: #5174b8;
  background-color: #5a7dbd;
}
@media (min-width: 50px) and (max-width: 568px) {
  .adjust {
    font-size: 11pt;
    padding-left: 25px;
  }
  .cta:hover .adjust{
    padding-left: 35px;
  }
}
/*********************************************************************************************************************/

/*#Banner CSS style#*/
  .banner{ 
    background-attachment: fixed !important; 
    width:100%; 
    height:auto; 
    position: relative; 
    padding-top: 100px;
    padding-bottom: 0px;
  } 

  .fullBack {
    background-size: cover !important;
  }
  
  .blueScreen {

  }
  .blueScreen:before{
    position: absolute;
    content:" ";
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: rgba(63,95,156,0.8);
  }

  .greenScreen {

  }
  .greenScreen:before{
    position: absolute;
    content:" ";
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: rgba(63,156,65,.8);
  }

  .goldScreen {

  }
  .goldScreen:before{
    position: absolute;
    content:" ";
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: rgba(251,187,98,.8);
  }

  .redScreen {

  }
  .redScreen:before{
    position: absolute;
    content:" ";
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: rgba(197,60,60,.8);
  }

  .purpleScreen {

  }
  .purpleScreen:before{
    position: absolute;
    content:" ";
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: rgba(201,114,234,0.8);
  }

  .lightblueScreen {

  }
  .lightblueScreen:before{
    position: absolute;
    content:" ";
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: rgba(98,147,248,0.8);
  }

  .dontCover * {
    position: relative;
    /* hack so that the text in the banner is not affected by the overlay */
  }

  .bannerText {
    width: 95%; 
    max-width: 960px;
    margin: 0px auto;
  }
  
  @media (min-width: 50px) and (max-width: 850px) {
    .banner {
      background-image:none !important;
      background-color: #4967a5 !important;
    }
  }


/*#Resets and Overrides#*/
/** {
  margin: 0;
  padding: 0;
}*/
@media (min-width: 50px) and (max-width: 850px) {
  .k12Back {
    background-image:none !important;
    background-color: #4967a5 !important;
  }
}
.searchResult {
  font-weight: bold;
  font-size: 16pt;
  color: #6293f8;
}
.searchResult:hover {
  color: #4265ad;
  text-decoration: underline;
}

/*#New Animated Buttons#*/
.new-btn {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 4px;
    padding: 15px;
    position: relative !important;
    float: none !important;
    display: block;
    overflow: hidden;
    margin: 0px auto;
    background: gray;
    border: 1px solid gray;
    border-color: gray gray gray;
    -webkit-box-shadow: -3px 4px 16px 3px #27273b;
    -moz-box-shadow:    -3px 4px 16px 3px #27273b;
    box-shadow:         -3px 4px 16px 3px #27273b;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.new-btn:hover{
    transform: scale(1.05);
}
.new-btn-text {
    color: white !important;
    /*font-size: 20px;
    line-height: 16px;
    font-weight: normal;*/
    /*font-family: "Myriad Pro", "Trebuchet MS", sans-serif;*/
    display: block;
    text-align: center;
    opacity: 0.85;
    /*position: absolute;*/
}
.new-btn:hover .new-btn-text{
    opacity: 1;
    
}
.new-btn:active{
    transform: scale(0.95);
    box-shadow: 
        0px 0px 0px 1px #458a8c, 
        0 1px 1px #d5d5d5, inset 0 1px 0 rgba(255,255,255,0.8),
        0px 1px 1px 2px #fff;  
}

.a-btn {
    height: 35px;
    width: 250px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 10px 30px 10px 30px;
    position: relative !important;
    float: none !important;
    display: block;
    overflow: hidden;
    margin: 0px auto;
    background: gray;
    border: 0px solid gray;
    border-color: gray gray gray;
    -webkit-box-shadow: -3px 4px 16px 3px #27273b;
    -moz-box-shadow:    -3px 4px 16px 3px #27273b;
    box-shadow:         -3px 4px 16px 3px #27273b;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.gold-btn {
    background: #fbbb62 !important;
    border: 1px solid #fbbb62 !important;
    border-color: #fbbb62 #fbbb62 #fbbb62 !important;
}
.gold-btn:hover {
    background: #e0a95b !important;
    border: 1px solid #e0a95b !important;
    border-color: #e0a95b #e0a95b #e0a95b !important;
}
.red-btn {
    background: #ff7575 !important;
    border: 1px solid #ff7575 !important;
    border-color: #ff7575 #ff7575 #ff7575 !important;
}
.red-btn:hover {
    background: #ef6467 !important;
    border: 1px solid #ef6467 !important;
    border-color: #ef6467 #ef6467 #ef6467 !important;
}
.green-btn {
    background: #72db74 !important;
    border: 1px solid #72db74 !important;
    border-color: #72db74 #72db74 #72db74 !important;
}
.green-btn:hover {
    background: #56cb57 !important;
    border: 1px solid #56cb57 !important;
    border-color: #56cb57 #56cb57 #56cb57 !important;
}
.lightblue-btn {
    background: #7ca6fc !important;
    border: 1px solid #7ca6fc !important;
    border-color: #7ca6fc #7ca6fc #7ca6fc !important;
}
.lightblue-btn:hover {
    background: #6293f8 !important;
    border: 1px solid #6293f8 !important;
    border-color: #6293f8 #6293f8 #6293f8 !important;
}
.purple-btn {
    background: #c972ea !important;
    border: 1px solid #c972ea !important;
    border-color: #c972ea #c972ea #c972ea !important;
}
.purple-btn:hover {
    background: #d487f0 !important;
    border: 1px solid #d487f0 !important;
    border-color: #d487f0 #d487f0 #d487f0 !important;
}
.darkblue-btn {
    background: #4265ad !important;
    border: 1px solid #4265ad !important;
    border-color: #4265ad #4265ad #4265ad !important;
}
.darkblue-btn:hover {
    background: #5a7dbd !important;
    border: 1px solid #5a7dbd !important;
    border-color: #5a7dbd #5a7dbd #5a7dbd !important;
}

.a-btn-symbol {
    font-family: 'WebSymbolsRegular', cursive;
    color: #437b7d;
    color: white;
    font-size: 30px;
    position: absolute !important;
    left: 20px;
    width: 20px;
    text-align: center;
    line-height: 42px;
    top: 4px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    font-weight: normal;
}
.a-btn-symbol-down {
    font-family: 'WebSymbolsRegular', cursive;
    color: #437b7d;
    color: white;
    font-size: 30px;
    position: absolute !important;
    left: 20px;
    width: 20px;
    text-align: center;
    line-height: 42px;
    top: -7px;
    opacity: .5;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    font-weight: normal;
}
.a-btn-text {
    font-size: 20px;
    color: white !important;
    line-height: 16px;
    font-weight: normal;
    font-family: "Open Sans";
    display: block;
    padding-top: 7px;
    padding-left: 30px;
    text-align: center;
    /*position: absolute;*/
}

.a-btn:hover{
    transform: scale(1.05);
    text-decoration: none !important;
}
.a-btn:hover .a-btn-symbol{
    /*opacity: 0.5;
    transform: rotate(360deg);
    -webkit-transform: translatex(15px) !important;
    -moz-transform: translatex(15px) !important;
    transform: translatex(15px) !important;*/
}
.a-btn:hover .a-btn-symbol-down{
    opacity: 1;
    /*transform: rotate(360deg);*/
    -webkit-transform: translatey(15px);
    -moz-transform: translatey(15px);
    transform: translatey(15px);
}

.a-btn:hover .a-btn-text{
    opacity: 0.85;
    
}

.jf-btn-text {
    font-size: 20px;
    color: white !important;
    line-height: 16px;
    font-weight: normal;
    font-family: "Open Sans";
    display: block;
    text-align: center;
    position: absolute;
    top: 40px;
    left: 25%;
    right: 10%;
}
.a-btn:hover .jf-btn-text{
    opacity: 1;
}

.a-btn:active{
    transform: scale(0.95);
    box-shadow: 
        0px 0px 0px 1px #458a8c, 
        0 1px 1px #d5d5d5, inset 0 1px 0 rgba(255,255,255,0.8),
        0px 1px 1px 2px #fff;  
}

.card-btn {
    height: 35px;
    width: 275px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    padding: 10px 30px 10px 30px;
    position: relative;
    float: none !important;
    display: block;
    overflow: hidden;
    margin: 0px auto;
    background: gray;
    border: 1px solid gray;
    border-color: gray gray gray;
    -webkit-box-shadow: 0px 0px 0px 0px #27273b;
    -moz-box-shadow:    0px 0px 0px 0px #27273b;
    box-shadow:         0px 0px 0px 0px #27273b;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.card-btn-symbol {
    font-family: 'WebSymbolsRegular', cursive;
    color: #437b7d;
    color: white;
    font-size: 30px;
    position: absolute !important;
    left: 20px;
    width: 20px;
    text-align: center;
    line-height: 42px;
    top: -7px;
    opacity: .5;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    font-weight: normal;
}

.card-btn-symbol-down {
    font-family: 'WebSymbolsRegular', cursive;
    color: #437b7d;
    color: white;
    font-size: 30px;
    position: absolute !important;
    left: 20px;
    width: 20px;
    text-align: center;
    line-height: 42px;
    top: -7px;
    opacity: .5;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    font-weight: normal;
}
.card-btn-symbol-right {
    font-family: 'WebSymbolsRegular', cursive;
    color: #437b7d;
    color: white;
    font-size: 30px;
    position: absolute !important;
    left: 5px;
    width: 20px;
    text-align: center;
    line-height: 42px;
    top: 4px;
    opacity: .7;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    font-weight: normal;
}
.card-btn-symbol-right img {
    width: 25px !important;
    height: 25px !important;
}
.card-btn-symbol-spin {
    font-family: 'WebSymbolsRegular', cursive;
    color: #437b7d;
    color: white;
    font-size: 30px;
    position: absolute !important;
    left: 20px;
    width: 20px;
    text-align: center;
    line-height: 42px;
    top: 4px;
    opacity: .5;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    font-weight: normal;
}
.card-btn-text {
    font-size: 20px;
    color: #437b7d;
    color: white;
    line-height: 16px;
    font-weight: normal;
    font-family: "Open Sans";
    display: block;
    padding-top: 7px;
    text-align: center;
    opacity: .8;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.card-btn:hover{
    transform: scale(1.00000000001);
    text-decoration: none !important;
}
.card-btn:hover .card-btn-symbol-down{
    opacity: 1;
    /*transform: rotate(360deg);*/
    -webkit-transform: translatey(15px);
    -moz-transform: translatey(15px);
    transform: translatey(15px);
}
.card-btn:hover .card-btn-symbol-right{
    opacity: 1;
    /*transform: rotate(360deg);*/
    transform: scale(1.20);
}
.card-btn:hover .card-btn-symbol-spin{
    opacity: 0.5;
    transform: rotate(360deg);
}
.card-btn:hover .card-btn-symbol{
    opacity: 0.5;
    transform: rotate(360deg);
}
.card-btn:hover .card-btn-text{
    opacity: 1;
    transform: scale(1.10);
    text-decoration: none !important;
}
.card-btn:active{
    transform: scale(0.999999999999);
    box-shadow: 
        0px 0px 0px 0px #458a8c, 
        0 0px 0px #d5d5d5, inset 0 0px 0 rgba(255,255,255,0.8),
        0px 0px 0px 0px #fff;  
}

.lie-btn-text {
    font-size: 20px;
    color: #437b7d;
    color: white;
    line-height: 16px;
    font-weight: normal;
    font-family: "Open Sans";
    display: block;
    padding-top: 7px;
    text-align: center;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.card-btn:hover .lie-btn-text{
    opacity: 0.85;
    transform: scale(1.2);
}

a.miniButton{
    display: inline-block;
    position: relative;
    float: none !important;
    overflow: hidden;
    width: 200px;
    height: 40px;
    margin: 0 auto;
    text-decoration: none;
    background-color: #6293f8;
    font-size: 14pt;
    padding-top: 8px;
    padding-bottom: 0px;
    color: #fff;
    border-radius: 6px;
    text-align: center;
    margin-bottom: 0px;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    -webkit-box-shadow: -3px 6px 9px 2px #ccc; 
    -moz-box-shadow: -3px 6px 9px 2px #ccc; 
    box-shadow: -3px 6px 9px 2px #ccc;
  }
  .miniButton-symbol {
    font-family: 'WebSymbolsRegular', cursive;
    color: #437b7d;
    color: white;
    font-size: 30px;
    position: absolute;
    left: 20px;
    width: 20px;
    text-align: center;
    line-height: 42px;
    top: 4px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    font-weight: normal;
}
.miniButton-text {
    font-size: 20px;
    color: #437b7d;
    color: white;
    line-height: 16px;
    font-weight: normal;
    font-family: "Open Sans";
    display: block;
    padding-top: 7px;
    text-align: center;
}
.miniButton:hover{
    transform: scale(1.05);
    color: #fff;
    -webkit-box-shadow: -3px 6px 11px 4px #ccc; 
    -moz-box-shadow: -3px 6px 11px 4px #ccc; 
    box-shadow: -3px 6px 11px 4px #ccc;
}
.miniButton:hover .miniButton-symbol{
    opacity: 0.5;
    transform: rotate(360deg);
}
.miniButton:hover .miniButton-text{
    opacity: 0.85;
}
.miniButton:active{
    transform: scale(0.95);
    box-shadow: 
        0px 0px 0px 1px #458a8c, 
        0 1px 1px #d5d5d5, inset 0 1px 0 rgba(255,255,255,0.8),
        0px 1px 1px 2px #fff;  
}

a.miniButtonDark{
    display: inline-block;
    position: relative;
    float: none !important;
    overflow: hidden;
    width: 240px;
    height: 40px;
    margin: 0 auto;
    text-decoration: none;
    background-color: #6293f8;
    font-size: 14pt;
    padding-top: 8px;
    padding-bottom: 0px;
    color: #fff;
    border-radius: 4px;
    text-align: center;
    margin-bottom: 0px;
    -webkit-transition: all 0.2s linear !important;
    -moz-transition: all 0.2s linear !important;
    -o-transition: all 0.2s linear !important;
    transition: all 0.2s linear !important;
    -webkit-box-shadow: -3px 6px 9px 2px #222; 
    -moz-box-shadow: -3px 6px 9px 2px #222; 
    box-shadow: -3px 6px 9px 2px #222;
  }
  .miniButtonDark-symbol {
    font-family: 'WebSymbolsRegular', cursive;
    color: #437b7d;
    color: white;
    font-size: 30px;
    position: absolute;
    left: 20px;
    width: 20px;
    text-align: center;
    line-height: 42px;
    top: 4px;
    -webkit-transition: all 0.3s ease-in-out !important;
    -moz-transition: all 0.3s ease-in-out !important;
    -o-transition: all 0.3s ease-in-out !important;
    transition: all 0.3s ease-in-out !important;
    font-weight: normal;
}
.miniButtonDark-text {
    font-size: 20px;
    color: #437b7d;
    color: white;
    line-height: 16px;
    font-weight: normal;
    font-family: "Open Sans";
    display: block;
    padding-top: 7px;
    text-align: center;
}
.miniButtonDark:hover{
    transform: scale(1.05);
    color: #fff;
    -webkit-box-shadow: -3px 6px 11px 4px #222; 
    -moz-box-shadow: -3px 6px 11px 4px #222; 
    box-shadow: -3px 6px 11px 4px #222;
    text-decoration: none !important;
}
.miniButtonDark:hover .miniButtonDark-symbol{
    opacity: 0.5;
    transform: rotate(360deg);
}
.miniButtonDark:hover .miniButtonDark-text{
    opacity: 0.85;
}
.miniButtonDark:active{
    transform: scale(0.95);
    box-shadow: 
        0px 0px 0px 1px #222, 
        0 1px 1px #222, inset 0 1px 0 rgba(30,30,30,0.8),
        0px 1px 1px 2px #222;  
}

/*#Colors used on the site#*/
.gold {
  background-color: #fbbb62 !important;
}
.red {
  background-color: #ef6467 !important;
}
.green {
  background-color: #56cb57 !important;
}
.lightblue {
  background-color: #6293f8 !important;
}
.purple {
  background-color: #c972ea !important;
}
.darkblue {
  background-color: #4265ad !important;
}
.golden {
  background-color: #fbbb63 !important;
}
.platinum {
  background-color: #e0dedf !important;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.lightgray {
  background-color: #f0f0f0;
  padding: 5px;
}
/* Hover background colors */
.gold:hover {
  background-color: #fdc580 !important;
}
.red:hover {
  background-color: #ff7575 !important;
}
.green:hover {
  background-color: #72db74 !important;
}
.lightblue:hover {
  background-color: #7ca6fc !important;
}
.purple:hover {
  background-color: #d487f0 !important;
}
.darkblue:hover {
  background-color: #5a7dbd !important;
}
.golden:hover {
  background-color: #e4aa5a !important;
}
.platinum:hover {
  background-color: #c9c9c9 !important;
}
.lightgray:hover {
  background-color: #dfdfdf;
}
/* Active background colors */
.goldActive {
  background-color: #fdc886 !important;
}
.redActive {
  background-color: #ff7575 !important;
}
.greenActive {
  background-color: #72db74 !important;
}
.lightblueActive {
  background-color: #7ca6fc !important;
}
.purpleActive {
  background-color: #d487f0 !important;
}
.darkblueActive {
  background-color: #5a7dbd !important;
}
.goldenActive {
  background-color: #e4aa5a !important;
}
.platinumActive {
  background-color: #c9c9c9 !important;
}


/*#Flex#*/
.flex-container {
    display: flex;
    flex-flow: row wrap;
    -webkit-justify-content: center;
    justify-content: center;
    align-content: flex-start;
    align-items: flex-start;
    width: 100%;
    max-width: 1600px;
    margin: 0px auto;
}

.spread {
  -webkit-justify-content: space-between; 
  justify-content: space-between;
}

.flex-item {
    display: flex;
}

.Order-1 {
  -webkit-order: 1; /* Safari */
  order:         1;
}

.Order-2 {
  -webkit-order: 2; /* Safari */
  order:         2;
}

.padding {
  padding: 1em 1em 1em 1em;
}

.toppadding {
  padding-top: 40px;
}

.bottompadding {
  padding-bottom: 60px;
}

.image {
  -webkit-justify-content: center; 
  justify-content: center;
}

.flex-item-thirds {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 240px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.flex-item-prodlinks {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-top: 0px; 
  padding-bottom: 0px; 
  width: 33%;
}

.miniCard {
  font-size: 10pt; 
  width: 100%; 
  display: block; 
  background-color: white; 
  color: black; 
  padding: 15px; 
  -webkit-box-shadow: -5px 9px 12px 4px #ccc; 
  -moz-box-shadow: -5px 9px 12px 4px #ccc; 
  box-shadow: -5px 9px 12px 4px #ccc;
  min-height: initial;
  padding: 0px;
  position: relative;
}

.miniSize {
  width: 300px;
  min-height: 400px;
}

.borderTopBlue {
  border-top: 8px solid #6293f8;
}
.borderTopGreen {
  border-top: 8px solid #56cb57;
}
.borderTopRed {
  border-top: 8px solid #ef6467;
}

.miniCardLinkBlue {
    display: block;
    width: auto;
    height: 38px;
    color: white;
    font-size: 16pt;
    background: url('/web/media/Images/CSS_Site/CustomerReview_Arrow_v-1.png') no-repeat;
    background-position: 10px center;
    background-color: #6293f8;
    margin: 0px auto;
    padding-left: 20px;
    padding-top: 10px;
    text-align: right;
    opacity: 0.80;
    padding-right: 25px;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    transition: opacity 0.5s;
}
.miniCardLinkBlue:hover {
  opacity: 1;
  color: white;
  background-color: #6293f8;
}
.miniCardLinkGreen {
    display: block;
    width: auto;
    height: 38px;
    color: white;
    font-size: 16pt;
    background: url('/web/media/Images/CSS_Site/CustomerReview_Arrow_v-1.png') no-repeat;
    background-position: 10px center;
    background-color: #56cb57;
    margin: 0px auto;
    padding-left: 20px;
    padding-top: 10px;
    text-align: right;
    opacity: 0.80;
    padding-right: 25px;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    transition: opacity 0.5s;
}
.miniCardLinkGreen:hover {
  opacity: 1;
  color: white;
  background-color: #56cb57;
}
.miniCardLinkRed {
    display: block;
    width: auto;
    height: 38px;
    color: white;
    font-size: 16pt;
    background: url('/web/media/Images/CSS_Site/CustomerReview_Arrow_v-1.png') no-repeat;
    background-position: 10px center;
    background-color: #ef6467;
    margin: 0px auto;
    padding-left: 20px;
    padding-top: 10px;
    text-align: right;
    opacity: 0.80;
    padding-right: 25px;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    transition: opacity 0.5s;
}
.miniCardLinkRed:hover {
  opacity: 1;
  color: white;
  background-color: #ef6467;
}
.miniCardLinkGold {
    display: block;
    width: auto;
    height: 38px;
    color: white;
    font-size: 16pt;
    background: url('/web/media/Images/CSS_Site/CustomerReview_Arrow_v-1.png') no-repeat;
    background-position: 10px center;
    background-color: #fbbb62;
    margin: 0px auto;
    padding-left: 20px;
    padding-top: 10px;
    text-align: right;
    opacity: 0.80;
    padding-right: 25px;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    transition: opacity 0.5s;
}
.miniCardLinkGold:hover {
  opacity: 1;
  color: white;
  background-color: #fcbf74;
}
.miniCardLinkPurple {
    display: block;
    width: auto;
    height: 38px;
    color: white;
    font-size: 16pt;
    background: url('/web/media/Images/CSS_Site/CustomerReview_Arrow_v-1.png') no-repeat;
    background-position: 10px center;
    background-color: #c972ea;
    margin: 0px auto;
    padding-left: 20px;
    padding-top: 10px;
    text-align: right;
    opacity: 0.80;
    padding-right: 25px;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    transition: opacity 0.5s;
}
.miniCardLinkPurple:hover {
  opacity: 1;
  color: white;
  background-color: #d487f0;
}
.miniCardLinkDarkBlue {
    display: block;
    width: auto;
    height: 38px;
    color: white;
    font-size: 16pt;
    background: url('/web/media/Images/CSS_Site/CustomerReview_Arrow_v-1.png') no-repeat;
    background-position: 10px center;
    background-color: #4265ad;
    margin: 0px auto;
    padding-left: 20px;
    padding-top: 10px;
    text-align: right;
    opacity: 0.80;
    padding-right: 25px;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    transition: opacity 0.5s;
}
.miniCardLinkDarkBlue:hover {
  opacity: 1;
  color: white;
  background-color: #5a7dbd;
}

.blog-flex-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-content: flex-start;
    align-items: flex-start;
    -webkit-justify-content: space-around; 
    justify-content: space-around;
    width: 100%;
    max-width: 1024px;
    margin: 0px auto;
  }

  .blog-flex-item {
      /*-webkit-flex: 1 auto;
      flex: 1 auto;
      margin: 0px auto;
      margin-bottom: 20px;
      text-align: center !important;
      -webkit-flex-grow: .75 !important;
      flex-grow:         .75 !important;
      width: 80px !important;*/
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /*padding: 1em 1em 1em 1em;*/
    text-align: center;
    /*height: 160px;*/
    width: 250px;
    margin: 10px;
  }

.why-flex-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-content: flex-start;
    align-items: flex-start;
    -webkit-justify-content: space-around; 
    justify-content: space-around;
    width: 100%;
    max-width: 1024px;
    margin: 0px auto;
  }

.why-flex-item {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /*padding: 1em 1em 1em 1em;*/
    text-align: center;
    width: 300px;
    margin: 10px;
  }

#mobileImage {
  display: none;
}

.slideImage {
  /*max-width: 800px;*/ 
  width: 100%;
}

.slideText {
  /*max-width: 550px;*/
  width: 100%;
}

.buttonLink {
  display: inline-block;
  width: 275px;
  height: 50px;
  margin: 0 auto;
  text-decoration: none;
  background-color: gray;
  font-size: 14pt;
  padding-top: 15px;
  padding-bottom: 0px;
  color: #fff;
  transition: background-color .5s ease !important;
  opacity: 1 !important;
  transition: -webkit-box-shadow .5s ease;
  transition: -moz-box-shadow .5s ease;
  transition: box-shadow .5s ease;
  -webkit-box-shadow: -3px 4px 16px 3px #27273b;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    -3px 4px 16px 3px #27273b;  /* Firefox 3.5 - 3.6 */
  box-shadow:         -3px 4px 16px 3px #27273b;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
  border-radius: 9px;
  text-align: center;
}
.buttonLink:hover{
  color: #fff;
  text-decoration: none !important;
  opacity: 1 !important;
  -webkit-box-shadow: -3px 4px 17px 4px #27273b;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    -3px 4px 17px 4px #27273b;  /* Firefox 3.5 - 3.6 */
  box-shadow:         -3px 4px 17px 4px #27273b;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

.floatingButton {
  position: absolute; 
  bottom: 30px; 
  left: 44%; 
  text-align: center;
}

.smallButton {
  width: 200px !important;
  height: 40px !important;
  font-size: 14pt;
  padding-top: 20px;
}

.blogThreeCard {
  font-size: 10pt; 
  width: 100%; 
  display: block; 
  background-color: white; 
  border-top: 8px solid #57669D; 
  color: black; 
  padding: 15px; 
  transition: -webkit-box-shadow .5s ease;
  transition: -moz-box-shadow .5s ease;
  transition: box-shadow .5s ease;
  -webkit-box-shadow: -5px 9px 12px 4px #ccc; 
  -moz-box-shadow: -5px 9px 12px 4px #ccc; 
  box-shadow: -5px 9px 12px 4px #ccc;
  transition: opacity .5s ease !important;
  opacity: .75;
  min-height: 400px;
  padding: 0px;
}

.blogThreeCard:hover {
  text-decoration: none !important;
  -webkit-box-shadow: -5px 9px 14px 6px #ccc; 
  -moz-box-shadow: -5px 9px 14px 6px #ccc; 
  box-shadow: -5px 9px 14px 6px #ccc;
  opacity: 1;
  color: black !important;
}

.colorCard {
  font-size: 10pt; 
  width: 100%;
  display: block; 
  background-color: white; 
  border-top: 8px solid #6495f5; 
  color: black; 
  padding: 0px; 
  -webkit-box-shadow: -3px 4px 16px 3px #27273b;
  -moz-box-shadow:    -3px 4px 16px 3px #27273b;
  box-shadow:         -3px 4px 16px 3px #27273b;
  opacity: 1;
  margin-bottom: 20px;
}


.whyThreeCard {
  font-size: 10pt; 
  width: 100%;
  height: 500px;
  display: block; 
  background-color: white; 
  border-top: 8px solid #6495f5; 
  color: black; 
  padding: 0px; 
  transition: -webkit-box-shadow .5s ease;
  transition: -moz-box-shadow .5s ease;
  transition: box-shadow .5s ease;
  -webkit-box-shadow: -5px 9px 12px 4px #ccc; 
  -moz-box-shadow: -5px 9px 12px 4px #ccc; 
  box-shadow: -5px 9px 12px 4px #ccc;
  transition: opacity .5s ease !important;
  opacity: .75;
  margin-bottom: 20px;
}

.whyThreeCard:hover {
  text-decoration: none !important;
  -webkit-box-shadow: -5px 9px 14px 6px #ccc; 
  -moz-box-shadow: -5px 9px 14px 6px #ccc; 
  box-shadow: -5px 9px 14px 6px #ccc;
  opacity: 1;
  color: black !important;
}

/*#Customer Reviews#*/
.outerDiv {
    width: 100%;
    height: 390px; 
  }
  
  .innerDiv {
    width: 100%;
    height: 390px; 
  }

/*#Video Section#*/
.videoOverlay {
    position: relative;
    width: 100%;
    margin: 0 auto;
    margin-top: 50px;
    display:inline-block;
    max-height: 600px;
    overflow: hidden;
  }
  .videoOverlay video {
    width: 100%;
    margin: 0px;
  }
  .videoOverlay:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    padding-right: 0px;
    background: rgba(63,95,156,0.70);
    background: rgba(49,49,49,0.70);
    border-radius: 0px;
  }
  .videoTextDiv {
    position: absolute; 
    display: table; 
    width: 100%; 
    height: auto; 
    z-index: 40; 
    text-align: center; 
    top: 20%; 
    margin: 0px auto;
  }
  .videoCenteredText {
    display: table; 
    width: 90%; 
    max-width: 960px; 
    margin: 0px auto; 
    text-align: left; 
    padding: 5px;
  }
  .headerText {
    display: block;
    color: rgb(255, 255, 255); 
    font-size: 16pt;
    line-height: 1.2;
  }
  .stickyButtons {
    position: fixed; 
    right: 0; 
    bottom: 0; 
    width: 100%; 
    display: table; 
    background-color: #fbfbfb;
  }
  .transGray {
    background-color: rgba(30,30,30,0.8); 
    padding-top: 15px; 
    padding-bottom: 20px; 
    width: 425px; 
    z-index: 999;
  }
  .disappear {
    display: none;
  }

.prodImage {
  width: 45%;
}

.prodText {
  width: 54%;
}

.homeReviewsText {
  color: white; 
  font-size: 16pt !important;  
  line-height: 1.5em !important;
}
.homeReviewsContact {
  color: white; 
  font-size: 12pt !important;  
  line-height: 1.5em !important;
}

/*#Slideshow#*/
    /*
    * {box-sizing:border-box}
    body {font-family: Verdana,sans-serif;margin:0}
    */
    
    /* Slideshow container */
    .slideshow-container {
      max-width: 1600px;
      position: relative;
      margin: 0px auto;
      width: 90%;
    }
    
    /* Next & previous buttons */
    .prev, .next {
      cursor: pointer;
      position: absolute;
      top: 0;
      top: 50%;
      width: auto;
      padding: 16px;
      margin-top: -22px;
      color: black;
      font-weight: bold;
      font-size: 42px;
      transition: 0.6s ease;
      border-radius: 0 3px 3px 0;
    }
    
    /* Position the "next button" to the right */
    .next {
      right: 0;
      border-radius: 3px 0 0 3px;
    }
    
    /* On hover, add a black background color with a little bit see-through */
    .prev:hover, .next:hover {
      background-color: rgba(155,155,155,0.5);
      text-decoration: none;
      color: white;
    }
    
    /* Caption text */
    .text {
      color: #f2f2f2;
      font-size: 15px;
      padding: 8px 12px;
      position: absolute;
      bottom: 8px;
      width: 100%;
      text-align: center;
    }
    
    /* Number text (1/3 etc) */
    .numbertext {
      color: #f2f2f2;
      color: black;
      font-size: 12px;
      padding: 8px 12px;
      position: absolute;
      top: -50px;
    }
    
    /* The dots/bullets/indicators */
    .dot {
      cursor:pointer;
      height: 13px;
      width: 13px;
      margin: 0 2px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
    }
    
    .active, .dot:hover {
      background-color: #717171;
    }
    
    /* Fading animation */
    .fade {
      -webkit-animation-name: fade;
      -webkit-animation-duration: 1.5s;
      animation-name: fade;
      animation-duration: 1.5s;
    }
    
    @-webkit-keyframes fade {
      from {opacity: .4}
      to {opacity: 1}
    }
    
    @keyframes fade {
      from {opacity: .4}
      to {opacity: 1}
    }
    
    /* On smaller screens, decrease text size */
    @media only screen and (max-width: 300px) {
      .slprev, .slnext,.text {font-size: 11px}
    }

/*#Product Cards#*/
.flex-container-product {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-content: flex-start;
    align-items: flex-start;
    -webkit-justify-content: space-around; 
    justify-content: space-around;
    width: 100%;
    max-width: 1024px;
    margin: 0px auto;
  }

  .flex-item-product {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    text-align: center;
    width: 350px;
    margin: 10px;
  }

  .productCard {
    display: inline-block !important;
    opacity: 1 !important;
	filter: alpha(opacity=100) !important;
    padding: 0px;
    margin: 0px;
    margin-bottom: 40px;
    -webkit-box-shadow: -5px 9px 12px 4px #ccc; 
    -moz-box-shadow: -5px 9px 12px 4px #ccc; 
    box-shadow: -5px 9px 12px 4px #ccc;
    height: 830px;
  }
  
  .productCard:hover {
    
  }

  .tinted-image {
    position: relative;
    display: inline-block;
    width: 44%;
    float: left;
    width: 350px !important; 
    height: 179px !important; 
    position: relative !important;
    margin-bottom: 20px !important;
  }
  .tint {
    position: relative;
    float: left;
    padding: 0px !important;
    /*cursor: pointer;*/
  }
  .tint:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,255,255, 0.5);
    transition: all .3s linear;
  }
  
  .productCard:hover .tint:before,
  .productCard:hover > .tint:before {
    
  }
  
  /*.tint:hover:before { background: none; }*/
  
  .tGold:before { background: rgba(251,187,98, 0.7); }
  .tRed:before { background: rgba(239,100,103, 0.7); }
  .tGreen:before { background: rgba(86,203,87, 0.7); }
  .tBlue:before { background: rgba(98,147,248, 0.7); }
  .tPurple:before { background: rgba(201,114,234, 0.7); }
  .tDarkBlue:before { background: rgba(20,60,145, 0.7); }
  .tGray:before { background: rgba(60,60,60, 0.7); }

  .outerCenteredDiv {
    position: absolute; 
    left: 50%; 
    top: 15%;
    /*border: 1px solid white;*/
  }
  .innerCenteredDiv {
    position: relative; 
    left: -50%; 
    top: -15%; 
    max-width: 300px; 
    width: 100%;
    /*border: 1px solid black;*/
  }

  .productIcon {
    width: 300px;
    margin: 0px auto;
  }

  .cardContentDiv {
    display: block; 
    text-align: left; 
    width: 100%; 
    max-width: 330px; 
    padding: 10px; 
    padding-top: 0px;
    background: white;
    height: 300px !important;
    margin-top: 230px;
  }

  .cardTitle {
    color: white;
    transition: color 0.6s ease;
  }

  .cardTitle:hover {
    color: #f9f7cd;
  }

  .prodBriefLink {
    color: #6293f8;
  }
  .prodBriefLink:hover {
    color: #7ea5f7;
  }


a.SMSheader {
    display: block;
    font-size: 24pt;
    line-height: 40px;
    font-weight: normal;
    color: #4e4e4e;
    transition: opacity .5s ease;
    opacity: .75;
    background: url("/web/media/Images/CSS_Site/SMS_Icon_v-1.png");
    background-size: 35px 35px;
    background-position: left center !important;
    background-repeat: no-repeat;
    text-align: left !important;
    padding-left: 40px;
    margin: 0px auto !important;
    max-width: 450px;
    width: 90%;
}
a.SMSheader:hover {
  opacity: 2;
  color: #4e4e4e;
}

a.SBSheader {
    display: block;
    font-size: 24pt;
    line-height: 40px;
    font-weight: normal;
    color: #4e4e4e;
    transition: opacity .5s ease;
    opacity: .75;
    background: url("/web/media/Images/CSS_Site/SBS_Icon_v-1.png");
    background-size: 35px 35px;
    background-position: left center !important;
    background-repeat: no-repeat;
    text-align: left !important;
    padding-left: 40px;
    margin: 0px auto !important;
    max-width: 350px;
    width: 90%;
}
a.SBSheader:hover {
  opacity: 2;
  color: #4e4e4e;
}

html
{
    margin: 0px;
    padding: 0px;
}

.tweetButton {
    display: block;
    background-color: #59adec !important;
    background: url("/web/media/Images/CSS_Site/Blog_Social_TW_v-1.png");
    background-size: 20px 18px;
    background-position: 30px center !important;
    background-repeat: no-repeat;
    color: white;
    width: 150px;
    padding: 5px;
    font-size: 8pt;
    border-radius: 4px;
    transition: opacity .5s ease;
    opacity: .75;
}
.tweetButton:hover {
  opacity: 1;
  color: white;
}

.facebookButton {
    display: block;
    background-color: #3c5a96 !important;
    background: url("/web/media/Images/CSS_Site/Blog_Social_FB_v-1.png");
    background-size: 20px 18px;
    background-position: 5px center !important;
    background-repeat: no-repeat;
    color: white;
    width: 150px;
    padding: 5px;
    font-size: 8pt;
    border-radius: 4px;
    transition: opacity .5s ease;
    opacity: .75;
}
.facebookButton:hover {
  opacity: 1;
  color: white;
}

.sendToFriendButton {
    display: block;
    background-color: #2a3232 !important;
    background: url("/web/media/Images/CSS_Site/Blog_Social_Email_v-1.png");
    background-size: 20px 18px;
    background-position: 10px center !important;
    background-repeat: no-repeat;
    color: white;
    width: 150px;
    padding: 5px;
    font-size: 8pt;
    border-radius: 4px;
    transition: opacity .5s ease;
    opacity: .75;
}
.sendToFriendButton:hover {
  opacity: 1;
  color: white;
}

/***.normalMilestones {
  text-align: center;
}**/

.fullMilestones {
  display: block;
}

.mobileMilestones {
  display: none;
}

.mobileNavButtons {
  display: none;
}

.mobileHome {
  display: none;
}

.mobileContact {
  display: none;
}

.searchTable {
  width: 440px;
}

.searchContainerBox {
  padding-top: 5px; 
  display: table; 
  clear: both; 
  text-align: right; 
  float: right;
}

.whiteTop {
  width: 100%; 
  display: table; 
  background-color: #fff;
}

.productBriefHeader {
  cursor: pointer;
}

.scrollerContent {
  /* IF NEEDED */
}

.iframeFormDiv {
  border: 0; 
  width: 100%; 
  height: 600px; 
  margin-top: 100px;
}

/*#Tablet Menu#*/
.tabletMenu {
  display: none !important; 
}

/*#ASC#*/
.ascTable {
  width: 100%; 
  -webkit-background-size: contain; 
  -moz-background-size: contain; 
  -o-background-size: contain; 
  background-size: contain;
}

/*#TN Microsite#*/
.tnTable {
    width: 100%;
    height: 200px;
    background-image: url('/web/media/Images/CSS_Site/TN-Microsite1-Banner.jpg');
    background-color: rgb(123, 35, 23);
    padding: 5px;
    text-align: center;
}

.doShow {
  visibility: visible;
}

.dontShow {
  display: none;
}

.tnTable2 {
    width: 100%;
    height: 200px;
    background-image: url('/web/media/Images/CSS_Site/TN-Microsite1-BlankBanner.jpg');
    background-color: rgb(123, 35, 23);
    padding: 5px;
    text-align: center;
}

::-webkit-scrollbar {
    background-color: black;
    width: 1.25em /* 20px / 16px */;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(66,128,207,1);
    border: 0.25em /* 4px / 16px */ solid black;
    border-radius: 1.25em /* 20px / 16px */;
}

.tnSlideShow {
  height: 425px; 
  width: 100%; 
  max-width: 1024px;
  overflow: auto; 
  white-space: nowrap; 
  margin: 0px auto; 
  border: 1px solid gray;
}

.showme{ 
    display: none;
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 400px !important; 
    height: 150px; 
    background: rgba(220,220,220, .9);
    color: black;
    font-size: 10pt;
    box-shadow: 0 0 8px rgba(0, 0, 0, .9);
}
  
.box {
    width: 480px; 
    display: inline-block; 
    position: relative;
    cursor: pointer; 
    cursor: hand;
}
  
.box:hover .showme{
    display : block;
}

/*#IT Services#*/
.carouselDiv {
  display: table; width: 850px; border: 1px solid gray;
}

/* Vendor Carousel */
          div#carousel, #ucCarousel
          {
            /* background-image */
          }
          
          #ucCarousel_carouselinner
          {
              margin: 0 auto;
          }
          /* Skin */
          .jcarousel-skin-tango .jcarousel-container {
              -moz-border-radius: 10px;
              -webkit-border-radius: 10px;
             border-radius: 10px;
              background: transparent;
          }
          
          .jcarousel-skin-tango .jcarousel-direction-rtl {
              direction: rtl;
          }
          
          .jcarousel-skin-tango .jcarousel-container-horizontal {
              width: 850px;
              padding: 10px 20px;
          }
          
          .jcarousel-skin-tango .jcarousel-clip {
              overflow: hidden;
          }
          
          .jcarousel-skin-tango .jcarousel-clip-horizontal {
              width:  850px;
              height: 75px;
          }
          
          .jcarousel-skin-tango .jcarousel-item {
              height: 75px;
          }
          
          .jcarousel-skin-tango .jcarousel-item-horizontal {
              margin-left: 0;
              margin-right: 30px;
          }
          
          .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
              margin-left: 30px;
              margin-right: 0;
          }
          
          .jcarousel-skin-tango .jcarousel-item-placeholder {
              background: transparent;
              /*color: #000;*/
          }
          
          /**
           *  Horizontal Buttons
           */
          .jcarousel-skin-tango .jcarousel-next-horizontal {
              position: absolute;
              top: 43px;
              right: 5px;
              width: 32px;
              height: 32px;
              cursor: pointer;
              /**background: transparent url(next-horizontal.png) no-repeat 0 0;*/
          }
          
          .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
              left: 5px;
              right: auto;
              /**background-image: url(prev-horizontal.png);*/
          }
          
          .jcarousel-skin-tango .jcarousel-next-horizontal:hover,
          .jcarousel-skin-tango .jcarousel-next-horizontal:focus {
              background-position: -32px 0;
          }
          
          .jcarousel-skin-tango .jcarousel-next-horizontal:active {
              background-position: -64px 0;
          }
          
          .jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
          .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
          .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:focus,
          .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
              cursor: default;
              background-position: -96px 0;
          }
          
          .jcarousel-skin-tango .jcarousel-prev-horizontal {
              position: absolute;
              top: 43px;
              left: 5px;
              width: 32px;
              height: 32px;
              cursor: pointer;
              /**background: transparent url(prev-horizontal.png) no-repeat 0 0;*/
          }
          
          .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
              left: auto;
              right: 5px;
             /** background-image: url(next-horizontal.png);*/
          }
          
          .jcarousel-skin-tango .jcarousel-prev-horizontal:hover, 
          .jcarousel-skin-tango .jcarousel-prev-horizontal:focus {
              background-position: -32px 0;
          }
          
          .jcarousel-skin-tango .jcarousel-prev-horizontal:active {
              background-position: -64px 0;
          }
          
          .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
          .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
          .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:focus,
          .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
              cursor: default;
              background-position: -96px 0;
          }


.itLeftDiv {
  display: inline-block; 
  width: 275px;
  float: left;
}

.itCenterDiv {
  display: inline-block; 
  width: 450px;
  margin-left: 9px;
}

.itRightDiv {
  display: inline-block;
  width: 275px;
  float: right;
}

.itImageDiv {
  width: 400px;
  margin: 0px auto;
}

.itImage {
  width: 400px;
}

#carousel {
  width: 100%;
}

.sitewidth {
  width: 100%;
}


/*#Main Body#*/
body {
  /*background-color: #ffffff;*/
  font-family: "Open Sans"; 
  margin: 0px;
  padding: 0px;
  color: #575c7a;
  line-height: 1.9em;
  font-size: 16px !important;
}

form {
  background-color: #ffffff;
  color: #000 !important;
  font-family: "Open Sans";
  margin: 0px;
  padding: 0px;
}

a
{
    text-decoration: none;
    color: #497cbd;
}

a:hover
{
    text-decoration: underline;
    color: #497cbd;
    cursor: pointer !important;
}

    a:link, a:active, a:visited {
        color: #497cbd;
        text-decoration: underline;
    }
a:hover { color: #497cbd; text-decoration: underline; }

/*#Media Inquiries#*/
.mediaInquiryLeft {
  width: 300px; 
  float: left; 
  display: inline-block;
}

.mediaInquiryRight {
  width: 300px; 
  margin-left: 100px; 
  float: left; 
  display: inline-block;
}

/*#Ed-Fi#*/
.edFiImage {
  border-image: none; 
  width: 465px; 
  float: left; 
  display: inline-block;
}

.edFiText {
  border-image: none; 
  width: 445px; 
  height: 100%;
  margin-left: 20px; 
  display: inline-block;
}

/*#Business Partners#*/
.busPartImage {
  display: inline-block;
  width: 280px;
  float: left;
}

.busPartTitle {
  display: inline-block;
  width: 600px;
  float: left;
  margin-left: 20px;
  margin-top: 20px;
  /*border: 1px solid red;*/
}

.busPartDescription {
  display: inline-block;
  width: 100%;
}

.pageContainer {
  width:100%; 
  background-color: #fff; 
}

.pageContainerNew {
  width:100% !important; 
  background-color: #fff; 
  margin-top: 100px;
}

.pageContainerNew2 {
  width:100% !important; 
  background-color: #fff; 
  margin-top: 150px;
}

.page {
	max-width: 1024px;
	margin: 0px auto;
	position: relative; background-color: #fff;
}

.pageSkyGov {
  width: 95%;
  max-width: 1024px;
  margin: 0px auto;
}

/*#Menu containers#*/
.pinnedMenu {
  top: 0px; 
  width:100%; 
  height: 66px; 
  background-color: #172C71; 
  z-index: 9999;
}

.mobileIcons {
  width: 100%; 
  position: relative;
  display: table;
  visibility: collapse;
}

.mobileMenu {
  width: 100%; 
  position: relative;
  display: none;
}

/*#Rotating banner#*/
.rotatingBanner {
  width: 100%; 
  background-color: #487fd1; 
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/*#Social media#*/
.socialMedia {
  width: 100%; 
  height: 45px;
  background-color: #8891C0; 
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.socialMedia a {
  display: inline-block;
  margin-top: 4px;
}

.socialMediaSmall {
  visibility: collapse;
}

/*#Footer content#*/
.footerRow {
  position: relative; 
  width:100%; 
  height:auto; 
  background-color: white !important;
  color: rgba(255, 255, 255, 0.8); 
  padding: 0px 0; 
  border-top: 2px solid #696969;
}
.subscribeBlog {
  display: table; 
  width: 100%; 
  background-color: rgba(237,236,236,1) !important;
}
.footerContent {
  max-width: 1024px;
  margin: 0px auto;
  padding-top: 20px;
}

/*#Clear-fix#*/
.clear-fix { clear: both; line-height: 1px; }

.divTopContainer {
  width: 100%; 
  margin: 0px auto; 
  position: relative;
  display: table;
  vertical-align: top;
}

h1 {
    font-size: 30pt;
    font-weight: 500;
    font-family: sans-serif !important;
    color: #414141;
}

h2 {
    font-size: 20pt;
    font-weight: 100;
    font-family: 'Header';
    font-family: sans-serif !important;
    color: #414141;
}

h3 {
    font-size: 150%;
    padding-top: 28px;
    font-family: sans-serif !important;
}

h4 {
    font-size: 110%;
    font-family: sans-serif !important;
}

h5 {
    font-size: 100%;
    font-family: sans-serif !important;
}

h2,h3,h4,h5
{
    /*color: #000;*/
}

.EditingFormErrorLabel
{
	color: #ff0000;
}

.DesignMode .PagePlaceholder h1
{
    margin: 0px;
    /*padding-top: 15px;*/
}

img
{
    border: none;
}

table
{
    cellpadding: 0px;
    cellspacing: 0px;
    border: 0px;
}

img {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

img { border: none; }

/*# Blog Form Area #*/
.contentBox input[type=text], input[type=password]
{
    padding-left: 4px;
    border: 1px solid #f2f2f2;
    margin-bottom: 10px;
    width: 100%;
    border-radius: 5px;
    background-color: #f2f2f2;
}

.contentBox input[type=submit]
{
    background-color: #cd3729;
    color: white;
    border: 0px;
    border-radius: 14px;
    width: 100px;
    padding: 5px;
    cursor: pointer;
    font-size: 7pt;
    height: 30px;
    transition: opacity .5s ease;
    opacity: .75;
}

.contentBox input[type=submit]:hover {
    opacity: 1;
}

.contentBox textarea 
{
    padding-left: 4px;
    border: 1px solid #f2f2f2;
    margin-bottom: 10px;
    width: 100%;
    border-radius: 5px;
    background-color: #f2f2f2;
}

.ContentBody .form-horizontal {
  width: 100% !important;
}

.ContentBody .form-group .editing-form-value-cell {
  display: block;
  clear: both;
  width: 100%;
}
.ContentBody .form-group .editing-form-label-cell {
  padding: 0px !important;
  margin: 0px !important;
  text-align: left !important;
}

.ContentBody .form-group .editing-form-value-cell-offset {
    margin-left: 0px !important;
}

.ContentBody .form-group .editing-form-value-cell {
    width: 100% !important;
}

.ContentBody .form-group-submit {
    margin-left: 0% !important;
    padding-top: 15px;
    width: 100%;
    text-align: center;
}

.ContentPadding
{
   padding: 15px;
}

.CMSBreadCrumbsLink {
  font-weight: bold;
  font-size: 10pt; 
  font-style: italic;
  color:white !important;
  text-decoration:underline !important;
}

.CMSBreadCrumbsLink:hover {
  color:white;
}

.CMSBreadCrumbsCurrentItem {
  font-weight: normal;
  font-size: 10pt; 
  font-style: italic;
  color:white;
}

/*#Blogs#*/

.BlogCommentsTitle
{
    display: none;
}

.buttonpedding a
{
    margin-right: 5px;
}
.commentView
{
    color: #737373;
    padding-bottom: 30px;
}

.commentView .CommentDetail
{
    padding-top: 20px;
    margin-left: 28px;
}

.commentView .BlogLeaveComment
{
    font-size: 18px;
    color: #000000;
    line-height: 50px;
}

.commentView .CommentFormContainer, .BoardNewPost
{
    border-top: 1px dotted black;
    padding: 30px;
}
 
.commentView .BlogPanel
{
    width: 100%;
}

.commentView .header
{
    margin-bottom: 15px;
    font-size: 22px;
}

    .commentView .line {
        background: url('/web/media/Images/CSS_Site/bg_contentBoxHead.png') repeat-x scroll left top transparent;
        color: #737373;
        line-height: 32px;
        width: 100%;
        height: 32px;
    }

.commentView .CommentUserPicture
{
    padding-right: 30px; 
}

.commentView .CommentUserName
{
    color: #66addf;
    font-size: 15px;
    font-weight: bold;
}

.commentView .CommentDate
{
    line-height: 32px;
}

.commentView .CommentDetail table tr td
{
    vertical-align: top;
}

.commentView a   
{
    text-decoration: underline;
}

.commentView a:hover   
{
    text-decoration: none;
}

.commentView .CommentUserPicture img
{
    border: 1px solid #818181; 
    border: none !important; 
}

.commentView .CommentForm tr td
{
    vertical-align: baseline;
}

.BlogCommentName, .BlogCommentEmail, .BlogCommentUrl, .BlogCommentComments, .BlogRequiredValidator
{
    margin-top: 6px;
}


.commentView .CommentForm input[type=checkbox], .BoardForm input[type=checkbox]
{
    margin-left: 0px;
}

.BoardForm label
{
    line-height: 25px;
}

.commentView .CommentForm textarea
{
    width: 320px;
    height: 96px;
}

.commentView .BlogPanel {
    background: url('/web/media/Images/CSS_Site/bg_cssListBox.png') no-repeat scroll 0pc 60px transparent;
}

.TagCloud a
{
    color: #737373;
}

.gradientBox .content .urls a
{
    color: #737373 !important;
}

.gradientBox .content .urlsDecoration
{
    text-decoration: none;
}

.gradientBox .content .urlsDecoration:hover
{
    text-decoration: underline;
}

.blogPostDetail a 
{
    color: #737373;
}

.blogPostDetail p img
{
    float: left;
    width: 230px;
    margin: 0 40px 30px 0;
    border: 1px solid #c1c1c1 !important;
}

.noClearOnEdit .CMSEditModeButtonClear
{
    clear: none !important;
}

.EditMode .noClearOnEdit .CMSEditModeButtonClear,
.DesignMode .noClearOnEdit .CMSEditModeButtonClear
{
    clear: both !important;
}

/*#Captcha controls#*/
.CaptchaTable
{
    border-collapse: collapse;
    margin-top: 5px;
}

.CaptchaTable td
{
    padding: 2px !important;
}

.CaptchaTextBox
{
    width: 75px !important;
    height: 31px;
}

.CaptchaTextBoxSmall
{
    width: 15px !important;
    margin-left: 5px;
    margin-right: 5px;
    height: 31px;
}

.CaptchaAfterText
{
    padding: 10px;
}

/*#Logon Form#*/
.logon input[type="submit"], .signoutButton {
    /*background: url('/web/media/Images/CSS_Site/btn_submitButton.png') no-repeat 0px 2px;*/
    height: 24px;
    width: 61px !important;
    line-height: 22px !important;
    color: #ececec;
    text-decoration: none;
    display: inline-block;
    background-color: #819ec8;
    !important;
    cursor: pointer;
    overflow: hidden;
    border: 1px solid #819EC8;
    -moz-border-radius: 6px;
    border-radius: 6px;
    padding-top: 0px;
    transition: all .5s ease;
}

.Safari .logon input[type="submit"], .Safari .signoutButton
{
    line-height: 22px;
}

.signoutButton
{
    margin: 1px 0px 0px 4px;
}

.signoutButton:hover
{
  color: white;
  background-color: rgba(0, 78, 153, 0.8);
  background-color: #4265ad !important;
}

.LogonField
{
    padding: 0px 0px 2px 3px !important;
    color: #737373;
    border: 1px solid #CDCDCD;
}

.IE8 input[type=password]
{
    padding: 0px 0px 2px 0px;
}


a.readMore {
    text-shadow: none;
    display: block;
    width: 180px !important;
    height: 32px;
    margin: 0 auto;
    float: right;
    text-decoration: none;
    font-size: 18px !important;
    padding-top: 22px;
    padding-bottom: 2px;
    color: #fff !important;
    transition: opacity .5s ease;
    background: url("/web/media/Images/CSS_Site/Arrow.png") no-repeat 285px center;
    background-color: #57669d;
    opacity: .75;
    border-radius: 6px;
    text-align: center !important;
    padding-left: 9px !important;
    line-height: 14px !important;
}
  a.readMore:hover{
    color: #fff !important;
    opacity: 2;
  }

/*#Grid#*/

/* Computer */ 
/***.grid_1 { width: 6.5%; }  
.grid_2 { width: 15%; }  
.grid_3 { width: 23.5%; }
.grid_4 { width: 32%; }  
.grid_5 { width: 40.5%; } 
.grid_6 { width: 49%; }  
.grid_7 { width: 57.5%; }  
.grid_8 { width: 66%; }  
.grid_9 { width: 76.5%; }
.grid_10 { width: 83%; }  
.grid_11 { width: 91.5%; }**/  
.grid_12 { width: 100%; }  
 
/**.grid_1, 
.grid_2, 
.grid_3, 
.grid_4, 
.grid_5, 
.grid_6, 
.grid_7, 
.grid_8, 
.grid_9, 
.grid_10, 
.grid_11,**/
.grid_12 { 
	margin: 0 0 0 0; 
	float: left; 
	display: block; 
} 
 
.alpha{margin-left:0;} 
.omega{margin-right:0;} 
 
/*#Parallax Structure#*/
.container{ 
  width: 100%; /*width: 1010px;*/ 
  max-width: 1600px; 
  margin: auto; 
} 
 
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1} 

/*#Effects#*/
/* -------------------------------------------------------- */
/* ============================================================
  GLOBAL
============================================================ */
.clearfix2:after {
  visibility: hidden;
  display: block;
  content: "";
  clear: both;
  height: 0;
}

.effects {
  padding-left: 15px;
}
.effects .img {
  position: relative;
  float: left;
  margin-bottom: 5px;
  width: 25%;
  overflow: hidden;
  border-radius: 5px;
  background: rgba(187,189,188, 1.0) !important;
}
.effects .img:nth-child(n) {
  margin-right: 5px;
}
.effects .img:first-child {
  margin-left: -15px;
}
.effects .img:last-child {
  margin-right: 0;
}
.effects .img img {
  display: block;
  margin: 0;
  padding: 0;
  max-width: 100%;
  height: auto;
}

.effects .imgGray {
  position: relative;
  float: left;
  margin-bottom: 5px;
  width: 25%;
  overflow: hidden;
  border-radius: 5px;
  background: rgba(187,189,188, .7);
}
.effects .imgGray:nth-child(n) {
  margin-right: 5px;
}
.effects .imgGray:first-child {
  margin-left: -15px;
}
.effects .imgGray:last-child {
  margin-right: 0;
}
.effects .imgGray imgGray {
  display: block;
  margin: 0;
  padding: 0;
  max-width: 100%;
  height: auto;
}

.homeOverlay {
  display: block;
  position: absolute;
  z-index: 20;
  border-radius: 5px;
  background: rgba(81, 115, 184, 0.8);
  overflow: hidden;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.grayOverlay {
  display: block;
  position: absolute;
  z-index: 20;
  border-radius: 5px;
  background: rgba(81, 115, 184, 0.8);
  overflow: hidden;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.overlay {
  display: block;
  position: absolute;
  z-index: 20;
  border-radius: 0px;
  background: rgba(81, 115, 184, 0.8);
  overflow: hidden;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

a.close-overlay {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100;
  width: 45px;
  height: 45px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  line-height: 45px;
  text-align: center;
  background-color: #000;
  cursor: pointer;
}
a.close-overlay.hidden {
  display: none;
}

a.expand {
  display: block;
  position: absolute;
  z-index: 100;
  width: 60px;
  height: 60px;
  border: solid 5px #fff;
  text-align: center;
  color: #fff;
  line-height: 50px;
  font-weight: 700;
  font-size: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
  border-radius: 30px;
}

a.expand:hover {
  color: #97d1f6;
}

/* ============================================================
  EFFECT 1 - SLIDE IN BOTTOM
============================================================ */
#effect-1 .overlay {
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 0;
}
#effect-1 .overlay a.expand {
  left: 0;
  right: 0;
  bottom: 50%;
  margin: 0 auto -30px auto;
}
#effect-1 .img.hover .overlay {
  height: 100%;
}
#effect-1 .imgGray.hover .overlay {
  height: 100%;
}

/* ============================================================
  EFFECT 2 - SLIDE IN TOP
============================================================ */
#effect-2 .overlay {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 0;
}
#effect-2 .overlay a.expand {
  left: 0;
  right: 0;
  top: 50%;
  margin: -30px auto 0 auto;
}
#effect-2 .img.hover .overlay {
  height: 100%;
}
#effect-2 .imgGray.hover .overlay {
  height: 100%;
}

/* ============================================================
  EFFECT 3 - SLIDE IN LEFT
============================================================ */
#effect-3 .overlay {
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  height: 100%;
}
#effect-3 .overlay a.expand {
  top: 0;
  bottom: 0;
  left: 50%;
  margin: auto 0 auto -30px;
}
#effect-3 .img.hover .overlay {
  width: 100%;
}
#effect-3 .imgGray.hover .overlay {
  width: 100%;
}

/* ============================================================
  EFFECT 4 - SLIDE IN RIGHT
============================================================ */
#effect-4 .overlay {
  top: 0;
  bottom: 0;
  right: 0;
  width: 0;
  height: 100%;
}
#effect-4 .overlay a.expand {
  top: 0;
  bottom: 0;
  right: 50%;
  margin: auto -30px auto 0;
}
#effect-4 .img {
  overflow: hidden;
}
#effect-4 .img.hover .overlay {
  width: 100%;
}
#effect-4 .imgGray {
  overflow: hidden;
}
#effect-4 .imgGray.hover .overlay {
  width: 100%;
}

/* ============================================================
  EFFECT 5 - ICON BORDER ANIMATE
============================================================ */
#effect-5 .overlay {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
}
#effect-5 .overlay a.expand {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
#effect-5 .img.hover .overlay {
  opacity: 1;
}
#effect-5 .img.hover .overlay a.expand {
  width: 60px;
  height: 60px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
  border-radius: 30px;
}
#effect-5 .imgGray.hover .overlay {
  opacity: 1;
}
#effect-5 .imgGray.hover .overlay a.expand {
  width: 60px;
  height: 60px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
  border-radius: 30px;
}

/* ============================================================
  EFFECT 6 - ICON BOUNCE IN
============================================================ */
#effect-6 .overlay {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
}
#effect-6 .overlay a.expand {
  left: 0;
  right: 0;
  top: 0;
  margin: 0 auto;
  opacity: 0;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
#effect-6 .img.hover .overlay {
  opacity: 1;
}
#effect-6 .img.hover .overlay a.expand {
  top: 50%;
  margin-top: -30px;
  opacity: 1;
}
#effect-6 .imgGray.hover .overlay {
  opacity: 1;
}
#effect-6 .imgGray.hover .overlay a.expand {
  top: 50%;
  margin-top: -30px;
  opacity: 1;
}

.newMenu { 
	position:fixed; 
    display: block;
    top:0px; 
    width:100%;  
    background-color: rgba(68, 103, 171, 1);
    color: rgba(255, 255, 255, 0.8);
    z-index:100; 
    transition: top 0.2s ease-in-out;
    top: 0px;
    z-index: 999;
}

.nav-up {
    top: -150px !important;
}

.nav-down {
    
}

/*#Parallax Backgrounds#*/  
  .homeOverlay:before{
    position: absolute;
    content:" ";
    top:0;
    left:0;
    width:100%;
    height:100%;
    display: block;
    z-index:0;
    background-color: rgba(240,240,240,0.8);
  }
  .grayOverlay:before{
    position: absolute;
    content:" ";
    top:0;
    left:0;
    width:100%;
    height:100%;
    display: block;
    z-index:0;
    background-color: rgba(240,240,240,0.8);
  }
  .overlay:before{
    position: absolute;
    content:" ";
    top:0;
    left:0;
    width:100%;
    height:100%;
    display: block;
    z-index:0;
    background-color: rgba(63,95,156,0.8);
  }
  
  .setting * {
    position: relative;
    /* hack */
  }

  .slide{ 
    background-attachment: fixed !important; 
    width:100%; 
    height:auto; 
    position: relative; 
    padding:140px 0;
  } 

 
/* Slide 1 */
#slide1 {
    background-color: #3d5788;
    background-image: url('/web/media/Images/CSS_Site/Slide2_BG_Compressed.jpg') !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 70px 0px 0px 0px !important;
}

 
/* Slide 2 */
#slide2 {
    background-color: #fbfbfb;
    /*background-image:url('/web/media/Images/CSS_Site/Slide1_BG_Compressed.jpg');*/
    color: #ffffff;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

 
/* Slide 3 */
#slide3 {
    background-color: #ffffff;
    /*background-image:url('/web/media/Images/CSS_Site/Slide5_BG_Compressed.jpg');*/
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

 
/* Slide 4 */
#slide4 {
    /*background-image:url('/web/media/Images/CSS_Site/Slide4_BG_Compressed.jpg');*/
    background-color: #fbfbfb;
    color: #ffffff;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
} 


/* ------------------------------------------------------ */
/* Slide 5 */
#slide5 {
    background-color: #ffffff;
    /*background-image:url('/web/media/Images/CSS_Site/Slide5_BG_Compressed.jpg');*/
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}


/* Slide PDC background */
#slidePDCbackground {
    background-image: url('/web/media/Images/CSS_Site/EdTech_BG_v-1.jpg');
    background-color: #3d5788;
    color: #000000;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
} 

/* Slide Reviews background */
#slideReviewsbackground {
    background-image: url('/web/media/Images/CSS_Site/Home_ReviewsBG_v-1.jpg');
    background-color: #3d5788;
    color: rgba(255, 255, 255, 0.8);
    /*height: 150px !important;*/
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

 
/* Slide 6 */
#slide6 {
    background-image: url('/web/media/Images/CSS_Site/Slide6_BG_Compressed.jpg');
    background-color: #000000;
    color: #000000;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
} 


/* Slide 7 */  
#slide7{ 
     /* Adds the transparent background */
     background-color: #313131;
     color: rgba(255, 255, 255, 0.8);
     /*height: 150px !important;*/
}


/* Slide 8 */  
#slide8{ 
     /* Adds the transparent background */
     background-color: #4265ad;
     color: rgba(255, 255, 255, 0.8);
     /*height: 150px !important;*/
}


/* Slide 9 */  
#slide9{ 
  /* Adds the transparent background */
  background-color:#fbfbfb;
  color: rgba(255, 255, 255, 0.8);
  /*height: 150px !important;*/
}

/* Slide 10 */
#slide10 {
    /*background-image:url('/web/media/Images/CSS_Site/Slide6_BG_Compressed.jpg');*/
    background-color: #3d5788;
    color: rgba(255, 255, 255, 0.8);
    /*height: 150px !important;*/
}

/* Slide 11 */  
#slide11{ 
  /* Adds the transparent background */
  background-color:#fbfbfb;
  color: rgba(255, 255, 255, 0.8);
  /*height: 150px !important;*/
}

/* Slide Live Demo background */
#slideLiveDemobackground {
    background-image: url('/web/media/Images/CSS_Site/Slide6_BG_Compressed_v-2.jpg');
    background-color: #3d5788;
    color: rgba(255, 255, 255, 0.8);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    /*height: 150px !important;*/
}

/* Slide Footer */  
#slideFooter{ 
  /* Adds the transparent background */
  background-color: #313131;
  color: rgba(255, 255, 255, 0.8);
  /*height: 150px !important;*/
}

/* Slide Footer */  
#slideBlue{ 
  /* Adds the transparent background */
  background-color: #557fcb;
  color: rgba(255, 255, 255, 0.8);
  /*height: 150px !important;*/
}

#slideK12 {
    background-image: url('/web/media/Images/CSS_Site/Slide2_bg.png');
    background-color: #000000;
    color: #000000;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#slideVirtualTour {
    background-image: url('/web/media/Images/CSS_Site/VirtualTour_BG_v-1.jpg');
    background-color: #000000;
    color: #000000;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#slideStudent {
    background-image: url('/web/media/Images/CSS_Site/K12_StudentManagementSuite_BG.png');
    background-color: #000000;
    color: #000000;
}

#slideBusiness {
    background-image: url('/web/media/Images/CSS_Site/SBS_LandingPage_bg_v-2.png');
    background-color: #000000;
    color: #000000;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#slideMunicipality {
    background-image: url('/web/media/Images/CSS_Site/Municipalitiy_Header_BG.png');
    background-color: #000000;
    color: #000000;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#slideDiscover {
    background-image: url('/web/media/Images/CSS_Site/Discover_BG_v-1.jpg');
    background-color: #000000;
    color: #000000;
}

#slideWhoWeAre {
    background-image: url('/web/media/Images/CSS_Site/Careers_BG_v-2.jpg');
    background-color: #000000;
    color: #000000;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#slideContactUS {
    background-image: url('/web/media/Images/CSS_Site/Landing_ContactUs_BG.png');
    background-color: #000000;
    color: #000000;
}

#slideWorkingForSkyward {
    background-image: url('/web/media/Images/CSS_Site/WorkingForSkyward_Header_BG.png');
    background-color: #000000;
    color: #000000;
}

#slideWIAA1 {
    background-image: url('/web/media/Images/CSS_Site/bg_1.png');
    background-color: #000000;
    color: #000000;
}

#slideWIAA2 {
    background-image: url('/web/media/Images/CSS_Site/bg_2.png');
    background-color: #000000;
    color: #000000;
}

#slideHistory {
    background-image: url('/web/media/Images/CSS_Site/HistoryandMilstones_bg.png');
    background-color: #000000;
    color: #000000;
}

#slideCulture {
    background-image: url('/web/media/Images/CSS_Site/WhoWeAre_OurCulture_BG_v.1.png');
    background-color: #000000;
    color: #000000;
}

#slideWhitePaper {
    background-image: url('/web/media/Images/CSS_Site/WhitePaper_LandingPage_BG_v-2.png');
    background-color: #000000;
    color: #000000;
}

#slideCaseStudy {
    background-image: url('/web/media/Images/CSS_Site/CaseStudy_LandingPage_BG_v-2.png');
    background-color: #000000;
    color: #000000;
}

#slideSuccessStory {
    background-image: url('/web/media/Images/CSS_Site/SuccessStory_LandingPage_BG_v-2.png');
    background-color: #000000;
    color: #000000;
}

#slideBothBlogs {
    background-image: url('/web/media/Images/CSS_Site/BothBlog_LandingPage_BG_v-1.png');
    background-color: #000000;
    color: #000000;
}

#slideiCon {
    background-image: url('/web/media/Images/CSS_Site/Icon2016LandingPage_bg.png');
    background-color: #000000;
    color: #000000;
}

#slideQuickHits {
    background-image: url('/web/media/Images/CSS_Site/quickHits_BG_v-2.png');
    background-color: #000000;
    color: #000000;
}

#slideSupport {
    background-image: url('/web/media/Images/CSS_Site/Support_BG_v-1.png');
    background-color: #000000;
    color: #000000;
}

#slideAdvisory {
    background-image: url('/web/media/Images/CSS_Site/Customer_Advisory_Panel_BG_2.png');
    background-color: #000000;
    color: #000000;
}

#slidePDC {
    background-image: url('/web/media/Images/CSS_Site/PDC_BG_v-1.png');
    background-color: #000000;
    color: #000000;
}
#slideParents {
    background-image: url('/web/media/Images/CSS_Site/Parents-Students_BG_v-1.png');
    background-color: #000000;
    color: #000000;
}

#slideCustomerReviews {
    background-image: url('/web/media/Images/CSS_Site/CustomerReviews_BG_v-1.png');
    background-color: #000000;
    color: #000000;
}

#slideNewsroom {
    background-image: url('/web/media/Images/CSS_Site/NewsRoom_LandingPage_BG_v-1.png');
    background-color: #000000;
    color: #000000;
}

#slideMunMgmt {
    background-image: url('/web/media/Images/CSS_Site/MuniBG_v-1.jpg');
    background-color: #000000;
    color: #000000;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#slideUserResearchPanel {
    background-image: url('/web/media/Images/CSS_Site/UserResearchPanel_BG_v-1.jpg');
    background-color: #000000;
    color: #000000;
}

#slideCareers {
    background-image: url('/web/media/Images/CSS_Site/Careers_BG_v-2_John.jpg');
    background-color: #000000;
    color: #000000;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#slideParentEngagement {
    background-image: url('/web/media/Images/CSS_Site/ParentEngagement_BG_v-2.jpg');
    background-color: #000000;
    color: #000000;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#slideFamilyAccessToolkit {
    background-image: url('/web/media/Images/CSS_Site/FamilyAccess_BG_v-1.jpg');
    background-color: #000000;
    color: #000000;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#slideUserGroups {
    background-image: url('/web/media/Images/CSS_Site/CustomerReviews_BG_v-1.png');
    background-color: #000000;
    color: #000000;
}

/* Slide Newsletter */
#slideNewsletter {
    background-image: url('/web/media/Images/CSS_Site/AK12_BG_v-2.jpg');
    background-color: #fbfbfb;
    color: #ffffff;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
} 

/* Slide Video */
#slideVideo {
    background-image: url('/web/media/Images/CSS_Site/Home_VideoBG_v-1.jpg');
    background-color: #fbfbfb;
    color: #ffffff;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/* Slide Qmlativ */
#slideQmlativ {
    background-image: url('/web/media/Images/CSS_Site/Q_header_BG_v-1.jpg');
    background-color: #000000;
    color: #000000;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
} 

/* Slide PDC background */
#slideNewCustomers {
    background-image: url('/web/media/Images/CSS_Site/NewCustomer_BG_v-2.jpg');
    background-color: #3d5788;
    color: #000000;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
} 

.footerCopyrightDiv {
  display: block; 
  font-size: 10pt; 
  color: #C3C7C6; 
  width: 100%; 
  display: inline-block; 
  text-align: center;
}


/*#Landing Pages#*/

.breadCrumbsMainDiv {
  display: table; 
  width: 100%; 
  background-color: #537cce;
  margin-top: 150px !important;
}

.breadCrumbsCenteredDiv {
  width: 95% !important;
  max-width: 960px !important; 
  margin: 0px auto !important;
}

.breadCrumbsContainer {
  margin-left: 260px; 
  color: navy;
}

#DaysLeft {
    font-size: 32pt;
    font-family: 'Barrio';
    display: block;
    margin: 0px auto;
    text-align: center;
    color: #f9e84e;
    background: url('/web/media/Images/CSS_Site/BGDaysLeft.png');
    background-size: cover;
    width: 90%;
    height: 64px;
    padding-top: 15px;
}

/*#Media Queries#*/
  @media (min-width: 540px) and (max-width: 870px) {
    .spread {
      -webkit-justify-content: center !important; 
      justify-content: center !important;
    }
  }

  @media (min-width: 50px) and (max-width: 540px) {
  
    .spread {
      -webkit-justify-content: center !important; 
      justify-content: center !important;
    }
  
  ***********
    
  }
@media screen and (max-width: 1044px) {
  .Order-1 {
    -webkit-order: 1 !important; /* Safari */
    order:         1 !important;
  }
    
  .Order-2 {
    -webkit-order: 2 !important; /* Safari */
    order:         2 !important;
  }
}

@media (max-width: 1400px) {
    .stickyButtons {
      /*display: none;*/
    }
}

@media (min-width: 1025px) and (max-width: 1600px) {
  #mobileImage {
    display: none;
  }

  .Order-1 {
      -webkit-order: 1 !important; /* Safari */
      order:         1 !important;
    }
      
    .Order-2 {
      -webkit-order: 2 !important; /* Safari */
      order:         2 !important;
    }
}
@media (min-width: 876px) and (max-width: 1300px) {
  .spread {
    -webkit-justify-content: space-around !important; 
    justify-content: space-around !important;
  }
}
@media (min-width: 856px) and (max-width: 1055px) {
  .Order-1 {
      -webkit-order: 1 !important; /* Safari */
      order:         1 !important;
    }
      
    .Order-2 {
      -webkit-order: 2 !important; /* Safari */
      order:         2 !important;
    }

}

@media (min-width: 876px) and (max-width: 1024px) {
  .stretchFull {
    width:100%;
    border: none;
  }
  
  #mobileImage {
    display: none;
  }
  
  .Order-1 {
      -webkit-order: 1 !important; /* Safari */
      order:         1 !important;
    }
      
    .Order-2 {
      -webkit-order: 2 !important; /* Safari */
      order:         2 !important;
    }
    .outerDiv {
      width: 100%;
      height: 350px;
    }
    
    .innerDiv {
      width: 100%;
      height: 350px; 
    }
}
@media (max-width: 875px) {
    .mobileImage {
      display: block;
      margin: auto;
      padding-top: 40px;
    }
    
    .spread {
      -webkit-justify-content: center !important; 
      justify-content: center !important;
    }
    
    .flex-item {
      -webkit-flex-grow: 2;
      flex-grow: 2;
    }
    .stretch {
      width: 300px;
      text-align: center;
    }
    
    .outerDiv {
      width: 100%;
      height: 350px;
    }
    
    .innerDiv {
      width: 100%;
      height: 350px; 
    }
  
    
    .Order-1 {
      -webkit-order: 2 !important; /* Safari */
      order:         2 !important;
    }
      
    .Order-2 {
      -webkit-order: 1 !important; /* Safari */
      order:         1 !important;
    }
    .noMobile {
      display: none !important;
    }
}

@media (max-width: 800px) {
    #fullWidthVideo {
      display: none;
    }
    #mobileImage {
        margin-top: 40px;
        display: table;
        width: 100%;
        text-align: center;
        background-image: url('/web/media/Images/CSS_Site/Home_MobileVideoBG_v-3.jpg');
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
}

@media (min-width: 568px) and (max-width: 875px) {
  
  .Order-1 {
      -webkit-order: 2 !important; /* Safari */
      order:         2 !important;
    }
      
    .Order-2 {
      -webkit-order: 1 !important; /* Safari */
      order:         1 !important;
    }
  
}

@media (min-width: 50px) and (max-width: 568px) {
  
  .mobGears {
    height: 40px;
  }
  .mobLogo {
    height: 60px;
  }
  
  .Order-1 {
      -webkit-order: 2 !important; /* Safari */
      order:         2 !important;
    }
      
    .Order-2 {
      -webkit-order: 1 !important; /* Safari */
      order:         1 !important;
    }
    .outerDiv {
    width: 100%;
    height: 390px;
  }
    
  .innerDiv {
    width: 100%;
    height: 390px; 
  }
  
 
}

#DisplayAtMobile {
      display: none;
}


@media (min-width: 50px) and (max-width: 650px) {
  #FooterLinks {
    display: none !important;
  }
  
}

@media (min-width: 50px) and (max-width: 875px) {
  #SupportLinks {
    display: none !important;
  }
  .hideContentMobile {
    display: none !important;
  }
}

@media (min-width: 50px) and (max-width: 875px) {
  #DisplayAtMobile {
    display: flex;
  }
  
  .modalDialog {
    top: 70px !important;
  }
  
  .youTubeThumbnail {
    height: 169px; 
  }
}

@media (max-width: 1019px) and (min-width: 676px) {
  .featuredBannerLarge {
    display: block; width: 100%;
  }
  .featuredBannerSmall {
    display: none;
  }
}
@media (max-width: 675px) and (min-width: 50px) {
  .featuredBannerLarge {
    display: none;
  }
  .featuredBannerSmall {
    display: block; width: 100%;
  }
}
@media (max-width: 400px) and (min-width: 50px) {
  #DaysLeft {
      font-size: 16pt !important;
      padding-top: 30px;
    }
}
/*body{font-family: 'Open Sans';}*/
h1{font-size:30pt; font-weight: bold !important; font-family: 'Header'; line-height: 1.2; -webkit-font-smoothing: antialiased;}
h2{font-size:20pt; font-weight: bold; font-family: 'Header'; line-height: 1.2;}
h3{font-size:16pt; font-weight: 100; font-family: 'Header'; line-height: 1.2;}
h4{font-size:15pt; font-weight: 100; font-family: 'Header'; line-height: 1.2;}
p {font-size:14pt; font-weight: 100; font-family:'Open Sans';}
.buttonLink{font-size:16pt; font-weight: 400; font-family: 'Open Sans';}
.videoLink{font-size:16pt; font-weight: 400; font-family: 'Open Sans';}
.miniCardLinkBlue{font-size:16pt; font-weight: 400; font-family: 'Open Sans';}
.miniCardLinkGreen{font-size:16pt; font-weight: 400; font-family: 'Open Sans';}
.miniCardLinkRed{font-size:16pt; font-weight: 400; font-family: 'Open Sans';}
.cardTitle{font-size:16pt; font-weight: 400; font-family: 'Open Sans';}
.colorCard a {font-size:16pt; font-weight: 400; font-family: 'Open Sans';}
a.miniButton{font-size:16pt; font-weight: 400; font-family: 'Open Sans';}
.italic{font-style:italic;}

.famAccessDiv {
    width: 100%; 
    display: block; 
    color: white; 
    height: 525px; 
    border-radius: 6px; 
    -webkit-box-shadow: -5px 9px 12px 4px #ddd; 
    -moz-box-shadow: -5px 9px 12px 4px #ddd; 
    box-shadow: -5px 9px 12px 4px #ddd;
}
.divAutoHeight {
    height: 450px;
}
.famAccessLink {
    color: #497cbd;
    display: block;
    font-size: 12pt;
    line-height: 1.5;
}
.famAccessLink:hover {
    color: #497cbd;
    text-decoration: underline !important;
}

.famAccessTitleLink {
  color: white;
}
.famAccessTitleLink:hover {
  text-decoration: underline !important;
  color: white;
}
  
@media (min-width: 50px) and (max-width: 875px) {
  .famAccessDiv {
    height: 475px; 
    margin-bottom: 30px;
  }
  .noMobile {
    display: none !important;
  }
}

@media (min-width: 876px) {
  .safari400 { 
      width: 400px; 
  }
  .safari450 { 
      width: 450px; 
  }
  .safari600 { 
      width: 600px; 
  }
  .safari800 { 
      max-width: 800px; 
      width: 100%;
  }
}

@media (min-width: 50px) and (max-width: 875px) {
  .safari400 { 
    width: 90% !important;
  }
  .safari500 { 
    width: 90% !important;
  }
  .safari450 { 
    width: 90% !important;
  }
  .safari600 { 
    width: 90% !important; 
  }
  .safari800 { 
    width: 90% !important; 
  }
  .noMobile {
    display: none !important;
  }
}