.navArrows {
  width: 5%;
  height: 85px;
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 1000;
  -webkit-transform: scale(0.5) translateX(50%);
  -moz-transform: scale(0.5) translateX(50%);
  -ms-transform: scale(0.5) translateX(50%);
  -o-transform: scale(0.5) translateX(50%);
  transform: scale(0.5) translateX(50%);
  transition: All 100ms ease-in-out;
  -webkit-transition: All 100ms ease-in-out;
  -moz-transition: All 100ms ease-in-out;
  -o-transition: All 100ms ease-in-out;
  display: none; }
  .navArrows .innerWrapper {
    margin: auto;
    margin-left: 25%;
    z-index: 1001;
    width: 75%;
    position: absolute;
    top: 0;
    bottom: 0;
    height: inherit; }
    .navArrows .innerWrapper .up {
      width: 48px;
      height: 48px;
      position: relative;
      cursor: pointer; }
      .navArrows .innerWrapper .up div:first-child {
        width: 65%;
        height: 20%;
        background-color: black;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        transform: rotate(45deg);
        position: absolute;
        margin: auto;
        left: 35%;
        right: 0;
        bottom: 20%;
        top: 0;
        border-radius: 2px; }
      .navArrows .innerWrapper .up div:last-child {
        width: 65%;
        height: 20%;
        background-color: black;
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        transform: rotate(-45deg);
        position: absolute;
        margin: auto;
        left: 0;
        right: 35%;
        bottom: 20%;
        top: 0;
        border-radius: 2px; }
      .navArrows .innerWrapper .up:hover div:first-child, .navArrows .innerWrapper .up:hover div:last-child {
        background-color: #ffffff; }
    .navArrows .innerWrapper .down {
      width: 48px;
      height: 48px;
      position: relative;
      cursor: pointer; }
      .navArrows .innerWrapper .down div:first-child {
        width: 65%;
        height: 20%;
        background-color: black;
        -webkit-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
        -o-transform: rotate(135deg);
        -moz-transform: rotate(135deg);
        transform: rotate(135deg);
        position: absolute;
        margin: auto;
        left: 35%;
        right: 0;
        bottom: 20%;
        top: 0;
        border-radius: 2px; }
      .navArrows .innerWrapper .down div:last-child {
        width: 65%;
        height: 20%;
        background-color: black;
        -webkit-transform: rotate(-135deg);
        -ms-transform: rotate(-135deg);
        -o-transform: rotate(-135deg);
        -moz-transform: rotate(-135deg);
        transform: rotate(-135deg);
        position: absolute;
        margin: auto;
        left: 0;
        right: 35%;
        bottom: 20%;
        top: 0;
        border-radius: 2px; }
      .navArrows .innerWrapper .down:hover div:first-child, .navArrows .innerWrapper .down:hover div:last-child {
        background-color: #ffffff; }
  .navArrows .navArrowsBackground {
    width: 100%;
    height: 100%;
    background-color: #808080;
    opacity: 0.4;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    margin-left: 0%;
    border-radius: 2px; }

@media screen and (max-width: 1024px) {
  .navArrows {
    display: none !important; } }
.navArrowsShow {
  display: block; }

.languageDropdown {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 11; }

.cd-dropdown, .cd-select {
  -webkit-transform: scale(0.65);
  -o-transform: scale(0.65);
  -ms-transform: scale(0.65);
  -moz-transform: scale(0.65);
  transform: scale(0.65);
  backface-visibility: hidden;
  margin-top: -2% !important;
  margin-right: -16% !important;
  float: right;
  z-index: 20;
  filter: none;
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -ms-filter: blur(0px);
  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='0'); }

@media screen and (min-width: 1200px) and (max-width: 1400px) {
  .cd-dropdown, .cd-select {
    -webkit-transform: scale(0.5);
    -o-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -moz-transform: scale(0.5);
    transform: scale(0.5);
    margin-top: -3.5% !important;
    margin-right: -23% !important; } }
@media screen and (max-width: 768px) {
  .cd-dropdown, .cd-select {
    margin-right: -20% !important;
    margin-top: -3.5% !important;
    width: 220px !important;
    -webkit-transform: scale(0.5);
    -o-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -moz-transform: scale(0.5);
    transform: scale(0.5); } }
@media screen and (max-width: 768px) and (orientation: landscape) {
  .cd-dropdown, .cd-select {
    margin-right: -20% !important;
    margin-top: -5.5% !important;
    width: 220px !important;
    -webkit-transform: scale(0.5);
    -o-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -moz-transform: scale(0.5);
    transform: scale(0.5); } }
.icon-de {
  font-size: 23px; }

.icon-de:before {
  background-image: url("../img/flags/Germany.png") !important;
  content: "aa";
  color: transparent;
  background-repeat: no-repeat !important;
  background-position-y: -4px; }

.icon-ca {
  font-size: 23px; }

.icon-ca:before {
  background-image: url("../img/flags/Catalonia.png") !important;
  content: "aa";
  color: transparent;
  background-repeat: no-repeat !important;
  background-position-y: -4px; }

.icon-en {
  font-size: 23px; }

.icon-en:before {
  background-image: url("../img/flags/United-Kingdom.png") !important;
  content: "aa";
  color: transparent;
  background-repeat: no-repeat !important;
  background-position-y: -4px; }

.icon-es {
  font-size: 23px; }

.icon-es:before {
  background-image: url("../img/flags/Spain.png") !important;
  content: "aa";
  color: transparent;
  background-repeat: no-repeat !important;
  background-position-y: -4px; }

.cd-active.cd-dropdown > span {
  color: #999 !important; }

.cd-active.cd-dropdown > span:hover, .cd-active.cd-dropdown ul li span:hover {
  background-color: #689d1c !important;
  color: #f5f5f5 !important; }

.cbp-spmenu h3 {
  background: #689d1c !important;
  color: white !important; }

.cbp-spmenu {
  background: #9BD54A !important; }

.cbp-spmenu-vertical a {
  border-bottom: 1px solid #689d1c !important; }

.cbp-spmenu a:hover {
  background: #689d1c !important; }

.navigationBar {
  width: 100%;
  position: fixed;
  display: block;
  z-index: 100;
  align-self: center;
  color: white;
  height: 55px; }
  .navigationBar .logo {
    position: absolute;
    width: 2em;
    height: 100%;
    top: 0;
    z-index: 2;
    left: 1%; }
    .navigationBar .logo a {
      width: inherit;
      height: inherit; }
      .navigationBar .logo a img {
        width: 100%;
        position: absolute;
        margin: auto;
        top: 0;
        bottom: 0; }
  @media screen and (min-width: 1200px) and (max-width: 1700px) {
    .navigationBar .logo {
      width: 2.25em; } }
  @media screen and (min-width: 768px) and (max-width: 1200px) {
    .navigationBar .logo {
      width: 2.5em; } }
  .navigationBar .navigationBarBackground {
    width: 100%;
    height: 100%;
    background-color: #000000;
    position: relative;
    z-index: 1; }
  .navigationBar .navigationBarLinkContainer {
    position: absolute;
    left: 3.5em;
    max-width: 40%;
    min-width: 20%;
    z-index: 2;
    height: 100%; }
    .navigationBar .navigationBarLinkContainer .navigationLinks {
      display: inline-block;
      margin-left: 10px;
      font-size: 130%;
      color: #ffffff;
      vertical-align: middle;
      line-height: 55px;
      font-weight: bold;
      border-radius: 5px;
      -moz-transition: background-color .2s ease-in-out;
      -webkit-transition: background-color .2s ease-in-out;
      -o-transition: background-color .2s ease-in-out;
      -ms-transition: background-color .2s ease-in-out;
      transition: background-color .2s ease-in-out; }
    .navigationBar .navigationBarLinkContainer .navigationLinksBlack {
      color: #000000; }
    @media screen and (min-width: 1200px) and (max-width: 1400px) {
      .navigationBar .navigationBarLinkContainer .navigationLinks {
        line-height: 45px; } }
    @media screen and (max-width: 768px) {
      .navigationBar .navigationBarLinkContainer .navigationLinks {
        line-height: 20px;
        font-size: 80%; } }
    @media screen and (max-width: 768px) and (orientation: landscape) {
      .navigationBar .navigationBarLinkContainer .navigationLinks {
        line-height: 40px;
        font-size: 90%; } }
  @media screen and (min-width: 1200px) and (max-width: 1400px) {
    .navigationBar .navigationBarLinkContainer {
      left: 4.5em; } }
  @media screen and (min-width: 767px) and (max-width: 1000px) {
    .navigationBar .navigationBarLinkContainer {
      max-width: 55%; } }
  @media screen and (max-width: 768px) {
    .navigationBar .navigationBarLinkContainer {
      max-width: 55%;
      left: 2em; } }
  @media screen and (max-width: 768px) and (orientation: landscape) {
    .navigationBar .navigationBarLinkContainer {
      max-width: 70%; } }
  .navigationBar .highlightLink {
    color: #689d1c !important; }
  .navigationBar #showRightPush {
    width: 30px;
    height: 35px;
    background-color: transparent;
    border: 0;
    background-size: 105%;
    background-repeat: no-repeat;
    background-image: url("../img/menu.png");
    float: right;
    margin-right: 2%;
    margin-top: .5%;
    z-index: 100; }

@media screen and (min-width: 1200px) and (max-width: 1400px) {
  .navigationBar {
    height: 45px; } }
@media screen and (max-width: 768px) and (orientation: landscape) {
  .navigationBar {
    height: 40px; } }
#sectionOne {
  height: 33.4%;
  z-index: 3;
  width: 100%; }
  #sectionOne .background {
    background-image: url("../img/Schnecken_Tempo.jpg");
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    background-size: 200%;
    background-repeat: no-repeat;
    background-attachment: scroll;
    -webkit-transform: translate3d(0, 0, 0); }
  @media screen and (max-width: 768px) {
    #sectionOne .background {
      background-size: 300%; } }
  #sectionOne h1, #sectionOne h2 {
    color: #f5f5f5;
    position: relative;
    text-align: center;
    width: 100%;
    z-index: 0;
    font-family: 'Selena';
    white-space: nowrap;
    font-weight: bold; }
  #sectionOne h1 {
    position: absolute;
    margin: auto;
    top: 40%;
    font-size: 500%; }
  #sectionOne h2 {
    position: absolute;
    margin: auto;
    top: 51%;
    font-size: 300%; }
  #sectionOne a {
    color: #ffffff;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 27%;
    bottom: 0;
    border-color: white;
    width: 80px;
    height: 80px;
    padding: 0;
    background-image: url("../img/dark-arrow.svg");
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
    border: 2px solid;
    border-radius: 50%;
    -moz-transition: background-color .2s ease-in-out;
    -webkit-transition: background-color .2s ease-in-out;
    -o-transition: background-color .2s ease-in-out;
    -ms-transition: background-color .2s ease-in-out;
    transition: background-color .2s ease-in-out; }
  #sectionOne a:hover {
    background-color: rgba(128, 128, 128, 0.4); }
  @media screen and (min-width: 1400px) and (max-width: 1600px) {
    #sectionOne a {
      top: 40%; } }
  @media screen and (min-width: 1200px) and (max-width: 1400px) {
    #sectionOne a {
      top: 50%; } }
  @media screen and (min-width: 1000px) and (max-width: 1200px) {
    #sectionOne a {
      top: 60%; }
    #sectionOne h1 {
      top: 30%; } }
  @media screen and (max-width: 768px) {
    #sectionOne h1 {
      top: 30%;
      font-size: 400%; }
    #sectionOne h2 {
      top: 45%;
      font-size: 160%; }
    #sectionOne a {
      top: 47%; } }
  @media screen and (max-width: 768px) and (orientation: landscape) {
    #sectionOne h1 {
      top: 20%;
      font-size: 400%; }
    #sectionOne a {
      top: 38%; } }

