.five-steps-approach h2 {
 padding:0;
 margin:0 0 .1em 0;
}

.five-steps-approach h3 {
 padding:0;
 margin:0 0 .7em 0;
 font-size: 2em;
}

.five-steps-approach > header > p
 {
 font-size: 1.2em;
}

.five-steps-approach-block {
  margin-top: 2.5em;
}

/* Five Steps graphic starts - small devices */
.main-five-steps-graphic-en { background-image: url('../sa_img/five_step_approach.png'); }
.main-five-steps-graphic-fr { background-image: url('../sa_img/five_step_approach_f.png'); }
.main-five-steps-graphic
    {
  position: relative;
  background-size: contain;
  background-repeat: no-repeat;
  padding: 0;
  margin: 2em auto 2em auto;
  height:200px;
  background-position: top center;
    }
/* Five Steps graphic ends - small devices */
/* Five Steps graphic starts - medium devices */
@media screen and (min-width:480px) {
.main-five-steps-graphic
    {
  max-width: 100%;
  max-height: auto;
  width: 667px;
  height:400px;
  }
}
/* Five Steps graphic ends - medium devices */
/* Five Steps graphic starts - large devices */
@media screen and (min-width:1024px) {
.main-five-steps-graphic
    {
  width: 667px;
  height:665px;
  }
}
/* Five Steps graphic ends - large devices */

.five-steps-approach-block .five-steps-desc-line {
  font-size:1.2em;
}
.tip-hover {
    color:#666;
}
/* Hiding TIP text from small devices which don't support mouse-overing - i.e iPhone*/
  .tip-hover {
      display: none;
  }
/* Showing Five Steps image descriptions below the image because mouse-overing don't work on small devices - i.e iPhone*/
  .five-steps-desc-block-alt {
    display:block;
    text-align: left;
  }
  .five-steps-desc-block-alt > li  {
    margin-bottom:1rem;
  }
  .five-steps-desc-block-alt > li > span  {
    font-weight:700;
  }
/* Hiding Five Steps image descriptions utilizing mouse-overing from small devices which don't support mouse-overing - i.e iPhone*/
.main-five-steps-graphic > * {
  display:none;
}
/* Reset normal TIP text for medium devices - i.e iPad minis and larger */
@media screen and (min-width:640px) {
  .tip-hover {
      display: block;
  }
  /* Reset normal Five Steps image descriptiong utilizing mouse-hovering for medium devices - i.e iPad minis and larger */
  .main-five-steps-graphic > * {
    display:block;
  }
/* Hide Five Steps image alternate (standalone) descriptions from medium devices and larger */
.five-steps-desc-block-alt {
  display:none;
}

}
/* Five Steps image description with mouse-hovering for medium devices block  START */
@media screen and (min-width:640px) {
.main-five-steps-desc {
  position: absolute;
  display: table;
  background-color: rgba(0,0,0,0.7);
  color: #fff;
  font-size: .9em;
  line-height: 1.5;
  width: 160px;
  height: 120px;
  padding: .5em;
  margin: 0;
  text-align: left;
  border-radius: 5px;
  opacity: 0;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}
 .main-five-steps-graphic .hotspot {
    position: absolute;
    height: 120px; width: 150px;
}
.main-five-steps-graphic .hotspot + * {
    pointer-events: none;
    opacity: 0;
}
.main-five-steps-graphic .hotspot:hover + * {
    opacity: 1.0;
}


.main-five-steps-graphic .hotspot-learn {
   top: 0;
   left: 340px;
   right:0;
   bottom:0;
}
.main-five-steps-graphic .hotspot-organize {
   top: 175px;
   left: 390px;
   right:0;
   bottom:0;
}
.main-five-steps-graphic .hotspot-assess {
   top: 300px;
   left: 245px;
   right:0;
   bottom:0;
}
 .main-five-steps-graphic .hotspot-change {
   top: 180px;
   left: 90px;
   right:0;
   bottom:0;
}
.main-five-steps-graphic .hotspot-evaluate {
   top: 10px;
   left: 130px;
   right:0;
   bottom:0;
}
.main-five-steps-graphic #learn-five-steps
 {
  top:-10px;
  right:0;
  bottom:0;
  left:360px;
  }
.main-five-steps-graphic #organize-five-steps
 {
  top:205px;
  right:0;
  bottom:0;
  left:360px;
 }
 .main-five-steps-graphic #assess-five-steps
 {
  top:300px;
  right:0;
  bottom:0;
  left:225px;
 }
 .main-five-steps-graphic #change-five-steps
 {
  top:160px;
  right:0;
  bottom:0;
  left:20px;
 }
 .main-five-steps-graphic #evaluate-five-steps
 {
  top:-25px;
  right:0;
  bottom:0;
  left:30px;
 }

.main-five-steps-graphic #learn-five-steps:hover,
.main-five-steps-graphic #organize-five-steps:hover,
.main-five-steps-graphic #change-five-steps:hover,
.main-five-steps-graphic #assess-five-steps:hover,
.main-five-steps-graphic #evaluate-five-steps:hover
 {
 opacity:1;
  }

}
/* Five Steps image description with mouse-hovering for medium devices block ENDS */
/* Five Steps image description with mouse-hovering for large devices block  STARTS */
@media screen and (min-width:1024px) {

.main-five-steps-graphic .hotspot-learn {
   top: 100px;
   left: 450px;
   right:0;
   bottom:0;
}
.main-five-steps-graphic .hotspot-organize {
   top: 350px;
   left: 480px;
   right:0;
   bottom:0;
}
.main-five-steps-graphic .hotspot-assess {
   top: 500px;
   left: 230px;
   right:0;
   bottom:0;
}
 .main-five-steps-graphic .hotspot-change {
   top: 280px;
   left: 20px;
   right:0;
   bottom:0;
}
.main-five-steps-graphic .hotspot-evaluate {
   top: 50px;
   left: 130px;
   right:0;
   bottom:0;
}
.main-five-steps-graphic #learn-five-steps
 {
  top:48px;
  right:0;
  bottom:0;
  left:560px;
  }
.main-five-steps-graphic #organize-five-steps
 {
  top:400px;
  right:0;
  bottom:0;
  left:560px;
 }
 .main-five-steps-graphic #assess-five-steps
 {
  top:560px;
  right:0;
  bottom:0;
  left:195px;
 }
 .main-five-steps-graphic #change-five-steps
 {
  top:275px;
  right:0;
  bottom:0;
  left:-100px;
 }
 .main-five-steps-graphic #evaluate-five-steps
 {
  top:-2px;
  right:0;
  bottom:0;
  left:-100px;
 }
}
/* Five Steps image description with mouse-hovering for large devices block  ENDS */

  .next-prev-block {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: flex-start;
  -webkit-align-items: flex-start;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  flex-wrap: wrap;
  padding:0;
  margin:3em auto 1em auto;
  width:50%;
  }

  .next-prev-item {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  padding:0;
  margin:1em;
    }

.next-prev-item  a button {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    width: 150px;
    color: #fff;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
  /* border-radius: 4px;*/
   text-transform: uppercase;
}

.next-prev-item a button:hover {
    background-color: #B4002A;
    text-decoration: none;
}
.next-prev-item:first-of-type a button:hover {
    background-color: rgba(175,175,175,.99);
    text-decoration: none;
}

/* Five step approach secondary pages START*/


