@charset "UTF-8";
/*****************************************************************************/
/*
/* Variables
/*
/*****************************************************************************/
/*****************************************************************************/
/*
/* Layout tweaks
/*
/*****************************************************************************/
/* http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* Global reset */
/* http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix {
  zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

/*****************************************************************************/
/*
/* Extends and mixins
/*
/*****************************************************************************/
.button, .button-secondary, .button-confirm, #footer .button-footer {
  text-align: center;
  color: #3a6dc0;
  border-radius: 6px;
  border-style: solid;
  border-width: 1px;
  border-color: #3399ff;
  max-width: 250px;
  width: 100%;
  margin: 0 auto;
}
.button a, .button-secondary a, .button-confirm a, #footer .button-footer a {
  font-size: 16px;
  font-size: 1rem;
  color: #3a6dc0;
  padding: 10px 20px;
  padding: 0.6rem 1.25rem;
  width: 100%;
  display: block;
}

/*****************************************************************************/
/*
/* flexbox
/*
/*****************************************************************************/
.flexbox-nowrap {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  -ms-flex-wrap: none;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: center;
  justify-content: center;
  width: 100%;
  max-width: 1200px;
  margin: auto;
  text-align: center;
}

.flexbox-nowrap.flex-left-text {
  text-align: left;
}

.flexbox-wrapped {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  width: 100%;
  max-width: 1200px;
  margin: auto;
  text-align: center;
}

.flexbox {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  margin: auto;
  max-width: 1200px;
}

.flexbox > div:nth-child(1) {
  -ms-flex: 0 0 auto;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
}

/*****************************************************************************/
/*
/* Common
/*
/*****************************************************************************/
/* Global Reset */
html,
body {
  height: 100%;
}

html {
  font-size: 18px;
}
@media screen and (min-width: 948px) {
  html {
    font-size: 18px;
  }
}
@media screen and (min-width: 1120px) {
  html {
    font-size: 18px;
  }
}

body {
  margin: 0;
  padding: 0;
  background-color: #003f58;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  font-size: 100%;
}

.article {
  border-top-color: #d1d1d1;
  border-top-style: solid;
  border-top-width: 8px;
  background-color: #fff;
  padding-bottom: 40px;
}

.article-two-column {
  max-width: 1200px;
  margin: 0 auto;
  border-style: none;
}
@media screen and (max-width: 948px) {
  .article-two-column {
    padding-bottom: 8px;
  }
}

.article-two-column h1 {
  font-size: 1.5em;
  margin: 0;
  text-align: left;
}

.article-two-column h4 {
  margin: 0;
  text-align: left;
  color: #000;
}

a {
  color: #3a6dc0;
  text-decoration: none;
}

a:hover {
  color: #3a6dc0;
  text-decoration: underline;
}

a:visited {
  color: #3a6dc0;
  text-decoration: none;
}

p,
li,
table {
  color: #4e4e4e;
  line-height: 26px;
  line-height: 1.5rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
}

h2 {
  font-size: 2rem;
  margin: 1.5rem 0;
  color: #424242;
  font-weight: 600;
}

h3 {
  font-size: 26px;
  margin: 12px 8px;
  font-size: 1.6rem;
  margin: 0.75rem 0rem 0.75rem;
  color: #424242;
  font-weight: 500;
}
h3 a {
  color: #3a6dc0;
}

h4 {
  font-size: 19px;
  margin: 0px 0px 5px;
  font-size: 1.25rem;
  color: #8e8e8e;
  font-weight: 300;
}
h4 a {
  color: #3a6dc0;
}

h4.versions {
  font-size: 18px;
  margin: 12px 8px;
  font-size: 1.1rem;
  margin: 0.75rem 0.5rem;
  color: #253746;
  font-style: normal;
  font-weight: 500;
}

.versions-wrapper > h4.versions {
  margin-top: 10px;
}

p {
  margin-bottom: 10px;
  margin-top: 5px;
}

p.versions {
  font-size: 18px;
  margin: 12px 8px;
  font-size: 1.1rem;
  margin: 0.75rem 0.5rem 1.5rem;
  color: #253746;
  font-style: normal;
  font-weight: 500;
}

.wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

.content-padding, #footer .wrapper {
  padding: 16px 12px;
  padding: 1rem 0.75rem;
}

li {
  display: list-item;
}

ul {
  padding-left: 32px;
  padding-left: 2rem;
}

figure {
  margin: 0;
}

img {
  max-width: 100%;
}

b {
  font-weight: 600;
}

h1.main-header {
  font-size: 3em;
  font-weight: 300;
  margin-bottom: 10px;
  margin-top: 0;
  line-height: 1.1em;
  padding-top: 70px;
  text-align: center;
}

p.small-text {
  font-size: 14px;
  font-size: 0.9rem;
}

ul.editions-list {
  margin-top: 8px;
  margin-top: 0.5rem;
  padding-left: 20px;
  font-size: 14px;
  list-style-type: none;
}

ul.editions-list li {
  color: white;
  line-height: 1.5;
}

ul.small-list {
  margin-top: 8px;
  margin-top: 0.5rem;
  padding-left: 0;
  list-style-type: none;
}
ul.small-list li {
  font-size: 14px;
  font-size: 0.9rem;
  padding-bottom: 8px;
  padding-bottom: 0.5rem;
  line-height: 22px;
  line-height: 1.4rem;
}

h3.small-header {
  font-size: 19px;
  font-size: 1.2rem;
  margin-bottom: 12px;
  margin-bottom: 0.75rem;
  margin-left: 0;
}

hr {
  border: 0;
  height: 1px;
  background: #d1d1d1;
  margin: 40px 0 40px;
  margin: 2.5rem 0 2.5rem;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

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

.bottom-border {
  border-bottom: solid 1px #cccccc;
}

.margin-bottom-20 {
  margin-bottom: 20px;
}

.margin-bottom-40 {
  margin-bottom: 40px;
}

.margin-bottom-80 {
  margin-bottom: 80px;
}

.margin-top-40 {
  margin-top: 40px;
}

.breadcrumbs {
  display: inline-block;
  margin-top: 10px;
  padding-left: 15px;
}

.breadcrumbs li {
  display: inline;
  list-style-type: none;
  padding-right: 5px;
  font-size: 15px;
}

.breadcrumbs li > a {
  color: #3b88d4;
}

.breadcrumbs li.divider {
  color: #3b88d4;
}

.breadcrumbs li.active {
  color: #999999;
}

/*****************************************************************************/
/*
/* Footer
/*
/*****************************************************************************/
#footer {
  position: relative;
  z-index: 1;
  text-align: center;
  background-color: #003f58;
}
#footer .button-confirm,
#footer .button-secondary {
  max-width: 12rem;
  margin-top: 1rem;
}
#footer .button-footer {
  margin-top: 7px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-color: #fff;
  color: #fff;
}
#footer .button-footer:hover {
  border-color: #d4d4d4;
  color: #d4d4d4;
}
#footer .button-footer a {
  text-shadow: none;
}
#footer hr {
  border: 0;
  background-color: #d1d1d1;
  color: #d1d1d1;
  height: 1px;
  margin: 8px 0;
  margin: 0.5rem 0;
  clear: both;
}
@media screen and (min-width: 650px) {
  #footer hr {
    display: none;
  }
}
#footer .wrapper {
  padding-top: 32px;
  padding-bottom: 48px;
  padding-top: 2rem;
  padding-bottom: 3rem;
}
#footer p,
#footer h3 {
  font-size: 18px;
  font-size: 1rem;
  color: #fff;
  margin: 4px 0 0;
  line-height: 25px;
  margin: 0.25rem 0 0;
  line-height: 1.3rem;
}
#footer h3 {
  font-weight: 400;
  margin-top: 16px;
  margin-top: 1rem;
  color: #3399ff;
}
#footer p > a {
  color: #fff;
}
#footer p > a:visited {
  color: #fff;
}
#footer p > a:hover {
  color: #fff;
}

.button a.contact-button-text, .button-secondary a.contact-button-text, .button-confirm a.contact-button-text, #footer .button-footer a.contact-button-text {
  color: #fff;
}
.button a.contact-button-text:hover, .button-secondary a.contact-button-text:hover, .button-confirm a.contact-button-text:hover, #footer .button-footer a.contact-button-text:hover {
  color: #fff;
}
.button a.contact-button-text:visited, .button-secondary a.contact-button-text:visited, .button-confirm a.contact-button-text:visited, #footer .button-footer a.contact-button-text:visited {
  color: #fff;
}

#footer-company,
#footer-contact,
#footer-navigation {
  width: 100%;
  padding-right: 8px;
  padding-right: 0.5rem;
}
#footer-company img,
#footer-contact img,
#footer-navigation img {
  max-width: 172px;
  max-width: 9rem;
}
@media screen and (min-width: 650px) {
  #footer-company,
  #footer-contact,
  #footer-navigation {
    width: 33.33%;
    float: left;
  }
}

.column-70 {
  width: 70%;
}

.column-60 {
  width: 60%;
}

.column-40 {
  width: 40%;
}

.column-30 {
  width: 30%;
}

.padding-40 {
  padding: 40px;
}

/*****************************************************************************/
/*
/* Header (& other full width blocks)
/*
/*****************************************************************************/
#header,
#home-contact,
#evaluate-product,
.product-full-width-block {
  padding: 0;
  margin: 0;
  background-color: #004c97;
  height: 70px;
  position: relative;
  z-index: 3;
}
#header #logo,
#home-contact #logo,
#evaluate-product #logo,
.product-full-width-block #logo {
  background: url("/img/header-logo.png") no-repeat center center;
  background-size: contain;
  float: left;
  height: 70px;
  width: 213px;
  opacity: 1;
}
#header #logo a,
#home-contact #logo a,
#evaluate-product #logo a,
.product-full-width-block #logo a {
  height: 70px;
  width: 213px;
}
#header #logo p,
#home-contact #logo p,
#evaluate-product #logo p,
.product-full-width-block #logo p {
  text-indent: -9999px;
}
@media screen and (-webkit-min-device-pixel-ratio: 1.3), screen and (min--moz-device-pixel-ratio: 1.3), screen and (-o-min-device-pixel-ratio: 2/1), screen and (min-device-pixel-ratio: 1.3), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
  #header #logo,
  #home-contact #logo,
  #evaluate-product #logo,
  .product-full-width-block #logo {
    background-image: url("/img/header-logo@2x.png");
  }
}

#header.home {
  background: url("/img/header_main.jpg") no-repeat center 65% scroll;
}

#header.header-java-sdk {
  background: url("/img/backgrounds/255891.jpg") no-repeat center center scroll;
}

#header.header-java-sdk {
  background: url("/img/backgrounds/255891.jpg") no-repeat center center scroll;
}

#header.header-forge {
  background: url("/img/header-product-client-pro_beta.jpg") no-repeat center center scroll;
}

#header.header-delphi-sdk {
  background: url("/img/header_sentrol.jpg") no-repeat center center scroll;
}

#header.header-sentrol-sdk {
  background: url("/img/header_sentrol.jpg") no-repeat center center scroll;
}

#header.header-historian {
  background: url("/img/header-product-historian.jpg") no-repeat center center scroll;
}

#header.header-modbus-server {
  background: url("/img/header-product-modbus-server.jpg") no-repeat center center scroll;
}

#header.header-free-tools {
  background: #254577;
}

#header.header-classic-opc {
  background: #4d2da5;
}

#header.header-file-transfer {
  background: url("/img/header-product-file-transfer.jpg") no-repeat center center scroll;
}

#product-header.opc-ua-product p.version-text {
  margin: 0 2rem 1.5rem 2rem;
  font-size: 1rem;
}

#home-contact {
  background: url("/img/contact-home.jpg") no-repeat center center scroll;
}

#historian-evaluate {
  background-color: #0d233b;
}

#header.home,
#home-contact,
#historian-evaluate {
  height: auto;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#header.home h1,
#home-contact h1,
#historian-evaluate h1 {
  text-align: center;
  font-weight: 400;
  padding-top: 90px;
  font-size: 40px;
  font-size: 2.7rem;
  color: #ffffff;
  line-height: 50px;
  margin: 0;
}
#header.home h2,
#home-contact h2,
#historian-evaluate h2 {
  color: #ffffff;
  text-align: center;
  font-weight: 300;
  font-size: 2rem;
  margin: 0;
  padding-top: 5px;
  padding-bottom: 60px;
}
#header.home p,
#home-contact p,
#historian-evaluate p {
  font-size: 24px;
  font-size: 1.3rem;
  color: #ffffff;
  line-height: 33px;
  line-height: 1.9rem;
  padding: 0;
  max-width: 850px;
  margin: 16px 0 0 16px;
  margin: 1rem 0 0 1rem;
  font-weight: 300;
}
#header.home .nav-collapse a,
#home-contact .nav-collapse a,
#historian-evaluate .nav-collapse a {
  background-color: transparent;
}
#header.home .nav-collapse a:hover,
#home-contact .nav-collapse a:hover,
#historian-evaluate .nav-collapse a:hover {
  background-color: #ffffff;
}
#header.home .button-confirm,
#home-contact .button-confirm,
#historian-evaluate .button-confirm {
  float: left;
  margin-left: 1rem;
  margin-bottom: 2.5rem;
  max-width: 15rem;
}
#header.home .product-logos,
#home-contact .product-logos,
#historian-evaluate .product-logos {
  float: left;
  max-width: 305px;
}
@media all and (max-width: 499px) {
  #header.home .col-s-1,
  #home-contact .col-s-1,
  #historian-evaluate .col-s-1 {
    width: 100%;
    margin-bottom: 0.8rem;
  }
  #header.home .col-s-1:last-child,
  #home-contact .col-s-1:last-child,
  #historian-evaluate .col-s-1:last-child {
    margin-top: -60px;
  }
  #header.home .row,
  #home-contact .row,
  #historian-evaluate .row {
    margin-left: 1rem;
  }
}
@media all and (min-width: 500px) {
  #header.home .col-m-2,
  #home-contact .col-m-2,
  #historian-evaluate .col-m-2 {
    width: 50%;
    margin-bottom: 0.8rem;
  }
  #header.home .row,
  #home-contact .row,
  #historian-evaluate .row {
    margin-left: 1rem;
  }
}
@media all and (min-width: 900px) {
  #header.home .col-l-4,
  #home-contact .col-l-4,
  #historian-evaluate .col-l-4 {
    width: 25%;
  }
  #header.home .row,
  #home-contact .row,
  #historian-evaluate .row {
    margin-left: 0rem;
  }
}
#header.home .row,
#home-contact .row,
#historian-evaluate .row {
  margin-top: 2rem;
  width: 100%;
}