#sectionOneAndHalf, #sectionTwoAndHalf, #sectionThreeAndHalf, .notASection {
  background-color: #ffffff;
  text-align: center; }
  #sectionOneAndHalf h1, #sectionTwoAndHalf h1, #sectionThreeAndHalf h1, .notASection h1 {
    font-size: 400%;
    padding-top: 2%;
    margin-top: 0;
    font-family: 'NEW ACADEMY'; }
  #sectionOneAndHalf p, #sectionTwoAndHalf p, #sectionThreeAndHalf p, .notASection p {
    font-size: 150%;
    text-align: left;
    padding-left: 3%;
    padding-right: 3%;
    line-height: 1.3em;
    color: #717578;
    margin: 0;
    padding-bottom: 3%; }
  @media screen and (min-width: 1000px) and (max-width: 1200px) {
    #sectionOneAndHalf h1, #sectionTwoAndHalf h1, #sectionThreeAndHalf h1, .notASection h1 {
      font-size: 300%; }
    #sectionOneAndHalf p, #sectionTwoAndHalf p, #sectionThreeAndHalf p, .notASection p {
      font-size: 110%; } }
  @media screen and (min-width: 768px) and (max-width: 1000px) {
    #sectionOneAndHalf h1, #sectionTwoAndHalf h1, #sectionThreeAndHalf h1, .notASection h1 {
      font-size: 250%; }
    #sectionOneAndHalf p, #sectionTwoAndHalf p, #sectionThreeAndHalf p, .notASection p {
      font-size: 110%; } }
  @media screen and (max-width: 768px) {
    #sectionOneAndHalf h1, #sectionTwoAndHalf h1, #sectionThreeAndHalf h1, .notASection h1 {
      font-size: 150%; }
    #sectionOneAndHalf p, #sectionTwoAndHalf p, #sectionThreeAndHalf p, .notASection p {
      font-size: 90%; } }

