.peer-education {
  position: relative;
  width: 100%;
  padding: 100px 0 40px 0;
  background-color: #243545;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  height: 600px;
  opacity: 0;
  -webkit-transition: opacity .3s ease;
  transition: opacity .3s ease; }
  @media only screen and (max-width: 991px) {
    .peer-education {
      padding: 100px 0 40px 0;
      height: 500px; } }
  @media only screen and (max-width: 767px) {
    .peer-education {
      padding: 80px 0 10px 0;
      height: 400px; } }
  .peer-education.active {
    opacity: 1; }
  .peer-education__wrapper {
    position: relative;
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    height: 100%;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center; }
  .peer-education__content {
    margin: 0 auto;
    max-width: 1152px;
    min-width: 320px;
    padding: 0 16px;
    width: 100%; }
    @media only screen and (max-width: 991px) {
      .peer-education__content {
        padding: 0 32px; } }
    @media only screen and (max-width: 767px) {
      .peer-education__content {
        padding: 0 16px; } }
  .peer-education__name {
    position: absolute;
    color: #ffffff;
    font: bold 56px/122% "Stem", sans-serif;
    text-transform: uppercase;
    letter-spacing: 4px;
    opacity: 0; }
    @media only screen and (max-width: 767px) {
      .peer-education__name {
        font: bold 33px/122% "Stem", sans-serif;
        letter-spacing: 1.5px; } }
    .peer-education__name.view-1 {
      top: 108px;
      left: 96px;
      -webkit-transform: translateX(30%);
      transform: translateX(30%);
      -webkit-transition: 0.4s 0.95s;
      transition: 0.4s 0.95s; }
      @media only screen and (max-width: 767px) {
        .peer-education__name.view-1 {
          top: 72px;
          left: 65.2px; } }
    .peer-education__name.view-2 {
      top: 162px;
      left: 144px;
      -webkit-transform: translateX(30%);
      transform: translateX(30%);
      -webkit-transition: 0.4s 1.35s;
      transition: 0.4s 1.35s; }
      @media only screen and (max-width: 767px) {
        .peer-education__name.view-2 {
          top: 107px;
          left: 98px; } }
  .peer-education__logo {
    position: relative;
    height: 214px; }
    @media only screen and (max-width: 767px) {
      .peer-education__logo {
		margin-left: 35px;
		max-height:100%;
        height: 100%; } }
    .peer-education__logo svg {
      max-height: 100%;
      width: 310px;
      overflow: visible; }
	  @media only screen and (max-width: 767px) {
		.peer-education__logo svg {
		  width: 200px; } }
      @media only screen and (max-width: 767px) {
        .peer-education__logo svg {
          max-width: 100%; } }
      .peer-education__logo svg g,
	  .peer-education__logo svg polygon,
	  .peer-education__logo svg path {
        opacity: 0; }
      .peer-education__logo svg #header-1 {
        opacity: 0;
        -webkit-transform: scale(2);
        transform: scale(2); }
      .peer-education__logo svg #header-2 {
        opacity: 0;
        -webkit-transform: scale(2);
        transform: scale(2); }
	  .peer-education__logo svg #element-1 {
		opacity: 0;
        -webkit-transform: translateX(30%);
        transform: translateX(30%);
	  }
    .peer-education__logo.active .peer-education__name {
      opacity: 1; }
      .peer-education__logo.active .peer-education__name.view-1 {
        -webkit-transform: translateX(0);
        transform: translateX(0); }
      .peer-education__logo.active .peer-education__name.view-2 {
        -webkit-transform: translateX(0);
        transform: translateX(0); }
    .peer-education__logo.active svg g,
	.peer-education__logo.active svg polygon,
	.peer-education__logo.active svg path,
	.peer-education__logo.active svg polygon#element-1,
	.peer-education__logo.active svg path#element-1,
	.peer-education__logo.active svg path.cls-2,
	.peer-education__logo.active svg polygon.cls-2	{
      opacity: 1; }
    .peer-education__logo.active svg #header-1 {
      -webkit-transition: .4s 0s;
      transition: .4s 0s;
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 1; }
    .peer-education__logo.active svg #header-2 {
      -webkit-transition: .4s .3s;
      transition: .4s .3s;
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 1; }
    .peer-education__logo.active svg #element-1 {
	  -webkit-transform: translateX(0);
	  transform: translateX(0);
      -webkit-transition: 0.15s 0.66s;
      transition: 0.15s 0.66s; }
    .peer-education__logo.active svg #element-2 {
      -webkit-transition: 0.15s 0.67s;
      transition: 0.15s 0.67s; }
    .peer-education__logo.active svg #element-3 {
      -webkit-transition: 0.15s 0.68s;
      transition: 0.15s 0.68s; }
    .peer-education__logo.active svg #element-4 {
      -webkit-transition: 0.15s 0.69s;
      transition: 0.15s 0.69s; }
    .peer-education__logo.active svg #element-5 {
      -webkit-transition: 0.15s 0.7s;
      transition: 0.15s 0.7s; }
    .peer-education__logo.active svg #element-6 {
      -webkit-transition: 0.15s 0.71s;
      transition: 0.15s 0.71s; }
    .peer-education__logo.active svg #element-7 {
      -webkit-transition: 0.15s 0.72s;
      transition: 0.15s 0.72s; }
    .peer-education__logo.active svg #element-8 {
      -webkit-transition: 0.15s 0.73s;
      transition: 0.15s 0.73s; }
    .peer-education__logo.active svg #element-9 {
      -webkit-transition: 0.15s 0.74s;
      transition: 0.15s 0.74s; }
    .peer-education__logo.active svg #element-10 {
      -webkit-transition: 0.15s 0.75s;
      transition: 0.15s 0.75s; }
    .peer-education__logo.active svg #element-11 {
      -webkit-transition: 0.15s 0.76s;
      transition: 0.15s 0.76s; }
    .peer-education__logo.active svg #element-12 {
      -webkit-transition: 0.15s 0.77s;
      transition: 0.15s 0.77s; }
    .peer-education__logo.active svg #element-13 {
      -webkit-transition: 0.15s 0.78s;
      transition: 0.15s 0.78s; }
    .peer-education__logo.active svg #element-14 {
      -webkit-transition: 0.15s 0.79s;
      transition: 0.15s 0.79s; }
    .peer-education__logo.active svg #element-15 {
      -webkit-transition: 0.15s 0.8s;
      transition: 0.15s 0.8s; }
    .peer-education__logo.active svg #element-16 {
      -webkit-transition: 0.15s 0.81s;
      transition: 0.15s 0.81s; }
    .peer-education__logo.active svg #element-17 {
      -webkit-transition: 0.15s 0.82s;
      transition: 0.15s 0.82s; }
    .peer-education__logo.active svg #element-18 {
      -webkit-transition: 0.15s 0.83s;
      transition: 0.15s 0.83s; }
    .peer-education__logo.active svg #element-19 {
      -webkit-transition: 0.15s 0.84s;
      transition: 0.15s 0.84s; }
    .peer-education__logo.active svg #element-20 {
      -webkit-transition: 0.15s 0.85s;
      transition: 0.15s 0.85s; }
    .peer-education__logo.active svg #element-21 {
      -webkit-transition: 0.15s 0.86s;
      transition: 0.15s 0.86s; }
    .peer-education__logo.active svg #element-22 {
      -webkit-transition: 0.15s 0.87s;
      transition: 0.15s 0.87s; }
    .peer-education__logo.active svg #element-23 {
      -webkit-transition: 0.15s 0.88s;
      transition: 0.15s 0.88s; }
    .peer-education__logo.active svg #element-24 {
      -webkit-transition: 0.15s 0.89s;
      transition: 0.15s 0.89s; }
    .peer-education__logo.active svg #element-25 {
      -webkit-transition: 0.15s 0.9s;
      transition: 0.15s 0.9s; }
    .peer-education__logo.active svg #element-26 {
      -webkit-transition: 0.15s 0.91s;
      transition: 0.15s 0.91s; }
    .peer-education__logo.active svg #element-27 {
      -webkit-transition: 0.15s 0.92s;
      transition: 0.15s 0.92s; }
    .peer-education__logo.active svg #element-28 {
      -webkit-transition: 0.15s 0.93s;
      transition: 0.15s 0.93s; }
    .peer-education__logo.active svg #element-29 {
      -webkit-transition: 0.15s 0.94s;
      transition: 0.15s 0.94s; }
    .peer-education__logo.active svg #element-30 {
      -webkit-transition: 0.15s 0.95s;
      transition: 0.15s 0.95s; }
    .peer-education__logo.active svg #element-31 {
      -webkit-transition: 0.15s 0.96s;
      transition: 0.15s 0.96s; }
    .peer-education__logo.active svg #element-32 {
      -webkit-transition: 0.15s 0.97s;
      transition: 0.15s 0.97s; }
    .peer-education__logo.active svg #element-33 {
      -webkit-transition: 0.15s 0.98s;
      transition: 0.15s 0.98s; }
    .peer-education__logo.active svg #element-34 {
      -webkit-transition: 0.15s 0.99s;
      transition: 0.15s 0.99s; }
    .peer-education__logo.active svg #element-35 {
      -webkit-transition: 0.15s 1s;
      transition: 0.15s 1s; }
    .peer-education__logo.active svg #element-36 {
      -webkit-transition: 0.15s 1.01s;
      transition: 0.15s 1.01s; }
    .peer-education__logo.active svg #element-37 {
      -webkit-transition: 0.15s 1.02s;
      transition: 0.15s 1.02s; }
    .peer-education__logo.active svg #element-38 {
      -webkit-transition: 0.15s 1.03s;
      transition: 0.15s 1.03s; }
    .peer-education__logo.active svg #element-39 {
      -webkit-transition: 0.15s 1.04s;
      transition: 0.15s 1.04s; }
    .peer-education__logo.active svg #element-40 {
      -webkit-transition: 0.15s 1.05s;
      transition: 0.15s 1.05s; }
    .peer-education__logo.active svg #element-41 {
      -webkit-transition: 0.15s 1.06s;
      transition: 0.15s 1.06s; }
    .peer-education__logo.active svg #element-42 {
      -webkit-transition: 0.15s 1.07s;
      transition: 0.15s 1.07s; }
    .peer-education__logo.active svg #element-43 {
      -webkit-transition: 0.15s 1.08s;
      transition: 0.15s 1.08s; }
    .peer-education__logo.active svg #element-44 {
      -webkit-transition: 0.15s 1.09s;
      transition: 0.15s 1.09s; }
    .peer-education__logo.active svg #element-45 {
      -webkit-transition: 0.15s 1.1s;
      transition: 0.15s 1.1s; }
    .peer-education__logo.active svg .vanish.view-1.hide {
      opacity: 0;
      -webkit-transition: .4s !important;
      transition: .4s !important; }
    .peer-education__logo.active svg .vanish.view-2.hide {
      -webkit-transition: .4s !important;
      transition: .4s !important; }
    .peer-education__logo.active svg #element-9.view-1.set {
      -webkit-transform: translate(2px, 5px);
      transform: translate(2px, 5px);
      -webkit-transition: .4s;
      transition: .4s; }
    .peer-education__logo.active svg #element-8.view-1.set {
      -webkit-transform: translate(0px, 5px);
      transform: translate(0px, 5px);
      -webkit-transition: .4s;
      transition: .4s; }
    @media only screen and (max-width: 767px) {
      .peer-education__logo svg {
         } }
  .peer-education__logo + .peer-education__text {
    padding: 0 0 0 84px;
    margin: 20px 0 0 -2px; }
    @media only screen and (max-width: 991px) {
	  .peer-education__logo + .peer-education__text {
		padding: 0 0 0 84px;
		margin: 10px 0 0 -2px; } }
    @media only screen and (max-width: 767px) {
      .peer-education__logo + .peer-education__text {
        padding: 0 0 0 88px;
		margin: 25px 0 0 0;
		display: block;
		width: 350px; } }
  .peer-education__text {
    position: relative;
    display: block;
    color: #243746;
    font: 300 32px/130% "Stem", sans-serif; }
    @media only screen and (max-width: 991px) {
      .peer-education__text {
        font: 300 22.5px/130% "Stem", sans-serif; } }
    @media only screen and (max-width: 767px) {
      .peer-education__text {
        font: 300 14px/130% "Stem", sans-serif; } }
  .peer-education__btn {
    position: relative;
    padding: 0 0 0 84px;
    margin: 30px 0 0 0; }
    @media only screen and (max-width: 991px) {
      .peer-education__btn {
        margin: 30px 0 0 0; } }	
    @media only screen and (max-width: 767px) {
      .peer-education__btn {
        padding: 0;
		margin:25px 0 0 88px;
		width: fit-content} }
    .peer-education__btn .button {
      margin: 0; }