#header.home h1 {
  text-align: center;
  padding: 0 20px;
  font-weight: 600;
  font-family: "calluna-sans";
  font-size: 60px;
  font-size: 4rem;
  color: #ffffff;
  line-height: 75px;
  margin-top: 0;
  margin-bottom: 40px;
}

#header.home h1.home-header-title {
  margin-bottom: 3px;
}

@media all and (max-width: 800px) {
  #header.home h1 {
    font-size: 50px;
    font-size: 3.5rem;
    line-height: 70px;
  }
}
@media all and (max-width: 600px) {
  #header.home h1 {
    font-size: 50px;
    font-size: 2.5rem;
    line-height: 55px;
  }
}
#home-contact h1,
#home-contact p,
#historian-evaluate h1,
#historian-evaluate p {
  text-align: center;
}
#home-contact .button-confirm,
#historian-evaluate .button-confirm {
  float: none;
  margin: 0 auto 2.5rem;
}

.request-footer {
  background-color: #004c97;
  color: #fff;
  text-align: center;
}

.request-footer h1 {
  margin: 0;
  padding-top: 100px;
  padding-bottom: 5px;
  font-size: 2.6em;
  font-weight: 300;
}

.request-footer p {
  padding-top: 0px;
  padding-bottom: 30px;
  color: #fff;
  font-size: 1.4em;
  font-weight: 300;
}

.free-tools-footer {
  background: #0d233b;
  padding: 100px 40px 40px 40px;
  padding-bottom: 0;
}
.free-tools-footer .take-a-look-title {
  background-color: #1e83d6;
  color: #fff;
  padding: 10px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.free-tools-footer .footer-article-test-tools:hover {
  background-color: #cadce3;
  border-radius: 10px;
}
.free-tools-footer .footer-article-test-tools {
  padding: 5px;
}
.free-tools-footer .row-test_tools a:visited {
  text-decoration: none;
}
.free-tools-footer .row-test_tools a:hover {
  text-decoration: none;
}
.free-tools-footer h2,
.free-tools-footer p.free-tools-intro {
  color: #112237;
  font-weight: 300;
  max-width: 1200px;
  margin: 0 auto;
  margin-bottom: 25px;
  margin-top: 20px;
}
.free-tools-footer p.free-tools-intro {
  font-family: "calluna-sans";
  font-style: italic;
  font-size: 1.25em;
  line-height: normal;
  font-weight: 300;
  margin-bottom: 10px;
}

.free-tools-box {
  background-color: #fff;
  padding: 20px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

/*****************************************************************************/
/*
/* Frontpage News & Articles
/*
/*****************************************************************************/
.main-article h1 {
  font-size: 3em;
  font-weight: 300;
  margin-bottom: 10px;
  margin-top: 0;
  line-height: 1.1em;
  padding-top: 70px;
  text-align: center;
}
@media screen and (max-width: 730px) {
  .main-article h1 {
    font-size: 2.5em;
  }
}

.main-article h1.zero-top-padding {
  padding-top: 0px;
}

.main-introduction-case {
  padding: 10px 15px;
}
.main-introduction-case h4,
.main-introduction-case p {
  color: black;
  text-align: left;
  margin-top: 0px;
  margin-bottom: 0px;
}

.article-contents-wrapper {
  max-width: 1200px;
}

.article-contents-wrapper > .lead-paragraph {
  text-align: left;
}

.article-contents-wrapper > header > hgroup > h1 {
  text-align: left;
}

.underlined {
  border-bottom: solid 1px grey;
  padding-bottom: 13px;
  margin-bottom: 13px;
  max-width: 1200px;
  margin: 0 auto;
}

.main-service-item a:hover {
  text-decoration: none;
}

.main-service-item > div > p {
  padding-top: 5px;
  border-top: solid 1px #004c97;
}

a.main-service-item:hover {
  text-decoration: none;
}

.main-service-item h4 {
  color: #3a6dc0;
}

.main-article.main-article-products {
  background: url("/img/main_products.jpg") no-repeat center;
  transition: 0.5s ease;
  background-size: cover;
  z-index: 1;
  padding: 120px 0 100px 0;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  filter: grayscale(100%);
}

.main-article.main-article-products.effectOff,
.main-article.main-article-services.effectOff {
  filter: none;
}

.main-article-contents-left {
  background-color: white;
  z-index: 50;
  padding-left: 80px;
  padding-right: 80px;
  padding-bottom: 60px;
  width: calc(100% - 80px);
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}
.main-article-contents-left h1,
.main-article-contents-left p {
  text-align: left;
  max-width: 1200px;
  margin: 0 auto;
  margin-bottom: 10px;
}

.main-article.main-article-services {
  background: url("/img/main_services.jpg") no-repeat center;
  background-size: cover;
  z-index: 1;
  transition: 0.5s ease;
  padding: 100px 0 100px 0px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: flex-end;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  filter: grayscale(100%);
}

.main-article-contents-right {
  background-color: white;
  padding-bottom: 60px;
  z-index: 50;
  padding-left: 60px;
  padding-right: 80px;
  width: calc(100% - 80px);
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}
.main-article-contents-right h1,
.main-article-contents-right p {
  text-align: left;
  max-width: 1200px;
  margin: 0 auto;
  margin-bottom: 10px;
}

@media screen and (max-width: 950px) {
  .main-article-contents-left {
    padding-right: 40px;
    padding-left: 40px;
    width: calc(100% - 50px);
  }
  .main-article-contents-right {
    padding-left: 40px;
    padding-right: 60px;
    width: calc(100% - 50px);
  }
}
@media screen and (max-width: 750px) {
  .main-article-contents-left {
    padding-right: 20px;
    padding-left: 40px;
    width: calc(100% - 25px);
  }
  .main-article-contents-right {
    padding-left: 20px;
    padding-right: 40px;
    width: calc(100% - 25px);
  }
}
.home_header_contents {
  min-height: 50vh;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: end;
  -moz-box-align: end;
  -ms-flex-align: end;
  -webkit-align-items: center;
  align-items: flex-end;
  -webkit-justify-content: center;
  justify-content: center;
}

#header.home .button-link {
  background-color: rgba(66, 66, 66, 0.231372549);
  border: solid 2px white;
  padding: 8%;
  color: white;
  font-weight: 400;
  transition: 0.3s ease;
}
#header.home .button-link:hover {
  background-color: rgb(0, 115, 167);
  color: white;
  border: solid 2px rgb(0, 115, 167);
}

#flexbox_header-news {
  display: flex;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: none;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  color: #fff;
  overflow: hidden;
  bottom: 0;
  -webkit-justify-content: center;
  justify-content: center;
  width: 100%;
}

#flexbox_header-news > a {
  padding: 13px;
  margin: 10px 0px 10px 10px;
  -webkit-flex-grow: 2;
  flex-grow: 2;
  border-radius: 5px;
  background-color: rgba(84, 84, 84, 0.7882352941);
  transition: 0.2s ease;
}
#flexbox_header-news > a:hover {
  background-color: rgba(29, 29, 29, 0.8784313725);
}

#flexbox_header-news > a:last-child {
  margin-right: 10px;
}

@media screen and (max-width: 730px) {
  #flexbox_header-news {
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  #flexbox_header-news > a {
    margin-right: 10px;
    margin-bottom: 0;
  }
  #flexbox_header-news > a:last-child {
    margin-bottom: 10px;
  }
}
.enabling-case {
  background-color: #e6e6e6;
  position: relative;
  margin: 5px;
  border-radius: 15px;
  width: 390px;
}

.middle {
  transition: 0.5s ease;
  opacity: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.8);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.overlay-text {
  white-space: nowrap;
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  opacity: 1;
  border-radius: 10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #027eb4;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}

.enabling-case:hover .middle {
  opacity: 1;
}

.enabling-case-img {
  object-fit: cover;
  margin-bottom: 0;
  width: 100%;
  height: 250px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

#flexbox_header-news .header-news > p {
  color: white;
  margin: 3px 0 0 0;
  font-weight: 400;
  font-size: 0.9em;
  line-height: normal;
}

#flexbox_header-news h4 {
  margin: 0;
  color: #4b83c6;
  font-size: 0.85em;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 1px solid #949494;
  padding-bottom: 8px;
  margin-bottom: 6px;
}

#flexbox_header-news .news h4 {
  color: #d15be0;
}

#flexbox_header-news .blog h4 {
  color: #ff3e3e;
}

#flexbox_header-news .events h4 {
  color: #c7b299;
}

#flexbox_header-news .cases h4 {
  color: #33b5ff;
}

#flexbox_header-news a:hover {
  text-decoration: none;
}

#flexbox_header-news a:visited {
  text-decoration: none;
}

.service-logo {
  max-width: 100px;
}

.service-item {
  max-width: 600px;
  padding: 20px;
}

.service-item.main-service-item {
  border-radius: 5px;
  transition: all 0.3s ease;
}
.service-item.main-service-item:hover {
  background-color: #e1e1e1;
  cursor: pointer;
}

@media screen and (max-width: 750px) {
  .flexbox-nowrap.wrap-small {
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 1400px) {
  .flexbox-nowrap.wrap-ml {
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    flex-shrink: 2;
  }
}
@media screen and (max-width: 950px) {
  .flexbox-nowrap.wrap-medium-column {
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
  }
  .flexbox-nowrap.wrap-medium {
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    flex-shrink: 2;
  }
}
.service-item p {
  font-size: 0.9em;
}

.product-ad-wrapper > .main-product-ad-text {
  text-align: left;
}
.product-ad-wrapper > .main-product-ad-text h4,
.product-ad-wrapper > .main-product-ad-text p {
  font-size: 0.8em;
  line-height: normal;
  color: black;
  text-align: center;
  margin-top: 0px;
  margin-bottom: 0px;
}

.article-item > div > .product-ad-explanation {
  font-style: italic;
  font-family: "calluna-sans";
  margin: 5px;
  margin-right: 30px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  text-align: center;
}
.article-item > div > .product-ad-explanation h4 {
  color: #3a6dc0;
  font-weight: 400;
  font-size: 1.4rem;
  margin: 0;
}
.article-item > div > .product-ad-explanation p {
  text-align: center;
}

.main-article-events {
  background: linear-gradient(to right, #484848, #2f2f2f);
}
.main-article-events h1 {
  color: white;
}

.main-page-event {
  position: relative;
  margin: 10px;
  border-radius: 10px;
  width: 420px;
  max-width: 100%;
  min-width: 280px;
  background-color: whitesmoke;
}

.main-page-event .middle {
  border-radius: 10px;
  background-color: rgba(245, 245, 220, 0.8);
}

.main-page-event:hover .middle {
  opacity: 1;
}

.main-page-event-img {
  object-fit: cover;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin-bottom: 0;
  height: 350px;
  width: 420px;
}

.main-page-event-details {
  padding: 0 15px;
}
.main-page-event-details h3,
.main-page-event-details h4,
.main-page-event-details p {
  color: black;
  text-align: left;
}
.main-page-event-details h3 {
  font-size: 1.5em;
  margin: 0;
}
.main-page-event-details h4 {
  color: #004c97;
}

.main-page-event-list {
  display: block;
}

.product-ad-wrapper {
  width: calc(33.3333333333% - 14px);
  margin: 5px 7px;
  background-color: #f4f4f4;
  padding: 20px;
  position: relative;
  border-radius: 12px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

@media screen and (max-width: 750px) {
  .product-ad-wrapper {
    width: 100%;
  }
}
.product-ad-logo {
  max-width: 150px;
  padding: 0 30px;
  transition: all 0.5s ease;
}

.product-ad-logo_div {
  margin: 4px;
}

.product-ad-wrapper:hover .middle {
  opacity: 1;
}

.main-article {
  text-align: center;
  background-color: #fff;
  padding-bottom: 40px;
  padding-left: 40px;
  padding-right: 40px;
}

.main-article > .article-item {
  margin-top: 50px;
  margin-bottom: 100px;
}

.main-article .top-image {
  width: 140px;
  margin-top: 70px;
  margin-bottom: 5px;
}

.lead-paragraph {
  max-width: 1200px;
  margin: auto;
  padding-bottom: 40px;
  font-weight: 300;
  text-align: center;
  font-size: 1.2em;
  line-height: 1.5em;
}

.subtitle {
  font-size: 1.3em;
  margin-bottom: 18px;
}

.button-link_wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  width: 100%;
}

#signUp .button-link_wrapper {
  margin: 40px 0;
}

#signUp .button-link_wrapper a {
  margin: 0 10px;
}

