*{
    margin:0;
    padding:0;
}

.Capatalize {
    text-transform: capitalize;
}

@font-face {
    font-family: 'GT-Super-Text-Bold';
    src:  url('/fonts/GT-Super-Text-Bold.woff2') format('woff2'),
          url('/fonts/GT-Super-Text-Bold.woff') format('woff');
  }


@font-face {
    font-family: 'GT-Super-Text-Book';
    src:  url('/fonts/GT-Super-Text-Book.woff2') format('woff2'),
          url('/fonts/GT-Super-Text-Book.woff') format('woff');
  }


@font-face {
    font-family: 'FSKoopmanWeb-Medium';
    src:  url('/fonts/FSKoopmanWeb-Medium.woff2') format('woff2'),
          url('/fonts/FSKoopmanWeb-Medium.woff') format('woff');
  }


@font-face {
    font-family: 'FSKoopmanWeb-Regular';
    src:  url('/fonts/FSKoopmanWeb-Regular.woff2') format('woff2'),
          url('/fonts/FSKoopmanWeb-Regular.woff') format('woff');
  }

.top-section {
    background-image: url(../images/MaskGroup1.png);
    background-attachment: fixed;
    background-position: center;
    position:relative;
} 

.top-section .logo {
    width: 108px;
    height: 29px;

}

.top-section h1 {
    font-family: "GT-Super-Text-Bold" , sans-serif;
    font-size: 50px;
    color: white;
    line-height: 58px;
}

.top-section p {
    font-family: "GT-Super-Text-Book" , sans-serif;
    font-weight: normal;
    font-size: 50px;
    color: white;
    line-height: 58px;
}

.flex-container {
    display: flex;
    justify-content: space-around;
}

.flex-container > div {
    background-color: white;
    width: auto;
    height: 300px;
    margin: 10px;
}

    
.line1, .line2, .line3 {
        visibility: hidden;
}

.line1 {
    width: 0px;
    height: 201px;
    border-left: 1px solid black;
    opacity: 1;

}

.line2 {
    width: 0px;
    height: 201px;
    border-left: 1px solid #000000;
    opacity: 1;
}

.line3 {
    width: 0px;
    height: 201px;
    border-left: 1px solid #000000;
    opacity: 1;
}

.flex-container .text-col-1 h3 {
    width: max-content;
    font-family: "FSKoopmanWeb-Medium" , sans-serif;
    font-size: 18px;
    line-height: 23px;
    color: black;
}


.flex-container .text-col-2 h3 {
    width: max-content;
    font-family: "GT-Super-Text-Bold" , sans-serif;
    font-size: 34px;
    align-items: flex-start;
    padding: 0;
    line-height: 39px;
    color: black;
}


.flex-container .text-col-2 p {
    font-family: "FSKoopmanWeb-Regular" , sans-serif;
    font-size: 20px;
    padding-left: 0%;
    align-items: flex-start;
    text-align:left;
    padding: 0;
    line-height: 26px;
    color: black;

}

.bottom-section {
    background-image: url(../images/Ava-Wave-Black-4.png);
    background-attachment: fixed;
    background-position: center;
    position:relative;
    
}


.bottom-row .bottom-col h1 {
        font-family: "GT-Super-Text-Bold" , sans-serif;
        font-size: 34px;
        font-size: 34px;
        color:white;
        line-height: 39px;
}


.username {
    font-size: 16px;
    color:white;
    line-height: 20px;
    width:350px;
    height: 40px;
    border:none;
    border-bottom: 1px solid white;
    padding: 5px 10px;
    outline: none;
    background-color: transparent;
}

.password {
    font-size: 16px;
    color:white;
    line-height: 20px;
    width: 350px;
    height: 40px;
    border:none;
    border-bottom: 1px solid white;
    padding: 5px 10px;
    outline: none;
    background-color: transparent;
}

