/* FONTS
font-family: '"Inter", sans-serif', sans-serif;
font-family: 'Open Sans', sans-serif;
*/

/*
Colors:

*/


/* Desktop Large */
/*
@media only screen and (max-width: 1140px) {
  h3.head-text-title {
    font-size: 72px;
    font-size: 4.5rem;
  }
}
*/

/* Desktop Medium */
/*
@media only screen and (max-width: 1024px) {
  h3.head-text-title {
    font-size: 64px;
    font-size: 4rem;
  }
}
*/


/* Desktop Small / Tablet Landscape */
/*
@media only screen and (max-width: 900px) {
  h3.head-text-title {
    font-size: 56px;
    font-size: 3.5rem;
  }
}
*/

/* Tablet Portrait */
/*
@media only screen and (max-width: 767px) {
  h3.head-text-title {
    font-size: 48px;
    font-size: 3rem;
  }
}
*/


/* Large Mobile */
/*
@media only screen and (max-width: 600px) {
  h3.head-text-title {
    font-size: 40px;
    font-size: 2.5rem;
  }
}
*/


/* Medium Mobile */
/*
@media only screen and (max-width: 480px) {
  h3.head-text-title {
    font-size: 32px;
    font-size: 2rem;
  }
}
*/


/* Small Mobile */
/*
@media only screen and (max-width: 375px) {
  h3.head-text-title {
    font-size: 28px;
    font-size: 1.75rem;
  }
}
*/


/* Extra Small Mobile */
/*
@media only screen and (max-width: 320px) {
  h3.head-text-title {
    font-size: 24px;
    font-size: 1.5rem;
  }
}
*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
}

hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid rgba(0,0,0,.1);
    border-top: 1px solid rgba(230, 230, 230, .3);
}

img {
  max-width: 100%;
  display: block;
    margin: auto;
}

img.logo {
/*    width: 75px;*/
    width: 60px
}

#delayedDiv {
    display: none;
}


@media only screen and (max-width: 1199px) {
    .my-divider {
    display: none;
    }
}

h2 {
    font-size: 24px;
    color: #f2f2f2;
    text-align: left;
    margin-top: 5px;
    margin-bottom: 12.5px;
    font-weight: 600;
}

@media only screen and (max-width: 767px) {
h2 {
    text-align: center;
    }
}

h4 {
    font-weight: 500;
    font-size: 25px;
    color: #1a1a1a;
    margin-bottom: 7.5px;
}

p {
    font-family: "Inter", sans-serif;
    color: #1a1a1a;
    font-size: 14px;
    font-size: .9rem;
    line-height: 1.5;
    text-shadow: none;
    font-weight: 300;
}

a.text-link {
    color: #cf6d47;
}

a.text-link:hover {
    color: #cf6d47 !important;
    text-decoration: underline;
}

.container, .container-sm {
    width: 1140px;
}

/* Layout Container (matches nav & footer width) */
@media only screen and (min-width: 767px) {
.container {
    padding-right: 0px;
    padding-left: 0px;

    }
}

@media only screen and (max-width: 767px) {
.container {
    padding-right: 15px;
    padding-left: 15px;

    }
}


@media only screen and  (max-width: 1200px) {
.container, .container-sm {
    max-width: 90%;
    }
}



/* NAV */
nav {
    position: sticky;
    padding: 10px 0px;
    top: 0;
    background: #1a1a1a;
    z-index: 1000;
    border-bottom: 1px solid rgba(230, 230, 230, .3);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5rem 0;
}

@media only screen and  (max-width: 1200px) {
.container, .container-sm {
    max-width: 90%;
    }
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 1rem;
}

@media only screen and (min-width: 767px) {
.nav-links  {
    padding-bottom: 0px;
    }
}

.nav-links a {
    color: white;
    text-decoration: none;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: #da71a0;
}


a.navbar-brand {
    display: inherit;
    padding: 0;
    margin: auto;
    color: #ffffff;
}

a.navbar-brand:hover {
    color: #da71a0;
}

nav ul li a.active {
  color: #da71a0;
    font-weight: 700;
}

a.home.active {
    color: #da71a0;
}

a.home:hover {
    color: #da71a0;
    
}

a.about.active {
    color: #dac471;
}

a.about:hover {
    color: #dac471;
}


a.design.active {
    color: #71d0da;
}

a.design:hover {
    color: #71d0da;
}


a.work.active {
    color: #da8f71;
}

a.work:hover {
    color: #da8f71;
}

a.contact:hover {
    color: #a0da71;
}

a.resume:hover {
    color: #da71a0;
}


/* SECTIONS */
section {
  padding: 4rem 0;
    width: 100%;
/*
    max-width: 90%;
    margin: auto;
*/
}






#home {
/*  background: url('../img/just-me.png') no-repeat center center/cover;*/
    height: auto;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
/*    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);*/
    font-size: 2rem;
    padding-bottom: 0px;
}


h3.head-text-title {
    font-family: '"Inter", sans-serif', sans-serif;
    color: #1a1a1a;
    font-weight: 600;
/*    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);*/
    text-align: left;
}

@media only screen and  (max-width: 1200px) {
    h3.head-text-title {
        font-size: 64px;
        font-size: 4rem;
    }
}

@media only screen and  (max-width: 1199px) {
    h3.head-text-title {
        font-size: 48px;
        font-size: 3rem
    }
}


@media only screen and (max-width: 740px) {
    h3.head-text-title {
        font-size: 48px;
        font-size: 3rem }
}

@media only screen and (max-width: 600px) {
  h3.head-text-title {
    font-size: 38px;
    font-size: 2.375rem;
  }
}



/* Medium Mobile */

@media only screen and (max-width: 480px) {
  h3.head-text-title {
    font-size: 42px;
    font-size: 2.625rem;
  }
}



/* Small Mobile */

@media only screen and (max-width: 375px) {
  h3.head-text-title {
    font-size: 42px;
    font-size: 2.625rem;
  }
}



/* Extra Small Mobile */

@media only screen and (max-width: 320px) {
  h3.head-text-title {
    font-size: 42px;
    font-size: 2.625rem;
  }
}

@media only screen and (max-width: 480px) {
  h3.head-text-title.top-header {
    font-size: 24px;
    font-size: 1.5rem;
  }
}




@media only screen and (max-width: 767px) {
    h3.head-text-title {
        text-align: center }
}




/* Media queries for scaling text and container width */

/* Large desktop */
@media only screen and (min-width: 991px) {
  .image-text-container.left,
  .image-text-container.right {
    max-width: 315px;
  }


  .head-text-title {
    font-size: 72px;
    font-size: 4.5rem;
  }

  .head-text-tagline {
    font-size: 1.125rem; /* 18px */
  }
}