#signUp .button-link {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.button-link_wrapper a {
  margin-top: 0;
  margin-bottom: 10px;
  margin-left: 5px;
  margin-right: 5px;
  color: #3a6dc0;
}

.button-link_wrapper a:visited {
  color: #3a6dc0;
  text-decoration: none;
}

.button-link_wrapper a:hover {
  text-decoration: none;
}

.button-link {
  border-width: 1px;
  width: 280px;
  height: 100%;
  text-align: center;
  border-style: solid;
  border-color: #3a6dc0;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  padding: 15%;
}

.button-link-white {
  border-color: white;
  color: white;
}

.button-link-white:hover {
  border-color: #3a6dc0;
  color: white;
}

.button-link.button-link-white:visited {
  color: white;
}

.button-link:hover {
  background-color: #3a6dc0;
  border-color: #3a6dc0;
  color: white;
}

.button-link.services-button {
  padding: 10px 10px 10px 10px;
  width: 150px;
  border: none;
}

.button-link.services-button:hover {
  background-color: #3a6dc0;
  color: #ffffff;
}

.button-link.mainpage-button {
  width: auto;
  padding: 30px 40px;
  transition: 0.5s ease;
}

.button-link.button-link-white {
  color: white;
}

.button-link.mainpage-button:hover {
  background-color: #017fab;
  color: #ffffff;
}

.customer-image-wrapper {
  display: inline;
  padding: 20px;
}

.customer-logo {
  width: 160px;
  max-width: 100%;
}

/*****************************************************************************/
/*
/* Product overview page
/*
/*****************************************************************************/
#product-bar {
  width: 100%;
  text-align: center;
  display: inline-block;
  color: #666;
  font-size: 0.9em;
  padding-top: 6px;
  background-color: #ffffff;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #9e9e9e;
  padding-bottom: 4px;
}
@media screen and (max-width: 840px) {
  #product-bar {
    display: none;
  }
}

.product-bar-logo {
  margin-left: 25px;
  margin-right: 25px;
}

.product-bar-logo > a > img {
  max-width: 40px;
  margin-left: 1px;
  margin-right: 1px;
}

.product-row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 15px;
  text-align: center;
}

.product-row-center {
  -webkit-justify-content: center;
  justify-content: center;
}

.row-applications {
  border-top-style: solid;
  border-top-color: #aaa;
  border-top-width: 2px;
}

.row-test_tools {
  border-top-style: solid;
  border-top-color: #aaa;
  border-top-width: 2px;
}

.row-dev_tools {
  border-top-style: solid;
  border-top-color: #aaa;
  border-top-width: 2px;
}

.products-container h1 {
  background-color: #fff;
}

.product-text_div {
  padding-left: 15px;
}

.product-description {
  font-size: 0.9em;
}

.product-title {
  font-size: 1.3em;
}

.product-item {
  border-top-width: 3px;
  padding: 20px;
  margin-bottom: 10px;
  border-radius: 5px;
  display: inline-block;
  background-color: #fff;
  min-height: 340px;
  text-align: center;
  -webkit-transition: all 0.4s ease-out;
  /* Safari */
  transition: all 0.4s ease-out;
}

.product-item:hover {
  background-color: #e4e4e4;
}

.video-title {
  text-align: center;
  padding-top: 30px;
  color: #004c97;
  font-weight: 200;
}

.video-item {
  border-top-width: 3px;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 5px;
  color: #004c97;
  display: inline-block;
  text-align: center;
}

.video-item:hover {
  background-color: #f4f4f4;
}

.video-item p {
  color: #004c97;
}

.product-logos {
  max-width: 100px;
}

.products-article {
  background-color: #fff;
  padding: 40px;
}

.products-article h1 {
  width: 100%;
  max-width: 1200px;
  margin: auto;
  font-size: 2.6em;
  font-weight: 300;
  margin-bottom: 20px;
  padding-top: 30px;
  text-align: left;
}

.products-article h3 {
  text-align: left;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  font-weight: 300;
  font-size: 1.2em;
}

.products-test-title {
  color: #1e83d6;
}

.products-app-title {
  color: #50a58c;
}

.products-dev-title {
  color: #285889;
}

.fixedBarPaddingToFirstTitle {
  padding-top: 100px !important;
}

.ua-text {
  color: #999;
  padding-left: 10px;
  font-size: 0.8em;
}

.product-group_main-title {
  font-size: 0.85em;
  font-weight: 300;
}

#opc_product-row_1 {
  padding-left: 0;
  padding-right: 0;
}

#opc_product-row_2 {
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 767px) {
  div[id=opc_product-row_1] > div:nth-child(1) {
    padding-left: 0;
    padding-right: 0;
  }
  div[id=opc_product-row_1] > div:nth-child(2) {
    padding-left: 0;
    padding-right: 0;
  }
}
@media (min-width: 768px) {
  div[id=opc_product-row_1] > div:nth-child(1) {
    padding-left: 0;
    padding-right: 15px;
  }
  div[id=opc_product-row_1] > div:nth-child(2) {
    padding-left: 15px;
    padding-right: 0;
  }
}
.product-ad-banner {
  text-align: center;
  color: white;
  margin: 10px;
  border-radius: 10px;
  padding: 20px 40px;
  background-color: #111;
}
.product-ad-banner h2 {
  margin: 0;
  color: #08aeef;
  font-size: 19px;
}
.product-ad-banner p {
  color: white;
  margin: 0;
  font-size: 16px;
}
.product-ad-banner a,
.product-ad-banner a:visited {
  color: #08aeef;
}

/*****************************************************************************/
/*
/* OPC UA Product Pages
/*
/*****************************************************************************/
.box-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}

.box-row.padding-120-top {
  padding-top: 120px;
}

.box-row.effectOff img {
  transition: 1s ease;
  filter: grayscale(0%);
}

.contents-bar {
  width: 100%;
  background-color: #1b3761;
  color: #ffffff;
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  font-size: 0.8em;
  font-weight: 600;
  align-items: center;
  text-transform: capitalize;
  height: 70px;
}

.contents-bar.online-course,
.contents-bar.online-course a {
  background-color: #dbdecf;
  color: black;
  cursor: pointer;
}

.contents-bar.news-links {
  background-color: #e5e5e5;
  color: #4b83c6;
}

@media screen and (max-width: 600px) {
  .contents-bar.news-links {
    display: none;
  }
}
.contents-bar.news-links .events {
  color: #c7b299;
}

.contents-bar.news-links .blog {
  color: #ff3e3e;
}

.contents-bar.news-links .news {
  color: #d15be0;
}

.contents-link-bar {
  height: 70px;
  width: 100%;
}

.contents-bar > div {
  margin: 0 20px;
}

.navigation-links {
  display: flex;
}

.contents-bar a {
  color: white;
  text-decoration: none;
}

.contents-bar.online-course a,
.contents-bar.online-course a:visited {
  color: black;
  text-decoration: none;
}

.contents-bar a:visited {
  color: white;
}

@media screen and (max-width: 1000px) {
  .navigation-links.products {
    display: none;
  }
}
@media screen and (max-width: 700px) {
  .navigation-links.online-courses {
    display: none;
  }
}
.navigation-links > div {
  padding: 15px;
  cursor: pointer;
}

.navigation-buttons > a {
  margin: 0 5px;
  cursor: pointer;
}

.navigation-links > a {
  margin: 0 5px;
  padding: 15px;
  cursor: pointer;
}

.navigation-links > a:hover,
.navigation-links > div:hover {
  background-color: #065f7c;
}

.navigation-links.online-courses > a:hover,
.navigation-links.online-courses > div:hover {
  background-color: #cacab6;
}

.navigation-links.news-blog-navigation-links > div:hover,
.navigation-links.news-blog-navigation-links > a:hover {
  background-color: #ccc;
}

.navigation-buttons {
  display: flex;
}

.bar-button {
  background-color: #06aae0;
  border-radius: 5px;
  padding: 10px;
}

.bar-button:hover {
  background-color: #065f7c;
}

.bar-button.online-course {
  background-color: #dad600;
}

.bar-button.online-course:hover {
  background-color: #cac700;
}

.feature-logo {
  filter: grayscale(100%);
}

.content-box {
  background-color: #eaeaea;
  border-radius: 10px;
  padding: 20px;
  max-width: 560px;
  text-align: center;
  color: #000;
  margin: 0 20px;
  height: auto;
  min-height: 70px;
}

.content-main-box {
  background-color: #dae5f1;
  border-radius: 10px;
  padding: 20px 20px 40px 20px;
  text-align: center;
  color: #000;
  margin: 0;
  height: auto;
  max-width: 1160px;
  min-height: 70px;
}

.text-main-box {
  column-count: 2;
  text-align: left;
}

.content-list {
  text-align: left;
}

.contents-link-bar-spacer {
  display: hidden;
}

.contents-link-bar-spacer.visible {
  display: inherit;
  visibility: hidden;
  min-height: 70px;
  transition: none;
}

.content-box:first-child {
  margin-left: 0px;
}

.content-box:last-child {
  margin-right: 0px;
}

.content-logo-center {
  max-width: 120px;
  margin: 0 auto;
  margin-top: -60px;
}

.content-box h2 {
  font-weight: 300;
  line-height: 40px;
}

.intro-text-wrapper {
  max-width: 1200px;
  text-align: center;
  margin: 0 auto;
}

.intro-text-wrapper h1 {
  font-weight: 100;
  font-size: 50px;
}

.intro-text-wrapper p {
  font-size: 24px;
  line-height: inherit;
  font-weight: 100;
}

.header-logo-wrapper {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}

.header-java-wrapper {
  min-height: 40vh;
}

.java-header-text-block {
  background-color: rgba(8, 41, 46, 0.6);
}

.online-course-header-text-block {
  background-color: rgba(255, 255, 255, 0.76);
}

.delphi-header-text-block {
  background-color: rgba(100, 87, 174, 0.831372549);
}

.java-sdk-intro {
  background-color: white;
  color: #032427;
  padding: 70px 2rem 0px 2rem;
}

.java-sdk-intro h2 {
  color: #032427;
}

.java-sdk-intro p {
  color: #032427;
}

.header-java-sdk {
  min-height: 35vh !important;
}

.header-delphi-sdk {
  min-height: 35vh !important;
}

.header-low {
  min-height: 35vh !important;
}

.technical-details-link {
  text-align: center;
  color: black;
}

.product-editions-wrapper {
  display: flex;
  justify-content: space-around;
}

@media screen and (max-width: 750px) {
  .product-editions-wrapper {
    flex-direction: column;
  }
}
.product-editions-wrapper > div {
  text-align: center;
  padding: 0 20px;
}

.technical-details-link a {
  color: black;
}

.case-box {
  max-width: 560px;
  background-color: white;
  margin: 0 20px;
  position: relative;
}

.case-box:first-child {
  margin-left: 0px;
}

.case-box:last-child {
  margin-right: 0px;
}

.case-box:hover .middle {
  opacity: 1;
  border-radius: 0;
}

.case-text {
  padding: 20px;
  font-style: italic;
}

.case-text h4 {
  font-weight: 400;
  font-style: normal;
  color: rgb(60, 71, 109);
}

.case-image {
  height: 300px;
  width: 100%;
}

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

#flir.case-image {
  background: url(/img/case_traffic.jpg);
  background-size: cover;
}

#awenergy.case-image {
  background: url(/img/aw-energy-waveroller.jpg);
  background-size: cover;
}

#kruger.case-image {
  background: url(/img/case_water.jpg);
  background-size: cover;
}

#centria.case-image {
  background: url(/img/cases/centria.jpg);
  background-size: cover;
}

#valio.case-image {
  background: url(/img/case_valio.jpg);
  background-size: cover;
}

#nextnine.case-image {
  background: url(/img/case_factory.jpg);
  background-size: cover;
}

#steria.case-image {
  background: url(/img/case_traffic_2.jpg);
  background-size: cover;
}

#adpap.case-image {
  background: url(/img/case_blue_smoke.jpg);
  background-size: cover;
}

#sinopec.case-image {
  background: url(/img/case_oil.jpg);
  background-size: cover;
}

@media screen and (max-width: 750px) {
  .box-row {
    flex-wrap: wrap;
  }
  .content-box {
    margin: 50px 20px;
  }
  .content-box:first-child {
    margin: 50px 20px;
  }
  .content-box:last-child {
    margin: 50px 20px;
  }
  .box-row.padding-120-top {
    padding-top: 0;
  }
  .case-box {
    max-width: 560px;
    margin: 20px;
  }
  .case-box:first-child {
    margin: 20px;
  }
  .case-box:last-child {
    margin: 20px;
  }
}
.feature-list > p {
  margin: 0;
  font-size: 14px;
  font-size: 0.8em;
  line-height: 1.25;
}

