:root {
		--bg-color: white;
		--text-color: #f6f6f6;
		--hightlight-color: #0064e3;
	}

	body, html {
	    height: 100%;
	    margin: 0;
	    background-color: #090f23;
	    font-size: 1.2rem;
	    font-family: 'helvetica neue';
	}

	.banner {
		color: white;
		font-size: 1rem;

	  background-color: #da552f;
	 position: fixed;
	   bottom: 0;
	   z-index: 9999;
	   width: 100%;
	   text-align: center;
	}

	.banner a {
	  color: #f6f600;
	}

	.banner a:hover {
	  color: white;
	}


	.bg {
		position: fixed;
	    left: 0;
	    right: 0;
	    top: 0;
	    bottom: 0;
	    z-index: 0;
      opacity: 0;

      height: 100%; 
      background-repeat: no-repeat;
      background-size: cover;
      background-position: top right;

      transition: opacity 0.5s;
	}

  	.bg-active {
    	opacity: 1;
  	}

	.bg-1 {
      background-image: url("slide1.jpg");
	}

	.bg-2 {
      background-image: url("slide2.jpg");
	}

  	.bg-3 {
      background-image: url("slide3.jpg");
  	}

  	.bg-4 {
      background-image: url("slide4.jpg");
  	}

  	.bg-5 {
      background-image: url("slide5.jpg");
  	}

  	.bg-6 {
      background-image: url("slide6.jpg");
  	}  	

  	.bg-7 {
      background-image: url("slide7.jpg");
  	}  	

  	.bg-8 {
      background-image: url("slide8.jpg");
  	}   	

  	.bg-9 {
      background-image: url("slide9.jpg");
  	}    	

	h1 {
		font-weight: 400;
	}
	.text {
	    color: var(--text-color);
	    position: relative;
	    z-index: 1;
	    top: 25%;
	    left: 10%;
	    text-shadow: 1px 1px 1px rgba(0,0,0,0.35);
	    position: absolute;
	}

	.text2 {
		font-size: 0.8rem;
	    color: var(--text-color);
	    position: relative;
	    z-index: 1;
	    bottom: 10%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    text-shadow: 1px 1px 1px rgba(0,0,0,0.35);
	    position: absolute;
	    width: 100%;
	    text-align: center;
	}

	.text3 {
		font-size: 0.8rem;
	    color: var(--text-color);
	    position: relative;
	    z-index: 1;
	    bottom: 5%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    text-shadow: 1px 1px 1px rgba(0,0,0,0.35);
	    position: absolute;
	    width: 100%;
	    text-align: center;
	}


	.text4 {
		font-size: 0.8rem;
	    color: var(--text-color);
	    position: relative;
	    z-index: 1;
	    bottom: 0%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    text-shadow: 1px 1px 1px rgba(0,0,0,0.35);
	    position: absolute;
	    width: 100%;
	    text-align: center;
	}

	.text5 {
		font-size: 0.8rem;
	    color: var(--text-color);
	    position: relative;
	    z-index: 1;
	    bottom: 11%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    text-shadow: 1px 1px 1px rgba(0,0,0,0.35);
	    position: absolute;
	    width: 100%;
	    text-align: center;
	}



	.text6 {
		font-size: 0.8rem;
	    color: var(--text-color);
	    position: relative;
	    z-index: 1;
	    bottom: -25px;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    text-shadow: 1px 1px 1px rgba(0,0,0,0.35);
	    position: absolute;
	    width: 100%;
	    text-align: center;
	}
	

	.button {
		margin-top: 15px;
	    	
	   	color: white;
	   	text-shadow: none;

	   	/*background: -webkit-linear-gradient(0deg, #0b275d 0%, #1f7ae6 100%);*/
	   	background-color: #006ad8;
	   	border-color: transparent;
	   	box-shadow: 0 2px 2px rgba(0,0,0,0.6);

	    
	    border-width: 2px;
	    border-radius: 6px;
	    
	    padding: 15px 20px;
	    text-align: center;
	    text-decoration: none;
	    display: inline-block;
	    font-size: 1.2rem;

		text-decoration: none;
		transition: all 0.33s ease;
	}

	.button:hover {
		/*background: -webkit-linear-gradient(0deg, #0e3171 0%, #4c96ec 100%);*/
		background-color: #0f7cf0;
		box-shadow: 0 10px 25px rgba(150,150,150,0.35);
	}


	.button2 {
		margin-top: 15px;
		margin-left: 20px;
	    	
	   	color: white;
	   	text-shadow: none;

	   	background-color: #8e8e8e;
	   	border-color: transparent;
	   	box-shadow: 0 2px 2px rgba(0,0,0,0.6);

	    
	    border-width: 2px;
	    border-radius: 6px;
	    
	    padding: 15px 20px;
	    text-align: center;
	    text-decoration: none;
	    display: inline-block;
	    font-size: 1.2rem;

		text-decoration: none;
		transition: all 0.33s ease;
	}

	.button2:hover {
		background-color: #989898;
		box-shadow: 0 10px 25px rgba(150,150,150,0.35);
	}


    .footer {
    	color: var(--text-color);
    	font-size: 0.7rem;
    	position: absolute;
    	bottom: 0%;
    }

    a {
    	color: #45a0ff;;
    	text-decoration: none;
    }

    .fadeIn {
          opacity: 0;
          animation: fadeIn 2s forwards;
        }

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

    @media screen and (max-width: 1020px) {
	body {
		font-size: 0.7rem;
	} 

    	.button2 {
			margin-left: 0;
		}

    	.text {
    		color: var(--text-color);
    		position: absolute;
    		top: 50%;
    		left: 0%;
    		right: 0%;
    		text-align: center;
    	}

    	.text2,.text3,.text4,.text5 {
    		display: none;
    	}


    }