.submit-btn {
    font-family: "FSKoopmanWeb-Regular", sans-serif;
    font-size: 14px;
    left: 731px;
    width: 160px;
    height: 45px;
    border: none;
    background: #A719FF 0% 0% no-repeat;
    color:white;
    text-transform:uppercase;
    opacity: 1;
    cursor: pointer;
    
}


.username:focus::-webkit-input-placeholder {
    transition: text-indent 0.4s 0.4s ease; 
    text-indent: -100%;
    opacity: 1;
}


.password:focus::-webkit-input-placeholder {
    transition: text-indent 0.4s 0.4s ease; 
    text-indent: -100%;
    opacity: 1;
}


.footer-row {
    background:#E3E3E3;
    width:100%;
    background-size: cover;
    position: absolute;
}

.footer-col1 h1 {
    font-family: "GT-Super-Text-Bold", sans-serif;
    font-size: 24px;
    line-height:28px;
    color:#000000;
}

.footer-col1 .href {
    font-family: "FSKoopmanWeb-Regular", sans-serif;
    font-size: 16px;
    line-height:20px;
    color:#000000;
    }

.footer-col2 img {
    width: 40px;
    height: 40px;

}

@media only screen and (max-width:425px) {

.top-section {
    background-image: url(../images/MaskGroup1.png);
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    position:relative;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;     
    max-width:100vw;
    height: 761px;
}


.top-section .logo {
    margin-top: 81px;
    margin-left: 36px;
}

.top-section h1 {
    margin-left: 36px;
    margin-top: 140px;
    font-size: 34px;
    color: white;
    line-height: 42px;
}

.top-section p {
    margin-left: 36px;
    margin-top: 5px;
    font-size: 34px;
    color: white;
    line-height: 46px;
    max-width: 320px;
}


.flex-container {
    flex-direction: column;
    max-height: 671px;
}

#divline1, #divline2 {
    display: none;
}

.flex-container > div{
    width: auto;
    height: auto;
}

.flex-container .text-col-1 h1 {
    margin-top: 50px;
    margin-left: 36px;
    font-size: 16px;
    line-height: 21px;
    padding:0px;        
}

.line1, .line2, .line3 {
    visibility:hidden;
    max-height: 0px;
}

.flex-container .text-col-2 h1 {
    padding:0px;
    margin-top: 50px;
    margin-left: 36px;
    margin-bottom: 0px;
    font-size: 28px;
    line-height: 37px;      
}

.text-col-2 {
    margin:0px;
}

.flex-container .text-col-2 p {
    margin-top: 10px;
    margin-left: 36px;
    font-size: 18px;
    line-height: 24px;
    
}

.bottom-section {
    background-image: url(../images/Ava-Wave-Black-4.png);
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    position:relative;
    -moz-background-size: cover;
    -o-background-size: cover; 
    
    max-height: 671px;
    max-width: 100vw;
}

.bottom-section .bottom-row {
    background-size: cover;
    flex-direction: column; 
}

.bottom-section .bottom-col {
    height: 671px;
}

.bottom-row .bottom-col h1 {
    margin-left:36px;
    margin-top: 25px;
    padding-top: 175px;
    font-size: 28px;
    line-height: 37px;
}

.username {
    font-size: 16px;
    width: 70%;
    line-height: 21px;
    margin-left:36px;
    margin-top: 30px ;
}

.password {
    font-size: 16px;
    width:70%;
    line-height: 21px;
    margin-left:36px;
    margin-top: 30px;
}

.submit-btn {
    margin-left:36px;
    margin-top: 60px;
    letter-spacing: 1px; 
    font-size: 16px;
    line-height: 21px; 
}

.footer-row {
    display: flex;
    height: 100px;
}

.footer-col1 {
    flex:70%;
    height: 100px;
}

.footer-col2 {
    flex:30%;
    height:100px
}


.footer-col1 h1 {
    margin-left: 36px;
    margin-top: 15%;
    font-size: 20px;
    line-height: 27px;

}