/*****************************************************************************/
/*
/* OPC UA Monitor - Product Launch page
/*
/*****************************************************************************/
.blue-bg {
  background-color: #1c478a;
  border-top: 15px solid #ffe783;
  border-left: 15px solid #00356a;
}
.blue-bg h2,
.blue-bg p {
  color: white;
}

.opc_ua_landing_page_header_wrapper {
  height: 100%;
  min-height: 85vh;
  padding: 0;
  position: relative;
}

#monitor_header.opc_ua_landing_page_contents {
  margin-top: 50px;
}
#monitor_header.opc_ua_landing_page_contents h2 {
  color: #ffce00;
  font-weight: 400;
}

#header.header-client-pro {
  background: url(/img/header-product-client-pro_beta.jpg) no-repeat center center scroll;
  background-size: cover;
}

.ua-monitor-feature_wrapper > div {
  margin-left: 2rem;
}
.ua-monitor-feature_wrapper > div h2 {
  margin-top: 0;
  margin-bottom: 0.1rem;
}

.opc_ua_landing_page_header_wrapper > #preview_opc-ua-monitor_header_ad.preview_header_block h3 {
  color: #ffce00;
  max-width: 1200px;
}

.ua-monitor-feature_wrapper {
  margin-top: 3rem;
  margin-bottom: 2rem;
  max-width: 900px;
}

@media screen and (max-width: 750px) {
  .ua-monitor-feature_wrapper {
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
  }
  .ua-monitor-feature_wrapper > div {
    margin-left: 0;
  }
}
.ua-monitor-feature_wrapper > img {
  width: 10rem;
  height: 10rem;
  max-width: 100%;
  margin-top: 0.65rem;
}

.preview_opc-ua-monitor_header {
  text-align: center;
}

#monitor_signup_wrapper > p.signup_text {
  color: #ffce00;
  max-width: 100%;
  font-weight: 400;
}

#preview_opc-ua-monitor_header_ad {
  position: relative;
  top: 0;
  margin-top: 50px;
}

@media screen and (min-height: 700px) and (min-width: 850px) {
  #preview_opc-ua-monitor_header_ad {
    position: absolute;
    bottom: 10vh;
    top: auto;
  }
}
#small-uamonitor-text {
  margin-top: 1rem;
}
#small-uamonitor-text p.small-grey {
  color: #cccccc;
  padding: 0;
  margin-top: 0;
  font-size: 32px;
  font-size: 1.1rem;
  line-height: 48px;
  line-height: 2.3rem;
  font-family: "futura-pt", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
@media screen and (min-width: 600px) {
  #small-uamonitor-text p.small-grey {
    float: center;
  }
}
#small-uamonitor-text p.small-grey a {
  color: #cccccc;
}
#small-uamonitor-text .small-grey + .small-grey {
  margin-left: 1rem;
}
@media screen and (min-width: 948px) {
  #small-uamonitor-text .small-grey + .small-grey {
    margin-left: 3rem;
  }
}

.product-preview-features-row {
  padding: 15px;
  text-align: center;
  min-width: 200px;
}
.product-preview-features-row img {
  width: 100%;
  max-width: 7rem;
}
.product-preview-features-row p {
  font-weight: bold;
  font-size: 1rem;
}

#monitor_header.opc_ua_landing_page_contents p {
  max-width: 1200px;
}

#preview_opc-ua-monitor_header_ad.preview_header_block p {
  max-width: 1200px;
}

/*****************************************************************************/
/*
/* Content
/*
/*****************************************************************************/
.fixed-position-top {
  position: fixed;
  top: 0;
  z-index: 99;
}

#content {
  padding-top: 0;
  position: relative;
  z-index: 2;
  background: #ffffff;
}

#main {
  width: 100%;
}
#main h2 {
  margin-left: 0;
  margin-bottom: 8px;
  clear: both;
}
@media screen and (min-width: 1045px) {
  #main {
    width: 68%;
    float: left;
  }
}
@media screen and (min-width: 948px) {
  #main {
    padding-left: 1.5rem;
  }
}
@media screen and (min-width: 1120px) {
  #main {
    padding-left: 3rem;
  }
}

#aside {
  width: 100%;
  margin-top: 32px;
  margin-top: 2rem;
}
@media screen and (min-width: 1045px) {
  #aside {
    width: 32%;
    float: right;
    padding-left: 32px;
    margin-top: 16px;
    padding-left: 1rem;
    margin-top: 1rem;
  }
}
@media screen and (min-width: 948px) {
  #aside {
    padding-right: 1.5rem;
  }
}
@media screen and (min-width: 1120px) {
  #aside {
    padding-right: 3rem;
  }
}
#aside .box {
  margin: 16px 0;
  margin: 1rem 0;
  background-color: #e4e4e4;
}
#aside .box:first-child {
  margin-top: 0;
}
#aside ul {
  padding: 0 8px;
  padding: 0 0.5rem;
  margin-left: 0;
  color: #4e4e4e;
}
#aside li {
  color: #4e4e4e;
  margin-top: 6px;
  margin-top: 0.4rem;
  list-style: none;
}

#opc-ua-product-main,
.opc-ua-product-main,
.content-block {
  padding: 32px 16px 32px;
  padding: 2rem 1rem 2rem;
}
#opc-ua-product-main .product-list h3,
.opc-ua-product-main .product-list h3,
.content-block .product-list h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.25rem;
}
#opc-ua-product-main .product-list p,
.opc-ua-product-main .product-list p,
.content-block .product-list p {
  margin-bottom: 0.25rem;
}
#opc-ua-product-main .product-text h2,
.opc-ua-product-main .product-text h2,
.content-block .product-text h2 {
  margin-top: 1rem;
  text-align: center;
}
#opc-ua-product-main .product-text ul,
.opc-ua-product-main .product-text ul,
.content-block .product-text ul {
  margin-bottom: 0.5rem;
}
#opc-ua-product-main .product-text p,
.opc-ua-product-main .product-text p,
.content-block .product-text p {
  margin-bottom: 0;
}
#opc-ua-product-main .product-50,
#opc-ua-product-main .product-33,
#opc-ua-product-main .product-25,
.opc-ua-product-main .product-50,
.opc-ua-product-main .product-33,
.opc-ua-product-main .product-25,
.content-block .product-50,
.content-block .product-33,
.content-block .product-25 {
  width: 100%;
  float: none;
}
#opc-ua-product-main .product-left,
.opc-ua-product-main .product-left,
.content-block .product-left {
  width: 100%;
  float: none;
}
#opc-ua-product-main .product-right,
.opc-ua-product-main .product-right,
.content-block .product-right {
  width: 100%;
  float: none;
}
#opc-ua-product-main .product-center,
.opc-ua-product-main .product-center,
.content-block .product-center {
  margin: 0 auto 0;
  width: 100%;
  max-width: 700px;
}
#opc-ua-product-main hr,
.opc-ua-product-main hr,
.content-block hr {
  margin: 32px 0;
  margin: 2rem 0;
}
#opc-ua-product-main .editions-wrapper,
.opc-ua-product-main .editions-wrapper,
.content-block .editions-wrapper {
  display: flex;
  max-width: 1200px;
  text-align: center;
  margin: 0 auto;
  justify-content: space-between;
}
#opc-ua-product-main .edition-50,
.opc-ua-product-main .edition-50,
.content-block .edition-50 {
  width: calc(50% - 50px);
  padding: 20px;
  border-radius: 10px;
}
@media screen and (min-width: 650px) {
  #opc-ua-product-main .product-text h2,
  .opc-ua-product-main .product-text h2,
  .content-block .product-text h2 {
    margin-top: 0;
  }
}
@media screen and (min-width: 650px) {
  #opc-ua-product-main .product-33,
  .opc-ua-product-main .product-33,
  .content-block .product-33 {
    width: 33.33%;
    float: left;
    padding: 0.5rem;
  }
  #opc-ua-product-main .product-left,
  .opc-ua-product-main .product-left,
  .content-block .product-left {
    width: 50%;
    float: left;
    padding: 0.5rem;
  }
  #opc-ua-product-main .product-right,
  .opc-ua-product-main .product-right,
  .content-block .product-right {
    width: 50%;
    float: right;
    padding: 0.5rem;
  }
  #opc-ua-product-main .product-text,
  .opc-ua-product-main .product-text,
  .content-block .product-text {
    padding: 32px;
    padding: 2rem;
  }
  #opc-ua-product-main .product-text p,
  .opc-ua-product-main .product-text p,
  .content-block .product-text p {
    margin-bottom: 0.5rem;
  }
}
@media screen and (min-width: 550px) {
  #opc-ua-product-main .product-50,
  #opc-ua-product-main .product-25,
  .opc-ua-product-main .product-50,
  .opc-ua-product-main .product-25,
  .content-block .product-50,
  .content-block .product-25 {
    width: 50%;
    float: left;
    padding: 0.5rem;
  }
}
@media screen and (min-width: 800px) {
  #opc-ua-product-main .product-25,
  .opc-ua-product-main .product-25,
  .content-block .product-25 {
    width: 25%;
    float: left;
    padding: 0.5rem;
  }
}
@media screen and (min-width: 800px) {
  #opc-ua-product-main .product-50,
  .opc-ua-product-main .product-50,
  .content-block .product-50 {
    width: 50%;
    float: left;
    padding: 0.5rem;
  }
}

/* responsive-nav.js 1.0.23 by @viljamis */
/* MIT License */
/* http://responsive-nav.com */
/* https://github.com/viljamis/responsive-nav.js */
#nav li {
  text-transform: uppercase;
}

#nav ul {
  text-align: center;
}

.nav-collapse,
.nav-collapse ul {
  list-style: none;
  width: 100%;
  float: left;
  margin: 0;
  padding: 0 0 0 0;
}

.nav-collapse li {
  float: left;
  width: 100%;
}

@media screen and (min-width: 1045px) {
  .nav-collapse,
  .nav-collapse ul {
    float: right;
    width: auto;
    padding-top: 0;
  }
  .nav-collapse li {
    width: auto;
  }
}
.nav-collapse a {
  margin: 0;
  color: #fff;
  text-decoration: none;
  width: 100%;
  background: #004c97;
  padding: 8px 16px 8px;
  padding: 0.5rem 1rem 0.5rem;
  float: left;
  font-size: 21px;
  font-size: 1.3rem;
  transition: background-color 0.15s ease-in-out 0s;
}
.nav-collapse a:hover {
  color: #004c97;
  background-color: #ffffff;
  text-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

@media screen and (min-width: 1045px) {
  .nav-collapse {
    border: 0;
  }
  .nav-collapse a {
    padding: 3px 13px;
    padding: 0.3rem 0.7rem;
    float: left;
    text-align: center;
    border: 0;
    background-color: #004c97;
    color: #ffffff;
  }
  .nav-collapse a:hover {
    color: #004c97;
    background-color: #ffffff;
    text-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  .nav-collapse ul {
    margin-bottom: 0;
  }
}
.nav-collapse.disable-pointer-events {
  pointer-events: none !important;
}

.nav-collapse ul ul a {
  background: #ca3716;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media screen and (min-width: 1045px) {
  .nav-collapse ul ul a {
    display: none;
  }
}
.nav-toggle {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 70px;
  height: 70px;
  float: right;
  margin-top: 0;
  text-indent: -9999px;
  overflow: hidden;
  background: url("/img/icon-hamburger.png") no-repeat center center;
}

@media screen and (min-width: 1045px) {
  .nav-collapse a {
    font-size: 14px;
    font-size: 0.8rem;
    margin-top: 18px;
  }
}
@media screen and (min-width: 948px) {
  .nav-collapse a {
    font-size: 14px;
    font-size: 0.8rem;
    margin-top: 18px;
  }
}
@media screen and (min-width: 1120px) {
  .nav-collapse a {
    font-size: 15px;
    font-size: 0.9rem;
    margin-top: 16px;
  }
}
@media screen and (-webkit-min-device-pixel-ratio: 1.3), screen and (min--moz-device-pixel-ratio: 1.3), screen and (-o-min-device-pixel-ratio: 2/1), screen and (min-device-pixel-ratio: 1.3), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
  .nav-toggle {
    background-image: url("/img/icon-hamburger@2x.png");
    -webkit-background-size: 100px 100px;
    -moz-background-size: 100px 100px;
    -o-background-size: 100px 100px;
    background-size: 100px 100px;
  }
}
.nav-collapse ul {
  display: block;
  list-style: none;
}

.js .nav-collapse {
  clip: rect(0 0 0 0);
  max-height: 0;
  position: absolute;
  display: block;
  overflow: hidden;
  zoom: 1;
}

.nav-collapse.opened {
  max-height: 9999px;
}

.nav-toggle {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

@media screen and (min-width: 1045px) {
  .js .nav-collapse {
    position: relative;
  }
  .js .nav-collapse.closed {
    max-height: none;
  }
  .nav-toggle {
    display: none;
  }
}
/*****************************************************************************/
/*
/* Buttons
/*
/*****************************************************************************/
.button-footer {
  margin-top: 10px;
}

.button .button-footer a, .button-secondary .button-footer a, .button-confirm .button-footer a, #footer .button-footer .button-footer a {
  color: #fff !important;
  text-decoration: none;
}

.button-footer a:visited {
  color: #fff !important;
  text-decoration: none;
}

.button-footer a:hover {
  color: #f4f4f4 !important;
  text-decoration: none;
}

.button a:visited, .button-secondary a:visited, .button-confirm a:visited, #footer .button-footer a:visited {
  color: #3399ff;
  text-decoration: none;
}