/* secondary navbar for Five step approach pages START  */
.five-steps-approach .nav-copsoq-container,
.five-steps-approach .nav-copsoq-container-bttm
 {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: flex-end;
  -webkit-align-items: flex-end;
  -webkit-justify-content: space-between;
  justify-content:space-between;
  flex-wrap: wrap;
  padding: 0;
  /*margin:0 auto;*/
  width:90%;
}
.five-steps-approach .nav-copsoq-container
 {
  margin:0 auto;
}

.five-steps-approach .nav-copsoq-container-bttm
 {
  margin:0 auto 4rem auto;
}

.five-steps-approach .nav-copsoq-container > li.active,
.five-steps-approach .nav-copsoq-container-bttm > li.active
 {
    border-top: none;
}

.five-steps-approach .nav-copsoq-container-item,
.five-steps-approach .nav-copsoq-container-item-bttm
 {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  display: inline-block;
  padding:0 .8em 0 .8em;
  text-transform: uppercase;
    }
.five-steps-approach .nav-copsoq-container-item
 {
  margin:0 0 .6em 0;
    }
.five-steps-approach .nav-copsoq-container-item-bttm
 {
  margin:.6em 0 0 0;
    }


.five-steps-approach .nav-copsoq-container > .nav-copsoq-container-item > a,
.five-steps-approach .nav-copsoq-container-bttm > .nav-copsoq-container-item-bttm > a
 {
  border: none;
  border-radius: 0;
  padding:0;
  margin:0 auto;
  /*color: #9B9B9B;*/
  color: #666;
  text-align:center;
}

.five-steps-approach .nav-copsoq-container .nav-copsoq-container-item.active,
.five-steps-approach .nav-copsoq-container-bttm .nav-copsoq-container-item-bttm.active
 {
color: #000;
font-weight:bold;
padding:0 .8em 0 .8em;
margin:0;
}

.five-steps-approach .nav-copsoq-container .nav-copsoq-container-item.active
 {
border-bottom: solid 0.6em #E10034;
}
.five-steps-approach .nav-copsoq-container-bttm .nav-copsoq-container-item-bttm.active
 {
border-top: solid 0.6em #E10034;
}


.five-steps-approach .nav-copsoq-container > li.active:hover,
.five-steps-approach .nav-copsoq-container-bttm > li.active:hover
 {
text-decoration:none;
}
.five-steps-approach .nav-copsoq-container > li a:hover,
.five-steps-approach .nav-copsoq-container-bttm > li a:hover
 {
/*border-top: solid 0.6em #E10034;*/
text-decoration:none;
color: #000000;
}
/* secondary navbar for Five step approach pages START  */

/*Secondary navbars end*/


.intro-block {
  display: block;
  margin:0 auto 2rem auto;
  text-align: center;
  padding:0;
  }
  .intro-block ul {
    text-align: left;
    }
  @media only screen and (min-width:600px) {
    .intro-block {
      display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
      display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
      display: -ms-flexbox; /* TWEENER - IE 10 */
      display: -webkit-flex; /* NEW - Chrome */
      display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
      flex-direction: row;
      align-items: center;
      -webkit-align-items: center;
      -webkit-justify-content: space-around;
      justify-content: space-around;
      flex-wrap: wrap;
      text-align: left;
      padding:0;
      max-height: 195px;
      margin:1em auto;
      }
  }
  @media only screen and (min-width: 680px) {
    .intro-block {
      max-height: 225px;
    }
  }

@media only screen and (min-width: 992px) {
  .intro-block {
    max-height: 274px;
  }
}
@media only screen and (min-width: 1200px) {
  .intro-block {
    max-height: auto;
  }
}
  .intro-block .desc {
    display: block;
    margin:0 auto;
    width:100%;
    text-align: center;
    padding:0;
    }

@media only screen and (min-width:400px) {
  .intro-block .desc {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: flex-start;
  -webkit-align-items: flex-start;
  padding:0;
  margin:0;
  flex: 2;
  text-align: left;
  align-self: flex-start;
    }
}

 .intro-block .desc span.sa-number-1 {
    background-image: url('../sa_img/1_sm.png');
    background-size:contain;
}
.intro-block .desc span.sa-number-2 {
    background-image: url('../sa_img/2_sm.png');
    background-size:contain;
}
.intro-block .desc span.sa-number-3 {
    background-image: url('../sa_img/3_sm.png');
    background-size:contain;
}
.intro-block .desc span.sa-number-4 {
    background-image: url('../sa_img/4_sm.png');
    background-size:contain;
}
.intro-block .desc span.sa-number-5 {
    background-image: url('../sa_img/5_sm.png');
    background-size:contain;
}


.intro-block .desc .sa-started-number {
  width: 3.5em;
  height: 3.5em;
  background-size: 3.5em;
    display: inline-block;
    margin-top: 1rem;
    background-position: 0% 0%;
    background-repeat: no-repeat;
}
/*@media only screen and (min-width:400px) {
.intro-block .desc .sa-started-number {
    margin-top: 1.1em;
}
}*/

.intro-block .desc .title-and-items {
 margin: .8em 0 0 .8em;
}
.intro-block .desc .title-and-items h3 {
 margin: 0;
 font-size: 3em;
 color: #E10034;
}
.intro-block .desc .title-and-items ul {
 margin-top: .5em;
 padding-top: 0;
 line-height: 1.8;
}

.intro-block .desc .title-and-items a,
.intro-block .desc .title-and-items a:link,
.intro-block .desc .title-and-items a:visited,
.intro-block .desc .title-and-items a:active
 {
  text-decoration:none;
  color: #000;
}
.intro-block .desc .title-and-items a:hover
 {
  color: #E10034;
}

.title-and-items li {
position: relative;
padding-left: 1.5em;
}
.title-and-items ul li::before
{
  position: absolute;
  top:.6em;
  bottom:0;
  left:0;
  right: 0;
  content: "";
  width: 0;
  height: 0;
  margin: 0;
  border-top: 10px solid #E10034;
  border-bottom: 10px solid transparent;

  border-left:8px solid transparent;
  border-right:8px solid transparent;
}

/*.sa-main-site-content .show-comparison .panel-heading a.collapsed
{
  background-image: url('../../stress_assess_survey/files/sa_img/redArrow_dwn.png');
}*/


 .intro-block .graph-thumb {
  display:block;
  padding:0;
  margin:0 auto;
  background-size: contain;
  background-repeat: no-repeat;
  width: 274px;
  height: 274px;
  max-width: 90%;
  max-height: 274px;
  min-height: auto;
    }

@media only screen and (min-width:600px) {
  .intro-block .graph-thumb {
   display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
   display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
   display: -ms-flexbox; /* TWEENER - IE 10 */
   display: -webkit-flex; /* NEW - Chrome */
   display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
   padding:0;
   margin:0;
   flex: 1;
   /*max-width: 100%;*/
   /*max-height: 100%;*/
     }
}
@media only screen and (min-width:1200px) {
  .intro-block .graph-thumb {
   background-position: center right;
   max-width: 100%;
   max-height: 100%;
      }
}
    .intro-block .learn-graph-thumb-en { background-image: url('../sa_img/five_step_learn.png'); }
    .intro-block .organize-graph-thumb-en { background-image: url('../sa_img/fiveStep_organize.png'); }
    .intro-block .change-graph-thumb-en { background-image: url('../sa_img/fiveStep_change.png'); }
    .intro-block .evaluate-graph-thumb-en { background-image: url('../sa_img/fiveStep_evaluate.png'); }
    .intro-block .assess-graph-thumb-en { background-image: url('../sa_img/fiveStep_assess.png'); }

    .intro-block .learn-graph-thumb-fr { background-image: url('../sa_img/five_step_learn_f.png'); }
    .intro-block .organize-graph-thumb-fr { background-image: url('../sa_img/fiveStep_organize_f.png'); }
    .intro-block .change-graph-thumb-fr { background-image: url('../sa_img/fiveStep_change_f.png'); }
    .intro-block .evaluate-graph-thumb-fr { background-image: url('../sa_img/fiveStep_evaluate_f.png'); }
    .intro-block .assess-graph-thumb-fr { background-image: url('../sa_img/fiveStep_assess_f.png'); }

/* Basics feelings section STARTS */
/*.five-steps-approach .basics p {

}*/
.five-steps-approach header > h4 {
padding:.2em .9em;
margin: 0;
font-size: 2.2em;
}

.five-approaches-inner-content {
padding: 0 2em;
margin: 0 auto;
}
.five-approaches-inner-content p {
font-size: 1.1em;
}
.five-approaches-inner-content p.attention-text {
 font-size: 2em;
 line-height: 1.2;
 padding: 4rem 0 1rem 0;
 }
 .five-approaches-inner-content p.attention-text-smaller {
 font-size: 1.3em !important;
 line-height: 1.2;
 font-weight: 400;
 width:80%;
 margin:1.2em auto;
 }


.five-approaches-inner-content > h5 {
padding: 0;
margin: 0 0 1em 0;
font-style: italic;
font-size: 1.5em;
font-weight: bold;
}

article.basics,
article.deepen-understanding,
article.share-awareness,
article.identify-resources,
article.select-tools,
article.ready-for-change,
article.pick-key-issues,
article.cannot-alone,
article.recognize-change,
article.raise-awareness,
article.review-ideas,
article.select-changes,
article.take-time-to-implement,
article.what-worked,
article.identify-strength,
article.survey-fatigue
 {
  margin-bottom: 5rem;
}
article.identify-resources {
  background-color: white;
}
article.identify-resources .five-approaches-inner-content {
  background-color: white;
  padding: 0 2em 2em 2em;
}
article.identify-resources .five-approaches-inner-content section {
  padding: 1em;
  margin: 0 0 2em 0;
}
/*article.identify-resources .five-approaches-inner-content section:nth-child(odd) {
background: #EAEAEA;
}*/
article.identify-resources .five-approaches-inner-content section:nth-child(even) {
background: #EAEAEA;
}

article.identify-resources .five-approaches-inner-content section:first-child {
  margin-top: 2em;
}
article.identify-resources .five-approaches-inner-content section:last-child {
  margin-bottom: 2em;
}

article.identify-resources .five-approaches-inner-content section h5 {
  font-size: 1.1em;
  font-weight: bold;
}
article.identify-resources .five-approaches-inner-content section p,
article.identify-resources .five-approaches-inner-content section ul
{
  font-size: 1.2em;
}
article.identify-resources .five-approaches-inner-content section ul
{
  font-weight: bold;
}
article.identify-resources .five-approaches-inner-content section img {
  text-align: center;
  margin:0 auto;
}



.basics .five-approaches-inner-content > h5 + p {
padding: 0;
margin: 0 0 .6em 0;
/*font-size: 1.2em;*/
}
.deepen-understanding header + p,
.identify-resources header + p
 {
font-size: 1.1em;
padding: 0 2em;
}

/* Basics feelings container */
.basics-container {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: flex-start;
  -webkit-align-items: flex-start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  max-width:1000px;
  width: 100%;
}

.basics-container-item {
 flex:1 0 220px;
 margin: 0 1em 0 0;
 align-self: stretch;
}
.basics-container p {
 min-width: 200px;
 margin: .5em auto;
 /*font-size: 1.2em;*/
}
.basics-container img {
max-width:100%;
height:auto;
margin: 0 auto;
}
@supports (display: grid)
{
    .basics-container {
     display: grid;
     grid-gap: 20px;
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     justify-content: center;
     justify-items: center;
     margin:0;
     padding:0;
     }
     .basics-container-item {
      margin: 0;
     }
}
/* Hazards icons container */
.five-approaches-inner-content .hazards-icons-block {
 margin-top: 2rem;
}

.hazards-icons-block p {
 margin-top: 2rem;
}
.hazards-icons-container {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: flex-start;
  -webkit-align-items: flex-start;
  -webkit-justify-content: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0;
  margin: 0 auto;
  max-width:1000px;
  width: 80%;
  text-align: center;
}

.hazards-icons-container-item {
 flex:1 0 150px;
 margin: .5em .5em;
 align-self: stretch;
 text-align: center;
}
.hazards-icons-container-item img {
margin: 0 auto;
}
.hazards-icons-container p {
 min-width: 133px;
 text-align: center;
 margin: .5em auto;
 font-weight: bold;
}
/* Hazards icons CSS Grid for small devices STARTS */
/* Hazards icons CSS Grid for browsers which support CSS Grid STARTS */
@supports (display: grid)
{
    .hazards-icons-container {
   display: grid;
   grid-gap: 20px;
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   /*grid-template-rows: repeat(2, auto);*/
   width: auto;
     }
}
/* Hazards icons CSS Grid for browsers which support CSS Grid ENDS */
/* Hazards icons CSS Grid for small devices ENDS */
/* Hazards icons CSS Grid for medium and larger devices STARTS */
@media screen and (min-width:644px) {
/* Hazards icons CSS Grid for browsers which support CSS Grid STARTS */
  @supports (display: grid)
  {
      .hazards-icons-container {
       display: grid;
     grid-gap: 20px;
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
     grid-template-rows: repeat(2, auto);
     width: auto;
       }
      .second-row-item-1 {
     grid-column-start: 2;
     grid-column-end: 3;
     grid-row-start: 2;
     grid-row-end: 3;
  }
  .second-row-item-2 {
     grid-column-start: 3;
     grid-column-end: 4;
     grid-row-start: 2;
     grid-row-end: 3;
  }
  }
/* Hazards icons CSS Grid for browsers which support CSS Grid ENDS */
}
/* Hazards icons CSS Grid for medium and larger devices ENDS */
.hazards-icons-container .hazards-icons-container-item .black-tooltip + .tooltip > .tooltip-inner {
  background-color: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 1.1em;
  font-weight: 700;
  /*width: 230px;
  height: 160px;*/
  padding: .5em;
  margin: 0;
  line-height: 1.3;
  text-align: left;
  border-radius: 5px;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
  font-family: Helvetica, Arial, sans-serif;
}
/*.hazards-icons-container .hazards-icons-container-item .lighter-green-tooltip + .tooltip > .tooltip-arrow {
  border-bottom-color: #18D118;
  color: #fff;
   }*/
.hazards-icons-container .hazards-icons-container-item .tooltip.in {
  filter: alpha(opacity=100);/*in Bootstrap it was 90*/
  opacity: .9;/*in Bootstrap it was .9*/
}


.cause-effect-outer {
width:100%;
background-color: white;
padding: 1em;
margin: 0 auto;
}

.cause-effect-outer h5 {
  font-size: 2.5em;
  text-transform: uppercase;
  margin:0;
  padding: 0;
  text-align: center;
}
.cause-effect-outer h6 {
font-size: 1.5em;
padding:0;
margin: .5em 0 0 0;
text-align: center;
}
.cause-effect-outer p {
font-size: .9em;
}
.cause-effect-outer .row .bottom-lbl {
padding: .2em 0 !important;
}

