/* --- CSS for Marketing Pages --- */
/*--- in the order of how things appear on the page ---*/

/*--- Homepage CSS --*/


/*--- old ---*/
 Pastels and Color Pallette
--------------------------------------------------
Pastels
Blue - #51b7e0
Yellow - #f5cb0a
Pink - #f763ac
Green - #17e0bc

BG Colors
hero lite blue - #d6e8ecg

/* Clearfix
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.clearfix:before, .clearfix:after {
    display: table;
    content: " ";
}
.clearfix:after {
    clear: both;
}

.uservoice-widget {
  text-align:center;
  width:80%;
}
.cs-image {
position: absolute;
  opacity: .5;
  right: 200px; }

/* Shared
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Header
–––––––––––––––––––––––––––––––––––––––––––––––––– 
.header {
  position: fixed;
  top:0;
  left:0;
  color:#fff;
  width:100%;
  z-index:1;
  }

.logo {
  width: 120px;
  z-index: 1001;
  }*/

/* Sections
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.section {
  padding: 3rem 0 3rem;
  text-align: center;
}
.section-heading,
.section-description {
  margin-bottom: 1rem;
}
.section-image{
  width:90%;
  margin-top:-1rem;
}
.section-image-gif{
    width:70%;
    margin: 0px 0 15px 0;
  }

/* Hero
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.hpcomputer{
    padding-top:20px;
    width:100%; 
  }
h1.hero-heading {
    font-size: 3.5rem;
    font-weight:500;
    margin-top:1rem;
  }
h2.hero-heading {
    font-size: 2.0rem;
    font-weight:300;
  }

/* Values
–––––––––––––––––––––––––––––––––––––––––––––––––– */
  .values {
    /*background-image: url('/m/images/values-bg.jpg');
    background-color:#a6c9d1;*/
    background-size: cover;
    color: #fff;
    padding:5rem 0;
  }
  a.values {
  
  }
  a.values:hover{
    color:#fff;
  }
  .twitter{
    width:100%;
    margin-left:auto;
    margin-right:auto;
  }
  .twitter-seemore{
    margin-top:1.5rem;
    margin-left:0%;
  }
  .twitterbump{
    padding-bottom:0rem;
  }
  .value-multiplier {
    margin-bottom: .5rem;
    width: 2.5rem;
    padding: 0 5px;
  }
  .value-heading {
    margin-bottom: .3rem;
  }
  .value-description {
    opacity: .8;
    font-weight: 300;
  }

/* Panel
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.panel {
  /*border-bottom: 1px solid #ddd; */
}

/* Categories
–––––––––––––––––––––––––––––––––––––––––––––––––– */
  .categories {
    background-image: url('/m/images/values-bg.jpg');
    background-size: cover;
    color: #fff;
  }
  .categories .section-description { 
    margin-bottom: 4rem;
  }

