/*--- New Homepage ---*/
/*---Aric Johnson - November 2015---*/

/*--- Universal Stuff for all Panels that doesn't change per size ---*/
  .bg1 { overflow: hidden; }
  .bg1-image { overflow: hidden; }
  .bg2 { overflow: hidden;}
  .bg2-image { overflow: hidden; }
  .bg3 { overflow: hidden;}
  .bg3-image { overflow: hidden; }
  
  
/*--- Panel Holders ---*/  
  .holder { width:100%; z-index:1; position:relative; }
  .holder2 { width:100%; z-index:1; position:relative; }
  .holder3 { width:100%; z-index:1; position:relative; }


/*--- Panel titles and subtext ---*/
  .panel-title { font-size:5rem; line-height:6rem; font-weight:900; text-align:center; padding-top:50px; padding-bottom:30px; }
  .sub-title { font-size:1.8rem; line-height:2.4rem; font-weight:400; text-align:center; padding-top:0px; width:90%; margin:0 auto; max-width:700px; margin-bottom:40px;}


/*--- Backgrounds ---*/
  .bg1 { z-index:-2; position:absolute; right:0px; top:620px;}
  .bg1-image { width:700px; }
  .bg2 { z-index:-2; position:absolute; left:0px; bottom:-170px; width:100%; }
  .bg2-image { width:100%; height:775px; left:-5%; }
  .bg3 { z-index:-2; position:absolute; left:0px; bottom:-3px; }
  .bg3-image { width:100%; height:900px; }
  
  
/*--- Panel Spacing ---*/
  #panel1 { padding-top:40px; padding-bottom:150px; }
  #panel2 { padding:0px 0px 100px; }
  #panel2 .box { margin:0 auto; width:90%; }
  #panel3 { padding:0px 0px 100px; }
  #panel3 .box { margin:0 auto; width:95%; }
  #panel4 { padding:0px 0px 100px; }
  #panel4 .box { margin:0 auto; width:100%; }
  #panel5 { padding:0px 0px 100px; }
  #panel5 .box { margin:0 auto; width:90%; }
  #panel6 { padding:0px 0px 100px; }
  #panel6 .box { margin:0 auto; width:100%; } 
  
  
/*--- Panel #1 - Main Title Panel ---*/
  #panel1 .main-title { font-size:3.5rem; line-height:7rem; font-weight:200; letter-spacing:-0.1rem; text-align:center; padding-top:40px; padding-bottom:20px; }
  #panel1 .main-sub1 { font-size:5rem; line-height:6.5rem; font-weight:900; letter-spacing:-0.1rem; text-align:center; padding-top:0px; padding-bottom:20px; }
  #panel1 .main-sub2 { font-size:2rem; line-height:3rem; font-weight:300; letter-spacing:-0.07rem; text-align:center; padding-top:0px; padding-bottom:40px; }
  #panel1 .available-on { padding-top:10px; text-align:center; }
  #panel1 .available-text { display:inline; font-size:1.3rem; color:#bbb; vertical-align:50%; }
  #panel1 .available-img { display:inline; width:25px; padding:3px; }
  #panel1 .button-holder { text-align:center; }


/*--- Panel #2 - Link Everything ---*/
  #panel2 .invisy { visibility:hidden; }
  #panel2 .subtitle { font-size:2rem; font-weight:700; }
  #panel2 .tablespacer { padding:0px 5px 20px 5px; }
  #panel2 .e-holder-holder { margin-left:-62px; }
  #panel2 .everything-holder { margin:0 auto; text-align:center; width:100%; }
  #panel2 .thumb { display:inline; padding:0 0 0 62px; margin-top:20px; }
  #panel2 .link-container { color:#333; border-radius: 10px; border:solid 1px #e1e8ed; background: #fff; padding:5px; width:50px; margin-top:20px; }
  #panel2 .link-container:hover { border:solid 1px #ccd6dd; }


