/* Our blue = #4169E1
Our gray = #757888 */

body{
    font-family: 'lato', sans-serif;
}
footer{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #757888;
    color: white;
}

.underline{
    text-decoration: underline;
}
.blue{
    color:#4169E1;
}
.black{
    color: black;
}
.bold{
    font-weight: bold;
}
.italic{
    font-style: italic;
}
.center{
    text-align: center;
}
.justify{
    text-align: justify;
}
.spacer{
    height: 20px;
}


.navLink{
    color: #4169E1;
    font-size: 20px;
    padding: 3px;
    

}
.bottomLink{
    color: white;
    font-size: 18px;
    padding: 3px;
}
.graySpace{
    height: 20px;
    width: 100%;
    background-color: #757888;
}
.demoButton{
    background-color: #4169E1;
    width: 150px;
    margin: 20px auto auto auto;
    position: relative;
    text-align: center;
    padding: 15px;
    border-radius: 5%;
    color: white;
}
.demoButton a{
    color: white;
}
.dropdown-content1{
    display: none;
    position: absolute;
    background-color: white;
    min-width: 200px;
    font-size: 16px;
    z-index: 1;
    right: 20px;
    bottom: 90px;
    -webkit-text-stroke: 0 black;
    text-align: left;
    border-radius: 20px;
}
.alignC{
    align-self: center;
    align-items: center;
}
#nsfWord{
    text-decoration-thickness: 0.05em;
    text-decoration-color: black;
}
#nsfDefine{
    display: block;
    position: absolute;
    bottom: 10px;
    background-color: rgb(255,255,255);
}
.dropdown:hover .dropdown-content1 {display: block;}
#header{
    justify-items: center;

}
#headerLogo{
    width: 150px;
    display: block;
    position: relative;
    margin: 5px auto 0 auto;
    
}
#headerNav{
    margin: 10px auto 0 auto;
    position: relative;
    width: 99%;
   text-align: center;
}
#headerBottom{
    
    margin-top: 5px;
}
#homeHeading {
    font-size: 80px;
    color: black;
    font-family: 'Barlow', sans-serif;
  -webkit-text-stroke: 0.02em white;
  background-color: rgb(255,255,255);
  background-color: rgba(255,255,255, 0.5);

    

}
.homeHeader{
    display: flex;
    background-image: url('./homeSlide/denver-790472_1920.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 400px;
    align-items: center;
    justify-content: center;
    position:relative;
}
#unitedHeading{
    color:#000;
    font-size: 80px;
    -webkit-text-stroke: 1px #FFF;
    background-color: rgb(256,256,256);
    background-color: rgba(256,256,256, 0.3);
    position: relative;
    font-family: 'Rubik', sans-serif;
    font-weight: normal;
    
}
#homeMain{
    background-image: linear-gradient(rgba(117, 120, 136, 0.1), rgba(117, 120, 136, 0.5), rgba(65, 105, 225, 0.5)  );
    width: 80%;
    margin: 50px auto 0 auto;
    
}
#homeGrid{
    display: grid;
    width: 90%;
    grid-template-columns: 50% 50%;
    grid-template-areas:"s1 s1"
                        "s2 s2"
                        "c1 pic1"
                        "s3 s3"
                        "s4 s4"
                        "pic2 c2"
                        "s5 s5"
                        "s6 s6"
                        "c3 pic3"
                        "s7 s7"
                        "s8 s8"
                        "i1 i1"
                        "s9 s9"
                        "s10 s10"
                        "pic4 i2"
                         "pic4 c4"
                         "s11 s11"
                         "s12 s12"
                         "c5 pic5"
                         "s13 s13"
                         "s14 s14"
                         "pic6 c6"
                         "s15 s15"
                         "s16 s16"
                         
                         ;
    justify-content: space-around;
    margin: auto;
}
#hspace1{
    grid-area: s1;
}
#hspace2{
    grid-area: s2;
}
#hspace3{
    grid-area: s3;
}
#hspace4{
    grid-area: s4;
}
#hspace5{
    grid-area: s5;
}
#hspace6{
    grid-area: s6;
}
#hspace7{
    grid-area: s7;
}
#hspace8{
    grid-area: s8;
}
#hspace9{
    grid-area: s9;
}
#hspace10{
    grid-area: s10;
}
#hspace11{
    grid-area: s11;
}
#hspace12{
    grid-area: s12;
}
#hspace13{
    grid-area: s13;
}
#hspace14{
    grid-area: s14;
}
#hspace15{
    grid-area: s15;
}
#hspace16{
    grid-area: s16;
}
#coreD1{
    grid-area: c1;
}
#coreD2{
    grid-area: c2;
}
#coreD3{
    grid-area: c3;
}
#coreD4{
    grid-area: c4;
}
#coreD5{
    grid-area: c5;
}
#coreD6{
    grid-area: c6;
}