.cause-effect-outer #tp-brd {
  border-top: 2px solid #ccc;
  margin: 1em 0 0 0 !important;
}
.cause-effect-outer #tp-brd h5 {
margin:.4em 0 0 0;
padding:0;
}
.cause-effect-outer .outer-row {
 width: 65%;
 margin: 0 auto;
}


 .cause-effect-outer-block {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: stretch;
  -webkit-align-items: stretch;
  -ms-align-items: stretch;
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  align-content:center;
  -webkit-align-content:center;
  -ms-align-content:center;
  flex-direction: row;
  -ms-flex-direction: row;

  color:black;
  padding:0 0 1em 0;
  margin:1rem 0;
  width: 100%;
  min-height: 35vh;
}

.cause-effect-outer-block h5 {
  font-size: 2.5em;
  text-transform: uppercase;
  margin:0;
  padding:0;
}
.cause-effect-outer-block h6 {
font-size: 1.5em;
padding:0;
margin: 1em 0 0 0;
}
.cause-effect-outer-block small {
padding:0 0 .5em 0;
}
.cause-effect-outer-block .left-flex-box
 {

  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  -webkit-align-items: center;
  -ms-align-items: center;
  -webkit-justify-content: flex-start;
  -ms-justify-content:flex-start;
  justify-content: flex-start;
  align-content:center;
  -webkit-align-content:center;
  flex-direction:column;
  -ms-flex-direction: column;
  flex-wrap:wrap;
  flex:1 360px;
  padding:0 1em 0 1em;
  margin:0;
  min-height: 35vh;
  background-color: white;
}
.cause-effect-outer-block .right-flex-box
 {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  -webkit-align-items: center;
  -ms-align-items: center;
  -webkit-justify-content: flex-start;
  -ms-justify-content:flex-start;
  justify-content: flex-start;
  align-content:center;
  -webkit-align-content:center;
  flex-direction:column;
  -ms-flex-direction: column;
  flex-wrap:wrap;
  flex:1 60%;
  padding:0 1em 0 1em;
  margin:0 0 0 1em;
  min-width:
  min-height: 35vh;
  background-color: white;
}

.cause-effect-outer-block .left-flex-box .icons-group,
.cause-effect-outer-block .icons-combo .icons-group
 {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items:stretch;
  -webkit-align-items:stretch;
  -webkit-justify-content: center;
  justify-content: center;
  align-content:flex-start;
  -webkit-align-content:flex-start;
  flex-direction:row;
  -ms-flex-direction:row;
  flex-wrap:wrap;
  flex:1;
  padding:0;
  margin:0;
  width: 100%;
}


.cause-effect-outer-block .left-flex-box .icons-group div,
.cause-effect-outer-block .icons-combo .icons-group div
 {
  padding:0 .5em;
  margin:0;
  width: 90px;
  min-height: 100px;
}
.cause-effect-outer-block .icons-group p {
 font-size: .9em;
 }

.cause-effect-outer-block .right-flex-box .icons-combo {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items:flex-start;
  -webkit-align-items:flex-start;
  -webkit-justify-content: center;
  justify-content: center;
  align-content:flex-start;
  -webkit-align-content:flex-start;
  -ms-align-content:flex-start;

  flex-direction:row;
  -ms-flex-direction:row;
  flex-wrap:wrap;
  flex:1;
  padding:0;
  margin:0;
  width: 100%;
  overflow: hidden;
}
.cause-effect-outer-block .icons-combo .right-col
 {
  margin-left:auto;
}

.cause-effect-outer-block .icons-combo .bottom-label
 {
  padding:.3em 0 .3em 0;
  }



 /* Stress icons*/

#cannot-alone .stress-icons-row {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items:flex-start;
  -webkit-align-items:flex-start;
  -webkit-justify-content: center;
  justify-content: center;
  flex-direction:row;
  -ms-flex-direction:row;
  flex-wrap:wrap;
  padding:0;
  margin:0 0 1em 0;
       }
  #cannot-alone .stress-icons-row > div {
       flex:1;
       padding: 0 1em;
       text-align: center;
   }

#cannot-alone .stress-icons-row > div:nth-child(4) p {
       max-width: 95%;
       text-align: center;
   }


.raise-awareness-icons-row {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items:flex-start;
  -webkit-align-items:flex-start;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  flex-direction:row;
  -ms-flex-direction:row;
  flex-wrap:wrap;
  padding:0;
  margin:0 auto 1em auto;
  width:50%;
       }
  .raise-awareness-icons-row  > div {
       flex:1;
       padding: 0;
       text-align: center;
   }


 .stress-icons-row {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items:center;
  -webkit-align-items:center;
  -webkit-justify-content: center;
  justify-content: center;
  flex-direction:row;
  -ms-flex-direction:row;
  flex-wrap:wrap;
  padding:0;
  margin:0 auto 1em auto;
  max-width: 70%;
       }
  .stress-icons-row > div {
       flex:1;
       padding: 0 1em;
       text-align: center;
   }

   /* Hover overing styles start - re-usable cross-browser and cross-device modul */
    .img__wrap {
       position: relative;
       padding:0;
       margin:0;
   }
   .img__description_layer {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: rgba(0,0,0,0.5);
     color: #fff;
     visibility: hidden;
     opacity: 0;
       padding: 1rem;
       font-weight: 400;
       -webkit-transition: opacity 500ms, visibility 500ms;
       -moz-transition: opacity 500ms, visibility 500ms;
       -o-transition: opacity 500ms, visibility 500ms;
       -ms-transition: opacity 500ms, visibility 500ms;
     transition: opacity 500ms, visibility 500ms;
   }
   .img__description-text {
       font-size: 1.5rem;
   }

@media screen and (min-width:992px) {
  .img__description-text {
      font-size: 1.2rem;
  }
}
@media screen and (min-width:1200px) {
  .img__description-text {
      font-size: 1.5rem;
  }
}


   .img__description_layer p {
   line-height: 1.5;
   }
   .img__wrap:hover .img__description_layer {
     visibility: visible;
     opacity: 1;
   }

   .img__description {
     -webkit-transition: 500ms;
     -moz-transition: 500ms;
     -o-transition: 500ms;
     -ms-transition: 500ms;
     transition: 500ms;
     transform: translateY(.2em);
   }

   .img__wrap:hover .img__description {
     transform: translateY(0);
   }
   /* Hover overing styles end - re-usable cross-browser and cross-device modul */

.prevention-block-outer header h2 {
         font-size: 1.5em;
         margin-top: 1.5rem;
      }
.prevention-block {
 margin: 0 0 1em 0;
 padding: 0;
 text-align: center;
 width:100%;
 display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
 display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
 display: -ms-flexbox; /* TWEENER - IE 10 */
 display: -webkit-flex; /* NEW - Chrome */
 display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
 flex-wrap: wrap;
 -webkit-justify-content: center;
 -moz-justify-content: center;
 -ms-justify-content: center;
 justify-content: center;
 -webkit-align-items: center;
 -moz-align-items: center;
 -ms-align-items: center;
 align-items: center;
 /*max-width: 1000px;*/
  }