/*--- Panel #3 - Sync Everything ---*/
  #panel3 .holder {  width:100%; margin:0 auto; text-align:center; margin-left:0px; }
  #panel3 img { display:block; width:90%; margin:0 auto; text-align:center; border:solid 1px #e1e8ed; margin-bottom:2%; }
  #panel3 .image-column { display:inline-block; width:90%; margin:0 auto; margin-left:.8%;  }


/*--- Panel #4 - Placeholder Files ---*/
  #panel4 .image-holder { margin: 0 auto; text-align:center; }
  #panel4 .image { margin:0 auto; width:90%; }


/*--- Panel #5 - What people are saying ---*/
  #panel5 .row { margin:0 auto; margin-left:3%; }
  #panel5 .twitter-holder { margin:0 auto; padding-left:0px; text-align:center; padding-bottom:20px; max-width:1200px; }
  #panel5 .quote-holder { background-color:#fff; border:solid 1px #e1e8ed; border-radius:5px; display:inline-block; padding:20px; text-align:center; margin:10px 0; }
  #panel5 .quote-holder:hover { border:solid 1px #ccd6dd; }
  #panel5 .quote { font-size: 14px; line-height:20px; position:relative; font-style: oblique; text-align:left; color:#333; }
  #panel5 .quote-from { padding-top:0px;  text-align:left; }
  #panel5 .quote-logo { width:40%; }
  #panel5 a:hover { text-decoration:none; }
  #panel5 .quote-centering { margin:0 auto; text-align:center; }
  #panel5 blockquote p { font-size:inherit; }
  #panel5 blockquote .twitter-tweet a { color:#51b7e0; }
/*--- only for tweets ---*/ 
  #panel5 .twitter-user-holder { text-align:left; height:36px; }
  #panel5 .twitter-user-holder tr, td { margin:0px; padding:0px; }
  #panel5 .twitter-image-holder { text-align:left; padding-right:10px; }
  #panel5 .twitter-image { width:36px; border-radius:5px; text-align:left; }
  #panel5 .twitter-name-holder { }
  #panel5 .twitter-name { font-size:1.4rem; font-weight:700; color:#333; }
  #panel5 .twitter-name:hover { color:#51b7e0; }
  #panel5 .twitter-handle { font-size:1.1rem; font-weight:400; color:#ccc; display:inline; }
  #panel5 .twitter-stuff { padding-left:10px; }
  #panel5 .twitter-bird { width:15px; display:inline; opacity:.8; }
  #panel5 .twitter-bird:hover { opacity: 1; }
  #panel5 .twitter-certified { width:15px; display:inline; padding-right:5px; }
  #panel5 .twitter-tweet-text { font-size:14px; line-height:20px; text-align:left; padding-top:10px; color:#333; }
  #panel5 .twitter-date { font-size:1.1rem; color:#bbb; text-align:left; padding-top:15px; }
  #panel5 .twitter-date a { color:#bbb; }
  #panel5 .twitter-date a:hover { color:#aaa; }



/*--- Panel #6 - Do more with odrive ---*/
  #panel6 .main-holder { margin-left: 9%; }
  #panel6 .thumb { margin-left:10px; }
  #panel6 .title-holder { width:100%; padding:10px;  }
  #panel6 .item-holder { background-color: rgba(255,255,255,0.9); border:solid 1px #e1e8ed; border-radius:5px; margin:10px; padding:10px; margin-bottom:20px; }
  #panel6 .item-holder:hover { background-color:#eee; text-decoration:none; }
  #panel6 .empty { visibility: hidden; }
  #panel6 .empty:hover { visibility: hidden; }
  #panel6 .column { width:100%; }
  #panel6 .middle { margin:0 auto; } /*---8px on both sides when 3 rows is back---*/
  #panel6 .title { font-size:2.4rem; font-weight:700; color:#333; background-color:rgba(255,255,255,0.9); }
  #panel6 .subtitle { font-size:1.8rem; font-weight:500; color:#333;}
  #panel6 .text { font-size:1.3rem; font-weight:400; line-height:.8rem; color:#333;}
  #panel6 a, .title:hover, .subtitle:hover, .text:hover { text-decoration:none; }
  #panel6 .text-padding { padding-left:10px; }
  #panel6 .domore-container { color:#333; border-radius: 10px; border:solid 1px #e1e8ed; background: #fff; padding:5px; width:50px; }
  #panel6 .domore-container:hover { border:solid 1px #ccd6dd; }
  #panel6 .text-comingsoon { font-weight:700; color:#ff3399; }
  