/* Aric's added stuff
–––––––––––––––––––––––––––––––––––––––––––––––––– */
  .breadcrumb{
    padding:20px 0px 10px 0px;
  }
  .herobump {
  	margin-top:3rem;
  }
  .checkbadge{
 	width:10px;
 	margin-bottom:-1px; 
 	padding-right:5px;
  }
  .lineholder{
	height:20px;  
	width:100%; 
	padding:5px 0; 
	text-align:center;
  }
  .pricingtext{
	margin-top:-15px; 
	font-size:12px;
  }
  .hidebutton{
  	visibility: visible;
  	display: none;
  }
  .pricingtext-top{
  	font-size:16px;
  }
  .lp-image{
    text-align:left;
  }
  .lp-button-bumpleft{
    margin:0px 0 0 39px;
  }
  .lp-image{
	/*border:solid 1px #51b7e0;*/ 
	width:80%; 
	margin-bottom:10px;
  }
  .lp-steps-title{
    text-align:left; 
    font-weight:700; 
    margin-bottom:10px;
  }
  .lp-explain-text{
  	text-align: left;
  	font-size: 14px;
  	max-width:90%;
  }
  .acd-list{
    margin:0px; 
    padding:0px;
  }
  
  /* --- Universal for link/source/add-ons pages - this is for managing indent between mobile --- */
  .doublebump { padding-left:0px; padding-right:0px;}
  .bottombump { padding-bottom:40px; }
  .topbump { padding-top:40px; }
  .topline{border-top:solid 1px #ddd; width:100%; margin-top:0px;}
  .topline-nospace{color:#ccc; width:100%; width:100%; margin:0 auto; padding:0px;}
  .topline-auth{color:#ccc; width:100%; width:100%; margin:0 auto; padding:0px;}

  
  /* --- FORM CSS --- */
   .form-popover{ width:360px; margin:0 auto; background: #fff; padding:10px; color:#333; } /* -- No border on mobile + full background --*/
   .form-titlefont {color:#333; font-size:2.4rem; font-weight:300; text-align:center;}
   .form-cancel {text-align:center; padding-top:10px; margin-bottom:0px; font-size:1.5rem;}
   .form-context{ font-size:11px; color:#aaa; padding:0px 20px; margin:-8px;}
   .form-input-boxes { color:#333; border-radius: 5px; border:solid 1px #ccc; background: #fff; width: 100%; font-size:2rem; font-weight:300; display:block;}
   .helpertext{ font-size:11px; color:#ccc; padding-left:12px; text-transform:uppercase; text-align:left;} /* used universally for helper text in forms and pages */
   ::-webkit-input-placeholder { color: #ccc; font-weight:300; font-size:1.8rem;}
   :-moz-placeholder { color: #ccc; font-weight:300; font-size:1.8rem;}
   ::-moz-placeholder { color: #ccc; font-weight:300; font-size:1.8rem;}
   :-ms-input-placeholder { color: #ccc; font-weight:300; font-size:1.8rem;}
   
   /* --- Form popover management --- */
    #editCover{ position:fixed; top:0; left:0; background:rgba(255,255,255,1); z-index:5; width:100%; height:100%; display:none; }
  	#editScreen:target, #editScreen:target + #editCover{ display:block; opacity:2; }
   
   /* --- FORM BOX HEIGHTS --- */
   .ftp {height: 470px; }
   .sftp { height: 575px; }
   .WebDAV { height:390px; }
   .ofs { height:435px; }
   .odrivegateway { height:435px; }
   .corners { color:#333; border-radius: 10px; border:solid 1px #ccc; background: #fff; padding: 40px; width: 100%; }
   .addlink { padding-top:0px;}
   
   /* Links and Source pages*/
   .tabs-nav{ font-size:11px; text-transform:uppercase; cursor:pointer} /* --- for selectable stuff --- */
   .tabs-nav-noselect{ font-size:11px; text-transform:uppercase;} /* --- for non-selectable ---*/
   .textaction{font-size:1.4rem; text-align:right;} 
   .toptext{font-size:11px; color:#ccc;}
   .form-input-text{font-size:2rem; color:#333; font-weight:300; width:100%;}
   .changetext{font-size:1rem; padding-left:5px;}
  
   /* --- LINKS PAGE --- */
   /*.links-row{ border:solid 1px #333; padding:10px 0 15px 20px;}*/
   .links-row:hover {background-color:#efefef;}
   .links-title { font-size:24px; line-height:20px; font-weight:300; padding-left:15px; color:#333;}
   .links-description {font-size:11px; color:#999; padding:5px 0 0px 15px; line-height:11px; }
   .links-rows { padding-left:20px;}
   .links-corners { color:#333; border-radius: 10px; border:solid 1px #ddd; background: #fff; padding: 5px; width: 100%; }
   .link-icon-top{ width:50px; height:50px; display:inline; }
   .link-menu-spacer{ margin-right:5%;}
   .link-menu-poof{ display:none; }
   
   /* --- Source pages ---*/
   .addon-button{display:inline-block; float:left; padding-top:20px;}
   .source-screenshots { width:99%; }
   .source-description { padding-top:20px;}
   .source-title{ padding-left:15px; font-size:24px; font-weight:300; display:inline; vertical-align:42%;}
   
   .auth-button {
    font-size: 14px;
    position: relative;
    margin: 20px auto;
    width: 280px;
    border-radius: 5px;
    max-width: 80%;
    height: 55px;
    padding: 0;
    display: block;
    color:#fff;
	}
	.auth-button.facebook{ background-color:#4862a1;}
	.auth-button.image-wrapper {
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    vertical-align: middle;
    text-align: center;
    }
	.auth-button.label {
		display: block;
		vertical-align: middle;
		padding-left: 60px;
		padding-right: 30px;
	}
	.auth-button.facebook img {
    margin-left: 25px;
    margin-right: 25px;
	}
	.auth-button .image-wrapper img {
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
    width: 34px;
    height: 34px;
	}
	.auth-button.facebook {
     background-color: #4862a1;
	}
	.auth-button.facebook:hover {
	  background-color: #384d7e;
	}
	.auth-button.facebook:active {
	  background-color: #28375b;
	}
	.auth-button.google {
	  background-color: #dd4b39;
	}
		.auth-button.google:hover {
	  background-color: #c23321;
	}
	.auth-button.google:active {
	  background-color: #96271a;
	}
	.auth-button.amazon {
	  background-color: #f6ca51;
	  margin-bottom: 0;
	}

/* Bigger than 550 */
@media (min-width: 550px) {
  .section {
    padding: 3rem 0 3rem;
  }
  .hero {
    padding-bottom: 12rem;
    text-align: center;
    height: 165px;
  }
  .herobump {
  	margin-top:2rem;
  }
  .hpcomputer{
    width:90%; 
  }
  h1.hero-heading {
    font-size: 2.2rem;
    font-weight:500;
    text-align:center;
  }
  h2.hero-heading {
    font-size: 1.5rem;
    font-weight:300;
    text-align:center;
  }
  .centered{
    text-align:center;
  }
  .section-description {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom:10px;
  }
  .section-image{
    width:80%;
    margin: 0px 0 15px 0;
  }
  .section-image-gif{
    width:50%;
    margin: 0px 0 15px 0;
  }
  .twitter {
    width:100%;
  }
  .twitterbump{
    padding-bottom:1rem;
  }
  .checkbadge{
 	width:10px;
 	margin-bottom:-1px; 
 	padding-right:3px;
  }
  .lineholder{
	height:20px;  
	width:100%; 
	padding:5px 0; 
	text-align:center;
  }
  .pricingtext{
  	font-size:9.5px;
  }
  .pricingtext-top{
  	font-size:12px;
  }
  .hidebutton{
  	visibility: hidden;
  	display: block;
  }
  .lp-button-bumpleft{
    margin:0px 0 0 18px;
  }
  .lp-image{
	/*border:solid 1px #51b7e0;*/ 
	width:90%; 
	margin-bottom:10px;
  }
  .lp-steps-title{
    text-align:left; 
    font-weight:700; 
    margin-bottom:10px;
  }
  .lp-explain-text{
  	text-align: left;
  	font-size: 14px;
  	max-width:90%;
  }
  
  /* --- Source pages ---*/
  .source-screenshots { width:49.5%;}
  
  /* --- Form popover management --- */
    .form-popover{ padding:40px; border-radius: 10px;}
    #editCover{ position:fixed; top:0; left:0; background:rgba(0,0,0,0.6); z-index:5; width:100%; height:100%; display:none; }
  	#editScreen:target, #editScreen:target + #editCover{ display:block; opacity:2; }
  	
  /* --- Universal for link/source/add-ons pages - this is for managing indent between mobile --- */
  .addon-button{display:inline-block; float:right; padding-top:0px;}
  .doublebump { padding-left:20px; padding-right:20px;}
  .topline{border-top:solid 1px #ddd; max-width:100%; margin-top:0px;}
  .topline-nospace{color:#ccc; width:100%; max-width:100%; margin:0 auto; padding:0px;}

  .link-menu-poof{ display:inline; }
  .link-menu-spacer{ margin-right:6%;}
}
  

/* Bigger than 750 */
@media (min-width: 750px) {
  .menubar {
    background-color: rgba(255, 255, 255, 0);
  }
  .hero {
    height: 170px;
  }
  .hero-heading {
    font-size: 2.6rem;
  }
  .section {
    padding: 4rem 0 4rem;
  }
  .herobump {
  	margin-top:2rem;
  }
  .hero {
    padding: 12rem 0 11rem;
  }
  .hpcomputer{
    width:120%; 
    padding-top:10%;
    margin-top: -40px; 
    margin-left:-30px;
  }
  h1.hero-heading {
    font-size: 3.5rem;
    font-weight:500;
  }
  h2.hero-heading {
    font-size: 2.5rem;
    font-weight:300;
  }
  .section-description {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom:35px;
  }
  .section-image{
    width:80%;
    margin: 0px 0 15px 0;
  }
  .section-image-gif{
    width:50%;
    margin: 0px 0 15px 0;
  }
  .categories {
    padding: 15rem 0 8rem;
  }
  .twitter{
   width: 30.6666666667%;
  }
  .twitterbump{
    padding-bottom:1.5rem;
  }
  .poof{
    display: inline;
  }
  .checkbadge{
 	width:10px;
 	margin-bottom:-1px; 
 	padding-right:5px;
  }
  .lineholder{
	height:20px; 
	width:100%; 
	padding:5px 0; 
	text-align:center;
  }
  .pricingtext{
	margin-top:-15px; 
	font-size:12px;
  }
  .pricingtext-top{
  	font-size:16px;
  } 
  .lp-image{
	/*border:solid 1px #51b7e0;*/ 
	width:75%; 
	margin-bottom:10px;
  }
  .lp-explain-text{
  	text-align: left;
  	font-size: 14px;
  	width:75%;
  }
  
  /* --- Source pages ---*/
  .source-screenshots { width:49.5%;}
  
  /* --- Link menu ---*/
  .link-menu-spacer{ margin-right:10%;}
  
}

/* Bigger than 1000 */
@media (min-width: 1000px) {
  .section {
    padding: 6rem 0 4rem;
  }
  .herobump {
  	margin-top:9rem;
  }
  .hero {
    padding: 25rem 0;
  }
  h1.hero-heading {
    font-size: 5.0rem;
    font-weight:500;
  }
  h2.hero-heading {
    font-size: 3.0rem;
    font-weight:300;
  }
  .hpcomputer{
    width:120%; 
    padding-top:0px;
    margin-top: -40px; 
    margin-left:-50px;
  }
  .section-description {
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom:35px;
  }
  .section-image{
    width:50%;
    margin: 0px 0 15px 0;
  }
  .section-image-gif{
    width:35%;
    margin: 0px 0 15px 0;
  }
  .twitter{
    margin:0 1%;
	width: 30.6666666667%;
  }
  .twitterbump{
    padding-bottom:3.5rem;
  }
  .twitter-seemore{
    margin-top:3rem;
    margin-left:-3.5%;
  }
  .lp-image{
	/*border:solid 1px #51b7e0;*/
	width:60%; 
	margin-bottom:10px;
  }
  .lp-explain-text{
  	text-align: left;
  	font-size: 14px;
  	width:60%;
  }
  
  /* --- Source pages ---*/
  .source-screenshots { width:24.7%;}
  
  /* --- Universal for link/source/add-ons pages - this is for managing indent between mobile --- */
  .addon-button{display:inline-block; float:right; padding-top:0px;}
  .doublebump { padding-left:20px; padding-right:20px;}
  .topline{border-top:solid 1px #ddd; max-width:940px; margin-top:0px;}
  .topline-nospace{color:#ccc; width:100%; max-width:940px; margin:0 auto; padding:0px;}
  
}

/* Universal bumps and positioning crap - Only use for mini-adjustments */

  .bottombump5 { margin-bottom: .5rem;  }
  .topbump5{ margin-top: .5rem;  }
  .bottombump10 { margin-bottom: 1rem;  }
  .topbump10{ margin-top: 1rem;  }
  .bottombump20 { margin-bottom: 2rem;  }
  .topbump20{ margin-top: 2rem;  }
  .leftbump20 { padding-left: 2rem;  }
  .rightbump20{ padding-right: 2rem;  }
  .bottombump30 { margin-bottom: 3rem;  }
  .topbump30 { margin-top: 3rem;  }
  .bottombump40 { margin-bottom: 4rem;  }
  .topbump40 { margin-top: 4rem;  }
  .bottombump6 { margin-bottom: 6rem;  }
  .topbump6 { margin-top: 6rem;  }
  .breaka{ width:60%  }
  .centered{ text-align:center;  }
  .lefted{ text-align:left;  }
  .hiddenline{ border:solid 1px #fff;  visibility: hidden; }
  .loginbuttonfb{ background-color:#4862a1; }
  .mzeroleft{ margin-left: 0;  }
  .p0{ padding:0px;  }
  .pb0 { padding-bottom:0px; }
  .pb5 { padding-bottom:5px; }
  .pt0 { padding-top:0px; }
  .pt10 { padding-top:10px; }
  .w100{ width:100%;  }
  .mb-15 { margin-bottom:-15px;}
  

/*--- Accordion Styling for Convincer marketing pages ---*/
  .accordionheight {}
  .ui-widget { font-family:inherit; }
  .ui-widget-content { background:none; border:none;  padding: 0; margin: 0; }
  .ui-accordion .ui-accordion-header .ui-accordion-header-icon { display:none; }
  .ui-accordion .ui-accordion-icons { padding:0; margin:0; }
  .ui-accordion .ui-accordion-header { border:none; display: block; cursor: pointer; position: relative; margin:0; padding-bottom:5px; }
  #accordionLinks .ui-accordion { padding:10px 0 20px; }
  #accordionLinks .ui-accordion-content { padding:10px 0 20px; }
  .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background:none; color:#51b7e0; }
  .ui-state-focus { outline: none; }
 
/*--- Homepage CSS ---*/  
 #panel1-textholder { text-align:center; width:500px; }
 .panel1 { padding-left:20px; padding-right:20px; border:solid 1px #333; width:100%; height:300px; background-color:#d6e8ec; }

/*--- Terms & Privacy Policy CSS ---*/
#terms { 
  max-width:700px;
  margin:0 auto; 
  text-align:left;
}
#terms p { padding-bottom:20px; }
#terms .title { padding-top:40px; font-size:1.6rem; }

/*--- FAQ CSS ---*/
#faq h5 { font-size:15px; font-weight:400; color:#51b7e0; line-height:1.7; }
#faq p { margin:0; padding:0; }