
     
     .row{margin-left:0; margin-right:0}/*Override because of pushing the edges*/
    .homeBannerContent{text-align:center}
    .page-section{padding: 45px 15px 45px 15px; background:white;}
    .page-section h3{padding-bottom:10px;  margin-bottom:20px;
    font-size:2.25em; font-weight:normal;
    /*text-align:center; border-bottom:3px solid #00B189*/}
    /*
    .page-section h3:after {
    content: '';
    position: absolute;
    width: 70px;
    height: 2px;
    background-color: #1bd982;
    left: 50%;
    top: 280%;
    -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
    }*/
    .subNavTrigger{color: white;
    padding: 10px;
    /*background: #00B189;*/
    border: 1px solid white;
    border-radius:5px;
    margin-right: 15px /*position:absolute; right:0*/;
    }
    
    .page-section .videoGrid{padding-top:30px}
    .imgGridItemCol{margin-bottom:20px}
    .page-section-img{width:100%; height:100%; object-fit:cover; object-position:center; margin-bottom: 30px;}
        .page-section .card .cardImgLink{/*height:100%;*/ width:100%}
    .page-section .card img{object-fit: cover;
    object-position: center;
    height: 100%;
    margin: 0 auto;
    display: block;
    width: 100%;}
    /*icon 4x is 64x64*/
    .page-section .card .video-btn .fa-play-circle{position:absolute; top:50%; margin-top:-32px; left:50%;margin-left:-32px;z-index:300; color:white; }
    
    /*
    .page-section .card a.cardImgLink:after {
    background: white;
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}*/
    .sectionContent{width:100%; margin-bottom:20px}
     .bgGray a:hover{color:white;}
    .ctaBtn{border:2px solid #00AFD7; min-width:200px}
    .ctaBtn.btn-primary{background:#00AFD7; color:white;}
    .ctaBtn.btn-primary:hover{background-color:#00caf9; color:white; border:2px solid #00caf9;}
    .ctaBtn.btn-light{}
    .btn-outline-primary:hover{border:2px solid #00caf9; color:#00caf9}
    
    .bgGreen, .bgBlue, .bgGray{color:white;}
     
    .bgGreen .ctaBtn, .bgBlue .ctaBtn, .bgGray .ctaBtn{border-color:white;}
  
  .bgGray .btn-outline-primary:hover{color:#00caf9; border:2px solid #00caf9;}
  
    .bgGray{background-color:#58585A}
    .bgBlue{background-color:#00AFD7}
    .bgGreen{background-color:#00B189}
    .bgLightGray{background-color:#e3e5e4}
    .bgLightBlue{background-color:#e3f2f6}
    .bgLightGreen{background-color:#eefffb}
    
    /*MAKE DISAPPEAR ON MOBILE OR MOVE IT*/
    #headerNavs{
  position: absolute;
    right: 0;
    display: flex;
    align-items: flex-end;
    z-index: 999;
    padding-top:15px;
    }
    
    #mainTopNav{
    margin: 0;
    display: flex;
    align-items: flex-end;
}
    #mainTopNav ul {margin:0;}
     #mainTopNav li{list-style:none; display:inline-block; margin-right:15px}   
      #mainTopNav li a, #mainTopNav li i{color:white;}
      #mainTopNav li i{font-weight:normal}
      #mainTopNav li a:hover, #mainTopNav li:hover a, #mainTopNav li:hover{color:#00AFD7}
      
      #mainTopNav li:hover ul li a{color:#58585A;}
      #mainTopNav ul li ul.subNavList{display:none;}
      #mainTopNav ul li:hover ul.subNavList{display:flex !important; flex-direction:column; background: #fff; padding:8px; border-radius:4px; 
          border:1px solid #ddd
      }
      #mainTopNav ul li ul.subNavList li a:hover{color:#00AFD7 !important;}
      
      
    #eventsNav{
     color: white;
    z-index: 999;
    position:relative;
    /*position: absolute;
    top: 25px;
    right: 25px;*/
    }
    
    
     /*Donate btn*/
     

    #eventsNav .eventNavTrigger{}
    #eventsNav ul{display:none; padding:0; margin:0; position:absolute;right:0;  background:white; min-width:200px}
    #eventsNav ul li{padding:0; margin:10px;list-style:none;}
        #eventsNav ul li a{color:#00AFD7;display:block; padding:4px 8px;}
        #eventsNav ul li:hover a{color:white;background:#00AFD7;border-radius:4px;}
        
     #eventsNav:hover,  #eventsNav:focus{}
     #eventsNav:hover ul,  #eventsNav:focus ul{
         display:block; 
     }
     
/*Move all this to the external CSS*/

    
    #videoCover{width:100%; height:100%; position:absolute;z-index:2}
    
    .videoHeader video{width:100%; height:100%; position:absolute; z-index:1; object-fit:cover}
    .page-section img{max-width:100%; height:auto}
    
     
     /*make this global in the rest of the CSS*/
     
     .card-deck .card{flex:inherit; border:none;margin-left:0; margin-right:0;/*padding:0 15px*/}
     
     .firstThreeVids, .otherVids{display:flex; width:100%}
      .otherVids{}
     @media only screen and (max-width:575px){
       .firstThreeVids, .otherVids{display:block}
       .otherVids{}
       #navTrigger{display:block !important}
       #mainTopNav{display:none;}
       #headerNavs{width: auto; 
       position: absolute;
        right: 80px;
    top: 10px;}
   #subsite #donateBtn{display:none}
      #subsite #donateBtnMobile{
             display:block;
            /* width: 100px; */
            padding: 8px 15px;
            position: absolute;
            z-index:999;
            right: 65px;
            border-radius: 5px;
            color: white;
            border: 2px solid white;
            top: 13px;
            /* background: white; */
            /* color: #007bff; */
        }

    
     }