.button a:hover, .button-secondary a:hover, .button-confirm a:hover, #footer .button-footer a:hover {
  text-decoration: none;
}

.button-confirm {
  background-color: transparent;
  border-radius: 5px;
  border-style: solid;
  border-width: 2px;
  border-color: #6fb7ff;
  color: #6fb7ff;
}
.button-confirm:disabled {
  background-color: #e9e9e9;
  color: #999999;
}

.button-confirm a,
.button-confirm a:visited {
  color: #6fb7ff;
}

.button-confirm.button-large.button-white {
  border-color: #fff;
  color: #fff;
}
.button-confirm.button-large.button-white a {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: 0.3s ease;
}
.button-confirm.button-large.button-white a:visited {
  color: #fff;
  text-decoration: none;
}
.button-confirm.button-large.button-white a:hover {
  color: #3a6dc0;
  background-color: white;
  text-decoration: none;
}

.button-white {
  border-color: #fff;
  color: #fff;
}
.button-white a {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
.button-white a:visited {
  color: #fff;
  text-decoration: none;
}
.button-white a:hover {
  color: #fff;
  text-decoration: none;
}

.button-secondary {
  border-radius: 4px;
  background: #253746;
  color: #ffffff;
}
.button-secondary:hover {
  background: #fe7c00;
  /*#264859;*/
}
.button-secondary:disabled {
  background-color: #e9e9e9;
  color: #999999;
}

.button-large a {
  font-size: 19px;
  font-size: 1.2rem;
}

input[type=button].button-confirm {
  font-size: 16px;
  font-size: 1rem;
  padding: 10px 20px;
  padding: 0.6rem 1.25rem;
  margin-left: 0;
}

input[type=button].margin-left-button {
  margin-left: 1rem;
}

.button-confirm,
.button-secondary {
  margin: 32px 16px 0 0;
  margin: 2rem 1rem 0 0;
}
.button-confirm a,
.button-secondary a {
  color: #3a6dc0;
  text-decoration: none;
  cursor: pointer;
}

.text-button {
  cursor: pointer;
  color: #3a6dc0;
}

.text-button:hover {
  cursor: pointer;
  color: #3399ff;
}

/*****************************************************************************/
/*
/* Home
/*
/*****************************************************************************/
#home-introduction-boxes,
#home-products,
#home-sdks,
#home-services,
#home-case-studies,
#home-news,
#home-resources {
  width: 100%;
  margin-top: 12px;
  margin-bottom: 12px;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
@media screen and (min-width: 650px) {
  #home-introduction-boxes,
  #home-products,
  #home-sdks,
  #home-services,
  #home-case-studies,
  #home-news,
  #home-resources {
    margin-bottom: 24px;
    margin-bottom: 1.5rem;
  }
}

#home-our-services {
  width: 100%;
}
@media screen and (min-width: 650px) {
  #home-our-services {
    width: 33.33%;
    float: left;
    display: table-cell;
    height: 100%;
  }
}

#home-our-products h3,
#home-what-is-opc h3,
#home-current-highlight1 h3,
#home-current-highlight2 h3,
#home-current-highlight3 h3 {
  margin-top: 12px;
  margin-top: 0.75rem;
}

#home-our-products,
#home-what-is-opc,
#home-current-highlight1,
#home-current-highlight2,
#home-current-highlight3 {
  width: 100%;
  position: relative;
}
@media screen and (min-width: 650px) {
  #home-our-products,
  #home-what-is-opc,
  #home-current-highlight1,
  #home-current-highlight2,
  #home-current-highlight3 {
    width: 33.33%;
    height: 100%;
    display: table-cell;
    vertical-align: top;
    height: 100%;
  }
}
#home-our-products a,
#home-what-is-opc a,
#home-current-highlight1 a,
#home-current-highlight2 a,
#home-current-highlight3 a {
  position: relative;
  bottom: 0;
}

.home-service-highlight {
  width: 100%;
  position: relative;
  vertical-align: top;
  padding: 8px 16px 8px 0;
  padding: 0.5rem 1rem 0.5rem 0;
}
@media screen and (min-width: 650px) {
  .home-service-highlight {
    width: 50%;
    height: 100%;
    display: table-cell;
    height: 100%;
    padding-left: 16px;
    padding-left: 1rem;
  }
}
.home-service-highlight a {
  position: relative;
  bottom: 0;
}
.home-service-highlight .highlight-text h3 {
  margin-top: 8px;
  margin-top: 0.5rem;
  margin-left: 0.5rem;
}
.home-service-highlight .highlight-text p {
  margin-left: 0.5rem;
}

@media screen and (min-width: 650px) {
  #home-products,
  #home-sdks,
  #home-services,
  #home-case-studies {
    margin-bottom: 40px;
    margin-bottom: 2.5rem;
    margin-top: 40px;
    margin-top: 2.5rem;
  }
}
#home-products ul,
#home-sdks ul,
#home-services ul,
#home-case-studies ul {
  padding-left: 0;
}
#home-products li,
#home-sdks li,
#home-services li,
#home-case-studies li {
  list-style-type: none;
  margin-left: 0;
  font-size: 16px;
  padding-bottom: 14px;
  font-size: 1rem;
  padding-bottom: 0.8rem;
  font-weight: 500;
}

#home-highlights-table {
  width: 100%;
}
@media screen and (min-width: 650px) {
  #home-highlights-table {
    display: table;
    border-spacing: 0.5rem;
    margin-right: 0;
    padding-right: 0;
    margin-left: 0;
    padding-left: 0;
    margin-top: 2rem;
  }
}

.home-products-listing-50 {
  display: inline;
}
@media screen and (min-width: 550px) {
  .home-products-listing-50 {
    width: 50%;
  }
}

#home-products-listing,
#home-services-listing,
#home-case-studies-listing,
#home-resources-listing {
  display: inline;
}
#home-products-listing li,
#home-services-listing li,
#home-case-studies-listing li,
#home-resources-listing li {
  font-size: 18px;
  font-size: 1.1rem;
}
@media screen and (min-width: 550px) {
  #home-products-listing,
  #home-services-listing,
  #home-case-studies-listing,
  #home-resources-listing {
    width: 45%;
  }
}
@media screen and (min-width: 650px) {
  #home-products-listing,
  #home-services-listing,
  #home-case-studies-listing,
  #home-resources-listing {
    width: 38%;
  }
}

@media screen and (min-width: 650px) {
  #home-twitter {
    padding: 0 8px;
    padding: 0 0.5rem;
  }
}

#home-news-listing,
#home-events-listing,
#home-blog-listing,
#home-twitter {
  display: inline;
  padding-top: 24px;
  padding-top: 1.5rem;
}
@media screen and (min-width: 650px) {
  #home-news-listing,
  #home-events-listing,
  #home-blog-listing,
  #home-twitter {
    width: 33.33%;
    padding-left: 8px;
    padding-right: 8px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0;
  }
}
#home-news-listing a,
#home-events-listing a,
#home-blog-listing a,
#home-twitter a {
  font-size: 14px;
  font-size: 0.9rem;
  font-weight: 400;
}
#home-news-listing p,
#home-events-listing p,
#home-blog-listing p,
#home-twitter p {
  font-weight: 400;
  font-size: 0.12px;
  font-size: 0.75rem;
  margin: 0;
}
#home-news-listing ul,
#home-events-listing ul,
#home-blog-listing ul,
#home-twitter ul {
  padding: 0;
  margin: 0;
}
#home-news-listing li,
#home-events-listing li,
#home-blog-listing li,
#home-twitter li {
  list-style-type: none;
  padding: 5px 8px;
  padding: 0.3rem 0.5rem;
  margin: 0;
}
#home-news-listing li:nth-child(even),
#home-events-listing li:nth-child(even),
#home-blog-listing li:nth-child(even),
#home-twitter li:nth-child(even) {
  background-color: #efefef;
}

#home-products-highlight,
#home-services-highlight,
#home-case-studies-highlight1,
#home-case-studies-highlight2,
#home-resources-highlight {
  display: inline;
}
@media screen and (min-width: 650px) {
  #home-products-highlight,
  #home-services-highlight,
  #home-case-studies-highlight1,
  #home-case-studies-highlight2,
  #home-resources-highlight {
    width: 55%;
  }
  #home-products-highlight .box,
  #home-services-highlight .box,
  #home-case-studies-highlight1 .box,
  #home-case-studies-highlight2 .box,
  #home-resources-highlight .box {
    margin-left: 8px;
    margin-left: 0.5rem;
    min-height: 220px;
  }
}
@media screen and (min-width: 650px) {
  #home-products-highlight,
  #home-services-highlight,
  #home-case-studies-highlight1,
  #home-case-studies-highlight2,
  #home-resources-highlight {
    width: 62%;
  }
}

.highlight-box {
  display: inline;
}
.highlight-box .box {
  margin: 16px 0 0;
  margin: 1rem 0 0;
}
.highlight-box.blog-writer {
  margin-top: 16px;
  margin-top: 1rem;
  margin-bottom: 16px;
  margin-bottom: 1rem;
}
.highlight-box.blog-writer img {
  max-width: 160px;
  padding-right: 16px;
  max-width: 10rem;
  padding-right: 1rem;
}

#product-header h2,
#case-header h2 {
  margin-bottom: 8px;
  margin-bottom: 0.5rem;
}
#product-header h3,
#case-header h3 {
  font-size: 21px;
  margin: 0 0 8px;
  font-size: 1.3rem;
  margin: 0 0 0.5rem;
  color: #8e8e8e;
  font-weight: 400;
}
#product-header .highlight-image,
#product-header .highlight-text,
#case-header .highlight-image,
#case-header .highlight-text {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}
@media screen and (min-width: 650px) {
  #product-header .highlight-image,
  #case-header .highlight-image {
    width: 192px;
    padding: 24px 32px;
    width: 12rem;
    padding: 1.5rem 2rem;
  }
  #product-header .highlight-text,
  #case-header .highlight-text {
    clear: right;
    width: calc(100% - 12rem);
  }
}
#product-header img,
#case-header img {
  padding: 0;
  margin: 0;
}

#header.opc-ua-product h3 {
  font-style: italic;
  font-family: "calluna-sans";
  color: #fff;
  font-size: 29px;
  font-size: 1.6rem;
  margin: 20px 24px;
  margin: 1.25rem 2rem 0.5rem 1.5rem;
  margin-top: 3px;
  max-width: 60rem;
}
@media screen and (min-width: 550px) {
  #header.opc-ua-product h3 {
    font-size: 35px;
    font-size: 2rem;
    margin: 29px 32px;
    margin: 1.25rem 2rem 0.5rem 1.5rem;
    margin-top: 3px;
  }
}
#header.opc-ua-product img {
  max-width: 35em;
}
#header.opc-ua-product #product-menu {
  padding: 0 1rem;
}
#header.opc-ua-product .opc-ua-product-button {
  width: 100%;
  max-width: 280px;
  float: left;
  clear: both;
  margin-bottom: 0.5rem;
}
@media screen and (min-width: 280px) {
  #header.opc-ua-product .opc-ua-product-button {
    clear: none;
    margin-right: 2rem;
  }
}
#header.opc-ua-product .opc-ua-product-button .box-mini {
  margin-bottom: 0;
}
#header.opc-ua-product .opc-ua-product-button h3 {
  font-size: 1.2rem;
  font-weight: 400;
  font-style: normal;
  text-align: center;
}
#header.opc-ua-product .opc-ua-product-button p {
  font-size: 0.8rem;
  font-weight: 400;
  color: #bbb;
}
#header.opc-ua-product .opc-ua-product-button .purchase-license,
#header.opc-ua-product .opc-ua-product-button .request-evaluation {
  padding: 0.5rem;
}

#header.online-course h3 {
  color: black;
}

#case-header {
  margin-bottom: 16px;
  margin-bottom: 1rem;
}
#case-header .highlight-image {
  width: 240px;
  padding-top: 16px;
  width: 15rem;
  padding-top: 1rem;
}
@media screen and (min-width: 650px) {
  #case-header .highlight-image {
    width: 240px;
    width: 15rem;
    padding: 24px 32px 16px;
    padding: 1.5rem 2rem 1rem;
  }
  #case-header .highlight-text {
    clear: right;
    width: calc(100% - 15rem);
  }
}

#small-product-text {
  margin-top: 1rem;
}
#small-product-text p.small-grey {
  color: #cccccc;
  padding: 0;
  margin-top: 0;
  font-size: 32px;
  font-size: 1.1rem;
  line-height: 48px;
  line-height: 2.3rem;
  font-family: "futura-pt", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
@media screen and (min-width: 600px) {
  #small-product-text p.small-grey {
    float: left;
  }
}
#small-product-text p.small-grey a {
  color: #cccccc;
}
#small-product-text .small-grey + .small-grey {
  margin-left: 1rem;
}
@media screen and (min-width: 948px) {
  #small-product-text .small-grey + .small-grey {
    margin-left: 3rem;
  }
}