.notASection {
  background-color: transparent; }

.centerText {
  text-align: center !important;
  padding-left: 1% !important; }

@media screen and (max-width: 768px) {
  .helpText {
    font-size: 80%; } }
calculator > div {
  margin-top: 2%; }
calculator input, calculator select {
  width: 85%;
  margin: 1%; }
calculator .closeBtn {
  color: white !important;
  background: none;
  border: 0px solid;
  position: relative;
  font-size: 1.1em; }
calculator .closeBtn:hover {
  color: black !important; }
calculator tr > td:first-child {
  padding-left: 0.5%;
  padding-top: 0.5%;
  width: 65%;
  color: white; }
@media screen and (min-width: 1000px) and (max-width: 1400px) {
  calculator tr > td:first-child {
    font-size: 120%; }
  calculator tr > td:last-child {
    font-size: 120%; } }
calculator tr > td:nth-child(2) {
  width: 25%;
  padding-bottom: 0.5%; }
@media screen and (max-width: 768px) {
  calculator tr > td:nth-child(2) {
    width: 40%; } }
calculator tr > td:last-child {
  padding-right: 0.5%;
  padding-top: 0.5%;
  color: white; }
calculator .selDev {
  font-weight: bold; }
calculator .CalcTable {
  width: 90% !important; }
