/*IMPORT SCSS*/
/*-------------------------------------------*/
/*-------------------------------------------*/
/* FONTS */
/*-------------------------------------------*/
/*-------------------------------------------*/
/* COLORS */
/*-------------------------------------------*/
/*-------------------------------------------*/
section#main-content .featured-img { margin-top: 160px; }

section#main-content .img-with-buttons a { position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 180px; }

section#main-content .img-with-buttons.bottom-button a { top: auto; bottom: 60px; width: 280px; max-width: calc(100% - 40px); -ms-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); }

section#main-content #pv .steps-column { background: url("../images/pv.jpg") center center/cover; }

section#main-content #pc .steps-column { background: url("../images/pc.jpg") center center/cover; }

section#main-content #gdpmd-certification .steps-column { background-color: #333; }

section#main-content .steps-column { position: relative; }

section#main-content .steps-column.transparent-bg { background-color: rgba(0, 0, 0, 0.8); }

section#main-content .steps-column .certs { min-height: 750px; }

section#main-content .steps-column .step { font-family: "Roboto", sans-serif; border: 1px dashed #cc0000; border-radius: 30px; min-height: 110px; position: relative; max-width: 270px; }

section#main-content .steps-column .step span:not(.invisible) { position: absolute; left: 16px; width: calc(100% - 32px); top: 50%; display: block; -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); transform: translate(0, -50%); }

section#main-content .steps-column .step:not(:last-child) { margin-bottom: 50px; }

section#main-content .steps-column .step:not(:last-child):after { content: url("../images/icons/up-arrow.png"); bottom: -47px; left: 50%; position: absolute; -ms-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); }

section#main-content .gray-bg { position: relative; background-color: #f7f5f5; }

section#main-content .gray-bg:before { content: ""; display: block; position: absolute; top: 0; height: 100%; background-color: #f7f5f5; right: -9999px; width: 9999px; z-index: -1; }

section#main-content .gray-bg .cert-tabs .cert-tab { cursor: pointer; color: #999; line-height: 1; font-size: 22px; -ms-transition: all ease 0.3s; /* IE 9 */ -webkit-transition: all ease 0.3s; /* Safari */ transition: all ease 0.3s; }

section#main-content .gray-bg .cert-tabs .cert-tab:hover { color: #666; }

section#main-content .gray-bg .cert-tabs .cert-tab.active { pointer-events: none; color: #cc0000; }

section#main-content .gray-bg .cert-tabs .cert-tab:first-child { border-right: 2px solid #999; }

section#main-content .gray-bg .cert-tabs .cert-tab:nth-child(3) { border-left: 2px solid #999; }

section#main-content .steps-tabs span { position: relative; color: #999; cursor: pointer; background-color: #666; width: 50%; }

section#main-content .steps-tabs span:hover { background-color: #555; }

section#main-content .steps-tabs span.active { color: #fff; pointer-events: none; background-color: #cc0000; }

section#main-content .system-cert-bg { position: absolute; width: calc(66.666667% - 45px); right: 0; top: 0; height: 100%; background-image: url("../images/system-certification.jpg"); background-size: cover; z-index: -1; }

@media (min-width: 1920px) { section#main-content .system-cert-bg { width: calc(66.666667% - 60px); } }

@media (max-width: 1299px) { section#main-content .system-cert-bg { width: calc(66.666667% - 25px); } }

@media (max-width: 1199px) and (min-width: 992px) { section#main-content .gray-bg .cert-tabs .cert-tab { font-size: 16px; } }

@media (max-width: 991px) { section#main-content .featured-img { margin-top: 0; height: 100%; }
  section#main-content .steps-column.transparent-bg { margin-left: -30px; margin-right: -30px; width: calc(100% + 60px); }
  .add-bg-image:before { content: ""; display: block; position: absolute; left: -15px; top: 0; height: 100%; width: calc(100%  + 30px); background: url("../images/system-certification.jpg") right center/cover; }
  .img-with-buttons img { margin-left: -30px; width: calc(100% + 30px) !important; max-width: unset; }
  section#main-content .steps-column { margin-left: -30px; -webkit-box-flex: 0; -webkit-flex: 0 0 calc(50% + 30px); -ms-flex: 0 0 calc(50% + 30px); flex: 0 0 calc(50% + 30px); max-width: calc(50% + 30px); }
  .steps-column:before { content: ""; display: block; position: absolute; top: 0; height: 100%; background-color: #1c1c1c; left: -40px; width: 9999px; z-index: -1; } }

@media (min-width: 992px) { .steps-tabs { margin-left: -24px; margin-right: -24px; } }

@media (max-width: 880px) and (min-width: 768px) { section#main-content .gray-bg .cert-tabs .cert-tab { font-size: 16px; } }

@media (max-width: 767px) and (min-width: 576px) { section#main-content .gray-bg .cert-tabs .cert-tab { font-size: 14px; } }

@media (max-width: 767px) { section#main-content .overview { max-width: 400px; margin-left: auto; margin-right: auto; }
  .gray-bg:before { left: -30px; right: auto !important; }
  .add-bg-image { padding-left: 0; padding-right: 0; } }

@media (max-width: 575px) { .img-with-buttons img { margin-left: -30px; margin-right: -30px; width: calc(100% + 60px) !important; max-width: unset; }
  section#main-content .steps-column { margin-left: -30px; margin-right: -30px; -webkit-box-flex: 0; -webkit-flex: 0 0 calc(100% + 60px); -ms-flex: 0 0 calc(100% + 60px); flex: 0 0 calc(100% + 60px); max-width: calc(100% + 60px); }
  .steps-tabs { margin-left: 25px; margin-right: 25px; } }

@media (max-width: 376px) { section#main-content .steps-tabs span { width: 100%; }
  section#main-content .gray-bg .cert-tabs .cert-tab { font-size: 14px; } }