#coreH1{
    grid-area: h1;
}
#coreP1{
    grid-area: p1;
    
}
#coreH2{
    grid-area: h2;
}
#coreP2{
    grid-area: p2;
    
}
#insert1{
    grid-area: i1;
    margin: auto;
}
#insert2{
    grid-area: i2;
    margin: auto;
}
#homeText{
    width: 80%;
    margin: auto;
    font-size: 18px;
    grid-area: text;
    position: relative;

    

}
#homePic1{
    width: 90%;
    grid-area: pic1;
    border-radius: 10px;
    align-self: center;
    justify-self: end;
}
#homePic2{
    width: 90%;
    grid-area: pic2;
    border-radius: 10px;
    align-self: center;
}
#homePic3{
    width: 90%;
    grid-area: pic3;
    border-radius: 10px;
    align-self: center;
    justify-self: end;
}
#homePic4{
    width: 90%;
    grid-area: pic4;
    border-radius: 10px;
    align-self: center;
}
#homePic5{
    width: 90%;
    grid-area: pic5;
    border-radius: 10px;
    align-self: center;
    justify-self: end;
}
#homePic6{
    width: 90%;
    grid-area: pic6;
    border-radius: 10px;
    align-self: center;
}
#free{
    grid-area: free;
    font-size: 32px;
}
#homeText2{
 
    margin: 20px auto;
    text-align: justify;
    font-size: 18px;
    width: 90%;
    padding-bottom: 20px;


}
#bankTopHeading{
    text-align: center;
    grid-area: head;
    position: relative;
    
}
#privacyMain, #termsMain{
    width: 80%;
    margin: auto;
    
}
#aboutHeadingDiv{
    background-image: url('/city-3108348_1920.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 300px;
    align-items: center;
    justify-content: center;
    display: flex;
}
#aboutHeading{
    font-size: 100px;
    -webkit-text-stroke: 1px #FFF;
    font-family: 'Rubik', sans-serif;
    font-weight: normal;
    background-color: rgb(256,256,256);
    background-color: rgba(256,256,256, 0.3);
}
#aboutUsMain{
    width: 80%;
    margin: auto;
    font-size: 18px;
}


#hh21{
    grid-area: 1/ 1 / 2 / 3;
}
#aboutImgDiv{
    background-color:rgba(65,105,225,0.5);
    margin: 0;

}
#aboutPic{
    width: 500px;
    display: block;
    margin: 0 auto;
    border-radius: 10px;
    
}
#aboutUs{
    background-image: linear-gradient(rgba(256,256,256, 0.5), rgba(65, 105, 225, 0.5)  );
    margin: 0;
    padding: 20px;
}

#missionDiv{
    position: relative;
    text-align: justify;
    align-items: center;
    font-family: 'Petrona', serif;
    display:grid;
    grid-template-columns: 50% 50%;
    grid-template-areas: "head head"
                        "text pic";


    
}
#missionH2 {
    display: block;
    position: relative;
    margin-top: 500;
    text-align: center;
    grid-area: head;
}
#mission {
    padding: 0 1em;
    grid-area: text;


}
#aboutUs{
    position: relative;
    display: grid;
    width: 80%;

    margin: auto;
    justify-content: space-between;

    
}
#aboutUsText {

    margin: auto 2em;

    padding: 0 1em;
    text-align: justify;
    border-radius: 1em;
}
#auImg{

    margin: 10px auto;
    grid-area: pic;
    width: 90%;
    border-radius: 10px;

    
}