calculator .clacWrapper {
  width: 25%;
  float: left;
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  flex-wrap: wrap;
  position: relative;
  height: 100%; }
  calculator .clacWrapper .clacWrapperChild {
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    width: 85%;
    height: 100%;
    padding-bottom: 3%;
    float: left;
    border-radius: 2px;
    position: relative;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.3), -3px 0px 5px 0px rgba(0, 0, 0, 0.2), 3px 0px 5px 0px rgba(0, 0, 0, 0.2);
    background-color: #d35400; }
    calculator .clacWrapper .clacWrapperChild .mid {
      width: 100%;
      height: 100%;
      margin-top: 3%; }
  @media screen and (min-width: 1400px) and (max-width: 1600px) {
    calculator .clacWrapper .clacWrapperChild {
      font-weight: bolder; } }
  @media screen and (max-width: 768px) {
    calculator .clacWrapper .clacWrapperChild {
      width: 99%; } }
@media screen and (min-width: 1200px) and (max-width: 1400px) {
  calculator .clacWrapper {
    width: 33%; } }
@media screen and (min-width: 769px) and (max-width: 1200px) {
  calculator .clacWrapper {
    width: 50%; } }
@media screen and (max-width: 768px) {
  calculator .clacWrapper {
    width: 100%;
    margin-bottom: 15%; }
  calculator .CalcTable {
    font-size: 80%; } }
@media screen and (max-width: 768px) and (orientation: landscape) {
  calculator .clacWrapper:nth-child(odd) {
    width: 49%;
    margin-bottom: .1%;
    margin-left: .5%; }
  calculator .clacWrapper:nth-child(even) {
    width: 49%;
    margin-bottom: .1%;
    margin-right: .5%; }
  calculator .CalcTable {
    font-size: 70%; } }
calculator .clacWrapperMargin {
  margin-bottom: 4%; }

.addWrapper {
  position: absolute;
  display: inline-block;
  width: 15%;
  height: inherit;
  background-color: transparent;
  margin: 0 auto; }

@media screen and (max-width: 768px) {
  .addWrapper {
    height: 18%;
    bottom: -19.5%;
    left: 0;
    right: 0; } }
@media screen and (max-width: 768px) and (orientation: landscape) {
  .addWrapper {
    display: none; } }
.smalAdd {
  margin: auto !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; }

#sectionTwo {
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  background-image: url("../img/bg.png");
  background-color: #ffffff;
  min-height: 16.6%;
  position: relative;
  z-index: 10;
  padding-left: 2%;
  padding-right: 1%;
  padding-bottom: 5%;
  box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.05), inset 0px 2px 3px 0px rgba(0, 0, 0, 0.1), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.05), inset 0px -2px 3px 0px rgba(0, 0, 0, 0.1); }

@media screen and (max-width: 768px) and (orientation: landscape) {
  #sectionTwo {
    padding-bottom: 8%; } }
.add {
  background-color: #bdc3c7;
  width: 45px;
  height: 45px;
  display: inline-block;
  margin-top: 7.5%;
  cursor: initial;
  border: 0px solid;
  position: absolute;
  margin-left: 2.5%;
  visibility: hidden;
  border-radius: 2px;
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.3); }
  .add div:first-child {
    height: 20%;
    width: 90%;
    background-color: #000000;
    position: absolute;
    top: 40%;
    left: 5%;
    border-radius: 2px; }
  .add div:last-child {
    width: 20%;
    height: 90%;
    background-color: #000000;
    position: absolute;
    top: 5%;
    left: 40%;
    border-radius: 2px; }

@media screen and (min-width: 1400px) and (max-width: 1600px) {
  .add {
    width: 40px;
    height: 40px; } }
#add {
  visibility: visible;
  cursor: pointer;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  opacity: 1; }

#add:hover {
  opacity: 0.9; }

.addNo {
  background-color: transparent;
  margin-top: 35%;
  margin-left: -7.5%; }
  .addNo button {
    width: 3em;
    height: 3em; }

#export {
  background-color: #bdc3c7;
  width: 40px;
  height: 40px;
  border: 0px solid;
  cursor: pointer;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0; }
  #export img {
    width: 90%; }

#calculate {
  background-color: #bdc3c7;
  width: 40px;
  height: 40px;
  display: inline-block;
  border: 0px solid;
  cursor: pointer;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  opacity: 1; }
  #calculate a div:first-child {
    height: 20%;
    width: 90%;
    background-color: #000000;
    position: absolute;
    top: 25%;
    left: 5%; }
  #calculate a div:last-child {
    width: 90%;
    height: 20%;
    background-color: #000000;
    position: absolute;
    top: 60%;
    left: 5%; }