#product-menu {
  clear: both;
}
#product-menu p,
#product-menu p.small-grey {
  color: #8e8e8e;
  padding: 0;
  margin-top: 0;
  font-size: 14px;
  font-size: 0.9rem;
  line-height: 19px;
  line-height: 1.2rem;
  font-family: "futura-pt", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
#product-menu h3 {
  padding: 0;
  margin-bottom: 0;
  font-weight: 600;
  font-family: "futura-pt", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
#product-menu #evaluate {
  background-repeat: no-repeat;
  background-position: 10px 50%;
  -webkit-background-size: 40px 40px;
  -moz-background-size: 40px 40px;
  background-size: 40px 40px;
  padding: 3px 0 3px 0px;
}
#product-menu #purchase {
  background-repeat: no-repeat;
  background-position: 10px 50%;
  -webkit-background-size: 40px 40px;
  -moz-background-size: 40px 40px;
  background-size: 40px 40px;
  padding: 3px 0 3px 0px;
}

#product-description,
.product-description {
  clear: both;
}
#product-description h4,
.product-description h4 {
  margin: 24px 8px 12px 0;
  font-size: 20px;
  margin: 1.5rem 0.5rem 0.75rem 0;
  font-size: 1.3rem;
  color: #253746;
  font-style: normal;
  font-weight: 500;
}
#product-description .box img,
.product-description .box img {
  padding: 12px;
  padding: 0.75rem;
}
#product-description .box img.two-images,
.product-description .box img.two-images {
  width: 50%;
  float: left;
}
#product-description .box img.three-images,
.product-description .box img.three-images {
  width: 33.33%;
  float: left;
}
#product-description .box img.four-images,
.product-description .box img.four-images {
  width: 25%;
  float: left;
}

img.four-images {
  width: 50%;
  float: left;
}
@media screen and (min-width: 948px) {
  img.four-images {
    width: 25%;
  }
}

/*****************************************************************************/
/*
/* Company
/*
/*****************************************************************************/
.secondary-paragraph {
  font-size: 1em;
  padding: 0;
  text-align: left;
}

article.article-company {
  max-width: 1200px;
  margin: 0 auto;
  border-style: none;
}
@media screen and (max-width: 948px) {
  article.article-company {
    padding-bottom: 8px;
  }
}

article.article-company h1 {
  font-size: 1.5em;
  margin: 0;
  text-align: left;
}

.col-25 {
  width: 25%;
}

.col-75 {
  width: 75%;
}

.one-column {
  background-color: #eeeeee;
  padding: 40px;
}

.two-column-left {
  width: 50%;
  padding: 40px;
  background-color: #eeeeee;
}
@media screen and (max-width: 948px) {
  .two-column-left {
    width: 100%;
  }
}

.two-column-right {
  width: 50%;
  padding: 40px;
  background-color: #eeeeee;
}
@media screen and (max-width: 948px) {
  .two-column-right {
    width: 100%;
  }
}

.two-column-image {
  width: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}
@media screen and (max-width: 948px) {
  .two-column-image {
    display: none;
  }
}

#iiot div.two-column-image {
  background-image: url("/img/iiot.png");
}

#roadToOpc div.two-column-image {
  background-image: url("/img/company_road.jpg");
}

#opcCompetence div.two-column-image {
  background-image: url("/img/certificate.png");
}

#investment div.two-column-image {
  background-image: url("/img/company_safe.jpeg");
}

#bestService div.two-column-image {
  background-image: url("/img/company_service.jpg");
}

/*****************************************************************************/
/*
/* About OPC
/*
/*****************************************************************************/
#opc #endUsers div.two-column-image {
  background-image: url("/img/user_enduser.jpg");
  border-top-right-radius: 10px;
}
#opc #deviceMachineVendor div.two-column-image {
  background-image: url("/img/user_vendor.jpg");
}
#opc #integrators div.two-column-image {
  background-image: url("/img/user_intergrate.jpg");
}
#opc #companies div.two-column-image {
  background-image: url("/img/user_company.jpg");
  border-bottom-left-radius: 10px;
}
#opc .article-opc-users {
  padding-bottom: 0px;
  background-color: #d4dce4;
}
#opc .article-opc-users > div {
  border-bottom: solid #fff 20px;
}
#opc .article-opc-users > div:last-child {
  border-bottom: none;
}
#opc .article-title {
  font-size: 3em;
  font-weight: 300;
  margin-bottom: 10px;
  margin-top: 0;
  line-height: 1.1em;
  padding-top: 70px;
  text-align: center;
}
#opc .white {
  color: #fff;
}
#opc .white > p {
  color: #fff;
}
#opc .white > h3 {
  color: #fff;
}
#opc .black > p {
  color: #000;
}
#opc .black > h3 {
  color: #000;
}
#opc h1.title-light {
  font-size: 36px;
  font-weight: 100;
}
#opc .margin-bottom-10 {
  margin-bottom: 10px;
}

/*****************************************************************************/
/*
/* Services
/*
/*****************************************************************************/
.service-logo-column {
  width: 140px;
  margin-right: 40px;
}
@media screen and (max-width: 800px) and (min-width: 550px) {
  .service-logo-column {
    width: 100px;
    margin-right: 25px;
  }
}
@media screen and (max-width: 550px) {
  .service-logo-column {
    display: none;
  }
}

.service-item.services {
  max-width: 500px;
  padding: 0px 20px;
  margin: 30px;
  border-left: solid 5px #eaeaea;
}
.service-item.services:hover {
  border-left: solid 5px #3a6dc0;
  transition: all 0.5s ease;
}

.service-item.services a:hover {
  text-decoration: none;
}

/*****************************************************************************/
/*
/* Cases
/*
/*****************************************************************************/
.case-product-logo {
  width: 50px;
  display: inline-block;
  vertical-align: middle;
}

p.author {
  font-size: 0.8em;
  color: #666;
  text-align: left;
  margin-top: 0;
}

.case-text-block {
  display: inline-block;
  vertical-align: middle;
  padding: 5px;
  font-size: 0.7em;
}

.case-article {
  padding-bottom: 0;
}

.cases-wrapper {
  max-width: 850px;
}

.cases-wrapper h3 {
  text-align: left;
  margin-bottom: 5px;
  margin-top: 30px;
}

.cases-wrapper > h3 + p {
  margin-top: 0;
}

.cases-wrapper > figure {
  margin-top: 30px;
  margin-bottom: 30px;
  font-size: 0.9em;
}

.cases-wrapper > p {
  margin-top: 20px;
  margin-bottom: 20px;
}

.case-text-block.primary-text {
  font-size: 1em;
  font-weight: 600;
  margin-left: 5px;
}

.case-product-div {
  display: inline-block;
  padding: 5px;
  padding-right: 10px;
  margin-right: 8px;
  margin-top: 10px;
  background-color: #eeeeee;
  border-radius: 5px;
}

.case-product-div.primary-case {
  width: 200px;
  background-color: #c4c9d7;
  margin-top: 30px;
}

.two-column-image.case-main_case-logo-column {
  text-align: left;
  padding-left: 20px;
}

.case-main_case-customer_logo {
  margin-bottom: 20px;
  margin-top: 10px;
  display: block;
  width: 220px;
}

#case_flir div.two-column-image {
  background-image: url("/img/case_traffic.jpg");
}

#case_awenergy div.two-column-image {
  background-image: url("/img/aw-energy-waveroller.jpg");
}

#case_nextnine div.two-column-image {
  background-image: url("/img/case_factory.jpg");
}

#case_kruger div.two-column-image {
  background-image: url("/img/case_water.jpg");
}

#case_centria div.two-column-image {
  background-image: url("/img/cases/centria.jpg");
}

#case_valio div.two-column-image {
  background-image: url("/img/case_valio.jpg");
}

#case_ifae div.two-column-image {
  background-image: url("/img/cases/IFAE_camera.jpeg");
}

#case_helsingin_energia div.two-column-image {
  background-image: url("/img/cases/helen-device.png");
}

#case_metso div.two-column-image {
  background-image: url("/img/cases/metso-machine_cases.jpg");
}

#case_valio___ div.two-column-image {
  background-image: url("/img/cases/valio-teuvo_cases.png");
}

#case_neste_jacobs div.two-column-image {
  background-image: url("/img/cases/nj-NAPCONSimulator_Operators_cases.jpg");
}

/*****************************************************************************/
/*
/* News, Events & Blog
/*
/*****************************************************************************/
.blogpost code {
  tab-size: 2;
  -moz-tab-size: 2;
}

.blog-title {
  display: inline;
}

.blog-title > h1 {
  text-align: left;
  display: inline-block;
}

.blog-title > a {
  width: 32px;
  margin-left: 10px;
  padding-bottom: 5px;
  padding-top: 40px;
  float: right;
}

.news-blog-navigation-links > div {
  padding-left: 30px;
  padding-right: 30px;
  display: flex;
  align-items: center;
}

.blog-posts-wrapper {
  display: flex;
  flex-wrap: nowrap;
}

.blog-writer .highlight-image > img,
.blog-writer .highlight-image {
  margin-top: 0;
  padding-top: 0;
  margin-left: 0;
  padding-left: 0;
}

.blog-writer .box {
  margin-left: 0;
  padding-left: 0;
}

.blog-keywords-block {
  padding: 10px 25px;
  border-radius: 10px;
  background-color: #f4f4f4;
  width: 20%;
  height: 100%;
  margin-left: auto;
  margin-right: 0;
}

.blog-keywords-block a > h3 {
  font-size: 18px;
  margin: 2px 0;
}

.blog-keywords-block a > h3:hover {
  text-decoration: underline;
}

.events-block {
  background-color: whitesmoke;
  padding: 0 40px 40px 40px;
}

.events-wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 1500px;
  margin: 0 auto;
}

.event {
  background-color: white;
  position: relative;
  margin: 5px;
  border-radius: 10px;
  max-width: 600px;
  flex: 1;
}

@media screen and (max-width: 850px) {
  .event {
    max-width: calc(50% - 10px);
  }
}
@media screen and (max-width: 650px) {
  .event {
    max-width: calc(100% - 10px);
  }
}
.event:hover .middle {
  opacity: 1;
}

.event-details {
  padding: 0 20px;
}
.event-details h4,
.event-details p {
  font-size: 1em;
}
.event-details h3 {
  color: #666;
  font-size: 1.5em;
  font-weight: 600;
  margin: 0;
}
.event-details h4 {
  color: #3a6dc0;
  font-weight: 400;
}

.event-img {
  object-fit: cover;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin-bottom: 0;
  height: 200px;
  width: 100%;
}

.spotlight_higlight-title-description {
  margin: 0;
  font-size: 0.85em;
  line-height: 1.2rem;
  color: #3b3b3b;
}

#spotlight .box h4 {
  font-size: 1em;
  font-weight: 600;
}

#blog .a:visited,
#blog h4 a,
#blog a {
  color: #bb0202;
  text-decoration: none;
}

#blog a:hover {
  text-decoration: underline;
}

#news .a:visited,
#news h4 a,
#news a {
  color: #88009b;
  text-decoration: none;
}

.sorting-button {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.sorting-button > p {
  text-align: center;
  border: solid 2px grey;
  padding: 10px;
  font-size: 15px;
  font-weight: 600;
  width: 250px;
  border-radius: 4px;
  margin: 0;
  color: grey;
  cursor: pointer;
}

.news-div,
.blog-div {
  width: 1000px;
  background-color: white;
  max-width: 100%;
  height: 100%;
  padding: 20px 40px;
  margin: 0 auto;
}

.news-wrapper {
  margin-top: 10px;
  width: 100%;
  background-color: white;
}

.blog-wrapper {
  margin-top: 10px;
  width: 100%;
  background-color: white;
}

@media screen and (max-width: 850px) {
  .event-img {
    display: none;
  }
}
@media screen and (max-width: 750px) {
  .news-div-right {
    width: 100%;
    margin-left: 20px;
    padding-right: 40px;
    padding-left: 20px;
  }
  .news-div-left {
    width: 100%;
    padding-left: 40px;
    padding-right: 20px;
    margin-right: 20px;
  }
}
.news-div .box {
  border-bottom: 1px dotted #909090;
  padding-left: 0;
  padding-right: 0;
}

.blog-div .box {
  border-bottom: 1px dotted #909090;
  padding-left: 0;
  padding-right: 10px;
}

.showDetails {
  margin-top: 40px;
  color: #3a6dc0;
  font-weight: 400;
  padding: 20px;
  border-radius: 5px;
  border: 1px solid #3a6dc0;
  cursor: pointer;
  transition: 0.3s ease;
}
.showDetails:hover {
  background-color: #3a6dc0;
  color: white;
}

.actual_highlight_block {
  padding: 10px 10px;
  margin: 10px 5px;
  color: white;
  flex: 1;
  background-color: #f2f2f2;
  border-radius: 10px;
}
.actual_highlight_block h4 {
  color: #08aeef;
}
.actual_highlight_block h3,
.actual_highlight_block p {
  color: black;
}

.actual_highlight_block:hover {
  text-decoration: none;
  background-color: #e3e3e3;
}

h1.news-header {
  font-size: 2.5em;
  font-weight: 300;
  margin-bottom: 10px;
  margin-top: 30px;
  line-height: 1.1em;
  padding-top: 10px;
}

/*****************************************************************************/
/*
/* Random layout stuff
/*
/*****************************************************************************/
.visible {
  visibility: visible;
  transition: 2s ease;
}

.hidden {
  display: none;
  transition: 2s ease;
  visibility: hidden;
}

hr {
  border: 0;
  height: 1px;
  background: #d1d1d1;
}

#photo-aside img {
  max-width: 160px;
  padding: 8px 16px 0;
  max-width: 10rem;
  padding: 0.5rem 1rem 0;
}
#photo-aside p {
  text-align: center;
}