.prevention-block section
 {
  display:flex;
  flex-direction:column;
  align-items: center;
  justify-content: flex-start;
  min-width: 309px;
  max-width: auto;
  margin: 0 1rem 0 1rem;

}
 @media screen and (min-width:992px) {
   .prevention-block section
    {
     flex-direction:row;
     flex-wrap: wrap;
     align-items: flex-start;
     justify-content: center;
     width: 30%;
     max-width:391px;
     min-width: 25%;
     margin-left: .9em;
    }

.prevention-block section:nth-child(1),
.prevention-block section:nth-child(3)
 {
  flex:1 25%;
 }
 .prevention-block section:nth-child(2)
 {
  flex:1 30%;
 }
}

.prevention-block section h3
  {
 text-align: center;
 font-weight: bold;
}

.prevention-block section:nth-child(1) h3,
.prevention-block section:nth-child(3) h3
  {
 font-size: 1.3em;
 margin-top: .5em;
}

.prevention-block section:nth-child(2) h3  {
 font-size: 1.5em;
 margin-top: .5em;
 }
.prevention-levels-block header h2 {
      font-size: 2.2em;
      margin: 1.5em 0 .5em 0;
    }

/* Video block */

.video-block {
background: white;
padding: 1rem;
margin: 5rem auto 0 0;
}

.video-block .basics-container {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: flex-start;
  -webkit-align-items: flex-start;
  -webkit-justify-content: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0;
  margin: 0 auto;
  max-width:1000px;
  width: 100%;
  background-color: black;
  color: white;
  font-size: 100%;
  font-weight: normal;
}


.video-block .basics-container-item h3 {
 padding:.8em 0 0 0;
 margin: 0;
 font-size: 1.8em;
}

.video-block .basics-container-item:nth-child(1) {
flex:1 260px;
padding: 0 2rem 0 2rem;
margin: 0;
}
.video-block .basics-container-item:nth-child(2) {
flex:2 360px;
padding: 0;
margin: 0;
}
.video-block .basics-container-item p {
font-weight: normal;
}
.video-block .basics-container-item p:nth-child(3) {
margin: 1em 0 0 0;
}
.video-block .basics-container-item .time-box {
  width: 60px;
  max-width: 120px;
  font-size: 1.2em;
  padding: .3em .3em .2em .3em;
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  -webkit-align-items: center;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
}



/* Basics feelings section ENDS */

.share-awareness-bg
  {
  background:
    /* top, transparent red */
    linear-gradient(rgba(0,0,0, 0.45),rgba(0,0,0, 0.45)),/* bottom, image */
    url(../sa_img/share_awareness.png);
  /*background-image: url('../../stress_assess_survey/files/sa_img/share_awareness.png');*/
  background-size: cover;
  background-repeat: no-repeat;
  padding: 0;
  /*margin: -35px 0 0 0;*/
  max-width:1168px;
  height:325px;
  max-height: 100%;
  background-position: center top;
  position: relative;
     }
  .share-awareness-bg div
  {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: white;
  font-size: 1.3em;
  text-align: center;
  margin: 15vh auto;
  text-shadow: 1px 1px rgba(0,0,0, .8);
  width: 80%;
  }
  .share-awareness-bg div p:first-child
  {
  margin: 0 0 1em 0;
  }

/*Catalogue listing */
 img {
  max-width: 100%;
}

.five-approaches-inner-content .catalogue-listing div.content p,
.five-approaches-inner-content .catalogue-listing div.content ul
 {
  font-size: 100%;
}



.catalogue-listing {
  margin-bottom: 2em;
  padding: 10px;
}

.catalogue-listing a {
   color:inherit;
   text-decoration:underline;
}
.catalogue-listing a:hover
 {
  text-decoration:none;
}

.catalogue-listing > .title { grid-area: title; }
.catalogue-listing > .img { grid-area: img; }
.catalogue-listing > .content { grid-area: bd; }

.catalogue-listing {
  display: grid;
  grid-column-gap: 20px;
  grid-template-areas:
    "title"
    "img"
    "bd"
}


@media (min-width: 600px) {

  /* clearfix*/
  .catalogue-listing:after {
    content: "";
    display: block;
    clear: both;
  }

  .catalogue-listing > .catalogue-listing {
    margin-left: 160px;
    clear: both;
  }

  .catalogue-listing .img {
    float: left;
    margin: 0 10px 0 0;
    width: 150px;
  }

   .catalogue-listing.catalogue-listing-flip .img {
    float: right;
    margin: 0 0 0 10px;
  }

  .catalogue-listing > * {
    margin: 0 0 0 160px;
  }

  .catalogue-listing.catalogue-listing-flip > * {
    margin: 0 160px 0 0;
  }

  @supports(display: grid ) {
    /* override */
    .catalogue-listing > *,
    .catalogue-listing.catalogue-listing-flip > * {
      margin: 0;
    }
    .catalogue-listing .img,
    .catalogue-listing.catalogue-listing-flip .img {
      width: auto;
      margin: 0;
    }
    .catalogue-listing:after {
      content: none;
    }

    .catalogue-listing {
      display: grid;
      grid-column-gap: 20px;
      grid-template-columns: 150px 3fr;
      grid-template-rows: auto 1fr auto;
      grid-template-areas:
        "img title"
        "img bd"
    }

    .catalogue-listing.catalogue-listing-flip {
      grid-template-columns: 3fr 150px ;
      grid-template-areas:
        "title img"
        "bd img"
    }


    }


}
/* Assess page */

.checklists-surveys-block {
 margin: 0 0 1em 0;
 padding: 0;
 text-align: center;
 width:100%;
 display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
 display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
 display: -ms-flexbox; /* TWEENER - IE 10 */
 display: -webkit-flex; /* NEW - Chrome */
 display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
 flex-wrap: wrap;
 -webkit-justify-content: center;
 -moz-justify-content: center;
 -ms-justify-content: center;
 justify-content: center;
 -webkit-align-items: center;
 -moz-align-items: center;
 -ms-align-items: center;
 align-items: center;
  }

 @media screen and (min-width:992px) { 
 .checklists-surveys-block { 
   max-width: 1200px;
   margin: 0 auto;
 }
 } 


.checklists-surveys-block section
 {
  display:flex;
  flex-direction:column;
  align-items: center;
  justify-content: flex-start;
  -webkit-justify-content: flex-start;
 -moz-justify-content: flex-start;
 -ms-justify-content: flex-start;
 -webkit-align-items: center;
 -moz-align-items: center;
 -ms-align-items: center;
  margin: 0 1rem 0 1rem;
  font-size: 1rem;
 }

 @media screen and (min-width:992px) {
   .checklists-surveys-block section
    {
     flex-direction:row;
     flex-wrap: wrap;
     align-items: flex-start;
     justify-content: center;
     flex-grow:1;
     flex-shrink: 1;
     flex-basis: 309px;
     width: 50%;
     max-width:391px;
     min-width: auto;
     font-size: 1.2em;
    }
}

.checklists-surveys-block .img__description-text {
       font-size: 1.2rem;
   }

@media screen and (min-width:600px) {
  .checklists-surveys-block .img__description-text {
      font-size: 1.5rem;
  }
}
@media screen and (min-width:1200px) {
  .checklists-surveys-block .img__description-text {
      font-size: 1.3rem;
  }
}


p.alt-img-description {
  display: block;
  text-align: left;
  font-size: 1.2rem !important;
  line-height: 1.5 !important;
}

.checklists-surveys-block .img__description_layer,
.tip-hidden
{
  visibility: hidden !important;
}