#calculate:hover {
  opacity: 0.9; }

.closeWrapper {
  position: absolute;
  margin: auto;
  right: 2%;
  top: 2%; }

.refreshBtn {
  background-image: url("../img/refresh51hover.png");
  background-repeat: no-repeat;
  width: 120%;
  height: 20px;
  background-size: 100%;
  border: 0px solid;
  background-color: transparent; }

.refreshBtn:hover {
  background-image: url("../img/refresh51.png"); }

.btn-primary {
  background-color: #27ae60 !important;
  min-width: 70%;
  padding-top: 9px !important;
  padding-bottom: 9px !important; }

.btn-primary:hover {
  background-color: #2ecc71 !important;
  border-color: #2ecc71 !important; }

.btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {
  background: #2ecc71 !important;
  border-color: #2ecc71 !important; }

.btn {
  padding: 6px 5px !important;
  border-radius: 0px !important; }

.dropdown-menu li.active > a, .dropdown-menu li.selected > a, .dropdown-menu li.active > a.highlighted, .dropdown-menu li.selected > a.highlighted {
  background-color: #2ecc71 !important; }

.dropdown-menu {
  border-radius: 0px !important; }

.dropdown-menu li:first-child > a {
  border-radius: 0px !important; }

.dropdown-menu li:last-child > a {
  border-radius: 0px !important; }

.dropdown {
  padding-bottom: 2px; }

.caret {
  float: right;
  margin-top: 7px; }

.dropdown-arrow {
  right: 45px !important; }

.btnWrapper {
  position: absolute;
  width: 85%;
  height: 15%;
  left: 0;
  margin: 0 auto;
  z-index: 1000;
  background-color: #ffffff;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  top: 100%;
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.3), -3px 0px 5px 0px rgba(0, 0, 0, 0.2), 3px 0px 5px 0px rgba(0, 0, 0, 0.2);
  line-height: 36px;
  font-size: 100%; }
  .btnWrapper .addBtn {
    visibility: visible;
    cursor: pointer;
    position: absolute;
    opacity: 1;
    color: #ffffff;
    font-weight: bold;
    -moz-transition: background-color .2s ease-in-out;
    -webkit-transition: background-color .2s ease-in-out;
    -o-transition: background-color .2s ease-in-out;
    -ms-transition: background-color .2s ease-in-out;
    transition: background-color .2s ease-in-out;
    background-color: #689d1c;
    border-radius: 25px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    left: 0;
    top: 0;
    bottom: 0;
    right: 67.5%;
    height: 75%;
    margin: auto;
    margin-left: 1%;
    text-align: center; }
  .btnWrapper .addBtn:hover {
    background-color: rgba(128, 193, 37, 0.4); }
  .btnWrapper .calculateBtn {
    visibility: visible;
    cursor: pointer;
    position: absolute;
    opacity: 1;
    color: #ffffff;
    vertical-align: middle;
    font-weight: bold;
    -moz-transition: background-color .2s ease-in-out;
    -webkit-transition: background-color .2s ease-in-out;
    -o-transition: background-color .2s ease-in-out;
    -ms-transition: background-color .2s ease-in-out;
    transition: background-color .2s ease-in-out;
    background-color: #689d1c;
    border-radius: 25px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    margin: auto;
    top: 0;
    bottom: 0;
    left: 34%;
    right: 34%;
    height: 75%;
    text-align: center; }
  .btnWrapper .calculateBtn:hover {
    background-color: rgba(128, 193, 37, 0.4); }
  .btnWrapper .exportBtn {
    visibility: visible;
    cursor: pointer;
    position: absolute;
    opacity: 1;
    color: #ffffff;
    vertical-align: middle;
    font-weight: bold;
    -moz-transition: background-color .2s ease-in-out;
    -webkit-transition: background-color .2s ease-in-out;
    -o-transition: background-color .2s ease-in-out;
    -ms-transition: background-color .2s ease-in-out;
    transition: background-color .2s ease-in-out;
    background-color: #689d1c;
    border-radius: 25px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    margin: auto;
    top: 0;
    bottom: 0;
    right: 0;
    left: 67.5%;
    height: 75%;
    margin-right: 1%;
    text-align: center; }
  .btnWrapper .exportBtn:hover {
    background-color: rgba(128, 193, 37, 0.4); }
  @media screen and (max-width: 1024px) {
    .btnWrapper .exportBtn:hover {
      background-color: #689d1c; }
    .btnWrapper .calculateBtn:hover {
      background-color: #689d1c; }
    .btnWrapper .addBtn:hover {
      background-color: #689d1c; } }

@media screen and (min-width: 1600px) and (max-width: 1700px) {
  .btnWrapper {
    line-height: 33px; } }
@media screen and (min-width: 1400px) and (max-width: 1600px) {
  .btnWrapper {
    line-height: 29px; } }
@media screen and (min-width: 1200px) and (max-width: 1400px) {
  .btnWrapper {
    line-height: 24px; } }
@media screen and (min-width: 1000px) and (max-width: 1200px) {
  .btnWrapper {
    line-height: 31px; } }
@media screen and (min-width: 769px) and (max-width: 1000px) {
  .btnWrapper {
    line-height: 29px; } }
@media screen and (max-width: 768px) {
  .btnWrapper {
    width: 99%;
    line-height: 180%; } }
@media screen and (max-width: 768px) and (orientation: landscape) {
  .btnWrapper {
    line-height: 180%;
    font-size: 90%; } }
.dropdown-menu {
  font-size: 100% !important; }

.btn {
  font-size: 100% !important; }

@media screen and (min-width: 1200px) and (max-width: 1400px) {
  .btn {
    margin-left: -1%; }

  .caret {
    margin-left: 4px !important;
    -webkit-transform: scale(0.8) !important;
    -o-transform: scale(0.8) !important;
    -ms-transform: scale(0.8) !important;
    -moz-transform: scale(0.8) !important;
    transform: scale(0.8) !important;
    margin-top: 4px !important; } }
@media screen and (max-width: 768px) {
  .dropdown-menu {
    min-width: initial !important; } }
@media screen and (max-width: 768px) and (orientation: landscape) {
  .container-fluid {
    padding-right: 0px !important;
    padding-left: 0px !important; }

  .dropdown-menu {
    min-width: initial !important; } }
#calendar {
  width: 62%;
  height: 62%;
  margin: auto;
  font-family: 'Open Sans',sans-serif;
  text-align: center;
  color: #555;
  box-shadow: 0 0 50px -14px rgba(0, 0, 0, 0.8);
  position: absolute;
  top: 15%;
  bottom: 0;
  left: 0;
  right: 0; }

#calendar h1 {
  background: #ee3333;
  padding: 20px !important;
  font-size: 140%;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
  cursor: default;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  white-space: nowrap; }

@media screen and (max-width: 1630px) {
  #calendar h1 {
    font-size: 100%; } }
@media screen and (max-width: 1250px) {
  #calendar h1 {
    font-size: 80%; } }
#calendar table {
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
  border-spacing: 0;
  border-radius: 0 0 5px 5px;
  width: 100%;
  height: 79%; }

#calendar td {
  width: 14.28%;
  height: 20%;
  background: #eee;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
  transition: background .3s;
  -webkit-transition: background .3s;
  font-size: 100%; }

