/*
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); } }

.icons {
  -webkit-box-align: end;
     -moz-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
     -moz-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }
  .icons,.icons .output_icon {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex; }
  .icons .output_icon {
    -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; }
    .icons .output_icon .icon_buttons {
      background-size: auto;
      background-repeat: no-repeat;
      border-radius: 50%;
      height: 55px;
      -webkit-transition: all .3s ease;
      -o-transition: all .3s ease;
      -moz-transition: all .3s ease;
      transition: all .3s ease;
      width: 55px; }
      .icons .output_icon .icon_buttons.tilt {
        background-image: url(assets/images/tilt.svg); }
      .icons .output_icon .icon_buttons.id {
        background-image: url(assets/images/id.svg); }
      .icons .output_icon .icon_buttons.temp {
        background-image: url(assets/images/temp.svg); }
      .icons .output_icon .icon_buttons.salinity {
        background-image: url(assets/images/salinity.svg); }
      .icons .output_icon .icon_buttons.conductivity {
        background-image: url(assets/images/conductivity.svg); }
      .icons .output_icon .icon_buttons.depth {
        background-image: url(assets/images/depth.svg); }
      .icons .output_icon .icon_buttons.acceleration {
        background-image: url(assets/images/acceleration.svg); }
      .icons .output_icon .icon_buttons.battery {
        background-image: url(assets/images/extra_battery.svg); }
      .icons .output_icon .icon_buttons.activity {
        background-image: url(assets/images/activity.svg); }
    .icons .output_icon:hover .icon_buttons,
    .icons .output_icon.current .icon_buttons {
      background-color: #00c2d9; }
    .icons .output_icon.current span {
      font-weight: bold; }
    .icons .output_icon span {
      color: #fff;
      text-transform: uppercase;
      padding-top: 6px; }
  @media only screen and (min-width: 768px) {
    .icons {
      -webkit-box-pack: center;
         -moz-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center; } }

h3 {
  color: #007D8C; }
  @media only screen and (min-width: 768px) {
    h3 {
      font-size: 1.5em; } }

.output-section {
  background-color: #002134; }
  .output-section h1 {
    color: #00c2d9;
    font-size: 3em;
    font-weight: normal;
    letter-spacing: 2px;
    padding-top: 20px; }
  .output-section h1,.output-section p {
    margin: 0 auto;
    text-align: center;
    width: 100%; }
  .output-section p {
    color: #fff;
    letter-spacing: 1px; }
  .output-section .icons {
    padding: 12px 0 24px; }
    .output-section .icons .output_icon {
      width: 40%;
      padding-bottom: 8px; }
      @media only screen and (min-width: 768px) {
        .output-section .icons .output_icon {
          width: 20%; } }
    @media only screen and (min-width: 1024px) {
      .output-section .icons {
        width: 100%; } }
    @media only screen and (min-width: 1025px) {
      .output-section .icons {
        width: 80%;
        margin: 0 auto; }
        .output-section .icons .output_icon {
          width: 122px; } }
  .content-section .wrapper .content-header,.content-section .wrapper .content-header h1 {
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex; }
  .content-section .wrapper .content-header .header_icon {
    background-repeat: no-repeat;
    background-size: cover;
    height: 76px;
    width: 76px;
    border-radius: 50%;
    margin-right: 24px; }
    .content-section .wrapper .content-header .header_icon.tilt {
      background-image: url(assets/images/tilt_blue.svg); }
    .content-section .wrapper .content-header .header_icon.id {
      background-image: url(assets/images/id_blue.svg); }
    .content-section .wrapper .content-header .header_icon.temperature {
      background-image: url(assets/images/temp_blue.svg); }
    .content-section .wrapper .content-header .header_icon.salinity {
      background-image: url(assets/images/salinity_blue.svg); }
    .content-section .wrapper .content-header .header_icon.conductivity {
      background-image: url(assets/images/conductivity_blue.svg); }
    .content-section .wrapper .content-header .header_icon.depth {
      background-image: url(assets/images/depth_blue.svg); }
    .content-section .wrapper .content-header .header_icon.acceleration {
      background-image: url(assets/images/acceleration_blue.svg); }
    .content-section .wrapper .content-header .header_icon.battery {
      background-image: url(assets/images/extra_battery_blue.svg); }
    .content-section .wrapper .content-header .header_icon.activity {
      background-image: url(assets/images/activity_blue.svg); }

.content-section .wrapper .sidebar .sensor_combinations .icons {
  -webkit-box-pack: start;
     -moz-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start; }
  .content-section .wrapper .sidebar .sensor_combinations .icons .output_icon {
    width: 50%; }
    .content-section .wrapper .sidebar .sensor_combinations .icons .output_icon span {
      color: #007d8c; }
    @media only screen and (min-width: 768px) {
      .content-section .wrapper .sidebar .sensor_combinations .icons .output_icon {
        width: 25%; }
        .content-section .wrapper .sidebar .sensor_combinations .icons .output_icon .icon_buttons {
          background-size: auto;
          background-repeat: no-repeat;
          border-radius: 50%;
          height: 55px;
          width: 55px; }
          .content-section .wrapper .sidebar .sensor_combinations .icons .output_icon .icon_buttons.tilt {
            background-image: url(assets/images/tilt_blue.svg); }
          .content-section .wrapper .sidebar .sensor_combinations .icons .output_icon .icon_buttons.id {
            background-image: url(assets/images/id_blue.svg); }
          .content-section .wrapper .sidebar .sensor_combinations .icons .output_icon .icon_buttons.temp {
            background-image: url(assets/images/temp_blue.svg); }
          .content-section .wrapper .sidebar .sensor_combinations .icons .output_icon .icon_buttons.salinity {
            background-image: url(assets/images/salinity_blue.svg); }
          .content-section .wrapper .sidebar .sensor_combinations .icons .output_icon .icon_buttons.conductivity {
            background-image: url(assets/images/conductivity_blue.svg); }
          .content-section .wrapper .sidebar .sensor_combinations .icons .output_icon .icon_buttons.depth {
            background-image: url(assets/images/depth_blue.svg); }
          .content-section .wrapper .sidebar .sensor_combinations .icons .output_icon .icon_buttons.acceleration {
            background-image: url(assets/images/acceleration_blue.svg); }
          .content-section .wrapper .sidebar .sensor_combinations .icons .output_icon .icon_buttons.battery {
            background-image: url(assets/images/battery_blue.svg); }
          .content-section .wrapper .sidebar .sensor_combinations .icons .output_icon .icon_buttons.activity {
            background-image: url(assets/images/activity_blue.svg); } }
    .content-section .wrapper .sidebar .sensor_combinations .icons .output_icon:hover .icon_buttons {
      background-color: #fff; }

.content-section .wrapper .sidebar .sizes .size_icons {
  -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; }
  .content-section .wrapper .sidebar .sizes .size_icons .size_icon {
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 50%; }
    .content-section .wrapper .sidebar .sizes .size_icons .size_icon span {
      color: #007D8C; }
    .content-section .wrapper .sidebar .sizes .size_icons .size_icon .icon-diameter {
      background-image: url(assets/images/arrow_dia.svg);
      background-repeat: no-repeat;
      background-position: center;
      background-size: 65%;
      border: 2px solid #00c2d9;
      border-radius: 100px;
      -webkit-transition: all .2s ease;
      -o-transition: all .2s ease;
      -moz-transition: all .2s ease;
      transition: all .2s ease; }
      .content-section .wrapper .sidebar .sizes .size_icons .size_icon .icon-diameter[class*="diam-7"] {
        height: 30px;
        width: 30px; }
      .content-section .wrapper .sidebar .sizes .size_icons .size_icon .icon-diameter.diam-9 {
        height: 45px;
        width: 45px; }
      .content-section .wrapper .sidebar .sizes .size_icons .size_icon .icon-diameter.diam-13 {
        height: 60px;
        width: 60px; }
      .content-section .wrapper .sidebar .sizes .size_icons .size_icon .icon-diameter.diam-16 {
        height: 70px;
        width: 70px; }
    .content-section .wrapper .sidebar .sizes .size_icons .size_icon:hover .icon-diameter {
      background-color: #fff; }
    @media only screen and (min-width: 768px) {
      .content-section .wrapper .sidebar .sizes .size_icons .size_icon {
        width: 25%; }
        .content-section .wrapper .sidebar .sizes .size_icons .size_icon .icon-diameter[class*="diam-7"] {
          height: 40px;
          width: 40px; }
        .content-section .wrapper .sidebar .sizes .size_icons .size_icon .icon-diameter.diam-9 {
          height: 50px;
          width: 50px; }
        .content-section .wrapper .sidebar .sizes .size_icons .size_icon .icon-diameter.diam-13 {
          height: 65px;
          width: 65px; }
        .content-section .wrapper .sidebar .sizes .size_icons .size_icon .icon-diameter.diam-16 {
          height: 80px;
          width: 80px; } }

.content-section .wrapper .tag_section {
  margin-top: 42px;
  border-top: 1px solid #00c2d9;
  padding-top: 26px; }
  .content-section .wrapper .tag_section h2 {
    width: 95%;
    margin: 0 auto;
    text-align: center;
    padding-bottom: 16px;
    color: #7C8281; }
  .content-section .wrapper .tag_section .output_tag_button {
    background-color: #00c2d9;
    border-radius: 25px;
    color: #fff;
    display: block;
    letter-spacing: 1px;
    margin: 0 auto;
    padding: 16px 38px;
    text-align: center;
    text-transform: uppercase;
    -webkit-transition: .6s ease;
    -o-transition: .6s ease;
    -moz-transition: .6s ease;
    transition: .6s ease;
    width: 85%; }
    .content-section .wrapper .tag_section .output_tag_button:hover {
      opacity: .6; }
  @media only screen and (min-width: 768px) {
    .content-section .wrapper .tag_section {
      width: 100%; }
      .content-section .wrapper .tag_section h2 {
        width: 45%;
        font-size: 1.3em; }
      .content-section .wrapper .tag_section .output_tag_button {
        width: 40%;
        font-size: 1.5em;
        letter-spacing: 2px; } }

@media only screen and (min-width: 1025px) {
  .content-section .wrapper {
    width: 80%; } }