@media screen and (min-width:504px) { 
p.alt-img-description {
  visibility: hidden;
  display: none;
}

.checklists-surveys-block .img__description_layer,
.tip-hidden
 {
  visibility: visible !important;
}

}

 
.checklists-surveys-block section h3
  {
 font-size: 1.3em;
 margin-top: .5em;
 text-align: center;
 font-weight: bold;
}


.target-box {
  padding:1em;
  margin: 5rem auto;
  max-width: 100%;
  min-width: 250px;
  text-align: center;
}

@media screen and (min-width:400px) { 
  .target-box {
    max-width: 20vw;
    width: auto;
  }
}


.target-box span {
display: block;
box-sizing: border-box;
}
.target-box span:nth-child(1) {
font-size: 10vh;
}
.target-box span:nth-child(2) {
margin-top:-15px;
font-size: 14vh;
}
.target-box span:nth-child(3) {
margin-top:-15px;
font-size: 5vh;
}
.select-tools .view-sample-box,
.review-ideas .view-sample-box,
.select-changes .view-sample-box
 {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  -webkit-align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  flex-wrap: wrap;
  padding:.5em;
  text-align: center;
  border: 1px solid #E10034;
  background-color: white;
  color: black;
}
.select-tools .view-sample-box
 {
  margin: 0 auto;
  max-width: 20vw;
  min-width: 250px;
  }
.review-ideas .view-sample-box,
.select-changes .view-sample-box
 {
  margin: 2.5rem auto 0 auto;
  max-width: 15vw;
  min-width: 200px;
}

/*.select-tools .view-sample-box::after,
.review-ideas .view-sample-box::after,
.select-changes .view-sample-box::after
 {
content: "";
background: url(../sa_img/link.png) no-repeat 0 0;
width: 37px;
height: 37px;
display: inline-block;
margin-left: .8em;
align-self: center;
}*/

.select-tools .view-sample-box a:link,
.select-tools .view-sample-box a:visited,
.select-tools .view-sample-box a:active,
.select-tools .view-sample-box a:hover,
.select-tools .view-sample-box a:focus,

.review-ideas .view-sample-box a:link,
.review-ideas .view-sample-box a:visited,
.review-ideas .view-sample-box a:active,
.review-ideas .view-sample-box a:hover,
.review-ideas .view-sample-box a:focus,

.select-changes .view-sample-box a:link,
.select-changes .view-sample-box a:visited,
.select-changes .view-sample-box a:active,
.select-changes .view-sample-box a:hover,
.select-changes .view-sample-box a:focus

 {
   color: black;
   text-decoration: none;
}



/* Implement Tips flexed block STARTS */

/* Hover overing styles start - re-usable cross-browser and cross-device modul */
    .implementation-tips-flex .img__wrap {
       position: relative;
       padding:0;
       margin:0;
   }
   .implementation-tips-flex .description-block {
     position:relative;
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: rgba(0,0,0,0.5);
     color: #fff;
     padding: 0;
     font-weight: 400;
     display: flex;
     align-items: center;
   }
   .implementation-tips-flex .default-description {
     font-size: 2rem;
     padding: 1rem;
     display: flex;
     justify-content: center;
     align-items: center;
     min-width:100%;
   }

@media screen and (min-width:1200px) {
      .implementation-tips-flex .default-description {
        font-size: 2.2rem;
      }
      
    }


   .implementation-tips-flex .description-block p {
   line-height: 1.5;
   }

   .implementation-tips-flex .img__wrap .description-block .hover-description { 
    visibility: hidden;
    opacity: 0;
    padding: 1rem 2rem 2rem 2rem;
    /*font-size: .85em;*/
    font-size: 1.5rem;
   }

    @media screen and (min-width:992px) {
      .implementation-tips-flex .img__wrap .description-block .hover-description { 
        font-size: 1.1rem;
      }
      
    }
    @media screen and (min-width:1200px) {
      .implementation-tips-flex .img__wrap .description-block .hover-description { 
        padding: 2rem;
        font-size: 1.3rem;
      }
      
    }

   .implementation-tips-flex .img__wrap .description-block .default-description { 
     visibility: visible;
     opacity: 1;
   }
   
   .implementation-tips-flex .img__wrap:hover .description-block .hover-description {
     visibility: visible;
     opacity: 1;
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
   }
   .implementation-tips-flex .img__wrap:hover .description-block .default-description {
     visibility: hidden;
     opacity: 0;
   }

 /*  .implementation-tips-flex .img__wrap:hover .default-description,
   .implementation-tips-flex .img__wrap:hover .hover-description
    {
     transform: translateY(0);
   }
 */  /* Hover overing styles end - re-usable cross-browser and cross-device modul */

/*.prevention-block-outer header h2 {
         font-size: 1.5em;
         margin-top: 1.5rem;
      }*/
.implementation-tips-flex {
 margin: 0 auto 1em auto;
 padding: 0;
 text-align: center;
 width:100%;
 display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
 display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
 display: -ms-flexbox; /* TWEENER - IE 10 */
 display: -webkit-flex; /* NEW - Chrome */
 display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
 flex-wrap: wrap;
 -webkit-justify-content: center;
 -moz-justify-content: center;
 -ms-justify-content: center;
 justify-content: center;
 -webkit-align-items: center;
 -moz-align-items: center;
 -ms-align-items: center;
 align-items: center;
 /*max-width: 1000px;*/

  }
 /*@media screen and (min-width:992px) { 
 /*.implementation-tips-flex {
 margin: 0 0 1em 0;
 justify-content: flex-start;
 -webkit-justify-content: flex-start;
 -moz-justify-content: flex-start;
 -ms-justify-content: flex-start;
  }
 } */

.implementation-tips-flex section
 {
  display:flex;
  flex-direction:column;
  align-items: center;
  justify-content: flex-start;
  min-width: 271px;
  max-width: auto;
  margin: 0 1rem 1rem 1rem;
  padding-left: 15px;
  padding-right: 15px; 

}
 @media screen and (min-width:992px) {
   .implementation-tips-flex section
    {
     flex-direction:row;
     flex-wrap: wrap;
     align-items: flex-start;
     justify-content: space-between;
     width: 25%;
     max-width:271px;
     min-width: 25%;
     /*margin-left: .9em;*/
     margin: 0 0 1rem 0;
    }

.implementation-tips-flex section
 {
  flex:1 1 25%;
 }
}



/* Implement Tips flexed block ENDS */







/* Implement Tips block STARTS */

  .implement-tips-block {
 margin: 0 auto 2em auto;
 padding: 0;
 text-align: center;
 width:100%;
  }

.implement-tips-block section
 {
  position: relative;
  padding: 0;
  margin: 0 auto;
 }

/*.implement-tips-block section div.text-content,
.implement-tips-block section div.text-content-overlay
 {
  color: white;
  cursor: pointer;
  display: table;
  left: 0;
  position: absolute;
  top: 0;
  text-align: center;
  width: 100%;
  max-width:271px;
  height:300px;
  min-height: 100%;
  padding:0;
  margin: 0 auto;
}*/

/*


.implement-tips-block section h3
  {
 font-size: 1.3em;
 margin-top: .5em;
 text-align: center;
 font-weight: bold;
}

.implement-tips-block section
  {
 margin-top: .5em;
}

/* Implement Tips block ENDS */


.preparation-boxes-block {
  margin: 0 auto;
  width:80%;
}
.preparation-boxes-block div div img {
  margin: 1em auto 0 auto;
}
.preparation-boxes-block div div p {
  width:60%;
  margin: 1em auto;
}
.ready-for-change .implementation-tips .attention-text,
.ready-for-change .carousel-for-dillman-approach .attention-text,
.cannot-alone h5,
.recognize-change h5
 {
 font-size: 2em;
 line-height: 1.2;
 padding: 0;
 }
 .recognize-change .five-approaches-inner-content > h5
 {
 font-size: 1.8em;
 line-height: 1.2;
 padding: 0;
 }

.attention-text-mrgn-0 {
 font-size: 2em;
 line-height: 1.2;
 padding: 0;
 margin:0;
 }
 .attention-text-smaller-mrgn-0 {
 font-size: 1.3em !important;
 line-height: 1.2;
 padding: 0;
 margin:0 auto;
 width:80%;
 }
 .attention-text-small {
 font-size: 1.1em !important;
 line-height: 1.2;
 padding: 0;
 margin:0;
 }
 /* Dillman Approach Carousel block STARTS */

 .carousel-for-dillman-approach {
 padding-top: 5em;
 }

.carousel-for-dillman-approach .carousel-block {
  color:white;
  padding: 0 1em 1em 1em;
  margin: 0 0 2rem 0;
}

/* Carousel section STARTS */

@media only screen and (max-width:1200px) {
.carousel-inner .item > img {
  min-height: 314px;
}

}
.carousel-for-dillman-approach .carousel-block .slide-caption {
  position:absolute;
  top:50px;
  bottom:50px;
  left:0;
  right:0;
  margin:0 auto;
  padding: .5em;
  text-align:center;
  width:90%;
  }
  .carousel-for-dillman-approach .carousel-block .slide-caption h6 {
  font-size:1.7em;
  font-weight:normal;
  }
  .carousel-for-dillman-approach .carousel-block .slide-caption p {
font-size:1.1em;
  }
  .carousel-block #carouselButtons {
    position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
}
.carousel-block #carouselButtons a {
padding:0 1em 0 1em;
}
  .carousel-block #carouselButtons {
    margin: -40px 0 .65em 0;
    padding: 0;
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: flex-end;
  -webkit-align-items: flex-end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.carousel-block .thumbs {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: flex-start;
  -webkit-align-items: flex-start;
  -webkit-justify-content: center;
  justify-content: center;
  align-content: center;
  -webkit-align-content: center;
  -ms-align-content: center;
  flex-wrap: wrap;
  width:100%;
  padding: 0;
  margin-top:16px;
}
@media only screen and (min-width:1200px) {
.carousel-block .thumbs {
  width:90%;
}
}
.carousel-block .col-md-2 {
   flex:1 auto;
   padding:0 .5em;
   margin-top:1rem;
   min-width: 98px;
   max-width: 125px;
   text-align: center;
   font-size: .9em;
}

@media only screen and (min-width:380px) {
.carousel-block .col-md-2 {
   flex:1 50%;
}

}
@media only screen and (min-width:500px) {
.carousel-block .col-md-2 {
   flex:1 33.3333333%;
}

}
@media only screen and (min-width:1200px) {
.carousel-block .col-md-2 {
   flex:1 125px;
   margin-top:0;
}

}

.carousel-block .col-md-2 .thumbnail {
    display: block;
    padding: 4px;
    margin-bottom: 10px;
    line-height: 1.42857143;
    background-color: #ffffff;
    border: 1px solid #ecf0f1;
    border-radius: 4px;
    -webkit-transition: border 0.2s ease-in-out;
    -o-transition: border 0.2s ease-in-out;
    transition: border 0.2s ease-in-out;
}
@media only screen and (max-width:1200px) {
.carousel-block .col-md-2 .thumbnail.highlight {
    background-color: #E10034;
    border: 1px solid #E10034;
}
}
@media only screen and (min-width:1200px) {

.carousel-block .highlight::before {
    content:'';
    border-bottom: 16px solid #FFFFFF;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    height: 0;
    position: absolute;
    left: 45px;
    top: -12px;
    width: 0;
}
}
 .carousel-block .col-md-2 span {
 display:block;
 padding-top:.2em;
 }
