/*  General elements **/

 a {
   color: #c5b9ac;
 }  

/* header */

.main-header a {

  color: #eee;
}

/* contact page */

.section-contact h5 {
  color: #c14545;
}

.contact-box-wrapper .form-input {
  border: solid 2px;
  border-top: solid 1px;
  font-size: 1.5em;
  margin-bottom:  1em;
}

.contact-box-wrapper  .label {
  text-transform: uppercase;
  letter-spacing: .2em;
  position: relative;
  color: #616373;
  line-height: 1em;
  font-weight: 700;
  background: 0;
  padding-bottom: 8.5px;
  margin: 2em;
  font-size: 15px;
}

.contact-box-wrapper textarea {
  width:  20em;
  height:  10em;
  margin-bottom:  1em;
}

.btn.template-btn-1 {
    background-color: #f9f9f9;
    padding: 1em;
    border-radius: 5px;
    border: 1px solid lightgray;
    box-shadow: 1px 1px lightgray;
}
.btn.template-btn-1:hover {

  padding-left: 1em !important;  
  background-color:  grey;
  color:  white;
}

/* loading text */

.loading-text {

  color: white;
  position: absolute;
  left: 47%;
  top: 50%;e

  z-index: 0;
  animation: move 7s linear; 
}

@keyframes move {
  0%{ z-index: 0; }
  10% { z-index: 4; }
  100% { z-index: 0; }

}

@-webkit-keyframes mymove {
  0%{ z-index: 0; }
  10% { z-index: 4; }
  100% { z-index: 0; }
} 

/* Portfolio elements */

.portfolio-box .box-cover .box-info .portfolio-item-client {
   font-family: 'Arial Black', 'Arial Bold', arial, sans-serif;
   font-style: italic;
   font-size: 9pt;
   text-transform: none;
   font-display: swap;
}

.portfolio-box .box-cover .box-info .portfolio-item-title {
   font-family: 'Arial Black', 'Arial Bold', arial, sans-serif;
   font-size: 12pt;
   font-display: swap;
}


/* news changes */

.news-post .post-title a {
  color: #39393c;
}

#workFeatureBotBlurb {
  /*float: right;*/
}

#genericFeatureBotText {
  float: none;
  margin-top: 1em;
}

#archiveLinks a.archiveLink {
    text-align: left; 
    display: inline; 
    width: auto; 
    padding: 2px 5px 2px;
    margin: 2px;
    font-size: 10;
    margin-top: 1px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
}

/* Social section */

.project-footer {
  text-align: center;
}
.single-project-view .project-footer .share-block-wrapper {
  position: relative;
  -webkit-transform: none;
-ms-transform: none;
transform: none;
left: initial;
top: initial;
}
.share-block {
  margin-top: 1em;
}
.share-block-title {
  color: #616564;
    vertical-align: middle;
    font-size: 32px;
    margin-bottom: 33px;
    text-transform: none;
}
.share-block .share-options li i {
  font-size: 28px;
  color: #616564;
}

/* main changes */


.page-wrapper > form {
  padding: 2em;
  background: black;
}

.page-wrapper > form > table {
  margin: 1em;
}

.portfolio-wrapper li {
  list-style: none;
}

.content-wrapper {
  margin-bottom: 2em;
}

ul.workRelatedMedia {
  list-style: none;
  padding-left: 0;
}
ul.workRelatedMedia .row{
  margin-bottom: 1em;
}

.work .workRelatedMedia .isotope-item {
    margin-top: 1em;
}

ul.prevNext {
  list-style: none;
  clear: both;
}
.prev {
  float: left;
}
.next {
  float: right;
}

.videoEmbedWrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56%;
}

.videoEmbed {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0; 
  top: 0;
  background:black;
}



/*New elements for main.css */
.intro-box {
  margin: -30px -30px 0;
}
.intro-box-homepage {
  height: 0;
  padding-bottom: 43%;
  overflow: hidden;
}
.intro-box-homepage .videoEmbed {
  top: -8%;
}

footer {
  margin: 0 -30px -30px;
}


@media (max-width: 450px) {

  .intro-box {
    margin:  -15px -15px 0;
  }

  footer {
    margin:  0 -15px -15px;
  }

}