.no-wrap {
  white-space: nowrap;
}

.large-quote {
  font-size: 29px;
  font-size: 1.8rem;
}

.post-content img {
  max-height: 560px;
  max-height: 35rem;
}
.post-content .post-image-float {
  padding: 8px 8px 8px 16px;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
}
@media screen and (min-width: 948px) {
  .post-content .post-image-float {
    float: right;
    max-width: 240px;
    max-width: 15rem;
  }
}
.post-content .post-image-float-left {
  padding: 8px 8px 8px 16px;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
}
@media screen and (min-width: 948px) {
  .post-content .post-image-float-left {
    float: left;
    max-width: 240px;
    max-width: 15rem;
  }
}

#content.gray-bg {
  background-color: #eee;
}

.box {
  background-color: #fff;
  margin: 0;
  padding: 20px 15px 20px 15px;
}
.box p {
  margin: 0;
  color: #4e4e4e;
}
.box li {
  margin: 4px 12px 4px 4px;
  margin: 0.25rem 0.75rem 0.25rem 0.25rem;
  color: #4e4e4e;
}
.box h3 {
  margin: 0;
}
.box h4 {
  margin: 0;
}
.box h5 {
  margin: 24px 8px 12px 12px;
  margin: 1.5rem 0.5rem 0.75rem 0.75rem;
}
.box .link-box {
  background-color: #253746;
}
@media screen and (min-width: 650px) {
  .box {
    margin-bottom: 0;
  }
}

#case-quote,
.case-quote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 24px 0;
  padding: 8px 12px;
  margin: 1.5rem 0;
  padding: 0.5rem 0.75rem;
  quotes: "“" "”" "“" "”";
}

#case-quote:before,
.case-quote:before {
  color: #ccc;
  content: open-quote;
  font-size: 64px;
  line-height: 2px;
  margin-right: 2px;
  vertical-align: -6px;
  font-size: 4rem;
  line-height: 0.1em;
  margin-right: 0.1rem;
  vertical-align: -0.4em;
}

#case-quote p.quote-text,
.case-quote p.quote-text {
  display: inline;
  font-size: 19px;
  line-height: 29px;
  font-size: 1.2rem;
  line-height: 1.8rem;
}

#case-quote p.quote-person,
.case-quote p.quote-person {
  margin: 24px 0 8px 0;
  margin: 1.5rem 0 0.5rem 0;
}

#aside #case-quote p.quote-text,
#aside .case-quote p.quote-text {
  font-size: 15px;
  line-height: 25px;
  font-size: 0.95rem;
  line-height: 1.55rem;
}

#aside #case-quote,
#aside .case-quote {
  background: #ffffff;
}

#aside .quote-person {
  font-size: 15px;
  line-height: 25px;
  font-size: 0.95rem;
  line-height: 1.65rem;
}

p.quote-link {
  margin: 0;
  padding: 0.5rem 0 0;
  font-size: 13px;
  font-size: 0.8rem;
}

.margin-bottom {
  margin-bottom: 8px;
}

p.small-date {
  font-size: 14px;
  font-size: 0.9rem;
  color: #8e8e8e;
}

p.small {
  font-size: 14px;
  font-size: 0.9rem;
  color: #8e8e8e;
  clear: both;
}

p.highlight-small {
  font-size: 0.8rem;
  font-size: 0.8rem;
  color: #8e8e8e;
  clear: both;
  float: right;
  padding-top: 0;
  margin-top: 0;
  padding-left: 7px;
}

.box-side h3 {
  margin-top: 18px;
  font-size: 18px;
  font-size: 1.1rem;
  margin-top: 0.5rem;
  color: #424242;
}
.box-side h4 {
  margin-top: 20px;
  font-size: 16px;
  font-size: 0.95rem;
  color: #6e6e6e;
  font-style: normal;
}
.box-side p,
.box-side li {
  font-size: 14px;
  line-height: 24px;
  font-size: 0.9rem;
  line-height: 1.5rem;
}

.fifty-left {
  margin: 0;
  width: 100%;
}
@media screen and (min-width: 550px) {
  .fifty-left {
    float: left;
    width: 50%;
    padding: 0 8px 0 0;
    padding: 0 0.5rem 0 0;
    clear: left;
  }
}

.fifty-right {
  width: 100%;
  margin: 0;
}
@media screen and (min-width: 550px) {
  .fifty-right {
    float: left;
    width: 50%;
    padding: 0 0 0 8px;
    padding: 0 0 0 0.5rem;
    clear: right;
  }
}

.box-mini {
  width: 100%;
  margin-bottom: 16px;
  padding: 2px 4px;
  margin-bottom: 1rem;
  padding: 0.1rem 0.25rem;
  float: left;
  transition: background-color 0.2s ease-in-out 0s;
}
.box-mini h3 {
  margin-top: 4px;
  font-size: 16px;
  margin-top: 0.25rem;
  font-size: 1rem;
  color: #de7c00;
}
.box-mini p,
.box-mini li {
  font-size: 12px;
  line-height: 18px;
  font-size: 0.75rem;
  line-height: 1.15rem;
}
.box-mini:hover {
  background-color: #eaeaea;
}
.box-mini a {
  text-decoration: none;
}

#product-menu .request-evaluation {
  border: 0;
  border-radius: 4px;
  background: #06aae0;
  background: -webkit-linear-gradient(#06aae0, #08aeef);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#06aae0, #08aeef);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#06aae0, #08aeef);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(#06aae0, #08aeef);
  /* Standard syntax */
  -webkit-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.2);
}
#product-menu .request-evaluation:hover {
  background: #08aeef;
  background: -webkit-linear-gradient(#08aeef, #18beff);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#08aeef, #18beff);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#08aeef, #18beff);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(#08aeef, #18beff);
  /* Standard syntax */
}
#product-menu .request-evaluation h3,
#product-menu .request-evaluation p {
  margin: 0.5rem;
  color: #ffffff;
  font-weight: 500;
}
#product-menu .request-evaluation p {
  font-size: 12px;
  font-size: 0.75rem;
}

#product-menu .purchase-license {
  border: 0;
  border-radius: 4px;
  background: #bf0152;
  background: -webkit-linear-gradient(#bf0152, #cf0162);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#bf0152, #cf0162);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#bf0152, #cf0162);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(#bf0152, #cf0162);
  /* Standard syntax */
  -webkit-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.2);
}
#product-menu .purchase-license:hover {
  background: #cf0162;
  background: -webkit-linear-gradient(#cf0162, #df1172);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#cf0162, #df1172);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#cf0162, #df1172);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(#cf0162, #df1172);
  /* Standard syntax */
}
#product-menu .purchase-license h3,
#product-menu .purchase-license p {
  margin: 0.5rem;
  color: #ffffff;
  font-weight: 500;
}
#product-menu .purchase-license p {
  font-size: 12px;
  font-size: 0.75rem;
}

.box-33 {
  width: 33.33%;
  padding: 0 8px;
  padding: 0 0.5rem;
}

.box-66 {
  width: 66.66%;
  padding: 0 8px;
  padding: 0 0.5rem;
}

.highlight-image {
  float: left;
  width: 160px;
  width: 10rem;
  padding: 12px 8px 8px 20px;
  padding: 0.75rem 0.5rem 0.5rem 1.25rem;
}
.highlight-image img {
  padding: 8px 0;
  padding: 0.5rem 0;
}
@media screen and (min-width: 750px) {
  .highlight-image {
    width: 160px;
    padding-left: 16px;
    width: 10rem;
    padding-left: 1rem;
  }
}

.highlight-text {
  width: 100%;
  clear: both;
  padding: 0 0.5rem;
  padding: 0 8px;
}
@media screen and (min-width: 750px) {
  .highlight-text {
    float: right;
    width: -webkit-calc(100% - 10rem);
    width: -moz-calc(100% - 10rem);
    width: calc(100% - 10rem);
    clear: right;
  }
}

.highlight-box-small {
  display: inline;
}
@media screen and (min-width: 650px) {
  .highlight-box-small {
    width: calc(100% - 3rem);
  }
}
.highlight-box-small .box {
  margin: 8px 0 0;
  margin: 0.75rem 0 0;
}
.highlight-box-small .highlight-image {
  width: 96px;
  width: 6rem;
}
@media screen and (min-width: 650px) {
  .highlight-box-small .highlight-text {
    float: right;
    width: -webkit-calc(100% - 6rem);
    width: -moz-calc(100% - 6rem);
    width: calc(100% - 6rem);
    clear: right;
  }
}

.image-caption {
  font-size: 14px;
  font-size: 0.9rem;
  color: #8e8e8e;
  padding: 4px 16px 24px;
  padding: 0.25rem 1rem 1.5rem;
}

table {
  border-collapse: collapse;
  margin: 4px 8px;
  margin: 0.25rem 0.5rem;
}

td {
  padding: 2px 4px;
  padding: 0.125rem 0.25rem;
}
@media screen and (min-width: 550px) {
  td {
    padding: 4px 8px;
    padding: 0.25rem 0.5rem;
  }
}

table,
th,
td {
  font-size: 13px;
  font-size: 0.8rem;
  border: 1px solid #d1d1d1;
}
@media screen and (min-width: 550px) {
  table,
  th,
  td {
    font-size: 14px;
    font-size: 0.9rem;
  }
}

table.sidedtable,
table.sidedtable th,
table.sidedtable td {
  border: 0;
}

#content #main .highlight-box-small + h2,
#content #main .highlight-box + h2,
#content #main .box + h2 {
  padding-top: 1.5rem;
}

input[type=button] {
  margin: 1rem;
}

input[type=text],
select,
textarea {
  border: 1px solid #d1d1d1;
  height: 32px;
  font-size: 14px;
  height: 2rem;
  font-size: 0.9rem;
  width: 100%;
  padding: 0 0.25rem;
}

textarea {
  height: 200px;
}

table.sidedtable {
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}
table.sidedtable td {
  min-width: 9rem;
}

form.infoForm {
  margin: 0.5rem 1rem 1.5rem;
}
form.infoForm input,
form.infoForm select,
form.infoForm textarea {
  margin-bottom: 0.75rem;
  max-width: 24rem;
  display: block;
}
form.infoForm label {
  color: #6e6e6e;
  font-size: 0.9rem;
}

.product-links {
  float: left;
  margin-right: 1rem;
  clear: both;
  margin: 0.5rem 0.5rem 1rem;
  font-weight: 600;
}
@media screen and (min-width: 650px) {
  .product-links {
    clear: none;
  }
}

.long-separator {
  margin-top: 4rem;
  margin-bottom: 4rem;
  border: 1px solid #d1d1d1;
  border-bottom: 0;
}

strong {
  font-weight: 700;
}

.pdf-link {
  background-image: url(/img/document-icon.png);
  background-repeat: no-repeat;
  background-position: 10px 50%;
  -webkit-background-size: 30px 30px;
  -moz-background-size: 30px 30px;
  background-size: 30px 30px;
  padding: 3px 0 3px 50px;
}

p.alert {
  color: red;
}

.china-and-russia {
  font-size: 17px;
}
@media screen and (min-width: 1045px) {
  .china-and-russia {
    font-size: 13px;
  }
}
@media screen and (min-width: 948px) {
  .china-and-russia {
    font-size: 15px;
  }
}
@media screen and (min-width: 1120px) {
  .china-and-russia {
    font-size: 18px;
  }
}

.small-hr-margin {
  margin: 0.5rem 0;
}

.zero-bottom-margin {
  margin-bottom: 0;
}

.opc-classic_form-header {
  background-color: #4d2da5;
  margin-top: 18px;
  padding: 10px;
}

.opc-classic_form-header h3 {
  color: #fff !important;
  text-align: center;
}

/*****************************************************************************/
/*
/* Grid System
/*
/*****************************************************************************/
.container {
  margin-right: auto;
  margin-left: auto;
}

.container-fluid {
  padding-right: 0;
  padding-left: 0;
  margin-right: auto;
  margin-left: auto;
}

.grid-row {
  margin-bottom: 20px;
}

.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12 {
  float: left;
}

.col-xs-12 {
  width: 100%;
}

.col-xs-11 {
  width: 91.66666667%;
}

.col-xs-10 {
  width: 83.33333333%;
}

.col-xs-9 {
  width: 75%;
}

.col-xs-8 {
  width: 66.66666667%;
}

.col-xs-7 {
  width: 58.33333333%;
}

.col-xs-6 {
  width: 50%;
}

.col-xs-5 {
  width: 41.66666667%;
}

.col-xs-4 {
  width: 33.33333333%;
}

.col-xs-3 {
  width: 25%;
}

.col-xs-2 {
  width: 16.66666667%;
}

.col-xs-1 {
  width: 8.33333333%;
}

.col-xs-pull-12 {
  right: 100%;
}

.col-xs-pull-11 {
  right: 91.66666667%;
}

.col-xs-pull-10 {
  right: 83.33333333%;
}