#calendar td:hover:not(.current) {
  background: #ddd; }

#calendar .lastmonth, #calendar .nextmonth, #calendar .nextmonth ~ * {
  background: #fff;
  color: #999; }

#calendar .current {
  background: #ee3333;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }

#calendar .hastask {
  font-weight: 700; }

.month {
  display: none; }

#calendar h1 {
  margin: 0;
  padding: 0;
  height: 22%; }

.year {
  display: inline-block; }

@media screen and (max-width: 768px) and (orientation: landscape) {
  #calendar table {
    height: 60%; }

  #calendar td {
    font-size: 75%; } }
.relativeSavingsWrapper {
  position: absolute;
  margin: auto;
  top: 15%;
  bottom: 0;
  left: 0;
  right: 0;
  width: 65%;
  height: 65%; }

.old {
  height: 100%;
  width: 45%;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: #8e44ad; }

.old:hover {
  background-color: #9b59b6; }

.oldNumber {
  height: 100%;
  width: 45%;
  position: absolute;
  left: 0;
  bottom: 0; }

.new {
  height: 100%;
  width: 45%;
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: #2c3e50; }

.new:hover {
  background-color: #34495e; }

.newNumber {
  height: 100%;
  width: 45%;
  position: absolute;
  right: 0;
  bottom: 0; }

#jan, #feb, #mar, #apr, #mai, #jun, #jul, #aug, #spt, #okt, #nov, #dez {
  display: none; }

#sectionThree {
  background-image: url("../img/bg.png");
  box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.05), inset 0px 2px 3px 0px rgba(0, 0, 0, 0.1), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.05), inset 0px -2px 3px 0px rgba(0, 0, 0, 0.1);
  background-color: #B5B5B5;
  min-height: 16.6%; }

@media screen and (min-width: 769px) and (max-width: 1200px) {
  #sectionThree {
    padding-bottom: 2.5%; } }
@media screen and (max-width: 768px) {
  #sectionThree {
    padding-bottom: 60%; } }
.resultTile {
  background: #A4CC87;
  min-width: 28%;
  text-align: center;
  margin: 2.1%;
  z-index: 1;
  position: relative;
  color: white;
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  margin-left: 2%;
  margin-right: 2%;
  display: inline-block;
  border-radius: 2px;
  -webkit-flex: 1;
  /* Safari 6.1+ */
  -ms-flex: 1;
  /* IE 10 */
  flex: 1;
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.3); }

@media screen and (min-width: 1000px) and (max-width: 1200px) {
  .resultTile {
    min-width: 44.5%; } }
@media screen and (min-width: 769px) and (max-width: 1000px) {
  .resultTile {
    min-width: 38%; } }
@media screen and (max-width: 768px) {
  .resultTile {
    min-width: 94%; } }
@media screen and (max-width: 768px) and (orientation: landscape) {
  .resultTile {
    min-width: 48%;
    margin: .5%; } }
@-moz-document url-prefix() {
  .resultTile {
    margin: 5%; } }
.resultWrapper {
  margin-left: 2%;
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  flex-wrap: wrap;
  -webkit-flex: 1;
  /* Safari 6.1+ */
  -ms-flex: 1;
  /* IE 10 */
  flex: 1;
  display: block; }
  .resultWrapper .assumption {
    padding-bottom: 1%;
    font: 400 16px/40px 'Playfair Display', Georgia, serif;
    margin: 0; }

@-moz-document url-prefix() {
  .resultWrapper {
    margin-left: 3.5%; } }
.resultSpacer {
  height: 3%;
  width: 100%; }

.resultTileLogo {
  margin: auto;
  /* Required */
  position: absolute;
  /* Required */
  top: 0;
  /* Aligns at the bottom */
  left: 0;
  right: 0;
  /* Aligns horizontal center */
  bottom: 0;
  max-height: 100%;
  /* images bigger than 175 px  */
  max-width: 100%;
  /* will be shrinked to size */
  height: 300px; }

.resultTileText {
  margin: auto;
  /* Required */
  position: absolute;
  /* Required */
  top: 5.5%;
  /* Aligns at the top */
  left: 0;
  right: 0;
  /* Aligns horizontal center */
  max-height: 100%;
  /* images bigger than 175 px  */
  max-width: 100%;
  /* will be shrinked to size */
  padding-left: 15px;
  padding-right: 15px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 150%;
  line-height: 40px;
  vertical-align: middle;
  white-space: nowrap; }

@media screen and (max-width: 1160px) {
  .resultTileLogo {
    height: 230px; } }
@media screen and (min-width: 1000px) and (max-width: 1200px) {
  .resultTileLogo {
    height: 230px; } }
@media screen and (min-width: 767px) and (max-width: 1000px) {
  .resultTileText {
    font-size: 110%; } }
@media screen and (max-width: 768px) {
  .resultTileText {
    font-size: 95%; } }
@media screen and (max-width: 768px) and (orientation: landscape) {
  .resultTileText {
    font-size: 75%; } }
#resultTile1 {
  background-color: #F39C12; }

#resultTile2 {
  background-color: #2980B9; }

#resultTile3 {
  background-color: #F1C40F; }

#resultTile4 {
  background-color: #C0392B; }

#resultTile5 {
  background-color: #8E44AD; }

#resultTile6 {
  background-color: #16A085; }

.assumptions {
  position: absolute;
  margin: auto;
  bottom: 4%;
  left: 0;
  right: 0;
  font-size: 90%;
  line-height: 40px;
  vertical-align: middle;
  white-space: nowrap; }

@media screen and (max-width: 768px) {
  .assumptions {
    font-size: 70%; } }
@media screen and (max-width: 768px) and (orientation: landscape) {
  .assumptions {
    font-size: 50%; } }
.carousel-inner > .item {
  height: 100%; }

.carousel-inner > .item > img, .carousel-inner > .item > a > img {
  margin: auto;
  max-height: 100% !important;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute; }

.carousel-indicators li {
  border: 1px solid black !important; }

@media screen and (max-width: 768px) {
  .carousel-indicators li {
    width: 5px !important;
    height: 5px !important; }

  .carousel-indicators .active {
    width: 6px !important;
    height: 6px !important; } }
.carousel-indicators {
  bottom: -60px !important; }

.carousel-inner {
  height: 100%; }

.carousel {
  width: 40%;
  position: absolute !important;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 70%; }

@media screen and (max-width: 1700px) {
  .carousel {
    bottom: 10%; } }
@media screen and (max-width: 1300px) {
  .carousel {
    bottom: 20%; } }
@media screen and (min-width: 1000px) and (max-width: 1200px) {
  .carousel {
    width: 65%; } }
@media screen and (min-width: 769px) and (max-width: 1000px) {
  .carousel {
    width: 80%; } }
@media screen and (max-width: 768px) {
  .carousel {
    width: 75%;
    height: 50%;
    bottom: 30%; } }
@media screen and (max-width: 768px) and (orientation: landscape) {
  .carousel {
    width: 45%; } }
