gsprenger/sustainabilitychecker

/** APP **/

/** INCOMPATIBLE VIEW **/
#incompatible {
  margin: 30px 15%;

}

/** COMMON **/
html, body { 
  height: 100%;
  width: 100%;
}

body {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
}

body.modal-open {
  overflow: visible;
}

body.inapploading {
  overflow: hidden;
}

//prevent tooltips from going multiline
.tooltip-inner {
    white-space:pre;
    max-width:none;
}

/** COLORS **/
// this part needs tidying as some colors are not used anymore, other badly referenced
// shades of grey
$black: #333;
$darkgrey: #666;
$textgrey: #999;
$grey: #BBB;
$lightgrey: #DDD;
$white: #F2F2F2;
$alphawhite: rgba(252,252,255,0.90);
// colors taken from bootstrap
$darkblue: #3276B1;
$darkblueborder: #285E8E;
$blue: #428BCA;
$blueborder: #357EBD;
$darkgreen: #47A447;
$darkgreenborder: #398439;
$green: #5CB85C;
$greenborder: #4CAE4C;
$darklightblue: #39B3D7;
$darklightblueborder: #269ABC;
$lightblue: #5BC0DE;
$lightblueborder: #46B8DA;
$darkyellow: #ED9C28;
$darkyellowborder: #D58512;
$yellow: #F0AD4E;
$yellowborder: #EEA236;
$darkred: #D2322D;
$darkredborder: #AC2925;
$red: #D9534F;
$redborder: #D43F3A;
// colors in sections
$level1: #17B0CD;
$level2: #17B0CD;
$level3: #17B0CD;
$darklevel1: #007D9A;
$darklevel2: #007D9A;
$darklevel3: #007D9A;
// social colors
$facebookcolor: #3b5998;
$twittercolor: #00aced;
$googlecolor: #dd4b39;
// sections colors
$dem: #F68E51;
$die: #00A78D;
$hou: #7DB6D3;
$ser: #B995C5;
$lan: #BFD74B;
$bm:  #154478;
$agr: #FFDF5E;
$ene: #D9302B;
$check: #17B0CD;

#app {
  position: relative;
}

#app-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding-top: 50px;
  z-index: 1000001;
  text-align: center;
  background-color: #FFF;
}

#app-main {
  position: relative;
}

/** HEADER **/
// modal icons
#modalicons {
  position: absolute;
  top: 7px;
  right: 6px;

  &.affix {
    position: fixed;
    top: 17px;
    z-index: 131;
  }
}

.modalicon {
  cursor: pointer;
  color: #17B0CD;
}

.tilt1left {
  left: -1px;
}

// header navigation
#headernav {
  // small devices
  display: none;
  &.affix {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 130;
    height: 65px;
    width: 100%;
    background-color: rgba(252, 252, 255, 0.9);
    border-bottom: 1px solid #DDD;
  }
}

#headernav-cont {
  position: relative;
  margin: auto;
  width: 690px;
}

// Upper titles + borders
#headernav-cont .titles {
  position: absolute;
  top: 0px;
  text-align: center;
}

#headernav-cont .title {
  float: left;
  font-weight: 500;
  margin-right: 1px;
  border-top: 2px solid #999;
  color: #666;
  line-height: 14px;
}

#headernav-cont .title.levels {
  width: 170px;
  margin: 0 5px 0 5px;
}

#headernav-cont .title.demand {
  margin-left: 10px;
  width: 222px;
}

#headernav-cont .title.supply {
  width: 218px;
}

#headernav-cont .title.check {
  width: 56px;
}

// Lines behind nav icons
#headernav-cont hr {
  position: absolute;
  top: 20px;
  border: 0;
  border-bottom: 1px solid #BBB;
  z-index: -1;
}
    
#headernav-cont hr.hr-sec {
  right: 20px;
  width: 465px;
}

#headernav-cont hr.hr-lvls {
  left: 25px;
  width: 125px;
}

// nav icons
//  - containers
#headernav-cont .navicon-cont {
  float: left;
  list-style-type: none;
  padding-left: 0;
  margin-top: 18px;
}

.navicon-cont.ul-levels {
  margin-right: 10px;
}