.col-xs-pull-9 {
  right: 75%;
}

.col-xs-pull-8 {
  right: 66.66666667%;
}

.col-xs-pull-7 {
  right: 58.33333333%;
}

.col-xs-pull-6 {
  right: 50%;
}

.col-xs-pull-5 {
  right: 41.66666667%;
}

.col-xs-pull-4 {
  right: 33.33333333%;
}

.col-xs-pull-3 {
  right: 25%;
}

.col-xs-pull-2 {
  right: 16.66666667%;
}

.col-xs-pull-1 {
  right: 8.33333333%;
}

.col-xs-pull-0 {
  right: auto;
}

.col-xs-push-12 {
  left: 100%;
}

.col-xs-push-11 {
  left: 91.66666667%;
}

.col-xs-push-10 {
  left: 83.33333333%;
}

.col-xs-push-9 {
  left: 75%;
}

.col-xs-push-8 {
  left: 66.66666667%;
}

.col-xs-push-7 {
  left: 58.33333333%;
}

.col-xs-push-6 {
  left: 50%;
}

.col-xs-push-5 {
  left: 41.66666667%;
}

.col-xs-push-4 {
  left: 33.33333333%;
}

.col-xs-push-3 {
  left: 25%;
}

.col-xs-push-2 {
  left: 16.66666667%;
}

.col-xs-push-1 {
  left: 8.33333333%;
}

.col-xs-push-0 {
  left: auto;
}

.col-xs-offset-12 {
  margin-left: 100%;
}

.col-xs-offset-11 {
  margin-left: 91.66666667%;
}

.col-xs-offset-10 {
  margin-left: 83.33333333%;
}

.col-xs-offset-9 {
  margin-left: 75%;
}

.col-xs-offset-8 {
  margin-left: 66.66666667%;
}

.col-xs-offset-7 {
  margin-left: 58.33333333%;
}

.col-xs-offset-6 {
  margin-left: 50%;
}

.col-xs-offset-5 {
  margin-left: 41.66666667%;
}

.col-xs-offset-4 {
  margin-left: 33.33333333%;
}

.col-xs-offset-3 {
  margin-left: 25%;
}

.col-xs-offset-2 {
  margin-left: 16.66666667%;
}

.col-xs-offset-1 {
  margin-left: 8.33333333%;
}

.col-xs-offset-0 {
  margin-left: 0;
}

@media (min-width: 768px) {
  .col-sm-1,
  .col-sm-2,
  .col-sm-3,
  .col-sm-4,
  .col-sm-5,
  .col-sm-6,
  .col-sm-7,
  .col-sm-8,
  .col-sm-9,
  .col-sm-10,
  .col-sm-11,
  .col-sm-12 {
    float: left;
  }
  .col-sm-12 {
    width: 100%;
  }
  .col-sm-11 {
    width: 91.66666667%;
  }
  .col-sm-10 {
    width: 83.33333333%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-8 {
    width: 66.66666667%;
  }
  .col-sm-7 {
    width: 58.33333333%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-5 {
    width: 41.66666667%;
  }
  .col-sm-4 {
    width: 33.33333333%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-2 {
    width: 16.66666667%;
  }
  .col-sm-1 {
    width: 8.33333333%;
  }
  .col-sm-pull-12 {
    right: 100%;
  }
  .col-sm-pull-11 {
    right: 91.66666667%;
  }
  .col-sm-pull-10 {
    right: 83.33333333%;
  }
  .col-sm-pull-9 {
    right: 75%;
  }
  .col-sm-pull-8 {
    right: 66.66666667%;
  }
  .col-sm-pull-7 {
    right: 58.33333333%;
  }
  .col-sm-pull-6 {
    right: 50%;
  }
  .col-sm-pull-5 {
    right: 41.66666667%;
  }
  .col-sm-pull-4 {
    right: 33.33333333%;
  }
  .col-sm-pull-3 {
    right: 25%;
  }
  .col-sm-pull-2 {
    right: 16.66666667%;
  }
  .col-sm-pull-1 {
    right: 8.33333333%;
  }
  .col-sm-pull-0 {
    right: auto;
  }
  .col-sm-push-12 {
    left: 100%;
  }
  .col-sm-push-11 {
    left: 91.66666667%;
  }
  .col-sm-push-10 {
    left: 83.33333333%;
  }
  .col-sm-push-9 {
    left: 75%;
  }
  .col-sm-push-8 {
    left: 66.66666667%;
  }
  .col-sm-push-7 {
    left: 58.33333333%;
  }
  .col-sm-push-6 {
    left: 50%;
  }
  .col-sm-push-5 {
    left: 41.66666667%;
  }
  .col-sm-push-4 {
    left: 33.33333333%;
  }
  .col-sm-push-3 {
    left: 25%;
  }
  .col-sm-push-2 {
    left: 16.66666667%;
  }
  .col-sm-push-1 {
    left: 8.33333333%;
  }
  .col-sm-push-0 {
    left: auto;
  }
  .col-sm-offset-12 {
    margin-left: 100%;
  }
  .col-sm-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-sm-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-sm-offset-9 {
    margin-left: 75%;
  }
  .col-sm-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-sm-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-sm-offset-6 {
    margin-left: 50%;
  }
  .col-sm-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-sm-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-sm-offset-3 {
    margin-left: 25%;
  }
  .col-sm-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-sm-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-sm-offset-0 {
    margin-left: 0;
  }
}
@media (min-width: 992px) {
  .col-md-1,
  .col-md-2,
  .col-md-3,
  .col-md-4,
  .col-md-5,
  .col-md-6,
  .col-md-7,
  .col-md-8,
  .col-md-9,
  .col-md-10,
  .col-md-11,
  .col-md-12 {
    float: left;
  }
  .col-md-12 {
    width: 100%;
  }
  .col-md-11 {
    width: 91.66666667%;
  }
  .col-md-10 {
    width: 83.33333333%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-8 {
    width: 66.66666667%;
  }
  .col-md-7 {
    width: 58.33333333%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-5 {
    width: 41.66666667%;
  }
  .col-md-4 {
    width: 33.33333333%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-2 {
    width: 16.66666667%;
  }
  .col-md-1 {
    width: 8.33333333%;
  }
  .col-md-pull-12 {
    right: 100%;
  }
  .col-md-pull-11 {
    right: 91.66666667%;
  }
  .col-md-pull-10 {
    right: 83.33333333%;
  }
  .col-md-pull-9 {
    right: 75%;
  }
  .col-md-pull-8 {
    right: 66.66666667%;
  }
  .col-md-pull-7 {
    right: 58.33333333%;
  }
  .col-md-pull-6 {
    right: 50%;
  }
  .col-md-pull-5 {
    right: 41.66666667%;
  }
  .col-md-pull-4 {
    right: 33.33333333%;
  }
  .col-md-pull-3 {
    right: 25%;
  }
  .col-md-pull-2 {
    right: 16.66666667%;
  }
  .col-md-pull-1 {
    right: 8.33333333%;
  }
  .col-md-pull-0 {
    right: auto;
  }
  .col-md-push-12 {
    left: 100%;
  }
  .col-md-push-11 {
    left: 91.66666667%;
  }
  .col-md-push-10 {
    left: 83.33333333%;
  }
  .col-md-push-9 {
    left: 75%;
  }
  .col-md-push-8 {
    left: 66.66666667%;
  }
  .col-md-push-7 {
    left: 58.33333333%;
  }
  .col-md-push-6 {
    left: 50%;
  }
  .col-md-push-5 {
    left: 41.66666667%;
  }
  .col-md-push-4 {
    left: 33.33333333%;
  }
  .col-md-push-3 {
    left: 25%;
  }
  .col-md-push-2 {
    left: 16.66666667%;
  }
  .col-md-push-1 {
    left: 8.33333333%;
  }
  .col-md-push-0 {
    left: auto;
  }
  .col-md-offset-12 {
    margin-left: 100%;
  }
  .col-md-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-md-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-md-offset-9 {
    margin-left: 75%;
  }
  .col-md-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-md-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-md-offset-6 {
    margin-left: 50%;
  }
  .col-md-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-md-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-md-offset-3 {
    margin-left: 25%;
  }
  .col-md-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-md-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-md-offset-0 {
    margin-left: 0;
  }
}
@media (min-width: 1200px) {
  .col-lg-1,
  .col-lg-2,
  .col-lg-3,
  .col-lg-4,
  .col-lg-5,
  .col-lg-6,
  .col-lg-7,
  .col-lg-8,
  .col-lg-9,
  .col-lg-10,
  .col-lg-11,
  .col-lg-12 {
    float: left;
  }
  .col-lg-12 {
    width: 100%;
  }
  .col-lg-11 {
    width: 91.66666667%;
  }
  .col-lg-10 {
    width: 83.33333333%;
  }
  .col-lg-9 {
    width: 75%;
  }
  .col-lg-8 {
    width: 66.66666667%;
  }
  .col-lg-7 {
    width: 58.33333333%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-5 {
    width: 41.66666667%;
  }
  .col-lg-4 {
    width: 33.33333333%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-2 {
    width: 16.66666667%;
  }
  .col-lg-1 {
    width: 8.33333333%;
  }
  .col-lg-pull-12 {
    right: 100%;
  }
  .col-lg-pull-11 {
    right: 91.66666667%;
  }
  .col-lg-pull-10 {
    right: 83.33333333%;
  }
  .col-lg-pull-9 {
    right: 75%;
  }
  .col-lg-pull-8 {
    right: 66.66666667%;
  }
  .col-lg-pull-7 {
    right: 58.33333333%;
  }
  .col-lg-pull-6 {
    right: 50%;
  }
  .col-lg-pull-5 {
    right: 41.66666667%;
  }
  .col-lg-pull-4 {
    right: 33.33333333%;
  }
  .col-lg-pull-3 {
    right: 25%;
  }
  .col-lg-pull-2 {
    right: 16.66666667%;
  }
  .col-lg-pull-1 {
    right: 8.33333333%;
  }
  .col-lg-pull-0 {
    right: auto;
  }
  .col-lg-push-12 {
    left: 100%;
  }
  .col-lg-push-11 {
    left: 91.66666667%;
  }
  .col-lg-push-10 {
    left: 83.33333333%;
  }
  .col-lg-push-9 {
    left: 75%;
  }
  .col-lg-push-8 {
    left: 66.66666667%;
  }
  .col-lg-push-7 {
    left: 58.33333333%;
  }
  .col-lg-push-6 {
    left: 50%;
  }
  .col-lg-push-5 {
    left: 41.66666667%;
  }
  .col-lg-push-4 {
    left: 33.33333333%;
  }
  .col-lg-push-3 {
    left: 25%;
  }
  .col-lg-push-2 {
    left: 16.66666667%;
  }
  .col-lg-push-1 {
    left: 8.33333333%;
  }
  .col-lg-push-0 {
    left: auto;
  }
  .col-lg-offset-12 {
    margin-left: 100%;
  }
  .col-lg-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-lg-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-lg-offset-9 {
    margin-left: 75%;
  }
  .col-lg-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-lg-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-lg-offset-6 {
    margin-left: 50%;
  }
  .col-lg-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-lg-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-lg-offset-3 {
    margin-left: 25%;
  }
  .col-lg-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-lg-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-lg-offset-0 {
    margin-left: 0;
  }
}
.col-no-margin {
  margin: 0;
  padding: 0;
}

/**
 * ----------------------------------------
 * animation kenburns-top
 * ----------------------------------------
 */
.kenburns-top {
  -webkit-animation: kenburns-top 5s ease-out both;
  animation: kenburns-top 5s ease-out both;
}

@-webkit-keyframes kenburns-top {
  0% {
    -webkit-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
    transform-origin: 50% 16%;
  }
  100% {
    -webkit-transform: scale(1.25) translateY(-15px);
    transform: scale(1.25) translateY(-15px);
    -webkit-transform-origin: top;
    transform-origin: top;
  }
}
@keyframes kenburns-top {
  0% {
    -webkit-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
    transform-origin: 50% 16%;
  }
  100% {
    -webkit-transform: scale(1.25) translateY(-15px);
    transform: scale(1.25) translateY(-15px);
    -webkit-transform-origin: top;
    transform-origin: top;
  }
}
/**
 * ----------------------------------------
 * animation text-blur-in
 * ----------------------------------------
 */
.text-blur-in {
  -webkit-animation: text-blur-in 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
  animation: text-blur-in 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

@-webkit-keyframes text-blur-in {
  0% {
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}
@keyframes text-blur-in {
  0% {
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}
/**
 * ----------------------------------------
 * animation text-blur-out
 * ----------------------------------------
 */
.text-blur-out {
  -webkit-animation: text-blur-out 1.2s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
  animation: text-blur-out 1.2s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

@-webkit-keyframes text-blur-out {
  0% {
    -webkit-filter: blur(0.01);
    filter: blur(0.01);
  }
  100% {
    -webkit-filter: blur(12px) opacity(0%);
    filter: blur(12px) opacity(0%);
  }
}
@keyframes text-blur-out {
  0% {
    -webkit-filter: blur(0.01);
    filter: blur(0.01);
  }
  100% {
    -webkit-filter: blur(12px) opacity(0%);
    filter: blur(12px) opacity(0%);
  }
}

/*# sourceMappingURL=main.css.map */