/*///////////////////////*/
/*/////////Roadmap/////////*/
/*///////////////////////*/ 
 


/* TIMELINE
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.timeline{
  background: white;
  color: white;
  padding: 30px 0;
}

 .timeline ul li{
  background: rgb(195, 214, 255);
}

.timeline ul li {
  list-style-type: none;
  position: relative;
  width: 6px;
  margin: 0 auto;
  padding-top: 10px;
  background: 89afff !important;
}

.timeline ul li::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: inherit;
}

/*Main content boxes*/ 
.timeline ul li div {
  position: relative;
  bottom: 0;
  width: 300px !important;
  padding: 15px;
  word-wrap: break-word !important;
  background: rgb(128, 82, 255);
}

/*Boxes around the triangle to the main content box*/
.timeline ul li div::before {
  content: '';
  position: absolute;
  bottom: 7px;
  width: 0;
  height: 0;
  border-style: solid;
  
}

/*Distance from line to right content box*/
.timeline ul li:nth-child(odd) div {
  left: 45px;
}

/*Css and distance for right triangle*/
.timeline ul li:nth-child(odd) div::before {
  left: -15px;
  border-width: 8px 16px 8px 0;
  border-color: transparent rgb(128, 82, 255) transparent transparent;
}

/*Distance for left content main box*/
.timeline ul li:nth-child(even) div {
  left: -340px;
}

/*Box for left triangle box*/
.timeline ul li:nth-child(even) div::before {
  right: -15px;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent rgb(128, 82, 255);
}

/*Css for phase text inside the box*/
phase {
  display: block;
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 8px;
}


/* EFFECTS
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.timeline ul li::after {
  transition: background .5s ease-in-out;
}

.timeline ul li.in-view::after {
  background: rgb(97, 146, 251);
}

.timeline ul li div {
  visibility: hidden;
  opacity: 0;
  transition: all .5s ease-in-out;
}

.timeline ul li:nth-child(odd) div {
  transform: translate3d(200px, 0, 0);
}

.timeline ul li:nth-child(even) div {
  transform: translate3d(-200px, 0, 0);
}

.timeline ul li.in-view div {
  transform: none;
  visibility: visible;
  opacity: 1;
}


/* GENERAL MEDIA QUERIES / activates responsive effects when screen is zoomed or on mobile device
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media screen and (max-width: 900px) {
  .timeline ul li div {
    width: 250px;
  }
  .timeline ul li:nth-child(even) div {
    left: -289px;
    /*250+45-6*/
  }
}

@media screen and (max-width: 600px) {
  .timeline ul li {
    margin-left: 20px;
  }
  .timeline ul li div {
    width: calc(100vw - 91px);
  }
  .timeline ul li:nth-child(even) div {
    left: 45px;
  }
  .timeline ul li:nth-child(even) div::before {
    left: -15px;
    border-width: 8px 16px 8px 0;
    border-color: transparent rgb(128, 82, 255) transparent transparent;
  }
}



.blurry-text {
   text-shadow: 0 0 10px white;
   color: transparent;
}








html,
body,
header,
#intro {
    height: 100%;
}

#intro {
    background: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full%20page/img%20%283%29.jpg")no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}


.logoBanner{

  
   margin:0 auto;
   margin-top: 270px; 
  z-index:9999;
}

.bannerCenterText{
    position: absolute;
     top: 35%;
     left: 37%;
      font-family: 'Comfortaa', cursive;
     color: #fff;
     font-size: 13pt;
 
     /* vendor prefixes omitted due to brevity */
   z-index:9999;
   overflow:hidden;
 
 }
 h1, h2, h3, h4{
  font-family: 'Comfortaa', cursive !important;
 }



/*///////////////////////*/
/*/////////WAVES/////////*/
/*///////////////////////*/ 


 @keyframes move_wave {
     0% {
         transform: translateX(0) translateZ(0) scaleY(1)
     }
     50% {
         transform: translateX(-25%) translateZ(0) scaleY(0.55)
     }
     100% {
         transform: translateX(-50%) translateZ(0) scaleY(1)
     }
 }
 .waveWrapper {


     overflow: hidden;
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     top: 0;
     margin: auto;
 }
 .waveWrapperInner {
     position: absolute;
     width: 100%;
     overflow: hidden;
     height: 100%;
     bottom: -1px;
     background-image: linear-gradient(to top, #86377b 20%, #27273c 80%);
 }
 .bgTop {
     z-index: 15;
     opacity: 0.5;
 }
 .bgMiddle {
     z-index: 10;
     opacity: 0.75;
 }
 .bgBottom {
     z-index: 5;
 }
 .wave {
     position: absolute;
     left: 0;
     width: 200%;
     height: 100%;
     background-repeat: repeat no-repeat;
     background-position: 0 bottom;
     transform-origin: center bottom;
 }
 .waveTop {
     background-size: 50% 100px;
 }
 .waveAnimation .waveTop {
   animation: move-wave 12s;
    -webkit-animation: move-wave 12s;
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
 }
 .waveMiddle {
     background-size: 50% 120px;
 }
 .waveAnimation .waveMiddle {
     animation: move_wave 40s linear infinite;
 }
 .waveBottom {
     background-size: 50% 100px;
 }
 .waveAnimation .waveBottom {
     animation: move_wave 60s linear infinite;
 }

 @media screen and (max-width: 900px) {
  .wave .waveAnimation .waveTop  .waveMiddle {
-o-transition-property: none !important;
-moz-transition-property: none !important;
-ms-transition-property: none !important;
-webkit-transition-property: none !important;
transition-property: none !important;
/*CSS transforms*/
-o-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-webkit-transform: none !important;
transform: none !important;
/*CSS animations*/
-webkit-animation: none !important;
-moz-animation: none !important;
-o-animation: none !important;
-ms-animation: none !important;
animation: none !important;
display:hidden !important;
opacity: 0.0 !important;
  }
 
  .waveAnimation .waveTop {
    -o-transition-property: none !important;
    -moz-transition-property: none !important;
    -ms-transition-property: none !important;
    -webkit-transition-property: none !important;
    transition-property: none !important;
    /*CSS transforms*/
    -o-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -webkit-transform: none !important;
    transform: none !important;
    /*CSS animations*/
    -webkit-animation: none !important;
    -moz-animation: none !important;
    -o-animation: none !important;
    -ms-animation: none !important;
    animation: none !important;
    display:hidden !important;
    opacity: 0.0 !important;
  }
 
  .waveAnimation .waveMiddle {
    -o-transition-property: none !important;
    -moz-transition-property: none !important;
    -ms-transition-property: none !important;
    -webkit-transition-property: none !important;
    transition-property: none !important;
    /*CSS transforms*/
    -o-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -webkit-transform: none !important;
    transform: none !important;
    /*CSS animations*/
    -webkit-animation: none !important;
    -moz-animation: none !important;
    -o-animation: none !important;
    -ms-animation: none !important;
    animation: none !important;
    display:hidden !important;
    opacity: 0.0 !important;
  }
 
  .waveAnimation .waveBottom {
    -o-transition-property: none !important;
    -moz-transition-property: none !important;
    -ms-transition-property: none !important;
    -webkit-transition-property: none !important;
    transition-property: none !important;
    /*CSS transforms*/
    -o-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -webkit-transform: none !important;
    transform: none !important;
    /*CSS animations*/
    -webkit-animation: none !important;
    -moz-animation: none !important;
    -o-animation: none !important;
    -ms-animation: none !important;
    animation: none !important;
    display:hidden !important;
    opacity: 0.0 !important;
  }
}

 .top-nav-collapse {

  -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);

  background-color: #352945; 


background: linear-gradient(-45deg, rgb(161, 97, 190), rgb(128, 82, 255), #23A6D5, rgb(128, 82, 255));
background-size: 400% 400%;
-webkit-animation: Gradient 25s ease-in-out;
-moz-animation: Gradient 25s ease-in-out;
animation: Gradient 25s ease-in-out;

transition: all 2.0s ease;
}

.colorAnimate{

background: linear-gradient(-45deg, rgb(161, 97, 190), rgb(128, 82, 255), #23A6D5, rgb(128, 82, 255));
background-size: 400% 400%;
-webkit-animation: Gradient 25s ease-in-out;
-moz-animation: Gradient 25s ease-in-out;
animation: Gradient 25s ease-in-out;

transition: all 2.0s ease;
}














/*///////////////////////*/
/*/////////Gradient background/////////*/
/*///////////////////////*/ 




@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

.waveWrapperInner {
	-webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);
	background: linear-gradient(-45deg, rgb(161, 97, 190), rgb(128, 82, 255), #23A6D5, #23D5AB);
	background-size: 400% 400%;
	-webkit-animation: Gradient 80s ease infinite;
	-moz-animation: Gradient 80s ease infinite;
	animation: Gradient 80s ease infinite;
}

/* #ideaOld{
	font-weight: 300;
	text-align: center;
	position: absolute;
	top: 45%;
	right: 0;
	left: 0;
}
#idea{
  background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
	background-size: 400% 400%;
	-webkit-animation: Gradient 60s ease infinite;
	-moz-animation: Gradient 60s ease infinite;
	animation: Gradient 60s ease infinite;
  height: 100px;
  text-align: center;
   
}*/
 
 











/*///////////////////////*/
/*/////////Team section/////////*/
/*///////////////////////*/ 


.at-section__title {
  margin: 0 0 70px;
  color: #000;
  font-family: 'Roboto', sans-serif;
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 2.625rem;
  text-align: center;
}
.at-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  background: #FFF;
  border: 0px;
}
.at-grid[data-column="1"] .at-column {
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
}
.at-grid[data-column="2"] .at-column {
  width: 50%;
  max-width: 50%;
  min-width: 50%;
  -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
}
.at-grid[data-column="3"] .at-column {
  width: 33.3333333333%;
  max-width: 33.3333333333%;
  min-width: 33.3333333333%;
  -ms-flex-preferred-size: 33.3333333333%;
      flex-basis: 33.3333333333%;
}
.at-grid[data-column="4"] .at-column {
  width: 25%;
  max-width: 25%;
  min-width: 25%;
  -ms-flex-preferred-size: 25%;
      flex-basis: 25%;
}
.at-grid[data-column="5"] .at-column {
  width: 20%;
  max-width: 20%;
  min-width: 20%;
  -ms-flex-preferred-size: 20%;
      flex-basis: 20%;
}
.at-grid[data-column="6"] .at-column {
  width: 16.6666666667%;
  max-width: 16.6666666667%;
  min-width: 16.6666666667%;
  -ms-flex-preferred-size: 16.6666666667%;
      flex-basis: 16.6666666667%;
}
.at-grid[data-column="7"] .at-column {
  width: 14.2857142857%;
  max-width: 14.2857142857%;
  min-width: 14.2857142857%;
  -ms-flex-preferred-size: 14.2857142857%;
      flex-basis: 14.2857142857%;
}
.at-grid[data-column="8"] .at-column {
  width: 12.5%;
  max-width: 12.5%;
  min-width: 12.5%;
  -ms-flex-preferred-size: 12.5%;
      flex-basis: 12.5%;
}
.at-grid[data-column="9"] .at-column {
  width: 11.1111111111%;
  max-width: 11.1111111111%;
  min-width: 11.1111111111%;
  -ms-flex-preferred-size: 11.1111111111%;
      flex-basis: 11.1111111111%;
}
.at-column {
  z-index: 0;
  position: relative;
  background: #FFF;
  -webkit-box-shadow: 0 0 0 0px #E2E9ED;
          box-shadow: 0 0 0 0px #E2E9ED;
  padding: 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: z-index 0s 0.2s ease, -webkit-box-shadow 0.2s ease, -webkit-transform 0.2s ease;
  transition: z-index 0s 0.2s ease, -webkit-box-shadow 0.2s ease, -webkit-transform 0.2s ease;
  transition: box-shadow 0.2s ease, transform 0.2s ease, z-index 0s 0.2s ease;
  transition: box-shadow 0.2s ease, transform 0.2s ease, z-index 0s 0.2s ease, -webkit-box-shadow 0.2s ease, -webkit-transform 0.2s ease;
}
.at-column:before {
  content: "";
  display: block;
  padding-top: 100%;
}
.at-column:hover {
  z-index: 1;
  -webkit-box-shadow: 0 8px 50px rgba(0, 0, 0, 0.2);
          box-shadow: 0 8px 50px rgba(0, 0, 0, 0.2);
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
  -webkit-transition: z-index 0s 0s ease, -webkit-box-shadow 0.2s ease, -webkit-transform 0.2s ease;
  transition: z-index 0s 0s ease, -webkit-box-shadow 0.2s ease, -webkit-transform 0.2s ease;
  transition: box-shadow 0.2s ease, transform 0.2s ease, z-index 0s 0s ease;
  transition: box-shadow 0.2s ease, transform 0.2s ease, z-index 0s 0s ease, -webkit-box-shadow 0.2s ease, -webkit-transform 0.2s ease;
}
.at-column:hover .at-social {
  margin: 16px 0 0;
  opacity: 1;
}
@media (max-width: 800px) {
  .at-column {
    width: 50% !important;
    max-width: 50% !important;
    min-width: 50% !important;
    -ms-flex-preferred-size: 50% !important;
        flex-basis: 50% !important;
  }
}
@media (max-width: 600px) {
  .at-column {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    -ms-flex-preferred-size: 100% !important;
        flex-basis: 100% !important;
  }
}
.at-user {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  text-align: center;
}
.at-user__avatar {
  width: 98px;
  height: 98px;
  border-radius: 100%;
  margin: 0 auto 20px;
  overflow: hidden;
}
.at-user__avatar img {
  display: block;
  width: 100%;
  max-width: 100%;
}
.at-user__name {
  color: #313435;
  font-family: 'Roboto', sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 2.625rem;
}
.at-user__title {
  color: #6F808A;
  font-family: 'Roboto', sans-serif;
  font-size: 0.875rem;
  line-height: 2.375rem;
}
.at-social {
  margin: 0 0 -18px;
  opacity: 0;
  -webkit-transition: margin 0.2s ease, opacity 0.2s ease;
  transition: margin 0.2s ease, opacity 0.2s ease;
}
.at-social__item {
  display: inline-block;
  margin: 0 10px;
}
.at-social__item a {
  display: block;
}
.at-social__item svg {
  fill: #515F65;
  display: block;
  height: 18px;
  -webkit-transition: fill 0.2s ease;
  transition: fill 0.2s ease;
}
.at-social__item svg:hover {
  fill: #788D96;
}

/* body {
  background: #FFF;
  font-family: 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container {
  max-width: 1170px;
  width: 100%;
  margin: 100px auto;
  padding: 0 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
} */