@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');

/*** standard ***/
html {
  font-size: 100%;
}
body {
  background-color: #555555;
  font-family: 'Roboto', sans-serif;
  font-size: 1em;
}
img {
  max-width: 100%;
  height: auto;
}

#tophead{
  background:#fff;
  text-align: right;
}

nav#bluelist ul {
  position: relative;
  display:inline-block;
  background-color: #00aaff;
}
nav#bluelist ul li {
  display: inline-block;
}
nav#bluelist ul li a {
  background-repeat: no-repeat;
  background-size: 19px auto;
  background-position: left;
  color: #fff;
  font-size: 14px;
  font-weight: 300;
  text-decoration: none;
  display: inline-block;
  line-height: 20px;
  padding: 5px 15px 5px 15px;
}
nav#bluelist li#orange {
  background: none;
}
nav#bluelist li#orange a {
  padding-left: 20px;
  background-color: #ff5b00;
  padding-right: 20px;
  border-left: 5px solid #fff;
}
nav#bluelist ul li a:hover {
  opacity: 0.7;
  filter: alpha(opacity=70); /* For IE8 and earlier */
}
nav#bluelist ul li#facebook a {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  background-image: url(facebook-icon.png);
  width: 19px;
  height: 19px;
  padding: 0px 2px;
  vertical-align: middle;
  margin-top: -2px;
  color: transparent
}
nav#bluelist ul li#twitter a {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  background-image: url(twitter-icon.png);
  width: 19px;
  height: 19px;
  padding: 0px 2px;
  vertical-align: middle;
  margin-top: -2px;
  color: transparent
}
nav#bluelist ul li#linkedin a {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  background-image: url(linkedin-icon.png);
  width: 19px;
  height: 19px;
  padding: 0px 2px;
  vertical-align: middle;
  margin-top: -2px;
  color: transparent
}
nav#bluelist ul li#linkedin a {
  padding-right: 20px;
}
nav#bluelist ul li#login a {
  padding-left: 20px;
}
nav#bluelist ul li#blog a {
  padding-right: 18px;
}

#header {
  background-color: #fff;
  border-bottom: 8px solid #efefef;
  height: auto;
  overflow: hidden;
  position: relative;
}
img#logo {
  width: 100%;
  max-width: 180px;
  margin: 10px 0px;
  float: left;
}

nav#main {
 margin-top:35px;
}
nav#main ul {
  text-align: right;
}
nav#main ul li {
  display: inline-block;
  margin-left: 40px;
}
nav#main ul a {
  font-size: 16px;
  color: #6d6d6d;
  font-weight: 300;
  text-decoration: none;
}
nav#main ul a:hover {
  color: #ff5b00;
}
nav#bottom {

}
nav#bottom ul {
  text-align: right;
}
nav#bottom ul li {
  display: inline-block;
  margin-left: 10px;
}
nav#bottom ul a {
  font-size: 12px;
  color: #fff;
  font-weight: 500;
  text-decoration: none;
}
nav#bottom ul a:hover {
  color: #8c8c8c;
}

#menu-icon {
  display: hidden;
  width: 40px;
  height: 40px;
  background-color: #ff5b00;
  background-image: url(menu-toggle.png);
  background-size: cover;
}
a:hover#menu-icon {
  background-color: #00aaff;
}

#sliderholder {
  background-color: #D7DEEB;
}
.nivo-nextNav {
  right: 10%;
  background-image: url(right-arrow.png);
  width: 30px;
  height: 58px;
  text-indent: -3000px;
  background-size: cover;
  opacity: 0.7;
  filter: alpha(opacity=70); /* For IE8 and earlier */
}
.nivo-prevNav {
  left: 10%;
  background-image: url(left-arrow.png);
  width: 30px;
  height: 58px;
  text-indent: -3000px;
  background-size: cover;
  opacity: 0.7;
  filter: alpha(opacity=70); /* For IE8 and earlier */
}
.nivo-nextNav:hover, .nivo-prevNav:hover {
  opacity: 1.0;
  filter: alpha(opacity=100); /* For IE8 and earlier */
}

#orange {
  background-color: #ff5b00;
  overflow: hidden;
  padding:20px 0px;
}
#orange #homeicons {
  padding: 0px 0px 0px 0px;
  overflow: hidden;
  width:50%;
  float:left;
}
#orange #homeicons h1 {
  font-size: 36px;
  font-weight: 200;
  text-align: center;
  margin: 0 auto;
  width: 65%;
  margin-bottom: 50px;
  color: #fff;
}

ul.thirds{
  padding:20px;
  overflow: hidden;
}
ul.thirds li {
  width: 46%;
  float: left;
  margin-right: 2%;
  position: relative;
  word-wrap: break-word;
  display: block;
  margin-bottom: 30px;
}
ul.thirds li a {
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  text-decoration: none;
  padding-left: 0;
  background-repeat: no-repeat;
  background-size: 52px auto;
  background-position: center top;
  display: block;
  padding-top: 68px;
  padding-bottom: 20px;
  text-align: center;
}
ul.thirds li a:hover {
  opacity: 0.7;
  filter: alpha(opacity=70); /* For IE8 and earlier */
}

a#webicon {
  background-image: url(web-design-icon.png);
}
a#socialicon {
  background-image: url(social-media-icon.png);
}
a#appicon {
  background-image: url(web-app-icon.png);
}
a#contenticon {
  background-image: url(content-icon.png);
}
a#emailicon {
  background-image: url(email-icon.png);
}
a#ecomicon {
  background-image: url(ecommerce-icon.png);
}

#homevid {
  text-align: center;
  padding:0px;
}
#homevid .vid-item .desc {
  color: #fff;
}
#homevid .current-vid {
  color: #fff !important;
  font-weight:400;
}
#player-container1{
  padding:20px;
  width:auto;
}

#orange-btn {
  background-color: #ff5b00;
}
#white {
  background-color: #fff;
}

#footer {
  border-top: 8px solid #8c8c8c;
  padding:30px 0 50px;
}
.credits {
  float: left;
  color: #fff;
  font-size: 12px;
  font-weight: 300;
}

#pagecontent p, #pagecontent h2, #pagecontent h3, #pagecontent h4, #pagecontent ul {
  margin-bottom: 15px;
  line-height: normal;
  font-weight: 300;
}
#pagecontent .col-md-9 a{
  color:#00aaff;
}
#pagecontent h1{
  color:#00aaff;
  font-size: 26px;
  font-weight:400;
}
#pagecontent h2{
  color:#ff5b00;
  font-size: 26px;
  font-weight:400;
}
#pagecontent h3{
  color:#ff5b00;
  font-size: 24px;
  font-weight: 400;
}
#pagecontent h4{
  color:#000;
  font-size: 21px;
}
#pagetitle {
  padding: 15px 0px;
  background:#ff5b00;
}
#pagecontent {
  padding: 20px 0px 50px;
  overflow: hidden;
  background:#fff;
}
#pagetitle h1 {
  color: #fff;
  font-size: 30px;
  font-weight: 200;
}

.widget{
  background-color:#efefef;
  border-radius:5px;
  -moz-border-radius:5px;
  padding:4px 16px;
  width:100%;
}
.widget h3{
  font-size:20px;
  color:#00aaff;
}

/* Sidebar menu for internal pages */
ul.sidenav { list-style: none; overflow:hidden; margin-bottom:25px; }
ul.sidenav li { float: left; line-height: 350%; width:100%; margin-left:-30px; }
ul.sidenav li a {
  color: #555555;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  padding-left: 35px;
  background-repeat: no-repeat;
  background-size: 28px auto;
  background-position: left;
  padding-top: 12px;
  padding-bottom: 12px;
}
ul.sidenav li a:hover {
  opacity: 0.7;
  filter: alpha(opacity=70); /* For IE8 and earlier */
}
a#webicon_sm { background-image: url(web-design-icon-40.png); }
a#socialicon_sm { background-image: url(social-media-icon-40.png); }
a#appicon_sm { background-image: url(web-app-icon-40.png); }
a#contenticon_sm { background-image: url(content-icon-40.png); }
a#emailicon_sm { background-image: url(email-icon-40.png); }
a#ecomicon_sm { background-image: url(ecommerce-icon-40.png); }

.cymBody { padding: 8px; line-height: 130%; }
.cymBody ul li { list-style: disc outside none; margin-left: 20px; line-height: 125%; padding-bottom: 4px; }
.cymBody ol li { list-style: decimal outside none; margin-left: 20px; line-height: 125%; padding-bottom: 4px; }
.cymBody strong,b { font-weight: bold; }
.cymBody em,i { font-style: italic; }
.cymBody a,a:visited { text-decoration: none; color: #ff5b00; }
.cymBody a:hover { text-decoration: underline; color: #ff5b00; }
.cymBody .cymHeader, .cymSectHeader, .cymArticleHeader, .cymTitle, .cymGalleryHeader { font-size:18px; color:#00aaff; font-weight:400 }
.cymBody .features-table { border: 1px solid #999; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }
.cymBody .features-table td { vertical-align: middle; }
.cymBody .features-table thead td { color:#555555; font-weight:bold; }
.cymBody .features-table tfoot td { color:#555555; font-weight:bold; }
.cymGallery { padding: 8px; line-height: 130%; }
.cymGallery ul li { list-style: disc outside none; margin-left: 20px; line-height: 125%; padding-bottom: 4px; }
.cymGallery ol li { list-style: decimal outside none; margin-left: 20px; line-height: 125%; padding-bottom: 4px; }
.cymGallery strong,b { font-weight: bold; }
.cymGallery em,i { font-style: italic; }
.cymGallery a,a:visited { text-decoration: none; color: #ff5b00; }
.cymGallery a:hover { text-decoration: underline; color: #ff5b00; }

.quotes {
  background-color: #efefef;
  color: #555555;
  font-style: normal;
  font-size: 12px;
  line-height: 125%;
  padding: 10px;
  border: 2px solid #ff5b00;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}

.prodlink {
  margin-top: 16px;
  background-color: #ff5b00;
  padding: 8px 16px;
  border-radius: 4px 4px 4px 4px;
  font-weight: normal;
  text-decoration: none;
  color: #ffffff;
  font-size: 16px;
  line-height: 18px;
  text-align: center;
}
.prodlink a {
  text-decoration: none;
  color:#fff;
}
.interactive .video_wrap {
  width:640px;
  height:360px;
  display:none;
}
.interactive .video_wrap.active {
  display:block;
}

/* This will make distinguishable the currently selected thumbnail */
.interactive li.active {
  background:#000;
}

/* This will create a simple hover effect */
.interactive li img {
  opacity:.7;
}
.interactive li a:hover img, .interactive li.active img {
  opacity:1;
}

/* gallery */
#gallery-masonry {
    margin: 0 auto;
    width: auto;
}

#gallery-masonry .item {
    display: block;
    width: 160px;
    float: left;
    background-color: #ffffff;
    padding: 4px 4px;
    border-radius: 5px;
    margin-top: 10px;
    margin-left: 10px;
    opacity: 1;
    -moz-transition: opacity 0.3s ease-in-out;
}

.thumbnail {
  display: block;
  padding: 4px;
  line-height: 20px;
  border: 1px solid #bbb;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
     -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
  -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
       -o-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
}

a.thumbnail:hover,
a.thumbnail:focus {
  border-color: #0088cc;
  -webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
     -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
          box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
}

.thumbnail > img {
  display: block;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.thumbnail .caption {
  padding: 9px;
  color: #555555;
}

.cymFormTable { width: 99%; }
.cymFormTable .fText { width: 85%; }
.cymFormTable .fTextArea { width: 85%; }
.cymFormTable .fSelect { width: 88%; }
.cymLabel { color: #777777; }
.cymLabelRequired { color: #777777; }

ul.checklist {
  list-style-type: none;
}
ul.checklist li {
  list-style: none inside none;
}
ul.checklist li:before {
  content: "\2713\0020";
}

.alignright {
  float: right;
  margin-left: 15px;
  margin-bottom: 15px;
}
.alignleft {
  float: left;
  margin-right: 15px;
  margin-bottom: 15px;
}

.hdr-orange {
  color: rgb(255, 91, 0);
  font-weight: 600;
}
.hdr-blue {
  color: rgb(0, 170, 255);
  font-weight: 400;
}

.topmar8  { margin-top:8px;  }
.topmar10 { margin-top:10px; }
.topmar12 { margin-top:12px; }
.topmar16 { margin-top:16px; }
.topmar24 { margin-top:24px; }
.topmar32 { margin-top:32px; }
.topmar48 { margin-top:48px; }
.topmar56 { margin-top:56px; }


/************************/
/* Mobile */
/************************/

@media all and (max-width: 923px) {
ul.thirds li {
  width: 100%;
  float: none;
  margin-right: 0%;
}
}

@media all and (max-width: 767px) {
#homevid, #orange #homeicons {
  width: 100%;
  float: none;
  clear:both;
}
}

@media all and (min-width: 641px) and (max-width: 900px) {
nav#main ul li {
  display: inline-block;
  margin-left: 20px;
}
nav#main ul a {
  font-size: 14px;
}
}

@media all and (max-width: 640px) {
img#logo {
  width: 100%;
  max-width: 180px;
  margin: 0px auto;
  display: block;
  padding: 50px 0px 20px;
  float: none;
}
ul.thirds li {
  width: 90%;
  margin: 0 auto;
  float: none;
  margin-right: 0%;
  position: relative;
  word-wrap: break-word;
  display: block;
  margin-bottom: 20px;
}
.nivo-nextNav {
  width: 10px;
  height: 19px;
}
.nivo-prevNav {
  width: 10px;
  height: 19px;
}
#tophead{
  text-align:center;
}
nav#bluelist {

}
nav#bluelist ul {

}
nav#bluelist ul li a {
  font-size: 14px;
}
nav#bluelist ul li#linkedin a {
  padding-right: 12px;
}
nav#bluelist ul li#login a {
  padding-left: 12px;
}
nav#bluelist ul li#blog a {
  padding-right: 12px;
}
nav#bluelist li#orange a {
  padding-left: 12px;
  padding-right: 12px;
  border-left: 3px solid #fff;
}
nav#bottom {
  float: none;
  width: 100%;
}
nav#bottom ul {
  text-align: center;
}
nav#bottom ul li {
  display: block;
  margin-left: 0px;
  margin-bottom: 8px;
}
.credits {
  float: none;
  width: 100%;
  margin-bottom: 20px;
  text-align: center;
}
nav#main {
  margin: 0 auto;
  float: none;
  margin-top: 0px;
}
#menu-icon {
  display: block;
  margin: 0 auto;
  margin-bottom: 20px;
}
nav#main ul, nav#main:active ul {
  display: none;
  position: relative;
  padding: 20px;
  background: #fff;
  border: 5px solid #efefef;
  margin: 0 auto;
  width: 50%;
  border-radius: 4px 0 4px 4px;
  margin-bottom: 10px;
}
nav#main ul li {
  text-align: center;
  width: 100%;
  padding: 10px 0;
  margin: 0;
  margin-left: 0px;
}
nav#main:hover ul {
  display: block;
}
}

@media screen and (max-width: 480px) {
  img {
    max-width: 96%;
    height: auto;
    width: auto\9; /* ie8 */
  }
  #cboxTitle { 
    font-size:10px;
    font-weight:normal; 
  }
}