#reviewsBlock{
    position: relative;
    display: grid;
    width: 80%;
    grid-template-columns: 50% 50%;
    grid-template-areas: "one two"
                         "three four"
                         "five six";
    align-content: center;
    justify-content: center;
    margin: 20px auto;
}
#reviews1{
    grid-area: one;
    height: 150px;
    margin:10px;
    background-image: url("./aboutBan/woman-801872_1920.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    align-content: center;

    border-radius: 10px;
    display: flex;
    
    
}
#reviews2{
    grid-area: two;
    height: 150px;
    margin:10px;
    background-image: url("/aboutBan/business-1868015_1920.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    align-content: center;
    border-radius: 10px;
    display: flex;
}
#reviews3{
    grid-area: three;
    height: 150px;
    margin:10px;  
    background-image: url("/aboutBan/business-3560917_1920.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    align-content: center;
    border-radius: 10px;
    display: flex;
    
}
#reviews4{
    grid-area: four;
    height: 150px;
    margin:10px;  
    background-image: url("/aboutBan/home-2618511_1920.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    align-content: center;
    border-radius: 10px;   
    display: flex;
}
#reviews5{
    grid-area: five;
    height: 150px;
    margin:10px;  
    background-image: url("/aboutBan/people-1031169_1920.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    align-content: center;
    border-radius: 10px;      
    display: flex;
}
#reviews6{
    grid-area: six;
    height: 150px;
    margin:10px;  
    background-image: url("/aboutBan/technology-791029_1920.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    align-content: center;
    border-radius: 10px;     
    display: flex;
}
.reviewP{
    color: #e6f2e9;

    font-size: 18px;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.5);

    min-height: 50%;
    width: 100%;
    padding: 10px;



    
}

#nsfStoryHead{
    font-size: 50px;
}
#merchantHeader{
    background-image: url('archive-1850170_1920.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#benefitsHead{
    font-size: 50px;
    padding: 20px;
    -webkit-text-stroke: 1px #FFF;
    font-family: 'Rubik', sans-serif;
    background-color: rgba(211, 217, 237 ,0.5);

}
#merchantPic1{
    width: 90%;
    grid-area: pic1;
    border-radius: 10px;
    align-self: center;
    

}
#merchantPic2{
    width: 90%;
    grid-area: pic2;
    border-radius: 10px;
    align-self: center;
    justify-self: end;
    

}
#merchantPic3{
    width: 90%;
    grid-area: pic3;
    border-radius: 10px;
    align-self: center;
    

}
#merchantPic4{
    width: 90%;
    grid-area: pic4;
    border-radius: 10px;
    align-self: center;
    justify-self: end;
    

}
#merchantPic5{
    width: 90%;
    grid-area: pic5;
    border-radius: 10px;
    align-self: center;
    

}
#merchantPic6{
    width: 90%;
    grid-area: pic6;
    border-radius: 10px;
    align-self: center;
    justify-self: end;
    

}
#merchantPic7{
    width: 90%;
    grid-area: pic7;
    border-radius: 10px;
    align-self: center;
    

}
#merchantPic8{
    width: 90%;
    grid-area: pic8;
    border-radius: 10px;
    align-self: center;
    justify-self: end;
    

}
#merchantPic9{
    width: 90%;
    grid-area: pic9;
    border-radius: 10px;
    align-self: center;
    

}
#merchP1{
    width: 80%;
    margin: auto;
    text-align: justify;
    padding-top: 20px;
}
#merchantList{
    display: grid;
    width: 80%;
    grid-template-columns: 50% 50%;
    grid-template-areas:"div0 div0" 
                        "pic1 text1"
                        "div1 div1"
                        "div2 div2"
                         "text2 pic2"
                         "div3 div3"
                         "div4 div4"
                         "pic3 text3"
                         "div5 div5"
                         "div6 div6"
                         "text4 pic4"
                         "div7 div7"
                         "div8 div8"
                         "pic5 text5"
                         "div9 div9"
                         "div10 div10"
                         "text6 pic6"
                         "div11 div11"
                         "div12 div12"
                         "pic7 text7"
                         "div13 div13"
                         "div14 div14"
                         "text8 pic8"
                         "div15 div15"
                         "div16 div16"
                         "pic9 text9"
                         ;
    margin: auto;
    
}
#space0{
    grid-area: div0;
}
#space1{
    grid-area: div1;
}
#space2{
    grid-area: div2;
}
#space3{
    grid-area: div3;
}
#space4{
    grid-area: div4;
}
#space5{
    grid-area: div5;
}
#space6{
    grid-area: div6;
}
#space7{
    grid-area: div7;
}
#space8{
    grid-area: div8;
}
#space9{
    grid-area: div9;
}
#space10{
    grid-area: div10;
}
#space11{
    grid-area: div11;
}
#space12{
    grid-area: div12;
}
#space13{
    grid-area: div13;
}
#space14{
    grid-area: div14;
}
#space15{
    grid-area: div15;
}
#space16{
    grid-area: div16;
}