.multi_bg_1 {
  /*width: 98px;*/
  height: 97px;
  background:
  url('../sa_img/1_sm_trans.png'),
  url('../sa_img/groundwork_sm.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
  padding: .5em 0;
}
.multi_bg_2 {
  /*width: 98px;*/
  height: 97px;
  background:
  url('../sa_img/2_sn_trans.png'),
  url('../sa_img/announce_sm.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
  padding: .5em 0;
}
.multi_bg_3 {
  /*width: 98px;*/
  height: 97px;
  background:
  url('../sa_img/3_sm_trans.png'),
  url('../sa_img/launch_sm.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
  padding: .5em 0;
}
.multi_bg_4 {
  /*width: 98px;*/
  height: 97px;
  background:
  url('../sa_img/4_sm_trans.png'),
  url('../sa_img/first_reminder_sm.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
  padding: .5em 0;
}
.multi_bg_5 {
  /*width: 98px;*/
  height: 97px;
  background:
  url('../sa_img/5_sm_trans.png'),
  url('../sa_img/second_reminder_sm.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
  padding: .5em 0;
}
.multi_bg_6 {
  /*width: 98px;*/
  height: 97px;
  background:
  url('../sa_img/6_sm_trans.png'),
  url('../sa_img/final_notice_sm.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
  padding: .5em 0;
}
.multi_bg_7 {
  /*width: 98px;*/
  height: 97px;
  background:
  url('../sa_img/7_sm_trans.png'),
  url('../sa_img/close_nextSteps_sm.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
  padding: .5em 0;
}

/* Carousel section ENDS */


.fine-print {
  font-size: 80%;
}
.carousel-for-dillman-approach .fine-print {
  font-size: 75%;
}

.carousel-for-dillman-approach .timeline {
  background-color: white;
  padding: 1em;
  margin:2rem auto;
  color: black;
}
.carousel-for-dillman-approach .timeline h5 {
 margin-bottom: 2rem;
 font-size: 1.5em;
}

/* Dillman Approach Carousel block ENDS */


/* Organize */

.recognize-change .basics-container {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: flex-start;
  -webkit-align-items: flex-start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  max-width:1000px;
  width: 100%;
}

.recognize-change .basics-container-item {
 flex:1 0 180px;
 margin: 0 1em 0 0;
 max-width: 180px;
  align-self: stretch;
 text-align: center;
}
.recognize-change .basics-container-item img {
max-height: 231px;
}
.recognize-change .basics-container p {
 min-width: 180px;
 margin: .5em auto;
 /*font-size: 1.2em;*/
 text-align: center;
}
.recognize-change .basics-container h6 {
font-size: 110%;
width: 95%;
}
@supports (display: grid)
{
    .recognize-change .basics-container {
     display: grid;
     grid-gap: 15px;
     grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
     margin:0;
     padding:0;
     width: auto;
     text-align: center;
     }
}

/* Snapshot Organization block with bg image STARTS*/
.snapshot-organization
  {
  display:block:
  flex-direction:column;
  background:
    /* top, transparent red */
    linear-gradient(rgba(0,0,0, 0.45),rgba(0,0,0, 0.45)),/* bottom, image */
    url(../sa_img/snapshot.png);
  background-size: cover;
  background-repeat: no-repeat;
  padding: 2em;
  margin: 5rem 0 0 0;
  max-width:1168px;
  min-height:800px;
  background-position: center top;
  color: white;
  text-align: center;
  text-shadow: 1px 1px rgba(0,0,0, .8);
  }

  @media only screen and (min-width:520px) {
    .snapshot-organization
      {
      min-height:500px;
         }
  }

@supports (display: grid) {
.snapshot-organization
  {
  display:grid;
  grid-template-rows: repeat(3, minmax(1fr, 100px));
  justify-content: center;
  align-items: center;
  grid-gap:1rem;
       }
}

.snapshot-inner {
  padding: 0 2em;
  margin: 0;
}

.snapshot-organization-icons {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: flex-start;
  -ms-align-items: flex-start;
  -webkit-align-items: flex-start;
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0;
  margin: 2rem auto 0 0;
  width: 100%;
  /* height: auto; */
  color: white;
}
.snapshot-organization-icons .box
 {
 flex:1 1 169px;
 max-width: 169px;
 margin: 0 1em;
 padding: 0;
 align-self: stretch;
 justify-self: center;
 text-align: center;
}
.snapshot-organization-icons .box > img
 {
  margin: 0 auto;
  max-width:100%;
  /*width:119px;
  max-height:119px;*/
  height:auto;
  }
.snapshot-organization-icons .box p
 {
  margin:.5em 0;
 }
.snapshot-organization .last-p {
  margin-left: auto;
  margin-right: auto;
  width:80%;
}

/* Snapshot Organization block with bg image ENDS*/
/* Change */

.report-survey-results-bg
  {
  background-image: url(../sa_img/report_results_workers.png);
  background-size: cover;
  background-color: transparent;
  background-repeat: no-repeat;
  padding: 2em;
  margin: 5rem 0 0 0;
  max-width:1153px;
  height: 600px;
  max-height: 100%;
  background-position: center top;
  color: white;
  text-align: center;
  display: block;
  text-shadow: 1px 1px rgba(0,0,0, .8);
    }

@media screen and (min-width:600px) {
.report-survey-results-bg
  {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  -ms-align-items: center;
  -webkit-align-items: center;
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  justify-items: center;
    }

}
.report-survey-results-bg .report-survey-results-inner {
  padding: 0 2em;
  margin: 0;
  }

.report-survey-results-bg .report-survey-results-inner p:nth-child(1),
.report-survey-results-bg .report-survey-results-inner p:nth-child(2)
 {
 font-size: 1.5em;
 line-height: 1.2;
}
.report-survey-results-bg .report-survey-results-inner p:nth-child(3)
 {
margin-top: 50px;
}

 .report-survey-results-icons {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: flex-start;
  -ms-align-items: flex-start;
  -webkit-align-items: flex-start;
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0;
  margin: 0 auto 5rem auto;
  width: 100%;
  height: auto;
}
@media screen and (min-width:500px) {
.report-survey-results-icons {
  margin: -165px auto 5rem auto;
}
}

.report-survey-results-icons .box
 {
 flex:1 292px;
 max-width: 292px;
 margin: 0 1.1em;
 padding: 0;
 align-self: stretch;
 justify-self: center;
 text-align: center;
}
.report-survey-results-icons .box img
 {
  margin: 0 auto;
  }
.report-survey-results-icons .box p
 {
  margin:.5em 0;
 }
 /*.report-survey-results-icons .box small
 {
  font-weight: normal;
 }*/

.report-survey-results-icons .box:nth-child(2) p:nth-child(3)
 {
  font-size: 85%;
  line-height: 110%;
  font-weight: normal;
 }
@supports (display: grid)
{
    .report-survey-results-icons {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
     grid-auto-rows: auto;
     grid-gap: 1rem;
     padding:0;
     width: auto;
     text-align: center;
     justify-content: center;
   }

}


.gather-workplace-info-icons {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: flex-start;
  -ms-align-items: flex-start;
  -webkit-align-items: flex-start;
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0;
  margin: 5rem auto;
  width: 100%;
}

.gather-workplace-info-icons .box
 {
 flex:1 200px;
 max-width: 100%;
 margin: 0;
 padding: 0 1em;
 align-self: stretch;
 justify-self: center;
 text-align: center;
}
.gather-workplace-info-icons .box img
 {
  margin: 0 auto;
  }
.gather-workplace-info-icons .box p
 {
  margin:.5em 0;
  font-weight: bold;
 }


@supports (display: grid)
{
    .gather-workplace-info-icons {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
     grid-auto-rows: auto;
     grid-gap: 1rem;
     padding:0;
     width: auto;
     text-align: center;
     justify-content: center;
   }

}

.take-what-you-gather-icons {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: flex-start;
  -ms-align-items: flex-start;
  -webkit-align-items: flex-start;
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0;
  margin: 5rem auto;
  width: 100%;
}

.take-what-you-gather-icons .box
 {
 flex:1 150px;
 max-width: 100%;
 margin: 0;
 padding: 0 1em;
 align-self: stretch;
 justify-self: center;
 text-align: center;
}
.take-what-you-gather-icons .box img
 {
  margin: 0 auto;
  }
.take-what-you-gather-icons .box p
 {
  margin:.5em 0;
 }


@supports (display: grid)
{
    .take-what-you-gather-icons {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(143px, 1fr));
     grid-auto-rows: auto;
     grid-gap: 1rem;
     padding:0;
     width: auto;
     text-align: center;
     justify-content: center;
   }
}   

.implement-ideas-tips-icons {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: flex-start;
  -ms-align-items: flex-start;
  -webkit-align-items: flex-start;
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0;
  margin: 1em auto 0 auto;
  width: 100%;
  max-width: 640px;
}

.implement-ideas-tips-icons .box
 {
 flex: 1;
 width: 300px;
 margin: 0;
 padding: 0 1em;
 align-self: stretch;
 text-align: center;
}
.implement-ideas-tips-icons .box img
 {
  margin: 0 auto;
  width: 210px;
  }
.implement-ideas-tips-icons .box p
 {
  margin:.5em 0;
 }


@supports (display: grid)
{
    .implement-ideas-tips-icons {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(143px, 1fr));
     grid-auto-rows: auto;
     grid-gap: 1rem;
     padding:0;
     width: auto;
     text-align: center;
     justify-content: center;
     max-width: 100%;
   }
   .implement-ideas-tips-icons .box
 {
 width: auto;
}
.implement-ideas-tips-icons .box img
 {
  width: auto;
  }
}   
/* Evaluate */

.link-as-button-box {
margin: 3rem auto 0 auto;
}

.link-as-button {
  margin: 0 auto 10rem auto;
  min-width: 5em;
  max-width: 10em;
  text-align: center;
  padding: 1em;
  text-transform: uppercase;
}
.link-as-button-box a:link,
.link-as-button-box a:visited,
.link-as-button-box a:active,
.link-as-button-box a:focus
 {
text-decoration: none;
color:#fff;
font-weight: normal;
}
.link-as-button-box a:hover {
text-decoration: none;
}

#box-below-image {
  margin: 5rem 0 7rem 0;
}

#box-below-image p:nth-child(1) {
  font-size: 2.1em;
  line-height: 1.2;
}


/* Next / Prev buttons */
.next-prev-item  a button {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    width: 150px;
    color: #fff;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
  /* border-radius: 4px;*/
   text-transform: uppercase;
}

/* Five step approach secondary pages END*/