.peer-education__logo {
  -webkit-animation-name: animLeft;
  animation-name: animLeft;
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s; }

.peer-education__text {
  -webkit-animation-name: animRight;
  animation-name: animRight;
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-delay: 2.65s;
  animation-delay: 2.65s; }

.peer-education__btn {
  -webkit-animation-name: animOpacity;
  animation-name: animOpacity;
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-delay: 3.15s;
  animation-delay: 3.15s; }

@-webkit-keyframes animRight {
  0% {
    -webkit-transform: translateX(-200px);
    transform: translateX(-200px);
    opacity: 0; }
  50% {
    opacity: 0.5; }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1; } }

@keyframes animRight {
  0% {
    -webkit-transform: translateX(-200px);
    transform: translateX(-200px);
    opacity: 0; }
  50% {
    opacity: 0.5; }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1; } }

@-webkit-keyframes animLeft {
  0% {
    -webkit-transform: translateX(200px);
    transform: translateX(200px);
    opacity: 0; }
  50% {
    opacity: 0.5; }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1; } }

@keyframes animLeft {
  0% {
    -webkit-transform: translateX(200px);
    transform: translateX(200px);
    opacity: 0; }
  50% {
    opacity: 0.5; }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1; } }

@-webkit-keyframes animOpacity {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes animOpacity {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes vanish {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes vanish {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }
