/*
Theme Name: thelma
Author: Ole-Martin, Headspin Productions
Author URI: http://headspin.no/
Description: Thelma Biotel nettside
Version: 1.0.0
Text Domain: thelma
*/

:root {
  /* style | weight | size/line-height | family */
  font: normal 400 16px/1.5 "Myriad Pro", Helvetica, Arial, sans-serif;
  font: normal 400 1rem/1.5 "Myriad Pro", Helvetica, Arial, sans-serif;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  -moz-osx-font-smoothing: grayscale;
  -o-font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  line-height: 1.5;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  overflow-y: auto;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
          text-size-adjust: 100%; }

@-webkit-keyframes spinner {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0); }
  40% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8); } }

@-moz-keyframes spinner {
  0%, 80%, 100% {
    -moz-transform: scale(0);
         transform: scale(0); }
  40% {
    -moz-transform: scale(0.8);
         transform: scale(0.8); } }

@keyframes spinner {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
       -moz-transform: scale(0);
            transform: scale(0); }
  40% {
    -webkit-transform: scale(0.8);
       -moz-transform: scale(0.8);
            transform: scale(0.8); } }

/**
 * Title Banner
 */
.section {
  width: 100%; }
  .section .wrapper {
    width: 100%;
    margin: 0 auto; }
  .section.content {
    margin: 40px 0; }
    @media only screen and (min-width: 768px) {
      .section.content {
        margin: 80px 0; } }
    .section.content .btn.btn--cta {
      margin-bottom: 40px; }

.banner-section {
  background-color: #002134;
  width: 100%; }
  .banner-section .wrapper {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: column;
       -moz-box-pack: column;
        -ms-flex-pack: column;
            justify-content: column;
    width: 100%; }
    .banner-section .wrapper h1 {
      color: #00c2d9;
      font-size: 2em;
      font-weight: normal;
      letter-spacing: 2px;
      text-align: center;
      padding-top: 20px;
      width: 100%; }
    .banner-section .wrapper p {
      color: #ffffff;
      letter-spacing: 1px;
      margin: 0 auto;
      text-align: center;
      width: 100%; }
    .banner-section .wrapper .size-icons {
      -webkit-box-align: end;
         -moz-box-align: end;
          -ms-flex-align: end;
              align-items: flex-end;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      margin: 0 auto;
      -webkit-box-pack: justify;
         -moz-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      padding: 12px 18px 24px;
      width: 80%; }
      .banner-section .wrapper .size-icons,.banner-section .wrapper .size-icons a {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: flex; }
      .banner-section .wrapper .size-icons a {
        -webkit-box-align: center;
           -moz-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        color: #00c2d9;
        cursor: pointer;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
           -moz-box-orient: vertical;
           -moz-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        padding-top: 16px;
        text-align: center; }
        .banner-section .wrapper .size-icons a .icon-diameter {
          background-image: url(assets/images/arrow_dia.svg);
          background-repeat: no-repeat;
          background-position: center;
          background-size: 65%;
          border: 1px solid #00c2d9;
          border-radius: 100px;
          height: 56px;
          -webkit-transition: all .1s ease;
          -o-transition: all .1s ease;
          -moz-transition: all .1s ease;
          transition: all .1s ease;
          width: 56px; }
          .banner-section .wrapper .size-icons a .icon-diameter[class*="diam-7"] {
            height: 20px;
            width: 20px; }
          .banner-section .wrapper .size-icons a .icon-diameter[class*="diam-9"] {
            height: 30px;
            width: 30px; }
          .banner-section .wrapper .size-icons a .icon-diameter[class*="diam-13"] {
            height: 40px;
            width: 40px; }
          .banner-section .wrapper .size-icons a .icon-diameter[class*="diam-16"] {
            height: 50px;
            width: 50px; }
        .banner-section .wrapper .size-icons a:hover .icon-diameter {
          border: 4px solid #00c2d9; }
        .banner-section .wrapper .size-icons a.active {
          color: #fff; }
          .banner-section .wrapper .size-icons a.active .icon-diameter {
            border: 4px solid #fff; }
        @media only screen and (min-width: 768px) {
          .banner-section .wrapper .size-icons a {
            width: 100px; }
            .banner-section .wrapper .size-icons a .icon-diameter[class*="diam-7"] {
              height: 30px;
              width: 30px; }
            .banner-section .wrapper .size-icons a .icon-diameter[class*="diam-9"] {
              height: 40px;
              width: 40px; }
            .banner-section .wrapper .size-icons a .icon-diameter[class*="diam-13"] {
              height: 50px;
              width: 50px; }
            .banner-section .wrapper .size-icons a .icon-diameter[class*="diam-16"] {
              height: 60px;
              width: 60px; } }
      @media only screen and (min-width: 768px) {
        .banner-section .wrapper .size-icons {
          -webkit-box-pack: center;
             -moz-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center; } }
    @media only screen and (min-width: 1025px) {
      .banner-section .wrapper h1 {
        font-size: 3em; }
      .banner-section .wrapper p {
        width: 50%; } }

/**
 * TITLE
 */
.title_divider {
  width: 100%;
  border-bottom: 1px solid #00c2d9;
  margin-bottom: 10px; }

.title-section .wrapper {
  -webkit-box-align: end;
     -moz-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%; }
  .title-section .wrapper h1 {
    font-size: 2.5em !important;
    color: #00c2d9;
    letter-spacing: 2px;
    font-weight: 900 !important; }
  .title-section .wrapper .transmitter_image img {
    height: 100px;
    padding-top: 5px;
    width: 250px; }
  @media only screen and (min-width: 768px) {
    .title-section .wrapper {
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
      -webkit-box-pack: justify;
         -moz-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      width: 80%; }
      .title-section .wrapper h2 {
        text-align: center;
        width: 50%; }
      .title-section .wrapper img {
        margin-right: 38px;
        width: 50%; } }
  @media only screen and (min-width: 1440px) {
    .title-section .wrapper {
      width: 60%; }
      .title-section .wrapper h2 {
        font-size: 2em; } }

/**
 * CONTENT
 */
.content-section .wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
     -moz-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%; }
  .content-section .wrapper .sidebar .output_options {
    border: 1px solid #007D8C;
    padding: 16px 24px; }
    .content-section .wrapper .sidebar .output_options p {
      font-size: 15px;
      line-height: 1.3;
      margin: 0;
      text-align: left; }
    .content-section .wrapper .sidebar .output_options .icons {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      padding-top: 16px; }
      .content-section .wrapper .sidebar .output_options .icons .output-icon {
        background-position: center top;
        background-repeat: no-repeat;
        background-size: 60px;
        margin: 0 0 32px;
        padding-top: 70px;
        text-align: center;
        -webkit-transition: all .3s ease;
        -o-transition: all .3s ease;
        -moz-transition: all .3s ease;
        transition: all .3s ease;
        white-space: nowrap;
        width: 50%; }
        @media only screen and (min-width: 480px) {
          .content-section .wrapper .sidebar .output_options .icons .output-icon {
            width: 33.333%; } }
        @media only screen and (min-width: 600px) {
          .content-section .wrapper .sidebar .output_options .icons .output-icon {
            width: 25%; } }
        @media only screen and (min-width: 1024px) {
          .content-section .wrapper .sidebar .output_options .icons .output-icon {
            width: 33.333%; } }
        @media only screen and (min-width: 1200px) {
          .content-section .wrapper .sidebar .output_options .icons .output-icon {
            width: 25%; } }
        .content-section .wrapper .sidebar .output_options .icons .output-icon.tilt {
          background-image: url(assets/images/tilt_blue.svg); }
        .content-section .wrapper .sidebar .output_options .icons .output-icon.id {
          background-image: url(assets/images/id_blue.svg); }
        .content-section .wrapper .sidebar .output_options .icons .output-icon.temp {
          background-image: url(assets/images/temp_blue.svg); }
        .content-section .wrapper .sidebar .output_options .icons .output-icon.salinity {
          background-image: url(assets/images/salinity_blue.svg); }
        .content-section .wrapper .sidebar .output_options .icons .output-icon.conductivity {
          background-image: url(assets/images/conductivity_blue.svg); }
        .content-section .wrapper .sidebar .output_options .icons .output-icon.depth {
          background-image: url(assets/images/depth_blue.svg); }
        .content-section .wrapper .sidebar .output_options .icons .output-icon.acceleration {
          background-image: url(assets/images/acceleration_blue.svg); }
        .content-section .wrapper .sidebar .output_options .icons .output-icon.battery {
          background-image: url(assets/images/extra_battery_blue.svg); }
        .content-section .wrapper .sidebar .output_options .icons .output-icon.activity {
          background-image: url(assets/images/activity_blue.svg); }
        .content-section .wrapper .sidebar .output_options .icons .output-icon span {
          color: #007d8c;
          font-size: 1.2em;
          letter-spacing: .7px;
          text-transform: uppercase;
          /* style | weight | size/line-height | family */
          font: normal 400 16px/1.5 "myriad-pro-condensed", Helvetica, Arial, sans-serif;
          font: normal 400 1rem/1.5 "myriad-pro-condensed", Helvetica, Arial, sans-serif; }
        .content-section .wrapper .sidebar .output_options .icons .output-icon:hover span {
          border-bottom: 2px solid #007d8c;
          font-weight: bold; }
    .content-section .wrapper .sidebar .output_options hr {
      border: 1px solid #7C8281;
      opacity: .3;
      margin-left: -8px;
      width: -moz-calc(100% + 16px);
      width: calc(100% + 16px); }
    .content-section .wrapper .sidebar .output_options h4 {
      font-weight: 600;
      margin: 16px 0 0;
      text-transform: uppercase; }