.navicon-cont.ul-navigation {
  margin-left: 10px;
}

//  - items
#headernav-cont .ul-levels li, #headernav-cont .ul-navigation li {
  float: left; 
  line-height: 25px;
  text-align: center;
}

//  - links (icons container)
#headernav-cont li .navicon {
  display: block;
  width: 45px;
  height: 45px;
  margin-left: 10px;
  font-size: 17px;
  color: #17B0CD;
  cursor: default;
  &:hover, &:focus, &:visited {
    text-decoration: none;
  }
  &.available.dem {
    color: $dem;
  }
  &.available.die {
    color: $die;
  }
  &.available.hou {
    color: $hou;
  }
  &.available.ser {
    color: $ser;
  }
  &.available.lan {
    color: $lan;
  }
  &.available.bm {
    color: $bm;
  }
  &.available.agr {
    color: $agr;
  }
  &.available.ene {
    color: $ene;
  }
  &.available.check {
    color: $check;
  }
}

#headernav-cont li .navicon.available {
  cursor: pointer;
}

//  - icons
#headernav-cont li .navicon .icon {
  color: #17B0CD;
}

#headernav-cont li .navicon .icon.available {
  color: #FFF;
}

#headernav-cont li .navicon .levelbar {
  font-size: 29px;
}

#headernav-cont li .navicon .fa-square-o {
  font-size: 49px;
}

#headernav-cont li .navicon .whitesquare {
  color: #FFF;
}

#headernav-cont li .navicon .bar1 { bottom: -10px }
#headernav-cont li .navicon .bar2 { bottom: -2px }
#headernav-cont li .navicon .bar3 { bottom: 6px }

/** SECTIONS **/
#intro {
  padding-bottom: 60px;
}

#intro .invisible-margin {
  clear: both;
  margin-bottom: 30px;
}

.section.in-level2, #check.in-level2, .section.in-level3, #check.in-level3 {
  padding-bottom: 70px;
}

.section:nth-child(2n) {
  background-color: #F9F9F9;
}

.section:nth-child(2n+1) {
  // background-color: ;
}

.section {
  width: 100%;
  font-weight: 300;
  clear: both;  
  // small devices 
  padding: 3%;
  min-height: none;
  margin-bottom: 30px;
}

.section h2 {
  &.dem {
    color: $dem;
  }
  &.die {
    color: $die;
  }
  &.hou {
    color: $hou;
  }
  &.ser {
    color: $ser;
  }
  &.lan {
    color: $lan;
  }
  &.bm {
    color: $bm;
  }
  &.agr {
    color: $agr;
  }
  &.ene {
    color: $ene;
  }
}

.section h2 small {
  color: $darkgrey;
}

.section #intro-header {
  height: 90px;
  margin: 10px 0 10px 0;
}

// RADIO CHOICE
.section .choice .radio-row {
  margin-top: 15px;
  width: 100%;
}

.section .choice .radio-row .cell {
  margin-right: 1px;
  padding: 15px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  background-color: transparent;
  // small devices
  width: 100%;
  margin-bottom: 15px;
}  

.section .choice .radio-row .cell small {
  font-weight: 200;
}

.section .choice .radio-row .cell img {
  width: 100%;
  height: auto;
}
      
.section .choice .radio-row .cell:hover img {
  border: 2px solid transparent;
}

.section .choice .radio-row .cell.active img,
.section .choice .radio-row .cell:hover.active img  {
  border: 3px solid #17B0CD;
  &.dem {
    border-color: $dem;
  }
  &.die {
    border-color: $die;
  }
  &.lan {
    border-color: $lan;
  }
  &.bm {
    border-color: $bm;
  }
  &.agr {
    border-color: $agr;
  }
}

  // SLIDER CHOICE
.section .choice .slidergroup-title {
  margin-top: 15px;
  margin-bottom: 15px;
}

.section .choice .slider {
  position: relative; 
  margin-bottom: 25px;
  font-weight: 400;
}

.section .choice .slider .ui-slider-range {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.section .choice .slider .ui-slider-handle {
  z-index: 4;
}

.section .choice .slider.hou .ui-widget-header {
  background: none;
  background-color: $hou;
}

.section .choice .slider.ser .ui-widget-header {
  background: none;
  background-color: $ser;
}

.section .choice .slider.nuc .ui-widget-header, 
.section .choice .slider.ncf .ui-widget-header {
  background: none;
  background-color: #D9534F;
}
    

.section .choice .slider.hyd .ui-widget-header,
.section .choice .slider.win .ui-widget-header,
.section .choice .slider.pho .ui-widget-header,
.section .choice .slider.csp .ui-widget-header,
.section .choice .slider.bio .ui-widget-header {
  background: none;
  background-color: #5CB85C;
}
    

.section .choice .slider .step {
  position: absolute;
  top: 0px;
  border-left: 1px solid $grey;
  z-index: 3;
  line-height: 53px;
  height: 15px;
}

.section .choice .slider .step .name {
  position: absolute;
  top: -7px;
  left: -14px;
  font-size: 9px;
  color: $textgrey;
  width: 30px;
  text-align: center;
}

.section .choice .slider .min-limit, 
.section .choice .slider .max-limit {
  position: absolute;
  top: 0;
  height: 100%;
  z-index: 2;
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 35px 35px;
}

.section .choice .slider .min-limit {
  left: 0;
}

.section .choice .slider .max-limit {
  right: 0;
  background-color: $grey;
}

.row-equalheight {
  overflow: hidden; 
}

.col-equalheight {
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

.sliders-image-main {
  text-align: center;
  border-left: 2px solid #eee;
  padding: 0 0 0 30px;
}

.sliders-image-main img {
  width: 100%;
  height: auto;
  border: 2px solid #17B0CD;
  &.hou {
    border-color: $hou;
  }
  &.ser {
    border-color: $ser;
  }
  &.ene {
    border-color: $ene;
  }
}

.sliders-image-main .desc {
  font-weight: 500;
}

.sliders-image-main .descsub {
  font-weight: 200;
  font-size: 85%;
}

#ene-resulttext {
  margin-bottom: 15px;
  text-align: center;
}

/** CHECK **/
#check {
  width: 100%;
  font-weight: 300;
  // small devices 
  padding: 3% 3% 0 3%;
  &.in-level1 {
    margin-bottom: 30px;
  }
}

.check-result-title {
  text-align: center;
  color: $red;
  &.passed {
    color: $green;
  }
}

.check-result-expl {
  text-align: center;
}

.checkcharts {
  margin: 0;
}

#checkgraph {
  hr.graph-axis {
    margin: 0;
    border-color: $black;
  }
  .row {
    .cell {
      position: relative;
      // small devices
      height: 90px;

      .bar-food, .bar-energy {
        transition: 
          height 1s ease,
          background-color 1s ease;
        height: 0;
        width: 100%;
        position: absolute;
      }

      .bar-upper {
        bottom: 0;
        border-bottom: none;
        border: 1px solid #4CAE4C;
        background-color: #5CB85C;

        .bar-percent {
          top: -18px;
        }
      }

      .bar-lower {
        top: 0;
        border-top: none;
        border: 1px solid #AC2925;
        background-color: #D2322D;

        .bar-percent {
          bottom: 0px;
        }
      }

      .bar-percent {
        position: absolute;
        width: 100%;
        text-align: center;
        color: $black;
        text-shadow: 1px 1px 3px #ddd;
        font-weight: 600;
      }

      .bar-title {
        position: absolute;
        bottom: -25px;
        text-align: center;
        width: 100%;
        font-weight: 500;
      }

      .graph-title {
        font-weight: 400;
        &.upper {
          position: absolute;
          bottom: 0;
        }
        &.lower {
          color: $red;
          font-weight: 500;
        }
      } 
    }
  } 
}

#checkradar .radar-info {
  text-shadow: 1px 1px 1px #EEE;
}

#checkradar .fa-info-circle {
  cursor: pointer;
  text-shadow: none;
}

#checkradar {
  .radar-info {
    position: absolute;
  }

  #radarinfoS1 {
    top: 30px;
    left: 50%;
    margin-left: 50px;
  }

  #radarinfoS2 {
    right: 30px;
    bottom: 50%;
    margin-bottom: 50px;
  }

  #radarinfoS3 {
    right: 30px;
    top: 50%;
    margin-top: 50px;
  }

  #radarinfoS4 {
    bottom: 30px;
    left: 50%;
    margin-left: 50px;
  }

  #radarinfoS5 {
    bottom: 30px;
    right: 50%;
    margin-right: 50px;
  }

  #radarinfoS6 {
    left: 30px;
    top: 50%;
    margin-top: 50px;
  }

  #radarinfoS7 {
    left: 30px;
    bottom: 50%;
    margin-bottom: 50px;
  }

  #radarinfoS8 {
    top: 30px;
    right: 50%;
    margin-right: 50px;
  }

  #radarinfoG1 {
    top: 15%;
    right: 30px;
    font-weight: 600;
  }

  #radarinfoG2 {
    bottom: 15%;
    right: 30px;
    font-weight: 600;
  }

  #radarinfoG3 {
    bottom: 15%;
    left: 30px;
    font-weight: 600;
  }

  #radarinfoG4 {
    top: 15%;
    left: 30px;
    font-weight: 600;
  }
}

#checksudokucont {
  margin-top: 25px;
}

#checksummarycont {
  margin-top: 25px;
}

#checksum-panel {
  border-color: #03A4C3;
  border-width: 2px;
}

#checksum-panel-heading {
  background-color: rgba(102,204,223,0.2);
}

#checksum-panel-body {
  background-color: rgba(102,204,223,0.2);
  border-top: 1px solid #03A4C3;
  border-width: 1px;
}

#checksum-panel a {
  color: #333;
  font-weight: 500;
}

#checksum-panel-body .sum-section {
  margin-bottom: 15px;
}

#checksum-panel-body .sum-typo {
  margin-left: 25px;
}

#checksum-panel-body .typology {
  font-style: italic;
  white-space: nowrap;
}

#checksum-panel-body .country {
  color: #666;
  font-size: 100%
}

#checksum-panel-body .result {
  font-weight: 400;
}

#checksum-panel-body .sum-typo li {
  margin-left: 25px;
}

/** Level 2&3 criteria **/
.criteria-row, .criteria-row > div[class*='col-'] {  
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex:1 1 auto;
}

.criteria-row .panel {
  width: 100%;
}

.btn-row {
  text-align: center;
  clear: both;
  &.needs-padding {
    padding-top: 10px;
  }
  .btn:not(:first-child) {
    margin-left: 25px;
  }
}

.btn {
  display: inline-block;
  font-size: 13px;
  padding: 8px 15px 7px;
  border-radius: 3px;
  border: 1px solid #347F93;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 1px 0 rgba(250, 250, 250, 0.2) inset,0 1px 3px rgba(0, 0, 0, 0.28);
  -moz-box-shadow: 0 1px 0 rgba(250,250,250,.2) inset,0 1px 3px rgba(0,0,0,.28);
  box-shadow: 0 1px 0 rgba(250, 250, 250, 0.2) inset,0 1px 3px rgba(0, 0, 0, 0.28);
  background-color: #57ABC0;
  background-image: -moz-linear-gradient(100% 100% 90deg,#3D92A8,#57ABC0);
  background-image: -webkit-gradient(linear,0% 0%,0% 100%,from(#57ABC0),to(#3D92A8));
  -pie-background: linear-gradient(#57ABC0,#3D92A8 100%);
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
}

.btn:hover {
  border-color: #0E7486;
  background-color: #128FA6;
  background-image: -moz-linear-gradient(100% 100% 90deg,#128fa6,#17b0cd);
  background-image: -webkit-gradient(linear,0% 0%,0% 100%,from(#17B0CD),to(#128FA6));
  -pie-background: linear-gradient(#17b0cd,#128fa6 100%);
  color: #FFF;
}

.btn:focus, .btn:active {
  border: 1px solid #555;
  background-color: #57ABC0;
}

.btn-primary {
  color: #FFF;
}

.btn-again {
  background-color: #F39245;
  background-image: -moz-linear-gradient(100% 100% 90deg,#D9782B,#F39245);
  background-image: -webkit-gradient(linear,0% 0%,0% 100%,from(#F39245),to(#D9782B));
  -pie-background: linear-gradient(#F39245,#D9782B 100%);
  border: 1px solid #A85412;
  color: #FFF;
}

.btn-again:hover {
  border-color: #0E7486;
  background-color: #128FA6;
  background-image: -moz-linear-gradient(100% 100% 90deg,#DA6D17,#F38630);
  background-image: -webkit-gradient(linear,0% 0%,0% 100%,from(#F38630),to(#DA6D17));
  -pie-background: linear-gradient(#F38630,#DA6D17 100%);
  color: #FFF;
}

.btn-again:focus, .btn-again:active {
  border: 1px solid #555;
  background-color: #F39245;
  color: #FFF;
}

// Level 3 section
#lvl3-main {
  position: fixed;
  width: 100%;
  height: 50px;
  bottom: 0;
  opacity: 0.7;
  background-color: white;
  padding: 30px;
  z-index: 100;
  border-top: 1px solid $black;
  transition: 1s height ease;
  overflow-y: none;
  &.sliding {
    opacity: .95;
    overflow-y: none;
  }
  &.out {
    opacity: .95;
    height: 100%;
    overflow-y: auto;
  }
}


#overlay-toggle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  cursor: pointer;
  z-index: 110;
}

#overlay-button {
  position: absolute;
  top: -1px;
  left: 50%;
  width: 40px;
  height: 25px;
  margin-left: -20px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  text-align: center;
  line-height: 0px;
  color: #FFF;
}

#overlay-button .fa {
  line-height: 7px;
  margin-left: -3px;
  font-size: 15px;
}

#overlay-toggle:hover #overlay-button {
  background-color: #86B4CF;
}

#sudoku {
  font-weight: 400;
  table {
    position: relative;
    z-index: 120;
    width: 945px;
    height: 433px;
    margin: auto;
    background-color: #FFF;
    tr {
      border: 1px solid #666;
      td {
        padding: 5px;
        border-right: 1px solid #666;
      }
      #topcell {
        text-align: center;
        font-size: 30px;
        font-weight: 100;
        &.success {
          color: $green;
        }
        &.failure {
          color: $red;
        }
      }
      .cell-number {
        width: 95px;
      }
      .cell-flowfund {
        vertical-align: top;
      }
      .cell-header {
        strong {
          font-weight: 600;
        }
      }
    }
  }
}

#sudoku .fa-info-circle {
  cursor: pointer;
}

#sudoku tr.noborder h3 {
  margin-top: 0;
  text-align: center;
}

#sudoku tr.noborder, #sudoku tr.noborder td {
  border: 0;
  text-align: left;
}

#sudoku .doublebot {
  border-bottom-style: double;
}

#sudoku .n-level {
  position: relative;
}

#sudoku .n-level:after {
  content: "Level n";
  position: absolute;
  top: 0px;
  right: 0px;
  padding: 2px 5px;
  font-size: 9px;
  color: #666;
  font-weight: 600;
  border-left: 1px solid #666;
  border-bottom: 1px solid #666;
  -webkit-border-radius: 0 0 0 4px;
  -moz-border-radius: 0 0 0 4px;
  border-radius: 0 0 0 4px;
}

#sudoku .n-1-level {
  position: relative;
}

#sudoku .n-1-level:after {
  content: "Level n-1";
  position: absolute;
  top: 0px;
  right: 0px;
  padding: 2px 5px;
  font-size: 9px;
  color: #666;
  font-weight: 600;
  border-left: 1px solid #666;
  border-bottom: 1px solid #666;
  -webkit-border-radius: 0 0 0 4px;
  -moz-border-radius: 0 0 0 4px;
  border-radius: 0 0 0 4px;
}

// MODALS
.modal-help .icon-cont {
  border-left: 1px solid #EEE;
}

.modal-help hr {
  margin: 10px 0 10px 0;
}

.modal-help .helptabicon-cont {
  padding: 0;
}

.modal-help .helptabicon-cont a {
  color: #333;
  &:hover {
    color: #333;
    text-decoration: none;
  }
}

.modal-help .helptabicon {
  height: 50px;
  border: 1px solid #999;
  border-radius: 5px;
  padding: 10px;
  margin-left: 10px;
  margin-right: 10px;
  text-align: center;
  cursor: pointer;
  &:hover, &.active{
    background-color: #17B0CD;
    color: #fefefe;
  }
  &.dem:hover, &.dem.active {
    background-color: $dem;
  }
  &.die:hover, &.die.active {
    background-color: $die;
  }
  &.hou:hover, &.hou.active {
    background-color: $hou;
  }
  &.ser:hover, &.ser.active {
    background-color: $ser;
  }
  &.lan:hover, &.lan.active {
    background-color: $lan;
  }
  &.bm:hover, &.bm.active {
    background-color: $bm;
  }
  &.agr:hover, &.agr.active {
    background-color: $agr;
  }
  &.ene:hover, &.ene.active {
    background-color: $ene;
  }
  &.check:hover, &.check.active {
    background-color: $check;
  }
}

.modal-help .help-table {
  display: table;
  width: 100%;
  height: 100%;
}

.modal-help .help-cell {
  display: table-cell;
  vertical-align: middle;
}

.modal-help .helptabicon .fa {
  font-size: 28px;
}

.modal-help .tablevel .helptabicon.active {
  // background-color: #B8D0DE;
}

.modal-help .tabdem .helptabicon.active {
  // background-color: #B8D0DE;
}

.modal-help .tabsup .helptabicon.active {
  // background-color: #B8D0DE;
}

.modal-help .tabcheck .helptabicon.active {
  // background-color: #B8D0DE;
}

#modal-share h1 {
  font-size: 26px;
  margin-top: 0px;
  margin-bottom: 0px;
}

#modal-share h2 {
  font-size: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
}

#modal-share .share-save {
  margin-bottom: 25px;
}

#modal-share #saveinput {
  display: block;
  width: 80%;
  margin: auto;
  text-align: center;
  color: #666;
  font-style: italic;
  background-color: #DDD;
  margin-top: 15px;
}

#modal-share .clearfix {
  margin-bottom: 25px;
}

#modal-share .nopadl {
  padding-left: 1px;
}

#modal-share .nopadr {
  padding-right: 1px;
}

#modal-share .social {
  color: $white;
  border-radius: 5px;
  text-align: center;
  padding: 5px;
}

#modal-share a, #modal-share a:visited {
  color: $white;
  text-decoration: none;
}

#modal-share a:hover {
  color: $lightgrey;
  text-decoration: none;
}

#modal-share .facebook {
  background-color: $facebookcolor
}

#modal-share .twitter {
  background-color: $twittercolor
}

#modal-share .google {
  background-color: $googlecolor
}

#modal-share .email {
  background-color: $black
}

// SCROLLTOP
#scrolltopicon-cont {
  position: fixed;
  bottom: -4px;
  right: 6px;
  display: none;
  font-size: 36px;
  cursor: pointer;
  color: #17B0CD;
}

#scrolltopicon-cont.inlevel2, #scrolltopicon-cont.inlevel3 {
  bottom: 57px;
}

// POPOVER
.popover-content {
  color: #000;
}

/** RESPONSIVE DESIGN **/
@media (min-width: 600px) {
  .section {
    padding: 65px 3% 3% 3%;
  }

  .section .choice .radio-row .cell {
    float: left;
    margin-bottom: 0;
    transition: 0.4s all ease;
    &:hover { 
      transform: scale(1.1);
      -ms-transform: scale(1.1); /* IE 9 */
      -moz-transform: scale(1.1); /* Firefox */
      -webkit-transform: scale(1.1); /* Safari and Chrome */
      -o-transform: scale(1.1); /* Opera */
    }
  }

  .section .choice .radio-row .cell.lg-4 {
    width: 33%;
  }

  #check {
    padding: 65px 3% 0 3%;
  }

  #checkgraph {
    .row {
      .cell {
        height: 150px;
      }
    }
  }
}

@media (min-width: 980px) {
  header, nav, #headernav {
    display: block;
  }
  .section {
    min-height: 100%;
    margin: 0;
    padding: 65px 15% 10px 15%;
  }

  #check {
    min-height: 100%;
    margin: 0;
    padding: 65px 15% 0 15%;
  }
}