/* Desktop / Large tablet */
@media only screen and (min-width: 992px) {
  .image-text-container.left, {
    max-width: 300px;
      position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0%, -64%);
    padding: 1rem;
    text-align: left;
    z-index: 10;
  }
    ,
  .image-text-container.right {
    max-width: 300px;
      position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0%, -71%);
    padding: 1rem;
    text-align: left;
    z-index: 10;
  }



  .head-text-tagline {
    font-size: 1rem; /* 16px */
  }
}

/* Tablet */
@media only screen and (max-width: 991px) {
  .image-text-container.left,
  .image-text-container.right {
    max-width: 280px;
  }
}

@media only screen and (max-width: 864px) {
  .image-text-container.left,
  .image-text-container.right {
    max-width: 250px;
}
    
    
  .head-text-title {
    font-size: 2rem; /* 32px */
  }

  .head-text-tagline {
    font-size: 0.9rem; /* 14.4px */
  }
}

/* Small tablets and large mobiles */
@media only screen and (max-width: 767px) and (min-width: 481px) {
  .head-text-title {
    font-size: 1.75rem; /* 28px */
  }

  .head-text-tagline {
    font-size: 0.875rem; /* 14px */
  }
}

/* Mobile */
@media only screen and (max-width: 480px) {
  .head-text-title {
    font-size: 1.5rem; /* 24px */
  }

  .head-text-tagline {
    font-size: 0.8rem; /* ~13px */
  }
}


h3.head-text-title.center {
    text-align: center;
}

p.head-text-tagline {
    font-family: '"Inter", sans-serif', sans-serif;
    font-size: 16px;
    color: #1a1a1a;
    text-shadow: none;
    text-align: left;
}

@media only screen and (max-width: 767px) {
p.head-text-tagline.top-header {
    display: none;
    }
}


p.head-text-tagline.list {
    font-family: '"Inter", sans-serif', sans-serif;
    font-size: 16px;
    color: #1a1a1a;
    text-shadow: none;
    text-align: left;
    line-height: 2;
}

@media only screen and (max-width: 767px) {
p.head-text-tagline.list {
    text-align: center;
    }
}

/* Base styles from before */
/*
.col-lg-6, .col-md-6, .col-sm-6, .col-6, .col-lg-3, .col-md-3, .col-sm-3, .col-3 {
  position: relative;
  padding: 0;
}
*/




p.head-text-tagline.about-me {
    display: contents;
}

.section-content.about-me {
    text-align: left;
}



@media only screen and (min-width: 1199px) {
span.about-mobile {
    display: none;
    }
}

@media only screen and (max-width: 1199px) {
span.about-mobile {
    display: contents;
    }
}

@media only screen and (min-width: 1199px) {
span.about-desktop {
    display: contents;
    }
}

@media only screen and (max-width: 1199px) {
span.about-desktop {
    display: none;
    }
}


.image-text-container.left {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0%, -64%);
  padding: 1rem;
  text-align: left;
  z-index: 10;
    
}

.image-text-container.right {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0%, -64%);
  padding: 1rem;
  text-align: left;
  z-index: 10;
}

@media only screen and  (max-width: 1199px) {
    .image-text-container.right, .image-text-container.left {
        transform: translate(0%, -80%);
    }
}

@media only screen and  (max-width: 860px) {
    .image-text-container.right {
        right: -25px;
    }
}


@media only screen and (max-width: 767px) {
    .image-text-container.right, .image-text-container.left {
       transform: translate(0%, -100%);
    }
}

@media only screen and (max-width: 600px) {
    .image-text-container.right, .image-text-container.left {
       transform: translate(0%, -110%);
    }
}



@media only screen and (max-width: 600px) {
    .image-text-container.right {
       right: 0px;
    }
}



img.img-me-left-home {
  float: none !important;
    display: block;
    margin-left: auto;
    margin-right: 0;
    max-width: 50%;
}

img.img-me-right-home {
  float: none !important;
    display: block;
    margin-right: auto;
    margin-left: 0;
    max-width: 50%;
}

@media only screen and (max-width: 768px) {
    img.img-me-right-home, img.img-me-left-home {
        max-width: 60%;
    }
}

@media only screen and (max-width: 600px) {
  .section-content img.img-me-right-home, .section-content img.img-me-left-home {
    margin-top: -25px;
  }
}


















#about {
  background-color: #1a1a1a;
}


.head-text.about-me {
    position: relative;
    top: 50%;
    transform: translate(0%, -50%);
}

@media (max-width: 767px) {
  .head-text.about-me {
    padding-bottom: 20px;
  }
}


h3.head-text-title.about-me {
    text-align: left }
}







@media only screen and (max-width: 767px) {
    .head-text.about-me {
    padding-left: 0;
    width: 100%;
    margin: auto;
    top: inherit;
    transform: none;
    margin-bottom: 25px;
    }
}


img.about-me-left {
    /* margin: 0 2% 0 0; */
    padding: 1%;
    box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.2);
    background-color: #f2f2f2;
}

@media only screen and (max-width: 767px) {
    img.about-me-left {
        /* margin: 0 2% 0 0; */
        padding: 1%;
        box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.2);
        background-color: #f2f2f2;
        margin: 0px 15px;
        margin: auto;
        /* margin: 0px 15px; */
        width: 95%;
    }
}


img.collage {
    transition: transform 0.3s ease;
    background-color: #ffffff;
    padding: 8px;
}


img.collage:hover {
    background-clip: padding-box;
    transform: scale(.995);
    transition: transform 0.3s ease;
}



.row.list-pie_chart {
    padding-top: 2rem;
    padding-bottom: 2rem;
}


.pie-chart {
    width: 100%;
    height: auto;
    display: block;
}

.contain-pie-chart {
    position: relative;
}

.pie-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    width: 50%;
    margin: auto;
}



.contain-pie-chart-human {
    width: 50%;
    position: absolute;
    top: 3%;
    left: 63%;
}

.middle-content-left {
    right: 0;
    top: 50%;
    transform: translate(0%, -50%);
    position: relative;
    float: left;
    text-align: left;
}

@media only screen and (max-width: 767px) {
    .middle-content-left {
    transform: none;
    position: relative;
    float: none;
    text-align: center;
    top: 0;
    margin-bottom: 25px;
    }
}

.middle-content-right {
    right: 0;
    top: 50%;
    transform: translate(0%, -50%);
    position: relative;
    float: right;
    text-align: left;
}


@media only screen and (max-width: 767px) {
    .middle-content-right {
    transform: none;
    position: relative;
    float: none;
    text-align: center;
    top: 7.5%;
    margin-top: 25px;
    }
}



