/* IE/Edge Responsive Viewport */

@-ms-viewport {
 width: device-width;
}

/* Offer Expired Resets */

.offer-expired {
 background: url(/_img/toolbox/p/egi/toolbox/icons/icon_important-60.png) no-repeat center 15px, linear-gradient(#d00, #800);
 border: 0 none;
 border-radius: 0;
 margin: 0 auto;
 padding: 80px 1em 1em;
 text-align: center;
 width: auto;
 min-height: 0;
}

/* ===== General Rules ===== */

body {
 font-size: 20px;
 font-family: 'Raleway', sans-serif;
}

@media(max-width: 720px) {
 body {
  font-size: 18px;
 }
}

@media(max-width: 480px) {
 body {
  font-size: 16px;
 }
}

/*===== Heading Rules  =====*/

h1 {
 font-family: 'Encode Sans', sans-serif;
}

h2,
h3,
h4 {
 font-family: 'Montserrat', sans-serif;
 font-weight: 800;
 margin: 0 auto 0.3em;
 text-align: center;
 color: #1B789D;
}

.accent-color {
 color: #1B789D;
}

h2 {
 font-size: 36px;
}

@media(max-width: 720px) {
 h2 {
  font-size: 24px;
 }
}

ul li {
 list-style: none;
 margin: 2em 0;
 vertical-align: text-top;
}

ul li:before{
 content: url(/_img/toolbox/p/csi/checkmark.png);
 padding: 1em .5em 1em 0;
}

.headerEyebrow {
    display: block;
    color: #cceaf6;
    text-align: center;
    font-weight: bold;
    background-color: #235c73;
    font-style: italic;
    font-size: 38px;
}

.preHeading {
    color: #dfeafe;
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    text-shadow: 1px 1px 10px rgba(255, 255, 255, 0.621);
}

.main_header__video-tile {
    border-radius: 10px;
    box-shadow: -3px 5px 10px rgba(0, 0, 0, 0.501);
}

/*===== Image/Portrait Rules =====*/

img {
 height: auto;
 max-width: 100%;
}

.image-box {
 max-width: 600px;
 width: 100%;
 margin: 0 auto;
 position: relative;
 z-index: 2;
}

.image-box--leaf {
 margin-top: 3em;
}

.image-box__leaf{
 position: absolute;
z-index: -1;
left: 23em;
top: -2em;
}

/* PORTED FROM csi-v5.css */

    .ported-container {
    margin: 0 auto;
    max-width: 87.5em;
   }

   .container--1200 {
    max-width: 60em;
   }

   .container--padding {
    padding: 0 1em;
   }

   .format {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 75em;
    padding: 0.313em;
   }
   
   .format__card {
    border: 1px solid #dfdfdf;
    border-radius: 10px;
    background: #fafafa;
    width: 32em;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    margin: 1em auto;
   }
   
   .format__card:hover {
    box-shadow: 0 20px 21px -10px rgba(0, 0, 0, 0.4);
    transform: translateY(-1em);
    transition: all ease 0.45s;
    -webkit-transition: all ease 0.45s;
    -moz-transition: all ease 0.45s;
    -ms-transition: all ease 0.45s;
    -o-transition: all ease 0.45s;
    -webkit-transform: translateY(-1em);
    -moz-transform: translateY(-1em);
    -ms-transform: translateY(-1em);
    -o-transform: translateY(-1em);
   }
   
   .format__image {
    background-size: cover;
    height: 19em;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
   }
   
   #image-1 {
    background: url(https://www.awai.com/_img/toolbox/p/csi/img1.png) left 0% no-repeat;
   }
   
   #image-2 {
    background: url(https://www.awai.com/_img/toolbox/p/csi/img2.png) center 0% no-repeat;
   }
   
   #image-3 {
    background: url(https://www.awai.com/_img/toolbox/p/csi/img3.png) center 0% no-repeat;
   }
   
   #image-4 {
    background: url(https://www.awai.com/_img/toolbox/p/csi/img4.png) center 0% no-repeat;
   }
   
   .format__copy {
    display: block;
    padding: 1.25em;
   }
   
   @media (min-width: 76.25em) {
    .format__card {
     max-width: 14.5em;
     margin: 0;
    }
   }


/* END PORT */

@media(max-width: 960px) {
 .image-box__leaf{
display: none;
}
}

.portrait {
 margin: 0 auto;
 text-align: center;
 max-width: 250px;
 width: 100%;
}

.portrait--right {
 float: right;
 margin: 0 0 .7em .7em;
}

@media(max-width: 640px) {
 .portrait--right {
  float: none;
  margin: 0 auto;
 }
}

/* ===== testimonials  ===== */

.testimonial {
 background: #A0CFBC;
 border-radius: 50px 50px 0px 50px;
 padding: 20px;
 margin: 50px auto;
}

.testimonial--blue {
 background: #73C7E7;
 border-radius: 50px 50px 50px 0px;
}

/*===== Containers/Wrappers  =====*/

.content {
 margin: 0;
 padding: 0;
}

.container {
 margin: 0 auto;
 max-width: 720px;
 padding: 20px;
}



.container--wide {
 max-width: 960px;
}

.container--full {
 max-width: 100vw;
}


/* ===== Header ===== */
#header {
 background: #1E85AE;
 border-bottom-left-radius: 55px;
 padding-bottom: 50px;
}