@media (max-width: 900px) {
  .intro-box-homepage {
    padding-bottom: 60%;
  }
  .intro-box-homepage .videoEmbed {
    top: 0;
  }
}

/*                   Counter Boxes                */
.counter-boxes .counter-box {
  border-right: none;

}
.counter-boxes .counter-box .value-container:after {
  border-bottom: none;

}


/****************** bouncing icon bar ****************/

.hyper-icon {
  z-index: 200;
  position: relative;
}
.hyper-icon img {
  width: 7em;
  border: solid 15px #24262f;
  border-radius: 5em;
  margin: -3.5em auto;
  background: #1e1f24;
  position: absolute;
  left: calc(50% - 3.5em);
}

.hyper-icon.top img {
  border-color: black;
  margin-top: -4em;
}

.elearning2 .hyper-icon.top img {
  border-color: #1b1715;
}

.elearning2 .section-description {
  padding: 0;
}

.elearning2 .HyperInteractive {
  border-top-width: 0px;
}

.elearning2 .page-section a:hover {
  text-decoration: underline;
}

/**************** elearning examples page ********/

html.examp {
  background-color: #949a98;
} 
html.examp .isotope-container li:nth-child(5) {
  display:none;
}
@media (min-width: 992px) {
  
  html.examp .portfolio-wrapper {
    background-image: url("/img/elearning/background-with-screen-fade.jpg");
    background-size: contain;
    background-position-y: 8%;
    background-repeat: no-repeat;
  }
  
  html.examp .isotope-container li:nth-child(5) {
    visibility: hidden;
    display:block !important;
  }

}



html.examp
.examp body, 
.examp .section-portfolio-extended {
    background: none;
}

.examp .intro-box .rounded-border-bottom,
.examp .intro-box .rounded-border-bottom:before,
.examp .intro-box .rounded-border-bottom:after { 
  color: #949a98;
}

.examp .single-project-view {
  background: none;
}

@media (min-width: 750px) {
  .examp #isotope-list {
    width: 150%;
    margin-left: 0;
    transition: all 1s;
  }
}

@media (max-width: 749px) {
    .exampleRelatedMedia li,
    .workRelatedMedia li {
        display: block !important;
    }
    
    .exampleRelatedMedia .next,
    .exampleRelatedMedia .previous,
    .workRelatedMedia .next,
    .workRelatedMedia .previous {
        display: none !important;
    }
}

.examp .isotope-item {
  padding-left: 30px;
  padding-right: 30px;
}

.scroll-btn.circle {
    max-width: 5em;
    margin: auto;
    bottom: 6px;
    left: calc(50% - 2.5em);
  }

.examp .rounded-border-bottom.top {
  display: none;
}


/************* eLearning single **********/

.examp .project-cover {
  color: white;
  position: relative;
}
.examp .project-cover h1, 
.examp .project-cover h2 {
    font-size: 1.8em;
    line-height: 0.7em;
    font-weight: 200;
    color: white;
}
.examp .project-cover h1 {
    margin-top: 2em;
}
.examp .project-cover h2 {
  margin-top: 0;
  margin-bottom: 1em;
}

.examp .project-body {
  color: white;
}

.examp .isotope-list {
  position: relative;
}

.exampleRelatedMedia {
    overflow: hidden;
}
.exampleRelatedMedia .isotope-item {
    margin-top: 2em;
}





  .previous, 
  .next {

    display: inline-block;
    font-size: 20px;
    color: white;
    border: solid 2px white;
    border-radius: 200px;
    padding: 4px 10px;
    position: absolute;
    left: -20px;
    top: calc(50% - 8px);

    cursor: pointer;
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; 
  }
  .previous:hover, 
  .next:hover {
    background: black;
  }
  .next {
    left: initial;
    right: -20px;
  }

  .project-cover .next {
    top: calc(50% - 18px);
    right: -40px;
    height: 36px;
  }
  .project-cover .previous {
    top: calc(50% - 18px);
    left: -40px;
    height: 36px;
  }
  
  @media (min-width: 992px) {
      .project-cover .next {
          right: -50px;
      }
      .project-cover .previous {
          left: -50px;
      }
      
  }
  
  .project-body a {
      text-decoration: underline;
  }

  .single-project-view a {
      color: #483827;
  }
  .single-project-view a:hover {
      color: white;
  }
  
  .single-project-view .project-cover img {
    margin: auto;
    display: block;
  }
