/****************************************
  Theme: Blog.StructureStudios.com 2015
  Theme Author: Michael Malaska
  Theme Company: Structure Studios
  This theme was created for the Structure Studios website, specifically to be used with the hubspot framework. It extends the StructureStudios.com 2015 hubspot theme
  ****************************************/
#roiWrapper
    { display: block; height: 0px; padding: 41% 0 0 0; margin: 100px 0 20px 0; position: relative; }

#roi
    { display: block; box-sizing: border-box; width: 1240px; height: 500px; /*Width: 100%; height: 0px; padding-top: 41%;*/
      position: absolute; overflow: hidden;
      top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1,1);
      background: #EFF3F5; border: solid 1px #EFF3F5;
      box-shadow: 0 2px 15px rgba(25, 54, 78, 0.3); }


#roiOverlay
    { display: block; width: 100%; height: 1px;
      position: absolute; top: 0; left: 0; right: 0; z-index: 300; }

.roiTitle
    { display: block; position: absolute; top: 20px; right: 20px;
      font-size: 24px; font-weight: 300; color: #d2d9de; color: rgba(49,83,110,0.2); }

.roiProgress
    { position: absolute; top: 20px; left: 20px; width: 200px;
      font-size: 30px; line-height: 36px; color: #31536E; text-align: center; }
.roiProgressBar
    { display: block; width: 100%; height: 4px; padding: 2px; position: relative; border-radius: 4px; background: #c8d4de; }
.roiProgressBar > div
    { display: block; width: 0%; height: 4px; background: #08F; border-radius: 2px;
      position: absolute; top: 2px; left: 2px;
      transition: all ease-in-out 0.3s; }
.s01 .roiProgressBar > div { width: 25%; }
.s02 .roiProgressBar > div { width: 50%; }
.s03 .roiProgressBar > div { width: 75%; }
.s04 .roiProgressBar > div { width: calc(100% - 4px); }

.roiStep, .roiStepName
    { display: inline-block; padding-top: 10px; position: relative; left: 0; opacity: 1; transition: all 0.3s ease-in-out; }
.roiStep
    { color: #08F; padding-right: 15px; }

.roiStep.change
    { opacity: 0; left: -100px; }
.roiStepName.change
    { opacity: 0; left: 100px; }


/* ------- */
/* ------- Stage Rules ------- */
/* ------- */
#stages
    { display: block; width: 100%; height: 500px;
      position: absolute; top: 700px; left: 1500px; z-index: 100; 
      transition: left 1.5s cubic-bezier(0.3, 0, 0.3, 1), top 1.5s cubic-bezier(0.6, 0, 0.6, 1); }

.s01 #stages { top: 0px; left: 0px; }
.s02 #stages { top: -700px; left: -800px; }
.s03 #stages { top: -1500px; left: 100px; }
.s04 #stages { top: -1200px; left: -1500px; }

#stages > div
    { display: block; width: 100%; height: 100%;
      position: absolute; top: 0; left: 0; z-index: 100; }

#stages > div.stage02
    { top: 700px; left: 800px; }
#stages > div.stage03
    { top: 1500px; left: -100px; }
#stages > div.stage04
    { top: 1200px; left: 1500px; }


#stages > div:after
    { content: ""; display: block; width: 1500px; height: 700px;
      position: absolute; top: -100px; left: -130px; z-index: 1; }

.stage01:after
    { background: url('https://www.structurestudios.com/hubfs/00_images_ss2015/roi-calculator/stage-01.jpg') no-repeat center center; }
.stage02:after
    { background: url('https://www.structurestudios.com/hubfs/00_images_ss2015/roi-calculator/stage-02.jpg') no-repeat center center; }
.stage03:after
    { background: url('https://www.structurestudios.com/hubfs/00_images_ss2015/roi-calculator/stage-03.jpg') no-repeat center center; }
.stage04:after
    { background: url('https://www.structurestudios.com/hubfs/00_images_ss2015/roi-calculator/stage-04.jpg') no-repeat center center; }


/* ------- */
/* ------- Question and Answer Bubbles ------- */
/* ------- */
.roiQuestion, .roiAnswer
    { display: block; padding: 25px 30px;
      position: absolute; z-index: 100;
      border-radius: 20px; background: #FFF;
      opacity: 0;
      transition: all 0.3s cubic-bezier(0.415, -0.035, 0.770, 1.465); }

.roiQuestion p, .roiAnswer p
    { font-size: 30px; line-height: 40px; }

.roiQuestion
    { top: 100px; left: -100px; }
.roiAnswer
    { top: 240px; right: -130px; background: #08F; color: #EFF3F5; padding-right: 150px; }

.roiQuestion.active
    { left: 100px; opacity: 1; }
.roiAnswer.active
    { right: 70px; opacity: 1; }

.roiQuestion:after, .roiAnswer:after
    { content: ""; display: block; width: 40px; height: 15px;
      position: absolute;
      background: url('https://www.structurestudios.com/hubfs/00_images_ss2015/roi-calculator/bubble-tail-white.png') no-repeat center center;
      transition: all 0.3s ease-in-out;}
.roiQuestion.active:after
    { top: -15px; left: 15px; }
.roiQuestion:after
    { top: 0px; left: 35px; }
.roiAnswer:after
    { bottom: 0px; right: 35px; background: url('https://www.structurestudios.com/hubfs/00_images_ss2015/roi-calculator/bubble-tail-blue.png') no-repeat center center; }
.roiAnswer.active:after
    { bottom: -15px; right: 15px; }


.roiAnswer input
    { display: inline-block; width: 130px; background: #dfe6eb;
      font-size: 25px; color: #08F; text-align: center;
      border: solid 1px #EFF3F5; box-shadow: 0px 0px 20px #36bfff;
      transition: border 0.2s ease-in-out 0s, background 0.2s ease-in-out 0s;
      animation: shadow 1s ease-in-out infinite; animation-direction: alternate; }
.roiAnswer input.error
    { background: #FDD; border: solid 1px #F66; box-shadow: 0px 0px 20px #F99; animation-name: redShadow; animation-duration: 0.75s; }

@keyframes shadow {
    0%      {box-shadow: 0px 0px 5px 1px #36BFFF;}
    100%    {box-shadow: 0px 0px 25px 5px #36BFFF;}
}
@keyframes redShadow {
    0%      {box-shadow: 0px 0px 5px 2px #F38;}
    100%    {box-shadow: 0px 0px 20px 5px #F38;}
}

.roiNext
    { display: block; height: 16px; padding: 12px 50px 12px 0;
      font-size: 16px; line-height: 16px; text-transform: uppercase;
      position: absolute; top: calc(50% - 20px); right: 20px; cursor: pointer; }
.roiNext:hover
    { color: #FFF; }
.roiNext:after
    { content: "o"; font-family: "ss-icons"; font-size: 40px; line-height: 40px; text-transform: none;
      display: block; height: 40px; width: 40px; position: absolute; top: 0px; right: 0px; }
.roiNext:hover:after
    { color: #FFF; }


/* ------- */
/* ------- Analysis and Results Styles ------- */
/* ------- */

.roiResult
    { display: block; width: 80px; height: 80px;
      position: absolute; z-index: 100; }
.roiResult.roiLeads
    { left: 93px; top: 324px; }
.roiResult.roiMoney
    { left: 298px; top: 150px; z-index: 90; }
.roiResult.roiProfit
    { left: 562px; top: 325px; z-index: 80; }


.roiResult:after
    { content: ""; display: block; width: 108px; height: 76px;
      position: absolute; left: 26px; bottom: -32px; z-index: 110;
      background: url('https://www.structurestudios.com/hubfs/00_images_ss2015/roi-calculator/text-leads.png') no-repeat left top; }
.roiResult.roiMoney:after
    { background-image: url('https://www.structurestudios.com/hubfs/00_images_ss2015/roi-calculator/text-profit.png'); }
.roiResult.roiProfit:after
    { background-image: url('https://www.structurestudios.com/hubfs/00_images_ss2015/roi-calculator/text-annual-profit.png'); }
    
.roiBlueBar
    { display: block; width: 80px; height: 65px;
      position: absolute; left: 0; bottom: 0; z-index: 110;
      background: url('https://www.structurestudios.com/hubfs/00_images_ss2015/roi-calculator/analysis-bar.png') no-repeat top left;
      transition: height 0.5s cubic-bezier(0.6, 0, 0.6, 1.5); }

.roiBlueBar:after
    { content: ""; display: block; width: 80px; height: 30px;
      position: absolute; left: 0; bottom: 0; z-index: 111;
      background: url('https://www.structurestudios.com/hubfs/00_images_ss2015/roi-calculator/analysis-bar-bottom.png') no-repeat top left; }

.roiGreenBar
    { display: block; width: 80px; height: 60px; margin-bottom: -60px;
      position: absolute; left: 0; bottom: 100%; z-index: 110; opacity: 0;
      background: url('https://www.structurestudios.com/hubfs/00_images_ss2015/roi-calculator/analysis-bar-green.png') no-repeat top left;
      transition: height 0.5s cubic-bezier(0.6, 0, 0.6, 1.5), opacity 0.2s ease-in-out; }
.roiGreenBar.active
    { opacity: 1; }
.roiGreenBar:after
    { content: ""; display: block; width: 80px; height: 30px;
      position: absolute; left: 0; bottom: 0; z-index: 111;
      background: url('https://www.structurestudios.com/hubfs/00_images_ss2015/roi-calculator/blue-green-divider.png') no-repeat top left; }


.roiData
    { display: block; width: 135px; height: auto; padding: 5px 10px;
      position: absolute; left: 40px; top: 10px; transform: translateY(50%);
      font-size: 12px; line-height: 14px; color: #EFF3F5; text-align: center;
      background: #006EE2; opacity: 0;
      transition: all 0.25s ease-in-out; }
.showData > .roiData
    { left: 90px; opacity: 1; }
.roiData:after 
    { content: ""; display: block; width: 0; height: 0;
      position: absolute; top: 0; left: -8px; z-index: -1;
      border-top: 10px solid #006EE2; border-bottom: 4px solid transparent; 
      border-left: 10px solid transparent; }
.roiData > span
    { display: block; clear: both; width: 100%; padding: 5px 0 0 0;
      font-family: 'Share'; font-size: 25px; line-height: 25px; font-weight: 700; }

.roiGreenBar .roiData
    { top: calc(100% - 37px); transform: translateY(-100%);  width: 140px; color: #375B00; background: #76FF24; }
.roiGreenBar .roiData:after
    { top: auto; bottom: 0;
      border-top: 10px solid transparent; border-bottom: 10px solid #76FF24; 
      border-left: 10px solid transparent; }

.roiProfit .roiGreenBar .roiData
    {  }


.roiCTAContent
    { display: block; width: 370px; height: 400px;
      position: absolute; top: 60px; right: -200px; z-index: 200; 
      text-align: center; opacity: 0;
      transition: all 0.5s ease-in-out; }
.showCTA .roiCTAContent
    { right: 20px; opacity: 1; }

.roiCTAContent p
    { font-size: 18px; margin: 0; padding: 10px 0; line-height: 36px; clear: both; }

.roiCTAContent h2
    { font-size: 40px; line-height: 46px; padding: 10px 0 2px 0; margin: 0 0 10px 0;
      font-family: "Fira Sans"; font-weight: 300; color: #31536e;
      background: rgba(255,255,255,0.6);
      box-shadow: 0px 2px 15px rgba(25,54,78,0.3); }
.roiCTAContent h2 strong
    { display: block; position: relative; left: 10px; padding-top: 10px;
      font-family: 'Share'; font-weight: 700; color: #08F; }
.roiCTAContent h2 strong #onTheTable
    { font-size: 60px; }
.roiSmallStuff
    { font-size: 35px; position: relative; bottom: 16px;  }

.lineTwo
    { /*font-size: 36px;*/ }
.lineTwo > span
    { font-size: 30px; position: relative; bottom: 8px; }
.roiSuccessStory
    { display: block; height: 84px; width: 400px; padding: 10px 20px 10px 92px; box-sizing: border-box;
      position: relative; right: 0px; z-index: 200; margin: 10px 0 0 0;
      background: #FFF; border-radius: 42px 0 0 42px; box-shadow: 0px 2px 15px rgba(25,54,78,0.3); }
.roiSuccessStory:hover
    { right: 10px; }
.roiCTAContent .roiSuccessStory p
    { font-size: 18px; line-height: 22px; text-align: left; padding: 0; margin: 0; color: #31536e; }
.roiCTAContent .roiSuccessStory p em
    { font-size: 12px;  }
.roiSuccessStory:after
    { content: "read more >"; font-size: 12px; color: #08F;
      position: absolute; bottom: 2px; right: 20px;}

.roiSuccessStory img
    { display: block; width: 80px; height: 80px;
      position: absolute; top: 2px; left: 2px;
      border-radius: 50%; }


a.roiCTA, a.roiCTA:visited
    { display: inline-block; width: 70%; height: auto; box-sizing: border-box; padding: 0 20px;
      position: relative; bottom: 0; right: 0; z-index: 200; clear: both; margin: 0 0 0 0; cursor: pointer;
      color: #eff3f5; font-size: 18px; line-height: 48px; text-shadow: 0px 1px 4px #00192d; text-align: center;
      border: solid 1px #eff3f5; border-radius: 5px;
      background: #0088ff; background: linear-gradient( to bottom, rgba(0,213,255,0.9), rgba(0,157,255, 0.9), rgba(0,116,255,0.9) ) repeat;
      background-size: 100% 200%; background-position: 0 100%;
      box-shadow: 0px 2px 5px rgba(0, 25, 45, 0.25);
      transition: top 0.5s ease-in-out, background-position 0.3s ease-in-out; }
a.roiCTA:hover
    { border-color: #FFF; color: #FFF; background-position: 0 0%; }
a.roiCTA:after
    { content: ">"; font-family: 'ss-icons'; font-size: 0.5em; display: inline-block; padding: 0 0 0 8px; vertical-align: top; }



#roiBack, #roiRestart
    { display: inline-block; color: #08F; cursor: pointer; }

#roiBack:hover, #roiRestart:hover
    { color: #36bfff; }

#roiRestart
    { margin-left: 30px; }

#roiBack:before, #roiRestart:before
    { content: "c"; font-family: "ss-icons"; font-size: 25px; margin: 0 10px 0 0; position: relative; top: 5px; }
#roiRestart:before
    { content: "r"; }

/*
.roiBlueBar:hover
    { height: 200px; }
.roiBlueBar:hover .roiGreenBar
    { height: 200px; opacity: 1; }
*/


#roi input[type=number] { -moz-appearance: textfield; }
#roi input[type=number]::-webkit-inner-spin-button,
#roi input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}




#roiEndContent
    { max-height: 0px; height: auto; opacity: 0; overflow: hidden;
      transition: all 0.3s ease-in-out; }
#roiEndContent.active
    { max-height: 3000px; opacity: 1; overflow: visible; }

@media (max-width: 1080px) { 
    
    .roiQuestion p, .roiAnswer p, .roiQuestion p:first-child, .roiAnswer p:first-child
        { padding: 0; margin: 0; }
    
    .roiCTAContent h2
        { text-align: center; margin: 0; padding: 0; }
    
    .roiSuccessStory img
        { margin: 0; }
    
}