.footer-col1 .href {
    margin-left: 36px;
    margin-top: 15%;
    font-size: 14px;
    line-height:19px;
    color:#000000;
}

.footer-col2 img {
    margin-top: 35%;
    margin-left:30px;
    width: 30px;
    height: 30px;
    padding-right: 5px;

}

}

@media only screen and (min-width:426px) and (max-width:768px) {
    
    .top-section {
        background-image: url(../images/MaskGroup1.png);
        background-attachment: fixed;
        background-position: center;
        background-size: cover;
        position:relative;
        -moz-background-size: cover;
        -o-background-size: cover;     
        max-width:100vw;
        height: 761px;
    }


.top-section .logo {
    margin-left: 60px;
    margin-top: 81px;
}

.top-section h1 {
    margin-left: 60px;
    margin-top: 160px;
    font-size: 42px;
    color: white;
    line-height: 56px;
}

.top-section p {
    margin-left: 60px;
    margin-top: 5px;
    font-size: 42px;
    color: white;
    line-height: 56px;
    max-width: 600px;
}


.flex-container {
    flex-direction: column;
    max-height: 671px;
}

#divline1, #divline2 {
    display: none;
}

.flex-container > div{
    width: auto;
    height: auto;
}

.flex-container .text-col-1 h1 {
    margin-top: 50px;
    margin-left: 60px;
    font-size: 18px;
    line-height: 21px;
    padding:0px;        
}

.line1, .line2, .line3 {
    visibility:hidden;
    max-height: 0px;
}

.flex-container .text-col-2 h1 {
    padding:0px;
    margin-top: 50px;
    margin-left: 60px;
    margin-bottom: 10px;
    font-size: 30px;
    line-height: 37px;      
}

.text-col-2 {
    margin:0px;
}

.flex-container .text-col-2 p {
    margin-top: 10px;
    margin-left: 60px;
    margin-bottom: 25px;
    font-size: 20px;
    line-height: 24px;
    max-width: 468px;
    
}

.bottom-section {
    background-image: url(../images/Ava-Wave-Black-4.png);
    background-attachment: fixed;
    background-position: center;
    position:relative;
    
    display: flex;
    max-height: 671px;
    max-width: 100vw;
}

.bottom-section .bottom-row {
    background-size: cover;
    flex-direction: column; 
}

.bottom-section .bottom-col {
    height: 671px;
}

.bottom-row .bottom-col h1 {
    margin-left:60px;
    margin-top: 0px;
    padding-top: 175px;
    font-size: 34px;
    line-height: 46px;
}

.username {
    font-size: 16px;
    width: 80%;
    line-height: 21px;
    margin-top:60px;
    margin-left:60px;
}

.password {
    font-size: 16px;
    width:80%;
    line-height: 21px;
    margin-top:60px;
    margin-left:60px;
}

.submit-btn {
    height: 45px;
    width:160px;
    margin-top:80px;
    margin-left:60px;
    letter-spacing: 1px; 
    font-size: 16px;
    line-height: 21px; 
}

.footer-row {
    display: flex;
    height: 150px;
}

.footer-col1 {
    flex:70%;
    height: 150px;
}

.footer-col2 {
    flex:30%;
    height:150px
}


.footer-col1 h1 {
    margin-left: 60px;
    margin-top: 40px;
    font-size: 20px;
    line-height: 27px;

}

.footer-col1 .href {
    margin-left: 60px;
    margin-top: 40px;
    font-size: 14px;
    line-height:19px;
    color:#000000;
}

.footer-col2 img {
    margin-top: 40px;
    margin-left:145px;
    width: 30px;
    height: 30px;
    padding-right: 0px;

}

}