/**************** Footer  ***************/

footer .widget_about img {
  margin-bottom: 35px;
  opacity: 0.58;
}

.widget .stand-out {
  padding: 1em;
  background-color: #2b2d37;
  text-align: center;
}


.prefooter {
  position: relative;
  padding: 0 15px;
}


.prefooter-content {
    background-image: url('/img/blurry-prefooter.webp');
    background-size: cover;
    padding: 3em 0 3em;
    background-position: center;
}

.prefooter-content h3,
.prefooter-content p {
  color: white;
}




/* Video */
#player-controls-outro {
  bottom: auto;
  top: 30em;
  left: 50%;
  margin-left: -4.25em;
  top: 50%;
}







/**************** Captcha  ***************/


.grecaptcha-badge {
  float: right;
}
















/* PAGE SECTIONS ADAPT */

.elearning2 .container {
  width: 100%;
  padding: 0;
}




/* PAGE SECTIONS */

.sections {
  margin: 0 -30px;
  background-color:white;
  padding: 0 0em;
}

.page-section {
  text-align: center;
  
      text-align: center;
    display: flex;
    width: 100%;
}

.page-section-inner {
  max-width: 80%;
  max-width: 50em;
  margin: 0 auto 0;
  padding: 20px;
  
    width: 50%;
    text-align: left;

    color: rgb(82, 82, 82);
}


.page-section a {
  color : inherit;
}

.page-section p {
    font-size: 1.35em;
  line-height: 1.2em;
  color : inherit;
}

.page-section h2 {
  text-transform: none;
  font-size: 2.2em;
  font-weight: 1000;
  margin-bottom:0;
  line-height: 1.2em;
  color : inherit;
}

.page-section h3 {
  text-transform: none;
  font-weight: 1000;
  margin-top: 0em;
  line-height:1.2em;
  font-size: 1.6em;
  color : inherit;
}

.Left {
  flex-direction: row;
  align-content:flex-start;
  background-size:cover;
  background-position: center;
}

.Left 
.page-section-inner {
  float: left;
  margin: 3em 3em 10em;
  max-width: 25em;
} 

.Right
 {
    background-color: white;
    align-content: flex-end;
    flex-direction: row-reverse;

   background-size: cover;
   background-repeat: no-repeat;
}

.Right 
.page-section-inner {
  float: right;
  margin: 3em 3em 10em;
  max-width: 25em;

}







/*            Sections for elearning           */

.page-section {
    font-size: 1.3vw;
  }


.HyperInteractive {
  background-position: center;
}
.HyperInteractive .page-section-inner {
  max-width: 50%;
width: 50%;

}

.Foundation .page-section-inner {
  margin: 6em 3em 6em;
}

.BiggerImpact {
  background-position: bottom right;
background-size: 80%;
background-repeat: no-repeat;
}
.BiggerImpact .page-section-inner {
  margin: 12em 3em 0em;
color: black;
}

.BiggerImpact {

}

.InstructionalDesign {
    background-size: 66%;
    background-position: left;
    background-color: #fcfcfc;
    position: relative;
}
.InstructionalDesign .page-section-inner {
  margin: 1em 3em 6em;
}
.InstructionalDesign .gears {
  position: absolute;
  left: 10%;
  top: 20%;
  opacity: 70%;
  width: 50%;
}

.RichExperience {
  background-position: top;
}
.RichExperience .page-section-inner {
  margin: 17em 3em 0em;
}

.Gamification {

}

.Gamification .page-section-inner {
  color: white;
  margin: 18em 3em 1em;
}

.white {
  color: white;
}
.orange {
  color: orange;
}




.three-icons {
  margin: 0 5%;
}
.three-icons img {
  width: 35%;
  display: block;
  margin: 3em auto 1em;
}
.three-icons p {
  margin: 1em auto 3em;
  text-align: center;
  max-width: 15em;
  font-size: 1.6vw;
  line-height: 1.2em;
}