.about-list {
    margin-top: 15px;
    font-size: 16px;
    font-size: 1rem;
    color: #1a1a1a;
    line-height: 1.5;
}

ol, ul {
    list-style: none;
}

.about-list li {
    line-height: 2;
}













#design {
    background-color: #ffffff;
}




p.work-title {
/*    text-align: center;*/
    font-family: '"Inter", sans-serif', sans-serif;
    color: #1a1a1a;
    font-weight: 400;
    font-size: 25px;
    margin: 0;
}


.process-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 28px;
    margin-top: 45px;
    margin-bottom: 35px;
}

.process-item {
    flex: 1 1 18%;       /* ~5 items per row when wide */
    min-width: 200px;
    display: flex;
    flex-direction: column;  
    align-items: center;
}

.process-content {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    width: 100%;
}

.process-content img.work-image {
    width: 124px;
    height: auto;
    flex-shrink: 0;
    margin: auto;
    transform: none;
}


@media (max-width: 1199px) {
    .process-content img.work-image {
        width: 150px;
        padding-bottom: 50px;
    }
}

@media (max-width: 767px) {
    .process-content img.work-image {
        width: 125px;
        padding-bottom: 50px;
    }
}

.process-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    transform: translate(0%, 20%);
}

.process-text p {
    margin: 0;
}

.process-item h2 {
    margin: 0 0 25px 0;
    color: #333333;
}

/* When screen < 1200px, stack items vertically */
@media (max-width: 1199px) {
  .process-container {
    flex-direction: column;
    align-items: center;
      margin-bottom: 0px;
  }
  .process-item {
    flex: 1 1 100%;
    max-width: 600px; /* keeps them from stretching too wide */
  }
  .process-content {
    flex-direction: row; /* image left, text right */
    align-items: flex-start;
  }
  .process-text {
    align-items: flex-start;
    transform: none; /* reset offset */
    transform: translate(0%, -115%);
  }
    
  .process-text.desktop {
    display: none;
  }
    
  .process-text.mobile {
    display: flex;
  }
}

@media (min-width: 1199px) {
  .process-text.desktop {
/*    display: contents;*/
  }
}


@media (min-width: 1199px) {
  .process-text.mobile {
    display: none;
  }
}

@media (max-width: 1199px) {
  .process-text p.head-text-tagline.list.about-me {
    font-size: 18px;
  }
}

@media (max-width: 1199px) {
  .process-item h2 {
    font-size: 24px;
      margin-bottom: 15px;
    }
}








#work {
  background-color: #1a1a1a;
    padding-bottom: 10rem;
}

img.work-image {
    background-clip: padding-box;
/*
    -webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
*/
    transition: transform 0.3s ease;
}

img.work-image:hover {
    background-clip: padding-box;
/*
    -webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
*/
  transform: scale(.995);
    transition: transform 0.3s ease;
}











#contact {
    background-color: #f2dede;
}

.section-content {
    text-align: center;
    max-width: 1140px;
    margin: auto;
    padding-right: 0;
    padding-left: 0;
}

@media only screen and  (max-width: 1200px) {
.section-content {
    max-width: 90%;
    }
}

.section-content.home {
/*    margin-bottom: 0;*/
    margin-top: 0;
}


.section-content img {
    margin-top: 0px;
    border-radius: 8px;
}



button {
    border-radius: 5px;
    background-color: #1a1a1a;
    border: none;
    color: #ffffff;
    font-weight: 500;
    text-align: center;
    font-size: 16px;
    padding: 10px;
    width: 175px;
    transition: all 0.5s;
    cursor: pointer;
    margin: 25px 0 0 0;
    font-family: '"Inter", sans-serif', sans-serif;
}


.button span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}

.button span:after {
    content: '\f105';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
    font-size: 15x;
    color: #ffffff;
}

.button:hover span {
  padding-right: 25px;
    color: #ffffff;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
    color: #ffffff;
}

button:focus {
    outline: none;
}







.section-btn {
    display: inline-block;
    margin-top: 2rem;
    padding: 0.75rem 1.5rem;
    background: #1a1a1a;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.3s;
    transition: transform 0.3s ease;
}

.section-btn:hover {
    background-clip: padding-box;
    transform: scale(.995);
    transition: transform 0.3s ease;
    text-decoration: none;
    background: #1a1a1a;
    color: #ffffff;
}










.case-study-card {
   border-radius: 8px;
    background-color: #fff;
    font-family: '"Inter", sans-serif', sans-serif;
    color: #1a1a1a;
    text-align: left;
}



.view-case-btn {
  display: inline-block;
  margin-top: 15px;
  padding: 10px 20px;
  background-color: #d32f2f;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.view-case-btn:hover {
  background-color: #b71c1c;
}

p.card-header {
    font-weight: 600;
    font-size: 25px;
    color: #1a1a1a;
    background-color: inherit;
    border-bottom: none;
    padding: 0px;
}

p.card-title {
    font-weight: 600;
    font-size: 20px;
    color: #4d4d4d;
    margin-bottom: 0px;
    text-align: left;
}

p.card-content {
    font-family: "Inter", sans-serif;
    color: #1a1a1a;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 1.5;
    font-weight: 700;
}

span.card-content-text {
    font-weight: normal;
}

span.card-content-text-bold {
    font-weight: 600;
}









/* FOOTER */
footer {
    color: white;
    padding: 1.5rem 0;
    background: #1a1a1a;
    /* z-index: 1000; */
    border-top: 1px solid rgba(230, 230, 230, .3);
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #1a1a1a; /* your background color */
  color: #ffffff;
  padding: 22.5px 0;
  z-index: 9999;
}


.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
    padding-right: 0px;
    padding-left: 0px;
}




p.copyright-text {
    color: #f2f2f2;
    font-size: 16px;
    font-size: 1rem;
    text-decoration: none;
    transition: color 0.3s;
}

a.navbar-brand.footer {
    display: inline-block;
    font-size: 16px;
}

.footer-right {
    display: flex;
    gap: 1rem;
}

.footer-right a {
    color: #f2f2f2;
    font-size: 16px;
    font-size: 1rem;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-right a:hover {
    color: #da71a0;
}

footer .gradient-white {
    position: absolute;
    width: 100%;
    height: 50px;
    top: -50px;
    left: 0px;
}


footer a.back-to-top {
    background-color: #1a1a1a;
    border-top: 1px solid rgba(230, 230, 230, .3);
    border-radius: 50% 50% 0 0;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: -55px;
    margin-left: -50px;
    text-indent: 0;
    color: white;
    font-size: 40px;
    cursor: pointer;
    transition: transform 0.3s ease;
    text-decoration: none;
}

footer a.back-to-top:hover {
    transform: translateY(-5px);
    background-color: #1a1a1a;
}

footer a.back-to-top::before {
    content: "\f106";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    display: inline-block;
    margin-top: -25px;
}






/* Responsive */
@media only screen and (max-width: 767px) {
    .nav-links {
    flex-direction: column;
    background: #1a1a1a;
    position: absolute;
    top: 60px;
    right: 0;
    width: 100%;
    padding-bottom: 10px;
    display: none;
    }

    .nav-links.active {
    display: flex;
    }
    
    .menu-toggle {
    display: block;
    cursor: pointer;
    color: white;
    font-size: 1.5rem;
    }
    
    nav ul.nav-links li a{
    width: 90%;
    margin: auto;
    display: flex;
    }

    
    nav ul.nav-links li a.active {
    color: #da71a0;
    font-weight: 700;
    }

}

@media only screen and (min-width: 768px) {
  .menu-toggle {
    display: none;
  }
}






.col-pie-container {
    position: relative; 
    text-align: center; 
}

.middle-content-middle.pie-container {
    position: relative;
    display: inline-block; 
    margin: 0 auto;
    margin-right: 40px;
}







































/* PARTICLES */

.particle {
	 position: absolute;
	 border-radius: 50%;
}
 @keyframes particle-animation-1 {
	 100% {
		 transform: translate3d(45vw, 70vh, 42px);
	}
}
 .particle:nth-child(1) {
	 animation: particle-animation-1 60s infinite;
	 opacity: 0.89;
	 height: 9px;
	 width: 9px;
	 animation-delay: -0.2s;
	 transform: translate3d(28vw, 9vh, 24px);
	 background: #d94d26;
}
 @keyframes particle-animation-2 {
	 100% {
		 transform: translate3d(40vw, 47vh, 87px);
	}
}
 .particle:nth-child(2) {
	 animation: particle-animation-2 60s infinite;
	 opacity: 0.6;
	 height: 9px;
	 width: 9px;
	 animation-delay: -0.4s;
	 transform: translate3d(11vw, 34vh, 43px);
	 background: #d926bb;
}
 @keyframes particle-animation-3 {
	 100% {
		 transform: translate3d(82vw, 4vh, 48px);
	}
}
 .particle:nth-child(3) {
	 animation: particle-animation-3 60s infinite;
	 opacity: 0.93;
	 height: 8px;
	 width: 8px;
	 animation-delay: -0.6s;
	 transform: translate3d(85vw, 74vh, 72px);
	 background: #d9ac26;
}
 @keyframes particle-animation-4 {
	 100% {
		 transform: translate3d(7vw, 67vh, 70px);
	}
}
 .particle:nth-child(4) {
	 animation: particle-animation-4 60s infinite;
	 opacity: 0.72;
	 height: 8px;
	 width: 8px;
	 animation-delay: -0.8s;
	 transform: translate3d(64vw, 65vh, 29px);
	 background: #d93226;
}
 @keyframes particle-animation-5 {
	 100% {
		 transform: translate3d(33vw, 87vh, 70px);
	}
}
 .particle:nth-child(5) {
	 animation: particle-animation-5 60s infinite;
	 opacity: 0.62;
	 height: 10px;
	 width: 10px;
	 animation-delay: -1s;
	 transform: translate3d(89vw, 90vh, 95px);
	 background: #262fd9;
}
 @keyframes particle-animation-6 {
	 100% {
		 transform: translate3d(8vw, 82vh, 49px);
	}
}
 .particle:nth-child(6) {
	 animation: particle-animation-6 60s infinite;
	 opacity: 0.03;
	 height: 9px;
	 width: 9px;
	 animation-delay: -1.2s;
	 transform: translate3d(24vw, 22vh, 80px);
	 background: #266bd9;
}
 @keyframes particle-animation-7 {
	 100% {
		 transform: translate3d(47vw, 77vh, 53px);
	}
}
 .particle:nth-child(7) {
	 animation: particle-animation-7 60s infinite;
	 opacity: 0.27;
	 height: 6px;
	 width: 6px;
	 animation-delay: -1.4s;
	 transform: translate3d(72vw, 34vh, 73px);
	 background: #91d926;
}
 @keyframes particle-animation-8 {
	 100% {
		 transform: translate3d(12vw, 75vh, 29px);
	}
}
 .particle:nth-child(8) {
	 animation: particle-animation-8 60s infinite;
	 opacity: 0.79;
	 height: 10px;
	 width: 10px;
	 animation-delay: -1.6s;
	 transform: translate3d(80vw, 68vh, 45px);
	 background: #b826d9;
}
 @keyframes particle-animation-9 {
	 100% {
		 transform: translate3d(44vw, 40vh, 46px);
	}
}
 .particle:nth-child(9) {
	 animation: particle-animation-9 60s infinite;
	 opacity: 0.48;
	 height: 9px;
	 width: 9px;
	 animation-delay: -1.8s;
	 transform: translate3d(84vw, 80vh, 11px);
	 background: #9126d9;
}
 @keyframes particle-animation-10 {
	 100% {
		 transform: translate3d(41vw, 75vh, 68px);
	}
}
 .particle:nth-child(10) {
	 animation: particle-animation-10 60s infinite;
	 opacity: 0.9;
	 height: 10px;
	 width: 10px;
	 animation-delay: -2s;
	 transform: translate3d(19vw, 6vh, 98px);
	 background: #26d947;
}
 @keyframes particle-animation-11 {
	 100% {
		 transform: translate3d(47vw, 89vh, 57px);
	}
}
 .particle:nth-child(11) {
	 animation: particle-animation-11 60s infinite;
	 opacity: 0.65;
	 height: 8px;
	 width: 8px;
	 animation-delay: -2.2s;
	 transform: translate3d(23vw, 16vh, 38px);
	 background: #26c1d9;
}
 @keyframes particle-animation-12 {
	 100% {
		 transform: translate3d(1vw, 8vh, 30px);
	}
}
 .particle:nth-child(12) {
	 animation: particle-animation-12 60s infinite;
	 opacity: 0.34;
	 height: 9px;
	 width: 9px;
	 animation-delay: -2.4s;
	 transform: translate3d(60vw, 56vh, 15px);
	 background: #77d926;
}
 @keyframes particle-animation-13 {
	 100% {
		 transform: translate3d(47vw, 16vh, 22px);
	}
}
 .particle:nth-child(13) {
	 animation: particle-animation-13 60s infinite;
	 opacity: 0.42;
	 height: 8px;
	 width: 8px;
	 animation-delay: -2.6s;
	 transform: translate3d(7vw, 87vh, 51px);
	 background: #6b26d9;
}
 @keyframes particle-animation-14 {
	 100% {
		 transform: translate3d(64vw, 32vh, 93px);
	}
}
 .particle:nth-child(14) {
	 animation: particle-animation-14 60s infinite;
	 opacity: 0.96;
	 height: 10px;
	 width: 10px;
	 animation-delay: -2.8s;
	 transform: translate3d(13vw, 34vh, 83px);
	 background: #9726d9;
}
 @keyframes particle-animation-15 {
	 100% {
		 transform: translate3d(50vw, 40vh, 70px);
	}
}
 .particle:nth-child(15) {
	 animation: particle-animation-15 60s infinite;
	 opacity: 0.7;
	 height: 7px;
	 width: 7px;
	 animation-delay: -3s;
	 transform: translate3d(8vw, 58vh, 8px);
	 background: #2626d9;
}
 @keyframes particle-animation-16 {
	 100% {
		 transform: translate3d(15vw, 1vh, 23px);
	}
}
 .particle:nth-child(16) {
	 animation: particle-animation-16 60s infinite;
	 opacity: 0.44;
	 height: 7px;
	 width: 7px;
	 animation-delay: -3.2s;
	 transform: translate3d(67vw, 55vh, 18px);
	 background: #d94d26;
}
 @keyframes particle-animation-17 {
	 100% {
		 transform: translate3d(67vw, 31vh, 9px);
	}
}
 .particle:nth-child(17) {
	 animation: particle-animation-17 60s infinite;
	 opacity: 0.62;
	 height: 6px;
	 width: 6px;
	 animation-delay: -3.4s;
	 transform: translate3d(74vw, 55vh, 74px);
	 background: #d92677;
}
 @keyframes particle-animation-18 {
	 100% {
		 transform: translate3d(48vw, 88vh, 25px);
	}
}
 .particle:nth-child(18) {
	 animation: particle-animation-18 60s infinite;
	 opacity: 0.69;
	 height: 8px;
	 width: 8px;
	 animation-delay: -3.6s;
	 transform: translate3d(15vw, 26vh, 63px);
	 background: #56d926;
}
 @keyframes particle-animation-19 {
	 100% {
		 transform: translate3d(54vw, 80vh, 26px);
	}
}
 .particle:nth-child(19) {
	 animation: particle-animation-19 60s infinite;
	 opacity: 0.69;
	 height: 9px;
	 width: 9px;
	 animation-delay: -3.8s;
	 transform: translate3d(66vw, 72vh, 60px);
	 background: #8bd926;
}
 @keyframes particle-animation-20 {
	 100% {
		 transform: translate3d(45vw, 81vh, 67px);
	}
}
 .particle:nth-child(20) {
	 animation: particle-animation-20 60s infinite;
	 opacity: 0.96;
	 height: 6px;
	 width: 6px;
	 animation-delay: -4s;
	 transform: translate3d(52vw, 51vh, 38px);
	 background: #59d926;
}
 @keyframes particle-animation-21 {
	 100% {
		 transform: translate3d(3vw, 3vh, 32px);
	}
}
 .particle:nth-child(21) {
	 animation: particle-animation-21 60s infinite;
	 opacity: 0.22;
	 height: 10px;
	 width: 10px;
	 animation-delay: -4.2s;
	 transform: translate3d(1vw, 7vh, 67px);
	 background: #26afd9;
}
 @keyframes particle-animation-22 {
	 100% {
		 transform: translate3d(58vw, 44vh, 65px);
	}
}
 .particle:nth-child(22) {
	 animation: particle-animation-22 60s infinite;
	 opacity: 0.72;
	 height: 10px;
	 width: 10px;
	 animation-delay: -4.4s;
	 transform: translate3d(69vw, 34vh, 77px);
	 background: #26d985;
}
 @keyframes particle-animation-23 {
	 100% {
		 transform: translate3d(85vw, 15vh, 95px);
	}
}
 .particle:nth-child(23) {
	 animation: particle-animation-23 60s infinite;
	 opacity: 0.13;
	 height: 6px;
	 width: 6px;
	 animation-delay: -4.6s;
	 transform: translate3d(51vw, 3vh, 24px);
	 background: #d95c26;
}
 @keyframes particle-animation-24 {
	 100% {
		 transform: translate3d(3vw, 10vh, 58px);
	}
}
 .particle:nth-child(24) {
	 animation: particle-animation-24 60s infinite;
	 opacity: 0.93;
	 height: 10px;
	 width: 10px;
	 animation-delay: -4.8s;
	 transform: translate3d(86vw, 13vh, 30px);
	 background: #9126d9;
}
 @keyframes particle-animation-25 {
	 100% {
		 transform: translate3d(19vw, 81vh, 67px);
	}
}
 .particle:nth-child(25) {
	 animation: particle-animation-25 60s infinite;
	 opacity: 0.33;
	 height: 8px;
	 width: 8px;
	 animation-delay: -5s;
	 transform: translate3d(19vw, 17vh, 20px);
	 background: #7d26d9;
}
 @keyframes particle-animation-26 {
	 100% {
		 transform: translate3d(87vw, 72vh, 97px);
	}
}
 .particle:nth-child(26) {
	 animation: particle-animation-26 60s infinite;
	 opacity: 0.03;
	 height: 7px;
	 width: 7px;
	 animation-delay: -5.2s;
	 transform: translate3d(52vw, 72vh, 76px);
	 background: #262cd9;
}
 @keyframes particle-animation-27 {
	 100% {
		 transform: translate3d(3vw, 13vh, 30px);
	}
}
 .particle:nth-child(27) {
	 animation: particle-animation-27 60s infinite;
	 opacity: 0.95;
	 height: 9px;
	 width: 9px;
	 animation-delay: -5.4s;
	 transform: translate3d(74vw, 22vh, 9px);
	 background: #4d26d9;
}
 @keyframes particle-animation-28 {
	 100% {
		 transform: translate3d(38vw, 20vh, 66px);
	}
}
 .particle:nth-child(28) {
	 animation: particle-animation-28 60s infinite;
	 opacity: 0.5;
	 height: 9px;
	 width: 9px;
	 animation-delay: -5.6s;
	 transform: translate3d(59vw, 69vh, 30px);
	 background: #2691d9;
}
 @keyframes particle-animation-29 {
	 100% {
		 transform: translate3d(70vw, 3vh, 92px);
	}
}
 .particle:nth-child(29) {
	 animation: particle-animation-29 60s infinite;
	 opacity: 0.6;
	 height: 8px;
	 width: 8px;
	 animation-delay: -5.8s;
	 transform: translate3d(17vw, 62vh, 99px);
	 background: #26d9a3;
}
 @keyframes particle-animation-30 {
	 100% {
		 transform: translate3d(60vw, 2vh, 74px);
	}
}
 .particle:nth-child(30) {
	 animation: particle-animation-30 60s infinite;
	 opacity: 0.53;
	 height: 10px;
	 width: 10px;
	 animation-delay: -6s;
	 transform: translate3d(50vw, 71vh, 24px);
	 background: #85d926;
}
 
 

.splatterPurple {
    position: absolute;
    width: 10%;
/*    left: 60px;*/
    left: 26%;
/*    bottom: 10px;*/
    bottom: 3%;
    /* top: 84%; */
    z-index: 799;
    transform: rotate(-20deg);
    animation: zoomIn .5s;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both; 
    -webkit-animation-delay: 3s;
    animation-delay: 1s; 
}

@keyframes zoominoutsinglefeatured1 {
    0% {
        transform: scale(0,0);
    }
    50% {
        transform: scale(1.2,1.2);
    }
    100% {
        transform: scale(0,0);
    }
}

@media only screen and (max-width: 768px) {
.splatterPurple {
    left: 22%;
    /* top: 425px; */
    bottom: 4%;
    width: 11%;
    }
}

/*
@media only screen and (max-width: 480px) {
    .splatterPurple {
    left: 34%;
    top: 205px;
    }
}
*/

.splatterBlue {
    position: absolute;
    width: 10%;
    /* top: 75%; */
/*    bottom: 150px;*/
    bottom: 23%;
/*    left: 100px;*/
    left: 37%;
    transform: rotate(20deg);
    z-index: 799;
    animation: zoomIn 1s;
    /*-webkit-animation-name: zoomIn;
    animation-name: zoomIn;*/
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both; 
    -webkit-animation-delay: 5s;
    animation-delay: 3s; 
}

@keyframes zoominoutsinglefeatured3 {
    0% {
        transform: scale(0,0);
    }
    50% {
        transform: scale(1.2,1.2);
    }
    100% {
        transform: scale(0,0);
    }
}

@media only screen and (max-width: 768px) {
.splatterBlue {
    left: 30%;
    /* top: 390px; */
    bottom: 28%;
    width: 11%;
    }
}

/*
@media only screen and (max-width: 480px) {
    .splatterBlue {
    left: 55%;
    top: 175px;
    }
}
*/

.splatterGreen {
    position: absolute;
    width: 10%;
    /* top: 80%; */
    bottom: 15%;
/*    left: 180px;*/
    left: 48%;
    z-index: 799;
    transform: rotate(250deg);
    animation: zoomIn 1.5s;
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both; 
    -webkit-animation-delay: 4s;
    animation-delay: 2s; 
}

@keyframes zoominoutsinglefeatured2 {
    0% {
        transform: scale(0,0);
    }
    50% {
        transform: scale(1.2,1.2);
    }
    100% {
        transform: scale(0,0);
    }
}

@media only screen and (max-width: 768px) {
.splatterGreen {
    left: 42%;
    /* top: 5%; */
    bottom: 21%;
    width: 12%;
    }
}

/*
@media only screen and (max-width: 480px) {
    .splatterGreen {
    left: 46%;
    top: 190px;
    }
}
*/

.splatterOrange {
    position: absolute;
    width: 10%;
    /* top: 83%; */
/*    left: 130px;*/
    left: 40%;
/*    bottom: 40px;*/
    bottom: 5%;
    z-index: 799;
    transform: rotate(-45deg);
    animation: zoomIn 2s;
    /*animation: zoominoutsinglefeatured4 .1s infinite;*/
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both; 
    -webkit-animation-delay: 6s;
    animation-delay: 4s; 
}

@keyframes zoominoutsinglefeatured4 {
    0% {
        transform: scale(0,0);
    }
    50% {
        transform: scale(1.2,1.2);
    }
    100% {
        transform: scale(0,0);
    }
}

@media only screen and (max-width: 768px) {
.splatterOrange {
    left: 35%;
    /* top: 405px; */
    bottom: 8%;
    width: 12%;
    }
}

/*
@media only screen and (max-width: 480px) {
    .splatterOrange {
    left: 36%;
    top: 185px;
    }
}
*/

.splatterYellow {
    position: absolute;
    width: 12%;
    /* top: 77%; */
/*    bottom: 90px;*/
    bottom: 14%;
/*    left: 50px;*/
    left: 28%;
    transform: rotate(250deg);
    z-index: 799;
    animation: zoomIn 2s;
    /*animation: zoominoutsinglefeatured4 .1s infinite;*/
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both; 
    -webkit-animation-delay: 6s;
    animation-delay: 5s; 
}

@keyframes zoominoutsinglefeatured4 {
    0% {
        transform: scale(0,0);
    }
    50% {
        transform: scale(1,1);
    }
    100% {
        transform: scale(0,0);
    }
}

@media only screen and (max-width: 768px) {
.splatterYellow {
    left: 23%;
    /* top: 385px; */
    bottom: 19%;
    width: 12%;
    }
}

/*
@media only screen and (max-width: 480px) {
    .splatterYellow {
    left: 46%;
    top: 168px;
    }
}
*/


.paintbrush {
  position: absolute;
  width: 7%;
  top: 50%;
  left: 30%;
  z-index: 799;
  animation: zoominoutsinglefeatured5 .1s infinite;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; 
  -webkit-animation-delay: 1s;
  animation-delay: 1s; 
}

@keyframes zoominoutsinglefeatured5 {
    0% {
        transform: scale(0,0);
    }
    50% {
        transform: scale(1.2,1.2);
    }
    100% {
        transform: scale(0,0);
    }
}



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

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

@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

@-webkit-keyframes zoomOut {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomOut {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
          animation-name: zoomIn;
}

.zoomOut {
  -webkit-animation-name: zoomOut;
          animation-name: zoomOut;
}




/* FADE ANIAMTION */


/*in-down*/
@-webkit-keyframes fadeInDown {
    from {
        opacity:0;
        -webkit-transform: translatey(-10px);
        -moz-transform: translatey(-10px);
        -o-transform: translatey(-10px);
        transform: translatey(-10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
@-moz-keyframes fadeInDown {
    from {
        opacity:0;
        -webkit-transform: translatey(-10px);
        -moz-transform: translatey(-10px);
        -o-transform: translatey(-10px);
        transform: translatey(-10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
@keyframes fadeInDown {
    from {
        opacity:0;
        -webkit-transform: translatey(-10px);
        -moz-transform: translatey(-10px);
        -o-transform: translatey(-10px);
        transform: translatey(-10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
.in-down {
    -webkit-animation-name: fadeInDown;
    -moz-animation-name: fadeInDown;
    -o-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 1.5s;
    -moz-animation-duration: 1.5s;
    -o-animation-duration: 1.5s;
    animation-duration: 1.5s;
    
}

/*in-down2*/
@-webkit-keyframes fadeInDown {
    from {
        opacity:0;
        -webkit-transform: translatey(-10px);
        -moz-transform: translatey(-10px);
        -o-transform: translatey(-10px);
        transform: translatey(-10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
@-moz-keyframes fadeInDown {
    from {
        opacity:0;
        -webkit-transform: translatey(-10px);
        -moz-transform: translatey(-10px);
        -o-transform: translatey(-10px);
        transform: translatey(-10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
@keyframes fadeInDown {
    from {
        opacity:0;
        -webkit-transform: translatey(-10px);
        -moz-transform: translatey(-10px);
        -o-transform: translatey(-10px);
        transform: translatey(-10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
.in-down2 {
    -webkit-animation-name: fadeInDown;
    -moz-animation-name: fadeInDown;
    -o-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 1.7s;
    -moz-animation-duration: 1.7s;
    -o-animation-duration: 1.7s;
    animation-duration: 1.7s;
}

/*in-down3*/
@-webkit-keyframes fadeInDown {
    from {
        opacity:0;
        -webkit-transform: translatey(-10px);
        -moz-transform: translatey(-10px);
        -o-transform: translatey(-10px);
        transform: translatey(-10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
@-moz-keyframes fadeInDown {
    from {
        opacity:0;
        -webkit-transform: translatey(-10px);
        -moz-transform: translatey(-10px);
        -o-transform: translatey(-10px);
        transform: translatey(-10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
@keyframes fadeInDown {
    from {
        opacity:0;
        -webkit-transform: translatey(-10px);
        -moz-transform: translatey(-10px);
        -o-transform: translatey(-10px);
        transform: translatey(-10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
.in-down3 {
    -webkit-animation-name: fadeInDown;
    -moz-animation-name: fadeInDown;
    -o-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 1.9s;
    -moz-animation-duration: 1.9s;
    -o-animation-duration: 1.9s;
    animation-duration: 1.9s;
}

/*in-down4*/
@-webkit-keyframes fadeInDown {
    from {
        opacity:0;
        -webkit-transform: translatey(-10px);
        -moz-transform: translatey(-10px);
        -o-transform: translatey(-10px);
        transform: translatey(-10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
@-moz-keyframes fadeInDown {
    from {
        opacity:0;
        -webkit-transform: translatey(-10px);
        -moz-transform: translatey(-10px);
        -o-transform: translatey(-10px);
        transform: translatey(-10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
@keyframes fadeInDown {
    from {
        opacity:0;
        -webkit-transform: translatey(-10px);
        -moz-transform: translatey(-10px);
        -o-transform: translatey(-10px);
        transform: translatey(-10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
.in-down4 {
    -webkit-animation-name: fadeInDown;
    -moz-animation-name: fadeInDown;
    -o-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 2.1s;
    -moz-animation-duration: 2.1s;
    -o-animation-duration: 2.1s;
    animation-duration: 2.1s;
}

/*in-down5*/
@-webkit-keyframes fadeInDown {
    from {
        opacity:0;
        -webkit-transform: translatey(-10px);
        -moz-transform: translatey(-10px);
        -o-transform: translatey(-10px);
        transform: translatey(-10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
@-moz-keyframes fadeInDown {
    from {
        opacity:0;
        -webkit-transform: translatey(-10px);
        -moz-transform: translatey(-10px);
        -o-transform: translatey(-10px);
        transform: translatey(-10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
@keyframes fadeInDown {
    from {
        opacity:0;
        -webkit-transform: translatey(-10px);
        -moz-transform: translatey(-10px);
        -o-transform: translatey(-10px);
        transform: translatey(-10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
.in-down5 {
    -webkit-animation-name: fadeInDown;
    -moz-animation-name: fadeInDown;
    -o-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 2.3s;
    -moz-animation-duration: 2.3s;
    -o-animation-duration: 2.3s;
    animation-duration: 2.3s;
}

/*in-down6*/
@-webkit-keyframes fadeInDown {
    from {
        opacity:0;
        -webkit-transform: translatey(-10px);
        -moz-transform: translatey(-10px);
        -o-transform: translatey(-10px);
        transform: translatey(-10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
@-moz-keyframes fadeInDown {
    from {
        opacity:0;
        -webkit-transform: translatey(-10px);
        -moz-transform: translatey(-10px);
        -o-transform: translatey(-10px);
        transform: translatey(-10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
@keyframes fadeInDown {
    from {
        opacity:0;
        -webkit-transform: translatey(-10px);
        -moz-transform: translatey(-10px);
        -o-transform: translatey(-10px);
        transform: translatey(-10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
.in-down6 {
    -webkit-animation-name: fadeInDown;
    -moz-animation-name: fadeInDown;
    -o-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 2.5s;
    -moz-animation-duration: 2.5s;
    -o-animation-duration: 2.5s;
    animation-duration: 2.5s;
}





/*in-up*/
@-webkit-keyframes fadeInUp {
    from {
        opacity:0;
        -webkit-transform: translatey(+10px);
        -moz-transform: translatey(+10px);
        -o-transform: translatey(+10px);
        transform: translatey(+10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
@-moz-keyframes fadeInUp {
    from {
        opacity:0;
        -webkit-transform: translatey(+10px);
        -moz-transform: translatey(+10px);
        -o-transform: translatey(+10px);
        transform: translatey(+10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
@keyframes fadeInUp {
    from {
        opacity:0;
        -webkit-transform: translatey(+10px);
        -moz-transform: translatey(+10px);
        -o-transform: translatey(+10px);
        transform: translatey(+10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
.in-up {
    -webkit-animation-name: fadeInUp;
    -moz-animation-name: fadeInUp;
    -o-animation-name: fadeInUp;
    animation-name: fadeInUp;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 1.5s;
    -moz-animation-duration: 1.5s;
    -o-animation-duration: 1.5s;
    animation-duration: 1.5s;
}

/*in-up2*/
@-webkit-keyframes fadeInUp {
    from {
        opacity:0;
        -webkit-transform: translatey(+10px);
        -moz-transform: translatey(+10px);
        -o-transform: translatey(+10px);
        transform: translatey(+10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
@-moz-keyframes fadeInUp {
    from {
        opacity:0;
        -webkit-transform: translatey(+10px);
        -moz-transform: translatey(+10px);
        -o-transform: translatey(+10px);
        transform: translatey(+10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
@keyframes fadeInUp {
    from {
        opacity:0;
        -webkit-transform: translatey(+10px);
        -moz-transform: translatey(+10px);
        -o-transform: translatey(+10px);
        transform: translatey(+10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
.in-up2 {
    -webkit-animation-name: fadeInUp;
    -moz-animation-name: fadeInUp;
    -o-animation-name: fadeInUp;
    animation-name: fadeInUp;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 1.7s;
    -moz-animation-duration: 1.7s;
    -o-animation-duration: 1.7s;
    animation-duration: 1.7s;
}

/*in-up3*/
@-webkit-keyframes fadeInUp {
    from {
        opacity:0;
        -webkit-transform: translatey(+10px);
        -moz-transform: translatey(+10px);
        -o-transform: translatey(+10px);
        transform: translatey(+10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
@-moz-keyframes fadeInUp {
    from {
        opacity:0;
        -webkit-transform: translatey(+10px);
        -moz-transform: translatey(+10px);
        -o-transform: translatey(+10px);
        transform: translatey(+10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
@keyframes fadeInUp {
    from {
        opacity:0;
        -webkit-transform: translatey(+10px);
        -moz-transform: translatey(+10px);
        -o-transform: translatey(+10px);
        transform: translatey(+10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
.in-up3 {
    -webkit-animation-name: fadeInUp;
    -moz-animation-name: fadeInUp;
    -o-animation-name: fadeInUp;
    animation-name: fadeInUp;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 1.9s;
    -moz-animation-duration: 1.9s;
    -o-animation-duration: 1.9s;
    animation-duration: 1.9s;
}

/*in-up4*/
@-webkit-keyframes fadeInUp {
    from {
        opacity:0;
        -webkit-transform: translatey(+10px);
        -moz-transform: translatey(+10px);
        -o-transform: translatey(+10px);
        transform: translatey(+10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
@-moz-keyframes fadeInUp {
    from {
        opacity:0;
        -webkit-transform: translatey(+10px);
        -moz-transform: translatey(+10px);
        -o-transform: translatey(+10px);
        transform: translatey(+10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
@keyframes fadeInUp {
    from {
        opacity:0;
        -webkit-transform: translatey(+10px);
        -moz-transform: translatey(+10px);
        -o-transform: translatey(+10px);
        transform: translatey(+10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
.in-up4 {
    -webkit-animation-name: fadeInUp;
    -moz-animation-name: fadeInUp;
    -o-animation-name: fadeInUp;
    animation-name: fadeInUp;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 2.1s;
    -moz-animation-duration: 2.1s;
    -o-animation-duration: 2.1s;
    animation-duration: 2.1s;
}

/*in-up5*/
@-webkit-keyframes fadeInUp {
    from {
        opacity:0;
        -webkit-transform: translatey(+10px);
        -moz-transform: translatey(+10px);
        -o-transform: translatey(+10px);
        transform: translatey(+10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
@-moz-keyframes fadeInUp {
    from {
        opacity:0;
        -webkit-transform: translatey(+10px);
        -moz-transform: translatey(+10px);
        -o-transform: translatey(+10px);
        transform: translatey(+10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
@keyframes fadeInUp {
    from {
        opacity:0;
        -webkit-transform: translatey(+10px);
        -moz-transform: translatey(+10px);
        -o-transform: translatey(+10px);
        transform: translatey(+10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
.in-up5 {
    -webkit-animation-name: fadeInUp;
    -moz-animation-name: fadeInUp;
    -o-animation-name: fadeInUp;
    animation-name: fadeInUp;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 2.3s;
    -moz-animation-duration: 2.3s;
    -o-animation-duration: 2.3s;
    animation-duration: 2.3s;
}

/*in-up6*/
@-webkit-keyframes fadeInUp {
    from {
        opacity:0;
        -webkit-transform: translatey(+10px);
        -moz-transform: translatey(+10px);
        -o-transform: translatey(+10px);
        transform: translatey(+10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
@-moz-keyframes fadeInUp {
    from {
        opacity:0;
        -webkit-transform: translatey(+10px);
        -moz-transform: translatey(+10px);
        -o-transform: translatey(+10px);
        transform: translatey(+10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
@keyframes fadeInUp {
    from {
        opacity:0;
        -webkit-transform: translatey(+10px);
        -moz-transform: translatey(+10px);
        -o-transform: translatey(+10px);
        transform: translatey(+10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}

.in-up6 {
    -webkit-animation-name: fadeInUp;
    -moz-animation-name: fadeInUp;
    -o-animation-name: fadeInUp;
    animation-name: fadeInUp;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 2.5s;
    -moz-animation-duration: 2.5s;
    -o-animation-duration: 2.5s;
    animation-duration: 2.5s;
}





/** fadeInLeft **/

@-webkit-keyframes fadeInLeft {
    from {
        opacity:0;
        -webkit-transform: translatex(-10px);
        -moz-transform: translatex(-10px);
        -o-transform: translatex(-10px);
        transform: translatex(-10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
}
@-moz-keyframes fadeInLeft {
    from {
        opacity:0;
        -webkit-transform: translatex(-10px);
        -moz-transform: translatex(-10px);
        -o-transform: translatex(-10px);
        transform: translatex(-10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
}
@keyframes fadeInLeft {
    from {
        opacity:0;
        -webkit-transform: translatex(-100px);
        -moz-transform: translatex(-100px);
        -o-transform: translatex(-100px);
        transform: translatex(-100px);
    }
    to {
        opacity:1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
}
.in-left {
    -webkit-animation-name: fadeInLeft;
    -moz-animation-name: fadeInLeft;
    -o-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: .75s;
    -moz-animation-duration: .75s;
    -o-animation-duration: .75s;
    animation-duration: .75s;
    -webkit-animation-delay: .75s;
    -moz-animation-delay: .75s;
    -o-animation-duration:.75s;
    animation-delay: .75s;
}


/** fadeInRight **/

@-webkit-keyframes fadeInRight {
    from {
        opacity:0;
        -webkit-transform: translatex(+10px);
        -moz-transform: translatex(+10px);
        -o-transform: translatex(+10px);
        transform: translatex(+10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
}
@-moz-keyframes fadeInRight {
    from {
        opacity:0;
        -webkit-transform: translatex(+10px);
        -moz-transform: translatex(+10px);
        -o-transform: translatex(+10px);
        transform: translatex(+10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
}
@keyframes fadeInRight {
    from {
        opacity:0;
        -webkit-transform: translatex(+100px);
        -moz-transform: translatex(+100px);
        -o-transform: translatex(+100px);
        transform: translatex(+100px);
    }
    to {
        opacity:1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
}
.in-right {
    -webkit-animation-name: fadeInRight;
    -moz-animation-name: fadeInRight;
    -o-animation-name: fadeInRight;
    animation-name: fadeInRight;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: .75s;
    -moz-animation-duration: .75s;
    -o-animation-duration: .75s;
    animation-duration: .75s;
    -webkit-animation-delay: .75s;
    -moz-animation-delay: .75s;
    -o-animation-duration:.75s;
    animation-delay: .75s;
}