/*
    HTML5 Reset :: style.css
    ----------------------------------------------------------
    We have learned much from/been inspired by/taken code where offered from:

    Eric Meyer                  :: http://meyerweb.com
    HTML5 Doctor                :: http://html5doctor.com
    and the HTML5 Boilerplate   :: http://html5boilerplate.com

-------------------------------------------------------------------------------*/
/* Let's default this puppy out
-------------------------------------------------------------------------------*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600,300,400,700&subset=latin,cyrillic,latin-ext);
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }
html, body { overflow-x: hidden; -ms-overflow-x: hidden; }

/* force a vertical scrollbar to prevent a jumpy page */
html { overflow-y: scroll; -webkit-overflow-scrolling: touch;}
body {
  color: #666;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 16px; }
body * { font-family: 'Open Sans', sans-serif; }

/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */
/* Apply a natural box layout model to all elements: http://paulirish.com/2012/box-sizing-border-box-ftw/ */
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

a {
  margin: 0; 
  padding: 0; 
  font-size: 100%; 
  vertical-align: baseline; 
  background: transparent;
  color: #333;
  font-weight: 600;
  text-decoration: none;
  -webkit-transition: background-color .5s, color .5s, border .5s;
  -moz-transition: background-color .5s, color .5s, border .5s;
  -ms-transition: background-color .5s, color .5s, border .5s;
  -o-transition: background-color .5s, color .5s, border .5s;
  transition: background-color .5s, color .5s, border .5s;
}
a:hover { color: #3399ff; text-decoration: underline; }
abbr[title], dfn[title] {
  border-bottom: 1px dotted #000;
  cursor: help; }
article, aside, figure, footer, header, nav, section, details, summary {
  display: block; }

blockquote {
  font-size: 36px;
  font-size: 2.25rem;
  line-height: 48px;
  line-height: 3rem;
  margin-bottom: 24px;
  background: -webkit-linear-gradient(#0080ff, #7665ac);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea { margin: 0; }
/* make buttons play nice in IE */
button, input[type=button] { width: auto; overflow: visible; }

/* hand cursor on clickable elements */
.clickable, label, button,
input[type=button], input[type=submit], input[type=file] { 
  cursor: pointer; }

del { text-decoration: line-through; }

h1, h2, h3, h4, h5, h6, blockquote {
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
  -webkit-font-smoothing: antialiased !important; }
h1, h2, h3, h4, blockquote { font-weight: 300; }
h1, h2, blockquote { color: #333; }
h2, h3, blockquote { letter-spacing: 1px; }
h3, h4 { color: #999; font-weight: 600; }
h3, h4, h5, li, p { line-height: 24px; line-height: 1.5rem; }
h1, h2, h3, h4, h5, p { margin-bottom: 24px; }

h1, h2.big { font-size: 42px; font-size: 2.625rem; line-height: 72px; line-height: 4.5rem; }
h2 { font-size: 27.6px; font-size: 1.725rem; line-height: 54px; line-height: 3.375rem; }
h3 { font-size: 18px; font-size: 1.125rem; }
h4, h5 { font-size: 14px; font-size: 0.875rem; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
   If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */
img, object, embed { max-width: 100%; }
/* scale images in IE7 more attractively */
.ie7 img { -ms-interpolation-mode: bicubic; }

/* select, input, form field stuff */
input, select { vertical-align: middle; }
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: middle; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
input[type="file"] {
  background: #f2f2f2;
  border: 2px solid rgba(204, 204, 204, 0.5);
  border-radius: 3px;
  line-height: 32px;
  line-height: 2rem;
  margin-bottom: 11px;
  padding: 0 15px;
  width: 100%; }
select, input, textarea { font: 99% sans-serif; }
select, input[type="password"], input[type="search"], input[type="text"], input[type="email"], textarea {
  background: #fff;
  border: 2px solid #e6e6e6;
  border-radius: 3px;
  font-weight: 300;
  line-height: 24px;
  line-height: 1.5rem;
  margin-bottom: 24px;
  padding: 11px 15px;
  width: 100%; }
select:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="email"]:focus, textarea:focus {
  background: #fafcff;
  border: 2px solid rgba(102, 179, 255, 0.5);
  outline-color: none;
  outline-offset: 0;
  outline-style: none;
  outline-width: 0;
  -webkit-transition: all .35s ease-in-out;
  -moz-transition: all .35s ease-in-out;
  -o-transition: all .35s ease-in-out;
  transition: all .35s ease-in-out; }
textarea { line-height: 24px; line-height: 1.5rem; padding: 10.5px; }

label {
  color: #666666;
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 24px;
  line-height: 1.5rem;
  text-transform: uppercase;
  width: 100%; }

pre {
  white-space: pre; /* CSS2 */
  white-space: pre-wrap; /* CSS 2.1 */
  word-wrap: break-word; /* IE */ 
}
/* standardize any monospaced elements */
pre, code, kbd, samp { font-family: monospace, sans-serif; }

/* select, input, form field stuff */
input, select { vertical-align: middle; }
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: middle; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
input[type="file"] {
  background: #f2f2f2;
  border: 2px solid rgba(204, 204, 204, 0.5);
  border-radius: 3px;
  line-height: 32px;
  line-height: 2rem;
  margin-bottom: 11px;
  padding: 0 15px;
  width: 100%; }
select, input, textarea { font: 99% sans-serif; }
select, input[type="password"], input[type="search"], input[type="text"], input[type="email"], textarea {
  background: #fff;
  border: 2px solid #e6e6e6;
  border-radius: 3px;
  font-weight: 300;
  line-height: 24px;
  line-height: 1.5rem;
  margin-bottom: 24px;
  padding: 11px 15px;
  width: 100%; }
select:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="email"]:focus, textarea:focus {
  background: #fafcff;
  border: 2px solid rgba(102, 179, 255, 0.5);
  outline-color: none;
  outline-offset: 0;
  outline-style: none;
  outline-width: 0;
  -webkit-transition: all .35s ease-in-out;
  -moz-transition: all .35s ease-in-out;
  -o-transition: all .35s ease-in-out;
  transition: all .35s ease-in-out; }
textarea { line-height: 24px; line-height: 1.5rem; padding: 10.5px; }

label {
  color: #666666;
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 24px;
  line-height: 1.5rem;
  text-transform: uppercase;
  width: 100%; }

pre {
  white-space: pre; /* CSS2 */
  white-space: pre-wrap; /* CSS 2.1 */
  word-wrap: break-word; /* IE */ 
}
/* standardize any monospaced elements */
pre, code, kbd, samp { font-family: monospace, sans-serif; }

small { font-size: 85%; }
small {
  display: inline-block;
  font-size: 85%;
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 18px;
  line-height: 1.125rem; }
strong { font-weight: bold; }

/* Make sure sup and sub don't screw with your line-heights
    gist.github.com/413930 */
sub, sup { font-size: 75%; line-height: 0; position: relative; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

/* tables still need cellspacing="0" in the markup */
table { border-collapse: collapse; border-spacing: 0; font-size: inherit; }
th { font-weight: bold; vertical-align: bottom; }
td { font-weight: normal; }
td, td img { vertical-align: top; }

ul { list-style: none; }

/* prevent BG image flicker upon hover
   (usage is rare, and the filter syntax messes with some pre-processors)
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}
*/

/* generic classes to add a specific style, like absolute or color */
.absolute { position: absolute; }

a.btn { display: block; text-align: center; }
a.btn:hover { text-decoration: none; }
.btn {
  border: none;
  border-radius: 3px;
  display: block;
  font-weight: 300;
  margin-bottom: 24px;
  padding: 0 10px;
  width: 100%;
  -webkit-transition: background-color .5s, color .5s, border .5s;
  -moz-transition: background-color .5s, color .5s, border .5s;
  -ms-transition: background-color .5s, color .5s, border .5s;
  -o-transition: background-color .5s, color .5s, border .5s;
  transition: background-color .5s, color .5s, border .5s;
}

.btn-txt-align { margin-top: 15px; }
.btn-subtext {
  display: block;
  font-size: 10px;
  line-height: 14px;
  line-height: 0.875rem; }

.btn-sync-default, .btn-all-default:hover { background-color: #0080ff; color: #fff; }
.btn-all-default { background-color: #3399ff; color: #f2f2f2; }
.btn-secondary { background-color: #0066CC; color: #f2f2f2; }
.btn-sync-default:hover { background-color: #0073F2; color: #fff;  }
.btn-secondary:hover { background-color: #004385; color: #f2f2f2; }
.btn-sync-default:active, .btn-secondary:active { background-color: #0060bf; outline: none !important; }
.btn-sync-default:disabled, .btn-secondary:disabled {
  background-color: #3399ff !important;
  cursor: default !important;
  opacity: .5; }
.btn-secondary { background-color: transparent; border: 1px solid #66b3ff; color: #3399ff; }
.btn-secondary:hover { background-color: rgba(255, 255, 255, 0.25); border: 1px solid #4d4d4d; color: #4d4d4d; }
.btn-secondary:active { background-color: #e6e6e6; color: #333333; outline: none !important; }
.btn-tertiary { background-color: transparent; border: 1px solid #F9F9F9; color: #F9F9F9; }
.btn-tertiary:hover { background-color: #F9F9F9; border: 1px solid transparent; color: #3399FF; }
.btn-tertiary:active { background-color: #FFF; color: #0065cb; }

.btn-xl { font-size: 32px; font-size: 2rem; height: 96px; }
.btn-lg { font-size: 24px; font-size: 1.5rem; height: 72px; }
.btn-md { font-size: 18px; font-size: 1.125rem; height: 48px; }
.btn-sm { font-size: 16px; font-size: 1rem; height: 36px; }

a.btn-xl { padding-top: 20px; }
a.btn-lg { line-height: 72px; }
a.btn-md { line-height: 48px; }
a.btn-sm { line-height: 36px; }

/* colorbox for the video play */
#cboxContent { background-color: #000; padding: 20px; }
#cboxClose {
  background: transparent url(/images/colorbox/cancel.png) no-repeat 0 0;
  background-size: cover;
  height: 10px;
  right: 5px;
  top: 5px;
  width: 10px;
}
#cboxClose:hover { background-position: 0 0; }
#cboxLoadedContent { margin-bottom: 0; }

/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/* PAGE LAYOUT CLASSES */
.breadcrumbs ul { margin-left: 5px; }
.breadcrumbs li:nth-child(-n+1), .breadcrumbs li.selected  { display: inline; }
.breadcrumbs .level-3 { display: none; }
i.fa-angle-right, .breadcrumbs li a { font-size: 15px; color: #979797; margin: 0 5px; }

.sub_row { width: 70%; margin: auto; }
#developers > a.register_form_btn { color: #fff; }

.hero { margin-bottom: 95px; padding-top: 46px; }
.hero .hero-copy { text-align: center; }
.hero-logo { margin-right: 11px; }
.hero_content { float: none; margin: 60px auto; }
.hero_content p { margin-bottom: 60px; }
.hero-sub-link { display: inline-block; font-weight: 300; margin: 0 0 36px; }
a.hero-shot:focus, a.hero-sub-link:focus { outline: none !important; }
.hero-shot { margin: -10px 0 36px; }
.hero-img { position: relative; }
.hero-play { background: url('/images/icon_sm/play-normal.png') no-repeat; background-size: 68%; position: absolute; top: 24%; right: 30%; display: block; width: 90px; height: 90px; } 
.hero-sub-text { font-weight: normal; }
.hero-btn { padding: 10px 0; height: auto; }
h1.hero-header { margin: 18px auto 5px; color: #808080; line-height: 54px; }

.hero .hero-copy .hero-sub-link, .hero_content,
.header-nav .nav-category { color: #999; }
.hero .hero-copy p, .os-icons a, .quotes h2, .quotes h3, .developers h2, .developers p, .developers a, .platforms h2,  .api-content h3 { color: #808080; }
.hero .hero-copy p { font-size: 18px; }
.bt-home .nav-category, .home-container p, .home-container h2, .sync-learn-more, .bundle-container p,
.other-platforms a, .bundle-bt-cta a { color: #fff; }
.header.bt-home { background-color: #4d4d4d; } 
a.sync-learn-more:hover, .other-platforms a:hover, .bundle-outbound a:hover { color:#ccc; text-decoration:none; }

.left { text-align: left; }
.main { text-align: center; }
.main_head { font-size: 42px; color: #4D4D4D; }

.sub_main { padding: 80px 10px 50px; }
.sub_main.hero_content { margin-top: 120px; }

/* background images or colors */
.main_bkgd { background-color: #f9f9f9; padding: 10px 0 0 0; width: 100%; }
.home-container { background-color: #242424; min-height:760px; }
.bundle-container { background-image: url(/images/frog/home/bundleBkgd.jpg); min-height:400px; margin-bottom: 97px; }
.old-container { background-position: center center; background-repeat: no-repeat; background-size: cover; height:500px;}
.section-bkgd { background-color: #f2f2f2; text-align: center; min-height: 525px; }
.section-bkgd, .case-bkgd, .home-container, .bundle-container { background-position: center center; background-repeat: no-repeat; background-size: cover; -webkit-background-size:cover; -moz-background-size:cover; }
.section-bkgd h2 , .section-bkgd p, .section-bkgd a, .case-bkgd a, .case-bkgd h2, .case-bkgd p { color: #FFF; }
  .fast-and-easy { background-image: url(/images/bkgd/fast&Easy.jpg); }
  .share-anything { background-image: url(/images/bkgd/shareAnything.jpg); }
  .built-for-trust { background-image: url(/images/bkgd/builtForTrust.jpg); }

.case-bkgd h2, .case-bkgd p { margin: 0 auto 36px; width: 70%; }
  .creating-content { background-image: url(/images/bkgd/sync-creating-content.jpg); }
  .everyday { background-image: url(/images/bkgd/sync-everyday.jpg); }
  .archive-backup { background-image: url(/images/bkgd/sync-archiving.jpg); }

.gray-bkgd { background-color: #F1F1F1; padding: 70px 0; float: none; text-align: center; }
.gray-bkgd img { display: block; }

/* spacing stuff */
.head_space { margin-top: 30px; }
.auto_width { margin-left: auto; margin-right: auto; float: none; }
.footer { margin-bottom: 30px; }
.pre-footer { margin-bottom: 85px; }

/* Promotions - bundle, plus, sync */
.bundleImgDynamic { display: none; height: auto; width: 100%; }
.bundleImgStatic img { display: block; height: auto; width: 100%; }
.hp_prod_unit a { color: #333; font-weight: 100; }
.hp_prod_unit.plus { background-color: #EEE; }
.hp_prod_unit.sync { background-color: #DEDEDE; }
.hp_prod_unit a:hover { text-decoration: none; color: #333; }
.hp_prod_unit.plus, .hp_prod_unit.sync { padding: 29px 17px 10px; }
.hp_prod_unit p { font-size: 14px; font-size: .875rem; line-height: 18px; line-height: 1.125rem; }
.plusStaticAd { display:none; }
.promos { margin-bottom: 10px; }

/* page elements */
.tr-thanks h3 { margin-bottom: 5px; }
.tr-thanks { margin: 20px auto 10px; }
.sub-links a { font-weight: 300; font-size: 14px; margin-right: 10px; }
.sub-links .fa-arrow-right { margin-right: 5px; }

.btn.dl-pg-btn { background-color: #3399ff; color: #f2f2f2; }
.btn.dl-pg-btn:hover { background-color: #0080ff; color: #f2f2f2; }
.bt-dl-btn { text-align: center; }
.sync-dl-btn, .bundle-bt-cta { background-color: #0080ff; color: #fff; margin-bottom: 5px; }
.sync-dl-btn, .bundle-bt-cta, .bt-cta { height:60px; font-size: 16px; padding-top: 2px; }

button.bt-cta:hover { background-color: #69589F; color: #fff;  }
button.sync-dl-btn:hover, .bundle-bt-cta:hover { background-color: #0073F2; color: #fff; }

.download-unit .divider { margin-bottom: 20px; }
.divider { margin-bottom: 50px; background-image: url('/images/ui_divider.gif'); background-position: bottom; background-repeat: repeat-x; }
.thickhr { border-top: 3px solid #bbb; }
.fa-angle-up { margin: 0 0 63px; }
.fa-angle-up + a { font-size: 12px; padding: 4px 0 0 3px; }
.logo { display: block; margin-top: 17px; text-align: center; }
.logo img { vertical-align: bottom; }
.os-icons { font-size: 12px; margin: 0 auto 36px; }
.os-icons a { padding: 12px; font-weight: 300; }
.os-icons .fa { color: #b3b3b3; }
.section-learn-link { text-decoration: underline; color: #808080; }
a.section-learn-link:hover, .developers a:hover  { color: #B3B3B3;  }

/* classes related to the pop-up modal */
.modal { position: static; z-index: 9999999; top: 50px; background-color: #fff; padding: 30px; box-shadow: 0 1px 30px rgba(0,0,0,.3); }
.modal.absolute { position: absolute; }
#form_modal .modal_close { top: 9px; }
.modal_close { color: #999 !important; position: absolute; float: right; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 32px; font-style: italic; font-weight: 100; line-height: 100%; right: 20px; text-decoration: none !important; top: 75px; }
.modal_screen { position: fixed; z-index: 8888; height: 100%; width: 100%; background-image: url(/images/ui_trans_50_black.png); }
.modal .row h3 { color: #666; }
.sync_terms, .bt_terms { font-size: 16px; font-weight: 300; line-height: 28px; text-transform: inherit; display: inline; }
.feature h2.NOTIF_SUCCESS, .feature h2.NOTIF_ERROR { line-height: 54px; }
a#auto-client-download-link, a#auto-sync-download-link { color: #653797; font-weight: 300; }

/* NAVIGATION classes - header, footer, and sidenavs */
.header-nav a { display: block; padding-bottom: 10px; padding-top: 10px; font-weight: 300; text-decoration: none; }
.header-nav {
  margin-top: 20px;
  max-height: 0px;
  overflow: hidden;
  text-align: center;
  -webkit-transition: border-color 10ms ease-in-out 400ms;
  -moz-transition: border-color 10ms ease-in-out 400ms;
  -ms-transition: border-color 10ms ease-in-out 400ms;
  -o-transition: border-color 10ms ease-in-out 400ms;
  transition: border-color 10ms ease-in-out 400ms;
}
.nav-category .fa-angle-down { padding-left: 5px; }
.header-nav.mobile_view, .sub-nav.mobile_view { border-color: #999; max-height: 500px; }
.header-nav, .sub-nav { max-height: 0px; overflow: hidden; }
.header-nav, .sub-nav, .header-nav.mobile_view {
  -webkit-transition: max-height 300ms ease-in-out; 
  -moz-transition: max-height 300ms ease-in-out;
  -ms-transition: max-height 300ms ease-in-out;
  -o-transition: max-height 300ms ease-in-out;
  transition: max-height 300ms ease-in-out;
}
.header-nav .nav-category {
  font-size: 14px;
  font-size: .875rem;
  font-weight: 400;
  line-height: 24px;
  line-height: 1.5rem;
  margin-bottom: 0;
  padding-top: 20px;
  padding-bottom: 5px;
  text-transform: none;
}
.header-nav .sub-nav a {
  display: block;
  font-size: .8125em;
  font-weight: 300;
  color: #ccc;
  letter-spacing: 1px;
  line-height: 1.125em; 
}
.sub-nav.mobile_view a:hover { color: #999; text-decoration: none; }
.header-nav a.nav-item { text-decoration:none; }
.bt-home .header-nav .nav-category:hover { color: #ccc; }
.header-nav .nav-category:hover { color: #808080; }
.header-nav > li { margin: 0 30px; }
.mobile-nav-link { display: block; margin: 20px 30px inherit inherit; text-align: right; }

.rt-nav-item { text-align: center; padding-top: 85px; border-bottom: 1px solid #cacaca; font-size: 18px; font-weight: bold; line-height: 60px; display: block; padding: 0 0 0 5px; text-transform: uppercase; color: #653797; text-shadow: 0 1px rgba(255,255,255,.5); margin-bottom: 8px; }
.open .rt-nav-item { color: #000; }

  .select-container {
    text-align:center;
  }
  .select-icons-lang {
    display: inline;
    margin: 0 auto;
    width: 300px;
  }
  .select-icons-lang i {
    position:absolute;
    z-index: 5000;
  }
  .select-icons-lang .fa-globe {
    margin-left: 20px;
    font-size: 1.9em;
    margin-top: 14px;
  }
  .select-icons-lang .fa-angle-up {
    font-size: 1.5em;
    margin-left: 273px;
    margin-top: 11px;
  }
  
  select.lang-select {
    -webkit-appearance: none;
    background-color: #FFF;
    border: 1px solid #999;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    cursor: pointer;
    height: 48px;
    position: relative;
    margin-bottom:70px;
    width: 300px;
    z-index: 1000;
    padding-left: 98px;
    font-weight: 300;
    -webkit-font-smoothing: antialiased !important;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
    font-size: 1.25em;
  }

  .lang-container { height: 50px; margin-bottom: 45px; position: relative; }
  .lang-menu {
    background-color: #FFF;
    border: 1px solid #999;
    border-top: none;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    cursor: pointer;
    height: 48px;
    padding: 5px 0;
    position: relative;
    width: inherit;
    z-index: 1000;
  }
  .lang-menu:hover { border-top-color: #FFF; }
  .lang-menu:hover .current-lang, select.lang-select:hover, .select-icons-lang .fa-angle-up:hover { color: #ccc; cursor:pointer;}
  .lang-menu:hover .current-lang .fa-globe, select.lang-select { color: #999; }
  .lang-menu .lang-list-active { max-height: 600px; padding: inherit; }
  .lang-menu .current-lang {
    color: #999;
    font-size: 1.25em;
    font-weight: 300;
    line-height: 38px;
    margin-bottom: 0;
    position: relative;
    text-align: center;
    text-transform: none;
  }
  .lang-menu .current-lang .fa { position: absolute; line-height: 38px; }
  .lang-menu .current-lang .fa-globe { left: 24px; }
  .lang-menu .current-lang .fa-angle-up { right: 24px; }

  .lang-list {
    background-color: #FFF;
    border-left: 1px solid #999;
    border-right: 1px solid #999;
    border-top: 1px solid #999;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    bottom: 100%;
    box-sizing: content-box;
    left: -1px;
    max-height: 2px;
    margin-bottom: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    text-align: center;
    width: 100%;
    -webkit-transition: max-height 400ms ease-in-out;
    -moz-transition: max-height 400ms ease-in-out;
    -ms-transition: max-height 400ms ease-in-out;
    -o-transition: max-height 400ms ease-in-out;
    transition: max-height 400ms ease-in-out;
  }

.footer-nav .footer-nav-group { margin-bottom: 60px; text-align: center; }
.footer-nav .footer-nav-group li { display: inline-block; margin-right: 20px; }
.footer-nav .footer-nav-group li a { font-size: 1.2em; line-height: 2; }
.footer-nav .nav-category { font-size: 1.2em; margin-bottom: 12px; font-weight: 400; }
.footer-nav a { color: #666; font-size: .875em; font-weight: 300; display: block; line-height: 2em; }
.footer-nav .footer-nav-group li a:hover, .lang-link:hover, .social-link:hover { color: #ccc; text-decoration: none; }
.lang-list { margin-bottom: 60px; text-align: center; }
.lang-link { font-size: 1.2em; font-weight: 300; line-height: 3; width: 100%; }
.social-link { display: block; font-size: 1.25em; text-align: center; vertical-align: middle; }
.copyright { font-size: .5625em; margin-top: 50px; text-align: right; }
.lang-link, .social-link, .copyright { color: #999; }
/* End Navigation classes */

/* Index page */
.main-head, .nav-head, .bundle-head { font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: bold; color: #fff; letter-spacing:-2px; }
.main_title .main-head { margin-top: 0; }
.main-head, .home-right-nav .nav-head, .bundle-head { font-size: 30px; line-height: 36px; margin: 52px 0 15px; }

.hideOnMobile { display: none; }
.bundle-head { margin-top: 52px; }
.bundle-head p { padding-top: 10px; }
.learn-more { color: #7665ac; display:block; }
.learn-more .fa { padding-left:5px; font-size: 20px; }
.bt-cta { background-color: #7665ac; color: #fff; margin-bottom: 5px;}
.main_title { margin-bottom: 60px; }
.btn-home-subtext, .btn-sync-subtext { font-size: 12px; line-height: 18px; display: block; }
.home-container .container, .home-container .container > .row { height: 100%; }
.home-container, .bundle-container { text-align: center; margin: auto; }
.download-container { display: block; margin-top:35px; }
.sync-download-container { padding: 0 20px; }
.bundle-download-container { margin-top: 36px; }
.bundle-download-container .bundle-bt-cta{ padding-top: 5px; }
.main-desc { padding-left: 0; }
.bundle-outbound { background-color: #333; margin: 18px 20px 62px; padding: 7px; width: auto; }
.bundle-outbound a { color: #fff; font-size: 12px; font-weight: 300; text-align: center; display: block; }
.other-platforms { text-align: center; margin-top: 15px; }
.other-platforms a { font-weight: 300; }
.home-right-nav { background-color:#004DB3; min-height:670px; opacity: 1; height: 100%; } 
.home-right-nav .sync-learn-more, .other-platforms { font-size: 12px; line-height: 18px; }
.sync-learn-more .fa, .bundle-outbound .fa { padding-left:4px; }
.sync-hero-image img { margin-top:30px; margin-right: 14px;}

/* SYNC HOMEPAGE - AKA INDEX */
.developers { margin-bottom: 120px; padding-bottom: 120px; }
.developers p { text-align: center; font-weight: normal; }
.developers a { text-decoration: underline; display: block; text-align: center; }
.instruction { height: 190px; margin: 0 auto; position: relative; width: 190px; }
.instruction-img { margin-bottom: 48px; }
.instruction-label-area { bottom: 0; width: 100%; }
.instruction .instruction-label { bottom: 18px; margin-bottom: 0; text-align: center; width: 100%; }
.instruction-arrow { color: #FFF; right: -60%; top: 40%; -webkit-transform: translateY(-50%); }

.navsection-label, .os-icons, .platform-links li a { color: #808080; }
.navsection-link { border: 1px solid #E1DEDE; border-radius: 3px; height: 190px; margin: 0 auto; position: relative; width: 190px; }
.navsection-link a { display: block; height: 100%; }
.navsection-icon { margin-left: -5px; }
.navsection-label { bottom: 12px; left: 0; font-weight: 300; margin-bottom: 0; text-align: center; width: 100%; }

.platforms { margin-bottom: 60px; border-bottom: 1px solid #CCC; padding-bottom: 75px; }
.platforms h2 { font-weight: 300; font-size: 30px; line-height: 1.5;  }
.platforms, .platforms h2 { margin-bottom: 60px; text-align: center; }
.platforms:last-child { margin-bottom: 0; }
.platforms img { margin-bottom: 15px; }
.devices { margin: 0; }

.product-highlights { background-color: #0065cb; padding: 120px inherit; text-align: center; width: 100%;}
.product-highlights p, .product-highlights h2 { color: #FFF; font-weight: 300; margin-bottom: 0; }
.product-highlights h2 { line-height: 1.5; margin-top: 0; text-align: center; }
.product-highlights .col-md-9 { float: none; margin-left: auto; margin-right: auto; }

/* twitter comments stuff */
.quotes { padding: 80px 0; }
.quotes h2, .quotes h3 { margin-bottom: 48px; text-align: center; }
.quote-box { background-color: #F2F2F2; height: 222px; padding: 40px 40px; }
.quote-box h2 { font-size: 1.5em; line-height: 1.5; margin-bottom: 0; text-align: left; }
.quote-list { position: relative; }
  .caret-marker { color: #F1F1F1; font-size: 6.5em; left: 45px; line-height: .24; position: absolute; top: 0; vertical-align: top; }
.quote { display: none; }

/* sections with background image with caret underneath */
.section { padding-top: 85px; }
.section-intro { margin-bottom: 20px; text-align: center; }
.section-intro-icon { margin: 85px auto 8px; }
.section-intro-headline { margin-bottom: 0; font-size: 42px; }
.section-intro-subtext { font-size: 18px;  margin-top: 20px; }
.section-intro-subtext, .section-content p { font-weight: 400; }
.section-intro-headline, .section-intro-subtext, .section-content p{ color: #808080; }

/* twitter user icon area */
.user-icon {  padding-top: 25px; position: relative; text-align: center; }
.user-icon img { margin-top: 24px; cursor:pointer;}
.user-handle { font-size: 12px; }

/* SYNC API PAGE */
.api-img, .tech-img { width: 80px; height: 80px; margin: 0 auto; }
.api-img { background: url(/images/icon_md/sync_api_sprite.png); }
  .tools { background-position: 0 -26px; }
  .system { background-position: 0 -130px; }
  .community { background-position: 0 -220px; }
.api-feature, .api-nav .api-top-nav li a, .api-methods p.syntax { color: #808080; }
.api-methods p { font-weight: 300; }
.api-methods .api-note { color: #B3B3B3;  margin-bottom: 30px; }
.api-methods p.syntax { font-size: 14px; font-weight: 400; }
.api-methods .code { 
    background: #F8F8F8;
    padding: 12px;
    border: 1px solid #DBDBDB;
    width: auto;
}
.api-methods p { margin-bottom: 14px; }
.api-nav { display: none; }
.what-you-need h3, .api-methods h3 { font-size: 24px; }
.api-methods p[id] { font-size: 16px; font-weight: 600; margin-bottom: 0; }
.what-you-need h3 { font-weight: 300; }
.api-nav .api-top-nav li a, .fa-angle-up + a { color: #666; }
 .api-nav .api-top-nav li a:hover, .fa-angle-up + a:hover { color: #ccc; text-decoration: none; }
.api-content .sync_title p, .api-feature, .api-content h3, .api-methods p, .api-methods p.syntax, .usecase-section-link a, .howitworks-head { 
    color: #808080; }

/* SYNC TECH SPECS PAGE */
.tech-img { background: url(/images/icon_md/sync_tech_specs_sprite.png) no-repeat; }
  .keys { background-position: 0 10px; }
  .protocol { background-position: 0 -80px; }
  .lock { background-position: 0 -160px; }
  .discover { background-position: 0 -260px; }
  .traffic { background-position: 0 -367px; }
.tech-content p, .tech-content ul, .peer-list { margin-bottom: 0px; color: #808080; font-size: 16px; }
.tech-content h3 { font-size: 18px; margin-bottom: 6px; }
.tech-content ul { list-style: disc; padding-left: 15px; margin-bottom: 12px; margin-top: 12px; }

/* SYNC DOWNLOAD PAGE */
#releases li span { display: block; font-size: 10px; }
.dl-content li span { line-height: 1!important; }
.dl-content a { font-weight: 300; display: block; color: #3399FF; }
.dl-content i { float: left; margin-right: 20px; color: #D8D8D8; }
.dl-content .fa span { font-size: 12px; margin-top: 10px; margin-left: 5px; }
.dl-content span { font-size: 24px;  display: block; color: #999; }
.dl-content div { width: 303px; margin-top: 15px; }
.dl-content .win-dl { margin-top: 0; display: block; }
.win-dl a { display: inline; }
.linux li a, .freebsd li a { font-size: 18px; line-height: 24px; width: 227px; }
.linux ul > li, .freebsd ul > li { margin: 0 auto 15px; text-align: left; display: inline-block; zoom:1; *display:inline; /* IE7 fix - */ }
.sync_store_btn a:hover { opacity: 1; filter: alpha(opacity=100); text-decoration: none; }
.sync_store_btn a {
  margin-right: 50px;
  opacity: 0.8;
  filter: alpha(opacity=80);
  -webkit-transition: opacity 300ms ease-in-out;
  -moz-transition: opacity 300ms ease-in-out;
  -ms-transition: opacity 300ms ease-in-out;
  -o-transition: opacity 300ms ease-in-out;
  transition: opacity 300ms ease-in-out;
}

.sub-nas { margin-top: 20px; margin-bottom: -5px; }
.qnap-logo { padding-bottom: 5px; }

/* SYNC USECASES PAGE */
.usecase-container .hero_content { text-align: center; }
.usecase-section-btn {
  border: 1px solid #b3b3b3;
  border-radius: 3px;
  margin: 0 auto 25px;
  padding: 12px 17px;
  width: 196px;
  font-size: 16px;
  display: block;
  text-align: center;
}
.usecase-section-btn:hover { border: 1px solid #808080; }
a.usecase-section-btn { color: #808080; font-weight: 300; }
.case-container { width: 100%; float: none; text-align: center; }
.case-container p { line-height: 150%; font-size: 16px; }
.quotation p { text-align: center; font-size: 24px; line-height: 48px; color: #767676; width: 70%; margin-left: auto; margin-right: auto; }
span.quote-source { font-style: italic; font-weight: 600; }

/* SYNC HOW IT WORKS PAGE */
.howitworks-head { margin-top: 77px; margin-bottom: 90px; }
.howitworks-head p { font-weight: 400; }
.howitworks-head { text-align: center; }
.howItWorks .steps p { font-weight: normal; text-align: center; }
.howItWorks p.sub-instn { font-weight: lighter; }
.howItWorks .install-link { color: #0066cc; }
.howItWorks .instn { padding-top: 26px; }
.howItWorks .step-description { padding-top: 30px; }
.howItWorks .steps-arrow { margin-left: 48%; }
.howItWorks img { display: block; margin: 0 auto; }
.howItWorks .step-img { margin-top: 30px; }
p.instn + .sub-instn { margin-bottom: 30px; }

@media screen and (min-width: 481px) and (max-width: 768px) {
  .hero-play { background-size: 90%; right: 36%; top: 23%; }
}

@media screen and (max-width: 768px) {
  .dl-content div.col-md-5 { display: block; margin-left: auto; margin-right: auto; text-align: left; }
  .linux ul > li, .freebsd ul > li { text-align: center; }
  .col-xs-1.sync-img { float: none; }
  .col-xs-10.tech-content { float: none; margin: 0 auto 60px; }
  .sync_title { text-align: center; }
  .dl-content { text-align: center; }
  .sync_store_btn { text-align: center; }
  .sync_store_btn a { margin-bottom: 10px; display: block; margin-left: auto; margin-right: auto; }
  .howItWorks img { margin: auto; }
  .sub-nas { margin-top: 30px; margin-bottom: 0; }
}

@media screen and (min-width: 768px) {

  /* Index page */
  .main_title h1 { margin-bottom: 40px; }
  .hero-play{ background-size: 96%; right: 38%; }
  .instruction-row { margin-right: auto; margin-left: auto; }
  .tech-img, .api-img { float: left; }
  .tech-img { margin-right: 50px; margin-left: 10px; }
  .tech-content { margin-bottom: 60px; }
  .tech-content h3 { font-size: 16px; color: #808080; margin-bottom: 6px; }
 	.tech-content p { margin-left: 130px;  }
  .tech-content ul { margin-left: 145px; }

  .what-you-need { padding: 13px 0 35px; }
 	.what-you-need a { width: 191px; }

  .bt-dl-div { float: right; }
  .head_space { margin-top: 80px; }
  .main { text-align: left; padding: 0px 10px 50px; }

  /* sync api page*/
  .api-content h1.main_head { margin-bottom: 0; }
  .api-content .fixed{ position:fixed; }
  .api-img { margin-right: 20px; }
  .api-methods .code { width: 590px; }
  .api-top-nav li, .api-sub-nav li { list-style: none; line-height: 28px; }
  .api-top-nav li a { font-family: "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-size: 16px; font-weight: 300; }
 	.api-sub-nav li a { font-size: 14px; }
 	.api-sub-nav { margin-top: 0; }

  .modal { width: 60%; display: block; left: 20%; position: fixed; }
  .modal_close { top: 10px; }

  /*language dropdown*/
  .lang-link { color: #666; display: block; font-size: initial; font-weight: 300; line-height: initial; padding: 8px 0; }
  .lang-link:hover { text-decoration: none; } 

 	/* sync api modal */
 	#ss-form label { width: auto; text-transform: none; line-height: normal; font-size: 16px; display: inline-block; }
 	.ss-required-asterisk { color: #d2201a; }
 	.ss-form-question { display: block; margin: 30px 0 10px; }
 	.ss-form-question:first-child { margin-top: 0; }
 	.ss-q-title { margin-bottom: 10px; }
 	.ss-q-short, .ss-q-long {
    padding-left: 10px;
    font-weight: 300;
    font-size: 14px;
    color: #404040;
    text-decoration: none;
    display: block;
    min-height: 35px;
    width: 100%;
    background-color: #fff;
    box-sizing: border-box;
    text-align: left;
    border: 1px solid #e1e1e1;
 	}
 	.ss-q-long { margin-bottom: 40px; padding: 10px; resize: none; }
 	.ss-q-item-label { font-weight: 400; }

 	.submit_cta { width: 302px !important; }
 	.sub_cta a { display: inline-block; }
 	.sub_cta a:first-child {
            border-right: 1px solid #333;
            margin-right: 10px;
            padding-right: 10px;
 	}
 	.sub_cta a.single { border-right: none; margin-right: 0; padding-right: 0; }
 	.sub_cta span { display: none; }
 	.feature h2 { line-height: 1.75; }
  .modal h2 { letter-spacing: normal; }
 	
    /* Sync download page */
        .seagate-logo { margin-bottom: -30px; }
        .qnap-logo { margin-top: 20px; }

    /* Index page */ 
 	.logo { margin-top: 20px; }
 	.home-container .container, .home-container .container > .row { width: auto; }
 	.main_title { width: 750px; margin: auto; }
 	.download-container { margin-bottom:60px; }
 	.home-right-nav { padding: 0 34px; }
 	.bundle-outbound { margin: 18px 100px 62px; }
}

@media screen and (min-width: 992px) {
  .main { padding-top: 80px; }
  .bundleImgStatic img { display: none; width: auto; }
  .bundleImgDynamic { display: block; }
  .hp_prod_unit { width: 300px; height: 220px; display: block; }

  .instruction-row { margin: 138px auto 0; }
	.api-img { margin-right: 30px; }
  .tech-content p, .tech-content ul { margin-left: initial; }
 
  /* Frog Header Responsive Styles */
  .logo { float: left; }
  .header { background-color: #FFF; position: fixed; width: 100%; z-index: 1000; }
  .header.above { box-shadow: 0 0 3px #E1DEDE; }
  .header.above .header-download-btn { right: 0; overflow: hidden; }
  .header-nav { float: right; overflow: visible; max-height: inherit; text-align: left; margin-top: 0px; }
  .header-nav > li:first-child { border-top: none; }
  .header-nav > li { border-bottom: none; cursor: pointer; display: inline-block; margin: 0 50px 0 0; position: relative; }
  .header-nav > li:last-child { margin-right: 0; }
  .header-nav li:hover .sub-nav { opacity: 1; visibility: visible; }
  .header-nav .nav-category { margin-bottom: 0; padding-bottom:20px; }
  .header-nav .nav-category a { color: #999; }
  .header-nav .nav-category a:hover { color: #3399ff; }

  .nav-category .fa-angle-down { display:none; }

  .header-nav a.nav-item { padding: 0; }
  .header-nav .sub-nav {
    background-color: #F2F2F2;
    left: 0;
    max-height: initial;
    min-width: 100%;
    min-width: calc(100% + 25px);
    opacity: 1;
    filter: alpha(opacity=100);
    position: absolute;
    top: 100%;
    visibility: hidden;
    -webkit-transition: visibility,opacity 300ms ease-in-out;
    -moz-transition: visibility,opacity 300ms ease-in-out;
    -ms-transition: visibility,opacity 300ms ease-in-out;
    -o-transition: visibility,opacity 300ms ease-in-out;
    transition: visibility,opacity 300ms ease-in-out;
  }
  .header-nav .sub-nav a:hover { background-color: #E6E6E6; text-decoration: none; }
  .header-nav .sub-nav a, .header-nav .sub-nav a:hover  { color: #666; padding: 15px; }
  .bt-home .header-nav-container { padding-right: 0px; }
  .header-nav-container {
    position: relative;
    z-index: 1;
    -webkit-transition: right 500ms ease-in-out;
    -moz-transition: right 500ms ease-in-out;
    -ms-transition: right 500ms ease-in-out;
    -o-transition: right 500ms ease-in-out;
    transition: right 500ms ease-in-out;
  }
  .header-download-container { overflow: hidden; position: relative; }
  .header-download-container .header-download-btn {
    margin-bottom: 0;
    margin-top: 14px;
    position: relative;
    right: -120%;
    -webkit-transition: right 500ms ease-in-out; 
    -moz-transition: right 500ms ease-in-out;
    -ms-transition: right 500ms ease-in-out;
    -o-transition: right 500ms ease-in-out;
    transition: right 500ms ease-in-out;
  }
  .header-download-btn { font-size: 0.875em; }

  .rt-nav-item { text-align: left; }

  .lang-list { margin-bottom: 0px; text-align: center; }

  /* Frog Footer Responsive Styles */
  .footer-nav .footer-nav-group { margin-bottom: 0; text-align: left; }
  .footer-nav .footer-nav-group li { display: block; margin-right: 0; }
  .footer-nav .footer-nav-group li a { font-size: .875em; line-height: 2em; }
  .footer-nav .nav-category { font-size: initial; text-transform: none; }

  
  /* BT-Index Responsive Styles */
  .main-head { font-size: 60px; line-height: 66px;} 
  .home-container { background-image: url(/images/frog/home/devicePatternBkgd.jpg); height: auto; }
  .hideOnMobile { display: block; }
  .bundle-download-container { padding-left: 0; }
  .download-container { padding-left: 0; margin: 79px 0 0; } 
  .main_title { margin-bottom: 0; width: 50%; }
  .home-container, .bundle-container { text-align: left; }
  .home-container .container { margin: auto; width: 970px; }
  .bt-home +  .hero { padding-top: 0; margin: 0 -10px; }
  .home-container .main_title { padding-top: 110px; }
  .home-right-nav p { font-size: 14px; line-height: 21px; }
  .home-right-nav .nav-head { margin: 0 0 15px; }
  .sync-hero-image img {min-width: 398px !important; height: 163px; margin-right: 0; }
  .sync-download-container { margin: -5px 0 0 41px; }
  .bundle-download-container { margin-top: 16px; }
  .home-right-nav { min-height:760px; padding:110px 0 60px; } 
  .bundle-container { margin-bottom: 97px; }
  .bundle-container .col-md-10 { padding-left: 0; }
  .bundle-outbound { margin: 305px 0 0; float: right; }
  .api-link { width: 212px; margin-left: -33px; }
  
  /* Sync Section Index Responsive Styles */
  .hero { padding-top: 110px; }
  .hero.bt-sync { padding-top: 108px; }
  .hero-img { left:1%; }
  .hero-play{ background-size: 100%; right: 39%; -webkit-transition: background-image .5s; -moz-transition: background-image .5s; -ms-transition: background-image.5s;-o-transition: background-image .5s; transition: background-image .5s; }
  .hero-play:hover { background-image: url('/images/icon_sm/play-hover.png'); }
  .product-highlights h2 { margin-bottom: 60px; }
  .product-highlights { margin-bottom: 0px; text-align: left; }
  .product-highlights p { margin-bottom: 36px; }
  .platform-links { margin-top: 0; }
  .how-it-works { text-align: left; }
  .platforms { margin-bottom: 120px; }
  .platforms h2 { margin-right: 60px; }
  .platforms img.desktop { margin-bottom: 54px; }
  .platforms img.mobile { margin: auto auto 56px; display: block; }
  .platforms img.nas { margin: auto auto 47px; display: block;  }
  .devices { margin: auto -10px; }
  .howItWorks .steps p { text-align: left; }
  .section-intro-headline { font-size: 60px; }
  .section-intro-subtext { margin-top: 0;  line-height: 48px; }
  .os-icons { padding-left: 0; }
  
  /* Sync Use-Case */
  .usecase-container .use-case-1 { margin-left: -3px; }
  .usecase-container .use-case-2 { margin-left: -10px; }
  .usecase-container .use-case-3 { margin-left: -13px; }
  
  /* Sync API  */
  .api-nav { display: block; }
  .api-content .api-nav {
    padding: 12px;
    border: solid #DBDBDB;
    border-radius: 3px;
    border-width: thin;
    width: 223px;
    margin-left: 90px;
  }
  ul.api-top-nav, ul.api-sub-nav a {
    line-height: 28px;
    margin-top: 10px;
    margin-bottom: 15px;
    font-weight: 300;
    padding-left: 18px;
  }
  
  /* Sync How it works */
  .howItWorks .howItWorks-img-md { margin-top: 15%; }
  .howItWorks .howItWorks-img-lg { margin-top: 30%; }
  .howItWorks .pre-footer img { margin-top: -60px; }
  p.instn + .sub-instn {  margin-bottom: 115px;  }
  
  /* Sync downloads */
  .qnap-logo { margin-bottom: -6px; }
  
}

@media screen and (min-width: 1200px) {
  .sync-hero-image img { min-width: 436px !important; height: auto; margin-left: 14px; }
  .hero-play{ right: 41%; }
  .home-container .container { width: 1170px; }
  .download-container { margin-top:138px; }
  .sync-download-container { margin-left: 50px; }
  .bundle-download-container { margin-top: 30px; }
  .platforms img.desktop { margin-bottom: 54px; }
  .platforms img.mobile { margin-bottom: 71px; }
  .platforms img.nas { margin-bottom: 69px; }
  .home-right-nav .nav-head, .bundle-head { font-size: 36px; line-height: 42px; }
  .api-link { margin-left: -16px; }
  .api-content .api-nav { width: 272px; margin-left: 108px; }
  ul.api-top-nav, ul.api-sub-nav a { padding-left: 24px; } 
}