@media only screen and (min-width:769px) and (max-width:1024px) {
    
    .top-section {
        background-image: url(../images/MaskGroup1.png);
        background-attachment: fixed;
        background-position: center;
        position:relative;     
        max-width:100vw;
        height: 761px;
    }   
    
    .top-section .logo {
        margin-left: 60px;
        margin-top: 81px;
      
    }
    
    .top-section h1 {
        margin-left: 60px;
        margin-top: 160px;
        font-size: 42px;
        color: white;
        line-height: 56px;
    }
    
    .top-section p {
        margin-left: 60px;
        margin-top: 5px;
        font-size: 42px;
        color: white;
        line-height: 56px;
        max-width: 600px;
    }
    
    
    .flex-container {
        flex-direction: column;
        max-height: 671px;
    }
    
    #divline1, #divline2 {
        display: none;
    }
    
    .flex-container > div{
        width: auto;
        height: auto;
    }
    
    .flex-container .text-col-1 h1 {
        margin-top: 50px;
        margin-left: 60px;
        font-size: 18px;
        line-height: 21px;
        padding:0px;        
    }
    
    .line1, .line2, .line3 {
        visibility:hidden;
        max-height: 0px;
    }
    
    .flex-container .text-col-2 h1 {
        padding:0px;
        margin-top: 50px;
        margin-left: 60px;
        margin-bottom: 10px;
        font-size: 30px;
        line-height: 37px;      
    }
    
    .text-col-2 {
        margin:0px;
    }
    
    .flex-container .text-col-2 p {
        margin-top: 10px;
        margin-left: 60px;
        margin-bottom: 25px;
        font-size: 20px;
        line-height: 24px;
        max-width: 468px;
        
    }
    
    .bottom-section {
        background-image: url(../images/Ava-Wave-Black-4.png);
        background-attachment: fixed;
        background-position: center; 
        background-size: cover;       
        position:relative;        
        display: flex;
        max-height: 671px;
        max-width: 100vw;
    }
    
    .bottom-section .bottom-row {
        background-size: cover;
        flex-direction: column; 
    }
    
    .bottom-section .bottom-col {
        height: 671px;
    }
    
    .bottom-row .bottom-col h1 {
        margin-left:60px;
        margin-top: 0px;
        padding-top: 175px;
        font-size: 34px;
        line-height: 46px;
    }
    
    .username {
        font-size: 16px;
        width: 80%;
        line-height: 21px;
        margin-top:60px;
        margin-left:60px;
    }
    
    .password {
        font-size: 16px;
        width:80%;
        line-height: 21px;
        margin-top:60px;
        margin-left:60px;
    }
    
    .submit-btn {
        height: 45px;
        width:160px;
        margin-top:80px;
        margin-left:60px;
        letter-spacing: 1px; 
        font-size: 16px;
        line-height: 21px; 
    }
    
    .footer-row {
        display: flex;
        height: 150px;
    }
    
    .footer-col1 {
        flex:70%;
        height: 150px;
    }
    
    .footer-col2 {
        flex:30%;
        height:150px
    }
    
    
    .footer-col1 h1 {
        margin-left: 60px;
        margin-top: 40px;
        font-size: 20px;
        line-height: 27px;
    
    }
    
    .footer-col1 .href {
        margin-left: 60px;
        margin-top: 40px;
        font-size: 14px;
        line-height:19px;
        color:#000000;
    }
    
    .footer-col2 img {
        margin-top: 40px;
        margin-left:145px;
        width: 30px;
        height: 30px;
        padding-right: 0px;
    
    }
    
}