.header-banner {
 background: #125069;
 padding: 10px;
 text-align: center;
 color: #CCEAF6;
 font-weight: 800;
 font-size: 36px;
}

.header-content .container {
 display: flex;
justify-content: space-between;
max-width: 1350px;
margin: 50px auto 0;
flex-wrap: wrap;
}

.header-content__left, .header-content__right {
 max-width: 750px;
 width: 100%;
 flex: 1 1 600px;
 margin: 0 auto;
}


.header-content__left .header-content__title {
 display: block;
 margin: 25px 0;
 text-align: left;
 font-size: 48px;
 color: #FBEF5E;
}

.header-content__left .header-content__title--large {
 font-size: 78px;
 color: #9CCC65;
}

@media(max-width: 1230px) {
 .header-content__left .header-content__title  {
text-align: center;
font-size: 36px;
}
}

@media(max-width: 960px) {
 #header {
 border-bottom-left-radius:0px;
}
}


/* ===== Change of Pace ===== */

#cop, #queen {
 background: #CCEAF6;
}

/* =====  Training ===== */

#training {
 background: #1E85AE;
}

.training-session {
 background: #B8E1F4;
 border-radius: 50px 50px 50px 0px;
 margin: 40px auto;
 position: relative;
 max-width: 960px;
}

.training-session:nth-of-type(even) {
 background: #C8E5E2;
 border-radius: 50px 50px 0px 50px;
}

.training-session__header {
 background: #73C7E7;
 border-radius: 50px 50px 0px 0px;
 padding: 30px;
}

.training-session__header h3 {
 color: #125069;
}

.training-session:nth-of-type(even) .training-session__header {
 background: #A0CFBC;
}

.training-session__body {
 padding: 20px 50px;
}

#training .testimonial {
 position: relative;
 top: -4em;
left: 10em;
 max-width: 720px;
 margin-bottom: -4em;
}

@media(max-width: 960px) {
 #training .testimonial {
 position: relative;
 top: -4em;
left: 0em;
 max-width: 720px;
 margin-bottom: -6em;
}
}


/* ===== Case Studies  ===== */

#case-studies {
 background: #A0CFBC;
 max-width: 960px;
 width: 100%;
 margin: 0 auto;
 border-radius: 50px 50px 0px 50px;
}

/* ===== Direct Access  ===== */

#direct-access {
 background: #CCEAF6;
}

/* ===== Case Studies Challenge  ===== */

#case-studies-challenge {
 background: #A0CFBC;
}

#case-studies-challenge h3 {
 color: #01646B;
}

/* ===== Buttons ===== */

a.order-button {
 background: #ff811b;
 border-radius: 0.75em;
 color: #fff;
 display: inline-block;
 font-weight: bold;
 font-size: 1.5em;
 line-height: 1.2;
 margin: 0.5em auto;
 padding: 0.8em 0.5em;
 transition: all 0.35s ease;
 -webkit-border-radius: 0.75em;
 -moz-border-radius: 0.75em;
 -ms-border-radius: 0.75em;
 -o-border-radius: 0.75em;
 max-width: 18em;
 -webkit-transition: all 0.35s ease;
 -moz-transition: all 0.35s ease;
 -ms-transition: all 0.35s ease;
 -o-transition: all 0.35s ease;
}

a.order-button:hover,
a.order-button:focus,
a.order-button:active {
 background: #ec7614;
}

a.order-button:active {
 background: #d36b18;
}

.sticky-note {
    background: #ffffb4;
    background: linear-gradient(135deg, #ffffdc, #f6f688);
    margin: auto;
      margin-bottom: auto;
    font-size: 1.5em;
    font-weight: bold;
    padding: 0.5em;
    width: 18em;
    height: 4em;
    text-align: center;
    line-height: 1.2;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.12);
}