/*! normalize.css v3.0.2 | MIT License | git.io/normalize */img,legend{border:0}legend,td,th{padding:0}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre,textarea{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}table{border-collapse:collapse;border-spacing:0}

html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; }

body {
  padding: 5% 48px;
  background: url(bg.jpg) center center;
  background-attachment: fixed;
  overflow-x: hidden;
}
html, body {
	font-size: 20px;
}

.lightgreen {
  color: #41a910;
}

/* images */
.btc__img {
  position: absolute;
  z-index: 2;
}
.btc__img--calculator {
  top: -48px;
  right: -280px;
  pointer-events: none;
}
.btc__img--pencil {
  top: 60px;
  left: -48px;
}
.btc__img--pen {
  top: 96px;
  left: -144px;
}
.btc__img--eraser {
  bottom: -48px;
  left: -24px;
}
input {
	border: 0;
}

/* Classes are listed in procedural order same to the order of HTML elements in index.html document */
.btc__container {
	max-width: 840px;
	margin: auto;
	
	position: relative;
	z-index: 1;
}

.btc__content {
  background-color: #fff;
	background-image: linear-gradient(to bottom, #eee, #fff 96px);
	box-shadow: 3px 3px 3px rgba(0,0,0,.3);
	padding: 10% 8% 16%; }

.btc__container:before,
.btc__container:after {
  content: "";
  position: absolute;
  background: #fff;
  z-index: 1; }

.btc__container:before {
  top: -3px;
  right: -6px;
  bottom: -9px;
  left: 12px;
  transform: rotate(-.5deg);
  box-shadow: 3px 3px 3px rgba(0,0,0, .6); }  

.btc__container:after {
  top: 3px;
  right: -2px;
  bottom: -4px;
  left: 9px;
  transform: rotate(-.5deg);
  box-shadow: 3px 3px 6px rgba(0,0,0,.3);
}

.btc__content {
  position: relative;
  z-index: 2;
  color: #444; }

.btc__calculator {
  border: 4px double #eee;
  margin-bottom: 1.5em; }


.btc__row {
	padding: 1em;
	padding-right: 2em;
	border-top: 1px solid #eee;
}

.btc__row:first-child {
  border-top: none;
}

.btc__row-title, .bd__row-title {
	display: inline-block;
	width: 70%;
	font-size: 14px;
	font-weight: 700;
}

.bd__row-title {
  width: 65%;
}

.bd__row-title, .bd__row-data {
  height: 30px;
}

.btc__chargeout {
	display: inline-block;
	width: 30%;
	padding-right: .5em;
  position: relative;
}

.btc__input-currency {
  position: absolute;
  padding: .5em 0;
  bottom: 1px;
  left: .5em;
}

.btc__chargeout input {
  padding-left: 1.35em;
}

.btc__input-wrapper {
  display: block;
	border-bottom: 1px dotted #444;
	font-size: 16px;
}

.btc__input {
	width: 100%;
	font-weight: bold;
	padding: .5em 0;
}

select.btc__input {
  border: none;
}

.btc__input:focus,
.btc__input:active {
	outline: 0;
	background: #fefeca;
}

.btc__clients {
	display: inline-block;
	width: 15%;
}

.btc__actions {
	font-size: 18px;
	padding-top: 1em;
	padding-bottom: 1em;
	text-align: center;
}
.btc__input-clients {
  padding-right: 12px;
  font-weight: bold;
  font-size: 16px;
}
.btc__actions input {
  border-bottom: 1px dotted #444;
  text-align: center;
  width: 20%;
}

.btc__calculate {
	padding: 1em;
	padding-top: 0.75em;
	padding-bottom: 0.75em;
  background: #41a910;
  color: #fff;
	display: block;
	max-width: 144px;
	margin-left: auto;
	cursor: pointer;
	font-size: 14px;
	font-weight: 700;
}

.btc__results {
  background-color: #ffffee;
  border: 1px solid #e7e79c;
}

.btc__result-row {
	width: 100%;
	margin: auto;
	padding: .75em .75em;
}

.btc__result-row--roi {
  margin-top: .75em;
  padding: 1.5em;
  border-top: 1px solid #e7e79c;
  background: #fefeca;
}

.btc__result-title {
	display: inline-block;
	vertical-align: middle;
	width: 80%;
	text-align: right;
	font-size: 14px;
}

.btc__roi-title {
	text-align: center;
	font-size: 28px;
}

.btc__result-roi {
  font-weight: 700;
}

.btc__result-value {
	display: inline-block;
	vertical-align: middle;
	width: 20%;
	text-align: right;
}

.btc__clients-limit {
  font-weight: 700;
}

h1 {
  font-size: 22px;
  margin: 0 0 12px;
  padding-bottom: 0.5em;
  font-weight: 600;
  font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
}

h4 {
  font-size: 18px;
  margin: 12px 0 7px 0;
  padding-bottom: 0.5em;
  font-weight: 200;
  font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
}

p {
  margin: 0;
  font-size: 15px;
}

.btc__description {
  line-height: 1.5;
  margin-bottom: 1em;
}

.complete-me {
  display: block;
  margin: 24px 60px 0 auto;
}

.btc__find-out-more, .btc__find-out-less {
  text-align: center;
}

.btc__find-out-more span, .btc__find-out-less span {
  padding: 2em 0 0;
  font-weight: 700;
  display: inline-block;
  text-decoration: none;
  color: #41a910;
  cursor: pointer;
}

.btc__find-out-more:after {
  transition: .2s;
  content: "\25bc";
  color: #41a910;
  display: block;
}

.btc__find-out-less:after {
  transition: .2s;
  content: "\25b2";
  color: #41a910;
  display: block;
}
    

.btc__field-label {
  font-size: 10px;
  display: none;
}

.btc__row-top {
  padding: 0 2em 12px 1em;
}

.btc__field-label-top {
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  font-size: 12px;
  margin: 0;
  width: 15%;
}

.btc__field-label-top--first {
  text-align: left;
  margin-left: 70%;
}

.text-constraint {
  padding-right: 2em;
}

.text__align-center {
  text-align: center;
}

.bd__row {
  height: 35px;
}

.bd__row-title, .bd__row-data {
  border: solid 1px;
  padding: 10px;
  height: 100%;
  float: left;
  font-size: 13px;
} 

.bd__row-data {
  display: inline-block;
  width: 30%;
  height: 100%;
  float: left;
  text-align: right;
  font-weight: 600;
}

.bd__result .bd__row-data {
  background-color: #41a910;
}

.bd__row .btc__input-wrapper {
  border-bottom: none;
  font-size: 13px;
}

.bd__row-data .btc__input {
  padding: 0;
}


/*  MEDIA QUERIES  */

@media (max-width: 640px) {
  body {
    padding: 24px 12px 48px; 
  }
}

@media (max-width: 640px) {
  .btc__img {
    display: none;
  }
  .text-constraint {
    padding-right: 0;
  }

  .bd__row .btc__input-wrapper, .bd__row-title, .bd__row-data {
		font-size: 12px;
	}
}

@media (max-width: 640px) {
  .btc__content {
    padding: 8% 6% 12%;
  }
}

@media (max-width: 768px) {
  .btc__row-title {
    font-size: 12px;
    margin-bottom: 12px;
  }
  .btc__chargeout,
  .btc__clients {
    width: 100%;
  }
}


@media (max-width: 768px) {
  h1 {
    font-size: 20px;
    font-weight: 600;
  }
  .btc__result-title,
  .btc__result-value {
    font-size: 16px; 
  }
}

@media (max-width: 540px) {
  .btc__result-title,
  .btc__result-value {
    font-size: 12px; 
    padding-right: 10px;
  }
  .btc__result-value {
    font-size: 16px; 
  }
  .btc__roi-title {
    font-size: 21px;
  }
}
@media (max-width: 880px) {
  .btc__description {
    padding-right:24px;
  }
}

@media (min-width: 680px) and (max-width: 768px) {
  .btc__description {
    padding-right: 48px;
  }
}

@media (max-width: 540px) {
  .btc__description {
    padding-right: 0;
  }
  
  .btc__description p {
    font-size: 12px;
  }
}

@media (max-width: 880px) {
  .complete-me {
    margin-right: -20px;
  }
}

@media (max-width: 768px) {
  .complete-me {
    display: none;
  }
}

@media (max-width: 768px) {

  html, body {
    font-size: 16px;
  }

  .btc__row-title {
    width: 100%;
  }

  .btc__description p {
    font-size: 16px;
  }
}

@media (max-width: 768px) {
  .btc__field-label {
    display: block;
  }
  .btc__row-top,
  .btc__field-label-top {
    display: none;
  }
}

@media (max-width: 640px) {
  .text-constraint {
    padding-right: 0;
  }
  .btc__actions input {
    width: 80%;
  }
}

.small-text {
  font-size: 12px;
  padding-top: 12px;
}

a {
  color: #41a910;
}