@media only screen and (min-width:1025px) and (max-width:1440px) {
    
    .top-section {
        background-image: url(../images/MaskGroup1.png);
        background-attachment: fixed;
        background-position: center;
        background-size: cover;
        position:relative;   
        max-width:100vw;
        height: 761px;
    }
    
    .top-section .logo {        
        width: 108px;
        height: 29px;
        margin-left: 85px;
        margin-top: 85px;
        
    }
    
    .top-section h1 {
        margin-left: 85px;
        margin-top: 160px;
        font-size: 50px;
        color: white;
        line-height: 56px;
    }
    
    .top-section p {
        margin-left: 85px;
        margin-top: 25px;
        font-size: 50px;
        color: white;
        line-height: 56px;
        max-width: 800px;
    }
    
    .flex-container {
        display: flex;
    }


    .line1, .line2, .line3 {
        visibility: visible;
    }

    .line1 {
        padding: 0%;
        width: 1px;
        height: 235px;
        border-left: 1px solid black;
        opacity: 1;
        margin-left: 85px;
        margin-top: 75px;
        margin-right: 0px;
    }

    .line2 {
        padding: 0%;
        width: 1px;
        height: 235px;
        border-left: 1px solid #000000;
        opacity: 1;
        margin-left: 300px;        
        margin-top: 75px;
    }

    .line3 {
        padding: 0%;        
        width: 1px;
        height: 235px;
        border-left: 1px solid #000000;
        opacity: 1;
        margin-left: 250px;        
        margin-top: 75px;
    }

    .flex-container {
        justify-content:start;
        margin-bottom: 75px;
    }

    .flex-container .text-col-1 h1 {
        font-family: "FSKoopmanWeb-Medium" , sans-serif;
        font-size: 18px;
        line-height: 24px;
        color: black;
        margin-left: 5px;
        margin-top: 85px;
        width:auto;
    }


    .flex-container .text-col-2 h1 {
        font-family: "GT-Super-Text-Bold" , sans-serif;
        font-size: 34px;
        margin-top:85px;
        padding: 0;
        line-height: 46px;
        color: black;
        width: auto;
        text-align: left;
    }


    .flex-container .text-col-2 p {
        font-family: "FSKoopmanWeb-Regular" , sans-serif;
        font-size: 20px;
        padding-left: 0%;
        align-items: flex-start;
        text-align:left;
        padding: 0;
        line-height: 26px;
        color: black;
        width: 320px;

    }
    
    .bottom-section {
        background-image: url(../images/Ava-Wave-Black-4.png);
        background-attachment: fixed;
        background-position: center;
        background-size: cover;
        position:relative;
        
        height: 768px;
        max-width: 100vw;
    }
    
    .bottom-section .bottom-row {
        background-size: cover;
        flex-direction: row; 
    }
    
    
    .bottom-row .bottom-col h1 {
        margin-left:50%;
        padding-top: 175px;
        font-size: 34px;
        line-height: 46px;
    }
    
    .username {
        font-size: 16px;
        width: 500px;
        line-height: 21px;
        margin-top:60px;
        margin-left:50%;
    }
    
    .password {
        font-size: 16px;
        width:500px;
        line-height: 21px;
        margin-top:60px;
        margin-left:50%;
    }
    
    .submit-btn {
        height: 45px;
        width:160px;
        margin-top:80px;
        margin-left:50%;
        letter-spacing: 1px; 
        font-size: 16px;
        line-height: 21px; 
    }
    
    .footer-row {
        display: flex;
        height: 150px;
    }
    
    .footer-col1 {
        flex:70%;
        height: 150px;
    }
    
    .footer-col2 {
        flex:30%;
        height:150px
    }
    
    
    .footer-col1 h1 {
        margin-left: 60px;
        margin-top: 40px;
        font-size: 20px;
        line-height: 27px;
    
    }
    
    .footer-col1 .href {
        margin-left: 60px;
        margin-top: 40px;
        font-size: 14px;
        line-height:19px;
        color:#000000;
    }
    
    .footer-col2 img {
        margin-top: 40px;
        margin-left:320px;
        width: 30px;
        height: 30px;
        padding-right: 0px;
    
    }
    
}


@media only screen and (min-width:1441px)  {
    
    .top-section {
        background-image: url(../images/MaskGroup1.png);
        background-attachment: fixed;
        background-position: center;
        background-size: cover;
        position:relative;   
        max-width:100vw;
        height: 1200px ;
    }
    
    .top-section .logo {
        margin-left: 170px;
        margin-top: 170px;
        width:108px;
        height: 29px;
    }
    
    .top-section h1 {
        margin-left: 170px;
        margin-top: 220px;
        font-size: 50px;
        color: white;
        line-height:67px;
    }
    
    .top-section p {
        margin-left: 170px;
        margin-top: 25px;
        font-size: 50px;
        color: white;
        line-height: 67px;
        width:1600px;
    }
    
    .flex-container {
        display: flex;
        height: 671px;
    }


    .line1, .line2, .line3 {
        visibility: visible;

    }


    .line1 {
        padding: 0%;
        width: 1px;
        height: 400px;
        border-left: 2px solid black;
        opacity: 1;
        margin-left: 170px;
        margin-top: 120px;
        margin-right: 0px;
    }

    .line2 {
        padding: 0%;
        width: 1px;
        height: 400px;
        border-left: 2px solid #000000;
        opacity: 1;
        margin-left: 850px;        
        margin-top: 120px;
    }

    .line3 {
        padding: 0%;        
        width: 1px;
        height: 400px;
        border-left: 2px solid #000000;
        opacity: 1;
        margin-right:85px;
        margin-left: 730px;        
        margin-top: 120px;
    }

    .flex-container {
        justify-content:start;
    }

    .flex-container .text-col-1 h1 {
        font-family: "FSKoopmanWeb-Medium" , sans-serif;
        font-size: 18px;
        line-height: 24px;
        color: black;
        margin-left: 5px;
        margin-top: 175px;
        width:auto;
    }

    .flex-container .text-col-2 h1 {
        font-family: "GT-Super-Text-Bold" , sans-serif;
        font-size: 34px;
        margin-top:175px;
        padding: 0;
        line-height: 46px;
        color: black;
        width:auto;
        text-align: left;
    }


    .flex-container .text-col-2 p {
        font-family: "FSKoopmanWeb-Regular" , sans-serif;
        font-size: 20px;
        padding-left: 0%;
        align-items: flex-start;
        text-align:left;
        padding: 0;
        line-height: 34px;
        color: black;
        width: 320px;
        margin-top: 50px;

    }
    
    .bottom-section {
        background-image: url(../images/Ava-Wave-Black-4.png);
        background-attachment: fixed;
        background-position: center;
        position:relative;
        background-size: cover;       
        height: 1200px;
        max-width: 100%;
    }
    
    .bottom-section .bottom-row {
        background-size: cover;
        flex-direction: row; 
    }
    
    
    .bottom-row .bottom-col h1 {
        margin-left:50%;
        padding-top: 300px;
        font-size: 34px;
        line-height: 46px;
    }
    
    .username {
        font-size: 16px;
        width: 900px;
        line-height: 21px;
        margin-top:120px;
        margin-left:50%;
        color:white;
    }
    
    .password {
        font-size: 16px;
        width:900px;
        line-height: 21px;
        margin-top:120px;
        margin-left:50%;
    }
    
    .submit-btn {
        height: 45px;
        width:160px;
        margin-top:160px;
        margin-left:50%;
        letter-spacing: 1px; 
        font-size: 16px;
        line-height: 21px; 
    }
    
    .footer-row {
        display: flex;
        height: 300px;
    }
    
    .footer-col1 {
        flex:70%;
        height: 150px;
    }
    
    .footer-col2 {
        flex:30%;
        height:150px
    }
    
    
    .footer-col1 h1 {
        margin-left: 135px;
        margin-top: 120px;
        font-size: 24px;
        line-height: 32px;
    
    }
    
    .footer-col1 .href {
        margin-left: 135px;
        font-size: 16px;
        line-height:21px;
        color:#000000;
    }
    
    .footer-col2 img {
        margin-top: 100px;
        margin-left:520px;
        width: 40px;
        height: 40px;
        padding-right: 0px;
    
    }
    
}