/*--- If items in Panel 6 aren't links ---*/
  /*
  #panel6 .item-holder { background-color: rgba(255,255,255,0.9); }
  #panel6 .item-holder:hover { background-color: rgba(255,255,255,0.9); }
  */
  
/*--- ELEMENT CHANGES BY SCREENSIZE w/ @media ---*/
  
  @media (min-width: 319px) {

/*--- Backgrounds ---*/
  .bg1 { z-index:-2; position:absolute; right:0px; top:920px;}
  .bg1-image { width:700px; }
  .bg2 { z-index:-2; position:absolute; left:0px; bottom:-100px; }
  .bg2-image { width:100%; height:475px; left:-5%; }
  .bg3 { z-index:-2; position:absolute; left:0px; bottom:-3px; }
  .bg3-image { width:100%; height:900px; }
  .hp-column-hide { display:none; }
  
  }/*--- End 319px ---*/

  @media (min-width: 400px) {
    .bg1 { z-index:-2; position:absolute; right:0px; top:620px;}
    #panel1 .main-sub1 { max-width: 75%; margin:0 auto; }
  }/*--- End 400px ---*/

  @media (min-width: 550px) {

/*--- Backgrounds ---*/
  .bg1 { z-index:-2; position:absolute; right:0px; top:575px;}
  .bg1-image { width:700px; }
  .bg2 { z-index:-2; position:absolute; left:0px; bottom:-170px; }
  .bg2-image { width:100%; height:775px; left:-5%; }
  .bg3 { z-index:-2; position:absolute; left:0px; bottom:-3px; }
  .bg3-image { width:100%; height:900px; }
  .hp-column-hide { display:none; }
  
/*--- Panel #1 - Main Title Panel ---*/
  #panel1 .main-title { font-size:5rem; line-height:7rem; letter-spacing:-0.1rem; }
  #panel1 .main-sub1 { font-size:6rem; line-height:6.5rem; letter-spacing:-0.1rem; }
  #panel1 .main-sub2 { font-size:2rem; line-height:3rem; letter-spacing:-0.07rem; }
  
  }/*--- End 550px ---*/

  @media (min-width: 650px) {
  
  }/*--- End 650px ---*/

  @media (min-width: 750px) {


/*--- Backgrounds ---*/
  .bg1 { z-index:-2; position:absolute; right:0px; top:520px; }
  .bg1-image { width:700px; }
  .bg2 { z-index:-2; position:absolute; left:0px; bottom:-150px;}
  .bg2-image { width:100%; height:775px; left:-5%; }
  .bg3 { z-index:-2; position:absolute; left:3%; bottom:-3px;}
  .bg3-image { width:100%; height:900px; }
  .hp-column-hide { display:block; }
  
/*--- Panel Spacing ---*/
  #panel1 { padding-top:60px; padding-bottom:120px; }
  #panel2 { padding:0px 0px 120px; }
  #panel2 .box { margin:0 auto; width:90%; }
  #panel3 { padding:0px 0px 120px; }
  #panel4 { padding:0px 0px 120px; }
  #panel4 .box { margin:0 auto; width:100%; }
  #panel5 { padding:0px 0px 120px; }
  #panel5 .box { margin:0 auto; width:90%; }
  #panel6 { padding:0px 0px 120px; }
  #panel6 .box { margin:0 auto; width:100%; } 
    

/*--- Panel titles and subtext ---*/
  .sub-title { font-size:1.8rem; line-height:2.4rem; width:90%; }
  .panel-title { font-size:5rem; line-height:5rem; }


/*--- Panel 1 font changes to mitigate screensize changing ---*/
  #panel1 .main-title { font-size:6rem; line-height:9rem; }
  #panel1 .main-sub1 { font-size:6rem; line-height:8rem;}
  #panel1 .main-sub2 { font-size:2rem; line-height:3rem; }
  #panel1 .main-sub1 { max-width: 100%; }
    
/*--- Panel 3 ---*/
  #panel3 .folder-gif { width:65%; }

/*--- Panel 4 ---*/
  #panel4 .image { width:75%; }
  
/*--- Panel 5 ---*/
  #panel5 .row { margin:0 auto; margin-left:2%; }
  #panel5 .twitter { margin:1% 1%; width: 30.6666666667%; }
  #panel5 .quote-logo { width:45%; max-width:170px; }
  
  
/*--- Panel #6 - Do more with odrive ---*/
  #panel6 .main-holder { margin-left: 2%; }
  #panel6 .column { width:32%; }
  
  }/*--- End 750px ---*/
  
  @media (min-width:900px) {
    #panel2 .everything-holder { width:80%; }
  }

  @media (min-width: 1000px) {

/*--- Backgrounds ---*/
  .bg1 { z-index:-2; position:absolute; right:0px; top:520px; }
  .bg1-image { width:700px; }
  .bg2 { z-index:-2; position:absolute; left:0px; bottom:-350px;}
  .bg2-image { width:100%; height:1000px; left:0; }
  .bg3 { z-index:-2; position:absolute; left:3%; bottom:-3px;}
  .bg3-image { width:100%; height:1200px; }
  
/*--- Panel Spacing ---*/
  #panel1 { padding-top:120px; padding-bottom:180px; }
  #panel2 { padding:0px 0px 180px; }
  #panel2 .box { margin:0 auto; width:90%; }
  #panel3 { padding:0px 0px 180px; }
  #panel4 { padding:0px 0px 180px; }
  #panel4 .box { margin:0 auto; width:100%; }
  #panel5 { padding:0px 0px 180px; }
  #panel5 .box { margin:0 auto; width:90%; }
  #panel6 { padding:0px 0px 180px; }
  #panel6 .box { margin:0 auto; width:90%; } 

/*--- Panel titles and subtext ---*/
  .sub-title { font-size:1.8rem; line-height:2.4rem; width:90%; }
  .panel-title { font-size:6rem; line-height:6rem; }
  
  
/*--- Panel 1 font changes to mitigate screensize changing ---*/
  #panel1 .main-title { font-size:7rem; line-height:9rem; }
  #panel1 .main-sub1 { font-size:7rem; line-height:9rem; }
  #panel1 .main-sub2 { font-size:3rem; line-height:4rem; }

/*--- Panel 2 ---*/
  #panel2 .everything-holder { width:70%; max-width:900px; }

/*--- Panel 3 ---*/
  #panel3 .folder-gif { width:55%; max-width: 600px; }


/*--- Panel 4 ---*/
  #panel4 .image { width:75%; max-width:800px; }
  
  
/*--- Panel #6 - Do more with odrive ---*/
  #panel6 .main-holder { margin-left: 2%; }
  #panel6 .main-holder { margin-left: 2%; }
  #panel6 .column { width:33%; }

  }
  
  @media (min-width: 1100px) {
  
  }/*--- End 1100px ---*/
  
  @media (min-width: 1200px) {
  
  }/*--- End 1200px ---*/

  @media (min-width: 1300px) {

  }/*--- End 1300px ---*/

  @media (min-width: 1400px) {
    
  }/*--- End 1400px ---*/

  @media (min-width: 1500px) {
  
  }/*--- End 1500px ---*/