#listOne{
    
    grid-area: text1;
}
#listTwo{
    
    grid-area: text2;
    
}
#listThree{
    grid-area: text3;
    
}
#listFour{
    grid-area: text4;
}
#listFive{
    grid-area: text5;
}
#listSix{
    grid-area: text6;
}
#listSeven{
    grid-area: text7;
}
#listEight{
    grid-area: text8;
}
#listNine{
    grid-area: text9;
}
#merchH3{
    grid-area: head;
    text-align: center;
    align-self: flex-end;
    display: flex;
    padding-left: 20px;
    margin: auto;
}
#merchLink a{
    color: black;
    font-size: 20px;
}
#merchH2{
    font-size: 50px;
    padding-top: 20px;

}
#merchantMain{
    background-image: radial-gradient(rgba(256,256,256, 0.5), rgba(117, 120, 136, 0.5), rgba(65, 105, 225, 0.5)  );
    width: 90%;
    margin: auto;
}

#faqMain{
    position: relative;
    margin: auto;
    width: 80%;
    display: grid;
    grid-template-areas:"pic head"
                        "pic text";
    align-items: center;
    background-image: radial-gradient(rgba(256,256,256, 0.5), rgba(117, 120, 136, 0.5), rgba(65, 105, 225, 0.5)  );
    
    }
    #faqH{
        grid-area: head;
    }
    #faqPic{
        width: 80%;    
        grid-area: pic;
        border-radius: 10px;
        margin: auto;
    }
    #faqText{
        grid-area: text;
        padding:0 20px;
        
    }
    .dropbtn {
        color: #4169E1;
    }
    
    .dropdown {
      position: relative;
      display: inline-block;
    }
    
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: white;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      font-size:16px;
      z-index: 1;
    }
    
    .dropdown-content a {
      color: #4169E1;
      padding: 12px 16px;
      text-decoration: underline;
      display: block;
    
    }
    
    /*.dropdown-content a:hover {background-color: #115714;}*/
    
    .dropdown:hover .dropdown-content {display: block;}
    
    .dropdown:hover .dropbtn {background-color: white;}
    .anchor{
        margin-top: 50px;
    }

    #b2bMain{
        position:relative;
        margin: auto;
        width:90%;
        display: grid;
        padding: 20px;
        grid-template-areas:"pic head"
                            "pic text";
                            
        align-items: center;
        background-image: radial-gradient(rgba(256,256,256, 0.5), rgba(117, 120, 136, 0.5), rgba(65, 105, 225, 0.5)  );
    
    }
    #b2bH{
        grid-area: head;
        padding: 10px;
    }
    #b2bIMG{
        width: 650px;
        height: 95%;
        grid-area: pic;
        margin: 10px;
        border-radius: 10px;
    }
    #b2bp{
        grid-area: text;
        padding: 10px;
    }
    #b2bDemo{
        margin: auto;
    }
    .demoButton a{
        color: white;
    }
    .demoButton a:hover{
        color: white;
    }
    .demoButton a:visited{
        color: white;
    }
    .spacer{
        height:50px;
    }
    /*recurring ID's*/
    #recurringMain{
        position:relative;
        margin: auto;
        width:90%;
        display:grid;
        grid-template-areas:"head head"
                            "head2 head2"
                            "text pic1"
                            "text pic2";
                            
        align-items: center;
        background-image: radial-gradient(rgba(256,256,256, 0.5), rgba(117, 120, 136, 0.5), rgba(65, 105, 225, 0.5)  );
        padding: 20px;
    }
    #recurringH{
        grid-area: head;
        margin: 10px;
    }
    #recurringH2{
        grid-area: head2;
        
        
    }
    #recurringP{
        grid-area: text;
        margin: 10px;
    }
    #recurringIMG1{
        width: 400px;
        grid-area: pic1;
        margin: 10px;
        border-radius: 10px;
    }
    #recurringIMG2{
        width: 400px;
        grid-area: pic2;
        margin: 10px;
        border-radius: 10px;
    }
    #recurringDemo{
        margin: auto;
        
    }
    #learnMore{
        color: black;
        display: grid;
        position: relative;
        padding: 20px;    
        margin-left: 16%;
        margin-top: 20px;
        width: 80%;
        background-image: linear-gradient(rgba(256,256,256, 0.5), rgba(117, 120, 136, 0.5), rgba(65, 105, 225, 0.5)  );
    
    }
    #lmSidebar{
    
        width: 15%;
        margin-top: 50px;
        position: fixed;
        float: left;
        background-color: white;
        margin-right: 5px;
        border-radius: 10px;
        z-index: 4;
    
        
        
    }
    .sbl{
        color:#4169E1;
        font-size: 18px;
        padding-top: 10px;
        text-align: center;
    }
    #lmh1{
        text-align: center;
    }
    #learnMoreImg {
    
        width:100%;
        display:flex;
        align-items: center;
        justify-content: center;
    
    
    }
    #cashFlow{
        display: grid;
        grid-template-columns: 50% 50%;
        width: 99%;
        position: relative;
    
        align-items: center;
        grid-template-areas:"lms1 lmp1"
                            
                            
                            ;
    }
    
    
    #cashText{
        grid-area: lms1;
    }
    #cash{
        grid-area: lmp1;
        justify-self: end;
        max-width: 500px;
        border-radius: 5%;
    }
    #collectionSavings{
        display: grid;
        grid-template-columns: 50% 50%;
        width: 99%;
        position: relative;
    
        align-items: center;
        grid-template-areas:"lmp2 lms2";
    }
    
    #costText{
        grid-area: lms2;
    }
    #lmp2{
        grid-area: lmp2;
        justify-self: start;
        max-width: 500px;
        border-radius: 5%;
    }
    #profitText{
        grid-area: lms3;
        
    }
    #lmp3{
        grid-area: lmp3;
        justify-self: end;
        max-width: 500px;
        border-radius: 5px;
    }
    #moreProfit{
        display: grid;
        grid-template-columns: 50% 50%;
        width: 99%;
        position: relative;
    
        align-items: center;
        grid-template-areas:"lms3 lmp3"
                            
                            
                            ;
    }
    #customerText{
        grid-area: lms4;
        
    }
    #lmp4{
        grid-area: lmp4;
        justify-self: start;
        max-width: 500px;
        border-radius: 5px;
    }
    #customerSat{
        display: grid;
        grid-template-columns: 50% 50%;
        width: 99%;
        position: relative;
        align-items: center;
        grid-template-areas: "lmp4 lms4";
    }
    #peaceText{
        grid-area: lms5;
        
    }
    #lmp5{
        grid-area: lmp5;
        justify-self: end;
        max-width: 500px;
        border-radius: 5px;
    }
    #peaceofMind{
        display: grid;
        grid-template-columns: 50% 50%;
        width: 99%;
        position: relative;
        align-items: center;
        grid-template-areas: "lms5 lmp5";    
    }
    #lmti{
        position: relative;
        background-image: url("/book-4600757_1920.jpg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        
        height: 300px;
        width:100%;
        display:flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        
    }
    #lmh1 {
        font-size: 80px;
        color: white;
        font-family: 'Barlow', sans-serif;
      -webkit-text-stroke: 0.02em black;
    }
    
    #sideNav{
        width: 80%;
        display: grid;
        margin:  auto;
    
        align-content: start;
        border-radius: 10px;    
    
    }