@font-face {
    font-family: 'ProximaNova';
    src: url("./fonts/proximanova-regular.woff") format("woff");
}

@font-face {
    font-family: 'ProximaNova';
    font-weight: bold;
    src: url("./fonts/proximanova-bold.woff") format("woff");
}

@font-face {
    font-family: 'ProximaNova';
    font-weight: 500;
    src: url("./fonts/proximanova-medium.woff") format("woff");
}   

body {
    font-family: 'ProximaNova';
}

.fadein {
    opacity: 0;
    animation-name: fadein;
    animation-duration: 1s;
    animation-delay: 4.5s;
    animation-fill-mode: forwards;
}
  
@keyframes fadein {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}

.fadeout {
    opacity: 1;
    animation-name: fadeout;
    animation-duration: 1s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
}
  
@keyframes fadeout {
    0%   {opacity: 1;}
    100% {opacity: 0;}
}

.yellowbar {
    position: absolute;
    top: 190px;
    visibility: visible;
    margin-bottom: 10px;
}

.yellowbar2 {
    position: absolute;
    top: 220px;
    visibility: hidden;
    margin-bottom: 10px;

    animation-name: flyinvertical3;
    animation-delay: 2.5s;
    animation-duration: 2.25s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.blink {
    /*animation: blink-animation 900ms steps(6, end) 2.7 infinite normal forwards, flyinvertical 3s ease-out 5s;*/
    animation-name: blink-animation2;
    animation-duration: 2.5s;
    animation-fill-mode: forwards;
    /*animation: blink-animation2 2500ms linear 0 infinite normal forwards; */
    /*-webkit-animation: blink-animation2 900ms steps(6, end) 2.7;*/
}

@keyframes blink-animation {
    to {
      visibility: visible;
    }
}

@keyframes blink-animation2 {
    0%   { opacity: 1; }
    20%  { opacity: 0; }
    40%  { opacity: 1; }
    60%  { opacity: 0; }
    80%  { opacity: 1; }
    100% { opacity: 0; }
}            

@-webkit-keyframes blink-animation {
    to {
      visibility: visible;
    }
}

* {
    box-sizing: border-box;
  }
  
  /* Create three equal columns that floats next to each other */
  .column {
    float: left;
    width: 70%;
    padding: 10px;
    height: auto; /* Should be removed. Only for demonstration */
  }
  
  .column1 {
    float: left;
    width: 15%;
    padding: 10px;
    height: auto; /* Should be removed. Only for demonstration */
  }

  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  
  /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
    .column {
      width: 100%;
    }
    .column1 { 
      display: none;
    }
  }

  .centercontainer {
      position: relative;
      overflow: hidden;
      height: 600px;
      width: 600px;
      min-width: 600px;
  }

  .biglogo {
    margin-bottom:118px;
    margin-top: 40px;
  }

  .smalllogo {
    width:110px;
    margin-left:-6px;
    margin-top: 14px;
  }

  .tagline {
    font-family: 'ProximaNova', Arial, Helvetica, sans-serif;
    font-size:2.9em; 
    font-weight:bold;
    line-height:.90;
  }

  .productcontainer {
      position: absolute;
      top: 80px;
      left: 155px;
    }
    .producttext {
        font-size: 70px;
        font-weight: bold;
        color: #001EFF;  
        line-height: .8em;
    }

    .welcometext {
        font-size: 22px;
        margin-bottom: 0px;
    }

    .requirements {
        font-size: 12px;
        color: #909090;
    }
    
    .buttoncontainer {
        position: absolute;
        top: 380px;
        left: 190px;
        width: 186px;
        text-align:center;
    }

    .button {
        color: white;
        background-color: #001EFF;
        font-size: 12px;
        padding-top: 8px;
        padding-bottom: 8px;
        padding-left: 39px;
        padding-right: 39px;
        border: none;
        border-radius: 0px;
        width: 100%;


        cursor: pointer;
        text-decoration: none;        
    }

    .button:hover {
        background-color: #001EFF;
        cursor: pointer;
    }

    @keyframes flyinvertical {
        0% { 
            transform: translateY(0px); 		
        }
        100% { 
            transform: translateY(1400px); 
        }
    }

    @keyframes flyinvertical2 {
        0% { 
            transform: translateY(620px); 		
        }
        100% { 
            transform: translateY(-400px); 
        }
    }

    @keyframes flyinvertical3 {
        0% { 
            transform: translateY(0px); 		
            visibility: visible;
        }
        100% { 
            transform: translateY(1400px); 
            visibility: visible;
        }
    }


    @keyframes flyinhorizontal {
        0% { 
            transform: translateX(0px); 		
        }
        100% { 
            transform: translateX(2000px); 
        }
    }

    @keyframes flyinhorizontal2 {
        0% { 
            transform: translateX(0px); 		
        }
        100% { 
            transform: translateX(-2000px); 
        }
    }

    .movingbars {
        position: absolute;
        top: 0px;
        /*animation: flyinvertical 3s ease-out 2s;*/
    }

    .bluebar {
        position: absolute;
        top: 610px;
        z-index: 1;     
    }

    .bluebarflyin {
        animation-name: flyinvertical2;
        animation-delay: 0s;
        animation-duration: 2.5s;
        animation-timing-function: linear;
        animation-fill-mode: forwards;
    }    

    .opentextcontainer {
        position: absolute;
        font-size: 26px;
        z-index: 2;
        top: 220px;
        width: 100%;
        text-align: center;
        opacity: 0;
    }

    .opentextcontainerfadein {
        animation-name: fadein;
        animation-duration: 1s;
        animation-delay: 2.5s;
        animation-fill-mode: forwards;
    }    

    .imgcol {
        position: absolute;
        top:-750px;
        animation-name: flyinvertical;
        animation-delay: 2.6s;
        animation-duration: 2.5s;
    }

    .imgcol.imgcolumn1 {
        left:0px;
        animation-timing-function: ease-out;
    }

    .imgcol.imgcolumn2 {
        left:162px;
        animation-timing-function: ease-in;
    }

    .imgcol.imgcolumn3 {
        left:214px;
        animation-timing-function: ease-out;
    }

    .imgcol.imgcolumn4 {
        left:270px;
        animation-timing-function: cubic-bezier(0.2,-2,0.8,2);
    }

    .imgcol.imgcolumn5 {
        left:426px;
        animation-timing-function: ease-in;
    }

    .imgcol.imgcolumn6 {
        left:480px;
        animation-timing-function: ease-out;
    }

    .imgcol.imgcolumn7 {
        left:530px;
        animation-timing-function: ease-out;
    } 

    .imgcol.imgcolumn8 {
        left:734px;
        animation-timing-function: ease-out;
    }
    
    .imgcol.imgcolumn9 {
        left:788px;
        animation-timing-function: ease-out;
    }