.parallax {
        /* Full height */
        height: 100%;
        width: auto;

        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        margin-top: -103;
        position: relative;
    }

		img.zoom
		{
			transition: all 0.3s;
		}

		img.zoom:hover 
		{
			transform: scale(1.2);
			transition: all 0.3s;
			box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
		}

	
		a.active 
		{
			background-color: transparent !important;
			transform: scale(1.2);
			transition: all 0.3s;
		}

		.relative 
		{
			position: relative !important;
		}

		nav i 
		{
			font-size: 16px;
			color: #0961bf;

			background-color: transparent !important;
			transition: all 0.8s;
		}

		nav i.active 
		{
			background-color: transparent !important;
			transform: scale(1.2);
			transition: all 0.8s;
		}

		.nav-link.active 
		{
			background-color: transparent !important;
			transform: scale(1.2);
			transition: all 0.8s;
			color: #FFFFFF !important;
		}

		div.no-pointer 
		{
			visibility: visible;
		}

    li u 
    {
      cursor: pointer;
    }

    /* Desktop Config */
		@media (min-width: 1200px) {
			.particles 
			{
				background-color: #000000;
				background-size: cover;
				background-repeat: no-repeat;
				width: 100%;
				height: 189vh;
				position: fixed;
        transform: translate(0%, -89%);
        z-index: 0 !important;
			}

      li 
      {
        max-width: 240px;
      }
		}

    /* Tablet and Mobile Config */
		@media (max-width: 1201px) {
			.particles 
			{
				background-color: #000000;
				background-size: cover;
				background-repeat: no-repeat;
				width: 100%;
				height: 189vh;
				position: fixed;
        transform: translate(0%, -69%);
        z-index: 0 !important;
			}
		}

    /* Mobile Config */
		@media (max-width: 768px) {
			div.carousel-caption div
      {
        /* Placeholder */
        color: white;
      }

      .carousel-inner
      {
        max-height: 36vh !important;
      }
		}

		a.anchor {
      display: block;
      position: relative;
      top: -77px;
      visibility: hidden;
		}

    div.carousel-inner img {
      max-height: 38vmax !important;
      object-fit: contain;
      width: 100%;
    }

    div.carousel-inner video {
      max-height: 70vh !important;
      object-fit: contain;
      width: 100%;
    }

    div.carousel-inner p {
      font-size: calc(8px + 0.6vw);
    }

		.arrow-animation
		{
			animation: angle_down 3s linear infinite;
			font-size: 20px;
			margin-top: 10px;
		}

		.arrowPoint .moveIcon
		{
			transition: all 0.3s ease;
			position: relative;
			transform: translate(0,0);
		}
		.arrowPoint:hover .moveIcon
		{
			transform: translate(0.5em,0);
			-webkit-transform: translate(0.5em,0);
			-moz-transform: translate(0.5em,0);
			-o-transform: translate(0.5em,0);
			-ms-transform: translate(0.5em,0);
		}

		.angle_down 
		{
			animation-duration: 3s;
			animation-timing-function: linear;
			animation-delay: 0s;
			animation-iteration-count: infinite;
			animation-direction: normal;
			animation-fill-mode: none;
			animation-play-state: running;
			animation-name: angle_down;
		}

		@keyframes angle_down {
		0% {
			transform: translateY(0px); }
		100% {
			opacity: 0;
			transform: translateY(30px); } 
		}

    #aSide {
      height: 600px;
      width: 600px;
      position: absolute;
      top: calc(50% - 250px);
    }

    /* This styles the 3D object inserted in the aside container */
    #aSide model-viewer {
      height: 600px;
      width: 600px;
      position: absolute;
      top: 0;
      left: 0;
    }

    /* 
      This block that modifies the carousel css items are to override some framework jquery stuff. 
      The transition / time and the image sizes are causing problems. 
      Part of the problem comes from fitting the image size to the carousel size, seen in 
      div.carousel-inner img. The other part is centering the image and making the backgorund black.
    */

    .carousel-item-left, div.carousel-item-left p, div.carousel-item-left div.jumbotron {
      display: none !important;
      opacity: 0;
      transition: visibility 0s 0.2s, opacity 0.5s linear !important;
    }


    div.carousel-item-left.carousel-item-next p, div.carousel-item-left.carousel-item-next div.jumbotron {
      -webkit-animation-name: fadeIn;
      animation-name: fadeIn;
    }

    .carousel-item-left.carousel-item-next  {

      display: block !important;
      opacity: 0;
      transition: visibility 0s 0.2s, opacity 0.5s linear !important;
    }

    .carousel-item-right, div.carousel-item-right p, div.carousel-item-right div.jumbotron {
      display: none !important;
      opacity: 0;
      transition: visibility 0s 0.2s, opacity 0.5s linear !important;
    }

    div.carousel-item-right.carousel-item-prev p, div.carousel-item-right.carousel-item-prev div.jumbotron {
      -webkit-animation-name: fadeIn;
      animation-name: fadeIn;
    }

    .carousel-item-right.carousel-item-prev {
      display: block !important;
      opacity: 0;
      transition: visibility 0s 0.2s, opacity 0.5s linear !important;
    }