.glyphicon {
  color: #000000; }

.carousel-control.left {
  background-image: none !important;
  left: -15% !important;
  -webkit-transform: scaleX(0.75);
  -moz-transform: scaleX(0.75);
  -o-transform: scaleX(0.75);
  -ms-transform: scaleX(0.75);
  transform: scaleX(0.75); }

.carousel-control.right {
  background-image: none !important;
  right: -15% !important;
  -webkit-transform: scaleX(0.75);
  -o-transform: scaleX(0.75);
  -ms-transform: scaleX(0.75);
  transform: scaleX(0.75);
  -moz-transform: scaleX(0.75); }

.carousel-indicators .active {
  background-color: #000000 !important; }

.fa {
  display: block !important; }

.content {
  background-color: #ffffff;
  width: 100%;
  height: 100%;
  position: relative;
  background-image: url("../img/bg.png");
  box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.05), inset 0px 2px 3px 0px rgba(0, 0, 0, 0.1); }

.social {
  width: 5%;
  position: absolute;
  margin: auto;
  bottom: 3%;
  right: 0; }
  .social .facebook {
    cursor: pointer;
    background: gray;
    border-radius: 50%;
    width: 1.3em;
    height: 1.3em;
    margin-bottom: 15%;
    text-align: center;
    line-height: 1.3em;
    color: white; }
  .social .facebook:hover {
    background: #3b5998; }
  .social .twitter {
    background: gray;
    border-radius: 50%;
    width: 1.3em;
    height: 1.3em;
    margin-bottom: 15%;
    text-align: center;
    line-height: 1.3em;
    color: white;
    cursor: pointer; }
  .social .twitter:hover {
    background: #4099ff; }
  .social .youtube {
    background: gray;
    border-radius: 50%;
    width: 1.3em;
    height: 1.3em;
    margin-bottom: 15%;
    text-align: center;
    line-height: 1.3em;
    color: white;
    cursor: pointer; }
  .social .youtube:hover {
    background: #cc181e; }
  .social .tumblr {
    background: gray;
    border-radius: 50%;
    width: 1.3em;
    height: 1.3em;
    margin-bottom: 15%;
    text-align: center;
    line-height: 1.3em;
    color: white;
    cursor: pointer; }
  .social .tumblr:hover {
    background: #689d1c; }

@media screen and (max-width: 1600px) {
  .social {
    width: 5.5%; } }
.companyLinks {
  position: absolute;
  bottom: 3%;
  right: 0;
  margin-right: 6%;
  padding-bottom: .5%; }
  .companyLinks a {
    color: #000000; }
  .companyLinks a:hover {
    color: green; }

.contactUs {
  position: absolute;
  margin: auto;
  bottom: 3%;
  left: 4%;
  padding-bottom: .5%; }

@media screen and (min-width: 1400px) and (max-width: 1600px) {
  .contactUs {
    font-weight: bolder; }

  .companyLinks {
    font-weight: bolder; } }
@media screen and (max-width: 1400px) {
  .contactUs {
    bottom: 8%; }

  .social {
    width: 6%;
    bottom: 1.5%; } }
@media screen and (min-width: 769px) and (max-width: 1200px) {
  .companyLinks {
    margin-right: initial;
    bottom: initial;
    left: 1.5%;
    padding-bottom: initial; }

  .contactUs {
    left: 1.5%;
    margin-right: 20%;
    padding-bottom: initial; } }
@media screen and (min-width: 1000px) and (max-width: 1200px) {
  .social {
    right: 2%; } }
@media screen and (min-width: 767px) and (max-width: 1000px) {
  .social {
    right: 3%; } }
@media screen and (max-width: 768px) {
  .companyLinks {
    margin-right: initial;
    bottom: initial;
    margin-top: 30%;
    left: 5%; }

  .contactUs {
    left: 5%;
    margin-right: 20%;
    bottom: initial; }

  .social {
    position: absolute;
    margin: auto;
    right: 3%;
    width: 14%; } }
@media screen and (max-width: 768px) and (orientation: landscape) {
  .companyLinks {
    bottom: 1%; }

  .contactUs {
    bottom: 14%; }

  .social {
    right: 1%;
    width: 10.7%; } }
html, body {
  font-family: 'Estrangelo Edessa';
  color: #000000 !important; }

section {
  width: 100%;
  z-index: 1; }

.noNumber {
  border-color: #c0392b;
  background-color: #e74c3c; }

button {
  outline: none; }

.clickable {
  cursor: pointer; }

@media screen and (min-width: 1600px) and (max-width: 1700px) {
  body {
    font-size: 87% !important; } }
@media screen and (min-width: 1400px) and (max-width: 1600px) {
  body {
    font-size: 75% !important; } }
@media screen and (min-width: 1200px) and (max-width: 1400px) {
  body {
    font-size: 65% !important; } }
@media screen and (min-width: 1000px) and (max-width: 1200px) {
  body {
    font-size: 90% !important; } }
@media screen and (min-width: 767px) and (max-width: 1000px) {
  body {
    font-size: 85% !important; } }

/* Modified by WeeDooCare on June 2020 */
.fa2 {
/* display: inline-block; */
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit; 
text-rendering: auto;
padding: 0px 0px 0px 3px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}